@c8y/ngx-components 1022.9.6 → 1022.13.0

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

@@ -2,31 +2,25 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, ViewChild, Input, Component, Pipe, Output, forwardRef, inject, NgModule } from '@angular/core';
 import * as i3$1 from '@c8y/client';
 import { ApplicationAvailability, ApplicationType } from '@c8y/client';
-import * as i2 from '@c8y/ngx-components';
-import { gettext, PackageType, Status, DropAreaComponent, C8yStepper, internalApps, FilterInputComponent, PluginsService, LoadingComponent, MarkdownToHtmlPipe, EmptyStateComponent, C8yTranslatePipe, CoreModule, hookWizard } from '@c8y/ngx-components';
+import * as i1 from '@c8y/ngx-components';
+import { gettext, PackageType, Status, WizardHeaderComponent, IconDirective, WizardBodyComponent, FormGroupComponent, DropAreaComponent, MessagesComponent, MessageDirective, OperationResultComponent, WizardFooterComponent, C8yTranslateDirective, C8yTranslatePipe, AppIconComponent, IfAllowedDirective, HumanizeAppNamePipe, RequiredInputPlaceholderDirective, LoadingComponent, C8yStepper, TypeaheadComponent, ForOfDirective, ListItemComponent, ListItemIconComponent, HighlightComponent, internalApps, FilterInputComponent, PluginsService, MarkdownToHtmlPipe, EmptyStateComponent, CoreModule, hookWizard } from '@c8y/ngx-components';
 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, Subject, pipe } from 'rxjs';
 import { map, shareReplay, debounceTime, take, filter, distinctUntilKeyChanged, tap, switchMap, takeUntil } from 'rxjs/operators';
 import { satisfies, gt, coerce, lt } from 'semver';
-import * as i5 from '@angular/common';
-import { AsyncPipe, NgIf } from '@angular/common';
-import * as i1 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 { NgIf, NgFor, AsyncPipe, NgClass, NgPlural, NgPluralCase, TitleCasePipe } from '@angular/common';
+import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
 import * as i4 from '@angular/router';
