@c8y/ngx-components 1020.28.11 → 1020.33.1

package/fesm2022/c8y-ngx-components-repository-software.mjs

@@ -1,24 +1,24 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewChild, Output, ChangeDetectionStrategy, HostListener, Injectable, NgModule, Input } from '@angular/core';
-import * as i1$1 from '@angular/router';
+import { EventEmitter, Component, ViewChild, Output, Injectable, NgModule, Input } from '@angular/core';
+import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i4 from '@c8y/ngx-components';
-import { gettext, TypeaheadComponent, BaseColumn, Status, memoize, NavigatorNode, hookNavigator, hookRoute, CoreModule, FormsModule, ModalSelectionMode, ViewContext } from '@c8y/ngx-components';
-import * as i2 from '@c8y/ngx-components/repository/shared';
-import { PRODUCT_EXPERIENCE_REPOSITORY_SHARED, RepositoryType, RepositoryItemNameGridColumn, DescriptionGridColumn, DeviceTypeGridColumn, VersionsGridColumn, SoftwareTypeComponent, SharedRepositoryModule, RepositorySelectModalComponent } from '@c8y/ngx-components/repository/shared';
+import { gettext, Status, memoize, NavigatorNode, hookNavigator, hookRoute, CoreModule, FormsModule, ModalSelectionMode, ViewContext } from '@c8y/ngx-components';
+import * as i1$1 from '@c8y/ngx-components/repository/shared';
+import { PRODUCT_EXPERIENCE_REPOSITORY_SHARED, RepositoryType, RepositoryItemNameGridColumn, DescriptionGridColumn, DeviceTypeGridColumn, TypeGridColumn, VersionsGridColumn, SoftwareTypeComponent, SharedRepositoryModule, RepositorySelectModalComponent } from '@c8y/ngx-components/repository/shared';
 import * as i4$1 from '@ngx-translate/core';
 import * as i1 from 'ngx-bootstrap/modal';
 import * as i5 from '@angular/forms';
-import { isUndefined, assign, get, cloneDeep, uniqBy, head, set, filter, has } from 'lodash-es';
-import { BehaviorSubject, from, NEVER, pipe, Subject, merge, of, combineLatest } from 'rxjs';
+import { isUndefined, assign, get, head, set, filter, has } from 'lodash-es';
+import { BehaviorSubject, from, Subject, merge, of, combineLatest, pipe } from 'rxjs';
 import { tap, debounceTime, distinctUntilChanged, switchMap, map, shareReplay, distinctUntilKeyChanged, withLatestFrom, takeUntil, take, share, mergeMap, filter as filter$1 } from 'rxjs/operators';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i6 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i2$1 from '@c8y/client';
-import { QueriesUtil, OperationStatus } from '@c8y/client';
 import { __decorate, __metadata } from 'tslib';
+import * as i2 from '@c8y/client';
+import { QueriesUtil, OperationStatus } from '@c8y/client';
 import * as i10 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
