@c8y/ngx-components 1018.0.144 → 1018.0.151

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

@@ -3,12 +3,12 @@ import * as i0 from '@angular/core';
 import { Component, Input, ViewChild, Injectable, Pipe, EventEmitter, Output, NgModule } from '@angular/core';
 import * as i1 from '@c8y/ngx-components/ecosystem/shared';
 import { packageProperties, PRODUCT_EXPERIENCE, EcosystemWizards, ApplicationPropertiesFormComponent, ERROR_TYPE, PACKAGE_TYPE_LABELS, SharedEcosystemModule } from '@c8y/ngx-components/ecosystem/shared';
-import * as i3 from '@c8y/ngx-components';
+import * as i2 from '@c8y/ngx-components';
 import { gettext, Status, ViewContext, PackageType, ApplicationPluginStatus, DataGridComponent, CoreModule, hookRoute, FormsModule, hookTab, hookNavigator, hookWizard } from '@c8y/ngx-components';
-import * as i3$1 from '@angular/common';
-import * as i3$2 from '@angular/forms';
+import * as i3 from '@angular/common';
+import * as i3$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from '@c8y/client';
+import * as i2$1 from '@c8y/client';
 import { Isolation, BillingMode, ApplicationType, ApplicationAvailability } from '@c8y/client';
 import { isEmpty } from 'lodash';
 import * as i1$1 from 'ngx-bootstrap/modal';
@@ -108,12 +108,12 @@ class ActivityLogComponent {
         });
     }
 }
-ActivityLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ActivityLogComponent, deps: [{ token: i1.EcosystemService }, { token: i3.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-ActivityLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ActivityLogComponent, selector: "c8y-activity-log", inputs: { application: "application", hasAdminPermissions: "hasAdminPermissions" }, ngImport: i0, template: "<div class=\"inner-scroll bg-level-1 flex-grow\">\n  <div class=\"card-block overflow-visible\">\n    <c8y-list-group>\n      <c8y-li-timeline *ngFor=\"let archive of archives\" [ngClass]=\"{ active: isActive(archive) }\">\n        {{ archive.created | date: 'd MMM YYYY' }}\n        {{ archive.created | date: 'shortTime' }}\n        <c8y-li>\n          <c8y-li-icon\n            [icon]=\"checkIfLast(archive) ? 'flag-checkered' : 'file-zip-o'\"\n          ></c8y-li-icon>\n          <c8y-li-body>\n            <div class=\"d-flex a-i-start\">\n              <div style=\"min-width: 0; flex: 1\">\n                <span class=\"text-truncate-wrap\" title=\" {{ archive.description || archive.name }}\">\n                  {{ archive.description || archive.name }}\n                </span>\n                <small *ngIf=\"archive.description\" class=\"text-muted\">{{\n                  archive.description\n                }}</small>\n              </div>\n              <i\n                *ngIf=\"isLoading && toActivate(archive)\"\n                [c8yIcon]=\"'circle-o-notch'\"\n                class=\"icon-spin\"\n                title=\"{{ 'Activating' | translate }}\"\n              ></i>\n\n              <span *ngIf=\"isActive(archive)\" class=\"label label-primary m-l-auto m-t-4\">{{\n                'Active' | translate\n              }}</span>\n            </div>\n          </c8y-li-body>\n          <c8y-li-action\n            (click)=\"setActive(archive)\"\n            *ngIf=\"hasAdminPermissions && !isLoading && !isActive(archive)\"\n            icon=\"check-square-o\"\n          >\n            {{ 'Set as active`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action (click)=\"downloadArchive(archive)\" icon=\"download\">\n            {{ 'Download`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action\n            (click)=\"deleteArchive(archive)\"\n            *ngIf=\"\n              hasAdminPermissions &&\n              archives.length > 1 &&\n              !checkIfLast(archive) &&\n              !isActive(archive)\n            \"\n            icon=\"delete\"\n          >\n            {{ 'Delete`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action\n            (click)=\"reactivateArchive()\"\n            *ngIf=\"hasAdminPermissions && canReactivate && isActive(archive)\"\n            icon=\"undo\"\n          >\n            {{ 'Reactivate archive' | translate }}\n          </c8y-li-action>\n        </c8y-li>\n      </c8y-li-timeline>\n    </c8y-list-group>\n  </div>\n</div>\n<div class=\"card-footer\" *ngIf=\"!isLoading && hasAdminPermissions\">\n  <c8y-form-group class=\"m-auto\">\n    <c8y-upload-archive [(application)]=\"application\" (refresh)=\"onRefresh()\"></c8y-upload-archive>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon"], outputs: ["click"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: i1.UploadArchiveComponent, selector: "c8y-upload-archive", inputs: ["application", "uploadNewVersion", "preUploadCallback"], outputs: ["applicationChange", "refresh"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }] });
+ActivityLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ActivityLogComponent, deps: [{ token: i1.EcosystemService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ActivityLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ActivityLogComponent, selector: "c8y-activity-log", inputs: { application: "application", hasAdminPermissions: "hasAdminPermissions" }, ngImport: i0, template: "<div class=\"inner-scroll bg-level-1 flex-grow\">\n  <div class=\"card-block overflow-visible\">\n    <c8y-list-group>\n      <c8y-li-timeline *ngFor=\"let archive of archives\" [ngClass]=\"{ active: isActive(archive) }\">\n        {{ archive.created | date: 'd MMM YYYY' }}\n        {{ archive.created | date: 'shortTime' }}\n        <c8y-li>\n          <c8y-li-icon\n            [icon]=\"checkIfLast(archive) ? 'flag-checkered' : 'file-zip-o'\"\n          ></c8y-li-icon>\n          <c8y-li-body>\n            <div class=\"d-flex a-i-start\">\n              <div style=\"min-width: 0; flex: 1\">\n                <span class=\"text-truncate-wrap\" title=\" {{ archive.description || archive.name }}\">\n                  {{ archive.description || archive.name }}\n                </span>\n                <small *ngIf=\"archive.description\" class=\"text-muted\">{{\n                  archive.description\n                }}</small>\n              </div>\n              <i\n                *ngIf=\"isLoading && toActivate(archive)\"\n                [c8yIcon]=\"'circle-o-notch'\"\n                class=\"icon-spin\"\n                title=\"{{ 'Activating' | translate }}\"\n              ></i>\n\n              <span *ngIf=\"isActive(archive)\" class=\"label label-primary m-l-auto m-t-4\">{{\n                'Active' | translate\n              }}</span>\n            </div>\n          </c8y-li-body>\n          <c8y-li-action\n            (click)=\"setActive(archive)\"\n            *ngIf=\"hasAdminPermissions && !isLoading && !isActive(archive)\"\n            icon=\"check-square-o\"\n          >\n            {{ 'Set as active`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action (click)=\"downloadArchive(archive)\" icon=\"download\">\n            {{ 'Download`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action\n            (click)=\"deleteArchive(archive)\"\n            *ngIf=\"\n              hasAdminPermissions &&\n              archives.length > 1 &&\n              !checkIfLast(archive) &&\n              !isActive(archive)\n            \"\n            icon=\"delete\"\n          >\n            {{ 'Delete`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action\n            (click)=\"reactivateArchive()\"\n            *ngIf=\"hasAdminPermissions && canReactivate && isActive(archive)\"\n            icon=\"undo\"\n          >\n            {{ 'Reactivate archive' | translate }}\n          </c8y-li-action>\n        </c8y-li>\n      </c8y-li-timeline>\n    </c8y-list-group>\n  </div>\n</div>\n<div class=\"card-footer\" *ngIf=\"!isLoading && hasAdminPermissions\">\n  <c8y-form-group class=\"m-auto\">\n    <c8y-upload-archive [(application)]=\"application\" (refresh)=\"onRefresh()\"></c8y-upload-archive>\n  </c8y-form-group>\n</div>\n", dependencies: [{ 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.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon"], outputs: ["click"] }, { kind: "component", type: i2.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: i1.UploadArchiveComponent, selector: "c8y-upload-archive", inputs: ["application", "uploadNewVersion", "preUploadCallback"], outputs: ["applicationChange", "refresh"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ActivityLogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-activity-log', template: "<div class=\"inner-scroll bg-level-1 flex-grow\">\n  <div class=\"card-block overflow-visible\">\n    <c8y-list-group>\n      <c8y-li-timeline *ngFor=\"let archive of archives\" [ngClass]=\"{ active: isActive(archive) }\">\n        {{ archive.created | date: 'd MMM YYYY' }}\n        {{ archive.created | date: 'shortTime' }}\n        <c8y-li>\n          <c8y-li-icon\n            [icon]=\"checkIfLast(archive) ? 'flag-checkered' : 'file-zip-o'\"\n          ></c8y-li-icon>\n          <c8y-li-body>\n            <div class=\"d-flex a-i-start\">\n              <div style=\"min-width: 0; flex: 1\">\n                <span class=\"text-truncate-wrap\" title=\" {{ archive.description || archive.name }}\">\n                  {{ archive.description || archive.name }}\n                </span>\n                <small *ngIf=\"archive.description\" class=\"text-muted\">{{\n                  archive.description\n                }}</small>\n              </div>\n              <i\n                *ngIf=\"isLoading && toActivate(archive)\"\n                [c8yIcon]=\"'circle-o-notch'\"\n                class=\"icon-spin\"\n                title=\"{{ 'Activating' | translate }}\"\n              ></i>\n\n              <span *ngIf=\"isActive(archive)\" class=\"label label-primary m-l-auto m-t-4\">{{\n                'Active' | translate\n              }}</span>\n            </div>\n          </c8y-li-body>\n          <c8y-li-action\n            (click)=\"setActive(archive)\"\n            *ngIf=\"hasAdminPermissions && !isLoading && !isActive(archive)\"\n            icon=\"check-square-o\"\n          >\n            {{ 'Set as active`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action (click)=\"downloadArchive(archive)\" icon=\"download\">\n            {{ 'Download`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action\n            (click)=\"deleteArchive(archive)\"\n            *ngIf=\"\n              hasAdminPermissions &&\n              archives.length > 1 &&\n              !checkIfLast(archive) &&\n              !isActive(archive)\n            \"\n            icon=\"delete\"\n          >\n            {{ 'Delete`archive`' | translate }}\n          </c8y-li-action>\n          <c8y-li-action\n            (click)=\"reactivateArchive()\"\n            *ngIf=\"hasAdminPermissions && canReactivate && isActive(archive)\"\n            icon=\"undo\"\n          >\n            {{ 'Reactivate archive' | translate }}\n          </c8y-li-action>\n        </c8y-li>\n      </c8y-li-timeline>\n    </c8y-list-group>\n  </div>\n</div>\n<div class=\"card-footer\" *ngIf=\"!isLoading && hasAdminPermissions\">\n  <c8y-form-group class=\"m-auto\">\n    <c8y-upload-archive [(application)]=\"application\" (refresh)=\"onRefresh()\"></c8y-upload-archive>\n  </c8y-form-group>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i3.AlertService }]; }, propDecorators: { application: [{
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2.AlertService }]; }, propDecorators: { application: [{
                 type: Input
             }], hasAdminPermissions: [{
                 type: Input
@@ -211,12 +211,12 @@ class SubscriptionModalComponent {
         this.modal.acknowledge(title, body, Status.WARNING, gettext('Close'));
     }
 }
-SubscriptionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SubscriptionModalComponent, deps: [{ token: i1$1.BsModalRef }, { token: i1.EcosystemService }, { token: i3.TabsService }, { token: i3.ModalService }, { token: i2.ApplicationService }, { token: i3.AlertService }, { token: i3.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component });
-SubscriptionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SubscriptionModalComponent, selector: "c8y-subscription-modal", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"c8y-atom\"></i>\n    <h4 id=\"modal-title\">{{ message }}</h4>\n  </div>\n  <div class=\"modal-body\" id=\"modal-body\" *ngIf=\"isLoading\">\n    <div class=\"p-16 text-center\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading" }] });
+SubscriptionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SubscriptionModalComponent, deps: [{ token: i1$1.BsModalRef }, { token: i1.EcosystemService }, { token: i2.TabsService }, { token: i2.ModalService }, { token: i2$1.ApplicationService }, { token: i2.AlertService }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component });
+SubscriptionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SubscriptionModalComponent, selector: "c8y-subscription-modal", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"c8y-atom\"></i>\n    <h4 id=\"modal-title\">{{ message }}</h4>\n  </div>\n  <div class=\"modal-body\" id=\"modal-body\" *ngIf=\"isLoading\">\n    <div class=\"p-16 text-center\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SubscriptionModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-subscription-modal', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"c8y-atom\"></i>\n    <h4 id=\"modal-title\">{{ message }}</h4>\n  </div>\n  <div class=\"modal-body\" id=\"modal-body\" *ngIf=\"isLoading\">\n    <div class=\"p-16 text-center\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i1.EcosystemService }, { type: i3.TabsService }, { type: i3.ModalService }, { type: i2.ApplicationService }, { type: i3.AlertService }, { type: i3.ContextRouteService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i1.EcosystemService }, { type: i2.TabsService }, { type: i2.ModalService }, { type: i2$1.ApplicationService }, { type: i2.AlertService }, { type: i2.ContextRouteService }]; } });
 
 class UpdateApplicationModalComponent {
     constructor(inventoryService, ecosystemService, applicationService, alertService) {
@@ -248,15 +248,22 @@ class UpdateApplicationModalComponent {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 const binaryMoId = this.sourcePackage.activeVersionId;
-                yield this.uploadNewBinary(binaryMoId);
+                yield this.inventoryService.detail(binaryMoId); // only trying if we can access it
+                yield this.ecosystemService.uploadBinaryFromOtherPackage(this.sourcePackage, this.application, this.sourcePackage.activeVersionId);
             }
             catch (e) {
                 if (((_a = e.res) === null || _a === void 0 ? void 0 : _a.status) === 404) {
-                    yield this.fallBackToCloneUpdate();
+                    try {
+                        this.updateFailure = !(yield this.ecosystemService.fallbackToClone(this.application, this.sourcePackage));
+                    }
+                    catch (ex) {
+                        this.updateFailure = true;
+                        this.ecosystemService.alertError(e);
+                    }
                 }
                 else {
                     this.updateFailure = true;
-                    this.alertService.addServerFailure(e);
+                    this.ecosystemService.alertError(e);
                 }
             }
             finally {
@@ -264,35 +271,13 @@ class UpdateApplicationModalComponent {
             }
         });
     }
-    uploadNewBinary(binaryMoId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { data: binaryMo } = yield this.inventoryService.detail(binaryMoId);
-            const binary = yield this.inventoryService.binary.download(binaryMo.id);
-            const blob = yield binary.blob();
-            const file = new File([blob], binaryMo.name);
-            const app = yield this.ecosystemService.uploadArchiveToApp(file, this.application, false);
-            yield this.ecosystemService.updateAppManifest(app, this.sourcePackage);
-        });
-    }
-    fallBackToCloneUpdate() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const { data: clonedApp } = yield this.applicationService.clone(this.sourcePackage);
-                yield this.uploadNewBinary(clonedApp.activeVersionId);
-                yield this.ecosystemService.deleteApp(clonedApp, true);
-            }
-            catch (e) {
-                this.alertService.addServerFailure(e);
-            }
-        });
-    }
 }
-UpdateApplicationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UpdateApplicationModalComponent, deps: [{ token: i2.InventoryService }, { token: i1.EcosystemService }, { token: i2.ApplicationService }, { token: i3.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-UpdateApplicationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UpdateApplicationModalComponent, selector: "c8y-update-application-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Update application' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n  #modal\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-installing-updates\"></span>\n  </ng-container>\n\n  <c8y-progress-bar\n    *ngIf=\"isUpdateOngoing\"\n    [message]=\"'Updating\u2026' | translate\"\n    class=\"text-center d-block p-t-56 p-b-56 m-t-4 m-b-4\"\n    style=\"min-height: 180px\"\n  ></c8y-progress-bar>\n\n  <c8y-operation-result\n    *ngIf=\"!isUpdateOngoing && !updateFailure\"\n    text=\"{{ 'Update completed' | translate }}\"\n    [size]=\"120\"\n    [vertical]=\"true\"\n    type=\"success\"\n  ></c8y-operation-result>\n  <c8y-operation-result\n    *ngIf=\"!isUpdateOngoing && updateFailure\"\n    text=\"{{ 'Failed to update application.' | translate }}\"\n    [size]=\"120\"\n    [vertical]=\"true\"\n    type=\"error\"\n  ></c8y-operation-result>\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Close' | translate }}\"\n      [disabled]=\"isUpdateOngoing\"\n      class=\"btn btn-default\"\n      (click)=\"done()\"\n    >\n      {{ 'Close' | translate }}\n    </button>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: i3.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
+UpdateApplicationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UpdateApplicationModalComponent, deps: [{ token: i2$1.InventoryService }, { token: i1.EcosystemService }, { token: i2$1.ApplicationService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+UpdateApplicationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UpdateApplicationModalComponent, selector: "c8y-update-application-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Update application' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n  #modal\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-installing-updates\"></span>\n  </ng-container>\n\n  <c8y-progress-bar\n    *ngIf=\"isUpdateOngoing\"\n    [message]=\"'Updating\u2026' | translate\"\n    class=\"text-center d-block p-t-56 p-b-56 m-t-4 m-b-4\"\n    style=\"min-height: 180px\"\n  ></c8y-progress-bar>\n\n  <c8y-operation-result\n    *ngIf=\"!isUpdateOngoing && !updateFailure\"\n    text=\"{{ 'Update completed' | translate }}\"\n    [size]=\"120\"\n    [vertical]=\"true\"\n    type=\"success\"\n  ></c8y-operation-result>\n  <c8y-operation-result\n    *ngIf=\"!isUpdateOngoing && updateFailure\"\n    text=\"{{ 'Failed to update application.' | translate }}\"\n    [size]=\"120\"\n    [vertical]=\"true\"\n    type=\"error\"\n  ></c8y-operation-result>\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Close' | translate }}\"\n      [disabled]=\"isUpdateOngoing\"\n      class=\"btn btn-default\"\n      (click)=\"done()\"\n    >\n      {{ 'Close' | translate }}\n    </button>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UpdateApplicationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-update-application-modal', template: "<c8y-modal\n  [title]=\"'Update application' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n  #modal\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-installing-updates\"></span>\n  </ng-container>\n\n  <c8y-progress-bar\n    *ngIf=\"isUpdateOngoing\"\n    [message]=\"'Updating\u2026' | translate\"\n    class=\"text-center d-block p-t-56 p-b-56 m-t-4 m-b-4\"\n    style=\"min-height: 180px\"\n  ></c8y-progress-bar>\n\n  <c8y-operation-result\n    *ngIf=\"!isUpdateOngoing && !updateFailure\"\n    text=\"{{ 'Update completed' | translate }}\"\n    [size]=\"120\"\n    [vertical]=\"true\"\n    type=\"success\"\n  ></c8y-operation-result>\n  <c8y-operation-result\n    *ngIf=\"!isUpdateOngoing && updateFailure\"\n    text=\"{{ 'Failed to update application.' | translate }}\"\n    [size]=\"120\"\n    [vertical]=\"true\"\n    type=\"error\"\n  ></c8y-operation-result>\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Close' | translate }}\"\n      [disabled]=\"isUpdateOngoing\"\n      class=\"btn btn-default\"\n      (click)=\"done()\"\n    >\n      {{ 'Close' | translate }}\n    </button>\n  </div>\n</c8y-modal>\n" }]
-        }], ctorParameters: function () { return [{ type: i2.InventoryService }, { type: i1.EcosystemService }, { type: i2.ApplicationService }, { type: i3.AlertService }]; }, propDecorators: { modal: [{
+        }], ctorParameters: function () { return [{ type: i2$1.InventoryService }, { type: i1.EcosystemService }, { type: i2$1.ApplicationService }, { type: i2.AlertService }]; }, propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['modal', { static: false }]
             }] } });
@@ -475,6 +460,8 @@ class ApplicationPropertiesComponent {
                 yield this.bsModalService.show(UpdateApplicationModalComponent, {
                     ariaDescribedby: 'modal-body',
                     ariaLabelledBy: 'modal-title',
+                    class: 'modal-sm',
+                    ignoreBackdropClick: true,
                     initialState: {
                         sourcePackage: this.sourcePackage,
                         application: this.application
@@ -517,7 +504,7 @@ class ApplicationPropertiesComponent {
                         label: gettext('Source package'),
                         value: this.sourcePackage.name,
                         type: 'link',
-                        action: () => this.router.navigateByUrl(ViewContext.Application.replace(':id', this.sourcePackage.id.toString()))
+                        action: () => this.router.navigateByUrl(ViewContext.Extension.replace(':id', this.sourcePackage.id.toString()))
                     });
                 }
             }
@@ -589,12 +576,12 @@ class ApplicationPropertiesComponent {
         });
     }
 }
-ApplicationPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationPropertiesComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$2.Router }, { token: i3$2.FormBuilder }, { token: i2.ApplicationService }, { token: i3.AlertService }, { token: i2.InventoryService }, { token: i3.Permissions }, { token: i3.ModalService }, { token: i4.TranslateService }, { token: i1$1.BsModalService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 [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\n    *ngIf=\"isFeature\"\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<c8y-breadcrumb *ngIf=\"isMicroservice\">\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></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      *ngIf=\"application\"\n      [ngClass]=\"{ 'd-grid grid__col--7-5--md': isActivityLogSupported }\"\n      class=\"card content-fullpage\"\n    >\n      <form\n        (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n        [formGroup]=\"formGroup\"\n        class=\"d-flex d-col content-fullpage\"\n        novalidate\n      >\n        <div *ngIf=\"!isLoading\" class=\"d-contents\">\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                *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n                [app]=\"application\"\n                [contextPath]=\"application.contextPath\"\n                [name]=\"application.name\"\n                class=\"icon-48\"\n              ></c8y-app-icon>\n              <i *ngIf=\"isPackage\" c8yIcon=\"big-parcel\" class=\"icon-48\"></i>\n              <i *ngIf=\"isFeature\" c8yIcon=\"tab\" class=\"icon-48\"></i>\n              <i *ngIf=\"isMicroservice\" c8yIcon=\"microchip\" class=\"icon-48\"></i>\n              <i *ngIf=\"isExternal\" c8yIcon=\"globe1\" class=\"icon-48\"></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 ||\n                        ('No description available.' | translate)\n                    }}\n                  </em>\n                </p>\n                <div *ngIf=\"isOwner\" class=\"form-group m-b-0\">\n                  <label\n                    [ngClass]=\"{ updated: formGroup?.controls?.description?.dirty }\"\n                    class=\"editable\"\n                  >\n                    <textarea\n                      c8y-textarea-autoresize\n                      class=\"form-control no-resize\"\n                      formControlName=\"description\"\n                      name=\"description\"\n                      placeholder=\"{{ 'No description available.' | translate }}\"\n                    ></textarea>\n                  </label>\n                </div>\n              </div>\n              <div class=\"text-right-md m-t-4\">\n                <span [ngClass]=\"appState?.class\" class=\"label\">\n                  {{ appState?.label | translate }}\n                </span>\n                <div class=\"fit-w m-t-2\" *ngIf=\"isPackage || isMicroservice\">\n                  <label class=\"text-label-small\" translate>Version:</label>\n                  <small class=\"p-l-4 text-bold\">{{ application.manifest?.version }}</small>\n                </div>\n                <div class=\"fit-w m-t-2\">\n                  <label class=\"text-label-small\" translate>Creation time:</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                    type=\"button\"\n                    *ngIf=\"isUpdateAvailable\"\n                    (click)=\"updateToLatestVersion()\"\n                    class=\"btn btn-default btn-sm\"\n                    tooltip=\"{{ 'There\\'s a newer version available, click to update' | translate}}\"\n                    [attr.aria-label]=\"'There\\'s a newer version available, click to update' | translate\"\n                    [delay]=\"300\"\n                    placement=\"top\"\n                  >\n                    <i [c8yIcon]=\"'installing-updates'\"></i>\n                    {{ 'Update available' | translate }}\n                  </button>\n                  <button\n                    (click)=\"openApp(application)\"\n                    [disabled]=\"disableOpenInBrowser\"\n                    *ngIf=\"canOpenInBrowser\"\n                    class=\"btn btn-default btn-sm\"\n                    title=\"{{ 'Open' | translate }}\"\n                    type=\"button\"\n                  >\n                    <i [c8yIcon]=\"'external-link'\"></i>\n                    {{ 'Open' | translate }}\n                  </button>\n                  <div *ngIf=\"canOpenInBrowser && disableOpenInBrowser\">\n                    <small class=\"text-muted\" translate>\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                      type=\"button\"\n                      title=\"{{ 'Subscribe' | translate }}\"\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                      type=\"button\"\n                      title=\"{{ 'Unsubscribe' | translate }}\"\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 *ngIf=\"isPackage\" class=\"row p-16\">\n                <c8y-properties-list\n                  [data]=\"application.manifest\"\n                  [properties]=\"packageProperties\"\n                  [title]=\"'Package details' | translate\"\n                  [emptyLabel]=\"'---'\"\n                  icon=\"info\"\n                ></c8y-properties-list>\n              </div>\n              <div *ngIf=\"sourcePackage\" class=\"row p-16\">\n                <c8y-properties-list\n                  [data]=\"sourcePackage.manifest\"\n                  [properties]=\"packageProperties\"\n                  [title]=\"'Source package information' | translate\"\n                  [emptyLabel]=\"'---'\"\n                  icon=\"info\"\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                      [readonly]=\"true\"\n                      autocomplete=\"off\"\n                      class=\"form-control\"\n                      formControlName=\"id\"\n                      name=\"id\"\n                      id=\"appId\"\n                      type=\"text\"\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                      [readonly]=\"!isOwner\"\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                </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                      [readonly]=\"application.id || !isOwner\"\n                      class=\"form-control\"\n                      name=\"key\"\n                      formControlName=\"key\"\n                      placeholder=\"{{ 'e.g. my-application-key' | translate }}\"\n                      required\n                      type=\"text\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-7\">\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-microservice`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\n                        formControlName=\"contextPath\"\n                      />\n                    </div>\n                  </c8y-form-group>\n                  <div class=\"row\">\n                    <div *ngIf=\"application.manifest.version\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Version' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        {{ application.manifest.version }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"application.manifest.isolation\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Isolation' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span *ngIf=\"singleTenant\">\n                          <i [c8yIcon]=\"'c8y-enterprise'\" class=\"c8y-icon-duocolor h4\"></i>\n                          {{ 'Single tenant' | translate }}\n                        </span>\n                        <span *ngIf=\"!singleTenant\">\n                          <i [c8yIcon]=\"'c8y-sub-tenants'\" class=\"c8y-icon-duocolor icon-32\"></i>\n                          {{ 'Multi tenant' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                    <div *ngIf=\"application.manifest.isolation\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Billing mode' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span\n                          *ngIf=\"subscription\"\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                        >\n                          {{ 'Subscription' | translate }}\n                        </span>\n                        <span\n                          *ngIf=\"!subscription && singleTenant\"\n                          [tooltip]=\"'Resources usage assigned to: Subscriber | translate'\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                        <span\n                          *ngIf=\"!subscription && !singleTenant\"\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <div *ngIf=\"application.manifest.provider\" class=\"legend form-block m-t-40\">\n                    {{ 'Provider' | translate }}\n                  </div>\n                  <div class=\"list-inline\" *ngIf=\"application.manifest.provider\">\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=\"'REPOSITORY'\">\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        formControlName=\"contextPath\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\n                      />\n                    </div>\n                  </c8y-form-group>\n\n                  <c8y-form-group>\n                    <label>{{ 'Server URL' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      name=\"resourcesUrl\"\n                      formControlName=\"resourcesUrl\"\n                      placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                      required\n                      type=\"url\"\n                    />\n                  </c8y-form-group>\n\n                  <div class=\"form-group\">\n                    <label>{{ 'Username' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      formControlName=\"username\"\n                      name=\"username\"\n                      type=\"text\"\n                    />\n                  </div>\n\n                  <div class=\"form-group\">\n                    <label>{{ 'Password' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      formControlName=\"password\"\n                      name=\"password\"\n                      type=\"text\"\n                    />\n                  </div>\n                </div>\n\n                <div *ngSwitchCase=\"'EXTERNAL'\">\n                  <c8y-form-group>\n                    <label>{{ 'External URL' | translate }}</label>\n                    <input\n                      [pattern]=\"'^(?!javascript:).+'\"\n                      [readOnly]=\"!isOwner\"\n                      class=\"form-control\"\n                      formControlName=\"externalUrl\"\n                      name=\"externalUrl\"\n                      placeholder=\"{{ 'e.g.' | translate }} http://www.example.com/\"\n                      required\n                      type=\"url\"\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              </div>\n            </div>\n          </div>\n          <ng-container *ngIf=\"isCustomMicroservice\">\n            <div *ngIf=\"!isLoading\" class=\"d-contents\">\n              <c8y-upload-archive\n                [(application)]=\"application\"\n                (refresh)=\"onNewArchive()\"\n              ></c8y-upload-archive>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"application && !!isOwner && hasAdminPermissions\"\n            class=\"card-footer separator\"\n          >\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Cancel' | translate }}\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Cancel' | translate }}\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              type=\"button\"\n              title=\"{{ 'Delete' | translate }}\"\n              (click)=\"delete()\"\n              *ngIf=\"canDelete\"\n            >\n              {{ 'Delete' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary btn-form\"\n              type=\"submit\"\n              title=\"{{ 'Save' | translate }}\"\n              [disabled]=\"!application.type || formGroup.invalid || formGroup.pristine\"\n            >\n              {{ 'Save' | translate }}\n            </button>\n          </div>\n        </div>\n      </form>\n\n      <div *ngIf=\"isActivityLogSupported\" class=\"content-fullpage d-flex d-col bg-level-1\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\" translate>Activity log</div>\n          <div class=\"m-l-auto\">\n            <button\n              class=\"btn btn-link btn-sm\"\n              type=\"button\"\n              title=\"{{ 'Reload' | translate }}\"\n              (click)=\"load()\"\n            >\n              <i [ngClass]=\"{ 'icon-spin': isLoading }\" c8yIcon=\"refresh\"></i>\n              {{ 'Reload' | translate }}\n            </button>\n          </div>\n        </div>\n        <div *ngIf=\"isLoading\" class=\"p-16 text-center\">\n          <c8y-loading></c8y-loading>\n        </div>\n        <c8y-activity-log\n          *ngIf=\"!isLoading\"\n          [hasAdminPermissions]=\"hasAdminPermissions\"\n          [application]=\"application\"\n          class=\"d-contents\"\n        ></c8y-activity-log>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading" }, { kind: "directive", type: i3.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.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: ActivityLogComponent, selector: "c8y-activity-log", inputs: ["application", "hasAdminPermissions"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }] });
+ApplicationPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationPropertiesComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$2.Router }, { token: i3$1.FormBuilder }, { token: i2$1.ApplicationService }, { token: i2.AlertService }, { token: i2$1.InventoryService }, { token: i2.Permissions }, { token: i2.ModalService }, { token: i4.TranslateService }, { token: i1$1.BsModalService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+ApplicationPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 [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\n    *ngIf=\"isFeature\"\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<c8y-breadcrumb *ngIf=\"isMicroservice\">\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></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      *ngIf=\"application\"\n      [ngClass]=\"{ 'd-grid grid__col--7-5--md': isActivityLogSupported }\"\n      class=\"card content-fullpage\"\n    >\n      <form\n        (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n        [formGroup]=\"formGroup\"\n        class=\"d-flex d-col content-fullpage\"\n        novalidate\n      >\n        <div *ngIf=\"!isLoading\" class=\"d-contents\">\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                *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n                [app]=\"application\"\n                [contextPath]=\"application.contextPath\"\n                [name]=\"application.name\"\n                class=\"icon-48\"\n              ></c8y-app-icon>\n              <i *ngIf=\"isPackage\" c8yIcon=\"big-parcel\" class=\"icon-48\"></i>\n              <i *ngIf=\"isFeature\" c8yIcon=\"tab\" class=\"icon-48\"></i>\n              <i *ngIf=\"isMicroservice\" c8yIcon=\"microchip\" class=\"icon-48\"></i>\n              <i *ngIf=\"isExternal\" c8yIcon=\"globe1\" class=\"icon-48\"></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 ||\n                        ('No description available.' | translate)\n                    }}\n                  </em>\n                </p>\n                <div *ngIf=\"isOwner\" class=\"form-group m-b-0\">\n                  <label\n                    [ngClass]=\"{ updated: formGroup?.controls?.description?.dirty }\"\n                    class=\"editable\"\n                  >\n                    <textarea\n                      c8y-textarea-autoresize\n                      class=\"form-control no-resize\"\n                      formControlName=\"description\"\n                      name=\"description\"\n                      placeholder=\"{{ 'No description available.' | translate }}\"\n                    ></textarea>\n                  </label>\n                </div>\n              </div>\n              <div class=\"text-right-md m-t-4\">\n                <span [ngClass]=\"appState?.class\" class=\"label\">\n                  {{ appState?.label | translate }}\n                </span>\n                <div\n                  class=\"fit-w m-t-2\"\n                  *ngIf=\"isPackage || isMicroservice || isUnpacked\"\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                    type=\"button\"\n                    *ngIf=\"isUpdateAvailable\"\n                    (click)=\"updateToLatestVersion()\"\n                    class=\"btn btn-default btn-sm\"\n                    tooltip=\"{{ 'There\\'s a newer version available, click to update' | translate}}\"\n                    [attr.aria-label]=\"'There\\'s a newer version available, click to update' | translate\"\n                    [delay]=\"300\"\n                    placement=\"top\"\n                  >\n                    <i [c8yIcon]=\"'installing-updates'\"></i>\n                    {{ 'Update available' | translate }}\n                  </button>\n                  <button\n                    (click)=\"openApp(application)\"\n                    [disabled]=\"disableOpenInBrowser\"\n                    *ngIf=\"canOpenInBrowser\"\n                    class=\"btn btn-default btn-sm\"\n                    title=\"{{ 'Open' | translate }}\"\n                    type=\"button\"\n                  >\n                    <i [c8yIcon]=\"'external-link'\"></i>\n                    {{ 'Open' | translate }}\n                  </button>\n                  <div *ngIf=\"canOpenInBrowser && disableOpenInBrowser\">\n                    <small class=\"text-muted\" translate>\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                      type=\"button\"\n                      title=\"{{ 'Subscribe' | translate }}\"\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                      type=\"button\"\n                      title=\"{{ 'Unsubscribe' | translate }}\"\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 *ngIf=\"isPackage\" class=\"row p-16\">\n                <c8y-properties-list\n                  [data]=\"application.manifest\"\n                  [properties]=\"packageProperties\"\n                  [title]=\"'Package details' | translate\"\n                  [emptyLabel]=\"'---'\"\n                  icon=\"info\"\n                ></c8y-properties-list>\n              </div>\n              <div *ngIf=\"sourcePackage\" class=\"row p-16\">\n                <c8y-properties-list\n                  [data]=\"sourcePackage.manifest\"\n                  [properties]=\"packageProperties\"\n                  [title]=\"'Source package information' | translate\"\n                  [emptyLabel]=\"'---'\"\n                  icon=\"info\"\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                      [readonly]=\"true\"\n                      autocomplete=\"off\"\n                      class=\"form-control\"\n                      formControlName=\"id\"\n                      name=\"id\"\n                      id=\"appId\"\n                      type=\"text\"\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                      [readonly]=\"!isOwner\"\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                </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                      [readonly]=\"application.id || !isOwner\"\n                      class=\"form-control\"\n                      name=\"key\"\n                      formControlName=\"key\"\n                      placeholder=\"{{ 'e.g. my-application-key' | translate }}\"\n                      required\n                      type=\"text\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-7\">\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-microservice`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\n                        formControlName=\"contextPath\"\n                      />\n                    </div>\n                  </c8y-form-group>\n                  <div class=\"row\">\n                    <div *ngIf=\"application.manifest.version\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Version' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        {{ application.manifest.version }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"application.manifest.isolation\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Isolation' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span *ngIf=\"singleTenant\">\n                          <i [c8yIcon]=\"'c8y-enterprise'\" class=\"c8y-icon-duocolor h4\"></i>\n                          {{ 'Single tenant' | translate }}\n                        </span>\n                        <span *ngIf=\"!singleTenant\">\n                          <i [c8yIcon]=\"'c8y-sub-tenants'\" class=\"c8y-icon-duocolor icon-32\"></i>\n                          {{ 'Multi tenant' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                    <div *ngIf=\"application.manifest.isolation\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Billing mode' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span\n                          *ngIf=\"subscription\"\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                        >\n                          {{ 'Subscription' | translate }}\n                        </span>\n                        <span\n                          *ngIf=\"!subscription && singleTenant\"\n                          [tooltip]=\"'Resources usage assigned to: Subscriber | translate'\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                        <span\n                          *ngIf=\"!subscription && !singleTenant\"\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <div *ngIf=\"application.manifest.provider\" class=\"legend form-block m-t-40\">\n                    {{ 'Provider' | translate }}\n                  </div>\n                  <div class=\"list-inline\" *ngIf=\"application.manifest.provider\">\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=\"'REPOSITORY'\">\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        formControlName=\"contextPath\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\n                      />\n                    </div>\n                  </c8y-form-group>\n\n                  <c8y-form-group>\n                    <label>{{ 'Server URL' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      name=\"resourcesUrl\"\n                      formControlName=\"resourcesUrl\"\n                      placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                      required\n                      type=\"url\"\n                    />\n                  </c8y-form-group>\n\n                  <div class=\"form-group\">\n                    <label>{{ 'Username' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      formControlName=\"username\"\n                      name=\"username\"\n                      type=\"text\"\n                    />\n                  </div>\n\n                  <div class=\"form-group\">\n                    <label>{{ 'Password' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      formControlName=\"password\"\n                      name=\"password\"\n                      type=\"text\"\n                    />\n                  </div>\n                </div>\n\n                <div *ngSwitchCase=\"'EXTERNAL'\">\n                  <c8y-form-group>\n                    <label>{{ 'External URL' | translate }}</label>\n                    <input\n                      [pattern]=\"'^(?!javascript:).+'\"\n                      [readOnly]=\"!isOwner\"\n                      class=\"form-control\"\n                      formControlName=\"externalUrl\"\n                      name=\"externalUrl\"\n                      placeholder=\"{{ 'e.g.' | translate }} http://www.example.com/\"\n                      required\n                      type=\"url\"\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              </div>\n            </div>\n          </div>\n          <ng-container *ngIf=\"isCustomMicroservice\">\n            <div *ngIf=\"!isLoading\" class=\"d-contents\">\n              <c8y-upload-archive\n                [(application)]=\"application\"\n                (refresh)=\"onNewArchive()\"\n              ></c8y-upload-archive>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"application && !!isOwner && hasAdminPermissions\"\n            class=\"card-footer separator\"\n          >\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Cancel' | translate }}\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Cancel' | translate }}\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              type=\"button\"\n              title=\"{{ 'Delete' | translate }}\"\n              (click)=\"delete()\"\n              *ngIf=\"canDelete\"\n            >\n              {{ 'Delete' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary btn-form\"\n              type=\"submit\"\n              title=\"{{ 'Save' | translate }}\"\n              [disabled]=\"!application.type || formGroup.invalid || formGroup.pristine\"\n            >\n              {{ 'Save' | translate }}\n            </button>\n          </div>\n        </div>\n      </form>\n\n      <div *ngIf=\"isActivityLogSupported\" class=\"content-fullpage d-flex d-col bg-level-1\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\" translate>Activity log</div>\n          <div class=\"m-l-auto\">\n            <button\n              class=\"btn btn-link btn-sm\"\n              type=\"button\"\n              title=\"{{ 'Reload' | translate }}\"\n              (click)=\"load()\"\n            >\n              <i [ngClass]=\"{ 'icon-spin': isLoading }\" c8yIcon=\"refresh\"></i>\n              {{ 'Reload' | translate }}\n            </button>\n          </div>\n        </div>\n        <div *ngIf=\"isLoading\" class=\"p-16 text-center\">\n          <c8y-loading></c8y-loading>\n        </div>\n        <c8y-activity-log\n          *ngIf=\"!isLoading\"\n          [hasAdminPermissions]=\"hasAdminPermissions\"\n          [application]=\"application\"\n          class=\"d-contents\"\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" }, { 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"] }, { 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: 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: "14.0.6", 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 [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\n    *ngIf=\"isFeature\"\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<c8y-breadcrumb *ngIf=\"isMicroservice\">\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></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      *ngIf=\"application\"\n      [ngClass]=\"{ 'd-grid grid__col--7-5--md': isActivityLogSupported }\"\n      class=\"card content-fullpage\"\n    >\n      <form\n        (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n        [formGroup]=\"formGroup\"\n        class=\"d-flex d-col content-fullpage\"\n        novalidate\n      >\n        <div *ngIf=\"!isLoading\" class=\"d-contents\">\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                *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n                [app]=\"application\"\n                [contextPath]=\"application.contextPath\"\n                [name]=\"application.name\"\n                class=\"icon-48\"\n              ></c8y-app-icon>\n              <i *ngIf=\"isPackage\" c8yIcon=\"big-parcel\" class=\"icon-48\"></i>\n              <i *ngIf=\"isFeature\" c8yIcon=\"tab\" class=\"icon-48\"></i>\n              <i *ngIf=\"isMicroservice\" c8yIcon=\"microchip\" class=\"icon-48\"></i>\n              <i *ngIf=\"isExternal\" c8yIcon=\"globe1\" class=\"icon-48\"></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 ||\n                        ('No description available.' | translate)\n                    }}\n                  </em>\n                </p>\n                <div *ngIf=\"isOwner\" class=\"form-group m-b-0\">\n                  <label\n                    [ngClass]=\"{ updated: formGroup?.controls?.description?.dirty }\"\n                    class=\"editable\"\n                  >\n                    <textarea\n                      c8y-textarea-autoresize\n                      class=\"form-control no-resize\"\n                      formControlName=\"description\"\n                      name=\"description\"\n                      placeholder=\"{{ 'No description available.' | translate }}\"\n                    ></textarea>\n                  </label>\n                </div>\n              </div>\n              <div class=\"text-right-md m-t-4\">\n                <span [ngClass]=\"appState?.class\" class=\"label\">\n                  {{ appState?.label | translate }}\n                </span>\n                <div class=\"fit-w m-t-2\" *ngIf=\"isPackage || isMicroservice\">\n                  <label class=\"text-label-small\" translate>Version:</label>\n                  <small class=\"p-l-4 text-bold\">{{ application.manifest?.version }}</small>\n                </div>\n                <div class=\"fit-w m-t-2\">\n                  <label class=\"text-label-small\" translate>Creation time:</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                    type=\"button\"\n                    *ngIf=\"isUpdateAvailable\"\n                    (click)=\"updateToLatestVersion()\"\n                    class=\"btn btn-default btn-sm\"\n                    tooltip=\"{{ 'There\\'s a newer version available, click to update' | translate}}\"\n                    [attr.aria-label]=\"'There\\'s a newer version available, click to update' | translate\"\n                    [delay]=\"300\"\n                    placement=\"top\"\n                  >\n                    <i [c8yIcon]=\"'installing-updates'\"></i>\n                    {{ 'Update available' | translate }}\n                  </button>\n                  <button\n                    (click)=\"openApp(application)\"\n                    [disabled]=\"disableOpenInBrowser\"\n                    *ngIf=\"canOpenInBrowser\"\n                    class=\"btn btn-default btn-sm\"\n                    title=\"{{ 'Open' | translate }}\"\n                    type=\"button\"\n                  >\n                    <i [c8yIcon]=\"'external-link'\"></i>\n                    {{ 'Open' | translate }}\n                  </button>\n                  <div *ngIf=\"canOpenInBrowser && disableOpenInBrowser\">\n                    <small class=\"text-muted\" translate>\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                      type=\"button\"\n                      title=\"{{ 'Subscribe' | translate }}\"\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                      type=\"button\"\n                      title=\"{{ 'Unsubscribe' | translate }}\"\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 *ngIf=\"isPackage\" class=\"row p-16\">\n                <c8y-properties-list\n                  [data]=\"application.manifest\"\n                  [properties]=\"packageProperties\"\n                  [title]=\"'Package details' | translate\"\n                  [emptyLabel]=\"'---'\"\n                  icon=\"info\"\n                ></c8y-properties-list>\n              </div>\n              <div *ngIf=\"sourcePackage\" class=\"row p-16\">\n                <c8y-properties-list\n                  [data]=\"sourcePackage.manifest\"\n                  [properties]=\"packageProperties\"\n                  [title]=\"'Source package information' | translate\"\n                  [emptyLabel]=\"'---'\"\n                  icon=\"info\"\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                      [readonly]=\"true\"\n                      autocomplete=\"off\"\n                      class=\"form-control\"\n                      formControlName=\"id\"\n                      name=\"id\"\n                      id=\"appId\"\n                      type=\"text\"\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                      [readonly]=\"!isOwner\"\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                </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                      [readonly]=\"application.id || !isOwner\"\n                      class=\"form-control\"\n                      name=\"key\"\n                      formControlName=\"key\"\n                      placeholder=\"{{ 'e.g. my-application-key' | translate }}\"\n                      required\n                      type=\"text\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-7\">\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-microservice`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\n                        formControlName=\"contextPath\"\n                      />\n                    </div>\n                  </c8y-form-group>\n                  <div class=\"row\">\n                    <div *ngIf=\"application.manifest.version\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Version' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        {{ application.manifest.version }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"application.manifest.isolation\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Isolation' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span *ngIf=\"singleTenant\">\n                          <i [c8yIcon]=\"'c8y-enterprise'\" class=\"c8y-icon-duocolor h4\"></i>\n                          {{ 'Single tenant' | translate }}\n                        </span>\n                        <span *ngIf=\"!singleTenant\">\n                          <i [c8yIcon]=\"'c8y-sub-tenants'\" class=\"c8y-icon-duocolor icon-32\"></i>\n                          {{ 'Multi tenant' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                    <div *ngIf=\"application.manifest.isolation\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Billing mode' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span\n                          *ngIf=\"subscription\"\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                        >\n                          {{ 'Subscription' | translate }}\n                        </span>\n                        <span\n                          *ngIf=\"!subscription && singleTenant\"\n                          [tooltip]=\"'Resources usage assigned to: Subscriber | translate'\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                        <span\n                          *ngIf=\"!subscription && !singleTenant\"\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <div *ngIf=\"application.manifest.provider\" class=\"legend form-block m-t-40\">\n                    {{ 'Provider' | translate }}\n                  </div>\n                  <div class=\"list-inline\" *ngIf=\"application.manifest.provider\">\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=\"'REPOSITORY'\">\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        formControlName=\"contextPath\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\n                      />\n                    </div>\n                  </c8y-form-group>\n\n                  <c8y-form-group>\n                    <label>{{ 'Server URL' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      name=\"resourcesUrl\"\n                      formControlName=\"resourcesUrl\"\n                      placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                      required\n                      type=\"url\"\n                    />\n                  </c8y-form-group>\n\n                  <div class=\"form-group\">\n                    <label>{{ 'Username' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      formControlName=\"username\"\n                      name=\"username\"\n                      type=\"text\"\n                    />\n                  </div>\n\n                  <div class=\"form-group\">\n                    <label>{{ 'Password' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      formControlName=\"password\"\n                      name=\"password\"\n                      type=\"text\"\n                    />\n                  </div>\n                </div>\n\n                <div *ngSwitchCase=\"'EXTERNAL'\">\n                  <c8y-form-group>\n                    <label>{{ 'External URL' | translate }}</label>\n                    <input\n                      [pattern]=\"'^(?!javascript:).+'\"\n                      [readOnly]=\"!isOwner\"\n                      class=\"form-control\"\n                      formControlName=\"externalUrl\"\n                      name=\"externalUrl\"\n                      placeholder=\"{{ 'e.g.' | translate }} http://www.example.com/\"\n                      required\n                      type=\"url\"\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              </div>\n            </div>\n          </div>\n          <ng-container *ngIf=\"isCustomMicroservice\">\n            <div *ngIf=\"!isLoading\" class=\"d-contents\">\n              <c8y-upload-archive\n                [(application)]=\"application\"\n                (refresh)=\"onNewArchive()\"\n              ></c8y-upload-archive>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"application && !!isOwner && hasAdminPermissions\"\n            class=\"card-footer separator\"\n          >\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Cancel' | translate }}\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Cancel' | translate }}\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              type=\"button\"\n              title=\"{{ 'Delete' | translate }}\"\n              (click)=\"delete()\"\n              *ngIf=\"canDelete\"\n            >\n              {{ 'Delete' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary btn-form\"\n              type=\"submit\"\n              title=\"{{ 'Save' | translate }}\"\n              [disabled]=\"!application.type || formGroup.invalid || formGroup.pristine\"\n            >\n              {{ 'Save' | translate }}\n            </button>\n          </div>\n        </div>\n      </form>\n\n      <div *ngIf=\"isActivityLogSupported\" class=\"content-fullpage d-flex d-col bg-level-1\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\" translate>Activity log</div>\n          <div class=\"m-l-auto\">\n            <button\n              class=\"btn btn-link btn-sm\"\n              type=\"button\"\n              title=\"{{ 'Reload' | translate }}\"\n              (click)=\"load()\"\n            >\n              <i [ngClass]=\"{ 'icon-spin': isLoading }\" c8yIcon=\"refresh\"></i>\n              {{ 'Reload' | translate }}\n            </button>\n          </div>\n        </div>\n        <div *ngIf=\"isLoading\" class=\"p-16 text-center\">\n          <c8y-loading></c8y-loading>\n        </div>\n        <c8y-activity-log\n          *ngIf=\"!isLoading\"\n          [hasAdminPermissions]=\"hasAdminPermissions\"\n          [application]=\"application\"\n          class=\"d-contents\"\n        ></c8y-activity-log>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$2.Router }, { type: i3$2.FormBuilder }, { type: i2.ApplicationService }, { type: i3.AlertService }, { type: i2.InventoryService }, { type: i3.Permissions }, { type: i3.ModalService }, { type: i4.TranslateService }, { type: i1$1.BsModalService }, { type: i3.GainsightService }]; } });
+            args: [{ selector: 'c8y-application-properties', template: "<c8y-title>{{ application | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!isMicroservice\">\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\n    *ngIf=\"isFeature\"\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<c8y-breadcrumb *ngIf=\"isMicroservice\">\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></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      *ngIf=\"application\"\n      [ngClass]=\"{ 'd-grid grid__col--7-5--md': isActivityLogSupported }\"\n      class=\"card content-fullpage\"\n    >\n      <form\n        (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n        [formGroup]=\"formGroup\"\n        class=\"d-flex d-col content-fullpage\"\n        novalidate\n      >\n        <div *ngIf=\"!isLoading\" class=\"d-contents\">\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                *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n                [app]=\"application\"\n                [contextPath]=\"application.contextPath\"\n                [name]=\"application.name\"\n                class=\"icon-48\"\n              ></c8y-app-icon>\n              <i *ngIf=\"isPackage\" c8yIcon=\"big-parcel\" class=\"icon-48\"></i>\n              <i *ngIf=\"isFeature\" c8yIcon=\"tab\" class=\"icon-48\"></i>\n              <i *ngIf=\"isMicroservice\" c8yIcon=\"microchip\" class=\"icon-48\"></i>\n              <i *ngIf=\"isExternal\" c8yIcon=\"globe1\" class=\"icon-48\"></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 ||\n                        ('No description available.' | translate)\n                    }}\n                  </em>\n                </p>\n                <div *ngIf=\"isOwner\" class=\"form-group m-b-0\">\n                  <label\n                    [ngClass]=\"{ updated: formGroup?.controls?.description?.dirty }\"\n                    class=\"editable\"\n                  >\n                    <textarea\n                      c8y-textarea-autoresize\n                      class=\"form-control no-resize\"\n                      formControlName=\"description\"\n                      name=\"description\"\n                      placeholder=\"{{ 'No description available.' | translate }}\"\n                    ></textarea>\n                  </label>\n                </div>\n              </div>\n              <div class=\"text-right-md m-t-4\">\n                <span [ngClass]=\"appState?.class\" class=\"label\">\n                  {{ appState?.label | translate }}\n                </span>\n                <div\n                  class=\"fit-w m-t-2\"\n                  *ngIf=\"isPackage || isMicroservice || isUnpacked\"\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                    type=\"button\"\n                    *ngIf=\"isUpdateAvailable\"\n                    (click)=\"updateToLatestVersion()\"\n                    class=\"btn btn-default btn-sm\"\n                    tooltip=\"{{ 'There\\'s a newer version available, click to update' | translate}}\"\n                    [attr.aria-label]=\"'There\\'s a newer version available, click to update' | translate\"\n                    [delay]=\"300\"\n                    placement=\"top\"\n                  >\n                    <i [c8yIcon]=\"'installing-updates'\"></i>\n                    {{ 'Update available' | translate }}\n                  </button>\n                  <button\n                    (click)=\"openApp(application)\"\n                    [disabled]=\"disableOpenInBrowser\"\n                    *ngIf=\"canOpenInBrowser\"\n                    class=\"btn btn-default btn-sm\"\n                    title=\"{{ 'Open' | translate }}\"\n                    type=\"button\"\n                  >\n                    <i [c8yIcon]=\"'external-link'\"></i>\n                    {{ 'Open' | translate }}\n                  </button>\n                  <div *ngIf=\"canOpenInBrowser && disableOpenInBrowser\">\n                    <small class=\"text-muted\" translate>\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                      type=\"button\"\n                      title=\"{{ 'Subscribe' | translate }}\"\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                      type=\"button\"\n                      title=\"{{ 'Unsubscribe' | translate }}\"\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 *ngIf=\"isPackage\" class=\"row p-16\">\n                <c8y-properties-list\n                  [data]=\"application.manifest\"\n                  [properties]=\"packageProperties\"\n                  [title]=\"'Package details' | translate\"\n                  [emptyLabel]=\"'---'\"\n                  icon=\"info\"\n                ></c8y-properties-list>\n              </div>\n              <div *ngIf=\"sourcePackage\" class=\"row p-16\">\n                <c8y-properties-list\n                  [data]=\"sourcePackage.manifest\"\n                  [properties]=\"packageProperties\"\n                  [title]=\"'Source package information' | translate\"\n                  [emptyLabel]=\"'---'\"\n                  icon=\"info\"\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                      [readonly]=\"true\"\n                      autocomplete=\"off\"\n                      class=\"form-control\"\n                      formControlName=\"id\"\n                      name=\"id\"\n                      id=\"appId\"\n                      type=\"text\"\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                      [readonly]=\"!isOwner\"\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                </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                      [readonly]=\"application.id || !isOwner\"\n                      class=\"form-control\"\n                      name=\"key\"\n                      formControlName=\"key\"\n                      placeholder=\"{{ 'e.g. my-application-key' | translate }}\"\n                      required\n                      type=\"text\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-7\">\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-microservice`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\n                        formControlName=\"contextPath\"\n                      />\n                    </div>\n                  </c8y-form-group>\n                  <div class=\"row\">\n                    <div *ngIf=\"application.manifest.version\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Version' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        {{ application.manifest.version }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"application.manifest.isolation\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Isolation' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span *ngIf=\"singleTenant\">\n                          <i [c8yIcon]=\"'c8y-enterprise'\" class=\"c8y-icon-duocolor h4\"></i>\n                          {{ 'Single tenant' | translate }}\n                        </span>\n                        <span *ngIf=\"!singleTenant\">\n                          <i [c8yIcon]=\"'c8y-sub-tenants'\" class=\"c8y-icon-duocolor icon-32\"></i>\n                          {{ 'Multi tenant' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                    <div *ngIf=\"application.manifest.isolation\" class=\"col-sm-4 m-b-16 flex-auto\">\n                      <label>{{ 'Billing mode' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span\n                          *ngIf=\"subscription\"\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                        >\n                          {{ 'Subscription' | translate }}\n                        </span>\n                        <span\n                          *ngIf=\"!subscription && singleTenant\"\n                          [tooltip]=\"'Resources usage assigned to: Subscriber | translate'\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                        <span\n                          *ngIf=\"!subscription && !singleTenant\"\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <div *ngIf=\"application.manifest.provider\" class=\"legend form-block m-t-40\">\n                    {{ 'Provider' | translate }}\n                  </div>\n                  <div class=\"list-inline\" *ngIf=\"application.manifest.provider\">\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=\"'REPOSITORY'\">\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                        [readOnly]=\"application.id || !isOwner\"\n                        class=\"form-control\"\n                        formControlName=\"contextPath\"\n                        name=\"contextPath\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        required\n                        type=\"text\"\n                      />\n                    </div>\n                  </c8y-form-group>\n\n                  <c8y-form-group>\n                    <label>{{ 'Server URL' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      name=\"resourcesUrl\"\n                      formControlName=\"resourcesUrl\"\n                      placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                      required\n                      type=\"url\"\n                    />\n                  </c8y-form-group>\n\n                  <div class=\"form-group\">\n                    <label>{{ 'Username' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      formControlName=\"username\"\n                      name=\"username\"\n                      type=\"text\"\n                    />\n                  </div>\n\n                  <div class=\"form-group\">\n                    <label>{{ 'Password' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      formControlName=\"password\"\n                      name=\"password\"\n                      type=\"text\"\n                    />\n                  </div>\n                </div>\n\n                <div *ngSwitchCase=\"'EXTERNAL'\">\n                  <c8y-form-group>\n                    <label>{{ 'External URL' | translate }}</label>\n                    <input\n                      [pattern]=\"'^(?!javascript:).+'\"\n                      [readOnly]=\"!isOwner\"\n                      class=\"form-control\"\n                      formControlName=\"externalUrl\"\n                      name=\"externalUrl\"\n                      placeholder=\"{{ 'e.g.' | translate }} http://www.example.com/\"\n                      required\n                      type=\"url\"\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              </div>\n            </div>\n          </div>\n          <ng-container *ngIf=\"isCustomMicroservice\">\n            <div *ngIf=\"!isLoading\" class=\"d-contents\">\n              <c8y-upload-archive\n                [(application)]=\"application\"\n                (refresh)=\"onNewArchive()\"\n              ></c8y-upload-archive>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"application && !!isOwner && hasAdminPermissions\"\n            class=\"card-footer separator\"\n          >\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Cancel' | translate }}\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Cancel' | translate }}\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              type=\"button\"\n              title=\"{{ 'Delete' | translate }}\"\n              (click)=\"delete()\"\n              *ngIf=\"canDelete\"\n            >\n              {{ 'Delete' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary btn-form\"\n              type=\"submit\"\n              title=\"{{ 'Save' | translate }}\"\n              [disabled]=\"!application.type || formGroup.invalid || formGroup.pristine\"\n            >\n              {{ 'Save' | translate }}\n            </button>\n          </div>\n        </div>\n      </form>\n\n      <div *ngIf=\"isActivityLogSupported\" class=\"content-fullpage d-flex d-col bg-level-1\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\" translate>Activity log</div>\n          <div class=\"m-l-auto\">\n            <button\n              class=\"btn btn-link btn-sm\"\n              type=\"button\"\n              title=\"{{ 'Reload' | translate }}\"\n              (click)=\"load()\"\n            >\n              <i [ngClass]=\"{ 'icon-spin': isLoading }\" c8yIcon=\"refresh\"></i>\n              {{ 'Reload' | translate }}\n            </button>\n          </div>\n        </div>\n        <div *ngIf=\"isLoading\" class=\"p-16 text-center\">\n          <c8y-loading></c8y-loading>\n        </div>\n        <c8y-activity-log\n          *ngIf=\"!isLoading\"\n          [hasAdminPermissions]=\"hasAdminPermissions\"\n          [application]=\"application\"\n          class=\"d-contents\"\n        ></c8y-activity-log>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$2.Router }, { type: i3$1.FormBuilder }, { type: i2$1.ApplicationService }, { type: i2.AlertService }, { type: i2$1.InventoryService }, { type: i2.Permissions }, { type: i2.ModalService }, { type: i4.TranslateService }, { type: i1$1.BsModalService }, { type: i2.GainsightService }]; } });
 
 class ApplicationPropertiesGuard {
     constructor(ecosystemService) {
@@ -658,12 +645,12 @@ class AddExternalApplicationComponent {
         });
     }
 }
-AddExternalApplicationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddExternalApplicationComponent, deps: [{ token: i2.ApplicationService }, { token: i3$2.FormBuilder }, { token: i3.AlertService }, { token: i3.WizardComponent }], target: i0.ɵɵFactoryTarget.Component });
-AddExternalApplicationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.WizardHeaderComponent, selector: "c8y-wizard-header" }, { kind: "component", type: i3.WizardBodyComponent, selector: "c8y-wizard-body" }, { kind: "component", type: i3.WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
+AddExternalApplicationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddExternalApplicationComponent, deps: [{ token: i2$1.ApplicationService }, { token: i3$1.FormBuilder }, { token: i2.AlertService }, { token: i2.WizardComponent }], target: i0.ɵɵFactoryTarget.Component });
+AddExternalApplicationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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: function () { return [{ type: i2.ApplicationService }, { type: i3$2.FormBuilder }, { type: i3.AlertService }, { type: i3.WizardComponent }]; } });
+        }], ctorParameters: function () { return [{ type: i2$1.ApplicationService }, { type: i3$1.FormBuilder }, { type: i2.AlertService }, { type: i2.WizardComponent }]; } });
 
 class AddWebApplicationComponent {
     constructor(ecosystemService) {
@@ -744,12 +731,12 @@ class ApplicationListComponent {
         this.destroy$.complete();
     }
 }
-ApplicationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationListComponent, deps: [{ token: i1.EcosystemService }, { token: i3.WizardModalService }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ApplicationListComponent, selector: "c8y-application-list", ngImport: i0, template: "<c8y-title>{{ 'Applications' | 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>\n\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n  <button\n    (click)=\"addApplication()\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Add application' | translate }}\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add application' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button (click)=\"loadApplications()\" 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'\" itemClass=\"navbar-form hidden-xs\">\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(apps$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/administration/#applications\"></c8y-help>\n\n<div *ngIf=\"(apps$ | 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 applications to display.</h3>\n  <p translate>Add your first application by clicking below.</p>\n  <p>\n    <button\n      (click)=\"addApplication()\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add application' | translate }}\"\n    >\n      {{ 'Add application' | translate }}\n    </button>\n  </p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(apps$ | 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      {{ 'Application' | 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 *ngFor=\"let app of apps$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadApplications()\"\n      (onAppCloned)=\"loadApplications()\"\n      [app]=\"app\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3.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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+ApplicationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationListComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardModalService }], target: i0.ɵɵFactoryTarget.Component });
+ApplicationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ApplicationListComponent, selector: "c8y-application-list", ngImport: i0, template: "<c8y-title>{{ 'Applications' | 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>\n\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n  <button\n    (click)=\"addApplication()\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Add application' | translate }}\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add application' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button (click)=\"loadApplications()\" 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'\" itemClass=\"navbar-form hidden-xs\">\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(apps$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/administration/#applications\"></c8y-help>\n\n<div *ngIf=\"(apps$ | 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 applications to display.</h3>\n  <p translate>Add your first application by clicking below.</p>\n  <p>\n    <button\n      (click)=\"addApplication()\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add application' | translate }}\"\n    >\n      {{ 'Add application' | translate }}\n    </button>\n  </p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(apps$ | 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      {{ 'Application' | 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 *ngFor=\"let app of apps$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadApplications()\"\n      (onAppCloned)=\"loadApplications()\"\n      [app]=\"app\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { 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.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-application-list', template: "<c8y-title>{{ 'Applications' | 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>\n\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n  <button\n    (click)=\"addApplication()\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Add application' | translate }}\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add application' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button (click)=\"loadApplications()\" 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'\" itemClass=\"navbar-form hidden-xs\">\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(apps$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/administration/#applications\"></c8y-help>\n\n<div *ngIf=\"(apps$ | 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 applications to display.</h3>\n  <p translate>Add your first application by clicking below.</p>\n  <p>\n    <button\n      (click)=\"addApplication()\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add application' | translate }}\"\n    >\n      {{ 'Add application' | translate }}\n    </button>\n  </p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(apps$ | 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      {{ 'Application' | 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 *ngFor=\"let app of apps$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadApplications()\"\n      (onAppCloned)=\"loadApplications()\"\n      [app]=\"app\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i3.WizardModalService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2.WizardModalService }]; } });
 
 class InstallFromPackageComponent {
     constructor(ecosystemService, applicationService, wizardComponent, pluginsService, inventoryService) {
@@ -872,7 +859,7 @@ class InstallFromPackageComponent {
     }
     selectPackage(selectedPackage) {
         return __awaiter(this, void 0, void 0, function* () {
-            const apps = (yield this.ecosystemService.getApplications()).data;
+            const apps = yield this.ecosystemService.getHostedAndPackageApplications();
             this.newAppConfig = this.ecosystemService.getUniqueAppConfig(selectedPackage, apps);
             this.selectedPackage = selectedPackage;
             this.loadSelectedPackageVersions();
@@ -922,12 +909,12 @@ class InstallFromPackageComponent {
         });
     }
 }
-InstallFromPackageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: InstallFromPackageComponent, deps: [{ token: i1.EcosystemService }, { token: i2.ApplicationService }, { token: i3.WizardComponent }, { token: i3.PluginsService }, { token: i2.InventoryService }], target: i0.ɵɵFactoryTarget.Component });
-InstallFromPackageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 id=\"modal-title\" translate>Install from extension package</h4>\n</c8y-wizard-header>\n<c8y-wizard-body>\n  <ng-container *ngIf=\"!selectedPackage\">\n    <div class=\"modal-inner-scroll\" id=\"modal-body\">\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        *ngIf=\"!packages?.length\"\n        [icon]=\"'big-parcel'\"\n        [title]=\"'No extension packages to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n\n      <div *ngIf=\"packages?.length\" class=\"c8y-wizard-list-nav\" style=\"min-height: 257px\">\n        <button\n          class=\"list-group-item text-truncate\"\n          *ngFor=\"let package of packages\"\n          (click)=\"selectPackage(package)\"\n          title=\"{{ package.name }}\"\n          type=\"button\"\n        >\n          <i c8yIcon=\"big-parcel\" class=\"list-group-icon\"></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 class=\"d-flex d-col a-i-center j-c-center\" style=\"min-height: 257px\">\n      <c8y-application-properties-form\n        *ngIf=\"!inProgress\"\n        [application]=\"newAppConfig\"\n        class=\"d-block fit-w\"\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          <label for=\"packageVersion\" translate>Use extension package version</label>\n          <c8y-form-group>\n            <c8y-typeahead\n              [(ngModel)]=\"model.selected\"\n              name=\"packageVersion\"\n              (onSearch)=\"onInput.next($event)\"\n              placeholder=\"{{ 'Select or enter' | translate }}\"\n              [displayProperty]=\"'version'\"\n              [required]=\"true\"\n              [hideNew]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                *c8yFor=\"let version of versions$; loadMore: 'auto'; notFound: notFoundTemplate\"\n                (click)=\"onAppVersionSelect(version)\"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\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 *ngFor=\"let tag of version.tags\" class=\"label label-info m-l-4\">\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-progress-bar\n        [message]=\"'Installing\u2026' | translate\"\n        class=\"text-center d-block\"\n        *ngIf=\"inProgress\"\n      ></c8y-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isDeployed\">\n    <div\n      *ngIf=\"deployedWithSuccess; else failedDeploy\"\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 257px\"\n    >\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    <ng-template #failedDeploy>\n      <div class=\"d-flex a-i-center j-c-center\" style=\"min-height: 257px\">\n        <c8y-operation-result\n          text=\"{{ 'Application creation failed' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"error\"\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    *ngIf=\"!isDeployed\"\n    (click)=\"selectedPackage ? clean() : back()\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    [disabled]=\"inProgress\"\n    type=\"button\"\n  >\n    {{ 'Back' | translate }}\n  </button>\n  <button\n    title=\"{{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\"\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"cancel()\"\n  >\n    {{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\n  </button>\n\n  <button\n    title=\"{{ 'Install' | translate }}\"\n    class=\"btn btn-primary\"\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: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: i3.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i3.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i3.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.WizardHeaderComponent, selector: "c8y-wizard-header" }, { kind: "component", type: i3.WizardBodyComponent, selector: "c8y-wizard-body" }, { kind: "component", type: i3.WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "component", type: i1.ApplicationPropertiesFormComponent, selector: "c8y-application-properties-form", inputs: ["application", "disabled"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+InstallFromPackageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: InstallFromPackageComponent, deps: [{ token: i1.EcosystemService }, { token: i2$1.ApplicationService }, { token: i2.WizardComponent }, { token: i2.PluginsService }, { token: i2$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component });
+InstallFromPackageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 id=\"modal-title\" translate>Install from extension package</h4>\n</c8y-wizard-header>\n<c8y-wizard-body>\n  <ng-container *ngIf=\"!selectedPackage\">\n    <div class=\"modal-inner-scroll\" id=\"modal-body\">\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        *ngIf=\"!packages?.length\"\n        [icon]=\"'big-parcel'\"\n        [title]=\"'No extension packages to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n\n      <div *ngIf=\"packages?.length\" class=\"c8y-wizard-list-nav\" style=\"min-height: 257px\">\n        <button\n          class=\"list-group-item text-truncate\"\n          *ngFor=\"let package of packages\"\n          (click)=\"selectPackage(package)\"\n          title=\"{{ package.name }}\"\n          type=\"button\"\n        >\n          <i c8yIcon=\"big-parcel\" class=\"list-group-icon\"></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 class=\"d-flex d-col a-i-center j-c-center\" style=\"min-height: 257px\">\n      <c8y-application-properties-form\n        *ngIf=\"!inProgress\"\n        [application]=\"newAppConfig\"\n        class=\"d-block fit-w\"\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          <label for=\"packageVersion\" translate>Use extension package version</label>\n          <c8y-form-group>\n            <c8y-typeahead\n              [(ngModel)]=\"model.selected\"\n              name=\"packageVersion\"\n              (onSearch)=\"onInput.next($event)\"\n              placeholder=\"{{ 'Select or enter' | translate }}\"\n              [displayProperty]=\"'version'\"\n              [required]=\"true\"\n              [hideNew]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                *c8yFor=\"let version of versions$; loadMore: 'auto'; notFound: notFoundTemplate\"\n                (click)=\"onAppVersionSelect(version)\"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\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 *ngFor=\"let tag of version.tags\" class=\"label label-info m-l-4\">\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-progress-bar\n        [message]=\"'Installing\u2026' | translate\"\n        class=\"text-center d-block\"\n        *ngIf=\"inProgress\"\n      ></c8y-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isDeployed\">\n    <div\n      *ngIf=\"deployedWithSuccess; else failedDeploy\"\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 257px\"\n    >\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    <ng-template #failedDeploy>\n      <div class=\"d-flex a-i-center j-c-center\" style=\"min-height: 257px\">\n        <c8y-operation-result\n          text=\"{{ 'Application creation failed' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"error\"\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    *ngIf=\"!isDeployed\"\n    (click)=\"selectedPackage ? clean() : back()\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    [disabled]=\"inProgress\"\n    type=\"button\"\n  >\n    {{ 'Back' | translate }}\n  </button>\n  <button\n    title=\"{{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\"\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"cancel()\"\n  >\n    {{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\n  </button>\n\n  <button\n    title=\"{{ 'Install' | translate }}\"\n    class=\"btn btn-primary\"\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", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: i2.ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { 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"], 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", "emptyActions", "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: "14.0.6", ngImport: i0, type: InstallFromPackageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-install-from-package', template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"'big-parcel'\"></i>\n  <h4 id=\"modal-title\" translate>Install from extension package</h4>\n</c8y-wizard-header>\n<c8y-wizard-body>\n  <ng-container *ngIf=\"!selectedPackage\">\n    <div class=\"modal-inner-scroll\" id=\"modal-body\">\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        *ngIf=\"!packages?.length\"\n        [icon]=\"'big-parcel'\"\n        [title]=\"'No extension packages to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n\n      <div *ngIf=\"packages?.length\" class=\"c8y-wizard-list-nav\" style=\"min-height: 257px\">\n        <button\n          class=\"list-group-item text-truncate\"\n          *ngFor=\"let package of packages\"\n          (click)=\"selectPackage(package)\"\n          title=\"{{ package.name }}\"\n          type=\"button\"\n        >\n          <i c8yIcon=\"big-parcel\" class=\"list-group-icon\"></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 class=\"d-flex d-col a-i-center j-c-center\" style=\"min-height: 257px\">\n      <c8y-application-properties-form\n        *ngIf=\"!inProgress\"\n        [application]=\"newAppConfig\"\n        class=\"d-block fit-w\"\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          <label for=\"packageVersion\" translate>Use extension package version</label>\n          <c8y-form-group>\n            <c8y-typeahead\n              [(ngModel)]=\"model.selected\"\n              name=\"packageVersion\"\n              (onSearch)=\"onInput.next($event)\"\n              placeholder=\"{{ 'Select or enter' | translate }}\"\n              [displayProperty]=\"'version'\"\n              [required]=\"true\"\n              [hideNew]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                *c8yFor=\"let version of versions$; loadMore: 'auto'; notFound: notFoundTemplate\"\n                (click)=\"onAppVersionSelect(version)\"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\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 *ngFor=\"let tag of version.tags\" class=\"label label-info m-l-4\">\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-progress-bar\n        [message]=\"'Installing\u2026' | translate\"\n        class=\"text-center d-block\"\n        *ngIf=\"inProgress\"\n      ></c8y-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isDeployed\">\n    <div\n      *ngIf=\"deployedWithSuccess; else failedDeploy\"\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 257px\"\n    >\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    <ng-template #failedDeploy>\n      <div class=\"d-flex a-i-center j-c-center\" style=\"min-height: 257px\">\n        <c8y-operation-result\n          text=\"{{ 'Application creation failed' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"error\"\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    *ngIf=\"!isDeployed\"\n    (click)=\"selectedPackage ? clean() : back()\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    [disabled]=\"inProgress\"\n    type=\"button\"\n  >\n    {{ 'Back' | translate }}\n  </button>\n  <button\n    title=\"{{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\"\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"cancel()\"\n  >\n    {{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\n  </button>\n\n  <button\n    title=\"{{ 'Install' | translate }}\"\n    class=\"btn btn-primary\"\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" }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2.ApplicationService }, { type: i3.WizardComponent }, { type: i3.PluginsService }, { type: i2.InventoryService }]; }, propDecorators: { applicationPropertiesForm: [{
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2$1.ApplicationService }, { type: i2.WizardComponent }, { type: i2.PluginsService }, { type: i2$1.InventoryService }]; }, propDecorators: { applicationPropertiesForm: [{
                 type: ViewChild,
                 args: [ApplicationPropertiesFormComponent]
             }] } });
