@c8y/ngx-components 1021.64.0 → 1021.67.0

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

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
 import { Component, Input, Pipe, inject, Injectable, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
-import { gettext, Status, GainsightService, PluginsService, AlertService, HumanizeAppNamePipe, PackageType, PluginsExportScopes, Permissions, ViewContext, ApplicationPluginStatus, BottomDrawerRef, DataGridComponent, CoreModule, hookRoute, C8yStepper, FormsModule, hookTab, hookNavigator, hookWizard } from '@c8y/ngx-components';
+import { gettext, Status, GainsightService, PluginsService, AlertService, HumanizeAppNamePipe, PackageType, PluginsExportScopes, Permissions, ViewContext, ApplicationPluginStatus, BottomDrawerRef, DataGridComponent, CoreModule, hookRoute, C8yStepper, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, C8yTranslatePipe, FormsModule, hookTab, hookNavigator, hookWizard } from '@c8y/ngx-components';
 import * as i1 from '@c8y/ngx-components/ecosystem/shared';
-import { EcosystemService, PRODUCT_EXPERIENCE_ECOSYSTEM, packageProperties, defaultPackageAvailabilities, EcosystemWizards, ListFiltersComponent, ApplicationPropertiesFormComponent, defaultPackageTypes, SharedEcosystemModule, ERROR_TYPE, APP_STATE, PACKAGE_TYPE_LABELS, defaultPackageContents } from '@c8y/ngx-components/ecosystem/shared';
+import { EcosystemService, PRODUCT_EXPERIENCE_ECOSYSTEM, packageProperties, defaultPackageAvailabilities, EcosystemWizards, ListFiltersComponent, ApplicationPropertiesFormComponent, defaultPackageTypes, SharedEcosystemModule, ERROR_TYPE, APP_STATE, PACKAGE_TYPE_LABELS, defaultPackageContents, PackageChangelogComponent } from '@c8y/ngx-components/ecosystem/shared';
 import * as i3 from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
-import { RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import * as i4 from '@c8y/client';
 import { ApplicationType, Isolation, BillingMode } from '@c8y/client';
 import * as i6 from '@ngx-translate/core';
@@ -1607,11 +1608,11 @@ class UpdatePluginOfAppComponent {
         this._cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdatePluginOfAppComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i1.EcosystemService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UpdatePluginOfAppComponent, selector: "c8y-update-plugin-of-app", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.PackageVersionSelectComponent, selector: "c8y-package-version-select", inputs: ["label", "packageContextPath", "packageId"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UpdatePluginOfAppComponent, selector: "c8y-update-plugin-of-app", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'installing-updates'\"></i>\n    <h4\n      id=\"modal-title\"\n      *ngIf=\"!downgrade\"\n      translate\n    >\n      Update plugin\n    </h4>\n    <h4\n      id=\"modal-title\"\n      *ngIf=\"downgrade\"\n      translate\n    >\n      Downgrade plugin\n    </h4>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"card-block p-r-24 p-l-24 sticky-top bg-component separator-bottom\">\n      <c8y-package-version-select\n        [packageContextPath]=\"plugin?.contextPath\"\n        [(ngModel)]=\"applicationVersion\"\n      ></c8y-package-version-select>\n      <div\n        class=\"alert alert-info\"\n        role=\"alert\"\n        *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n      >\n        <span\n          translate\n          ngNonBindable\n          [translateParams]=\"applicationVersion\"\n        >\n          Select another version, as {{ version }} is currently used.\n        </span>\n      </div>\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"updateAll\"\n          />\n          <span></span>\n          <span\n            translate\n            ngNonBindable\n            [translateParams]=\"plugin\"\n          >\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n      <p class=\"legend form-block\">\n        {{ 'Change log' | translate }}\n      </p>\n    </div>\n    <div class=\"card-block p-l-24 p-r-24\">\n\n      <div\n        class=\"markdown-content markdown-content--to-h3\"\n      >\n        <c8y-contents-changelog\n          [package]=\"plugin.originApp\"\n          [selectedVersion]=\"applicationVersion?.version\"\n          [previousVersion]=\"plugin?.version\"\n        ></c8y-contents-changelog>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.PackageVersionSelectComponent, selector: "c8y-package-version-select", inputs: ["label", "packageContextPath", "packageId"] }, { kind: "component", type: i1.PackageChangelogComponent, selector: "c8y-contents-changelog", inputs: ["package", "selectedVersion", "previousVersion"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdatePluginOfAppComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-update-plugin-of-app', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-update-plugin-of-app', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'installing-updates'\"></i>\n    <h4\n      id=\"modal-title\"\n      *ngIf=\"!downgrade\"\n      translate\n    >\n      Update plugin\n    </h4>\n    <h4\n      id=\"modal-title\"\n      *ngIf=\"downgrade\"\n      translate\n    >\n      Downgrade plugin\n    </h4>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"card-block p-r-24 p-l-24 sticky-top bg-component separator-bottom\">\n      <c8y-package-version-select\n        [packageContextPath]=\"plugin?.contextPath\"\n        [(ngModel)]=\"applicationVersion\"\n      ></c8y-package-version-select>\n      <div\n        class=\"alert alert-info\"\n        role=\"alert\"\n        *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n      >\n        <span\n          translate\n          ngNonBindable\n          [translateParams]=\"applicationVersion\"\n        >\n          Select another version, as {{ version }} is currently used.\n        </span>\n      </div>\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"updateAll\"\n          />\n          <span></span>\n          <span\n            translate\n            ngNonBindable\n            [translateParams]=\"plugin\"\n          >\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n      <p class=\"legend form-block\">\n        {{ 'Change log' | translate }}\n      </p>\n    </div>\n    <div class=\"card-block p-l-24 p-r-24\">\n\n      <div\n        class=\"markdown-content markdown-content--to-h3\"\n      >\n        <c8y-contents-changelog\n          [package]=\"plugin.originApp\"\n          [selectedVersion]=\"applicationVersion?.version\"\n          [previousVersion]=\"plugin?.version\"\n        ></c8y-contents-changelog>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i1.EcosystemService }, { type: i2.GainsightService }] });
 
 class ApplicationPluginReadmeComponent {
@@ -1853,7 +1854,7 @@ class ApplicationPluginsComponent {
             {
                 type: 'customUpdate',
                 text: gettext('Update'),
-                icon: 'caret-square-o-up',
+                icon: 'installing-updates',
                 showIf: plugin => {
                     return (plugin.status === ApplicationPluginStatus.OUTDATED ||
                         plugin.status === ApplicationPluginStatus.REVOKED);
@@ -1863,7 +1864,7 @@ class ApplicationPluginsComponent {
             {
                 type: 'customDowngrade',
                 text: gettext('Downgrade'),
-                icon: 'caret-square-o-down',
+                icon: 'installing-updates',
                 showIf: (plugin) => {
                     if (plugin.scope === PluginsExportScopes.SELF ||
                         plugin.scope === PluginsExportScopes.SELF_OPTIONAL) {
@@ -1894,7 +1895,7 @@ class ApplicationPluginsComponent {
     async updatePlugin(app, plugin, downgrade = false) {
         try {
             await this.bsModalService.show(UpdatePluginOfAppComponent, {
-                class: 'modal-sm',
+                class: 'modal-md',
                 ariaDescribedby: 'modal-body',
                 ariaLabelledBy: 'modal-title',
                 initialState: {
@@ -2797,6 +2798,7 @@ class PackageContentsComponent {
     async ngOnChanges(changes) {
         if (changes.selectedVersion?.currentValue) {
             this.loadManifest(this.selectedVersion);
+            this.previousVersion = this.getPreviousVersion();
         }
     }
     async loadManifest(version) {
@@ -2814,12 +2816,22 @@ class PackageContentsComponent {
         }
         return undefined;
     }
+    getPreviousVersion() {
+        if (this.package.applicationVersions.length === 1) {
+            return null;
+        }
+        const selectedVersionIndex = this.package.applicationVersions.findIndex(version => version.version === this.selectedVersion);
+        if (selectedVersionIndex === 0) {
+            return null;
+        }
+        return this.package.applicationVersions[selectedVersionIndex - 1].version;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageContentsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i4.ApplicationService }, { token: i2.AlertService }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageContentsComponent, selector: "c8y-package-contents", inputs: { selectedVersion: "selectedVersion", selectedPlugin: "selectedPlugin" }, outputs: { showOverview: "showOverview" }, 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      [selectedPlugin]=\"selectedPlugin\"\n      (showOverview)=\"showPluginOverview($event)\"\n      ></c8y-contents-plugins>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "component", type: PackageVersionsPluginsComponent, selector: "c8y-contents-plugins", inputs: ["selectedVersionManifest", "selectedPlugin"], outputs: ["showOverview"] }, { kind: "component", type: PackageVersionsAppsComponent, selector: "c8y-contents-apps", inputs: ["selectedVersionManifest"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageContentsComponent, selector: "c8y-package-contents", inputs: { selectedVersion: "selectedVersion", selectedPlugin: "selectedPlugin" }, outputs: { showOverview: "showOverview" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!selectedVersionManifest && !isLoading\">\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'big-parcel'\"\n      [title]=\"'No package selected' | translate\"\n      [subtitle]=\"'Select a package from the list to display the package contents.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isLoading\">\n  <c8y-loading></c8y-loading>\n</ng-container>\n\n<ng-container *ngIf=\"selectedVersionManifest && !isLoading\">\n  <!-- DETAILS -->\n  <div class=\"card-block\">\n    <c8y-properties-list\n      [data]=\"selectedVersionManifest\"\n      [emptyLabel]=\"'--'\"\n      [properties]=\"packageVersionProperties\"\n    ></c8y-properties-list>\n\n    <!-- APPS -->\n    <c8y-contents-apps\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n    ></c8y-contents-apps>\n\n    <!-- PLUGINS -->\n    <c8y-contents-plugins\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      [selectedPlugin]=\"selectedPlugin\"\n      (showOverview)=\"showPluginOverview($event)\"\n    ></c8y-contents-plugins>\n\n    <!-- CHANGELOG -->\n    <p class=\"legend form-block\">\n      {{ 'Change log' | translate }}\n    </p>\n\n    <c8y-contents-changelog\n      [package]=\"package\"\n      [selectedVersion]=\"selectedVersion\"\n      [previousVersion]=\"previousVersion\"\n    ></c8y-contents-changelog>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "component", type: i1.PackageChangelogComponent, selector: "c8y-contents-changelog", inputs: ["package", "selectedVersion", "previousVersion"] }, { kind: "component", type: PackageVersionsPluginsComponent, selector: "c8y-contents-plugins", inputs: ["selectedVersionManifest", "selectedPlugin"], outputs: ["showOverview"] }, { kind: "component", type: PackageVersionsAppsComponent, selector: "c8y-contents-apps", inputs: ["selectedVersionManifest"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageContentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-package-contents', template: "<div class=\"inner-scroll\">\n  <ng-container *ngIf=\"!selectedVersionManifest && !isLoading\">\n    <div class=\"p-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'big-parcel'\"\n        [horizontal]=\"true\"\n        [title]=\"'No package selected' | translate\"\n        [subtitle]=\"'Select a package from the list to display the package contents.' | translate\"\n      ></c8y-ui-empty-state>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isLoading\">\n    <c8y-loading></c8y-loading>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedVersionManifest && !isLoading\">\n    <!-- DETAILS -->\n    <div class=\"card-block p-t-0\">\n      <c8y-properties-list\n        [data]=\"selectedVersionManifest\"\n        [emptyLabel]=\"'--'\"\n        [properties]=\"packageVersionProperties\"\n      >\n      </c8y-properties-list>\n      \n        <!-- APPS -->\n      <c8y-contents-apps\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      ></c8y-contents-apps>\n\n      <!-- PLUGINS -->\n      <c8y-contents-plugins\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      [selectedPlugin]=\"selectedPlugin\"\n      (showOverview)=\"showPluginOverview($event)\"\n      ></c8y-contents-plugins>\n    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'c8y-package-contents', template: "<ng-container *ngIf=\"!selectedVersionManifest && !isLoading\">\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'big-parcel'\"\n      [title]=\"'No package selected' | translate\"\n      [subtitle]=\"'Select a package from the list to display the package contents.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isLoading\">\n  <c8y-loading></c8y-loading>\n</ng-container>\n\n<ng-container *ngIf=\"selectedVersionManifest && !isLoading\">\n  <!-- DETAILS -->\n  <div class=\"card-block\">\n    <c8y-properties-list\n      [data]=\"selectedVersionManifest\"\n      [emptyLabel]=\"'--'\"\n      [properties]=\"packageVersionProperties\"\n    ></c8y-properties-list>\n\n    <!-- APPS -->\n    <c8y-contents-apps\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n    ></c8y-contents-apps>\n\n    <!-- PLUGINS -->\n    <c8y-contents-plugins\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      [selectedPlugin]=\"selectedPlugin\"\n      (showOverview)=\"showPluginOverview($event)\"\n    ></c8y-contents-plugins>\n\n    <!-- CHANGELOG -->\n    <p class=\"legend form-block\">\n      {{ 'Change log' | translate }}\n    </p>\n\n    <c8y-contents-changelog\n      [package]=\"package\"\n      [selectedVersion]=\"selectedVersion\"\n      [previousVersion]=\"previousVersion\"\n    ></c8y-contents-changelog>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i4.ApplicationService }, { type: i2.AlertService }, { type: i2.ContextRouteService }], propDecorators: { selectedVersion: [{
                 type: Input
             }], selectedPlugin: [{
@@ -3041,6 +3053,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1.EcosystemService }] });
 
+class PackageChangelogTabComponent {
+    constructor(activatedRoute, contextRouteService) {
+        this.activatedRoute = activatedRoute;
+        this.contextRouteService = contextRouteService;
+        this.package = {};
+    }
+    async ngOnInit() {
+        this.package = this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogTabComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageChangelogTabComponent, isStandalone: true, selector: "c8y-package-changelog-tab", ngImport: i0, template: "<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"package?.name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Change logs' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-contents-changelog [package]=\"package\"></c8y-contents-changelog>\n", dependencies: [{ kind: "component", type: PackageChangelogComponent, selector: "c8y-contents-changelog", inputs: ["package", "selectedVersion", "previousVersion"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-package-changelog-tab', standalone: true, imports: [
+                        PackageChangelogComponent,
+                        TitleComponent,
+                        HumanizeAppNamePipe,
+                        BreadcrumbComponent,
+                        BreadcrumbItemComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"package?.name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Change logs' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-contents-changelog [package]=\"package\"></c8y-contents-changelog>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2.ContextRouteService }] });
+
+class PackageChangelogGuard {
+    constructor() {
+        this.pluginsService = inject(PluginsService);
+        this.router = inject(Router);
+    }
+    async canActivate(route) {
+        const app = route.data.contextData || route.parent.data.contextData;
+        const packageChangelogUrl = `/apps/${app.contextPath}/`;
+        const changelog = await this.pluginsService.getChangelogFileContent(packageChangelogUrl);
+        return !!changelog;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogGuard }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogGuard, decorators: [{
+            type: Injectable
+        }] });
+
 const ecosystemMainRoutes = [
     {
         path: 'ecosystem/application',
@@ -3113,9 +3168,18 @@ const applicationDetailsRoutes = [
         icon: 'c8y-modules',
         label: gettext('Versions'),
         context: ViewContext.Extension,
-        priority: 1,
+        priority: 5,
         canActivate: [PackageGuard, PackageVersionsGuard]
     },
+    {
+        path: 'package-changelog',
+        component: PackageChangelogTabComponent,
+        icon: 'list',
+        label: gettext('Change log'),
+        context: ViewContext.Extension,
+        priority: 1,
+        canActivate: [PackageGuard, PackageChangelogGuard]
+    },
     {
         path: 'properties',
         component: ApplicationPropertiesComponent,
@@ -3157,13 +3221,15 @@ class EcosystemModule {
             LicenseConfirmModule,
             IconSelectorModule,
             A11yModule,
-            ArchivedConfirmModule], exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent] }); }
+            ArchivedConfirmModule,
+            PackageChangelogTabComponent], exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EcosystemModule, providers: [
             hookTab(EcosystemTabs),
             hookNavigator(EcosystemNavigationFactory),
             hookRoute(applicationDetailsRoutes),
             PackageGuard,
             PackageVersionsGuard,
+            PackageChangelogGuard,
             ApplicationPropertiesGuard,
             hookWizard({
                 wizardId: EcosystemWizards.APPLICATION_UPLOAD,
@@ -3211,7 +3277,8 @@ class EcosystemModule {
             LicenseConfirmModule,
             IconSelectorModule,
             A11yModule,
-            ArchivedConfirmModule] }); }
+            ArchivedConfirmModule,
+            PackageChangelogTabComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EcosystemModule, decorators: [{
             type: NgModule,
@@ -3251,7 +3318,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LicenseConfirmModule,
                         IconSelectorModule,
                         A11yModule,
-                        ArchivedConfirmModule
+                        ArchivedConfirmModule,
+                        PackageChangelogTabComponent
                     ],
                     exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent],
                     providers: [
@@ -3260,6 +3328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         hookRoute(applicationDetailsRoutes),
                         PackageGuard,
                         PackageVersionsGuard,
+                        PackageChangelogGuard,
                         ApplicationPropertiesGuard,
                         hookWizard({
                             wizardId: EcosystemWizards.APPLICATION_UPLOAD,