@c8y/ngx-components 1018.503.62 → 1018.503.69

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

@@ -23,7 +23,7 @@ import { tap, switchMap, shareReplay, takeUntil, map } from 'rxjs/operators';
 import * as i6 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import { uniq, pick } from 'lodash-es';
+import { pick, uniq } from 'lodash-es';
 import { LicenseConfirmModule } from '@c8y/ngx-components/ecosystem/license-confirm';
 import { A11yModule } from '@angular/cdk/a11y';
 
@@ -1183,12 +1183,21 @@ class DeployApplicationComponent {
         }
         try {
             this.deployedApp = await this.ecosystemService.deployApp(this.package, formGroupValue, this.model);
+            const applicationCustomEventInfo = pick(this.package, [
+                'id',
+                'name',
+                'contextPath',
+                'label',
+                'key'
+            ]);
             this.deployedWithSuccess = true;
             this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
                 component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
                 action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
                 result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.DEPLOYED,
-                url: this.CURRENT_LOCATION
+                url: this.CURRENT_LOCATION,
+                ...applicationCustomEventInfo,
+                package: this.deployedApp?.manifest?.package ?? null
             });
         }
         catch (error) {
@@ -1197,7 +1206,8 @@ class DeployApplicationComponent {
                 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
+                url: this.CURRENT_LOCATION,
+                error
             });
         }
         finally {
@@ -1390,11 +1400,6 @@ class PluginListComponent {
         await this.updateAppRemotes(plugin, 'install');
     }
     async uninstallPlugin(plugin) {
-        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
-            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
-            action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.INSTALL_PLUGIN,
-            url: this.CURRENT_LOCATION
-        });
         await this.updateAppRemotes(plugin, 'uninstall');
     }
     async updateAppRemotes(plugin, updateType) {
@@ -1447,22 +1452,40 @@ class PluginListComponent {
                     })
                     : this.translateService.instant(gettext('Plugin uninstalled from application "{{ appName }}".'), { appName: app.name });
                 this.alertService.success(successText);
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
-                    result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_INSTALLED,
-                    url: this.CURRENT_LOCATION
-                });
+                this.onUpdateEventHandleGS(plugin, app, updateType);
             }
-            catch {
+            catch (error) {
                 this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
                     component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
                     result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                    url: this.CURRENT_LOCATION
+                    url: this.CURRENT_LOCATION,
+                    error
                 });
             }
         }
         this.updatingPluginId[updateType] = '';
     }
+    onUpdateEventHandleGS(plugin, app, updateType) {
+        const pluginCustomEventInfo = pick(plugin, [
+            'name',
+            'contextPath',
+            'module',
+            'version',
+            'type',
+            'id'
+        ]);
+        const gsEventResult = updateType === 'install'
+            ? PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_INSTALLED
+            : PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_REMOVED;
+        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
+            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
+            result: gsEventResult,
+            url: this.CURRENT_LOCATION,
+            ...pluginCustomEventInfo,
+            targetApplicationName: app.name,
+            targetApplicationContextPath: app.contextPath
+        });
+    }
     async getAppsForUpdate(plugin, updateType) {
         let apps = (await this.ecosystemService.getWebApplications()).filter(app => this.ecosystemService.isOwner(app) && app.type !== ApplicationType.EXTERNAL);
         if (updateType === 'install') {
@@ -1662,10 +1685,10 @@ class PackageDetailsComponent {
     }
 }
 PackageDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PackageDetailsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i4.FetchClient }, { token: i2.WizardModalService }, { token: i1.EcosystemService }, { token: i2.ContextRouteService }, { token: i2.PluginsService }, { token: i1.PackageAvailabilityService }, { token: i2.AppStateService }, { token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component });
-PackageDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PackageDetailsComponent, selector: "c8y-package-details", ngImport: i0, template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"form-horizontal\">\n    <div class=\"form-group\">\n      <label\n        for=\"availability\"\n        translate\n      >\n        Availability\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availability\"\n          [(ngModel)]=\"packageAvailability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL\n          }\"\n        >\n          {{ package.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <div class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml : { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll d-flex d-col\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "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" }] });
+PackageDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PackageDetailsComponent, selector: "c8y-package-details", ngImport: i0, template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"form-horizontal\">\n    <div class=\"form-group\">\n      <label\n        for=\"availability\"\n        translate\n      >\n        Availability`of package based on app state`\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availability\"\n          [(ngModel)]=\"packageAvailability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL\n          }\"\n        >\n          {{ package.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <div class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll d-flex d-col\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "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: "15.2.7", ngImport: i0, type: PackageDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-package-details', template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"form-horizontal\">\n    <div class=\"form-group\">\n      <label\n        for=\"availability\"\n        translate\n      >\n        Availability\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availability\"\n          [(ngModel)]=\"packageAvailability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL\n          }\"\n        >\n          {{ package.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <div class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml : { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll d-flex d-col\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-package-details', template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"form-horizontal\">\n    <div class=\"form-group\">\n      <label\n        for=\"availability\"\n        translate\n      >\n        Availability`of package based on app state`\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availability\"\n          [(ngModel)]=\"packageAvailability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL\n          }\"\n        >\n          {{ package.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <div class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll d-flex d-col\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i4.FetchClient }, { type: i2.WizardModalService }, { type: i1.EcosystemService }, { type: i2.ContextRouteService }, { type: i2.PluginsService }, { type: i1.PackageAvailabilityService }, { type: i2.AppStateService }, { type: i2.PluginsService }]; } });
 
 class PackagesListComponent {