@@ -977,11 +964,11 @@ class EcosystemNavigationFactory {
         });
     }
 }
-EcosystemNavigationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EcosystemNavigationFactory, deps: [{ token: i3.Permissions }], target: i0.ɵɵFactoryTarget.Injectable });
+EcosystemNavigationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EcosystemNavigationFactory, deps: [{ token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Injectable });
 EcosystemNavigationFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EcosystemNavigationFactory });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EcosystemNavigationFactory, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i3.Permissions }]; } });
+        }], ctorParameters: function () { return [{ type: i2.Permissions }]; } });
 
 class EcosystemTabs {
     constructor(router) {
@@ -1030,7 +1017,7 @@ class FeatureListComponent {
     }
 }
 FeatureListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FeatureListComponent, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component });
-FeatureListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: FeatureListComponent, selector: "c8y-feature-list", 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'\" 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 features$ | 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", dependencies: [{ kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+FeatureListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: FeatureListComponent, selector: "c8y-feature-list", 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'\" 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 features$ | 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", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { 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.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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'\" 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 features$ | 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" }]
@@ -1091,7 +1078,7 @@ class AddMicroserviceComponent {
         });
     }
 }
-AddMicroserviceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddMicroserviceComponent, deps: [{ token: i1.EcosystemService }, { token: i3.ModalService }, { token: i2.TenantService }], target: i0.ɵɵFactoryTarget.Component });
+AddMicroserviceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddMicroserviceComponent, deps: [{ token: i1.EcosystemService }, { token: i2.ModalService }, { token: i2$1.TenantService }], target: i0.ɵɵFactoryTarget.Component });
 AddMicroserviceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AddMicroserviceComponent, selector: "c8y-add-microservice", ngImport: i0, template: `<c8y-add-application
     [headerText]="headerText"
     [headerIcon]="'microchip'"
@@ -1111,7 +1098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
     [uploadApplicationHandler]="uploadMicroserviceHandler"
   ></c8y-add-application>`
                 }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i3.ModalService }, { type: i2.TenantService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2.ModalService }, { type: i2$1.TenantService }]; } });
 
 class MicroserviceListComponent {
     constructor(ecosystemService, wizardModalService) {
@@ -1139,12 +1126,12 @@ class MicroserviceListComponent {
         });
     }
 }
-MicroserviceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MicroserviceListComponent, deps: [{ token: i1.EcosystemService }, { token: i3.WizardModalService }], target: i0.ɵɵFactoryTarget.Component });
-MicroserviceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: MicroserviceListComponent, selector: "c8y-microservice-list", ngImport: i0, template: "<c8y-title>{{ 'Microservices' | 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]=\"'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      (click)=\"addMicroservice()\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Add microservice' | translate }}\"\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=\"/users-guide/administration/#microservices\"></c8y-help>\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'\" itemClass=\"navbar-form hidden-xs\">\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 *ngIf=\"(microservices$ | 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 microservices to display.</h3>\n  <p translate>Add your first microservice by clicking below.</p>\n  <p>\n    <button\n      (click)=\"addMicroservice()\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add microservice' | translate }}\"\n    >\n      {{ 'Add microservice' | translate }}\n    </button>\n  </p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(microservices$ | 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      {{ '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 *ngFor=\"let microservice of microservices$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadMicroservices()\"\n      [app]=\"microservice\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3.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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+MicroserviceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MicroserviceListComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardModalService }], target: i0.ɵɵFactoryTarget.Component });
+MicroserviceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: MicroserviceListComponent, selector: "c8y-microservice-list", ngImport: i0, template: "<c8y-title>{{ 'Microservices' | 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]=\"'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      (click)=\"addMicroservice()\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Add microservice' | translate }}\"\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=\"/users-guide/administration/#microservices\"></c8y-help>\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'\" itemClass=\"navbar-form hidden-xs\">\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 *ngIf=\"(microservices$ | 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 microservices to display.</h3>\n  <p translate>Add your first microservice by clicking below.</p>\n  <p>\n    <button\n      (click)=\"addMicroservice()\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add microservice' | translate }}\"\n    >\n      {{ 'Add microservice' | translate }}\n    </button>\n  </p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(microservices$ | 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      {{ '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 *ngFor=\"let microservice of microservices$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadMicroservices()\"\n      [app]=\"microservice\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { 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.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MicroserviceListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-microservice-list', template: "<c8y-title>{{ 'Microservices' | 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]=\"'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      (click)=\"addMicroservice()\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Add microservice' | translate }}\"\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=\"/users-guide/administration/#microservices\"></c8y-help>\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'\" itemClass=\"navbar-form hidden-xs\">\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 *ngIf=\"(microservices$ | 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 microservices to display.</h3>\n  <p translate>Add your first microservice by clicking below.</p>\n  <p>\n    <button\n      (click)=\"addMicroservice()\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add microservice' | translate }}\"\n    >\n      {{ 'Add microservice' | translate }}\n    </button>\n  </p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(microservices$ | 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      {{ '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 *ngFor=\"let microservice of microservices$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadMicroservices()\"\n      [app]=\"microservice\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i3.WizardModalService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2.WizardModalService }]; } });
 
 class PackageAvailabilityService {
     constructor(appState, alert, modal, application, gainsightService) {
@@ -1213,12 +1200,12 @@ class PackageAvailabilityService {
         }
     }
 }
-PackageAvailabilityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageAvailabilityService, deps: [{ token: i3.AppStateService }, { token: i3.AlertService }, { token: i3.ModalService }, { token: i2.ApplicationService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Injectable });
+PackageAvailabilityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageAvailabilityService, deps: [{ token: i2.AppStateService }, { token: i2.AlertService }, { token: i2.ModalService }, { token: i2$1.ApplicationService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Injectable });
 PackageAvailabilityService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageAvailabilityService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageAvailabilityService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i3.AppStateService }, { type: i3.AlertService }, { type: i3.ModalService }, { type: i2.ApplicationService }, { type: i3.GainsightService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.AppStateService }, { type: i2.AlertService }, { type: i2.ModalService }, { type: i2$1.ApplicationService }, { type: i2.GainsightService }]; } });
 
 class AddPackageComponent {
     constructor(ecosystemService, appState, packageAvailability) {
@@ -1241,7 +1228,7 @@ class AddPackageComponent {
         return this.ecosystemService.uploadArchiveToApp(file, pckg, true);
     }
 }
-AddPackageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddPackageComponent, deps: [{ token: i1.EcosystemService }, { token: i3.AppStateService }, { token: PackageAvailabilityService }], target: i0.ɵɵFactoryTarget.Component });
+AddPackageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddPackageComponent, deps: [{ token: i1.EcosystemService }, { token: i2.AppStateService }, { token: PackageAvailabilityService }], target: i0.ɵɵFactoryTarget.Component });
 AddPackageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AddPackageComponent, selector: "c8y-add-package", ngImport: i0, template: `<c8y-add-application
     [headerText]="headerText"
     [headerIcon]="'big-parcel'"
@@ -1261,17 +1248,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
     [uploadApplicationHandler]="uploadPackageHandler"
   ></c8y-add-application>`
                 }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i3.AppStateService }, { type: PackageAvailabilityService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2.AppStateService }, { type: PackageAvailabilityService }]; } });
 
 class DeployApplicationComponent {
-    constructor(ecosystemService, applicationService, wizardComponent, translate, inventoryService, pluginService, gainsightService) {
+    constructor(ecosystemService, wizardComponent, translate, pluginService, gainsightService, router) {
         this.ecosystemService = ecosystemService;
-        this.applicationService = applicationService;
         this.wizardComponent = wizardComponent;
         this.translate = translate;
-        this.inventoryService = inventoryService;
         this.pluginService = pluginService;
         this.gainsightService = gainsightService;
+        this.router = router;
         this.CURRENT_LOCATION = location.href;
         this.inProgress = true;
         this.isDeployed = false;
@@ -1291,22 +1277,22 @@ class DeployApplicationComponent {
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            const apps = (yield this.ecosystemService.getApplications()).data;
+            const apps = yield this.ecosystemService.getHostedAndPackageApplications();
             this.newAppConfig = this.ecosystemService.getUniqueAppConfig(this.package, apps);
             this.headerText = this.getHeaderText();
             this.inProgress = false;
         });
     }
     deployApp() {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             this.inProgress = true;
             const formGroupValue = this.applicationPropertiesForm.formGroup.getRawValue();
-            const { contextPath, license, name } = this.package;
+            this.package.manifest.version = this.model.selected.version;
+            const { contextPath, license, name, manifest } = this.package;
             const type = this.pluginService.getPackageType(this.package);
             const licensedApp = {
                 contextPath,
-                license,
+                license: license || manifest.license,
                 name,
                 type,
                 version: this.model.selected.version
@@ -1316,38 +1302,9 @@ class DeployApplicationComponent {
                 this.cancel();
                 return;
             }
-            // Create new app config
-            const config = yield this.ecosystemService.createConfig(this.package, formGroupValue);
-            config.version = this.model.selected.version;
-            config.isSetup = true;
-            if (!config.manifest) {
-                config.manifest = {};
-            }
-            config.manifest.isPackage = false;
-            config.manifest.source = this.package.id;
-            config.manifest.package = 'blueprint';
-            config.resourcesUrl = '/';
-            // Create new app
-            const newApp = (yield this.applicationService.create(config)).data;
-            // Binary
             try {
-                // Get binary details
-                const { data: binaryDetails } = yield this.inventoryService.detail(this.model.selected.binaryId);
-                // Get binary from specific package version
-                const binary = yield this.ecosystemService.getBinary(this.package, {
-                    id: this.model.selected.binaryId
-                });
-                // Create zip
-                const fileBinary = new Blob([binary], { type: binaryDetails.contentType });
-                const file = new File([fileBinary], binaryDetails.name, {
-                    type: binaryDetails.contentType
-                });
-                // Upload binary to new app
-                yield this.ecosystemService.uploadArchiveToApp(file, newApp);
-                // Update manifest
-                yield this.ecosystemService.updateAppManifest(newApp, this.package);
+                this.deployedApp = yield this.ecosystemService.deployApp(this.package, formGroupValue, this.model);
                 this.deployedWithSuccess = true;
-                this.applicationHref = this.applicationService.getHref(newApp);
                 this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
                     component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
                     action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
@@ -1356,49 +1313,19 @@ class DeployApplicationComponent {
                 });
             }
             catch (error) {
-                if (((_a = error === null || error === void 0 ? void 0 : error.res) === null || _a === void 0 ? void 0 : _a.status) === 404) {
-                    yield this.applicationService.delete(newApp.id);
-                    yield this.fallbackToCloneLatest(config);
-                    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
-                        component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
-                        action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
-                        result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                        url: this.CURRENT_LOCATION
-                    });
-                }
+                this.ecosystemService.alertError(error);
+                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
+                    component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
+                    action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
+                    result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.SERVER_FAILURE,
+                    url: this.CURRENT_LOCATION
+                });
             }
             finally {
                 this.markAsDeployed();
             }
         });
     }