-import * as i6 from 'ngx-bootstrap/dropdown';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-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$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$1 from '@angular/cdk/stepper';
+import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
+import { BsDropdownDirective, BsDropdownToggleDirective, BsDropdownMenuDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
+import { IconSelectorWrapperComponent, IconSelectorModule } from '@c8y/ngx-components/icon-selector';
+import * as i1$2 from 'ngx-bootstrap/modal';
+import { CdkStep } from '@angular/cdk/stepper';
 
 /** Wizard types  */
 var EcosystemWizards;
@@ -1047,7 +1041,7 @@ class EcosystemService {
     isNameLengthExceeded(name, appType) {
         return name.length > MICROSERVICE_NAME_MAX_LENGTH && appType === ApplicationType.MICROSERVICE;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EcosystemService, deps: [{ token: i2.ModalService }, { token: i2.AlertService }, { token: i2.HumanizeAppNamePipe }, { token: i3.TranslateService }, { token: i3$1.ApplicationService }, { token: i2.AppStateService }, { token: i2.ZipService }, { token: i3$1.TenantService }, { token: i3$1.InventoryService }, { token: i2.WizardModalService }, { token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EcosystemService, deps: [{ token: i1.ModalService }, { token: i1.AlertService }, { token: i1.HumanizeAppNamePipe }, { token: i3.TranslateService }, { token: i3$1.ApplicationService }, { token: i1.AppStateService }, { token: i1.ZipService }, { token: i3$1.TenantService }, { token: i3$1.InventoryService }, { token: i1.WizardModalService }, { token: i1.PluginsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EcosystemService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EcosystemService, decorators: [{
@@ -1055,7 +1049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i2.ModalService }, { type: i2.AlertService }, { type: i2.HumanizeAppNamePipe }, { type: i3.TranslateService }, { type: i3$1.ApplicationService }, { type: i2.AppStateService }, { type: i2.ZipService }, { type: i3$1.TenantService }, { type: i3$1.InventoryService }, { type: i2.WizardModalService }, { type: i2.PluginsService }] });
+        }], ctorParameters: () => [{ type: i1.ModalService }, { type: i1.AlertService }, { type: i1.HumanizeAppNamePipe }, { type: i3.TranslateService }, { type: i3$1.ApplicationService }, { type: i1.AppStateService }, { type: i1.ZipService }, { type: i3$1.TenantService }, { type: i3$1.InventoryService }, { type: i1.WizardModalService }, { type: i1.PluginsService }] });
 
 class PackageAvailabilityService {
     constructor(appState, alert, modal, application, gainsightService, translateService) {
@@ -1131,13 +1125,13 @@ class PackageAvailabilityService {
             cancel: gettext('Cancel')
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PackageAvailabilityService, deps: [{ token: i2.AppStateService }, { token: i2.AlertService }, { token: i2.ModalService }, { token: i3$1.ApplicationService }, { token: i2.GainsightService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PackageAvailabilityService, deps: [{ token: i1.AppStateService }, { token: i1.AlertService }, { token: i1.ModalService }, { token: i3$1.ApplicationService }, { token: i1.GainsightService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PackageAvailabilityService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PackageAvailabilityService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i2.AppStateService }, { type: i2.AlertService }, { type: i2.ModalService }, { type: i3$1.ApplicationService }, { type: i2.GainsightService }, { type: i3.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1.AppStateService }, { type: i1.AlertService }, { type: i1.ModalService }, { type: i3$1.ApplicationService }, { type: i1.GainsightService }, { type: i3.TranslateService }] });
 
 class AddApplicationComponent {
     constructor(ecosystemService, alertService, applicationService, wizardComponent, translateService, packageAvailability) {
@@ -1213,13 +1207,30 @@ class AddApplicationComponent {
         this.ecosystemService.cancelAppCreation(this.createdApp);
         this.createdApp = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: AddApplicationComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AddApplicationComponent, deps: [{ token: EcosystemService }, { token: i1.AlertService }, { token: i3$1.ApplicationService }, { token: i1.WizardComponent }, { token: i3.TranslateService }, { token: PackageAvailabilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AddApplicationComponent, isStandalone: true, 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: "component", type: WizardHeaderComponent, selector: "c8y-wizard-header" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: WizardBodyComponent, selector: "c8y-wizard-body" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AddApplicationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-add-application', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: EcosystemService }, { type: i2.AlertService }, { type: i3$1.ApplicationService }, { type: i2.WizardComponent }, { type: i3.TranslateService }, { type: PackageAvailabilityService }], propDecorators: { headerText: [{
+            args: [{ selector: 'c8y-add-application', imports: [
+                        WizardHeaderComponent,
+                        IconDirective,
+                        WizardBodyComponent,
+                        NgIf,
+                        FormGroupComponent,
+                        DropAreaComponent,
+                        MessagesComponent,
+                        MessageDirective,
+                        PopoverDirective,
+                        FormsModule,
+                        NgFor,
+                        OperationResultComponent,
+                        WizardFooterComponent,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: EcosystemService }, { type: i1.AlertService }, { type: i3$1.ApplicationService }, { type: i1.WizardComponent }, { type: i3.TranslateService }, { type: PackageAvailabilityService }], propDecorators: { headerText: [{
                 type: Input
             }], headerIcon: [{
                 type: Input
@@ -1250,14 +1261,11 @@ class TranslatePackageLabelPipe {
         return rawPackageLabel;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslatePackageLabelPipe, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TranslatePackageLabelPipe, isStandalone: false, name: "translatePackageLabel" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TranslatePackageLabelPipe, isStandalone: true, name: "translatePackageLabel" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslatePackageLabelPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'translatePackageLabel',
-                    standalone: false
-                }]
+            args: [{ name: 'translatePackageLabel' }]
         }], ctorParameters: () => [{ type: i3.TranslateService }] });
 
 class ApplicationCardComponent {
@@ -1388,13 +1396,28 @@ class ApplicationCardComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: ApplicationCardComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApplicationCardComponent, deps: [{ token: i3$1.ApplicationService }, { token: EcosystemService }, { token: i1.AlertService }, { token: i4.Router }, { token: i1.WizardModalService }, { token: i1.AlertService }, { token: i1.PluginsService }, { token: i1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ApplicationCardComponent, isStandalone: true, 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApplicationCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-application-card', standalone: false, 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: [{
+            args: [{ selector: 'c8y-application-card', imports: [
+                        NgIf,
+                        TooltipDirective,
+                        NgClass,
+                        AppIconComponent,
+                        IconDirective,
+                        BsDropdownDirective,
+                        CdkTrapFocus,
+                        BsDropdownToggleDirective,
+                        BsDropdownMenuDirective,
+                        IfAllowedDirective,
+                        C8yTranslatePipe,
+                        AsyncPipe,
+                        HumanizeAppNamePipe,
+                        TranslatePackageLabelPipe
+                    ], 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: i1.AlertService }, { type: i4.Router }, { type: i1.WizardModalService }, { type: i1.AlertService }, { type: i1.PluginsService }, { type: i1.GainsightService }], propDecorators: { app: [{
                 type: Input
             }], canEdit: [{
                 type: Input
@@ -1430,13 +1453,21 @@ class ApplicationPropertiesFormComponent {
     setForm(applicationConfig) {
         this.formGroup.patchValue({ ...applicationConfig });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApplicationPropertiesFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ApplicationPropertiesFormComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApplicationPropertiesFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ApplicationPropertiesFormComponent, isStandalone: true, 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApplicationPropertiesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-application-properties-form', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { application: [{
+            args: [{ selector: 'c8y-application-properties-form', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FormGroupComponent,
+                        C8yTranslateDirective,
+                        RequiredInputPlaceholderDirective,
+                        IconSelectorWrapperComponent,
+                        C8yTranslatePipe
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { application: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1458,13 +1489,21 @@ class DuplicateApplicationListComponent {
     back() {
         this.wizardComponent.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DuplicateApplicationListComponent, deps: [{ token: EcosystemService }, { token: i2.WizardComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DuplicateApplicationListComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DuplicateApplicationListComponent, deps: [{ token: EcosystemService }, { token: i1.WizardComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DuplicateApplicationListComponent, isStandalone: true, 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DuplicateApplicationListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-duplicate-application-list', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: EcosystemService }, { type: i2.WizardComponent }], propDecorators: { stepper: [{
+            args: [{ selector: 'c8y-duplicate-application-list', imports: [
+                        NgFor,
+                        AppIconComponent,
+                        NgClass,
+                        WizardFooterComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe,
+                        HumanizeAppNamePipe
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: EcosystemService }, { type: i1.WizardComponent }], propDecorators: { stepper: [{
                 type: Input
             }], existingApps: [{
                 type: Input
@@ -1570,13 +1609,21 @@ class DuplicateApplicationPropertiesComponent {
             return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: DuplicateApplicationPropertiesComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DuplicateApplicationPropertiesComponent, deps: [{ token: i1$2.BsModalRef }, { token: EcosystemService }, { token: i3$1.ApplicationService }, { token: i1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DuplicateApplicationPropertiesComponent, isStandalone: true, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ApplicationPropertiesFormComponent, selector: "c8y-application-properties-form", inputs: ["application", "disabled"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DuplicateApplicationPropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-duplicate-application-properties', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: EcosystemService }, { type: i3$1.ApplicationService }, { type: i2.GainsightService }], propDecorators: { stepper: [{
+            args: [{ selector: 'c8y-duplicate-application-properties', imports: [
+                        NgIf,
+                        FormsModule,
+                        ApplicationPropertiesFormComponent,
+                        LoadingComponent,
+                        WizardFooterComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: i1$2.BsModalRef }, { type: EcosystemService }, { type: i3$1.ApplicationService }, { type: i1.GainsightService }], propDecorators: { stepper: [{
                 type: Input
             }], existingApps: [{
                 type: Input
@@ -1616,13 +1663,26 @@ class DuplicateApplicationComponent {
     done() {
         this.wizardComponent.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: DuplicateApplicationComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DuplicateApplicationComponent, deps: [{ token: EcosystemService }, { token: i3$1.ApplicationService }, { token: i1.WizardComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DuplicateApplicationComponent, isStandalone: true, 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: "component", type: WizardHeaderComponent, selector: "c8y-wizard-header" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: WizardBodyComponent, selector: "c8y-wizard-body" }, { kind: "component", type: C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { 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: "component", type: OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DuplicateApplicationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-duplicate-application', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: EcosystemService }, { type: i3$1.ApplicationService }, { type: i2.WizardComponent }], propDecorators: { stepper: [{
+            args: [{ selector: 'c8y-duplicate-application', imports: [
+                        WizardHeaderComponent,
+                        IconDirective,
+                        C8yTranslateDirective,
+                        WizardBodyComponent,
+                        C8yStepper,
+                        NgIf,
+                        CdkStep,
+                        DuplicateApplicationListComponent,
+                        DuplicateApplicationPropertiesComponent,
+                        OperationResultComponent,
+                        WizardFooterComponent,
+                        C8yTranslatePipe
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: EcosystemService }, { type: i3$1.ApplicationService }, { type: i1.WizardComponent }], propDecorators: { stepper: [{
                 type: ViewChild,
                 args: [C8yStepper, { static: true }]
             }] } });
@@ -1702,14 +1762,14 @@ class PackageVersionSelectComponent {
         this.setInitialValueForInput(sortedAppVersions);
         return { data: sortedAppVersions, res: resultList.res };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PackageVersionSelectComponent, deps: [{ token: i3$1.ApplicationService }, { token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PackageVersionSelectComponent, isStandalone: false, selector: "c8y-package-version-select", inputs: { label: "label", packageContextPath: "packageContextPath", packageId: "packageId" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PackageVersionSelectComponent, deps: [{ token: i3$1.ApplicationService }, { token: i1.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PackageVersionSelectComponent, isStandalone: true, selector: "c8y-package-version-select", inputs: { label: "label", packageContextPath: "packageContextPath", packageId: "packageId" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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      <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    </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: 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" }] }); }
+        ], 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      <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    </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: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PackageVersionSelectComponent, decorators: [{
             type: Component,
@@ -1719,8 +1779,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => PackageVersionSelectComponent)
                         }
-                    ], standalone: false, 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      <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    </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" }]
-        }], ctorParameters: () => [{ type: i3$1.ApplicationService }, { type: i2.PluginsService }], propDecorators: { label: [{
+                    ], imports: [
+                        FormGroupComponent,
+                        TypeaheadComponent,
+                        FormsModule,
+                        ForOfDirective,
+                        ListItemComponent,
+                        ListItemIconComponent,
+                        HighlightComponent,
+                        NgFor,
+                        NgIf,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], 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      <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    </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" }]
+        }], ctorParameters: () => [{ type: i3$1.ApplicationService }, { type: i1.PluginsService }], propDecorators: { label: [{
                 type: Input
             }], packageContextPath: [{
                 type: Input
@@ -1791,13 +1864,13 @@ class UploadArchiveComponent {
             this.ecosystemService.alertError(ex);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UploadArchiveComponent, deps: [{ token: EcosystemService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UploadArchiveComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UploadArchiveComponent, deps: [{ token: EcosystemService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UploadArchiveComponent, isStandalone: true, 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: 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: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UploadArchiveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-upload-archive', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: EcosystemService }, { type: i2.AlertService }], propDecorators: { application: [{
+            args: [{ selector: 'c8y-upload-archive', imports: [DropAreaComponent, C8yTranslatePipe, AsyncPipe], 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" }]
+        }], ctorParameters: () => [{ type: EcosystemService }, { type: i1.AlertService }], propDecorators: { application: [{
                 type: Input
             }], uploadNewVersion: [{
                 type: Input
@@ -2003,13 +2076,30 @@ class ListFiltersComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: ListFiltersComponent, isStandalone: false, 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 gap-4 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListFiltersComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1.AppStateService }, { token: i3.TranslateService }, { token: i1.GainsightService }, { token: i4.Router }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListFiltersComponent, isStandalone: true, 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 gap-4 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-list-filters', standalone: false, 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 gap-4 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: [{
+            args: [{ selector: 'c8y-list-filters', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FilterInputComponent,
+                        NgIf,
+                        BsDropdownDirective,
+                        CdkTrapFocus,
+                        BsDropdownToggleDirective,
+                        NgPlural,
+                        NgPluralCase,
+                        NgFor,
+                        IconDirective,
+                        BsDropdownMenuDirective,
+                        FormGroupComponent,
+                        RequiredInputPlaceholderDirective,
+                        C8yTranslatePipe,
+                        TitleCasePipe
+                    ], 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 gap-4 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$1.FormBuilder }, { type: i1.AppStateService }, { type: i3.TranslateService }, { type: i1.GainsightService }, { type: i4.Router }, { type: i4.ActivatedRoute }], propDecorators: { packageTypes: [{
                 type: Input
             }], packageAvailabilities: [{
                 type: Input
@@ -2034,11 +2124,11 @@ class ArchivedFilterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ArchivedFilterComponent, deps: [{ token: ListFiltersComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ArchivedFilterComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ArchivedFilterComponent, isStandalone: true, 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ArchivedFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-archived-filter', standalone: false, 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" }]
+            args: [{ selector: 'c8y-archived-filter', imports: [FormsModule, ReactiveFormsModule, C8yTranslatePipe], 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 }] });
 
 /**
@@ -2120,7 +2210,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class SharedEcosystemModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SharedEcosystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SharedEcosystemModule, declarations: [AddApplicationComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SharedEcosystemModule, imports: [CoreModule,
+            BsDropdownModule,
+            TooltipModule,
+            A11yModule,
+            FormsModule,
+            PopoverModule,
+            ReactiveFormsModule,
+            IconSelectorModule,
+            PackageChangelogComponent,
+            AddApplicationComponent,
             ApplicationPropertiesFormComponent,
             UploadArchiveComponent,
             ApplicationCardComponent,
@@ -2130,15 +2229,7 @@ class SharedEcosystemModule {
             PackageVersionSelectComponent,
             TranslatePackageLabelPipe,
             ListFiltersComponent,
-            ArchivedFilterComponent], imports: [CoreModule,
-            BsDropdownModule,
-            TooltipModule,
-            A11yModule,
-            FormsModule,
-            PopoverModule,
-            ReactiveFormsModule,
-            IconSelectorModule,
-            PackageChangelogComponent], exports: [AddApplicationComponent,
+            ArchivedFilterComponent], exports: [AddApplicationComponent,
             ApplicationPropertiesFormComponent,
             UploadArchiveComponent,
             ApplicationCardComponent,
@@ -2171,7 +2262,17 @@ class SharedEcosystemModule {
             PopoverModule,
             ReactiveFormsModule,
             IconSelectorModule,
-            PackageChangelogComponent] }); }
+            PackageChangelogComponent,
+            AddApplicationComponent,
+            ApplicationPropertiesFormComponent,
+            UploadArchiveComponent,
+            ApplicationCardComponent,
+            DuplicateApplicationListComponent,
+            DuplicateApplicationPropertiesComponent,
+            DuplicateApplicationComponent,
+            PackageVersionSelectComponent,
+            ListFiltersComponent,
+            ArchivedFilterComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SharedEcosystemModule, decorators: [{
             type: NgModule,
@@ -2185,9 +2286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         PopoverModule,
                         ReactiveFormsModule,
                         IconSelectorModule,
-                        PackageChangelogComponent
-                    ],
-                    declarations: [
+                        PackageChangelogComponent,
                         AddApplicationComponent,
                         ApplicationPropertiesFormComponent,
                         UploadArchiveComponent,