@c8y/ngx-components 1017.0.8 → 1017.0.9

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

@@ -138,10 +138,10 @@ class AddSoftwareModalComponent {
     }
 }
 AddSoftwareModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddSoftwareModalComponent, deps: [{ token: i1.BsModalRef }, { token: i2.RepositoryService }, { token: i4.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-AddSoftwareModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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    <h4 translate id=\"addSoftwareModalTitle\">Add software</h4>\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                    title=\"{{ 'Add new`software`' | translate }}\"\n                    type=\"button\"\n                    class=\"btn btn-primary btn-xs m-l-8\"\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                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                [attr.aria-label]=\"'Help' | translate\"\n                triggers=\"focus\"\n                container=\"body\"\n                placement=\"right\"\n              >\n                <i [c8yIcon]=\"'question-circle-o'\"></i>\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        title=\"{{ 'Cancel' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        title=\"{{ 'Add software' | translate }}\"\n        class=\"btn btn-primary\"\n        type=\"submit\"\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { 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", "fileUrlPopover"], outputs: ["onFilesPicked"] }, { kind: "directive", type: i4.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { 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"], outputs: ["onSelectSoftware"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] });
+AddSoftwareModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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                    title=\"{{ 'Add new`software`' | translate }}\"\n                    type=\"button\"\n                    class=\"btn btn-primary btn-xs m-l-8\"\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                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                [attr.aria-label]=\"'Help' | translate\"\n                triggers=\"focus\"\n                container=\"body\"\n                placement=\"right\"\n              >\n                <i [c8yIcon]=\"'question-circle-o'\"></i>\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        title=\"{{ 'Cancel' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        title=\"{{ 'Add software' | translate }}\"\n        class=\"btn btn-primary\"\n        type=\"submit\"\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { 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", "fileUrlPopover"], outputs: ["onFilesPicked"] }, { kind: "directive", type: i4.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { 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"], outputs: ["onSelectSoftware"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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    <h4 translate id=\"addSoftwareModalTitle\">Add software</h4>\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                    title=\"{{ 'Add new`software`' | translate }}\"\n                    type=\"button\"\n                    class=\"btn btn-primary btn-xs m-l-8\"\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                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                [attr.aria-label]=\"'Help' | translate\"\n                triggers=\"focus\"\n                container=\"body\"\n                placement=\"right\"\n              >\n                <i [c8yIcon]=\"'question-circle-o'\"></i>\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        title=\"{{ 'Cancel' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        title=\"{{ 'Add software' | translate }}\"\n        class=\"btn btn-primary\"\n        type=\"submit\"\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" }]
+            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                    title=\"{{ 'Add new`software`' | translate }}\"\n                    type=\"button\"\n                    class=\"btn btn-primary btn-xs m-l-8\"\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                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                [attr.aria-label]=\"'Help' | translate\"\n                triggers=\"focus\"\n                container=\"body\"\n                placement=\"right\"\n              >\n                <i [c8yIcon]=\"'question-circle-o'\"></i>\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        title=\"{{ 'Cancel' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        title=\"{{ 'Add software' | translate }}\"\n        class=\"btn btn-primary\"\n        type=\"submit\"\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: function () { return [{ type: i1.BsModalRef }, { type: i2.RepositoryService }, { type: i4.AlertService }]; }, propDecorators: { form: [{
                 type: ViewChild,
                 args: ['softwareForm', { static: false }]
@@ -858,10 +858,10 @@ class DeviceSoftwareListComponent {
     }
 }
 DeviceSoftwareListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DeviceSoftwareListComponent, deps: [{ token: i2.AdvancedSoftwareService }], target: i0.ɵɵFactoryTarget.Component });
-DeviceSoftwareListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DeviceSoftwareListComponent, selector: "c8y-device-software-list", inputs: { softwareList: "softwareList", device: "device", deviceSoftwareChanges: "deviceSoftwareChanges", filterCriteria$: "filterCriteria$" }, outputs: { update: "update", remove: "remove", onListEmpty: "onListEmpty" }, ngImport: i0, template: "<c8y-list-group class=\"no-border-last\">\n  <c8y-li\n    [ngClass]=\"{ disabled: isSoftwareGoingToBeChanged(software) }\"\n    *c8yFor=\"let software of softwareItems$\"\n  >\n    <!-- SOFTWARE ICON -->\n    <c8y-li-icon>\n      <i c8yIcon=\"c8y-tools\"></i>\n    </c8y-li-icon>\n\n    <c8y-li-body class=\"content-flex-20\">\n      <div title=\"{{ software.name }}\" class=\"col-9\">\n        <p class=\"d-flex\">\n          <!-- SOFTWARE NAME -->\n          <span class=\"text-truncate\">\n            {{ software.name }}\n          </span>\n          <!-- SOFTWARE TYPE-->\n          <span class=\"text-truncate\">\n            <span class=\"label label-primary m-l-8\">{{ software.softwareType }}</span>\n          </span>\n        </p>\n        <!-- SOFTWARE VERSION -->\n        <p class=\"d-flex a-i-center\">\n          <span class=\"text-truncate text-label-small m-r-4\" translate>Version</span>\n          <span class=\"text-truncate m-r-4\" title=\"{{ software.version }}\">\n            {{ software.version }}\n          </span>\n          <i\n            *ngIf=\"software.installed\"\n            c8yIcon=\"warning\"\n            class=\"text-warning a-s-center\"\n            [tooltip]=\"\n              alreadyInstalledMessage\n                | translate: { name: software.name, version: software.version }\n            \"\n            container=\"body\"\n            placement=\"top\"\n            [delay]=\"500\"\n          ></i>\n        </p>\n      </div>\n\n      <div\n        *ngIf=\"supportsSoftwareOperations && (showUpdate || showRemove)\"\n        class=\"col-3 text-right m-0 flex-grow d-flex a-i-center\"\n      >\n        <!-- UPDATE SOFTWARE -->\n        <button\n          *ngIf=\"showUpdate && !isSoftwareGoingToBeChanged(software)\"\n          class=\"btn btn-default btn-xs showOnHover m-l-auto m-r-4\"\n          (click)=\"update.emit(software)\"\n          title=\"{{ 'Update`software,verb`' | translate }}\"\n          type=\"button\"\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_UPDATE_SOFTWARE\n          }\"\n        >\n          {{ 'Update`software,verb`' | translate }}\n        </button>\n\n        <!-- REMOVE SOFTWARE -->\n        <button\n          *ngIf=\"showRemove && !isSoftwareGoingToBeChanged(software)\"\n          class=\"btn btn-dot btn-dot--danger showOnHover m-l-4\"\n          (click)=\"remove.emit(software)\"\n          tooltip=\"{{ 'Remove`software,verb`' | translate }}\"\n          [attr.aria-label]=\"'Remove`software,verb`' | translate\"\n          placement=\"bottom\"\n          container=\"body\"\n          [delay]=\"500\"\n          type=\"button\"\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.DELETE_SOFTWARE\n          }\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </c8y-li-body>\n  </c8y-li>\n</c8y-list-group>\n<!-- NO SEARCH RESULTS STATE -->\n<div class=\"card-block\" *ngIf=\"noSearchResults || emptyList\">\n  <ng-content *ngIf=\"emptyList\" select=\".c8y-empty-state:not(.c8y-no-results-state)\"></ng-content>\n  <ng-content *ngIf=\"noSearchResults\" select=\".c8y-no-results-state\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { 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: i4.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { 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: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] });
+DeviceSoftwareListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DeviceSoftwareListComponent, selector: "c8y-device-software-list", inputs: { softwareList: "softwareList", device: "device", deviceSoftwareChanges: "deviceSoftwareChanges", filterCriteria$: "filterCriteria$" }, outputs: { update: "update", remove: "remove", onListEmpty: "onListEmpty" }, ngImport: i0, template: "<c8y-list-group class=\"no-border-2nd-last\">\n  <c8y-li\n    [ngClass]=\"{ disabled: isSoftwareGoingToBeChanged(software) }\"\n    *c8yFor=\"let software of softwareItems$\"\n  >\n    <!-- SOFTWARE ICON -->\n    <c8y-li-icon>\n      <i c8yIcon=\"c8y-tools\"></i>\n    </c8y-li-icon>\n\n    <c8y-li-body class=\"content-flex-20\">\n      <div title=\"{{ software.name }}\" class=\"col-9\">\n        <p class=\"d-flex\">\n          <!-- SOFTWARE NAME -->\n          <span class=\"text-truncate\">\n            {{ software.name }}\n          </span>\n          <!-- SOFTWARE TYPE-->\n          <span class=\"text-truncate\">\n            <span class=\"label label-primary m-l-8\">{{ software.softwareType }}</span>\n          </span>\n        </p>\n        <!-- SOFTWARE VERSION -->\n        <p class=\"d-flex a-i-center\">\n          <span class=\"text-truncate text-label-small m-r-4\" translate>Version</span>\n          <span class=\"text-truncate m-r-4\" title=\"{{ software.version }}\">\n            {{ software.version }}\n          </span>\n          <i\n            *ngIf=\"software.installed\"\n            c8yIcon=\"warning\"\n            class=\"text-warning a-s-center\"\n            [tooltip]=\"\n              alreadyInstalledMessage\n                | translate: { name: software.name, version: software.version }\n            \"\n            container=\"body\"\n            placement=\"top\"\n            [delay]=\"500\"\n          ></i>\n        </p>\n      </div>\n\n      <div\n        *ngIf=\"supportsSoftwareOperations && (showUpdate || showRemove)\"\n        class=\"col-3 text-right m-0 flex-grow d-flex a-i-center\"\n      >\n        <!-- UPDATE SOFTWARE -->\n        <button\n          *ngIf=\"showUpdate && !isSoftwareGoingToBeChanged(software)\"\n          class=\"btn btn-default btn-xs m-l-auto m-r-4\"\n          (click)=\"update.emit(software)\"\n          title=\"{{ 'Update`software,verb`' | translate }}\"\n          type=\"button\"\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_UPDATE_SOFTWARE\n          }\"\n        >\n          {{ 'Update`software,verb`' | translate }}\n        </button>\n\n        <!-- REMOVE SOFTWARE -->\n        <button\n          *ngIf=\"showRemove && !isSoftwareGoingToBeChanged(software)\"\n          class=\"btn btn-dot btn-dot--danger m-l-4\"\n          (click)=\"remove.emit(software)\"\n          tooltip=\"{{ 'Remove`software,verb`' | translate }}\"\n          [attr.aria-label]=\"'Remove`software,verb`' | translate\"\n          placement=\"bottom\"\n          container=\"body\"\n          [delay]=\"500\"\n          type=\"button\"\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.DELETE_SOFTWARE\n          }\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </c8y-li-body>\n  </c8y-li>\n</c8y-list-group>\n<!-- NO SEARCH RESULTS STATE -->\n<div class=\"card-block\" *ngIf=\"noSearchResults || emptyList\">\n  <ng-content *ngIf=\"emptyList\" select=\".c8y-empty-state:not(.c8y-no-results-state)\"></ng-content>\n  <ng-content *ngIf=\"noSearchResults\" select=\".c8y-no-results-state\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { 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: i4.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { 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: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DeviceSoftwareListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-device-software-list', template: "<c8y-list-group class=\"no-border-last\">\n  <c8y-li\n    [ngClass]=\"{ disabled: isSoftwareGoingToBeChanged(software) }\"\n    *c8yFor=\"let software of softwareItems$\"\n  >\n    <!-- SOFTWARE ICON -->\n    <c8y-li-icon>\n      <i c8yIcon=\"c8y-tools\"></i>\n    </c8y-li-icon>\n\n    <c8y-li-body class=\"content-flex-20\">\n      <div title=\"{{ software.name }}\" class=\"col-9\">\n        <p class=\"d-flex\">\n          <!-- SOFTWARE NAME -->\n          <span class=\"text-truncate\">\n            {{ software.name }}\n          </span>\n          <!-- SOFTWARE TYPE-->\n          <span class=\"text-truncate\">\n            <span class=\"label label-primary m-l-8\">{{ software.softwareType }}</span>\n          </span>\n        </p>\n        <!-- SOFTWARE VERSION -->\n        <p class=\"d-flex a-i-center\">\n          <span class=\"text-truncate text-label-small m-r-4\" translate>Version</span>\n          <span class=\"text-truncate m-r-4\" title=\"{{ software.version }}\">\n            {{ software.version }}\n          </span>\n          <i\n            *ngIf=\"software.installed\"\n            c8yIcon=\"warning\"\n            class=\"text-warning a-s-center\"\n            [tooltip]=\"\n              alreadyInstalledMessage\n                | translate: { name: software.name, version: software.version }\n            \"\n            container=\"body\"\n            placement=\"top\"\n            [delay]=\"500\"\n          ></i>\n        </p>\n      </div>\n\n      <div\n        *ngIf=\"supportsSoftwareOperations && (showUpdate || showRemove)\"\n        class=\"col-3 text-right m-0 flex-grow d-flex a-i-center\"\n      >\n        <!-- UPDATE SOFTWARE -->\n        <button\n          *ngIf=\"showUpdate && !isSoftwareGoingToBeChanged(software)\"\n          class=\"btn btn-default btn-xs showOnHover m-l-auto m-r-4\"\n          (click)=\"update.emit(software)\"\n          title=\"{{ 'Update`software,verb`' | translate }}\"\n          type=\"button\"\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_UPDATE_SOFTWARE\n          }\"\n        >\n          {{ 'Update`software,verb`' | translate }}\n        </button>\n\n        <!-- REMOVE SOFTWARE -->\n        <button\n          *ngIf=\"showRemove && !isSoftwareGoingToBeChanged(software)\"\n          class=\"btn btn-dot btn-dot--danger showOnHover m-l-4\"\n          (click)=\"remove.emit(software)\"\n          tooltip=\"{{ 'Remove`software,verb`' | translate }}\"\n          [attr.aria-label]=\"'Remove`software,verb`' | translate\"\n          placement=\"bottom\"\n          container=\"body\"\n          [delay]=\"500\"\n          type=\"button\"\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.DELETE_SOFTWARE\n          }\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </c8y-li-body>\n  </c8y-li>\n</c8y-list-group>\n<!-- NO SEARCH RESULTS STATE -->\n<div class=\"card-block\" *ngIf=\"noSearchResults || emptyList\">\n  <ng-content *ngIf=\"emptyList\" select=\".c8y-empty-state:not(.c8y-no-results-state)\"></ng-content>\n  <ng-content *ngIf=\"noSearchResults\" select=\".c8y-no-results-state\"></ng-content>\n</div>\n" }]
+            args: [{ selector: 'c8y-device-software-list', template: "<c8y-list-group class=\"no-border-2nd-last\">\n  <c8y-li\n    [ngClass]=\"{ disabled: isSoftwareGoingToBeChanged(software) }\"\n    *c8yFor=\"let software of softwareItems$\"\n  >\n    <!-- SOFTWARE ICON -->\n    <c8y-li-icon>\n      <i c8yIcon=\"c8y-tools\"></i>\n    </c8y-li-icon>\n\n    <c8y-li-body class=\"content-flex-20\">\n      <div title=\"{{ software.name }}\" class=\"col-9\">\n        <p class=\"d-flex\">\n          <!-- SOFTWARE NAME -->\n          <span class=\"text-truncate\">\n            {{ software.name }}\n          </span>\n          <!-- SOFTWARE TYPE-->\n          <span class=\"text-truncate\">\n            <span class=\"label label-primary m-l-8\">{{ software.softwareType }}</span>\n          </span>\n        </p>\n        <!-- SOFTWARE VERSION -->\n        <p class=\"d-flex a-i-center\">\n          <span class=\"text-truncate text-label-small m-r-4\" translate>Version</span>\n          <span class=\"text-truncate m-r-4\" title=\"{{ software.version }}\">\n            {{ software.version }}\n          </span>\n          <i\n            *ngIf=\"software.installed\"\n            c8yIcon=\"warning\"\n            class=\"text-warning a-s-center\"\n            [tooltip]=\"\n              alreadyInstalledMessage\n                | translate: { name: software.name, version: software.version }\n            \"\n            container=\"body\"\n            placement=\"top\"\n            [delay]=\"500\"\n          ></i>\n        </p>\n      </div>\n\n      <div\n        *ngIf=\"supportsSoftwareOperations && (showUpdate || showRemove)\"\n        class=\"col-3 text-right m-0 flex-grow d-flex a-i-center\"\n      >\n        <!-- UPDATE SOFTWARE -->\n        <button\n          *ngIf=\"showUpdate && !isSoftwareGoingToBeChanged(software)\"\n          class=\"btn btn-default btn-xs m-l-auto m-r-4\"\n          (click)=\"update.emit(software)\"\n          title=\"{{ 'Update`software,verb`' | translate }}\"\n          type=\"button\"\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_UPDATE_SOFTWARE\n          }\"\n        >\n          {{ 'Update`software,verb`' | translate }}\n        </button>\n\n        <!-- REMOVE SOFTWARE -->\n        <button\n          *ngIf=\"showRemove && !isSoftwareGoingToBeChanged(software)\"\n          class=\"btn btn-dot btn-dot--danger m-l-4\"\n          (click)=\"remove.emit(software)\"\n          tooltip=\"{{ 'Remove`software,verb`' | translate }}\"\n          [attr.aria-label]=\"'Remove`software,verb`' | translate\"\n          placement=\"bottom\"\n          container=\"body\"\n          [delay]=\"500\"\n          type=\"button\"\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.DELETE_SOFTWARE\n          }\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </c8y-li-body>\n  </c8y-li>\n</c8y-list-group>\n<!-- NO SEARCH RESULTS STATE -->\n<div class=\"card-block\" *ngIf=\"noSearchResults || emptyList\">\n  <ng-content *ngIf=\"emptyList\" select=\".c8y-empty-state:not(.c8y-no-results-state)\"></ng-content>\n  <ng-content *ngIf=\"noSearchResults\" select=\".c8y-no-results-state\"></ng-content>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i2.AdvancedSoftwareService }]; }, propDecorators: { softwareList: [{
                 type: Input
             }], device: [{
@@ -1077,10 +1077,10 @@ class InstalledSoftwareComponent {
     }
 }
 InstalledSoftwareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: InstalledSoftwareComponent, deps: [{ token: i2.RepositoryService }, { token: i1.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
-InstalledSoftwareComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: InstalledSoftwareComponent, selector: "c8y-installed-software", inputs: { device: "device", softwareList: "softwareList", deviceSoftwareChanges: "deviceSoftwareChanges", deviceSoftwareChangesOperation: "deviceSoftwareChangesOperation", 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 class=\"card-title\" translate>Installed software</div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      id=\"operation-block\"\n      *ngIf=\"deviceSoftwareChangesOperation\"\n      class=\"card-block large-padding bg-level-2 p-0\"\n    >\n      <c8y-operation-details [operation]=\"deviceSoftwareChangesOperation\"></c8y-operation-details>\n    </fieldset>\n    <fieldset class=\"card-block large-padding overflow-visible separator-bottom\" *ngIf=\"showFilter\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              type=\"search\"\n              title=\"{{ 'Filter installed software\u2026' | translate }}\"\n              id=\"filter\"\n              placeholder=\"{{ 'Filter installed software\u2026' | translate }}\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i c8yIcon=\"search\" *ngIf=\"(textFilter$ | async).length === 0\"></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 for=\"filter\" class=\"sr-only\" translate>Filter installed software\u2026</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            (onSelectSoftware)=\"softwareTypeFilter$.next($event?.softwareType)\"\n          ></c8y-software-type>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      id=\"software-list\"\n      class=\"flex-grow inner-scroll\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n    >\n      <!-- NOT EMPTY STATE -->\n      <c8y-device-software-list\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        class=\"d-block p-l-16 p-r-16\"\n        container=\"body\"\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      *ngIf=\"supportsSoftwareOperations\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Install software' | translate }}\"\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      (click)=\"showSoftwareChanges.emit()\"\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Show &quot;Software changes&quot;' | translate\"\n    >\n      <span translate>Show \"Software changes\"</span>\n      <i c8yIcon=\"chevron-right\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template #alreadyInstalledWarning let-item let-option=\"option\">\n  <i\n    c8yIcon=\"warning\"\n    class=\"text-warning a-s-center\"\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 class=\"icon-spin\" c8yIcon=\"circle-o-notch\"></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  ></c8y-software-type>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: i2.SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel"], outputs: ["onSelectSoftware"] }, { kind: "component", type: i6$1.OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { 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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] });
+InstalledSoftwareComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: InstalledSoftwareComponent, selector: "c8y-installed-software", inputs: { device: "device", softwareList: "softwareList", deviceSoftwareChanges: "deviceSoftwareChanges", deviceSoftwareChangesOperation: "deviceSoftwareChangesOperation", 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 class=\"card-title\" translate>Installed software</div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      id=\"operation-block\"\n      *ngIf=\"deviceSoftwareChangesOperation\"\n      class=\"card-block large-padding bg-level-2 p-0\"\n    >\n      <c8y-operation-details [operation]=\"deviceSoftwareChangesOperation\"></c8y-operation-details>\n    </fieldset>\n    <fieldset class=\"card-block large-padding overflow-visible separator-bottom\" *ngIf=\"showFilter\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <div class=\"input-group input-group-search\">\n            <label for=\"filter\" class=\"sr-only\">\n              {{ 'Filter installed software\u2026' | translate }}\n            </label>\n            <input\n              class=\"form-control\"\n              type=\"search\"\n              title=\"{{ 'Filter installed software\u2026' | translate }}\"\n              id=\"filter\"\n              placeholder=\"{{ 'Filter installed software\u2026' | translate }}\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i c8yIcon=\"search\" *ngIf=\"(textFilter$ | async).length === 0\"></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 for=\"filter\" class=\"sr-only\" translate>Filter installed software\u2026</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            (onSelectSoftware)=\"softwareTypeFilter$.next($event?.softwareType)\"\n          ></c8y-software-type>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      id=\"software-list\"\n      class=\"flex-grow inner-scroll\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n    >\n      <!-- NOT EMPTY STATE -->\n      <c8y-device-software-list\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        class=\"d-block p-l-16 p-r-16\"\n        container=\"body\"\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      *ngIf=\"supportsSoftwareOperations\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Install software' | translate }}\"\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      (click)=\"showSoftwareChanges.emit()\"\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Show &quot;Software changes&quot;' | translate\"\n    >\n      <span translate>Show \"Software changes\"</span>\n      <i c8yIcon=\"chevron-right\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template #alreadyInstalledWarning let-item let-option=\"option\">\n  <i\n    c8yIcon=\"warning\"\n    class=\"text-warning a-s-center\"\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 class=\"icon-spin\" c8yIcon=\"circle-o-notch\"></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  ></c8y-software-type>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: i2.SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel"], outputs: ["onSelectSoftware"] }, { kind: "component", type: i6$1.OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { 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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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 class=\"card-title\" translate>Installed software</div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      id=\"operation-block\"\n      *ngIf=\"deviceSoftwareChangesOperation\"\n      class=\"card-block large-padding bg-level-2 p-0\"\n    >\n      <c8y-operation-details [operation]=\"deviceSoftwareChangesOperation\"></c8y-operation-details>\n    </fieldset>\n    <fieldset class=\"card-block large-padding overflow-visible separator-bottom\" *ngIf=\"showFilter\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              type=\"search\"\n              title=\"{{ 'Filter installed software\u2026' | translate }}\"\n              id=\"filter\"\n              placeholder=\"{{ 'Filter installed software\u2026' | translate }}\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i c8yIcon=\"search\" *ngIf=\"(textFilter$ | async).length === 0\"></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 for=\"filter\" class=\"sr-only\" translate>Filter installed software\u2026</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            (onSelectSoftware)=\"softwareTypeFilter$.next($event?.softwareType)\"\n          ></c8y-software-type>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      id=\"software-list\"\n      class=\"flex-grow inner-scroll\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n    >\n      <!-- NOT EMPTY STATE -->\n      <c8y-device-software-list\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        class=\"d-block p-l-16 p-r-16\"\n        container=\"body\"\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      *ngIf=\"supportsSoftwareOperations\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Install software' | translate }}\"\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      (click)=\"showSoftwareChanges.emit()\"\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Show &quot;Software changes&quot;' | translate\"\n    >\n      <span translate>Show \"Software changes\"</span>\n      <i c8yIcon=\"chevron-right\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template #alreadyInstalledWarning let-item let-option=\"option\">\n  <i\n    c8yIcon=\"warning\"\n    class=\"text-warning a-s-center\"\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 class=\"icon-spin\" c8yIcon=\"circle-o-notch\"></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  ></c8y-software-type>\n</ng-template>\n" }]
+            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 class=\"card-title\" translate>Installed software</div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      id=\"operation-block\"\n      *ngIf=\"deviceSoftwareChangesOperation\"\n      class=\"card-block large-padding bg-level-2 p-0\"\n    >\n      <c8y-operation-details [operation]=\"deviceSoftwareChangesOperation\"></c8y-operation-details>\n    </fieldset>\n    <fieldset class=\"card-block large-padding overflow-visible separator-bottom\" *ngIf=\"showFilter\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <div class=\"input-group input-group-search\">\n            <label for=\"filter\" class=\"sr-only\">\n              {{ 'Filter installed software\u2026' | translate }}\n            </label>\n            <input\n              class=\"form-control\"\n              type=\"search\"\n              title=\"{{ 'Filter installed software\u2026' | translate }}\"\n              id=\"filter\"\n              placeholder=\"{{ 'Filter installed software\u2026' | translate }}\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i c8yIcon=\"search\" *ngIf=\"(textFilter$ | async).length === 0\"></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 for=\"filter\" class=\"sr-only\" translate>Filter installed software\u2026</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            (onSelectSoftware)=\"softwareTypeFilter$.next($event?.softwareType)\"\n          ></c8y-software-type>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      id=\"software-list\"\n      class=\"flex-grow inner-scroll\"\n      [disabled]=\"deviceSoftwareChangesInProgress\"\n    >\n      <!-- NOT EMPTY STATE -->\n      <c8y-device-software-list\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        class=\"d-block p-l-16 p-r-16\"\n        container=\"body\"\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      *ngIf=\"supportsSoftwareOperations\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Install software' | translate }}\"\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      (click)=\"showSoftwareChanges.emit()\"\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Show &quot;Software changes&quot;' | translate\"\n    >\n      <span translate>Show \"Software changes\"</span>\n      <i c8yIcon=\"chevron-right\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template #alreadyInstalledWarning let-item let-option=\"option\">\n  <i\n    c8yIcon=\"warning\"\n    class=\"text-warning a-s-center\"\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 class=\"icon-spin\" c8yIcon=\"circle-o-notch\"></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  ></c8y-software-type>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i2.RepositoryService }, { type: i1.BsModalService }]; }, propDecorators: { device: [{
                 type: Input
             }], softwareList: [{