-    fallbackToCloneLatest(config) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let clonedPkg;
-            try {
-                clonedPkg = (yield this.applicationService.clone(this.package)).data;
-                // clean out all falsely cloned applicationVersions, we don't need them
-                for (const appVersion of clonedPkg.applicationVersions) {
-                    if (appVersion.tags.includes('latest')) {
-                        yield this.ecosystemService.setPackageVersionTag(clonedPkg, appVersion.version, []);
-                    }
-                    yield this.ecosystemService.deletePackageVersion(clonedPkg, {
-                        version: appVersion.version
-                    });
-                }
-                delete config.type;
-                config.isPackage = false;
-                const { data: newApp } = yield this.ecosystemService.updateApp(Object.assign({ id: clonedPkg.id, activeVersionId: clonedPkg.activeVersionId }, config), false);
-                yield this.ecosystemService.updateAppManifest(newApp, this.package);
-                this.deployedWithSuccess = true;
-                this.applicationHref = this.applicationService.getHref(newApp);
-            }
-            catch (error) {
-                yield this.ecosystemService.deleteApp(clonedPkg.id, true);
-            }
-            this.markAsDeployed();
-        });
-    }
     cancel() {
         this.wizardComponent.close();
     }
@@ -1408,6 +1335,10 @@ class DeployApplicationComponent {
         });
         this.canDeploy = true;
     }
+    open() {
+        this.router.navigateByUrl(ViewContext.Application.replace(':id', `${this.deployedApp.id}`));
+        this.cancel();
+    }
     markAsDeployed() {
         this.isDeployed = true;
         this.inProgress = false;
@@ -1418,12 +1349,12 @@ class DeployApplicationComponent {
         });
     }
 }
-DeployApplicationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DeployApplicationComponent, deps: [{ token: i1.EcosystemService }, { token: i2.ApplicationService }, { token: i3.WizardComponent }, { token: i4.TranslateService }, { token: i2.InventoryService }, { token: i3.PluginsService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-DeployApplicationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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-progress-bar\n        *ngIf=\"inProgress\"\n        [message]=\"'Deploying\u2026' | translate\"\n        class=\"text-center\"\n      ></c8y-progress-bar>\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    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    title=\"{{ 'Deploy' | translate }}\"\n  >\n    {{ 'Deploy' | translate }}\n  </button>\n\n  <a\n    *ngIf=\"isDeployed && applicationHref\"\n    [href]=\"applicationHref\"\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", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: i3.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.WizardHeaderComponent, selector: "c8y-wizard-header" }, { kind: "component", type: i3.WizardBodyComponent, selector: "c8y-wizard-body" }, { kind: "component", type: i3.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: i3.C8yTranslatePipe, name: "translate" }] });
+DeployApplicationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DeployApplicationComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardComponent }, { token: i4.TranslateService }, { token: i2.PluginsService }, { token: i2.GainsightService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+DeployApplicationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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-progress-bar\n        *ngIf=\"inProgress\"\n        [message]=\"'Deploying\u2026' | translate\"\n        class=\"text-center\"\n      ></c8y-progress-bar>\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    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    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.ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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-progress-bar\n        *ngIf=\"inProgress\"\n        [message]=\"'Deploying\u2026' | translate\"\n        class=\"text-center\"\n      ></c8y-progress-bar>\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    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    title=\"{{ 'Deploy' | translate }}\"\n  >\n    {{ 'Deploy' | translate }}\n  </button>\n\n  <a\n    *ngIf=\"isDeployed && applicationHref\"\n    [href]=\"applicationHref\"\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" }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2.ApplicationService }, { type: i3.WizardComponent }, { type: i4.TranslateService }, { type: i2.InventoryService }, { type: i3.PluginsService }, { type: i3.GainsightService }]; }, propDecorators: { applicationPropertiesForm: [{
+            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-progress-bar\n        *ngIf=\"inProgress\"\n        [message]=\"'Deploying\u2026' | translate\"\n        class=\"text-center\"\n      ></c8y-progress-bar>\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    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    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: function () { return [{ type: i1.EcosystemService }, { type: i2.WizardComponent }, { type: i4.TranslateService }, { type: i2.PluginsService }, { type: i2.GainsightService }, { type: i1$2.Router }]; }, propDecorators: { applicationPropertiesForm: [{
                 type: ViewChild,
                 args: [ApplicationPropertiesFormComponent]
             }] } });
@@ -1486,7 +1417,7 @@ class AppsToUpdateRemotesSelectComponent {
     }
 }
 AppsToUpdateRemotesSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppsToUpdateRemotesSelectComponent, deps: [{ token: i1$1.BsModalRef }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AppsToUpdateRemotesSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppsToUpdateRemotesSelectComponent, selector: "ng-component", 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 id=\"modal-title\" class=\"modal-title h4\" 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    </div>\n    <c8y-list-group *ngIf=\"apps.length; else emptyList\">\n      <c8y-li [ngClass]=\"{ disabled: updateType === 'install' && appsDisabled.has(app.id) }\" *ngFor=\"let app of apps\">\n        <c8y-li-checkbox (onSelect)=\"setSelectedApps($event, app)\"> </c8y-li-checkbox>\n        <c8y-li-icon class=\"p-l-0 icon-32\">\n          <c8y-app-icon\n            [app]=\"app\"\n            [contextPath]=\"app.contextPath\"\n            [name]=\"app.name\"\n            class=\"list-group-icon\"\n          ></c8y-app-icon>\n        </c8y-li-icon>\n        <div class=\"d-flex\">\n          <div class=\"p-r-8\">\n            <p [innerText]=\"app | humanizeAppName | async\" class=\"text-medium\"></p>\n            <p class=\"small text-muted\">{{ app.description }}</p>\n          </div>\n          <span [ngClass]=\"app | appState: 'class'\" class=\"label m-l-auto a-s-start\">\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      (click)=\"cancel()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [disabled]=\"appsToUpdateRemotes.length === 0\"\n      title=\"{{ textConfig.applyButton | translate }}\"\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    [subtitle]=\"'No custom applications available.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AppStatePipe, name: "appState" }] });
+AppsToUpdateRemotesSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppsToUpdateRemotesSelectComponent, selector: "ng-component", 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 id=\"modal-title\" class=\"modal-title h4\" 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    </div>\n    <c8y-list-group *ngIf=\"apps.length; else emptyList\">\n      <c8y-li [ngClass]=\"{ disabled: updateType === 'install' && appsDisabled.has(app.id) }\" *ngFor=\"let app of apps\">\n        <c8y-li-checkbox (onSelect)=\"setSelectedApps($event, app)\"> </c8y-li-checkbox>\n        <c8y-li-icon class=\"p-l-0 icon-32\">\n          <c8y-app-icon\n            [app]=\"app\"\n            [contextPath]=\"app.contextPath\"\n            [name]=\"app.name\"\n            class=\"list-group-icon\"\n          ></c8y-app-icon>\n        </c8y-li-icon>\n        <div class=\"d-flex\">\n          <div class=\"p-r-8\">\n            <p [innerText]=\"app | humanizeAppName | async\" class=\"text-medium\"></p>\n            <p class=\"small text-muted\">{{ app.description }}</p>\n          </div>\n          <span [ngClass]=\"app | appState: 'class'\" class=\"label m-l-auto a-s-start\">\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      (click)=\"cancel()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [disabled]=\"appsToUpdateRemotes.length === 0\"\n      title=\"{{ textConfig.applyButton | translate }}\"\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    [subtitle]=\"'No custom applications available.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\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.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "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", "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: "14.0.6", ngImport: i0, type: AppsToUpdateRemotesSelectComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <div id=\"modal-title\" class=\"modal-title h4\" 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    </div>\n    <c8y-list-group *ngIf=\"apps.length; else emptyList\">\n      <c8y-li [ngClass]=\"{ disabled: updateType === 'install' && appsDisabled.has(app.id) }\" *ngFor=\"let app of apps\">\n        <c8y-li-checkbox (onSelect)=\"setSelectedApps($event, app)\"> </c8y-li-checkbox>\n        <c8y-li-icon class=\"p-l-0 icon-32\">\n          <c8y-app-icon\n            [app]=\"app\"\n            [contextPath]=\"app.contextPath\"\n            [name]=\"app.name\"\n            class=\"list-group-icon\"\n          ></c8y-app-icon>\n        </c8y-li-icon>\n        <div class=\"d-flex\">\n          <div class=\"p-r-8\">\n            <p [innerText]=\"app | humanizeAppName | async\" class=\"text-medium\"></p>\n            <p class=\"small text-muted\">{{ app.description }}</p>\n          </div>\n          <span [ngClass]=\"app | appState: 'class'\" class=\"label m-l-auto a-s-start\">\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      (click)=\"cancel()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [disabled]=\"appsToUpdateRemotes.length === 0\"\n      title=\"{{ textConfig.applyButton | translate }}\"\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    [subtitle]=\"'No custom applications available.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n</ng-template>\n" }]
@@ -1509,7 +1440,7 @@ class PluginListItemComponent {
     }
 }
 PluginListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PluginListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: { plugin: "plugin", selectable: "selectable" }, outputs: { isItemSelected: "isItemSelected" }, ngImport: i0, template: "\n  <c8y-li-checkbox\n    (change)=\"onChange($event.target.checked)\"\n    *ngIf=\"selectable\"\n    [disabled]=\"plugin.installed\"\n    class=\"p-r-16 p-l-0\"\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 class=\"d-flex\">\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 [c8yIcon]=\"'check-circle'\" class=\"text-success\"></i>\n          <em class=\"text-muted small\" translate>Installed`plugins`</em>\n        </span>\n      </p>\n      <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n    </div>\n    <span *ngIf=\"selectable\" class=\"label label-info m-l-auto a-s-start\">{{\n      plugin.contextPath\n    }}</span>\n  </div>\n     \n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }] });
+PluginListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: { plugin: "plugin", selectable: "selectable" }, outputs: { isItemSelected: "isItemSelected" }, ngImport: i0, template: "\n  <c8y-li-checkbox\n    (change)=\"onChange($event.target.checked)\"\n    *ngIf=\"selectable\"\n    [disabled]=\"plugin.installed\"\n    class=\"p-r-16 p-l-0\"\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 class=\"d-flex\">\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 [c8yIcon]=\"'check-circle'\" class=\"text-success\"></i>\n          <em class=\"text-muted small\" translate>Installed`plugins`</em>\n        </span>\n      </p>\n      <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n    </div>\n    <span *ngIf=\"selectable\" class=\"label label-info m-l-auto a-s-start\">{{\n      plugin.contextPath\n    }}</span>\n  </div>\n     \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", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PluginListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-plugin-list-item', template: "\n  <c8y-li-checkbox\n    (change)=\"onChange($event.target.checked)\"\n    *ngIf=\"selectable\"\n    [disabled]=\"plugin.installed\"\n    class=\"p-r-16 p-l-0\"\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 class=\"d-flex\">\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 [c8yIcon]=\"'check-circle'\" class=\"text-success\"></i>\n          <em class=\"text-muted small\" translate>Installed`plugins`</em>\n        </span>\n      </p>\n      <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n    </div>\n    <span *ngIf=\"selectable\" class=\"label label-info m-l-auto a-s-start\">{{\n      plugin.contextPath\n    }}</span>\n  </div>\n     \n" }]
@@ -1715,12 +1646,12 @@ class PluginListComponent {
         });
     }
 }
-PluginListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PluginListComponent, deps: [{ token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i3.PluginsService }, { token: i3.AlertService }, { token: i4.TranslateService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-PluginListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PluginListComponent, selector: "c8y-plugin-list", inputs: { plugins$: "plugins$", emptyListText: "emptyListText", selectable: "selectable", installable: "installable", package: "package" }, outputs: { selectedItems: "selectedItems" }, ngImport: i0, template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id !== updatingPluginId.uninstall\"\n            class=\"btn btn-danger btn-sm m-l-4\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id !== updatingPluginId.install\"\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: ["plugin", "selectable"], outputs: ["isItemSelected"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+PluginListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PluginListComponent, deps: [{ token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i4.TranslateService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+PluginListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PluginListComponent, selector: "c8y-plugin-list", inputs: { plugins$: "plugins$", emptyListText: "emptyListText", selectable: "selectable", installable: "installable", package: "package" }, outputs: { selectedItems: "selectedItems" }, ngImport: i0, template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id !== updatingPluginId.uninstall\"\n            class=\"btn btn-danger btn-sm m-l-4\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id !== updatingPluginId.install\"\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: ["plugin", "selectable"], outputs: ["isItemSelected"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PluginListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-plugin-list', template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id !== updatingPluginId.uninstall\"\n            class=\"btn btn-danger btn-sm m-l-4\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id !== updatingPluginId.install\"\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i3.PluginsService }, { type: i3.AlertService }, { type: i4.TranslateService }, { type: i3.GainsightService }]; }, propDecorators: { plugins$: [{
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i4.TranslateService }, { type: i2.GainsightService }]; }, propDecorators: { plugins$: [{
                 type: Input
             }], emptyListText: [{
                 type: Input
@@ -1836,12 +1767,12 @@ class PackageDetailsComponent {
         return `/apps/${this.package.contextPath}/`;
     }
 }
-PackageDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageDetailsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.FetchClient }, { token: i3.WizardModalService }, { token: i1.EcosystemService }, { token: i3.ContextRouteService }, { token: i3.PluginsService }, { token: PackageAvailabilityService }, { token: i3.AppStateService }, { token: i3.PluginsService }], target: i0.ɵɵFactoryTarget.Component });
-PackageDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PackageDetailsComponent, selector: "c8y-package-details", ngImport: i0, template: "<c8y-title>{{ 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]=\"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 for=\"availability\" translate>Availability</label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          id=\"availability\"\n          class=\"form-control\"\n          [ngModel]=\"package.availability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option *ngFor=\"let availability of availabilities\" [ngValue]=\"availability.value\">\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        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\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 | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i c8yIcon=\"big-parcel\" class=\"c8y-icon-duocolor icon-48\"></i>\n          <button\n            class=\"btn-clean\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            [delay]=\"500\"\n          >\n            <span [ngClass]=\"appState?.class\" class=\"label\">\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            [delay]=\"500\"\n          >\n            <span [ngClass]=\"packageContentState?.class\" class=\"label\">\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 *ngIf=\"!description\" class=\"text-muted\">\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div *ngIf=\"isPackageBlueprint\" class=\"col-3 text-right-md p-r-md-40\">\n              <button (click)=\"deploy()\" class=\"btn btn-primary btn-sm\">\n                <i c8yIcon=\"output\" class=\"m-r-4\"></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        *ngIf=\"!markdown\"\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        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n        class=\"markdown-content\"\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 class=\"p-16\" *ngIf=\"(exportedPlugins$ | async).length === 0\">\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: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: i1.TranslatePackageLabelPipe, name: "translatePackageLabel" }] });
+PackageDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageDetailsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.FetchClient }, { token: i2.WizardModalService }, { token: i1.EcosystemService }, { token: i2.ContextRouteService }, { token: i2.PluginsService }, { token: PackageAvailabilityService }, { token: i2.AppStateService }, { token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component });
+PackageDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PackageDetailsComponent, selector: "c8y-package-details", ngImport: i0, template: "<c8y-title>{{ 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]=\"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 for=\"availability\" translate>Availability</label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          id=\"availability\"\n          class=\"form-control\"\n          [ngModel]=\"package.availability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option *ngFor=\"let availability of availabilities\" [ngValue]=\"availability.value\">\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        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\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 | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i c8yIcon=\"big-parcel\" class=\"c8y-icon-duocolor icon-48\"></i>\n          <button\n            class=\"btn-clean\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            [delay]=\"500\"\n          >\n            <span [ngClass]=\"appState?.class\" class=\"label\">\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            [delay]=\"500\"\n          >\n            <span [ngClass]=\"packageContentState?.class\" class=\"label\">\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 *ngIf=\"!description\" class=\"text-muted\">\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div *ngIf=\"isPackageBlueprint\" class=\"col-3 text-right-md p-r-md-40\">\n              <button (click)=\"deploy()\" class=\"btn btn-primary btn-sm\">\n                <i c8yIcon=\"output\" class=\"m-r-4\"></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        *ngIf=\"!markdown\"\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        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n        class=\"markdown-content\"\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 class=\"p-16\" *ngIf=\"(exportedPlugins$ | async).length === 0\">\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"] }, { 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", "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: "14.0.6", 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 [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]=\"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 for=\"availability\" translate>Availability</label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          id=\"availability\"\n          class=\"form-control\"\n          [ngModel]=\"package.availability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option *ngFor=\"let availability of availabilities\" [ngValue]=\"availability.value\">\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        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\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 | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i c8yIcon=\"big-parcel\" class=\"c8y-icon-duocolor icon-48\"></i>\n          <button\n            class=\"btn-clean\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            [delay]=\"500\"\n          >\n            <span [ngClass]=\"appState?.class\" class=\"label\">\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            [delay]=\"500\"\n          >\n            <span [ngClass]=\"packageContentState?.class\" class=\"label\">\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 *ngIf=\"!description\" class=\"text-muted\">\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div *ngIf=\"isPackageBlueprint\" class=\"col-3 text-right-md p-r-md-40\">\n              <button (click)=\"deploy()\" class=\"btn btn-primary btn-sm\">\n                <i c8yIcon=\"output\" class=\"m-r-4\"></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        *ngIf=\"!markdown\"\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        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n        class=\"markdown-content\"\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 class=\"p-16\" *ngIf=\"(exportedPlugins$ | async).length === 0\">\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: function () { return [{ type: i1$2.ActivatedRoute }, { type: i2.FetchClient }, { type: i3.WizardModalService }, { type: i1.EcosystemService }, { type: i3.ContextRouteService }, { type: i3.PluginsService }, { type: PackageAvailabilityService }, { type: i3.AppStateService }, { type: i3.PluginsService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i2$1.FetchClient }, { type: i2.WizardModalService }, { type: i1.EcosystemService }, { type: i2.ContextRouteService }, { type: i2.PluginsService }, { type: PackageAvailabilityService }, { type: i2.AppStateService }, { type: i2.PluginsService }]; } });
 
 class PackagesListComponent {
     constructor(ecosystemService, wizardModalService, permissions) {
@@ -1877,12 +1808,12 @@ class PackagesListComponent {
         this.destroy$.complete();
     }
 }
-PackagesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackagesListComponent, deps: [{ token: i1.EcosystemService }, { token: i3.WizardModalService }, { token: i3.Permissions }], target: i0.ɵɵFactoryTarget.Component });
-PackagesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PackagesListComponent, selector: "c8y-packages-list", ngImport: i0, template: "<c8y-title>{{ 'Extensions' | 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]=\"'big-parcel'\"\n    [path]=\"'ecosystem/extension/extensions'\"\n    [label]=\"'Extensions' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"hasAdminPermissions\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add extension package' | translate }}\"\n    type=\"button\"\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    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadPackages()\"\n  >\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'\" itemClass=\"navbar-form hidden-xs\">\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=\"/users-guide/administration/#extensions\"></c8y-help>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(packages$ | 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      {{ '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 *ngFor=\"let app of packages$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadPackages()\"\n      (onAppCloned)=\"loadPackages()\"\n      [app]=\"app\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  *ngIf=\"(packages$ | async)?.length === 0\"\n  [icon]=\"'big-parcel'\"\n  [title]=\"'No extensions to display.' | translate\"\n  [subtitle]=\"hasAdminPermissions ? (emptyStateSubtitle | translate) : ''\"\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", dependencies: [{ kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3.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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+PackagesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackagesListComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardModalService }, { token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Component });
+PackagesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PackagesListComponent, selector: "c8y-packages-list", ngImport: i0, template: "<c8y-title>{{ 'Extensions' | 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]=\"'big-parcel'\"\n    [path]=\"'ecosystem/extension/extensions'\"\n    [label]=\"'Extensions' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"hasAdminPermissions\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add extension package' | translate }}\"\n    type=\"button\"\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    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadPackages()\"\n  >\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'\" itemClass=\"navbar-form hidden-xs\">\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=\"/users-guide/administration/#extensions\"></c8y-help>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(packages$ | 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      {{ '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 *ngFor=\"let app of packages$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadPackages()\"\n      (onAppCloned)=\"loadPackages()\"\n      [app]=\"app\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  *ngIf=\"(packages$ | async)?.length === 0\"\n  [icon]=\"'big-parcel'\"\n  [title]=\"'No extensions to display.' | translate\"\n  [subtitle]=\"hasAdminPermissions ? (emptyStateSubtitle | translate) : ''\"\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", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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 [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></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 [placement]=\"'right'\" *ngIf=\"hasAdminPermissions\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add extension package' | translate }}\"\n    type=\"button\"\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    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadPackages()\"\n  >\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'\" itemClass=\"navbar-form hidden-xs\">\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=\"/users-guide/administration/#extensions\"></c8y-help>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(packages$ | 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      {{ '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 *ngFor=\"let app of packages$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      (onAppDeleted)=\"loadPackages()\"\n      (onAppCloned)=\"loadPackages()\"\n      [app]=\"app\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  *ngIf=\"(packages$ | async)?.length === 0\"\n  [icon]=\"'big-parcel'\"\n  [title]=\"'No extensions to display.' | translate\"\n  [subtitle]=\"hasAdminPermissions ? (emptyStateSubtitle | translate) : ''\"\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" }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i3.WizardModalService }, { type: i3.Permissions }]; } });
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i2.WizardModalService }, { type: i2.Permissions }]; } });
 
 class PackageVersionsPluginsComponent {
     constructor() {
@@ -1899,7 +1830,7 @@ class PackageVersionsPluginsComponent {
     }
 }
 PackageVersionsPluginsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageVersionsPluginsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PackageVersionsPluginsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+PackageVersionsPluginsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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", "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: "14.0.6", 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" }]
@@ -1911,7 +1842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 class PackageVersionsAppsComponent {
 }
 PackageVersionsAppsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageVersionsAppsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PackageVersionsAppsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }] });
+PackageVersionsAppsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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", "emptyActions", "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: "14.0.6", 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>" }]
@@ -1959,12 +1890,12 @@ class PackageContentsComponent {
         });
     }
 }
-PackageContentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageContentsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.ApplicationService }, { token: i3.AlertService }, { token: i3.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component });
-PackageContentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading" }, { kind: "component", type: i3.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: i3.C8yTranslatePipe, name: "translate" }] });
+PackageContentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageContentsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.ApplicationService }, { token: i2.AlertService }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component });
+PackageContentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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" }, { 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: "14.0.6", 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: function () { return [{ type: i1$2.ActivatedRoute }, { type: i2.ApplicationService }, { type: i3.AlertService }, { type: i3.ContextRouteService }]; }, propDecorators: { selectedVersion: [{
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i2$1.ApplicationService }, { type: i2.AlertService }, { type: i2.ContextRouteService }]; }, propDecorators: { selectedVersion: [{
                 type: Input
             }] } });
 
@@ -2132,12 +2063,12 @@ class PackageVersionsListComponent {
                 : this.acknowledgeLimitReached.bind(this);
     }
 }
-PackageVersionsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageVersionsListComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i3.PluginsService }, { token: i1.EcosystemService }, { token: i4.TranslateService }, { token: i3.ModalService }, { token: i3.AlertService }, { token: i3.OptionsService }, { token: i3.Permissions }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-PackageVersionsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading" }, { 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: i3.C8yTranslatePipe, name: "translate" }] });
+PackageVersionsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageVersionsListComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.PluginsService }, { token: i1.EcosystemService }, { token: i4.TranslateService }, { token: i2.ModalService }, { token: i2.AlertService }, { token: i2.OptionsService }, { token: i2.Permissions }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+PackageVersionsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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" }, { 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: "14.0.6", 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: function () { return [{ type: i1$2.ActivatedRoute }, { type: i3.PluginsService }, { type: i1.EcosystemService }, { type: i4.TranslateService }, { type: i3.ModalService }, { type: i3.AlertService }, { type: i3.OptionsService }, { type: i3.Permissions }, { type: i3.GainsightService }]; }, propDecorators: { onVersionSelect: [{
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i2.PluginsService }, { type: i1.EcosystemService }, { type: i4.TranslateService }, { type: i2.ModalService }, { type: i2.AlertService }, { type: i2.OptionsService }, { type: i2.Permissions }, { type: i2.GainsightService }]; }, propDecorators: { onVersionSelect: [{
                 type: Output
             }] } });
 
@@ -2160,12 +2091,12 @@ class PackageVersionsComponent {
         this.selectedVersion = version;
     }
 }
-PackageVersionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageVersionsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i3.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component });
-PackageVersionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.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: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }] });
+PackageVersionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PackageVersionsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component });
+PackageVersionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: "14.0.6", 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: function () { return [{ type: i1$2.ActivatedRoute }, { type: i3.ContextRouteService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i2.ContextRouteService }]; } });
 
 class PackageGuard {
     constructor(ecosystemService) {
@@ -2246,12 +2177,12 @@ class InstallPluginComponent {
         return name && name.toLowerCase().indexOf(term) > -1;
     }
 }
-InstallPluginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: InstallPluginComponent, deps: [{ token: i1$1.BsModalRef }, { token: i3.ModalService }], target: i0.ɵɵFactoryTarget.Component });
-InstallPluginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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      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      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: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FilterInputComponent, selector: "c8y-filter", inputs: ["icon"], outputs: ["onSearch"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: OnlyLatestPluginVersionPipe, name: "onlyLatestPluginVersion" }] });
+InstallPluginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: InstallPluginComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.ModalService }], target: i0.ɵɵFactoryTarget.Component });
+InstallPluginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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      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      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", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: OnlyLatestPluginVersionPipe, name: "onlyLatestPluginVersion" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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      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      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: function () { return [{ type: i1$1.BsModalRef }, { type: i3.ModalService }]; }, propDecorators: { plugins$: [{
+        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i2.ModalService }]; }, propDecorators: { plugins$: [{
                 type: Input
             }] } });
 
@@ -2260,12 +2191,12 @@ class LabelCellRendererComponent {
         this.context = context;
     }
 }
-LabelCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LabelCellRendererComponent, deps: [{ token: i3.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component });
+LabelCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LabelCellRendererComponent, deps: [{ token: i2.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component });
 LabelCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: "14.0.6", ngImport: i0, type: LabelCellRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-label-cell-renderer', template: "<span class=\"label label-info\">{{ context.value }}</span>\n" }]
-        }], ctorParameters: function () { return [{ type: i3.CellRendererContext }]; } });
+        }], ctorParameters: function () { return [{ type: i2.CellRendererContext }]; } });
 
 class OrphanedStatusCellRendererComponent {
     constructor(context) {
@@ -2303,12 +2234,12 @@ class OrphanedStatusCellRendererComponent {
         }
     }
 }
-OrphanedStatusCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: OrphanedStatusCellRendererComponent, deps: [{ token: i3.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component });
-OrphanedStatusCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
+OrphanedStatusCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: OrphanedStatusCellRendererComponent, deps: [{ token: i2.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component });
+OrphanedStatusCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: "14.0.6", ngImport: i0, type: OrphanedStatusCellRendererComponent, 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: function () { return [{ type: i3.CellRendererContext }]; } });
+        }], ctorParameters: function () { return [{ type: i2.CellRendererContext }]; } });
 
 class UpdatePluginOfAppComponent {
     constructor(bsModalRef, pluginsService, alert, ecosystemService, gainsightService) {
@@ -2395,12 +2326,12 @@ class UpdatePluginOfAppComponent {
         this._cancel();
     }
 }
-UpdatePluginOfAppComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UpdatePluginOfAppComponent, deps: [{ token: i1$1.BsModalRef }, { token: i3.PluginsService }, { token: i3.AlertService }, { token: i1.EcosystemService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-UpdatePluginOfAppComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.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: i3.C8yTranslatePipe, name: "translate" }] });
+UpdatePluginOfAppComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", 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 });
+UpdatePluginOfAppComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UpdatePluginOfAppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-update-plugin-of-app', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i3.PluginsService }, { type: i3.AlertService }, { type: i1.EcosystemService }, { type: i3.GainsightService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i1.EcosystemService }, { type: i2.GainsightService }]; } });
 
 class ApplicationPluginsComponent {
     constructor(activatedRoute, ecosystemService, bsModalService, modal, translateService, pluginsService, alertService, gainsightService) {
@@ -2794,12 +2725,12 @@ class ApplicationPluginsComponent {
         return value.replace(/(@|\/)/g, '');
     }
 }
-ApplicationPluginsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationPluginsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i3.ModalService }, { token: i4.TranslateService }, { token: i3.PluginsService }, { token: i3.AlertService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationPluginsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/applications/application'\"\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 [placement]=\"'right'\">\n  <button\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\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 *ngIf=\"orphanedPlugins?.length\" [placement]=\"'right'\">\n    <button\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\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    [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    class=\"d-contents\"\n  >\n    <!-- No search/filtered results empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"(installedPlugins$ | async)?.length\"\n      [icon]=\"'search'\"\n      [title]=\"'No plugins to display.' | translate\"\n      [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n      [horizontal]=\"true\"\n    >\n    </c8y-ui-empty-state>\n    <!-- No installed plugins empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"!(installedPlugins$ | async)?.length && !isLoading\"\n      [icon]=\"'plugin'\"\n      [title]=\"'No plugins installed.' | translate\"\n      [subtitle]=\"'This application doesn\\'t have any plugin. Click below to install.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <div class=\"fit-w p-t-16\">\n        <button\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,\n            action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.INSTALL_PLUGINS,\n            url: CURRENT_LOCATION\n          }\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          translate\n        >\n          Install plugins\n        </button>\n      </div>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }] });
+ApplicationPluginsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationPluginsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.ModalService }, { token: i4.TranslateService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+ApplicationPluginsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/applications/application'\"\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 [placement]=\"'right'\">\n  <button\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\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 *ngIf=\"orphanedPlugins?.length\" [placement]=\"'right'\">\n    <button\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\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    [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    class=\"d-contents\"\n  >\n    <!-- No search/filtered results empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"(installedPlugins$ | async)?.length\"\n      [icon]=\"'search'\"\n      [title]=\"'No plugins to display.' | translate\"\n      [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n      [horizontal]=\"true\"\n    >\n    </c8y-ui-empty-state>\n    <!-- No installed plugins empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"!(installedPlugins$ | async)?.length && !isLoading\"\n      [icon]=\"'plugin'\"\n      [title]=\"'No plugins installed.' | translate\"\n      [subtitle]=\"'This application doesn\\'t have any plugin. Click below to install.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <div class=\"fit-w p-t-16\">\n        <button\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,\n            action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.INSTALL_PLUGINS,\n            url: CURRENT_LOCATION\n          }\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          translate\n        >\n          Install plugins\n        </button>\n      </div>\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"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning"], 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: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { 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: "14.0.6", ngImport: i0, type: ApplicationPluginsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-app-plugins', template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/applications/application'\"\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 [placement]=\"'right'\">\n  <button\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\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 *ngIf=\"orphanedPlugins?.length\" [placement]=\"'right'\">\n    <button\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\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    [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    class=\"d-contents\"\n  >\n    <!-- No search/filtered results empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"(installedPlugins$ | async)?.length\"\n      [icon]=\"'search'\"\n      [title]=\"'No plugins to display.' | translate\"\n      [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n      [horizontal]=\"true\"\n    >\n    </c8y-ui-empty-state>\n    <!-- No installed plugins empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"!(installedPlugins$ | async)?.length && !isLoading\"\n      [icon]=\"'plugin'\"\n      [title]=\"'No plugins installed.' | translate\"\n      [subtitle]=\"'This application doesn\\'t have any plugin. Click below to install.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <div class=\"fit-w p-t-16\">\n        <button\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,\n            action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.INSTALL_PLUGINS,\n            url: CURRENT_LOCATION\n          }\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          translate\n        >\n          Install plugins\n        </button>\n      </div>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i3.ModalService }, { type: i4.TranslateService }, { type: i3.PluginsService }, { type: i3.AlertService }, { type: i3.GainsightService }]; }, propDecorators: { appId: [{
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.ModalService }, { type: i4.TranslateService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i2.GainsightService }]; }, propDecorators: { appId: [{
                 type: Input
             }], dataGrid: [{
                 type: ViewChild,