@@ -136,138 +136,19 @@ class AddSoftwareModalComponent {
             softwareType: software
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: AddSoftwareModalComponent, deps: [{ token: i1.BsModalRef }, { token: i2.RepositoryService }, { token: i4.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: AddSoftwareModalComponent, selector: "c8y-add-software-software-modal", outputs: { saved: "saved" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["softwareForm"], descendants: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-tools'\"></i>\n    <div class=\"modal-title\" translate id=\"addSoftwareModalTitle\">Add software</div>\n  </div>\n  <div class=\"p-16 text-center separator-bottom\" *ngIf=\"!softwarePreselected\">\n    <p class=\"text-medium text-16\" translate>Select or create new software</p>\n  </div>\n  <form\n    class=\"d-contents\"\n    autocomplete=\"off\"\n    #softwareForm=\"ngForm\"\n    (ngSubmit)=\"softwareForm.form.valid && save()\"\n  >\n    <div class=\"modal-inner-scroll\">\n      <div class=\"modal-body\" id=\"addSoftwareModalDescription\">\n        <div [hidden]=\"softwarePreselected\">\n          <c8y-form-group>\n            <label for=\"softwareName\" translate>Software</label>\n            <c8y-typeahead\n              [(ngModel)]=\"model.selected\"\n              name=\"softwareName\"\n              placeholder=\"{{ 'Select or enter' | translate }}\"\n              (onSearch)=\"onInput.next($event)\"\n              [required]=\"true\"\n            >\n              <c8y-li\n                *c8yFor=\"\n                  let software of softwaresResult;\n                  loadMore: 'auto';\n                  notFound: notFoundTemplate\n                \"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"onSoftwareSelect(software)\"\n                [active]=\"model.selected === software\"\n              >\n                <c8y-highlight\n                  [text]=\"software.name || '--'\"\n                  [pattern]=\"onInput | async\"\n                ></c8y-highlight>\n              </c8y-li>\n              <ng-template #notFoundTemplate>\n                <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"(onInput | async)?.length > 0\">\n                  <span translate>No match found.</span>\n                  <button\n                    class=\"btn btn-primary btn-xs m-l-8\"\n                    type=\"button\"\n                    title=\"{{ 'Add new`software`' | translate }}\"\n                  >\n                    {{ 'Add new`software`' | translate }}\n                  </button>\n                </c8y-li>\n              </ng-template>\n            </c8y-typeahead>\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label for=\"softwareDescription\" translate>Description</label>\n            <input\n              id=\"softwareDescription\"\n              class=\"form-control\"\n              autocomplete=\"off\"\n              name=\"description\"\n              [(ngModel)]=\"model.description\"\n              placeholder=\"{{ 'e.g. Cloud connectivity software' | translate }}\"\n              [disabled]=\"model.selected?.id\"\n              [required]=\"true\"\n            />\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label class=\"control-label\" for=\"softwareDeviceTypeFilter\">\n              {{ 'Device type filter' | translate }}\n              <button\n                class=\"btn-help\"\n                type=\"button\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'If the filter is set, the software will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n              ></button>\n            </label>\n            <input\n              id=\"softwareDeviceTypeFilter\"\n              class=\"form-control\"\n              name=\"softwareDeviceTypeFilter\"\n              [(ngModel)]=\"model.deviceType\"\n              placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n              [disabled]=\"model.selected?.id\"\n            />\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label for=\"softwareType\" translate>Software type</label>\n            <c8y-software-type\n              name=\"softwareType\"\n              [(ngModel)]=\"model.softwareType\"\n              [disabled]=\"model.selected?.id\"\n            ></c8y-software-type>\n          </c8y-form-group>\n        </div>\n\n        <c8y-form-group>\n          <label for=\"softwareVersion\" translate>Version</label>\n          <input\n            id=\"softwareVersion\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            name=\"version\"\n            [(ngModel)]=\"model.version\"\n            placeholder=\"{{ 'e.g.' | translate }} 1.0.0\"\n            [required]=\"true\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <div class=\"legend form-block m-t-40\" translate>Software file</div>\n          <c8y-file-picker\n            [maxAllowedFiles]=\"1\"\n            (onFilesPicked)=\"onFile($event)\"\n            [fileUrlPopover]=\"textForSoftwareUrlPopover\"\n          ></c8y-file-picker>\n        </c8y-form-group>\n      </div>\n    </div>\n    <div class=\"modal-footer\">\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Cancel' | translate }}\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        class=\"btn btn-primary\"\n        type=\"submit\"\n        title=\"{{ 'Add software' | translate }}\"\n        [ngClass]=\"{ 'btn-pending': saving }\"\n        [disabled]=\"\n          !softwareForm.form.valid ||\n          softwareForm.form.pristine ||\n          saving ||\n          (!model.binary?.url && !model.binary?.file)\n        \"\n        c8yProductExperience\n        [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.REPOSITORY\"\n        [actionData]=\"{\n          component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.ADD_SOFTWARE_MODAL,\n          result:\n            softwarePreselected || model.selected?.id\n              ? PRODUCT_EXPERIENCE.SOFTWARE.RESULTS.ADD_SOFTWARE_VERSION\n              : PRODUCT_EXPERIENCE.SOFTWARE.RESULTS.ADD_SOFTWARE\n        }\"\n      >\n        {{ 'Add software' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.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: i4.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i4.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i4.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i4.FilePickerComponent, selector: "c8y-file-picker", inputs: ["maxAllowedFiles", "uploadChoice", "fileUrl", "fileBinary", "config", "filePickerIndex", "fileUrlPopover"], outputs: ["onFilesPicked"] }, { kind: "directive", type: i4.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i2.SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel", "presetSoftwareTypes"], outputs: ["onSelectSoftware"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: AddSoftwareModalComponent, deps: [{ token: i1.BsModalRef }, { token: i1$1.RepositoryService }, { token: i4.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: AddSoftwareModalComponent, selector: "c8y-add-software-software-modal", outputs: { saved: "saved" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["softwareForm"], descendants: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-tools'\"></i>\n    <div class=\"modal-title\" translate id=\"addSoftwareModalTitle\">Add software</div>\n  </div>\n  <div class=\"p-16 text-center separator-bottom\" *ngIf=\"!softwarePreselected\">\n    <p class=\"text-medium text-16\" translate>Select or create new software</p>\n  </div>\n  <form\n    class=\"d-contents\"\n    autocomplete=\"off\"\n    #softwareForm=\"ngForm\"\n    (ngSubmit)=\"softwareForm.form.valid && save()\"\n  >\n    <div class=\"modal-inner-scroll\">\n      <div class=\"modal-body\" id=\"addSoftwareModalDescription\">\n        <div [hidden]=\"softwarePreselected\">\n          <c8y-form-group>\n            <label for=\"softwareName\" translate>Software</label>\n            <c8y-typeahead\n              [(ngModel)]=\"model.selected\"\n              name=\"softwareName\"\n              placeholder=\"{{ 'Select or enter' | translate }}\"\n              (onSearch)=\"onInput.next($event)\"\n              [required]=\"true\"\n            >\n              <c8y-li\n                *c8yFor=\"\n                  let software of softwaresResult;\n                  loadMore: 'auto';\n                  notFound: notFoundTemplate\n                \"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"onSoftwareSelect(software)\"\n                [active]=\"model.selected === software\"\n              >\n                <c8y-highlight\n                  [text]=\"software.name || '--'\"\n                  [pattern]=\"onInput | async\"\n                ></c8y-highlight>\n              </c8y-li>\n              <ng-template #notFoundTemplate>\n                <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"(onInput | async)?.length > 0\">\n                  <span translate>No match found.</span>\n                  <button\n                    class=\"btn btn-primary btn-xs m-l-8\"\n                    type=\"button\"\n                    title=\"{{ 'Add new`software`' | translate }}\"\n                  >\n                    {{ 'Add new`software`' | translate }}\n                  </button>\n                </c8y-li>\n              </ng-template>\n            </c8y-typeahead>\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label for=\"softwareDescription\" translate>Description</label>\n            <input\n              id=\"softwareDescription\"\n              class=\"form-control\"\n              autocomplete=\"off\"\n              name=\"description\"\n              [(ngModel)]=\"model.description\"\n              placeholder=\"{{ 'e.g. Cloud connectivity software' | translate }}\"\n              [disabled]=\"model.selected?.id\"\n              [required]=\"true\"\n            />\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label class=\"control-label\" for=\"softwareDeviceTypeFilter\">\n              {{ 'Device type filter' | translate }}\n              <button\n                class=\"btn-help\"\n                type=\"button\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'If the filter is set, the software will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n              ></button>\n            </label>\n            <input\n              id=\"softwareDeviceTypeFilter\"\n              class=\"form-control\"\n              name=\"softwareDeviceTypeFilter\"\n              [(ngModel)]=\"model.deviceType\"\n              placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n              [disabled]=\"model.selected?.id\"\n            />\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label for=\"softwareType\" translate>Software type</label>\n            <c8y-software-type\n              name=\"softwareType\"\n              [(ngModel)]=\"model.softwareType\"\n              [disabled]=\"model.selected?.id\"\n            ></c8y-software-type>\n          </c8y-form-group>\n        </div>\n\n        <c8y-form-group>\n          <label for=\"softwareVersion\" translate>Version</label>\n          <input\n            id=\"softwareVersion\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            name=\"version\"\n            [(ngModel)]=\"model.version\"\n            placeholder=\"{{ 'e.g.' | translate }} 1.0.0\"\n            [required]=\"true\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <div class=\"legend form-block m-t-40\" translate>Software file</div>\n          <c8y-file-picker\n            [maxAllowedFiles]=\"1\"\n            (onFilesPicked)=\"onFile($event)\"\n            [fileUrlPopover]=\"textForSoftwareUrlPopover\"\n          ></c8y-file-picker>\n        </c8y-form-group>\n      </div>\n    </div>\n    <div class=\"modal-footer\">\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Cancel' | translate }}\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        class=\"btn btn-primary\"\n        type=\"submit\"\n        title=\"{{ 'Add software' | translate }}\"\n        [ngClass]=\"{ 'btn-pending': saving }\"\n        [disabled]=\"\n          !softwareForm.form.valid ||\n          softwareForm.form.pristine ||\n          saving ||\n          (!model.binary?.url && !model.binary?.file)\n        \"\n        c8yProductExperience\n        [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.REPOSITORY\"\n        [actionData]=\"{\n          component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.ADD_SOFTWARE_MODAL,\n          result:\n            softwarePreselected || model.selected?.id\n              ? PRODUCT_EXPERIENCE.SOFTWARE.RESULTS.ADD_SOFTWARE_VERSION\n              : PRODUCT_EXPERIENCE.SOFTWARE.RESULTS.ADD_SOFTWARE\n        }\"\n      >\n        {{ 'Add software' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.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: i4.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i4.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i4.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i4.FilePickerComponent, selector: "c8y-file-picker", inputs: ["maxAllowedFiles", "uploadChoice", "fileUrl", "fileBinary", "config", "filePickerIndex", "fileUrlPopover"], outputs: ["onFilesPicked"] }, { kind: "directive", type: i4.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel", "presetSoftwareTypes"], outputs: ["onSelectSoftware"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: AddSoftwareModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-add-software-software-modal', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-tools'\"></i>\n    <div class=\"modal-title\" translate id=\"addSoftwareModalTitle\">Add software</div>\n  </div>\n  <div class=\"p-16 text-center separator-bottom\" *ngIf=\"!softwarePreselected\">\n    <p class=\"text-medium text-16\" translate>Select or create new software</p>\n  </div>\n  <form\n    class=\"d-contents\"\n    autocomplete=\"off\"\n    #softwareForm=\"ngForm\"\n    (ngSubmit)=\"softwareForm.form.valid && save()\"\n  >\n    <div class=\"modal-inner-scroll\">\n      <div class=\"modal-body\" id=\"addSoftwareModalDescription\">\n        <div [hidden]=\"softwarePreselected\">\n          <c8y-form-group>\n            <label for=\"softwareName\" translate>Software</label>\n            <c8y-typeahead\n              [(ngModel)]=\"model.selected\"\n              name=\"softwareName\"\n              placeholder=\"{{ 'Select or enter' | translate }}\"\n              (onSearch)=\"onInput.next($event)\"\n              [required]=\"true\"\n            >\n              <c8y-li\n                *c8yFor=\"\n                  let software of softwaresResult;\n                  loadMore: 'auto';\n                  notFound: notFoundTemplate\n                \"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"onSoftwareSelect(software)\"\n                [active]=\"model.selected === software\"\n              >\n                <c8y-highlight\n                  [text]=\"software.name || '--'\"\n                  [pattern]=\"onInput | async\"\n                ></c8y-highlight>\n              </c8y-li>\n              <ng-template #notFoundTemplate>\n                <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"(onInput | async)?.length > 0\">\n                  <span translate>No match found.</span>\n                  <button\n                    class=\"btn btn-primary btn-xs m-l-8\"\n                    type=\"button\"\n                    title=\"{{ 'Add new`software`' | translate }}\"\n                  >\n                    {{ 'Add new`software`' | translate }}\n                  </button>\n                </c8y-li>\n              </ng-template>\n            </c8y-typeahead>\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label for=\"softwareDescription\" translate>Description</label>\n            <input\n              id=\"softwareDescription\"\n              class=\"form-control\"\n              autocomplete=\"off\"\n              name=\"description\"\n              [(ngModel)]=\"model.description\"\n              placeholder=\"{{ 'e.g. Cloud connectivity software' | translate }}\"\n              [disabled]=\"model.selected?.id\"\n              [required]=\"true\"\n            />\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label class=\"control-label\" for=\"softwareDeviceTypeFilter\">\n              {{ 'Device type filter' | translate }}\n              <button\n                class=\"btn-help\"\n                type=\"button\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'If the filter is set, the software will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n              ></button>\n            </label>\n            <input\n              id=\"softwareDeviceTypeFilter\"\n              class=\"form-control\"\n              name=\"softwareDeviceTypeFilter\"\n              [(ngModel)]=\"model.deviceType\"\n              placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n              [disabled]=\"model.selected?.id\"\n            />\n          </c8y-form-group>\n\n          <c8y-form-group>\n            <label for=\"softwareType\" translate>Software type</label>\n            <c8y-software-type\n              name=\"softwareType\"\n              [(ngModel)]=\"model.softwareType\"\n              [disabled]=\"model.selected?.id\"\n            ></c8y-software-type>\n          </c8y-form-group>\n        </div>\n\n        <c8y-form-group>\n          <label for=\"softwareVersion\" translate>Version</label>\n          <input\n            id=\"softwareVersion\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            name=\"version\"\n            [(ngModel)]=\"model.version\"\n            placeholder=\"{{ 'e.g.' | translate }} 1.0.0\"\n            [required]=\"true\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <div class=\"legend form-block m-t-40\" translate>Software file</div>\n          <c8y-file-picker\n            [maxAllowedFiles]=\"1\"\n            (onFilesPicked)=\"onFile($event)\"\n            [fileUrlPopover]=\"textForSoftwareUrlPopover\"\n          ></c8y-file-picker>\n        </c8y-form-group>\n      </div>\n    </div>\n    <div class=\"modal-footer\">\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Cancel' | translate }}\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        class=\"btn btn-primary\"\n        type=\"submit\"\n        title=\"{{ 'Add software' | translate }}\"\n        [ngClass]=\"{ 'btn-pending': saving }\"\n        [disabled]=\"\n          !softwareForm.form.valid ||\n          softwareForm.form.pristine ||\n          saving ||\n          (!model.binary?.url && !model.binary?.file)\n        \"\n        c8yProductExperience\n        [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.REPOSITORY\"\n        [actionData]=\"{\n          component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.ADD_SOFTWARE_MODAL,\n          result:\n            softwarePreselected || model.selected?.id\n              ? PRODUCT_EXPERIENCE.SOFTWARE.RESULTS.ADD_SOFTWARE_VERSION\n              : PRODUCT_EXPERIENCE.SOFTWARE.RESULTS.ADD_SOFTWARE\n        }\"\n      >\n        {{ 'Add software' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.RepositoryService }, { type: i4.AlertService }], propDecorators: { form: [{
+        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i1$1.RepositoryService }, { type: i4.AlertService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['softwareForm', { static: false }]
             }], saved: [{
                 type: Output
             }] } });
 
-class SoftwareTypeCellRendererComponent {
-    constructor(context) {
-        this.context = context;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareTypeCellRendererComponent, deps: [{ token: i4.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SoftwareTypeCellRendererComponent, selector: "c8y-software-type-cell-renderer", ngImport: i0, template: "<span *ngIf=\"!!context?.item?.softwareType; else emptyText\" class=\"label label-info\">{{\n  context.item.softwareType\n}}</span>\n<ng-template #emptyText>\n  <small class=\"text-muted\">\n    <em translate>Undefined`software type`</em>\n  </small>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareTypeCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-software-type-cell-renderer', template: "<span *ngIf=\"!!context?.item?.softwareType; else emptyText\" class=\"label label-info\">{{\n  context.item.softwareType\n}}</span>\n<ng-template #emptyText>\n  <small class=\"text-muted\">\n    <em translate>Undefined`software type`</em>\n  </small>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i4.CellRendererContext }] });
-
-class SoftwareTypeFilteringFormRendererComponent {
-    constructor(context, changeDetectorRef, repositoryService, elementRef) {
-        this.context = context;
-        this.changeDetectorRef = changeDetectorRef;
-        this.repositoryService = repositoryService;
-        this.elementRef = elementRef;
-        this.softwareWithType$ = NEVER;
-        this.search$ = new BehaviorSubject(null);
-        this.filterPipe = pipe(tap());
-        this.typeaheadPlaceholder = gettext('Start typing to search, for example, {{ example }}');
-        this.queriesUtil = new QueriesUtil();
-        this.softwareTypes = new Set();
-        this.softwareWithType$ = this.search$.pipe(debounceTime(300), tap(() => this.softwareTypes.clear()), switchMap((searchString) => {
-            let query = this.queriesUtil.prependOrderbys({}, [{ softwareType: 1 }]);
-            const filter = !!searchString
-                ? {
-                    softwareType: {
-                        __eq: `*${searchString}*`
-                    }
-                }
-                : {
-                    __has: 'softwareType'
-                };
-            query = this.queriesUtil.addAndFilter(query, filter);
-            return this.repositoryService.listRepositoryEntries(RepositoryType.SOFTWARE, {
-                skipDefaultOrder: true,
-                query,
-                params: {
-                    pageSize: 200
-                }
-            });
-        }));
-        this.filterPipe = pipe(map(this.removeDuplicatesBySoftwareType.bind(this)), tap(() => this.changeDetectorRef.detectChanges()));
-    }
-    onEnterKeyUp(event) {
-        event.stopPropagation();
-        this.applyFilter();
-    }
-    onEscapeKeyDown(event) {
-        event.stopPropagation();
-        this.context.resetFilter();
-    }
-    ngOnInit() {
-        const column = this.context.property;
-        this.selectedType = cloneDeep(column.externalFilterQuery || {});
-    }
-    ngAfterViewInit() {
-        this.typeahead?.searchControl?.nativeElement?.focus();
-        try {
-            this.elementRef.nativeElement.parentElement.parentElement.style.overflow = 'visible';
-        }
-        catch (ex) {
-            // intentionally empty
-        }
-    }
-    applyFilter() {
-        this.context.applyFilter({
-            externalFilterQuery: this.selectedType
-        });
-    }
-    removeDuplicatesBySoftwareType(list) {
-        const uniqueBySoftwareType = uniqBy(list, 'softwareType').filter((sw) => !this.softwareTypes.has(sw.softwareType));
-        uniqueBySoftwareType.forEach((sw) => this.softwareTypes.add(sw.softwareType));
-        return uniqueBySoftwareType;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareTypeFilteringFormRendererComponent, deps: [{ token: i4.FilteringFormRendererContext }, { token: i0.ChangeDetectorRef }, { token: i2.RepositoryService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SoftwareTypeFilteringFormRendererComponent, selector: "c8y-software-type-filtering-form-renderer", host: { listeners: { "keyup.enter": "onEnterKeyUp($event)", "keydown.escape": "onEscapeKeyDown($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }], ngImport: i0, template: "<c8y-form-group>\n  <label translate>Filter by software type</label>\n  <c8y-typeahead\n    [(ngModel)]=\"selectedType\"\n    name=\"softwareType\"\n    placeholder=\"{{ typeaheadPlaceholder | translate: { example: 'yum' } }}\"\n    displayProperty=\"softwareType\"\n    (onSearch)=\"search$.next($event)\"\n  >\n    <c8y-li\n      *c8yFor=\"let software of softwareWithType$; pipe: filterPipe; loadMore: 'auto'\"\n      class=\"p-l-8 p-r-8 c8y-list__item--link\"\n      (click)=\"\n        selectedType = software; typeahead.dropdown.hide(); changeDetectorRef.detectChanges()\n      \"\n      [active]=\"selectedType?.softwareType === software?.softwareType\"\n    >\n      <c8y-highlight\n        [text]=\"software?.softwareType || '--'\"\n        [pattern]=\"search$.value\"\n      ></c8y-highlight>\n    </c8y-li>\n  </c8y-typeahead>\n</c8y-form-group>\n\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    (click)=\"context.resetFilter()\"\n    title=\"{{ 'Reset' | translate }}\"\n    translate\n  >\n    Reset\n  </button>\n\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    (click)=\"applyFilter()\"\n    title=\"{{ 'Apply' | translate }}\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.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: i4.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i4.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i4.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareTypeFilteringFormRendererComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.Default, selector: 'c8y-software-type-filtering-form-renderer', template: "<c8y-form-group>\n  <label translate>Filter by software type</label>\n  <c8y-typeahead\n    [(ngModel)]=\"selectedType\"\n    name=\"softwareType\"\n    placeholder=\"{{ typeaheadPlaceholder | translate: { example: 'yum' } }}\"\n    displayProperty=\"softwareType\"\n    (onSearch)=\"search$.next($event)\"\n  >\n    <c8y-li\n      *c8yFor=\"let software of softwareWithType$; pipe: filterPipe; loadMore: 'auto'\"\n      class=\"p-l-8 p-r-8 c8y-list__item--link\"\n      (click)=\"\n        selectedType = software; typeahead.dropdown.hide(); changeDetectorRef.detectChanges()\n      \"\n      [active]=\"selectedType?.softwareType === software?.softwareType\"\n    >\n      <c8y-highlight\n        [text]=\"software?.softwareType || '--'\"\n        [pattern]=\"search$.value\"\n      ></c8y-highlight>\n    </c8y-li>\n  </c8y-typeahead>\n</c8y-form-group>\n\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    (click)=\"context.resetFilter()\"\n    title=\"{{ 'Reset' | translate }}\"\n    translate\n  >\n    Reset\n  </button>\n\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    (click)=\"applyFilter()\"\n    title=\"{{ 'Apply' | translate }}\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i4.FilteringFormRendererContext }, { type: i0.ChangeDetectorRef }, { type: i2.RepositoryService }, { type: i0.ElementRef }], propDecorators: { typeahead: [{
-                type: ViewChild,
-                args: [TypeaheadComponent, { static: false }]
-            }], onEnterKeyUp: [{
-                type: HostListener,
-                args: ['keyup.enter', ['$event']]
-            }], onEscapeKeyDown: [{
-                type: HostListener,
-                args: ['keydown.escape', ['$event']]
-            }] } });
-
-class SoftwareTypeGridColumn extends BaseColumn {
-    constructor(initialColumnConfig) {
-        super(initialColumnConfig);
-        this.name = 'type';
-        this.path = 'softwareType';
-        this.header = gettext('Software type');
-        this.cellRendererComponent = SoftwareTypeCellRendererComponent;
-        this.filterable = true;
-        this.filteringFormRendererComponent = SoftwareTypeFilteringFormRendererComponent;
-        this.filteringConfig = {
-            getFilter(model) {
-                const filter = {};
-                if (model.softwareType) {
-                    filter.softwareType = { __eq: model.softwareType };
-                }
-                return filter;
-            }
-        };
-        this.sortable = true;
-        this.sortingConfig = {
-            pathSortingConfigs: [{ path: this.path }]
-        };
-    }
-}
-
 class SoftwareListComponent {
     constructor(repositoryService, gridService, modalService, bsModalService, translateService, alertService, router, activatedRoute) {
         this.repositoryService = repositoryService;
@@ -289,7 +170,13 @@ class SoftwareListComponent {
                 placeholder: gettext('Cloud connectivity software')
             }),
             new DeviceTypeGridColumn({ filterLabel: gettext('Filter software by device type') }),
-            new SoftwareTypeGridColumn(),
+            new TypeGridColumn({
+                header: gettext('Software type'),
+                filterLabel: gettext('Filter by software type'),
+                example: 'yum',
+                path: 'softwareType',
+                repositoryType: RepositoryType.SOFTWARE
+            }),
             new VersionsGridColumn()
         ];
         this.actionControls = [];
@@ -393,13 +280,13 @@ class SoftwareListComponent {
     trackByName(_index, column) {
         return column.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareListComponent, deps: [{ token: i2.RepositoryService }, { token: i4.DataGridService }, { token: i4.ModalService }, { token: i1.BsModalService }, { token: i4$1.TranslateService }, { token: i4.AlertService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareListComponent, deps: [{ token: i1$1.RepositoryService }, { token: i4.DataGridService }, { token: i4.ModalService }, { token: i1.BsModalService }, { token: i4$1.TranslateService }, { token: i4.AlertService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SoftwareListComponent, selector: "c8y-software-list", ngImport: i0, template: "<c8y-title>\n  {{ 'Software repository' | translate }}\n</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"c8y-tools\"\n    label=\"{{ 'Software repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add software' | translate }}\"\n    type=\"button\"\n    (click)=\"addSoftware()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add software' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-software\"\n></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"'Software' | translate\"\n    [refresh]=\"refresh$\"\n    [pagination]=\"pagination\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [infiniteScroll]=\"'auto'\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'c8y-tools'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary\"\n          [title]=\"'Add software' | translate\"\n          type=\"button\"\n          (click)=\"addSoftware()\"\n        >\n          {{ 'Add software' | translate }}\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n    <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n      <c8y-column [name]=\"column.name\"></c8y-column>\n    </ng-container>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i4.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i4.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i4.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i4.EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: i4.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: i4.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i4.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-software-list', template: "<c8y-title>\n  {{ 'Software repository' | translate }}\n</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"c8y-tools\"\n    label=\"{{ 'Software repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add software' | translate }}\"\n    type=\"button\"\n    (click)=\"addSoftware()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add software' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-software\"\n></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"'Software' | translate\"\n    [refresh]=\"refresh$\"\n    [pagination]=\"pagination\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [infiniteScroll]=\"'auto'\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'c8y-tools'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary\"\n          [title]=\"'Add software' | translate\"\n          type=\"button\"\n          (click)=\"addSoftware()\"\n        >\n          {{ 'Add software' | translate }}\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n    <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n      <c8y-column [name]=\"column.name\"></c8y-column>\n    </ng-container>\n  </c8y-data-grid>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i2.RepositoryService }, { type: i4.DataGridService }, { type: i4.ModalService }, { type: i1.BsModalService }, { type: i4$1.TranslateService }, { type: i4.AlertService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1$1.RepositoryService }, { type: i4.DataGridService }, { type: i4.ModalService }, { type: i1.BsModalService }, { type: i4$1.TranslateService }, { type: i4.AlertService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }] });
 
 class SoftwareDetailsComponent {
     constructor(activatedRoute, inventoryService, repositoryService, alertService, translateService, modalService, bsModalService, gainsightService, router) {
@@ -501,8 +388,8 @@ class SoftwareDetailsComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareDetailsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.InventoryService }, { token: i2.RepositoryService }, { token: i4.AlertService }, { token: i4$1.TranslateService }, { token: i4.ModalService }, { token: i1.BsModalService }, { token: i4.GainsightService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SoftwareDetailsComponent, selector: "c8y-software-details", viewQueries: [{ propertyName: "softwareType", first: true, predicate: SoftwareTypeComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ (software$ | async)?.name }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Management' | translate }}\"\n    icon=\"c8y-management\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    path=\"#/software\"\n    label=\"{{ 'Software repository' | translate }}\"\n    icon=\"c8y-tools\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    label=\"{{ (software$ | async)?.name }}\"\n    icon=\"c8y-tools\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Add software' | translate }}\"\n    (click)=\"addBaseVersion()\"\n    *ngIf=\"!(isLegacy$ | async)\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add software' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading$ | async }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <div class=\"card card--fullpage\">\n      <div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24 overflow-visible\">\n        <div class=\"content-flex-70\">\n          <div class=\"text-center\">\n            <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-tools\"></i>\n            <p>\n              <small class=\"label label-info\">Software</small>\n            </p>\n          </div>\n          <div class=\"flex-grow col-10\">\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Name' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #nameInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.name\"\n                      #nameModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g. My software' | translate }}\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.name?.length + 2 || 31 }\"\n                      required\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"updateSoftware$.next({ name: nameInput.value }); nameModel.reset()\"\n                        [disabled]=\"nameInput.value.length === 0\"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Description' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #descriptionInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.description\"\n                      #descriptionModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g. Cloud connectivity software' | translate }}\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.description?.length + 2 || 31 }\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"\n                          updateSoftware$.next({ description: descriptionInput.value });\n                          descriptionModel.reset()\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Device type' | translate }}\n                    <button\n                      class=\"btn-help\"\n                      type=\"button\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'If the filter is set, the software will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'\n                          | translate\n                      }}\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                    >\n                      <i c8yIcon=\"question-circle-o\"></i>\n                    </button>\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #deviceTypeInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.c8y_Filter?.type\"\n                      #deviceTypeModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.type?.length + 2 || 31 }\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"\n                          updateSoftware$.next({ c8y_Filter: { type: deviceTypeInput.value } });\n                          deviceTypeModel.reset()\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Software type' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <c8y-software-type\n                      [softwareTypeMO]=\"softwareTypeObject\"\n                      [style]=\"{ 'width.ch': softwareTypeObject?.softwareType?.length + 2 || 31 }\"\n                      (onSelectSoftware)=\"onSelectSoftwareType($event)\"\n                    ></c8y-software-type>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        [ngClass]=\"isSoftwareTypeChanged ? '' : 'hidden'\"\n                        [disabled]=\"softwareTypeObject?.softwareType === ''\"\n                        (click)=\"\n                          updateSoftware$.next({ softwareType: softwareTypeObject.softwareType });\n                          softwareType.resetInput();\n                          isSoftwareTypeChanged = false\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"inner-scroll\">\n        <div class=\"card-header separator-top-bottom sticky-top bg-component\">\n          <div\n            class=\"card-title\"\n            translate\n          >\n            Versions\n          </div>\n        </div>\n\n        <div class=\"card-block p-t-0 p-b-24\">\n          <c8y-ui-empty-state\n            *ngIf=\"(baseVersions$ | async)?.data.length === 0\"\n            [icon]=\"'c8y-tools'\"\n            [title]=\"'No versions to display.' | translate\"\n            [subtitle]=\"'Add a new version by clicking below.' | translate\"\n          >\n            <p>\n              <button\n                class=\"btn btn-primary\"\n                type=\"button\"\n                title=\"{{ 'Add software' | translate }}\"\n                (click)=\"addBaseVersion()\"\n              >\n                {{ 'Add software' | translate }}\n              </button>\n            </p>\n          </c8y-ui-empty-state>\n\n          <c8y-list-group *ngIf=\"(baseVersions$ | async)?.data.length > 0\">\n            <c8y-li\n              *c8yFor=\"let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'\"\n            >\n              <c8y-li-icon>\n                <i c8yIcon=\"c8y-tools\"></i>\n              </c8y-li-icon>\n\n              <c8y-li-body class=\"content-flex-50\">\n                <div class=\"col-4\">\n                  <p\n                    class=\"text-truncate-wrap\"\n                    title=\"{{ baseVersion.c8y_Software.version }}\"\n                  >\n                    {{ baseVersion.c8y_Software.version }}\n                  </p>\n                </div>\n                <div class=\"col-5\">\n                  <p class=\"text-truncate-wrap\">\n                    <span\n                      class=\"text-label-small m-r-8\"\n                      translate\n                    >\n                      File\n                    </span>\n                    <span title=\" {{ getBinaryName$(baseVersion.c8y_Software.url) | async }}\">\n                      <c8y-file-download\n                        url=\"{{ baseVersion.c8y_Software.url }}\"\n                      ></c8y-file-download>\n                    </span>\n                  </p>\n                </div>\n                <div class=\"col-2 d-flex a-i-start\">\n                  <span\n                    *ngIf=\"isLegacy$ | async\"\n                    class=\"label label-warning m-l-auto-sm\"\n                  >\n                    {{ 'Legacy' | translate }}\n                  </span>\n\n                  <div\n                    class=\"fit-h-20\"\n                    *ngIf=\"!(isLegacy$ | async)\"\n                  >\n                    <button\n                      class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n                      type=\"button\"\n                      title=\"{{ 'Delete' | translate }}\"\n                      (click)=\"deleteBaseVersion(baseVersion)\"\n                    >\n                      <i c8yIcon=\"delete\"></i>\n                      {{ 'Delete' | translate }}\n                    </button>\n                  </div>\n                </div>\n                <div\n                  *ngIf=\"!(isLegacy$ | async)\"\n                  class=\"m-l-auto fit-h-20 hidden-xs\"\n                >\n                  <button\n                    class=\"btn btn-dot text-danger showOnHover\"\n                    type=\"button\"\n                    data-cy=\"software-details-component--Delete-button\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [delay]=\"500\"\n                    (click)=\"deleteBaseVersion(baseVersion)\"\n                  >\n                    <i c8yIcon=\"delete\"></i>\n                  </button>\n                </div>\n              </c8y-li-body>\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i4.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i4.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i4.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.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: i4.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i4.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i4.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i4.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i4.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i2.FileDownloadComponent, selector: "c8y-file-download", inputs: ["url"] }, { kind: "component", type: i2.SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel", "presetSoftwareTypes"], outputs: ["onSelectSoftware"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareDetailsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.InventoryService }, { token: i1$1.RepositoryService }, { token: i4.AlertService }, { token: i4$1.TranslateService }, { token: i4.ModalService }, { token: i1.BsModalService }, { token: i4.GainsightService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SoftwareDetailsComponent, selector: "c8y-software-details", viewQueries: [{ propertyName: "softwareType", first: true, predicate: SoftwareTypeComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ (software$ | async)?.name }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Management' | translate }}\"\n    icon=\"c8y-management\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    path=\"#/software\"\n    label=\"{{ 'Software repository' | translate }}\"\n    icon=\"c8y-tools\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    label=\"{{ (software$ | async)?.name }}\"\n    icon=\"c8y-tools\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Add software' | translate }}\"\n    (click)=\"addBaseVersion()\"\n    *ngIf=\"!(isLegacy$ | async)\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add software' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading$ | async }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <div class=\"card card--fullpage\">\n      <div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24 overflow-visible\">\n        <div class=\"content-flex-70\">\n          <div class=\"text-center\">\n            <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-tools\"></i>\n            <p>\n              <small class=\"label label-info\">Software</small>\n            </p>\n          </div>\n          <div class=\"flex-grow col-10\">\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Name' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #nameInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.name\"\n                      #nameModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g. My software' | translate }}\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.name?.length + 2 || 31 }\"\n                      required\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"updateSoftware$.next({ name: nameInput.value }); nameModel.reset()\"\n                        [disabled]=\"nameInput.value.length === 0\"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Description' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #descriptionInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.description\"\n                      #descriptionModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g. Cloud connectivity software' | translate }}\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.description?.length + 2 || 31 }\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"\n                          updateSoftware$.next({ description: descriptionInput.value });\n                          descriptionModel.reset()\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Device type' | translate }}\n                    <button\n                      class=\"btn-help\"\n                      type=\"button\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'If the filter is set, the software will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'\n                          | translate\n                      }}\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                    >\n                      <i c8yIcon=\"question-circle-o\"></i>\n                    </button>\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #deviceTypeInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.c8y_Filter?.type\"\n                      #deviceTypeModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.type?.length + 2 || 31 }\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"\n                          updateSoftware$.next({ c8y_Filter: { type: deviceTypeInput.value } });\n                          deviceTypeModel.reset()\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Software type' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <c8y-software-type\n                      [softwareTypeMO]=\"softwareTypeObject\"\n                      [style]=\"{ 'width.ch': softwareTypeObject?.softwareType?.length + 2 || 31 }\"\n                      (onSelectSoftware)=\"onSelectSoftwareType($event)\"\n                    ></c8y-software-type>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        [ngClass]=\"isSoftwareTypeChanged ? '' : 'hidden'\"\n                        [disabled]=\"softwareTypeObject?.softwareType === ''\"\n                        (click)=\"\n                          updateSoftware$.next({ softwareType: softwareTypeObject.softwareType });\n                          softwareType.resetInput();\n                          isSoftwareTypeChanged = false\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"inner-scroll\">\n        <div class=\"card-header separator-top-bottom sticky-top bg-component\">\n          <div\n            class=\"card-title\"\n            translate\n          >\n            Versions\n          </div>\n        </div>\n\n        <div class=\"card-block p-t-0 p-b-24\">\n          <c8y-ui-empty-state\n            *ngIf=\"(baseVersions$ | async)?.data.length === 0\"\n            [icon]=\"'c8y-tools'\"\n            [title]=\"'No versions to display.' | translate\"\n            [subtitle]=\"'Add a new version by clicking below.' | translate\"\n          >\n            <p>\n              <button\n                class=\"btn btn-primary\"\n                type=\"button\"\n                title=\"{{ 'Add software' | translate }}\"\n                (click)=\"addBaseVersion()\"\n              >\n                {{ 'Add software' | translate }}\n              </button>\n            </p>\n          </c8y-ui-empty-state>\n\n          <c8y-list-group *ngIf=\"(baseVersions$ | async)?.data.length > 0\">\n            <c8y-li\n              *c8yFor=\"let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'\"\n            >\n              <c8y-li-icon>\n                <i c8yIcon=\"c8y-tools\"></i>\n              </c8y-li-icon>\n\n              <c8y-li-body class=\"content-flex-50\">\n                <div class=\"col-4\">\n                  <p\n                    class=\"text-truncate-wrap\"\n                    title=\"{{ baseVersion.c8y_Software.version }}\"\n                  >\n                    {{ baseVersion.c8y_Software.version }}\n                  </p>\n                </div>\n                <div class=\"col-5\">\n                  <p class=\"text-truncate-wrap\">\n                    <span\n                      class=\"text-label-small m-r-8\"\n                      translate\n                    >\n                      File\n                    </span>\n                    <span title=\" {{ getBinaryName$(baseVersion.c8y_Software.url) | async }}\">\n                      <c8y-file-download\n                        url=\"{{ baseVersion.c8y_Software.url }}\"\n                      ></c8y-file-download>\n                    </span>\n                  </p>\n                </div>\n                <div class=\"col-2 d-flex a-i-start\">\n                  <span\n                    *ngIf=\"isLegacy$ | async\"\n                    class=\"label label-warning m-l-auto-sm\"\n                  >\n                    {{ 'Legacy' | translate }}\n                  </span>\n\n                  <div\n                    class=\"fit-h-20\"\n                    *ngIf=\"!(isLegacy$ | async)\"\n                  >\n                    <button\n                      class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n                      type=\"button\"\n                      title=\"{{ 'Delete' | translate }}\"\n                      (click)=\"deleteBaseVersion(baseVersion)\"\n                    >\n                      <i c8yIcon=\"delete\"></i>\n                      {{ 'Delete' | translate }}\n                    </button>\n                  </div>\n                </div>\n                <div\n                  *ngIf=\"!(isLegacy$ | async)\"\n                  class=\"m-l-auto fit-h-20 hidden-xs\"\n                >\n                  <button\n                    class=\"btn btn-dot text-danger showOnHover\"\n                    type=\"button\"\n                    data-cy=\"software-details-component--Delete-button\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [delay]=\"500\"\n                    (click)=\"deleteBaseVersion(baseVersion)\"\n                  >\n                    <i c8yIcon=\"delete\"></i>\n                  </button>\n                </div>\n              </c8y-li-body>\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i4.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i4.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i4.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.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: i4.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i4.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i4.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i4.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i4.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i1$1.FileDownloadComponent, selector: "c8y-file-download", inputs: ["url"] }, { kind: "component", type: i1$1.SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel", "presetSoftwareTypes"], outputs: ["onSelectSoftware"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     memoize(),
@@ -513,7 +400,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-software-details', template: "<c8y-title>\n  {{ (software$ | async)?.name }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Management' | translate }}\"\n    icon=\"c8y-management\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    path=\"#/software\"\n    label=\"{{ 'Software repository' | translate }}\"\n    icon=\"c8y-tools\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    label=\"{{ (software$ | async)?.name }}\"\n    icon=\"c8y-tools\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Add software' | translate }}\"\n    (click)=\"addBaseVersion()\"\n    *ngIf=\"!(isLegacy$ | async)\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add software' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading$ | async }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <div class=\"card card--fullpage\">\n      <div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24 overflow-visible\">\n        <div class=\"content-flex-70\">\n          <div class=\"text-center\">\n            <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-tools\"></i>\n            <p>\n              <small class=\"label label-info\">Software</small>\n            </p>\n          </div>\n          <div class=\"flex-grow col-10\">\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Name' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #nameInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.name\"\n                      #nameModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g. My software' | translate }}\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.name?.length + 2 || 31 }\"\n                      required\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"updateSoftware$.next({ name: nameInput.value }); nameModel.reset()\"\n                        [disabled]=\"nameInput.value.length === 0\"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Description' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #descriptionInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.description\"\n                      #descriptionModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g. Cloud connectivity software' | translate }}\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.description?.length + 2 || 31 }\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"\n                          updateSoftware$.next({ description: descriptionInput.value });\n                          descriptionModel.reset()\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Device type' | translate }}\n                    <button\n                      class=\"btn-help\"\n                      type=\"button\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'If the filter is set, the software will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'\n                          | translate\n                      }}\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                    >\n                      <i c8yIcon=\"question-circle-o\"></i>\n                    </button>\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      #deviceTypeInput\n                      type=\"text\"\n                      class=\"form-control\"\n                      [ngModel]=\"(software$ | async)?.c8y_Filter?.type\"\n                      #deviceTypeModel=\"ngModel\"\n                      placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.type?.length + 2 || 31 }\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        (click)=\"\n                          updateSoftware$.next({ c8y_Filter: { type: deviceTypeInput.value } });\n                          deviceTypeModel.reset()\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Software type' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <c8y-software-type\n                      [softwareTypeMO]=\"softwareTypeObject\"\n                      [style]=\"{ 'width.ch': softwareTypeObject?.softwareType?.length + 2 || 31 }\"\n                      (onSelectSoftware)=\"onSelectSoftwareType($event)\"\n                    ></c8y-software-type>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        type=\"button\"\n                        title=\"{{ 'Save' | translate }}\"\n                        [ngClass]=\"isSoftwareTypeChanged ? '' : 'hidden'\"\n                        [disabled]=\"softwareTypeObject?.softwareType === ''\"\n                        (click)=\"\n                          updateSoftware$.next({ softwareType: softwareTypeObject.softwareType });\n                          softwareType.resetInput();\n                          isSoftwareTypeChanged = false\n                        \"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"inner-scroll\">\n        <div class=\"card-header separator-top-bottom sticky-top bg-component\">\n          <div\n            class=\"card-title\"\n            translate\n          >\n            Versions\n          </div>\n        </div>\n\n        <div class=\"card-block p-t-0 p-b-24\">\n          <c8y-ui-empty-state\n            *ngIf=\"(baseVersions$ | async)?.data.length === 0\"\n            [icon]=\"'c8y-tools'\"\n            [title]=\"'No versions to display.' | translate\"\n            [subtitle]=\"'Add a new version by clicking below.' | translate\"\n          >\n            <p>\n              <button\n                class=\"btn btn-primary\"\n                type=\"button\"\n                title=\"{{ 'Add software' | translate }}\"\n                (click)=\"addBaseVersion()\"\n              >\n                {{ 'Add software' | translate }}\n              </button>\n            </p>\n          </c8y-ui-empty-state>\n\n          <c8y-list-group *ngIf=\"(baseVersions$ | async)?.data.length > 0\">\n            <c8y-li\n              *c8yFor=\"let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'\"\n            >\n              <c8y-li-icon>\n                <i c8yIcon=\"c8y-tools\"></i>\n              </c8y-li-icon>\n\n              <c8y-li-body class=\"content-flex-50\">\n                <div class=\"col-4\">\n                  <p\n                    class=\"text-truncate-wrap\"\n                    title=\"{{ baseVersion.c8y_Software.version }}\"\n                  >\n                    {{ baseVersion.c8y_Software.version }}\n                  </p>\n                </div>\n                <div class=\"col-5\">\n                  <p class=\"text-truncate-wrap\">\n                    <span\n                      class=\"text-label-small m-r-8\"\n                      translate\n                    >\n                      File\n                    </span>\n                    <span title=\" {{ getBinaryName$(baseVersion.c8y_Software.url) | async }}\">\n                      <c8y-file-download\n                        url=\"{{ baseVersion.c8y_Software.url }}\"\n                      ></c8y-file-download>\n                    </span>\n                  </p>\n                </div>\n                <div class=\"col-2 d-flex a-i-start\">\n                  <span\n                    *ngIf=\"isLegacy$ | async\"\n                    class=\"label label-warning m-l-auto-sm\"\n                  >\n                    {{ 'Legacy' | translate }}\n                  </span>\n\n                  <div\n                    class=\"fit-h-20\"\n                    *ngIf=\"!(isLegacy$ | async)\"\n                  >\n                    <button\n                      class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n                      type=\"button\"\n                      title=\"{{ 'Delete' | translate }}\"\n                      (click)=\"deleteBaseVersion(baseVersion)\"\n                    >\n                      <i c8yIcon=\"delete\"></i>\n                      {{ 'Delete' | translate }}\n                    </button>\n                  </div>\n                </div>\n                <div\n                  *ngIf=\"!(isLegacy$ | async)\"\n                  class=\"m-l-auto fit-h-20 hidden-xs\"\n                >\n                  <button\n                    class=\"btn btn-dot text-danger showOnHover\"\n                    type=\"button\"\n                    data-cy=\"software-details-component--Delete-button\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [delay]=\"500\"\n                    (click)=\"deleteBaseVersion(baseVersion)\"\n                  >\n                    <i c8yIcon=\"delete\"></i>\n                  </button>\n                </div>\n              </c8y-li-body>\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$1.InventoryService }, { type: i2.RepositoryService }, { type: i4.AlertService }, { type: i4$1.TranslateService }, { type: i4.ModalService }, { type: i1.BsModalService }, { type: i4.GainsightService }, { type: i1$1.Router }], propDecorators: { softwareType: [{
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2.InventoryService }, { type: i1$1.RepositoryService }, { type: i4.AlertService }, { type: i4$1.TranslateService }, { type: i4.ModalService }, { type: i1.BsModalService }, { type: i4.GainsightService }, { type: i1$2.Router }], propDecorators: { softwareType: [{
                 type: ViewChild,
                 args: [SoftwareTypeComponent, { static: true }]
             }], getBinaryName$: [] } });
@@ -558,11 +445,7 @@ class SoftwareRepositoryListModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareRepositoryListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: SoftwareRepositoryListModule, declarations: [SoftwareListComponent,
-            SoftwareDetailsComponent,
-            AddSoftwareModalComponent,
-            SoftwareTypeCellRendererComponent,
-            SoftwareTypeFilteringFormRendererComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: SoftwareRepositoryListModule, declarations: [SoftwareListComponent, SoftwareDetailsComponent, AddSoftwareModalComponent], imports: [CommonModule,
             CoreModule,
             FormsModule,
             DeviceGridModule,
@@ -592,13 +475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         RouterModule,
                         SharedRepositoryModule
                     ],
-                    declarations: [
-                        SoftwareListComponent,
-                        SoftwareDetailsComponent,
-                        AddSoftwareModalComponent,
-                        SoftwareTypeCellRendererComponent,
-                        SoftwareTypeFilteringFormRendererComponent
-                    ]
+                    declarations: [SoftwareListComponent, SoftwareDetailsComponent, AddSoftwareModalComponent]
                 }]
         }] });
 
@@ -962,13 +839,13 @@ class InstalledSoftwareComponent {
             software: ((item.options || []).find(option => option.obj.id === item.selectedId) || {}).obj
         })), mergeMap(({ item, software }) => from(this.repository.isSoftwareInstalledOnDevice(this.device.id, software)).pipe(map(installed => ({ item, installed })))), tap(({ item }) => updateInstallableList$.next({ object: item })), filter$1(({ installed }) => !!installed));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: InstalledSoftwareComponent, deps: [{ token: i2.RepositoryService }, { token: i1.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: InstalledSoftwareComponent, selector: "c8y-installed-software", inputs: { device: "device", softwareList: "softwareList", deviceSoftwareChanges: "deviceSoftwareChanges", deviceSoftwareChangesInProgress: "deviceSoftwareChangesInProgress", typesQuery: "typesQuery" }, outputs: { changes: "changes", showSoftwareChanges: "showSoftwareChanges" }, viewQueries: [{ propertyName: "alreadyInstalledWarningTemplate", first: true, predicate: ["alreadyInstalledWarning"], descendants: true, static: true }, { propertyName: "loadingTemplate", first: true, predicate: ["loading"], descendants: true, static: true }, { propertyName: "softwareTypeTemplate", first: true, predicate: ["softwareType"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"d-flex d-col flex-grow\">\n  <div class=\"card-header large-padding separator sticky-top\">\n    <div\n      class=\"card-title\"\n      translate\n    >\n      Installed software\n    </div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      class=\"card-block large-padding overflow-visible separator-bottom\"\n      *ngIf=\"showFilter\"\n    >\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <div class=\"input-group input-group-search\">\n            <label\n              class=\"sr-only\"\n              for=\"filter\"\n            >\n              {{ 'Filter\u2026' | translate }}\n            </label>\n            <input\n              class=\"form-control\"\n              title=\"{{ 'Filter\u2026' | translate }}\"\n              id=\"filter\"\n              placeholder=\"{{ 'Filter\u2026' | translate }}\"\n              type=\"search\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i\n                c8yIcon=\"search\"\n                *ngIf=\"(textFilter$ | async).length === 0\"\n              ></i>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                *ngIf=\"(textFilter$ | async).length > 0\"\n                (click)=\"textFilter$.next('')\"\n              ></i>\n            </span>\n            <span\n              class=\"sr-only\"\n              for=\"search\"\n              translate\n            >\n              Filter\u2026\n            </span>\n          </div>\n        </div>\n        <div class=\"col-xs-6\">\n          <c8y-software-type\n            [required]=\"false\"\n            [emitResultsOnly]=\"true\"\n            [showBtnInNotFoundMessage]=\"false\"\n            [allowFreeEntries]=\"false\"\n            [placeholder]=\"'Filter by software type\u2026' | translate\"\n            [showClearSelectionOption]=\"true\"\n            [presetSoftwareTypes]=\"device.c8y_SupportedSoftwareTypes\"\n            (onSelectSoftware)=\"softwareTypeFilter$.next($event?.softwareType)\"\n          ></c8y-software-type>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      class=\"flex-grow inner-scroll\"\n      id=\"software-list\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n    >\n      <!-- NOT EMPTY STATE -->\n      <c8y-device-software-list\n        class=\"d-block p-l-16 p-r-16\"\n        container=\"body\"\n        [device]=\"device\"\n        [filterCriteria$]=\"filterCriteria$\"\n        [softwareList]=\"softwareList\"\n        [deviceSoftwareChanges]=\"deviceSoftwareChanges\"\n        (update)=\"updateSoftware($event)\"\n        (remove)=\"removeSoftware($event)\"\n        (onListEmpty)=\"showFilter = !$event\"\n      >\n        <!-- EMPTY STATE -->\n        <div class=\"c8y-empty-state text-center\">\n          <div class=\"h1 c8y-icon c8y-icon-tools c8y-icon-duocolor\"></div>\n          <p>\n            <strong translate>No software installed.</strong>\n            <br />\n            <small translate>Click below to install software into this device.</small>\n          </p>\n        </div>\n        <!-- NO SEARCH RESULTS STATE -->\n        <div class=\"c8y-empty-state c8y-no-results-state text-center\">\n          <div class=\"h1 c8y-icon c8y-icon-tools c8y-icon-duocolor\"></div>\n          <p>\n            <strong translate>No software matches your filter criteria.</strong>\n            <br />\n            <small translate>Try changing your search criteria.</small>\n          </p>\n        </div>\n      </c8y-device-software-list>\n    </fieldset>\n  </div>\n  <!-- INSTALL SOFTWARE-->\n  <div\n    class=\"card-footer large-padding separator sticky-bottom d-flex j-c-between bg-level-0\"\n    [ngClass]=\"{ 'visible-sm visible-xs': !supportsSoftwareOperations }\"\n  >\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Install software' | translate }}\"\n      *ngIf=\"supportsSoftwareOperations\"\n      (click)=\"installSoftware()\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_LIST,\n        action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.OPEN_INSTALL_SOFTWARE\n      }\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Install software' | translate }}\n    </button>\n    <button\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Show &quot;Software changes&quot;' | translate\"\n      (click)=\"showSoftwareChanges.emit()\"\n    >\n      <span translate>Show \"Software changes\"</span>\n      <i c8yIcon=\"chevron-right\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template\n  #alreadyInstalledWarning\n  let-item\n  let-option=\"option\"\n>\n  <i\n    class=\"text-warning a-s-center\"\n    c8yIcon=\"warning\"\n    [tooltip]=\"\n      alreadyInstalledMessage\n        | translate: { name: item.body[0].value, version: option.body[0].value }\n    \"\n  ></i>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"p-relative d-flex m-l-auto\">\n    <i\n      class=\"icon-spin\"\n      c8yIcon=\"circle-o-notch\"\n    ></i>\n  </div>\n</ng-template>\n\n<ng-template #softwareType>\n  <c8y-software-type\n    additionalFilter\n    [required]=\"false\"\n    [placeholder]=\"'Filter by software type\u2026' | translate\"\n    (onSelectSoftware)=\"search({ softwareType: $event?.softwareType })\"\n    [emitResultsOnly]=\"true\"\n    [showBtnInNotFoundMessage]=\"false\"\n    [allowFreeEntries]=\"false\"\n    [showClearSelectionOption]=\"true\"\n    [presetSoftwareTypes]=\"device.c8y_SupportedSoftwareTypes\"\n  ></c8y-software-type>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i2.SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel", "presetSoftwareTypes"], outputs: ["onSelectSoftware"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: DeviceSoftwareListComponent, selector: "c8y-device-software-list", inputs: ["softwareList", "device", "deviceSoftwareChanges", "filterCriteria$"], outputs: ["update", "remove", "onListEmpty"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: InstalledSoftwareComponent, deps: [{ token: i1$1.RepositoryService }, { token: i1.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: InstalledSoftwareComponent, selector: "c8y-installed-software", inputs: { device: "device", softwareList: "softwareList", deviceSoftwareChanges: "deviceSoftwareChanges", deviceSoftwareChangesInProgress: "deviceSoftwareChangesInProgress", typesQuery: "typesQuery" }, outputs: { changes: "changes", showSoftwareChanges: "showSoftwareChanges" }, viewQueries: [{ propertyName: "alreadyInstalledWarningTemplate", first: true, predicate: ["alreadyInstalledWarning"], descendants: true, static: true }, { propertyName: "loadingTemplate", first: true, predicate: ["loading"], descendants: true, static: true }, { propertyName: "softwareTypeTemplate", first: true, predicate: ["softwareType"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"d-flex d-col flex-grow\">\n  <div class=\"card-header large-padding separator sticky-top\">\n    <div\n      class=\"card-title\"\n      translate\n    >\n      Installed software\n    </div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      class=\"card-block large-padding overflow-visible separator-bottom\"\n      *ngIf=\"showFilter\"\n    >\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <div class=\"input-group input-group-search\">\n            <label\n              class=\"sr-only\"\n              for=\"filter\"\n            >\n              {{ 'Filter\u2026' | translate }}\n            </label>\n            <input\n              class=\"form-control\"\n              title=\"{{ 'Filter\u2026' | translate }}\"\n              id=\"filter\"\n              placeholder=\"{{ 'Filter\u2026' | translate }}\"\n              type=\"search\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i\n                c8yIcon=\"search\"\n                *ngIf=\"(textFilter$ | async).length === 0\"\n              ></i>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                *ngIf=\"(textFilter$ | async).length > 0\"\n                (click)=\"textFilter$.next('')\"\n              ></i>\n            </span>\n            <span\n              class=\"sr-only\"\n              for=\"search\"\n              translate\n            >\n              Filter\u2026\n            </span>\n          </div>\n        </div>\n        <div class=\"col-xs-6\">\n          <c8y-software-type\n            [required]=\"false\"\n            [emitResultsOnly]=\"true\"\n            [showBtnInNotFoundMessage]=\"false\"\n            [allowFreeEntries]=\"false\"\n            [placeholder]=\"'Filter by software type\u2026' | translate\"\n            [showClearSelectionOption]=\"true\"\n            [presetSoftwareTypes]=\"device.c8y_SupportedSoftwareTypes\"\n            (onSelectSoftware)=\"softwareTypeFilter$.next($event?.softwareType)\"\n          ></c8y-software-type>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      class=\"flex-grow inner-scroll\"\n      id=\"software-list\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n    >\n      <!-- NOT EMPTY STATE -->\n      <c8y-device-software-list\n        class=\"d-block p-l-16 p-r-16\"\n        container=\"body\"\n        [device]=\"device\"\n        [filterCriteria$]=\"filterCriteria$\"\n        [softwareList]=\"softwareList\"\n        [deviceSoftwareChanges]=\"deviceSoftwareChanges\"\n        (update)=\"updateSoftware($event)\"\n        (remove)=\"removeSoftware($event)\"\n        (onListEmpty)=\"showFilter = !$event\"\n      >\n        <!-- EMPTY STATE -->\n        <div class=\"c8y-empty-state text-center\">\n          <div class=\"h1 c8y-icon c8y-icon-tools c8y-icon-duocolor\"></div>\n          <p>\n            <strong translate>No software installed.</strong>\n            <br />\n            <small translate>Click below to install software into this device.</small>\n          </p>\n        </div>\n        <!-- NO SEARCH RESULTS STATE -->\n        <div class=\"c8y-empty-state c8y-no-results-state text-center\">\n          <div class=\"h1 c8y-icon c8y-icon-tools c8y-icon-duocolor\"></div>\n          <p>\n            <strong translate>No software matches your filter criteria.</strong>\n            <br />\n            <small translate>Try changing your search criteria.</small>\n          </p>\n        </div>\n      </c8y-device-software-list>\n    </fieldset>\n  </div>\n  <!-- INSTALL SOFTWARE-->\n  <div\n    class=\"card-footer large-padding separator sticky-bottom d-flex j-c-between bg-level-0\"\n    [ngClass]=\"{ 'visible-sm visible-xs': !supportsSoftwareOperations }\"\n  >\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Install software' | translate }}\"\n      *ngIf=\"supportsSoftwareOperations\"\n      (click)=\"installSoftware()\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_LIST,\n        action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.OPEN_INSTALL_SOFTWARE\n      }\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Install software' | translate }}\n    </button>\n    <button\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Show &quot;Software changes&quot;' | translate\"\n      (click)=\"showSoftwareChanges.emit()\"\n    >\n      <span translate>Show \"Software changes\"</span>\n      <i c8yIcon=\"chevron-right\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template\n  #alreadyInstalledWarning\n  let-item\n  let-option=\"option\"\n>\n  <i\n    class=\"text-warning a-s-center\"\n    c8yIcon=\"warning\"\n    [tooltip]=\"\n      alreadyInstalledMessage\n        | translate: { name: item.body[0].value, version: option.body[0].value }\n    \"\n  ></i>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"p-relative d-flex m-l-auto\">\n    <i\n      class=\"icon-spin\"\n      c8yIcon=\"circle-o-notch\"\n    ></i>\n  </div>\n</ng-template>\n\n<ng-template #softwareType>\n  <c8y-software-type\n    additionalFilter\n    [required]=\"false\"\n    [placeholder]=\"'Filter by software type\u2026' | translate\"\n    (onSelectSoftware)=\"search({ softwareType: $event?.softwareType })\"\n    [emitResultsOnly]=\"true\"\n    [showBtnInNotFoundMessage]=\"false\"\n    [allowFreeEntries]=\"false\"\n    [showClearSelectionOption]=\"true\"\n    [presetSoftwareTypes]=\"device.c8y_SupportedSoftwareTypes\"\n  ></c8y-software-type>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i1$1.SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel", "presetSoftwareTypes"], outputs: ["onSelectSoftware"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: DeviceSoftwareListComponent, selector: "c8y-device-software-list", inputs: ["softwareList", "device", "deviceSoftwareChanges", "filterCriteria$"], outputs: ["update", "remove", "onListEmpty"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: InstalledSoftwareComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-installed-software', template: "<div class=\"d-flex d-col flex-grow\">\n  <div class=\"card-header large-padding separator sticky-top\">\n    <div\n      class=\"card-title\"\n      translate\n    >\n      Installed software\n    </div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      class=\"card-block large-padding overflow-visible separator-bottom\"\n      *ngIf=\"showFilter\"\n    >\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <div class=\"input-group input-group-search\">\n            <label\n              class=\"sr-only\"\n              for=\"filter\"\n            >\n              {{ 'Filter\u2026' | translate }}\n            </label>\n            <input\n              class=\"form-control\"\n              title=\"{{ 'Filter\u2026' | translate }}\"\n              id=\"filter\"\n              placeholder=\"{{ 'Filter\u2026' | translate }}\"\n              type=\"search\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i\n                c8yIcon=\"search\"\n                *ngIf=\"(textFilter$ | async).length === 0\"\n              ></i>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                *ngIf=\"(textFilter$ | async).length > 0\"\n                (click)=\"textFilter$.next('')\"\n              ></i>\n            </span>\n            <span\n              class=\"sr-only\"\n              for=\"search\"\n              translate\n            >\n              Filter\u2026\n            </span>\n          </div>\n        </div>\n        <div class=\"col-xs-6\">\n          <c8y-software-type\n            [required]=\"false\"\n            [emitResultsOnly]=\"true\"\n            [showBtnInNotFoundMessage]=\"false\"\n            [allowFreeEntries]=\"false\"\n            [placeholder]=\"'Filter by software type\u2026' | translate\"\n            [showClearSelectionOption]=\"true\"\n            [presetSoftwareTypes]=\"device.c8y_SupportedSoftwareTypes\"\n            (onSelectSoftware)=\"softwareTypeFilter$.next($event?.softwareType)\"\n          ></c8y-software-type>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      class=\"flex-grow inner-scroll\"\n      id=\"software-list\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n    >\n      <!-- NOT EMPTY STATE -->\n      <c8y-device-software-list\n        class=\"d-block p-l-16 p-r-16\"\n        container=\"body\"\n        [device]=\"device\"\n        [filterCriteria$]=\"filterCriteria$\"\n        [softwareList]=\"softwareList\"\n        [deviceSoftwareChanges]=\"deviceSoftwareChanges\"\n        (update)=\"updateSoftware($event)\"\n        (remove)=\"removeSoftware($event)\"\n        (onListEmpty)=\"showFilter = !$event\"\n      >\n        <!-- EMPTY STATE -->\n        <div class=\"c8y-empty-state text-center\">\n          <div class=\"h1 c8y-icon c8y-icon-tools c8y-icon-duocolor\"></div>\n          <p>\n            <strong translate>No software installed.</strong>\n            <br />\n            <small translate>Click below to install software into this device.</small>\n          </p>\n        </div>\n        <!-- NO SEARCH RESULTS STATE -->\n        <div class=\"c8y-empty-state c8y-no-results-state text-center\">\n          <div class=\"h1 c8y-icon c8y-icon-tools c8y-icon-duocolor\"></div>\n          <p>\n            <strong translate>No software matches your filter criteria.</strong>\n            <br />\n            <small translate>Try changing your search criteria.</small>\n          </p>\n        </div>\n      </c8y-device-software-list>\n    </fieldset>\n  </div>\n  <!-- INSTALL SOFTWARE-->\n  <div\n    class=\"card-footer large-padding separator sticky-bottom d-flex j-c-between bg-level-0\"\n    [ngClass]=\"{ 'visible-sm visible-xs': !supportsSoftwareOperations }\"\n  >\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Install software' | translate }}\"\n      *ngIf=\"supportsSoftwareOperations\"\n      (click)=\"installSoftware()\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_LIST,\n        action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.OPEN_INSTALL_SOFTWARE\n      }\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Install software' | translate }}\n    </button>\n    <button\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Show &quot;Software changes&quot;' | translate\"\n      (click)=\"showSoftwareChanges.emit()\"\n    >\n      <span translate>Show \"Software changes\"</span>\n      <i c8yIcon=\"chevron-right\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template\n  #alreadyInstalledWarning\n  let-item\n  let-option=\"option\"\n>\n  <i\n    class=\"text-warning a-s-center\"\n    c8yIcon=\"warning\"\n    [tooltip]=\"\n      alreadyInstalledMessage\n        | translate: { name: item.body[0].value, version: option.body[0].value }\n    \"\n  ></i>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"p-relative d-flex m-l-auto\">\n    <i\n      class=\"icon-spin\"\n      c8yIcon=\"circle-o-notch\"\n    ></i>\n  </div>\n</ng-template>\n\n<ng-template #softwareType>\n  <c8y-software-type\n    additionalFilter\n    [required]=\"false\"\n    [placeholder]=\"'Filter by software type\u2026' | translate\"\n    (onSelectSoftware)=\"search({ softwareType: $event?.softwareType })\"\n    [emitResultsOnly]=\"true\"\n    [showBtnInNotFoundMessage]=\"false\"\n    [allowFreeEntries]=\"false\"\n    [showClearSelectionOption]=\"true\"\n    [presetSoftwareTypes]=\"device.c8y_SupportedSoftwareTypes\"\n  ></c8y-software-type>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i2.RepositoryService }, { type: i1.BsModalService }], propDecorators: { device: [{
+        }], ctorParameters: () => [{ type: i1$1.RepositoryService }, { type: i1.BsModalService }], propDecorators: { device: [{
                 type: Input
             }], softwareList: [{
                 type: Input
@@ -1094,13 +971,13 @@ class SoftwareDeviceTabComponent {
     isInProgress(operation) {
         return (operation && [OperationStatus.PENDING, OperationStatus.EXECUTING].includes(operation.status));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareDeviceTabComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.RepositoryService }, { token: i2$1.InventoryService }, { token: DeviceSoftwareService }, { token: i4.ServiceRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareDeviceTabComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$1.RepositoryService }, { token: i2.InventoryService }, { token: DeviceSoftwareService }, { token: i4.ServiceRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SoftwareDeviceTabComponent, selector: "c8y-software-device-tab", ngImport: i0, template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadDevice()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card split-view--7-5 m-b-0\">\n  <c8y-installed-software\n    class=\"split-view__list\"\n    [device]=\"device$ | async\"\n    [typesQuery]=\"typesQuery$ | async\"\n    [softwareList]=\"list$ | async\"\n    [deviceSoftwareChanges]=\"changes$ | async\"\n    [deviceSoftwareChangesInProgress]=\"changesInProgress$ | async\"\n    (changes)=\"addChanges($event)\"\n    (showSoftwareChanges)=\"showSoftwareChanges = true\"\n  ></c8y-installed-software>\n  <c8y-device-software-changes\n    class=\"bg-level-1 split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': showSoftwareChanges }\"\n    [deviceSoftwareChangesOperation]=\"changesOperation$ | async\"\n    [changes]=\"changes$ | async\"\n    [changesInProgress]=\"changesInProgress$ | async\"\n    (clear)=\"clearChanges()\"\n    (drop)=\"dropChange($event)\"\n    (apply)=\"applyChanges()\"\n    (hideSoftwareChanges)=\"showSoftwareChanges = false\"\n  ></c8y-device-software-changes>\n</div>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: InstalledSoftwareComponent, selector: "c8y-installed-software", inputs: ["device", "softwareList", "deviceSoftwareChanges", "deviceSoftwareChangesInProgress", "typesQuery"], outputs: ["changes", "showSoftwareChanges"] }, { kind: "component", type: DeviceSoftwareChangesComponent, selector: "c8y-device-software-changes", inputs: ["changes", "changesInProgress", "deviceSoftwareChangesOperation"], outputs: ["clear", "drop", "apply", "hideSoftwareChanges"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SoftwareDeviceTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-software-device-tab', template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadDevice()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card split-view--7-5 m-b-0\">\n  <c8y-installed-software\n    class=\"split-view__list\"\n    [device]=\"device$ | async\"\n    [typesQuery]=\"typesQuery$ | async\"\n    [softwareList]=\"list$ | async\"\n    [deviceSoftwareChanges]=\"changes$ | async\"\n    [deviceSoftwareChangesInProgress]=\"changesInProgress$ | async\"\n    (changes)=\"addChanges($event)\"\n    (showSoftwareChanges)=\"showSoftwareChanges = true\"\n  ></c8y-installed-software>\n  <c8y-device-software-changes\n    class=\"bg-level-1 split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': showSoftwareChanges }\"\n    [deviceSoftwareChangesOperation]=\"changesOperation$ | async\"\n    [changes]=\"changes$ | async\"\n    [changesInProgress]=\"changesInProgress$ | async\"\n    (clear)=\"clearChanges()\"\n    (drop)=\"dropChange($event)\"\n    (apply)=\"applyChanges()\"\n    (hideSoftwareChanges)=\"showSoftwareChanges = false\"\n  ></c8y-device-software-changes>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2.RepositoryService }, { type: i2$1.InventoryService }, { type: DeviceSoftwareService }, { type: i4.ServiceRegistry }] });
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$1.RepositoryService }, { type: i2.InventoryService }, { type: DeviceSoftwareService }, { type: i4.ServiceRegistry }] });
 
 class SoftwareDeviceTabGuard {
     constructor() {