@c8y/ngx-components 1021.38.0 → 1021.49.1

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

@@ -7,12 +7,12 @@ import { gettext, PackageType, Status, DropAreaComponent, C8yStepper, internalAp
 import * as i3 from '@ngx-translate/core';
 import { saveAs } from 'file-saver';
 import { groupBy, uniqBy, get, pick, omit, isUndefined, kebabCase, cloneDeep } from 'lodash-es';
-import { BehaviorSubject, defer, merge, combineLatest, pipe } from 'rxjs';
-import { map, shareReplay, debounceTime, take, filter, distinctUntilKeyChanged, tap, switchMap } from 'rxjs/operators';
+import { BehaviorSubject, defer, merge, combineLatest, Subject, pipe } from 'rxjs';
+import { map, shareReplay, debounceTime, take, filter, distinctUntilKeyChanged, tap, switchMap, takeUntil } from 'rxjs/operators';
 import { satisfies, gt, coerce } from 'semver';
-import * as i3$2 from '@angular/common';
+import * as i5 from '@angular/common';
 import * as i1 from '@angular/forms';
-import { Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import * as i4 from '@angular/router';
@@ -22,10 +22,10 @@ import * as i7 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i8$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i3$3 from '@c8y/ngx-components/icon-selector';
+import * as i3$2 from '@c8y/ngx-components/icon-selector';
 import { IconSelectorModule } from '@c8y/ngx-components/icon-selector';
 import * as i1$1 from 'ngx-bootstrap/modal';
-import * as i5 from '@angular/cdk/stepper';
+import * as i5$1 from '@angular/cdk/stepper';
 
 /** Wizard types  */
 var EcosystemWizards;
@@ -35,6 +35,7 @@ var EcosystemWizards;
     EcosystemWizards["PACKAGE_UPLOAD"] = "ecosystemPackageUpload";
     EcosystemWizards["BLUEPRINT_DEPLOYMENT"] = "ecosystemBlueprintDeployment";
     EcosystemWizards["LICENSE_CONFIRM"] = "ecosystemLicenseConfirm";
+    EcosystemWizards["ARCHIVED_CONFIRM"] = "ecosystemArchivedConfirm";
 })(EcosystemWizards || (EcosystemWizards = {}));
 var ERROR_TYPE;
 (function (ERROR_TYPE) {
@@ -72,7 +73,8 @@ const PRODUCT_EXPERIENCE_ECOSYSTEM = {
             PLUGIN_LIST: 'plugin-list',
             PACKAGE_VERSIONS: 'package-versions-list',
             UPDATE_PLUGIN_OF_APP: 'update-plugin-of-app',
-            LIST_FILTERS: 'list-filters'
+            LIST_FILTERS: 'list-filters',
+            PACKAGE_DETAILS: 'package-details'
         },
         ACTIONS: {
             AVAILABILITY_CHANGE: 'availabilityChange',
@@ -92,7 +94,9 @@ const PRODUCT_EXPERIENCE_ECOSYSTEM = {
             UPLOAD: 'upload',
             SET_FILTER_TERM: 'setFilterTerm',
             SET_PREDEFINED_FILTERS: 'setPredefinedFilters',
-            RESET_FILTER: 'resetFilter'
+            RESET_FILTER: 'resetFilter',
+            INSTALL_PLUGINS_INITIATED: 'installPluginsInitiated',
+            DEPLOY_APPLICATION_INITIATED: 'deployApplicationInitiated'
         },
         RESULTS: {
             DEPLOYED: 'deployed',
@@ -168,6 +172,10 @@ const PACKAGE_TYPE_LABELS = {
     [PackageType.UNKNOWN]: {
         label: gettext('CUSTOM`Package maintained by an unknown source.`'),
         tooltip: gettext('Package maintainer unknown.')
+    },
+    [PackageType.ARCHIVED]: {
+        label: gettext('ARCHIVED`Package out of maintenance.`'),
+        tooltip: gettext('The package was marked by the author as archived.')
     }
 };
 const packageProperties = [
@@ -327,6 +335,31 @@ class EcosystemService {
         });
         return result;
     }
+    /**
+     * If the plugin is archived, a warning should be shown.
+     *
+     * @param pluginsToInstall The list of plugins to install.
+     * @returns true if the installation can continue.
+     */
+    async verifyArchived(pluginsToInstall) {
+        let _resolve;
+        const result = new Promise(resolve => {
+            _resolve = resolve;
+        });
+        pluginsToInstall = pluginsToInstall.filter(plugin => plugin.type === PackageType.ARCHIVED);
+        if (pluginsToInstall.length === 0) {
+            return Promise.resolve(true);
+        }
+        const initialState = {
+            id: EcosystemWizards.ARCHIVED_CONFIRM
+        };
+        const modalOptions = { initialState };
+        const wizard = this.wizardModalService.show(modalOptions);
+        wizard.content.onClose.subscribe(confirmed => {
+            _resolve(confirmed);
+        });
+        return result;
+    }
     /**
      * @description
      * Compares currently deployed application version with application version tagged as "latest"
@@ -1180,7 +1213,7 @@ class AddApplicationComponent {
         this.createdApp = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddApplicationComponent, deps: [{ token: EcosystemService }, { token: i2.AlertService }, { token: i3$1.ApplicationService }, { token: i2.WizardComponent }, { token: i3.TranslateService }, { token: PackageAvailabilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddApplicationComponent, selector: "c8y-add-application", inputs: { headerText: "headerText", headerIcon: "headerIcon", successText: "successText", createApplicationHandler: "createApplicationHandler", uploadApplicationHandler: "uploadApplicationHandler", canGoBack: "canGoBack", applicationType: "applicationType" }, viewQueries: [{ propertyName: "dropAreaComponent", first: true, predicate: DropAreaComponent, descendants: true }], ngImport: i0, template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"headerIcon\"></i>\n  <h4 id=\"modal-title\">{{ headerText | translate }}</h4>\n</c8y-wizard-header>\n\n<c8y-wizard-body>\n  <p class=\"p-16 text-center text-medium separator-bottom sticky-top bg-component\">\n    {{ 'Upload a *.zip file' | translate }}\n  </p>\n  <c8y-form-group\n    class=\"m-t-16 m-l-auto m-r-auto\"\n    style=\"max-width: 265px\"\n    id=\"modal-body\"\n    *ngIf=\"!isAppCreated; else appCreated\"\n    [hasError]=\"!!errorMessage\"\n  >\n    <c8y-drop-area\n      class=\"drop-area\"\n      (dropped)=\"onFileDroppedEvent($event)\"\n      [accept]=\"'.zip'\"\n      [loading]=\"isLoading\"\n      [maxAllowedFiles]=\"1\"\n      [progress]=\"progress | async\"\n    ></c8y-drop-area>\n    <c8y-messages>\n      <c8y-message *ngIf=\"errorMessage\">\n        {{ errorMessage | translate }}\n      </c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n  <div class=\"card-block\" *ngIf=\"applicationType === 'package'\">\n    <c8y-form-group>\n      <label\n        class=\"m-r-8 d-inline-block\"\n        id=\"availabilitySelectorLabel\"\n        for=\"availabilitySelector\"\n      >\n        {{ 'Select extension availability' | translate }}\n      </label>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"availabilityHelpPopover\"\n        placement=\"top\"\n        triggers=\"focus\"\n        type=\"button\"\n      ></button>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availabilitySelector\"\n          name=\"availabilitySelector\"\n          [(ngModel)]=\"selectedAvailability\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailability.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n      </div>\n    </c8y-form-group>\n  </div>\n  <ng-template #appCreated>\n    <div\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 285px\"\n    >\n      <c8y-operation-result\n        class=\"lead\"\n        type=\"success\"\n        text=\"{{ successText | translate }}\"\n        [vertical]=\"true\"\n        [size]=\"84\"\n      ></c8y-operation-result>\n    </div>\n  </ng-template>\n  <ng-template #availabilityHelpPopover>\n    <div [innerHtml]=\"availabilityHelpPopoverText | translate\"></div>\n  </ng-template>\n</c8y-wizard-body>\n\n<c8y-wizard-footer>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    type=\"button\"\n    (click)=\"back()\"\n    *ngIf=\"!isAppCreated && canGoBack\"\n    translate\n  >\n    Back\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"cancel()\"\n    *ngIf=\"!isAppCreated\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Done' | translate }}\"\n    type=\"button\"\n    (click)=\"done()\"\n    *ngIf=\"isAppCreated\"\n    translate\n  >\n    Done\n  </button>\n  <a\n    class=\"btn btn-primary\"\n    title=\"{{ 'Open' | translate }}\"\n    target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n    *ngIf=\"isAppCreated && canOpenInBrowser\"\n    [href]=\"getHref(createdApp)\"\n    rel=\"noopener noreferrer\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"external-link\"\n    ></i>\n    {{ 'Open' | translate }}\n  </a>\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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { 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: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddApplicationComponent, selector: "c8y-add-application", inputs: { headerText: "headerText", headerIcon: "headerIcon", successText: "successText", createApplicationHandler: "createApplicationHandler", uploadApplicationHandler: "uploadApplicationHandler", canGoBack: "canGoBack", applicationType: "applicationType" }, viewQueries: [{ propertyName: "dropAreaComponent", first: true, predicate: DropAreaComponent, descendants: true }], ngImport: i0, template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"headerIcon\"></i>\n  <h4 id=\"modal-title\">{{ headerText | translate }}</h4>\n</c8y-wizard-header>\n\n<c8y-wizard-body>\n  <p class=\"p-16 text-center text-medium separator-bottom sticky-top bg-component\">\n    {{ 'Upload a *.zip file' | translate }}\n  </p>\n  <c8y-form-group\n    class=\"m-t-16 m-l-auto m-r-auto\"\n    style=\"max-width: 265px\"\n    id=\"modal-body\"\n    *ngIf=\"!isAppCreated; else appCreated\"\n    [hasError]=\"!!errorMessage\"\n  >\n    <c8y-drop-area\n      class=\"drop-area\"\n      (dropped)=\"onFileDroppedEvent($event)\"\n      [accept]=\"'.zip'\"\n      [loading]=\"isLoading\"\n      [maxAllowedFiles]=\"1\"\n      [progress]=\"progress | async\"\n    ></c8y-drop-area>\n    <c8y-messages>\n      <c8y-message *ngIf=\"errorMessage\">\n        {{ errorMessage | translate }}\n      </c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n  <div class=\"card-block\" *ngIf=\"applicationType === 'package'\">\n    <c8y-form-group>\n      <label\n        class=\"m-r-8 d-inline-block\"\n        id=\"availabilitySelectorLabel\"\n        for=\"availabilitySelector\"\n      >\n        {{ 'Select extension availability' | translate }}\n      </label>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"availabilityHelpPopover\"\n        placement=\"top\"\n        triggers=\"focus\"\n        type=\"button\"\n      ></button>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availabilitySelector\"\n          name=\"availabilitySelector\"\n          [(ngModel)]=\"selectedAvailability\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailability.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n      </div>\n    </c8y-form-group>\n  </div>\n  <ng-template #appCreated>\n    <div\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 285px\"\n    >\n      <c8y-operation-result\n        class=\"lead\"\n        type=\"success\"\n        text=\"{{ successText | translate }}\"\n        [vertical]=\"true\"\n        [size]=\"84\"\n      ></c8y-operation-result>\n    </div>\n  </ng-template>\n  <ng-template #availabilityHelpPopover>\n    <div [innerHtml]=\"availabilityHelpPopoverText | translate\"></div>\n  </ng-template>\n</c8y-wizard-body>\n\n<c8y-wizard-footer>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    type=\"button\"\n    (click)=\"back()\"\n    *ngIf=\"!isAppCreated && canGoBack\"\n    translate\n  >\n    Back\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"cancel()\"\n    *ngIf=\"!isAppCreated\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Done' | translate }}\"\n    type=\"button\"\n    (click)=\"done()\"\n    *ngIf=\"isAppCreated\"\n    translate\n  >\n    Done\n  </button>\n  <a\n    class=\"btn btn-primary\"\n    title=\"{{ 'Open' | translate }}\"\n    target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n    *ngIf=\"isAppCreated && canOpenInBrowser\"\n    [href]=\"getHref(createdApp)\"\n    rel=\"noopener noreferrer\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"external-link\"\n    ></i>\n    {{ 'Open' | translate }}\n  </a>\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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { 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: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddApplicationComponent, decorators: [{
             type: Component,
@@ -1209,9 +1242,9 @@ class TranslatePackageLabelPipe {
         this.translate = translate;
     }
     transform(rawPackageLabel) {
-        const isOneOfTheKnownOnes = !!PACKAGE_TYPE_LABELS[rawPackageLabel];
+        const isOneOfTheKnownOnes = !!PACKAGE_TYPE_LABELS[rawPackageLabel?.toUpperCase()];
         if (isOneOfTheKnownOnes) {
-            return this.translate.instant(PACKAGE_TYPE_LABELS[rawPackageLabel].label);
+            return this.translate.instant(PACKAGE_TYPE_LABELS[rawPackageLabel?.toUpperCase()].label);
         }
         return rawPackageLabel;
     }
@@ -1352,11 +1385,11 @@ class ApplicationCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationCardComponent, deps: [{ token: i3$1.ApplicationService }, { token: EcosystemService }, { token: i2.AlertService }, { token: i4.Router }, { token: i2.WizardModalService }, { token: i2.AlertService }, { token: i2.PluginsService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ApplicationCardComponent, selector: "c8y-application-card", inputs: { app: "app", canEdit: "canEdit" }, outputs: { onAppDeleted: "onAppDeleted", onAppCloned: "onAppCloned" }, ngImport: i0, template: "<div\n  class=\"card pointer card--d-col notFeature\"\n  data-cy=\"application-card--extensions-list\"\n  *ngIf=\"!isFeature\"\n>\n  <div\n    class=\"card-block text-center card-column-40\"\n    data-cy=\"application-card--package-name\"\n    (click)=\"detail()\"\n  >\n    <button\n      class=\"card__ribbon btn-clean\"\n      [attr.aria-label]=\"\n        (app.label || app.manifest?.label | translatePackageLabel) +\n        ': ' +\n        (packageTypeLabels[packageType].tooltip | translate)\n      \"\n      tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n      placement=\"right\"\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        {{ app.label || app.manifest?.label | translatePackageLabel }}\n      </span>\n    </button>\n    <div class=\"card-appicon\">\n      <c8y-app-icon\n        *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n        [app]=\"app\"\n        [contextPath]=\"app.contextPath\"\n        [name]=\"app.name\"\n      ></c8y-app-icon>\n      <i\n        c8yIcon=\"big-parcel\"\n        *ngIf=\"isPackage\"\n      ></i>\n      <i\n        c8yIcon=\"microchip\"\n        *ngIf=\"isMicroservice\"\n      ></i>\n      <i\n        c8yIcon=\"globe1\"\n        *ngIf=\"isExternal\"\n      ></i>\n    </div>\n    <div style=\"line-height: 1.3\">\n      <p class=\"e2e-appCardName text-medium text-break-word\">\n        {{ app | humanizeAppName | async }}\n      </p>\n      <ng-container *ngIf=\"isShowVersion\">\n        <p class=\"small text-muted\">\n          <em>{{ app.manifest.version }}</em>\n          <button\n            class=\"btn-clean m-l-4\"\n            [attr.aria-label]=\"'Update available' | translate\"\n            [tooltip]=\"'Update available' | translate\"\n            *ngIf=\"shouldUpgradePackage && isUnpacked\"\n          >\n            <i\n              class=\"text-warning icon-16\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        </p>\n      </ng-container>\n      <p\n        class=\"small text-break-word\"\n        *ngIf=\"app.manifest?.author\"\n      >\n        {{ app.manifest.author }}\n      </p>\n    </div>\n  </div>\n  <div\n    class=\"card-block p-0 no-min-height card--d-col card-column-80 flex-grow\"\n    (click)=\"detail()\"\n  >\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-80\">\n      <div class=\"text-center-grid\">\n        <div class=\"p-b-8 card-hidden-grid\"></div>\n        <p\n          class=\"small l-h-tight p-b-8 p-l-0 p-r-0 text-break-word\"\n          *ngIf=\"app.description || app.manifest?.description\"\n        >\n          {{ app.description || app.manifest?.description | translate }}\n        </p>\n        <p\n          class=\"small l-h-tight p-b-8 p-l-0 p-r-0\"\n          *ngIf=\"!app.description && !app.manifest?.description\"\n        >\n          <em class=\"text-muted\">{{ 'No description available.' | translate }}</em>\n        </p>\n      </div>\n    </div>\n    <div\n      class=\"card-block no-min-height p-t-0 p-b-0 d-flex card-column-20 text-center-grid flex-wrap gap-8\"\n    >\n      <button\n        class=\"btn-clean\"\n        [attr.aria-label]=\"\n          ((isUnpacked ? UNPACKED_LABEL : appState?.label) | translate) +\n          ': ' +\n          (appState?.tooltip | translate)\n        \"\n        [tooltip]=\"appState?.tooltip | translate\"\n        placement=\"top\"\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\n              ? packageContentState?.tooltip\n              : PACKAGE_CONTENT_UNDETERMINED_LABEL) | translate\n        \"\n        [tooltip]=\"\n          (packageContentState?.tooltip\n            ? packageContentState?.tooltip\n            : PACKAGE_CONTENT_UNDETERMINED_LABEL\n          ) | translate\n        \"\n        placement=\"top\"\n        *ngIf=\"isPackage\"\n      >\n        <span\n          class=\"label\"\n          [ngClass]=\"packageContentState?.class ? packageContentState?.class : 'label-danger'\"\n        >\n          {{\n            packageContentState?.label || packageTypeLabels[PACKAGE_TYPE.UNKNOWN].label | translate\n          }}\n        </span>\n      </button>\n    </div>\n    <div class=\"card-footer no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\">\n      <div class=\"p-b-16 card-hidden-list\"></div>\n      <button\n        class=\"btn btn-sm btn-default\"\n        [title]=\"openButtonTitle | translate\"\n        type=\"button\"\n        (click)=\"openApp(); $event.stopPropagation()\"\n        *ngIf=\"canOpenInBrowser\"\n        [disabled]=\"disableOpenInBrowser\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"external-link\"\n        ></i>\n        {{ 'Open' | translate }}\n      </button>\n      <div class=\"p-b-32 card-hidden-list\"></div>\n    </div>\n  </div>\n  <div class=\"p-r-40 card-hidden-grid\"></div>\n  <div\n    class=\"card-actions m-t-0\"\n    *ngIf=\"canEdit || canOpenInBrowser || canDelete\"\n  >\n    <div\n      class=\"dropdown\"\n      #appCardDropdown=\"bs-dropdown\"\n      dropdown\n      [cdkTrapFocus]=\"appCardDropdown.isOpen\"\n    >\n      <button\n        class=\"dropdown-toggle c8y-dropdown\"\n        title=\"{{ 'Settings' | translate }}\"\n        data-cy=\"application-card--settings-button\"\n        type=\"button\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"ellipsis-v\"></i>\n      </button>\n      <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        *dropdownMenu\n      >\n        <li *ngIf=\"canEdit\">\n          <button\n            title=\"{{ 'Edit' | translate }}\"\n            data-cy=\"application-card--edit-button\"\n            (click)=\"detail()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"pencil\"\n            ></i>\n            {{ 'Edit' | translate }}\n          </button>\n        </li>\n        <ng-container *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n          <li>\n            <button\n              [title]=\"canDelete ? ('Delete' | translate) : (CANNOT_DELETE_HINT | translate)\"\n              type=\"button\"\n              data-cy=\"application-card--delete-button\"\n              [disabled]=\"!canDelete\"\n              (click)=\"delete()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"delete\"\n              ></i>\n              {{ 'Delete' | translate }}\n            </button>\n          </li>\n          <li *ngIf=\"canClone\">\n            <button\n              [title]=\"'Clone`package,verb`' | translate\"\n              type=\"button\"\n              *ngIf=\"isPackage\"\n              (click)=\"clone()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"copy\"\n              ></i>\n              {{ 'Clone`package,verb`' | translate }}\n            </button>\n            <button\n              [title]=\"'Clone`application,verb`' | translate\"\n              type=\"button\"\n              *ngIf=\"!isPackage\"\n              (click)=\"clone()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"copy\"\n              ></i>\n              {{ 'Clone`application,verb`' | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<button\n  class=\"card pointer card--d-col\"\n  type=\"button\"\n  (click)=\"detail()\"\n  *ngIf=\"isFeature\"\n>\n  <div class=\"card-block text-center card-column-40\">\n    <div class=\"card-appicon\">\n      <c8y-app-icon\n        *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n        [app]=\"app\"\n        [contextPath]=\"app.contextPath\"\n        [name]=\"app.name\"\n      ></c8y-app-icon>\n      <i c8yIcon=\"tab\"></i>\n    </div>\n    <div>\n      <p\n        class=\"e2e-appCardName text-medium\"\n        title=\"{{ app | humanizeAppName | async }}\"\n      >\n        {{ app | humanizeAppName | async }}\n      </p>\n      <ng-container *ngIf=\"isShowVersion\">\n        <p class=\"small text-muted\">\n          <em>{{ app.manifest.version }}</em>\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'Update available' | translate\"\n            *ngIf=\"shouldUpgradePackage && isUnpacked\"\n          ></i>\n        </p>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"card-block p-0 no-min-height card--d-col card-column-80 flex-grow\">\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-80\">\n      <div\n        class=\"text-center-grid\"\n        *ngIf=\"app.description || app.manifest?.description\"\n      >\n        <div class=\"p-b-8 card-hidden-grid\"></div>\n        <p class=\"small l-h-tight p-b-8 p-l-0 p-r-0\">\n          {{ app.description || app.manifest?.description | translate }}\n        </p>\n      </div>\n    </div>\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\">\n      <span\n        class=\"label\"\n        [ngClass]=\"appState.class\"\n      >\n        {{ appState.label | translate }}\n      </span>\n    </div>\n    <div\n      class=\"card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\"\n      *ngIf=\"isPackage\"\n    >\n      <span\n        class=\"label\"\n        [ngClass]=\"packageContentState.class\"\n      >\n        {{ packageContentState.label | translate }}\n      </span>\n    </div>\n    <div class=\"p-b-32 card-hidden-list\"></div>\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { 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: "directive", type: i7.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: "directive", type: i8$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ApplicationCardComponent, selector: "c8y-application-card", inputs: { app: "app", canEdit: "canEdit" }, outputs: { onAppDeleted: "onAppDeleted", onAppCloned: "onAppCloned" }, ngImport: i0, template: "<div\n  class=\"card pointer card--d-col notFeature\"\n  data-cy=\"application-card--extensions-list\"\n  *ngIf=\"!isFeature\"\n>\n  <div\n    class=\"card-block text-center card-column-40\"\n    data-cy=\"application-card--package-name\"\n    (click)=\"detail()\"\n  >\n    <button\n      class=\"card__ribbon btn-clean\"\n      [attr.aria-label]=\"\n        (app.label || app.manifest?.label | translatePackageLabel) +\n        ': ' +\n        (packageTypeLabels[packageType].tooltip | translate)\n      \"\n      tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n      placement=\"right\"\n      type=\"button\"\n      *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n      [delay]=\"500\"\n    >\n      <span\n        [ngClass]=\"{\n          'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n          'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,\n          'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED\n        }\"\n      >\n        {{ app.label || app.manifest?.label | translatePackageLabel }}\n      </span>\n    </button>\n    <div class=\"card-appicon\">\n      <c8y-app-icon\n        *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n        [app]=\"app\"\n        [contextPath]=\"app.contextPath\"\n        [name]=\"app.name\"\n      ></c8y-app-icon>\n      <i\n        c8yIcon=\"big-parcel\"\n        *ngIf=\"isPackage\"\n      ></i>\n      <i\n        c8yIcon=\"microchip\"\n        *ngIf=\"isMicroservice\"\n      ></i>\n      <i\n        c8yIcon=\"globe1\"\n        *ngIf=\"isExternal\"\n      ></i>\n    </div>\n    <div style=\"line-height: 1.3\">\n      <p class=\"e2e-appCardName text-medium text-break-word\">\n        {{ app | humanizeAppName | async }}\n      </p>\n      <ng-container *ngIf=\"isShowVersion\">\n        <p class=\"small text-muted\">\n          <em>{{ app.manifest.version }}</em>\n          <button\n            class=\"btn-clean m-l-4\"\n            [attr.aria-label]=\"'Update available' | translate\"\n            [tooltip]=\"'Update available' | translate\"\n            *ngIf=\"shouldUpgradePackage && isUnpacked\"\n          >\n            <i\n              class=\"text-warning icon-16\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        </p>\n      </ng-container>\n      <p\n        class=\"small text-break-word\"\n        *ngIf=\"app.manifest?.author\"\n      >\n        {{ app.manifest.author }}\n      </p>\n    </div>\n  </div>\n  <div\n    class=\"card-block p-0 no-min-height card--d-col card-column-80 flex-grow\"\n    (click)=\"detail()\"\n  >\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-80\">\n      <div class=\"text-center-grid\">\n        <div class=\"p-b-8 card-hidden-grid\"></div>\n        <p\n          class=\"small l-h-tight p-b-8 p-l-0 p-r-0 text-break-word\"\n          *ngIf=\"app.description || app.manifest?.description\"\n        >\n          {{ app.description || app.manifest?.description | translate }}\n        </p>\n        <p\n          class=\"small l-h-tight p-b-8 p-l-0 p-r-0\"\n          *ngIf=\"!app.description && !app.manifest?.description\"\n        >\n          <em class=\"text-muted\">{{ 'No description available.' | translate }}</em>\n        </p>\n      </div>\n    </div>\n    <div\n      class=\"card-block no-min-height p-t-0 p-b-0 d-flex card-column-20 text-center-grid flex-wrap gap-8\"\n    >\n      <button\n        class=\"btn-clean\"\n        [attr.aria-label]=\"\n          ((isUnpacked ? UNPACKED_LABEL : appState?.label) | translate) +\n          ': ' +\n          (appState?.tooltip | translate)\n        \"\n        [tooltip]=\"appState?.tooltip | translate\"\n        placement=\"top\"\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\n              ? packageContentState?.tooltip\n              : PACKAGE_CONTENT_UNDETERMINED_LABEL) | translate\n        \"\n        [tooltip]=\"\n          (packageContentState?.tooltip\n            ? packageContentState?.tooltip\n            : PACKAGE_CONTENT_UNDETERMINED_LABEL\n          ) | translate\n        \"\n        placement=\"top\"\n        *ngIf=\"isPackage\"\n      >\n        <span\n          class=\"label\"\n          [ngClass]=\"packageContentState?.class ? packageContentState?.class : 'label-danger'\"\n        >\n          {{\n            packageContentState?.label || packageTypeLabels[PACKAGE_TYPE.UNKNOWN].label | translate\n          }}\n        </span>\n      </button>\n    </div>\n    <div class=\"card-footer no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\">\n      <div class=\"p-b-16 card-hidden-list\"></div>\n      <button\n        class=\"btn btn-sm btn-default\"\n        [title]=\"openButtonTitle | translate\"\n        type=\"button\"\n        (click)=\"openApp(); $event.stopPropagation()\"\n        *ngIf=\"canOpenInBrowser\"\n        [disabled]=\"disableOpenInBrowser\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"external-link\"\n        ></i>\n        {{ 'Open' | translate }}\n      </button>\n      <div class=\"p-b-32 card-hidden-list\"></div>\n    </div>\n  </div>\n  <div class=\"p-r-40 card-hidden-grid\"></div>\n  <div\n    class=\"card-actions m-t-0\"\n    *ngIf=\"canEdit || canOpenInBrowser || canDelete\"\n  >\n    <div\n      class=\"dropdown\"\n      #appCardDropdown=\"bs-dropdown\"\n      dropdown\n      [cdkTrapFocus]=\"appCardDropdown.isOpen\"\n    >\n      <button\n        class=\"dropdown-toggle c8y-dropdown\"\n        title=\"{{ 'Settings' | translate }}\"\n        data-cy=\"application-card--settings-button\"\n        type=\"button\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"ellipsis-v\"></i>\n      </button>\n      <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        *dropdownMenu\n      >\n        <li *ngIf=\"canEdit\">\n          <button\n            title=\"{{ 'Edit' | translate }}\"\n            data-cy=\"application-card--edit-button\"\n            (click)=\"detail()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"pencil\"\n            ></i>\n            {{ 'Edit' | translate }}\n          </button>\n        </li>\n        <ng-container *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n          <li>\n            <button\n              [title]=\"canDelete ? ('Delete' | translate) : (CANNOT_DELETE_HINT | translate)\"\n              type=\"button\"\n              data-cy=\"application-card--delete-button\"\n              [disabled]=\"!canDelete\"\n              (click)=\"delete()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"delete\"\n              ></i>\n              {{ 'Delete' | translate }}\n            </button>\n          </li>\n          <li *ngIf=\"canClone\">\n            <button\n              [title]=\"'Clone`package,verb`' | translate\"\n              type=\"button\"\n              *ngIf=\"isPackage\"\n              (click)=\"clone()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"copy\"\n              ></i>\n              {{ 'Clone`package,verb`' | translate }}\n            </button>\n            <button\n              [title]=\"'Clone`application,verb`' | translate\"\n              type=\"button\"\n              *ngIf=\"!isPackage\"\n              (click)=\"clone()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"copy\"\n              ></i>\n              {{ 'Clone`application,verb`' | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<button\n  class=\"card pointer card--d-col\"\n  type=\"button\"\n  (click)=\"detail()\"\n  *ngIf=\"isFeature\"\n>\n  <div class=\"card-block text-center card-column-40\">\n    <div class=\"card-appicon\">\n      <c8y-app-icon\n        *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n        [app]=\"app\"\n        [contextPath]=\"app.contextPath\"\n        [name]=\"app.name\"\n      ></c8y-app-icon>\n      <i c8yIcon=\"tab\"></i>\n    </div>\n    <div>\n      <p\n        class=\"e2e-appCardName text-medium\"\n        title=\"{{ app | humanizeAppName | async }}\"\n      >\n        {{ app | humanizeAppName | async }}\n      </p>\n      <ng-container *ngIf=\"isShowVersion\">\n        <p class=\"small text-muted\">\n          <em>{{ app.manifest.version }}</em>\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'Update available' | translate\"\n            *ngIf=\"shouldUpgradePackage && isUnpacked\"\n          ></i>\n        </p>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"card-block p-0 no-min-height card--d-col card-column-80 flex-grow\">\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-80\">\n      <div\n        class=\"text-center-grid\"\n        *ngIf=\"app.description || app.manifest?.description\"\n      >\n        <div class=\"p-b-8 card-hidden-grid\"></div>\n        <p class=\"small l-h-tight p-b-8 p-l-0 p-r-0\">\n          {{ app.description || app.manifest?.description | translate }}\n        </p>\n      </div>\n    </div>\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\">\n      <span\n        class=\"label\"\n        [ngClass]=\"appState.class\"\n      >\n        {{ appState.label | translate }}\n      </span>\n    </div>\n    <div\n      class=\"card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\"\n      *ngIf=\"isPackage\"\n    >\n      <span\n        class=\"label\"\n        [ngClass]=\"packageContentState.class\"\n      >\n        {{ packageContentState.label | translate }}\n      </span>\n    </div>\n    <div class=\"p-b-32 card-hidden-list\"></div>\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { 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: "directive", type: i7.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: "directive", type: i8$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-application-card', template: "<div\n  class=\"card pointer card--d-col notFeature\"\n  data-cy=\"application-card--extensions-list\"\n  *ngIf=\"!isFeature\"\n>\n  <div\n    class=\"card-block text-center card-column-40\"\n    data-cy=\"application-card--package-name\"\n    (click)=\"detail()\"\n  >\n    <button\n      class=\"card__ribbon btn-clean\"\n      [attr.aria-label]=\"\n        (app.label || app.manifest?.label | translatePackageLabel) +\n        ': ' +\n        (packageTypeLabels[packageType].tooltip | translate)\n      \"\n      tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n      placement=\"right\"\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        {{ app.label || app.manifest?.label | translatePackageLabel }}\n      </span>\n    </button>\n    <div class=\"card-appicon\">\n      <c8y-app-icon\n        *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n        [app]=\"app\"\n        [contextPath]=\"app.contextPath\"\n        [name]=\"app.name\"\n      ></c8y-app-icon>\n      <i\n        c8yIcon=\"big-parcel\"\n        *ngIf=\"isPackage\"\n      ></i>\n      <i\n        c8yIcon=\"microchip\"\n        *ngIf=\"isMicroservice\"\n      ></i>\n      <i\n        c8yIcon=\"globe1\"\n        *ngIf=\"isExternal\"\n      ></i>\n    </div>\n    <div style=\"line-height: 1.3\">\n      <p class=\"e2e-appCardName text-medium text-break-word\">\n        {{ app | humanizeAppName | async }}\n      </p>\n      <ng-container *ngIf=\"isShowVersion\">\n        <p class=\"small text-muted\">\n          <em>{{ app.manifest.version }}</em>\n          <button\n            class=\"btn-clean m-l-4\"\n            [attr.aria-label]=\"'Update available' | translate\"\n            [tooltip]=\"'Update available' | translate\"\n            *ngIf=\"shouldUpgradePackage && isUnpacked\"\n          >\n            <i\n              class=\"text-warning icon-16\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        </p>\n      </ng-container>\n      <p\n        class=\"small text-break-word\"\n        *ngIf=\"app.manifest?.author\"\n      >\n        {{ app.manifest.author }}\n      </p>\n    </div>\n  </div>\n  <div\n    class=\"card-block p-0 no-min-height card--d-col card-column-80 flex-grow\"\n    (click)=\"detail()\"\n  >\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-80\">\n      <div class=\"text-center-grid\">\n        <div class=\"p-b-8 card-hidden-grid\"></div>\n        <p\n          class=\"small l-h-tight p-b-8 p-l-0 p-r-0 text-break-word\"\n          *ngIf=\"app.description || app.manifest?.description\"\n        >\n          {{ app.description || app.manifest?.description | translate }}\n        </p>\n        <p\n          class=\"small l-h-tight p-b-8 p-l-0 p-r-0\"\n          *ngIf=\"!app.description && !app.manifest?.description\"\n        >\n          <em class=\"text-muted\">{{ 'No description available.' | translate }}</em>\n        </p>\n      </div>\n    </div>\n    <div\n      class=\"card-block no-min-height p-t-0 p-b-0 d-flex card-column-20 text-center-grid flex-wrap gap-8\"\n    >\n      <button\n        class=\"btn-clean\"\n        [attr.aria-label]=\"\n          ((isUnpacked ? UNPACKED_LABEL : appState?.label) | translate) +\n          ': ' +\n          (appState?.tooltip | translate)\n        \"\n        [tooltip]=\"appState?.tooltip | translate\"\n        placement=\"top\"\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\n              ? packageContentState?.tooltip\n              : PACKAGE_CONTENT_UNDETERMINED_LABEL) | translate\n        \"\n        [tooltip]=\"\n          (packageContentState?.tooltip\n            ? packageContentState?.tooltip\n            : PACKAGE_CONTENT_UNDETERMINED_LABEL\n          ) | translate\n        \"\n        placement=\"top\"\n        *ngIf=\"isPackage\"\n      >\n        <span\n          class=\"label\"\n          [ngClass]=\"packageContentState?.class ? packageContentState?.class : 'label-danger'\"\n        >\n          {{\n            packageContentState?.label || packageTypeLabels[PACKAGE_TYPE.UNKNOWN].label | translate\n          }}\n        </span>\n      </button>\n    </div>\n    <div class=\"card-footer no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\">\n      <div class=\"p-b-16 card-hidden-list\"></div>\n      <button\n        class=\"btn btn-sm btn-default\"\n        [title]=\"openButtonTitle | translate\"\n        type=\"button\"\n        (click)=\"openApp(); $event.stopPropagation()\"\n        *ngIf=\"canOpenInBrowser\"\n        [disabled]=\"disableOpenInBrowser\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"external-link\"\n        ></i>\n        {{ 'Open' | translate }}\n      </button>\n      <div class=\"p-b-32 card-hidden-list\"></div>\n    </div>\n  </div>\n  <div class=\"p-r-40 card-hidden-grid\"></div>\n  <div\n    class=\"card-actions m-t-0\"\n    *ngIf=\"canEdit || canOpenInBrowser || canDelete\"\n  >\n    <div\n      class=\"dropdown\"\n      #appCardDropdown=\"bs-dropdown\"\n      dropdown\n      [cdkTrapFocus]=\"appCardDropdown.isOpen\"\n    >\n      <button\n        class=\"dropdown-toggle c8y-dropdown\"\n        title=\"{{ 'Settings' | translate }}\"\n        data-cy=\"application-card--settings-button\"\n        type=\"button\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"ellipsis-v\"></i>\n      </button>\n      <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        *dropdownMenu\n      >\n        <li *ngIf=\"canEdit\">\n          <button\n            title=\"{{ 'Edit' | translate }}\"\n            data-cy=\"application-card--edit-button\"\n            (click)=\"detail()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"pencil\"\n            ></i>\n            {{ 'Edit' | translate }}\n          </button>\n        </li>\n        <ng-container *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n          <li>\n            <button\n              [title]=\"canDelete ? ('Delete' | translate) : (CANNOT_DELETE_HINT | translate)\"\n              type=\"button\"\n              data-cy=\"application-card--delete-button\"\n              [disabled]=\"!canDelete\"\n              (click)=\"delete()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"delete\"\n              ></i>\n              {{ 'Delete' | translate }}\n            </button>\n          </li>\n          <li *ngIf=\"canClone\">\n            <button\n              [title]=\"'Clone`package,verb`' | translate\"\n              type=\"button\"\n              *ngIf=\"isPackage\"\n              (click)=\"clone()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"copy\"\n              ></i>\n              {{ 'Clone`package,verb`' | translate }}\n            </button>\n            <button\n              [title]=\"'Clone`application,verb`' | translate\"\n              type=\"button\"\n              *ngIf=\"!isPackage\"\n              (click)=\"clone()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"copy\"\n              ></i>\n              {{ 'Clone`application,verb`' | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<button\n  class=\"card pointer card--d-col\"\n  type=\"button\"\n  (click)=\"detail()\"\n  *ngIf=\"isFeature\"\n>\n  <div class=\"card-block text-center card-column-40\">\n    <div class=\"card-appicon\">\n      <c8y-app-icon\n        *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n        [app]=\"app\"\n        [contextPath]=\"app.contextPath\"\n        [name]=\"app.name\"\n      ></c8y-app-icon>\n      <i c8yIcon=\"tab\"></i>\n    </div>\n    <div>\n      <p\n        class=\"e2e-appCardName text-medium\"\n        title=\"{{ app | humanizeAppName | async }}\"\n      >\n        {{ app | humanizeAppName | async }}\n      </p>\n      <ng-container *ngIf=\"isShowVersion\">\n        <p class=\"small text-muted\">\n          <em>{{ app.manifest.version }}</em>\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'Update available' | translate\"\n            *ngIf=\"shouldUpgradePackage && isUnpacked\"\n          ></i>\n        </p>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"card-block p-0 no-min-height card--d-col card-column-80 flex-grow\">\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-80\">\n      <div\n        class=\"text-center-grid\"\n        *ngIf=\"app.description || app.manifest?.description\"\n      >\n        <div class=\"p-b-8 card-hidden-grid\"></div>\n        <p class=\"small l-h-tight p-b-8 p-l-0 p-r-0\">\n          {{ app.description || app.manifest?.description | translate }}\n        </p>\n      </div>\n    </div>\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\">\n      <span\n        class=\"label\"\n        [ngClass]=\"appState.class\"\n      >\n        {{ appState.label | translate }}\n      </span>\n    </div>\n    <div\n      class=\"card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\"\n      *ngIf=\"isPackage\"\n    >\n      <span\n        class=\"label\"\n        [ngClass]=\"packageContentState.class\"\n      >\n        {{ packageContentState.label | translate }}\n      </span>\n    </div>\n    <div class=\"p-b-32 card-hidden-list\"></div>\n  </div>\n</button>\n" }]
+            args: [{ selector: 'c8y-application-card', template: "<div\n  class=\"card pointer card--d-col notFeature\"\n  data-cy=\"application-card--extensions-list\"\n  *ngIf=\"!isFeature\"\n>\n  <div\n    class=\"card-block text-center card-column-40\"\n    data-cy=\"application-card--package-name\"\n    (click)=\"detail()\"\n  >\n    <button\n      class=\"card__ribbon btn-clean\"\n      [attr.aria-label]=\"\n        (app.label || app.manifest?.label | translatePackageLabel) +\n        ': ' +\n        (packageTypeLabels[packageType].tooltip | translate)\n      \"\n      tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n      placement=\"right\"\n      type=\"button\"\n      *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n      [delay]=\"500\"\n    >\n      <span\n        [ngClass]=\"{\n          'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n          'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,\n          'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED\n        }\"\n      >\n        {{ app.label || app.manifest?.label | translatePackageLabel }}\n      </span>\n    </button>\n    <div class=\"card-appicon\">\n      <c8y-app-icon\n        *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n        [app]=\"app\"\n        [contextPath]=\"app.contextPath\"\n        [name]=\"app.name\"\n      ></c8y-app-icon>\n      <i\n        c8yIcon=\"big-parcel\"\n        *ngIf=\"isPackage\"\n      ></i>\n      <i\n        c8yIcon=\"microchip\"\n        *ngIf=\"isMicroservice\"\n      ></i>\n      <i\n        c8yIcon=\"globe1\"\n        *ngIf=\"isExternal\"\n      ></i>\n    </div>\n    <div style=\"line-height: 1.3\">\n      <p class=\"e2e-appCardName text-medium text-break-word\">\n        {{ app | humanizeAppName | async }}\n      </p>\n      <ng-container *ngIf=\"isShowVersion\">\n        <p class=\"small text-muted\">\n          <em>{{ app.manifest.version }}</em>\n          <button\n            class=\"btn-clean m-l-4\"\n            [attr.aria-label]=\"'Update available' | translate\"\n            [tooltip]=\"'Update available' | translate\"\n            *ngIf=\"shouldUpgradePackage && isUnpacked\"\n          >\n            <i\n              class=\"text-warning icon-16\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        </p>\n      </ng-container>\n      <p\n        class=\"small text-break-word\"\n        *ngIf=\"app.manifest?.author\"\n      >\n        {{ app.manifest.author }}\n      </p>\n    </div>\n  </div>\n  <div\n    class=\"card-block p-0 no-min-height card--d-col card-column-80 flex-grow\"\n    (click)=\"detail()\"\n  >\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-80\">\n      <div class=\"text-center-grid\">\n        <div class=\"p-b-8 card-hidden-grid\"></div>\n        <p\n          class=\"small l-h-tight p-b-8 p-l-0 p-r-0 text-break-word\"\n          *ngIf=\"app.description || app.manifest?.description\"\n        >\n          {{ app.description || app.manifest?.description | translate }}\n        </p>\n        <p\n          class=\"small l-h-tight p-b-8 p-l-0 p-r-0\"\n          *ngIf=\"!app.description && !app.manifest?.description\"\n        >\n          <em class=\"text-muted\">{{ 'No description available.' | translate }}</em>\n        </p>\n      </div>\n    </div>\n    <div\n      class=\"card-block no-min-height p-t-0 p-b-0 d-flex card-column-20 text-center-grid flex-wrap gap-8\"\n    >\n      <button\n        class=\"btn-clean\"\n        [attr.aria-label]=\"\n          ((isUnpacked ? UNPACKED_LABEL : appState?.label) | translate) +\n          ': ' +\n          (appState?.tooltip | translate)\n        \"\n        [tooltip]=\"appState?.tooltip | translate\"\n        placement=\"top\"\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\n              ? packageContentState?.tooltip\n              : PACKAGE_CONTENT_UNDETERMINED_LABEL) | translate\n        \"\n        [tooltip]=\"\n          (packageContentState?.tooltip\n            ? packageContentState?.tooltip\n            : PACKAGE_CONTENT_UNDETERMINED_LABEL\n          ) | translate\n        \"\n        placement=\"top\"\n        *ngIf=\"isPackage\"\n      >\n        <span\n          class=\"label\"\n          [ngClass]=\"packageContentState?.class ? packageContentState?.class : 'label-danger'\"\n        >\n          {{\n            packageContentState?.label || packageTypeLabels[PACKAGE_TYPE.UNKNOWN].label | translate\n          }}\n        </span>\n      </button>\n    </div>\n    <div class=\"card-footer no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\">\n      <div class=\"p-b-16 card-hidden-list\"></div>\n      <button\n        class=\"btn btn-sm btn-default\"\n        [title]=\"openButtonTitle | translate\"\n        type=\"button\"\n        (click)=\"openApp(); $event.stopPropagation()\"\n        *ngIf=\"canOpenInBrowser\"\n        [disabled]=\"disableOpenInBrowser\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"external-link\"\n        ></i>\n        {{ 'Open' | translate }}\n      </button>\n      <div class=\"p-b-32 card-hidden-list\"></div>\n    </div>\n  </div>\n  <div class=\"p-r-40 card-hidden-grid\"></div>\n  <div\n    class=\"card-actions m-t-0\"\n    *ngIf=\"canEdit || canOpenInBrowser || canDelete\"\n  >\n    <div\n      class=\"dropdown\"\n      #appCardDropdown=\"bs-dropdown\"\n      dropdown\n      [cdkTrapFocus]=\"appCardDropdown.isOpen\"\n    >\n      <button\n        class=\"dropdown-toggle c8y-dropdown\"\n        title=\"{{ 'Settings' | translate }}\"\n        data-cy=\"application-card--settings-button\"\n        type=\"button\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"ellipsis-v\"></i>\n      </button>\n      <ul\n        class=\"dropdown-menu dropdown-menu-right\"\n        *dropdownMenu\n      >\n        <li *ngIf=\"canEdit\">\n          <button\n            title=\"{{ 'Edit' | translate }}\"\n            data-cy=\"application-card--edit-button\"\n            (click)=\"detail()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"pencil\"\n            ></i>\n            {{ 'Edit' | translate }}\n          </button>\n        </li>\n        <ng-container *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n          <li>\n            <button\n              [title]=\"canDelete ? ('Delete' | translate) : (CANNOT_DELETE_HINT | translate)\"\n              type=\"button\"\n              data-cy=\"application-card--delete-button\"\n              [disabled]=\"!canDelete\"\n              (click)=\"delete()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"delete\"\n              ></i>\n              {{ 'Delete' | translate }}\n            </button>\n          </li>\n          <li *ngIf=\"canClone\">\n            <button\n              [title]=\"'Clone`package,verb`' | translate\"\n              type=\"button\"\n              *ngIf=\"isPackage\"\n              (click)=\"clone()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"copy\"\n              ></i>\n              {{ 'Clone`package,verb`' | translate }}\n            </button>\n            <button\n              [title]=\"'Clone`application,verb`' | translate\"\n              type=\"button\"\n              *ngIf=\"!isPackage\"\n              (click)=\"clone()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"copy\"\n              ></i>\n              {{ 'Clone`application,verb`' | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<button\n  class=\"card pointer card--d-col\"\n  type=\"button\"\n  (click)=\"detail()\"\n  *ngIf=\"isFeature\"\n>\n  <div class=\"card-block text-center card-column-40\">\n    <div class=\"card-appicon\">\n      <c8y-app-icon\n        *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n        [app]=\"app\"\n        [contextPath]=\"app.contextPath\"\n        [name]=\"app.name\"\n      ></c8y-app-icon>\n      <i c8yIcon=\"tab\"></i>\n    </div>\n    <div>\n      <p\n        class=\"e2e-appCardName text-medium\"\n        title=\"{{ app | humanizeAppName | async }}\"\n      >\n        {{ app | humanizeAppName | async }}\n      </p>\n      <ng-container *ngIf=\"isShowVersion\">\n        <p class=\"small text-muted\">\n          <em>{{ app.manifest.version }}</em>\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'Update available' | translate\"\n            *ngIf=\"shouldUpgradePackage && isUnpacked\"\n          ></i>\n        </p>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"card-block p-0 no-min-height card--d-col card-column-80 flex-grow\">\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-80\">\n      <div\n        class=\"text-center-grid\"\n        *ngIf=\"app.description || app.manifest?.description\"\n      >\n        <div class=\"p-b-8 card-hidden-grid\"></div>\n        <p class=\"small l-h-tight p-b-8 p-l-0 p-r-0\">\n          {{ app.description || app.manifest?.description | translate }}\n        </p>\n      </div>\n    </div>\n    <div class=\"card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\">\n      <span\n        class=\"label\"\n        [ngClass]=\"appState.class\"\n      >\n        {{ appState.label | translate }}\n      </span>\n    </div>\n    <div\n      class=\"card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid\"\n      *ngIf=\"isPackage\"\n    >\n      <span\n        class=\"label\"\n        [ngClass]=\"packageContentState.class\"\n      >\n        {{ packageContentState.label | translate }}\n      </span>\n    </div>\n    <div class=\"p-b-32 card-hidden-list\"></div>\n  </div>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i3$1.ApplicationService }, { type: EcosystemService }, { type: i2.AlertService }, { type: i4.Router }, { type: i2.WizardModalService }, { type: i2.AlertService }, { type: i2.PluginsService }, { type: i2.GainsightService }], propDecorators: { app: [{
                 type: Input
             }], canEdit: [{
@@ -1394,7 +1427,7 @@ class ApplicationPropertiesFormComponent {
         this.formGroup.patchValue({ ...applicationConfig });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPropertiesFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ApplicationPropertiesFormComponent, selector: "c8y-application-properties-form", inputs: { application: "application", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"c8y-wizard-form text-left\"\n  name=\"appDeployForm\"\n  (ngSubmit)=\"(formGroup.valid)\"\n  [formGroup]=\"formGroup\"\n  novalidate\n>\n  <c8y-form-group>\n    <label\n      for=\"name\"\n      translate\n    >\n      Name\n    </label>\n    <input\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. My application' | translate }}\"\n      name=\"name\"\n      type=\"text\"\n      required\n      formControlName=\"name\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"key\"\n      translate\n    >\n      Application key\n    </label>\n    <input\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my-application-key' | translate }}\"\n      name=\"key\"\n      type=\"text\"\n      required\n      formControlName=\"key\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"contextPath\"\n      translate\n    >\n      Path\n    </label>\n    <div class=\"input-group\">\n      <span class=\"input-group-addon\">/apps/</span>\n      <input\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g. my-application' | translate }}\"\n        name=\"contextPath\"\n        type=\"text\"\n        required\n        formControlName=\"contextPath\"\n      />\n    </div>\n  </c8y-form-group>\n  <c8y-form-group>\n    <label>{{ 'Select icon' | translate }}</label>\n    <c8y-icon-selector-wrapper\n      name=\"icon\"\n      formControlName=\"icon\"\n    ></c8y-icon-selector-wrapper>\n  </c8y-form-group>\n</form>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ApplicationPropertiesFormComponent, selector: "c8y-application-properties-form", inputs: { application: "application", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"c8y-wizard-form text-left\"\n  name=\"appDeployForm\"\n  (ngSubmit)=\"(formGroup.valid)\"\n  [formGroup]=\"formGroup\"\n  novalidate\n>\n  <c8y-form-group>\n    <label\n      for=\"name\"\n      translate\n    >\n      Name\n    </label>\n    <input\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. My application' | translate }}\"\n      name=\"name\"\n      type=\"text\"\n      required\n      formControlName=\"name\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"key\"\n      translate\n    >\n      Application key\n    </label>\n    <input\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my-application-key' | translate }}\"\n      name=\"key\"\n      type=\"text\"\n      required\n      formControlName=\"key\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"contextPath\"\n      translate\n    >\n      Path\n    </label>\n    <div class=\"input-group\">\n      <span class=\"input-group-addon\">/apps/</span>\n      <input\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g. my-application' | translate }}\"\n        name=\"contextPath\"\n        type=\"text\"\n        required\n        formControlName=\"contextPath\"\n      />\n    </div>\n  </c8y-form-group>\n  <c8y-form-group>\n    <label>{{ 'Select icon' | translate }}</label>\n    <c8y-icon-selector-wrapper\n      name=\"icon\"\n      formControlName=\"icon\"\n    ></c8y-icon-selector-wrapper>\n  </c8y-form-group>\n</form>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$2.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPropertiesFormComponent, decorators: [{
             type: Component,
@@ -1422,7 +1455,7 @@ class DuplicateApplicationListComponent {
         this.wizardComponent.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DuplicateApplicationListComponent, deps: [{ token: EcosystemService }, { token: i2.WizardComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DuplicateApplicationListComponent, selector: "c8y-duplicate-application-list", inputs: { stepper: "stepper", existingApps: "existingApps" }, outputs: { onSelectedApp: "onSelectedApp" }, ngImport: i0, template: "<div class=\"c8y-wizard-list-nav\">\n  <button\n    (click)=\"select(app)\"\n    *ngFor=\"let app of existingApps\"\n    class=\"list-group-item text-truncate p-t-8 p-b-8 bg-level-0\"\n    type=\"button\"\n  >\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    <span [innerText]=\"app | humanizeAppName | async\" class=\"pointer\"></span>\n    <span [ngClass]=\"ecosystemService.getAppState(app).class\" class=\"label m-l-16\">\n      {{ ecosystemService.getAppState(app).label | translate }}\n    </span>\n  </button>\n</div>\n<c8y-wizard-footer>\n  <button (click)=\"back()\" class=\"btn btn-default\" title=\"{{ 'Back' | translate }}\" type=\"button\">\n    {{ 'Back' | translate }}\n  </button>\n  <button\n    (click)=\"cancel()\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n</c8y-wizard-footer>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "directive", type: i3$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DuplicateApplicationListComponent, selector: "c8y-duplicate-application-list", inputs: { stepper: "stepper", existingApps: "existingApps" }, outputs: { onSelectedApp: "onSelectedApp" }, ngImport: i0, template: "<div class=\"c8y-wizard-list-nav\">\n  <button\n    (click)=\"select(app)\"\n    *ngFor=\"let app of existingApps\"\n    class=\"list-group-item text-truncate p-t-8 p-b-8 bg-level-0\"\n    type=\"button\"\n  >\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    <span [innerText]=\"app | humanizeAppName | async\" class=\"pointer\"></span>\n    <span [ngClass]=\"ecosystemService.getAppState(app).class\" class=\"label m-l-16\">\n      {{ ecosystemService.getAppState(app).label | translate }}\n    </span>\n  </button>\n</div>\n<c8y-wizard-footer>\n  <button (click)=\"back()\" class=\"btn btn-default\" title=\"{{ 'Back' | translate }}\" type=\"button\">\n    {{ 'Back' | translate }}\n  </button>\n  <button\n    (click)=\"cancel()\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n</c8y-wizard-footer>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DuplicateApplicationListComponent, decorators: [{
             type: Component,
@@ -1534,7 +1567,7 @@ class DuplicateApplicationPropertiesComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DuplicateApplicationPropertiesComponent, deps: [{ token: i1$1.BsModalRef }, { token: EcosystemService }, { token: i3$1.ApplicationService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DuplicateApplicationPropertiesComponent, selector: "c8y-duplicate-application-properties", inputs: { stepper: "stepper", existingApps: "existingApps", selectedApp: "selectedApp", isFirstStep: "isFirstStep" }, outputs: { duplicatedApp: "duplicatedApp" }, viewQueries: [{ propertyName: "applicationPropertiesForm", first: true, predicate: ApplicationPropertiesFormComponent, descendants: true }], ngImport: i0, template: "<p\n  class=\"p-16 text-center text-medium separator-bottom sticky-top bg-level-0 fit-w\"\n  *ngIf=\"!inProgress\"\n>\n  {{ 'Provide application details' | translate }}\n</p>\n\n<ng-container *ngIf=\"!inProgress\">\n  <label class=\"c8y-switch\" *ngIf=\"isSubscribedApp$ | async\">\n    <input type=\"checkbox\" [(ngModel)]=\"disableForm\" (change)=\"getAppConfig()\" />\n    <span></span> {{ 'Overrule subscribed application' | translate }}\n  </label>\n\n  <c8y-application-properties-form\n    [application]=\"newAppConfig\"\n    class=\"d-block fit-w\"\n    [disabled]=\"disableForm\"\n  ></c8y-application-properties-form>\n</ng-container>\n<c8y-loading\n  *ngIf=\"inProgress\"\n  [message]=\"'Duplicating\u2026' | translate\"\n  layout=\"application\"\n  class=\"text-center d-block\"\n></c8y-loading>\n\n<c8y-wizard-footer>\n  <button\n    *ngIf=\"!isFirstStep\"\n    (click)=\"back()\"\n    [disabled]=\"inProgress\"\n    class=\"btn btn-default\"\n    type=\"button\"\n    title=\"{{ 'Back' | translate }}\"\n  >\n    {{ 'Back' | translate }}\n  </button>\n  <button (click)=\"cancel()\" class=\"btn btn-default\" title=\"{{ 'Cancel' | translate }}\">\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    (click)=\"duplicateApp()\"\n    [disabled]=\"inProgress\"\n    class=\"btn btn-primary\"\n    type=\"button\"\n    title=\"{{ 'Duplicate' | translate }}\"\n  >\n    {{ 'Duplicate' | translate }}\n  </button>\n</c8y-wizard-footer>\n", dependencies: [{ kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "component", type: ApplicationPropertiesFormComponent, selector: "c8y-application-properties-form", inputs: ["application", "disabled"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DuplicateApplicationPropertiesComponent, selector: "c8y-duplicate-application-properties", inputs: { stepper: "stepper", existingApps: "existingApps", selectedApp: "selectedApp", isFirstStep: "isFirstStep" }, outputs: { duplicatedApp: "duplicatedApp" }, viewQueries: [{ propertyName: "applicationPropertiesForm", first: true, predicate: ApplicationPropertiesFormComponent, descendants: true }], ngImport: i0, template: "<p\n  class=\"p-16 text-center text-medium separator-bottom sticky-top bg-level-0 fit-w\"\n  *ngIf=\"!inProgress\"\n>\n  {{ 'Provide application details' | translate }}\n</p>\n\n<ng-container *ngIf=\"!inProgress\">\n  <label class=\"c8y-switch\" *ngIf=\"isSubscribedApp$ | async\">\n    <input type=\"checkbox\" [(ngModel)]=\"disableForm\" (change)=\"getAppConfig()\" />\n    <span></span> {{ 'Overrule subscribed application' | translate }}\n  </label>\n\n  <c8y-application-properties-form\n    [application]=\"newAppConfig\"\n    class=\"d-block fit-w\"\n    [disabled]=\"disableForm\"\n  ></c8y-application-properties-form>\n</ng-container>\n<c8y-loading\n  *ngIf=\"inProgress\"\n  [message]=\"'Duplicating\u2026' | translate\"\n  layout=\"application\"\n  class=\"text-center d-block\"\n></c8y-loading>\n\n<c8y-wizard-footer>\n  <button\n    *ngIf=\"!isFirstStep\"\n    (click)=\"back()\"\n    [disabled]=\"inProgress\"\n    class=\"btn btn-default\"\n    type=\"button\"\n    title=\"{{ 'Back' | translate }}\"\n  >\n    {{ 'Back' | translate }}\n  </button>\n  <button (click)=\"cancel()\" class=\"btn btn-default\" title=\"{{ 'Cancel' | translate }}\">\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    (click)=\"duplicateApp()\"\n    [disabled]=\"inProgress\"\n    class=\"btn btn-primary\"\n    type=\"button\"\n    title=\"{{ 'Duplicate' | translate }}\"\n  >\n    {{ 'Duplicate' | translate }}\n  </button>\n</c8y-wizard-footer>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "component", type: ApplicationPropertiesFormComponent, selector: "c8y-application-properties-form", inputs: ["application", "disabled"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DuplicateApplicationPropertiesComponent, decorators: [{
             type: Component,
@@ -1580,7 +1613,7 @@ class DuplicateApplicationComponent {
         this.wizardComponent.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DuplicateApplicationComponent, deps: [{ token: EcosystemService }, { token: i3$1.ApplicationService }, { token: i2.WizardComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DuplicateApplicationComponent, selector: "c8y-duplicate-application", viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"'copy'\"></i>\n  <h4\n    id=\"modal-title\"\n    translate\n  >\n    Duplicate application\n  </h4>\n</c8y-wizard-header>\n\n<c8y-wizard-body id=\"modal-body\">\n  <c8y-stepper\n    [disableDefaultIcons]=\"{ edit: true, done: false }\"\n    [customClasses]=\"['hidden']\"\n    linear\n  >\n    <!-- 1st step -->\n    <cdk-step *ngIf=\"!directlyMoveToSecondStep\">\n      <p class=\"p-16 text-center text-medium separator-bottom sticky-top bg-level-0\">\n        {{ 'Select application to duplicate' | translate }}\n      </p>\n      <c8y-duplicate-application-list\n        class=\"d-block\"\n        style=\"min-height: 257px\"\n        (onSelectedApp)=\"onSelectedApp($event)\"\n        *ngIf=\"stepper.selectedIndex === 0\"\n        [existingApps]=\"existingApps\"\n        [stepper]=\"stepper\"\n      ></c8y-duplicate-application-list>\n    </cdk-step>\n    <!-- 2nd step -->\n    <cdk-step>\n      <c8y-duplicate-application-properties\n        class=\"d-flex d-col j-c-center a-i-center\"\n        style=\"min-height: 257px\"\n        (duplicatedApp)=\"duplicatedApp = $event\"\n        *ngIf=\"\n          stepper.selectedIndex === 1 || (stepper.selectedIndex === 0 && directlyMoveToSecondStep)\n        \"\n        [existingApps]=\"existingApps\"\n        [selectedApp]=\"selectedApp\"\n        [stepper]=\"stepper\"\n        [isFirstStep]=\"directlyMoveToSecondStep\"\n      ></c8y-duplicate-application-properties>\n    </cdk-step>\n    <!-- Final step -->\n    <cdk-step>\n      <ng-container\n        *ngIf=\"\n          stepper.selectedIndex === 2 || (stepper.selectedIndex === 1 && directlyMoveToSecondStep)\n        \"\n      >\n        <div\n          class=\"d-flex a-i-center j-c-center\"\n          style=\"min-height: 257px\"\n          *ngIf=\"duplicatedApp; else duplicateAppFailed\"\n        >\n          <c8y-operation-result\n            type=\"success\"\n            text=\"{{ 'Application created' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        </div>\n        <ng-template #duplicateAppFailed>\n          <div\n            class=\"d-flex a-i-center j-c-center\"\n            style=\"min-height: 257px\"\n          >\n            <c8y-operation-result\n              type=\"error\"\n              text=\"{{ 'Application creation failed' | translate }}\"\n              [size]=\"84\"\n              [vertical]=\"true\"\n            ></c8y-operation-result>\n          </div>\n        </ng-template>\n      </ng-container>\n    </cdk-step>\n  </c8y-stepper>\n</c8y-wizard-body>\n\n<c8y-wizard-footer *ngIf=\"stepper.selectedIndex === 0 && noBackButton\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"done()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n</c8y-wizard-footer>\n\n<c8y-wizard-footer\n  *ngIf=\"stepper.selectedIndex === 2 || (stepper.selectedIndex === 1 && directlyMoveToSecondStep)\"\n>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Done' | translate }}\"\n    type=\"button\"\n    (click)=\"done()\"\n  >\n    {{ 'Done' | translate }}\n  </button>\n  <a\n    class=\"btn btn-primary\"\n    title=\"{{ 'Open' | translate }}\"\n    target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n    [href]=\"getHref(duplicatedApp)\"\n    rel=\"noopener noreferrer\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"external-link\"\n    ></i>\n    {{ 'Open' | translate }}\n  </a>\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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i5.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { 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: DuplicateApplicationListComponent, selector: "c8y-duplicate-application-list", inputs: ["stepper", "existingApps"], outputs: ["onSelectedApp"] }, { kind: "component", type: DuplicateApplicationPropertiesComponent, selector: "c8y-duplicate-application-properties", inputs: ["stepper", "existingApps", "selectedApp", "isFirstStep"], outputs: ["duplicatedApp"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DuplicateApplicationComponent, selector: "c8y-duplicate-application", viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"'copy'\"></i>\n  <h4\n    id=\"modal-title\"\n    translate\n  >\n    Duplicate application\n  </h4>\n</c8y-wizard-header>\n\n<c8y-wizard-body id=\"modal-body\">\n  <c8y-stepper\n    [disableDefaultIcons]=\"{ edit: true, done: false }\"\n    [customClasses]=\"['hidden']\"\n    linear\n  >\n    <!-- 1st step -->\n    <cdk-step *ngIf=\"!directlyMoveToSecondStep\">\n      <p class=\"p-16 text-center text-medium separator-bottom sticky-top bg-level-0\">\n        {{ 'Select application to duplicate' | translate }}\n      </p>\n      <c8y-duplicate-application-list\n        class=\"d-block\"\n        style=\"min-height: 257px\"\n        (onSelectedApp)=\"onSelectedApp($event)\"\n        *ngIf=\"stepper.selectedIndex === 0\"\n        [existingApps]=\"existingApps\"\n        [stepper]=\"stepper\"\n      ></c8y-duplicate-application-list>\n    </cdk-step>\n    <!-- 2nd step -->\n    <cdk-step>\n      <c8y-duplicate-application-properties\n        class=\"d-flex d-col j-c-center a-i-center\"\n        style=\"min-height: 257px\"\n        (duplicatedApp)=\"duplicatedApp = $event\"\n        *ngIf=\"\n          stepper.selectedIndex === 1 || (stepper.selectedIndex === 0 && directlyMoveToSecondStep)\n        \"\n        [existingApps]=\"existingApps\"\n        [selectedApp]=\"selectedApp\"\n        [stepper]=\"stepper\"\n        [isFirstStep]=\"directlyMoveToSecondStep\"\n      ></c8y-duplicate-application-properties>\n    </cdk-step>\n    <!-- Final step -->\n    <cdk-step>\n      <ng-container\n        *ngIf=\"\n          stepper.selectedIndex === 2 || (stepper.selectedIndex === 1 && directlyMoveToSecondStep)\n        \"\n      >\n        <div\n          class=\"d-flex a-i-center j-c-center\"\n          style=\"min-height: 257px\"\n          *ngIf=\"duplicatedApp; else duplicateAppFailed\"\n        >\n          <c8y-operation-result\n            type=\"success\"\n            text=\"{{ 'Application created' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        </div>\n        <ng-template #duplicateAppFailed>\n          <div\n            class=\"d-flex a-i-center j-c-center\"\n            style=\"min-height: 257px\"\n          >\n            <c8y-operation-result\n              type=\"error\"\n              text=\"{{ 'Application creation failed' | translate }}\"\n              [size]=\"84\"\n              [vertical]=\"true\"\n            ></c8y-operation-result>\n          </div>\n        </ng-template>\n      </ng-container>\n    </cdk-step>\n  </c8y-stepper>\n</c8y-wizard-body>\n\n<c8y-wizard-footer *ngIf=\"stepper.selectedIndex === 0 && noBackButton\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"done()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n</c8y-wizard-footer>\n\n<c8y-wizard-footer\n  *ngIf=\"stepper.selectedIndex === 2 || (stepper.selectedIndex === 1 && directlyMoveToSecondStep)\"\n>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Done' | translate }}\"\n    type=\"button\"\n    (click)=\"done()\"\n  >\n    {{ 'Done' | translate }}\n  </button>\n  <a\n    class=\"btn btn-primary\"\n    title=\"{{ 'Open' | translate }}\"\n    target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n    [href]=\"getHref(duplicatedApp)\"\n    rel=\"noopener noreferrer\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"external-link\"\n    ></i>\n    {{ 'Open' | translate }}\n  </a>\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i5$1.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { 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: DuplicateApplicationListComponent, selector: "c8y-duplicate-application-list", inputs: ["stepper", "existingApps"], outputs: ["onSelectedApp"] }, { kind: "component", type: DuplicateApplicationPropertiesComponent, selector: "c8y-duplicate-application-properties", inputs: ["stepper", "existingApps", "selectedApp", "isFirstStep"], outputs: ["duplicatedApp"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DuplicateApplicationComponent, decorators: [{
             type: Component,
@@ -1672,7 +1705,7 @@ class PackageVersionSelectComponent {
                 multi: true,
                 useExisting: forwardRef(() => PackageVersionSelectComponent)
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<label for=\"packageVersion\">{{ label | translate }}</label>\n<c8y-form-group>\n  <c8y-typeahead\n    [(ngModel)]=\"selectedVersion\"\n    name=\"packageVersion\"\n    (onSearch)=\"onInput$.next($event)\"\n    placeholder=\"{{ 'Select below or start typing' | translate }}\"\n    [displayProperty]=\"'version'\"\n    [required]=\"true\"\n    [disabled]=\"isDisabled\"\n    [hideNew]=\"true\"\n    [container]=\"'body'\"\n  >\n    <c8y-li\n      *c8yFor=\"let appVersion of versions$; loadMore: 'auto'; notFound: notFoundTemplate\"\n      (click)=\"onVersionSelect(appVersion)\"\n      class=\"p-l-8 p-r-8 c8y-list__item--link\"\n      [active]=\"selectedVersion === appVersion\"\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]=\"appVersion.version || '--'\"\n          [pattern]=\"onInput$ | async\"\n        ></c8y-highlight>\n        <span>\n          <span *ngFor=\"let tag of appVersion.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", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$2.AsyncPipe, name: "async" }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<label for=\"packageVersion\">{{ label | translate }}</label>\n<c8y-form-group>\n  <c8y-typeahead\n    [(ngModel)]=\"selectedVersion\"\n    name=\"packageVersion\"\n    (onSearch)=\"onInput$.next($event)\"\n    placeholder=\"{{ 'Select below or start typing' | translate }}\"\n    [displayProperty]=\"'version'\"\n    [required]=\"true\"\n    [disabled]=\"isDisabled\"\n    [hideNew]=\"true\"\n    [container]=\"'body'\"\n  >\n    <c8y-li\n      *c8yFor=\"let appVersion of versions$; loadMore: 'auto'; notFound: notFoundTemplate\"\n      (click)=\"onVersionSelect(appVersion)\"\n      class=\"p-l-8 p-r-8 c8y-list__item--link\"\n      [active]=\"selectedVersion === appVersion\"\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]=\"appVersion.version || '--'\"\n          [pattern]=\"onInput$ | async\"\n        ></c8y-highlight>\n        <span>\n          <span *ngFor=\"let tag of appVersion.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", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionSelectComponent, decorators: [{
             type: Component,
@@ -1755,7 +1788,7 @@ class UploadArchiveComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UploadArchiveComponent, deps: [{ token: EcosystemService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UploadArchiveComponent, selector: "c8y-upload-archive", inputs: { application: "application", uploadNewVersion: "uploadNewVersion", preUploadCallback: "preUploadCallback" }, outputs: { applicationChange: "applicationChange", refresh: "refresh" }, ngImport: i0, template: "<c8y-drop-area\n  (dropped)=\"onFileDroppedEvent($event)\"\n  [accept]=\"'.zip'\"\n  [loading]=\"uploadInProgress\"\n  [maxAllowedFiles]=\"1\"\n  [message]=\"'Upload a *.zip file' | translate\"\n  [progress]=\"uploadProgress | async\"\n  [forceHideList]=\"true\"\n  class=\"drop-area-sm\"\n>\n</c8y-drop-area>\n", dependencies: [{ kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UploadArchiveComponent, selector: "c8y-upload-archive", inputs: { application: "application", uploadNewVersion: "uploadNewVersion", preUploadCallback: "preUploadCallback" }, outputs: { applicationChange: "applicationChange", refresh: "refresh" }, ngImport: i0, template: "<c8y-drop-area\n  (dropped)=\"onFileDroppedEvent($event)\"\n  [accept]=\"'.zip'\"\n  [loading]=\"uploadInProgress\"\n  [maxAllowedFiles]=\"1\"\n  [message]=\"'Upload a *.zip file' | translate\"\n  [progress]=\"uploadProgress | async\"\n  [forceHideList]=\"true\"\n  class=\"drop-area-sm\"\n>\n</c8y-drop-area>\n", dependencies: [{ kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UploadArchiveComponent, decorators: [{
             type: Component,
@@ -1773,17 +1806,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class ListFiltersComponent {
-    constructor(formBuilder, ui, translateService, gainsightService) {
+    constructor(formBuilder, ui, translateService, gainsightService, router, activatedRoute) {
         this.formBuilder = formBuilder;
         this.ui = ui;
         this.translateService = translateService;
         this.gainsightService = gainsightService;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
         this.packageTypes = [];
         this.packageAvailabilities = [];
         this.packageContents = [];
         this.filterPipeChange = new EventEmitter();
         this.chips = [];
+        this.customFilters = new Map();
         this.CURRENT_LOCATION = location.href;
+        this.destroy$ = new Subject();
         this.formGroup = this.initForm();
     }
     ngOnInit() {
@@ -1793,6 +1830,7 @@ class ListFiltersComponent {
                 this.packageAvailabilities?.length > 0 ||
                 this.packageContents?.length > 0;
         this.currentLang = this.ui.state.lang;
+        this.subscribeToQueryParams();
     }
     setFilterTerm(filterTerm) {
         this.currentFilterTerm = filterTerm;
@@ -1836,6 +1874,55 @@ class ListFiltersComponent {
         chip[1].setValue(false);
         this.applyPredefinedFilters();
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    subscribeToQueryParams() {
+        this.activatedRoute.queryParams
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((queryParams) => {
+            const filters = this.parseQueryParams(queryParams);
+            this.currentFilterTerm = queryParams.filterTerm || '';
+            this.formGroup.patchValue(filters);
+            this.applyPredefinedFilters();
+        });
+    }
+    setQueryParams() {
+        if (!this.currentFiltersState) {
+            return;
+        }
+        this.router.navigate([], {
+            queryParams: {
+                ...this.simplifyFilterObject(this.currentFiltersState),
+                filterTerm: this.currentFilterTerm || null
+            }
+        });
+    }
+    parseQueryParams(queryParams) {
+        const filter = {};
+        for (const fullKey in queryParams) {
+            const [key, subKey] = fullKey.split('.');
+            if (!filter[key]) {
+                filter[key] = {};
+            }
+            filter[key][subKey] = queryParams[fullKey] === 'true';
+        }
+        return filter;
+    }
+    simplifyFilterObject(currentFiltersState) {
+        const keys = Object.keys(currentFiltersState);
+        const result = {};
+        for (const key of keys) {
+            const subKeys = Object.keys(currentFiltersState[key]);
+            for (const subKey of subKeys) {
+                if (currentFiltersState[key][subKey]) {
+                    result[`${key}.${subKey}`] = currentFiltersState[key][subKey];
+                }
+            }
+        }
+        return result;
+    }
     initForm() {
         return this.formBuilder.group({
             type: this.formBuilder.group({
@@ -1851,10 +1938,12 @@ class ListFiltersComponent {
             content: this.formBuilder.group({
                 [APP_STATE.PACKAGE_BLUEPRINT.label]: [false],
                 [APP_STATE.PACKAGE_PLUGIN.label]: [false]
-            })
+            }),
+            custom: this.formBuilder.group({})
         });
     }
     setPipe() {
+        this.setQueryParams();
         const filterPipe = pipe(map((data) => {
             this.data = data.filter((app) => {
                 let matchesByString;
@@ -1871,7 +1960,8 @@ class ListFiltersComponent {
                 }
                 const matchesByPredefinedProperty = this.appMatchesByPredefinedProperty(app, 'type') &&
                     this.appMatchesByPredefinedProperty(app, 'availability') &&
-                    this.appMatchesByPredefinedProperty(app, 'content');
+                    this.appMatchesByPredefinedProperty(app, 'content') &&
+                    this.appMatchesByPredefinedProperty(app, 'custom');
                 return matchesByString && matchesByPredefinedProperty;
             });
             return this.data;
@@ -1883,6 +1973,9 @@ class ListFiltersComponent {
         return name && name.toLowerCase().indexOf(term) > -1;
     }
     appMatchesByPredefinedProperty(app, property) {
+        if (property === 'custom' && this.currentFiltersState) {
+            return Object.entries(this.currentFiltersState[property]).every(([key, value]) => this.customFilters.get(key)(app, value));
+        }
         // if filter object does not contain property filters or all filters are false, filter is inactive
         const filterForPropertyIsActive = this.currentFiltersState?.[property] &&
             !Object.values(this.currentFiltersState[property]).every(v => !v);
@@ -1906,13 +1999,13 @@ class ListFiltersComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ListFiltersComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AppStateService }, { token: i3.TranslateService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ListFiltersComponent, selector: "c8y-list-filters", inputs: { packageTypes: "packageTypes", packageAvailabilities: "packageAvailabilities", packageContents: "packageContents" }, outputs: { filterPipeChange: "filterPipeChange" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputComponent, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <c8y-filter (onSearch)=\"setFilterTerm($event)\"></c8y-filter>\n\n  <div\n    *ngIf=\"predefinedFiltersVisible\"\n    class=\"dropdown m-l-8 m-r-4\"\n    dropdown\n    (isOpenChange)=\"toggleDropdown($event)\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group d-inline-flex\">\n      <button\n        class=\"btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center w-auto\"\n        title=\"{{ 'Filters' | translate }}\"\n        dropdownToggle\n      >\n        <span [ngPlural]=\"chips.length\">\n          <ng-template ngPluralCase=\"=0\">\n            {{ 'Filters' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"=1\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filter' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filters' | translate }}\n          </ng-template>\n        </span>\n        <span class=\"caret\"></span>\n      </button>\n      <div\n        class=\"input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll\"\n        *ngIf=\"chips.length > 0\"\n      >\n        <ng-container *ngFor=\"let chip of chips\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngIf=\"chip[1].value\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              type=\"button\"\n              title=\"{{ 'Remove' | translate }} {{ chip[0] | translate | titlecase }}\"\n              (click)=\"deselectChip(chip)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ chip[0] | translate | titlecase }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <div class=\"dropdown-form\">\n        <c8y-form-group\n          *ngIf=\"packageTypes.length\"\n          formGroupName=\"type\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Type' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            *ngFor=\"let type of packageTypes\"\n            [title]=\"type | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"type\"\n              [value]=\"type\"\n            />\n            <span></span>\n            <span>{{ type | translate | titlecase }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageAvailabilities.length\"\n          formGroupName=\"availability\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Availability`of package based on app state`' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            *ngFor=\"let availability of packageAvailabilities\"\n            [title]=\"availability | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"availability\"\n              [value]=\"availability\"\n            />\n            <span></span>\n            <span>{{ availability | translate }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageContents.length\"\n          formGroupName=\"content\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Content' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            *ngFor=\"let content of packageContents\"\n            [title]=\"content | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"content\"\n              [value]=\"content\"\n            />\n            <span></span>\n            <span>{{ content | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          type=\"button\"\n          title=\"{{ 'Reset' | translate }}\"\n          (click)=\"reset(); filtersDropdown.isOpen = false\"\n        >\n          {{ 'Reset' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          type=\"button\"\n          title=\"{{ 'Apply' | translate }}\"\n          (click)=\"applyPredefinedFilters(); filtersDropdown.isOpen = false\"\n          [disabled]=\"formGroup.pristine && formGroup.untouched\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</form>", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i3$2.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.FilterInputComponent, selector: "c8y-filter", inputs: ["icon"], outputs: ["onSearch"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: "directive", type: i8$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$2.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ListFiltersComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AppStateService }, { token: i3.TranslateService }, { token: i2.GainsightService }, { token: i4.Router }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ListFiltersComponent, selector: "c8y-list-filters", inputs: { packageTypes: "packageTypes", packageAvailabilities: "packageAvailabilities", packageContents: "packageContents" }, outputs: { filterPipeChange: "filterPipeChange" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputComponent, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <c8y-filter\n    [filterTerm]=\"currentFilterTerm\"\n    (onSearch)=\"setFilterTerm($event)\"\n  ></c8y-filter>\n\n  <div\n    class=\"dropdown m-l-8 m-r-4\"\n    *ngIf=\"predefinedFiltersVisible\"\n    dropdown\n    (isOpenChange)=\"toggleDropdown($event)\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group d-inline-flex\">\n      <button\n        class=\"btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center w-auto flex-no-shrink\"\n        title=\"{{ 'Filters' | translate }}\"\n        dropdownToggle\n      >\n        <span [ngPlural]=\"chips.length\">\n          <ng-template ngPluralCase=\"=0\">\n            {{ 'Filters' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"=1\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filter' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filters' | translate }}\n          </ng-template>\n        </span>\n        <span class=\"caret\"></span>\n      </button>\n      <div\n        class=\"input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll\"\n        *ngIf=\"chips.length > 0\"\n      >\n        <ng-container *ngFor=\"let chip of chips\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngIf=\"chip[1].value\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ chip[0] | translate | titlecase }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <div class=\"dropdown-form\">\n        <c8y-form-group\n          *ngIf=\"packageTypes.length\"\n          formGroupName=\"type\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Type' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"type | translate\"\n            *ngFor=\"let type of packageTypes\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"type\"\n              [value]=\"type\"\n            />\n            <span></span>\n            <span>{{ type | translate | titlecase }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageAvailabilities.length\"\n          formGroupName=\"availability\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Availability`of package based on app state`' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"availability | translate\"\n            *ngFor=\"let availability of packageAvailabilities\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"availability\"\n              [value]=\"availability\"\n            />\n            <span></span>\n            <span>{{ availability | translate }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageContents.length\"\n          formGroupName=\"content\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Content' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"content | translate\"\n            *ngFor=\"let content of packageContents\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"content\"\n              [value]=\"content\"\n            />\n            <span></span>\n            <span>{{ content | translate }}</span>\n          </label>\n        </c8y-form-group>\n        <c8y-form-group formGroupName=\"custom\">\n          <ng-content></ng-content>\n        </c8y-form-group>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          (click)=\"reset(); filtersDropdown.isOpen = false\"\n        >\n          {{ 'Reset' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyPredefinedFilters(); filtersDropdown.isOpen = false\"\n          [disabled]=\"formGroup.pristine && formGroup.untouched\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i5.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: "directive", type: i8$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ListFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-list-filters', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <c8y-filter (onSearch)=\"setFilterTerm($event)\"></c8y-filter>\n\n  <div\n    *ngIf=\"predefinedFiltersVisible\"\n    class=\"dropdown m-l-8 m-r-4\"\n    dropdown\n    (isOpenChange)=\"toggleDropdown($event)\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group d-inline-flex\">\n      <button\n        class=\"btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center w-auto\"\n        title=\"{{ 'Filters' | translate }}\"\n        dropdownToggle\n      >\n        <span [ngPlural]=\"chips.length\">\n          <ng-template ngPluralCase=\"=0\">\n            {{ 'Filters' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"=1\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filter' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filters' | translate }}\n          </ng-template>\n        </span>\n        <span class=\"caret\"></span>\n      </button>\n      <div\n        class=\"input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll\"\n        *ngIf=\"chips.length > 0\"\n      >\n        <ng-container *ngFor=\"let chip of chips\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngIf=\"chip[1].value\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              type=\"button\"\n              title=\"{{ 'Remove' | translate }} {{ chip[0] | translate | titlecase }}\"\n              (click)=\"deselectChip(chip)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ chip[0] | translate | titlecase }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <div class=\"dropdown-form\">\n        <c8y-form-group\n          *ngIf=\"packageTypes.length\"\n          formGroupName=\"type\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Type' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            *ngFor=\"let type of packageTypes\"\n            [title]=\"type | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"type\"\n              [value]=\"type\"\n            />\n            <span></span>\n            <span>{{ type | translate | titlecase }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageAvailabilities.length\"\n          formGroupName=\"availability\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Availability`of package based on app state`' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            *ngFor=\"let availability of packageAvailabilities\"\n            [title]=\"availability | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"availability\"\n              [value]=\"availability\"\n            />\n            <span></span>\n            <span>{{ availability | translate }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageContents.length\"\n          formGroupName=\"content\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Content' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            *ngFor=\"let content of packageContents\"\n            [title]=\"content | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"content\"\n              [value]=\"content\"\n            />\n            <span></span>\n            <span>{{ content | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          type=\"button\"\n          title=\"{{ 'Reset' | translate }}\"\n          (click)=\"reset(); filtersDropdown.isOpen = false\"\n        >\n          {{ 'Reset' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          type=\"button\"\n          title=\"{{ 'Apply' | translate }}\"\n          (click)=\"applyPredefinedFilters(); filtersDropdown.isOpen = false\"\n          [disabled]=\"formGroup.pristine && formGroup.untouched\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</form>" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.AppStateService }, { type: i3.TranslateService }, { type: i2.GainsightService }], propDecorators: { packageTypes: [{
+            args: [{ selector: 'c8y-list-filters', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <c8y-filter\n    [filterTerm]=\"currentFilterTerm\"\n    (onSearch)=\"setFilterTerm($event)\"\n  ></c8y-filter>\n\n  <div\n    class=\"dropdown m-l-8 m-r-4\"\n    *ngIf=\"predefinedFiltersVisible\"\n    dropdown\n    (isOpenChange)=\"toggleDropdown($event)\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group d-inline-flex\">\n      <button\n        class=\"btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center w-auto flex-no-shrink\"\n        title=\"{{ 'Filters' | translate }}\"\n        dropdownToggle\n      >\n        <span [ngPlural]=\"chips.length\">\n          <ng-template ngPluralCase=\"=0\">\n            {{ 'Filters' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"=1\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filter' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filters' | translate }}\n          </ng-template>\n        </span>\n        <span class=\"caret\"></span>\n      </button>\n      <div\n        class=\"input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll\"\n        *ngIf=\"chips.length > 0\"\n      >\n        <ng-container *ngFor=\"let chip of chips\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngIf=\"chip[1].value\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ chip[0] | translate | titlecase }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <div class=\"dropdown-form\">\n        <c8y-form-group\n          *ngIf=\"packageTypes.length\"\n          formGroupName=\"type\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Type' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"type | translate\"\n            *ngFor=\"let type of packageTypes\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"type\"\n              [value]=\"type\"\n            />\n            <span></span>\n            <span>{{ type | translate | titlecase }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageAvailabilities.length\"\n          formGroupName=\"availability\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Availability`of package based on app state`' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"availability | translate\"\n            *ngFor=\"let availability of packageAvailabilities\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"availability\"\n              [value]=\"availability\"\n            />\n            <span></span>\n            <span>{{ availability | translate }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageContents.length\"\n          formGroupName=\"content\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Content' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"content | translate\"\n            *ngFor=\"let content of packageContents\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"content\"\n              [value]=\"content\"\n            />\n            <span></span>\n            <span>{{ content | translate }}</span>\n          </label>\n        </c8y-form-group>\n        <c8y-form-group formGroupName=\"custom\">\n          <ng-content></ng-content>\n        </c8y-form-group>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          (click)=\"reset(); filtersDropdown.isOpen = false\"\n        >\n          {{ 'Reset' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyPredefinedFilters(); filtersDropdown.isOpen = false\"\n          [disabled]=\"formGroup.pristine && formGroup.untouched\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.AppStateService }, { type: i3.TranslateService }, { type: i2.GainsightService }, { type: i4.Router }, { type: i4.ActivatedRoute }], propDecorators: { packageTypes: [{
                 type: Input
             }], packageAvailabilities: [{
                 type: Input
@@ -1925,6 +2018,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 args: [FilterInputComponent]
             }] } });
 
+class ArchivedFilterComponent {
+    constructor(filterComponent) {
+        this.filterComponent = filterComponent;
+        this.filterLabel = gettext('Show archived packages');
+        this.archivedFormControl = new FormControl();
+        this.filterComponent.formGroup.controls.custom.addControl(this.filterLabel, this.archivedFormControl);
+        filterComponent.customFilters.set(this.filterLabel, (appOrPlugin, enabled) => {
+            return (appOrPlugin.filterProps.type !== PackageType.ARCHIVED ||
+                (appOrPlugin.filterProps.type === PackageType.ARCHIVED && enabled));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ArchivedFilterComponent, deps: [{ token: ListFiltersComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ArchivedFilterComponent, selector: "c8y-archived-filter", ngImport: i0, template: "<label class=\"c8y-switch\">\n  <input\n    type=\"checkbox\"\n    checked=\"checked\"\n    [formControl]=\"archivedFormControl\"\n  />\n  <span></span>\n  {{ 'Show archived packages' | translate }}\n</label>\n", dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ArchivedFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-archived-filter', template: "<label class=\"c8y-switch\">\n  <input\n    type=\"checkbox\"\n    checked=\"checked\"\n    [formControl]=\"archivedFormControl\"\n  />\n  <span></span>\n  {{ 'Show archived packages' | translate }}\n</label>\n" }]
+        }], ctorParameters: () => [{ type: ListFiltersComponent }] });
+
 class SharedEcosystemModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SharedEcosystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: SharedEcosystemModule, declarations: [AddApplicationComponent,
@@ -1936,7 +2048,8 @@ class SharedEcosystemModule {
             DuplicateApplicationComponent,
             PackageVersionSelectComponent,
             TranslatePackageLabelPipe,
-            ListFiltersComponent], imports: [CoreModule,
+            ListFiltersComponent,
+            ArchivedFilterComponent], imports: [CoreModule,
             BsDropdownModule,
             TooltipModule,
             A11yModule,
@@ -1952,7 +2065,8 @@ class SharedEcosystemModule {
             DuplicateApplicationComponent,
             PackageVersionSelectComponent,
             TranslatePackageLabelPipe,
-            ListFiltersComponent] }); }
+            ListFiltersComponent,
+            ArchivedFilterComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SharedEcosystemModule, providers: [
             hookWizard({
                 wizardId: EcosystemWizards.APPLICATION_UPLOAD,
@@ -1998,7 +2112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         DuplicateApplicationComponent,
                         PackageVersionSelectComponent,
                         TranslatePackageLabelPipe,
-                        ListFiltersComponent
+                        ListFiltersComponent,
+                        ArchivedFilterComponent
                     ],
                     exports: [
                         AddApplicationComponent,
@@ -2010,7 +2125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         DuplicateApplicationComponent,
                         PackageVersionSelectComponent,
                         TranslatePackageLabelPipe,
-                        ListFiltersComponent
+                        ListFiltersComponent,
+                        ArchivedFilterComponent
                     ],
                     providers: [
                         hookWizard({
@@ -2048,5 +2164,5 @@ const defaultPackageContents = [
  * Generated bundle index. Do not edit.
  */
 
-export { APP_STATE, AddApplicationComponent, ApplicationCardComponent, ApplicationPropertiesFormComponent, DuplicateApplicationComponent, DuplicateApplicationListComponent, DuplicateApplicationPropertiesComponent, ERROR_MESSAGES, ERROR_TYPE, EcosystemService, EcosystemWizards, ListFiltersComponent, PACKAGE_TYPE_LABELS, PRODUCT_EXPERIENCE_ECOSYSTEM, PackageAvailabilityService, PackageVersionSelectComponent, SharedEcosystemModule, TranslatePackageLabelPipe, UploadArchiveComponent, defaultPackageAvailabilities, defaultPackageContents, defaultPackageTypes, packageProperties };
+export { APP_STATE, AddApplicationComponent, ApplicationCardComponent, ApplicationPropertiesFormComponent, ArchivedFilterComponent, DuplicateApplicationComponent, DuplicateApplicationListComponent, DuplicateApplicationPropertiesComponent, ERROR_MESSAGES, ERROR_TYPE, EcosystemService, EcosystemWizards, ListFiltersComponent, PACKAGE_TYPE_LABELS, PRODUCT_EXPERIENCE_ECOSYSTEM, PackageAvailabilityService, PackageVersionSelectComponent, SharedEcosystemModule, TranslatePackageLabelPipe, UploadArchiveComponent, defaultPackageAvailabilities, defaultPackageContents, defaultPackageTypes, packageProperties };
 //# sourceMappingURL=c8y-ngx-components-ecosystem-shared.mjs.map