@c8y/ngx-components 1024.2.4 → 1024.5.1

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

@@ -3,7 +3,7 @@ import { EventEmitter, Output, ViewChild, Component, Injectable, NgModule, Input
 import * as i1$2 from '@angular/router';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i2 from '@c8y/ngx-components';
-import { ValidationPattern, IconDirective, C8yTranslateDirective, FormGroupComponent, TypeaheadComponent, ForOfDirective, ListItemComponent, HighlightComponent, RequiredInputPlaceholderDirective, FilePickerComponent, ProductExperienceDirective, C8yTranslatePipe, BuiltInActionType, Status, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, ActionBarItemComponent, HelpComponent, DataGridComponent, EmptyStateContextDirective, EmptyStateComponent, ListGroupComponent, ListItemIconComponent, ListItemBodyComponent, memoize, NavigatorNode, hookNavigator, hookRoute, ModalSelectionMode, ViewContext } from '@c8y/ngx-components';
+import { ValidationPattern, IconDirective, C8yTranslateDirective, FormGroupComponent, TypeaheadComponent, ForOfDirective, ListItemComponent, HighlightComponent, RequiredInputPlaceholderDirective, FilePickerComponent, ProductExperienceDirective, C8yTranslatePipe, BuiltInActionType, Status, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, ActionBarItemComponent, HelpComponent, DataGridComponent, EmptyStateContextDirective, EmptyStateComponent, InputGroupEditableComponent, ListGroupComponent, ListItemIconComponent, ListItemBodyComponent, memoize, NavigatorNode, hookNavigator, hookRoute, ModalSelectionMode, ViewContext } from '@c8y/ngx-components';
 import * as i1$1 from '@c8y/ngx-components/repository/shared';
 import { PRODUCT_EXPERIENCE_REPOSITORY_SHARED, RepositoryType, SoftwareTypeComponent, RepositoryItemNameGridColumn, DescriptionGridColumn, DeviceTypeGridColumn, TypeGridColumn, VersionsGridColumn, FileDownloadComponent, SharedRepositoryModule, RepositorySelectModalComponent } from '@c8y/ngx-components/repository/shared';
 import * as i4$1 from '@ngx-translate/core';
@@ -346,6 +346,7 @@ class SoftwareDetailsComponent {
             .subscribe();
         this.software$.pipe(takeUntil(this.destroy$)).subscribe(software => {
             this.softwareTypeObject = software;
+            this.committedSoftwareTypeObject = software;
         });
     }
     getBinaryName$(binaryUrl) {
@@ -406,15 +407,19 @@ class SoftwareDetailsComponent {
         }
     }
     onSelectSoftwareType(software) {
-        this.isSoftwareTypeChanged = !(this.softwareTypeObject?.softwareType === software?.softwareType);
+        this.isSoftwareTypeChanged = !(this.committedSoftwareTypeObject?.softwareType === software?.softwareType);
         this.softwareTypeObject = software;
     }
+    cancelSoftwareTypeChange() {
+        this.softwareTypeObject = this.committedSoftwareTypeObject;
+        this.isSoftwareTypeChanged = false;
+    }
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SoftwareDetailsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.InventoryService }, { token: i1$1.RepositoryService }, { token: i2.AlertService }, { token: i4$1.TranslateService }, { token: i2.ModalService }, { token: i1.BsModalService }, { token: i2.GainsightService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SoftwareDetailsComponent, isStandalone: true, 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    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"c8y-tools\"\n    path=\"#/software\"\n    label=\"{{ 'Software repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"c8y-tools\"\n    label=\"{{ (software$ | async)?.name }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  @if (!(isLegacy$ | async)) {\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add software' | translate }}\"\n      type=\"button\"\n      data-cy=\"c8y-software-details--add-software-btn\"\n      (click)=\"addBaseVersion()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add software' | translate }}\n    </button>\n  }\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\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                      class=\"form-control\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.name?.length + 2 || 31 }\"\n                      placeholder=\"{{ 'e.g. My software' | translate }}\"\n                      type=\"text\"\n                      required\n                      #nameInput\n                      [ngModel]=\"(software$ | async)?.name\"\n                      #nameModel=\"ngModel\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"button\"\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                      class=\"form-control\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.description?.length + 2 || 31 }\"\n                      placeholder=\"{{ 'e.g. Cloud connectivity software' | translate }}\"\n                      type=\"text\"\n                      #descriptionInput\n                      [ngModel]=\"(software$ | async)?.description\"\n                      #descriptionModel=\"ngModel\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"button\"\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                      [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                      type=\"button\"\n                    >\n                      <i c8yIcon=\"question-circle-o\"></i>\n                    </button>\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      class=\"form-control\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.type?.length + 2 || 31 }\"\n                      placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n                      type=\"text\"\n                      #deviceTypeInput\n                      [ngModel]=\"(software$ | async)?.c8y_Filter?.type\"\n                      #deviceTypeModel=\"ngModel\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"button\"\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                      [style]=\"{ 'width.ch': softwareTypeObject?.softwareType?.length + 2 || 31 }\"\n                      [softwareTypeMO]=\"softwareTypeObject\"\n                      (onSelectSoftware)=\"onSelectSoftwareType($event)\"\n                    ></c8y-software-type>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"button\"\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          @if ((baseVersions$ | async)?.data.length === 0) {\n            <c8y-ui-empty-state\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                  title=\"{{ 'Add software' | translate }}\"\n                  type=\"button\"\n                  (click)=\"addBaseVersion()\"\n                >\n                  {{ 'Add software' | translate }}\n                </button>\n              </p>\n            </c8y-ui-empty-state>\n          }\n\n          @if ((baseVersions$ | async)?.data.length > 0) {\n            <c8y-list-group>\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                <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                      @if (baseVersion?.c8y_Software?.url === '') {\n                        <span title=\"{{ 'Provided by device' | translate }}\">\n                          {{ 'Provided by device' | translate }}\n                        </span>\n                      } @else {\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                      }\n                    </p>\n                  </div>\n                  <div class=\"col-2 d-flex a-i-start\">\n                    @if (isLegacy$ | async) {\n                      <span class=\"label label-warning m-l-auto-sm\">\n                        {{ 'Legacy' | translate }}\n                      </span>\n                    }\n                    @if (!(isLegacy$ | async)) {\n                      <div class=\"fit-h-20\">\n                        <button\n                          class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n                          title=\"{{ 'Delete' | translate }}\"\n                          type=\"button\"\n                          (click)=\"deleteBaseVersion(baseVersion)\"\n                        >\n                          <i c8yIcon=\"delete\"></i>\n                          {{ 'Delete' | translate }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                  @if (!(isLegacy$ | async)) {\n                    <div class=\"m-l-auto fit-h-20 hidden-xs\">\n                      <button\n                        class=\"btn btn-dot text-danger showOnHover\"\n                        [attr.aria-label]=\"'Delete' | translate\"\n                        tooltip=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        data-cy=\"software-details-component--Delete-button\"\n                        [delay]=\"500\"\n                        (click)=\"deleteBaseVersion(baseVersion)\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                      </button>\n                    </div>\n                  }\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel", "presetSoftwareTypes"], outputs: ["onSelectSoftware"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: FileDownloadComponent, selector: "c8y-file-download", inputs: ["url"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SoftwareDetailsComponent, isStandalone: true, 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    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"c8y-tools\"\n    path=\"#/software\"\n    label=\"{{ 'Software repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"c8y-tools\"\n    label=\"{{ (software$ | async)?.name }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  @if (!(isLegacy$ | async)) {\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add software' | translate }}\"\n      type=\"button\"\n      data-cy=\"c8y-software-details--add-software-btn\"\n      (click)=\"addBaseVersion()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add software' | translate }}\n    </button>\n  }\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\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                  <c8y-input-group-editable\n                    required\n                    formGroupClass=\"m-b-0\"\n                    [ariaLabel]=\"'Software name' | translate\"\n                    [placeholder]=\"'e.g. My software' | translate\"\n                    [ngModel]=\"(software$ | async)?.name\"\n                    (save)=\"updateSoftware$.next({ name: $event })\"\n                  ></c8y-input-group-editable>\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                  <c8y-input-group-editable\n                    formGroupClass=\"m-b-0\"\n                    [ariaLabel]=\"'Software description' | translate\"\n                    [placeholder]=\"'e.g. Cloud connectivity software' | translate\"\n                    [ngModel]=\"(software$ | async)?.description\"\n                    (save)=\"updateSoftware$.next({ description: $event })\"\n                  ></c8y-input-group-editable>\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                      [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                      type=\"button\"\n                    >\n                      <i c8yIcon=\"question-circle-o\"></i>\n                    </button>\n                  </label>\n                  <c8y-input-group-editable\n                    formGroupClass=\"m-b-0\"\n                    [ariaLabel]=\"'Device type' | translate\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Linux' }\"\n                    [ngModel]=\"(software$ | async)?.c8y_Filter?.type\"\n                    (save)=\"updateSoftware$.next({ c8y_Filter: { type: $event } })\"\n                  ></c8y-input-group-editable>\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\">\n                    <c8y-software-type\n                      [class.ng-dirty]=\"isSoftwareTypeChanged\"\n                      [softwareTypeMO]=\"softwareTypeObject\"\n                      (onSelectSoftware)=\"onSelectSoftwareType($event)\"\n                    ></c8y-software-type>\n                    @if (isSoftwareTypeChanged) {\n                      <div class=\"input-group-btn\">\n                        <button\n                          class=\"btn btn-default\"\n                          [title]=\"'Cancel' | translate\"\n                          [attr.aria-label]=\"'Cancel' | translate\"\n                          type=\"button\"\n                          (click)=\"cancelSoftwareTypeChange()\"\n                        >\n                          <i\n                            c8yIcon=\"times\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                        <button\n                          class=\"m-l-0 btn btn-primary\"\n                          [title]=\"'Save' | translate\"\n                          [attr.aria-label]=\"'Save' | translate\"\n                          type=\"button\"\n                          [disabled]=\"softwareTypeObject?.softwareType === ''\"\n                          (click)=\"\n                            updateSoftware$.next({ softwareType: softwareTypeObject.softwareType });\n                            isSoftwareTypeChanged = false\n                          \"\n                        >\n                          <i\n                            c8yIcon=\"check\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                      </div>\n                    }\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          @if ((baseVersions$ | async)?.data.length === 0) {\n            <c8y-ui-empty-state\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                  title=\"{{ 'Add software' | translate }}\"\n                  type=\"button\"\n                  (click)=\"addBaseVersion()\"\n                >\n                  {{ 'Add software' | translate }}\n                </button>\n              </p>\n            </c8y-ui-empty-state>\n          }\n\n          @if ((baseVersions$ | async)?.data.length > 0) {\n            <c8y-list-group>\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                <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                      @if (baseVersion?.c8y_Software?.url === '') {\n                        <span title=\"{{ 'Provided by device' | translate }}\">\n                          {{ 'Provided by device' | translate }}\n                        </span>\n                      } @else {\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                      }\n                    </p>\n                  </div>\n                  <div class=\"col-2 d-flex a-i-start\">\n                    @if (isLegacy$ | async) {\n                      <span class=\"label label-warning m-l-auto-sm\">\n                        {{ 'Legacy' | translate }}\n                      </span>\n                    }\n                    @if (!(isLegacy$ | async)) {\n                      <div class=\"fit-h-20\">\n                        <button\n                          class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n                          title=\"{{ 'Delete' | translate }}\"\n                          type=\"button\"\n                          (click)=\"deleteBaseVersion(baseVersion)\"\n                        >\n                          <i c8yIcon=\"delete\"></i>\n                          {{ 'Delete' | translate }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                  @if (!(isLegacy$ | async)) {\n                    <div class=\"m-l-auto fit-h-20 hidden-xs\">\n                      <button\n                        class=\"btn btn-dot text-danger showOnHover\"\n                        [attr.aria-label]=\"'Delete' | translate\"\n                        tooltip=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        data-cy=\"software-details-component--Delete-button\"\n                        [delay]=\"500\"\n                        (click)=\"deleteBaseVersion(baseVersion)\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                      </button>\n                    </div>\n                  }\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete"], outputs: ["save", "cancel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: SoftwareTypeComponent, selector: "c8y-software-type", inputs: ["softwareTypeMO", "disabled", "style", "required", "placeholder", "emitResultsOnly", "showBtnInNotFoundMessage", "allowFreeEntries", "showClearSelectionOption", "clearSelectionOptionLabel", "presetSoftwareTypes"], outputs: ["onSelectSoftware"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: FileDownloadComponent, selector: "c8y-file-download", inputs: ["url"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     memoize(),
@@ -432,6 +437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         IconDirective,
                         NgClass,
                         FormGroupComponent,
+                        InputGroupEditableComponent,
                         RequiredInputPlaceholderDirective,
                         FormsModule,
                         NgStyle,
@@ -448,7 +454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         TooltipDirective,
                         AsyncPipe,
                         C8yTranslatePipe
-                    ], template: "<c8y-title>\n  {{ (software$ | async)?.name }}\n</c8y-title>\n\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    path=\"#/software\"\n    label=\"{{ 'Software repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"c8y-tools\"\n    label=\"{{ (software$ | async)?.name }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  @if (!(isLegacy$ | async)) {\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add software' | translate }}\"\n      type=\"button\"\n      data-cy=\"c8y-software-details--add-software-btn\"\n      (click)=\"addBaseVersion()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add software' | translate }}\n    </button>\n  }\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\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                      class=\"form-control\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.name?.length + 2 || 31 }\"\n                      placeholder=\"{{ 'e.g. My software' | translate }}\"\n                      type=\"text\"\n                      required\n                      #nameInput\n                      [ngModel]=\"(software$ | async)?.name\"\n                      #nameModel=\"ngModel\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"button\"\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                      class=\"form-control\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.description?.length + 2 || 31 }\"\n                      placeholder=\"{{ 'e.g. Cloud connectivity software' | translate }}\"\n                      type=\"text\"\n                      #descriptionInput\n                      [ngModel]=\"(software$ | async)?.description\"\n                      #descriptionModel=\"ngModel\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"button\"\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                      [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                      type=\"button\"\n                    >\n                      <i c8yIcon=\"question-circle-o\"></i>\n                    </button>\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      class=\"form-control\"\n                      [ngStyle]=\"{ 'width.ch': (software$ | async)?.type?.length + 2 || 31 }\"\n                      placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n                      type=\"text\"\n                      #deviceTypeInput\n                      [ngModel]=\"(software$ | async)?.c8y_Filter?.type\"\n                      #deviceTypeModel=\"ngModel\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"button\"\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                      [style]=\"{ 'width.ch': softwareTypeObject?.softwareType?.length + 2 || 31 }\"\n                      [softwareTypeMO]=\"softwareTypeObject\"\n                      (onSelectSoftware)=\"onSelectSoftwareType($event)\"\n                    ></c8y-software-type>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"button\"\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          @if ((baseVersions$ | async)?.data.length === 0) {\n            <c8y-ui-empty-state\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                  title=\"{{ 'Add software' | translate }}\"\n                  type=\"button\"\n                  (click)=\"addBaseVersion()\"\n                >\n                  {{ 'Add software' | translate }}\n                </button>\n              </p>\n            </c8y-ui-empty-state>\n          }\n\n          @if ((baseVersions$ | async)?.data.length > 0) {\n            <c8y-list-group>\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                <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                      @if (baseVersion?.c8y_Software?.url === '') {\n                        <span title=\"{{ 'Provided by device' | translate }}\">\n                          {{ 'Provided by device' | translate }}\n                        </span>\n                      } @else {\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                      }\n                    </p>\n                  </div>\n                  <div class=\"col-2 d-flex a-i-start\">\n                    @if (isLegacy$ | async) {\n                      <span class=\"label label-warning m-l-auto-sm\">\n                        {{ 'Legacy' | translate }}\n                      </span>\n                    }\n                    @if (!(isLegacy$ | async)) {\n                      <div class=\"fit-h-20\">\n                        <button\n                          class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n                          title=\"{{ 'Delete' | translate }}\"\n                          type=\"button\"\n                          (click)=\"deleteBaseVersion(baseVersion)\"\n                        >\n                          <i c8yIcon=\"delete\"></i>\n                          {{ 'Delete' | translate }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                  @if (!(isLegacy$ | async)) {\n                    <div class=\"m-l-auto fit-h-20 hidden-xs\">\n                      <button\n                        class=\"btn btn-dot text-danger showOnHover\"\n                        [attr.aria-label]=\"'Delete' | translate\"\n                        tooltip=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        data-cy=\"software-details-component--Delete-button\"\n                        [delay]=\"500\"\n                        (click)=\"deleteBaseVersion(baseVersion)\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                      </button>\n                    </div>\n                  }\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<c8y-title>\n  {{ (software$ | async)?.name }}\n</c8y-title>\n\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    path=\"#/software\"\n    label=\"{{ 'Software repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"c8y-tools\"\n    label=\"{{ (software$ | async)?.name }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  @if (!(isLegacy$ | async)) {\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add software' | translate }}\"\n      type=\"button\"\n      data-cy=\"c8y-software-details--add-software-btn\"\n      (click)=\"addBaseVersion()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add software' | translate }}\n    </button>\n  }\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\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                  <c8y-input-group-editable\n                    required\n                    formGroupClass=\"m-b-0\"\n                    [ariaLabel]=\"'Software name' | translate\"\n                    [placeholder]=\"'e.g. My software' | translate\"\n                    [ngModel]=\"(software$ | async)?.name\"\n                    (save)=\"updateSoftware$.next({ name: $event })\"\n                  ></c8y-input-group-editable>\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                  <c8y-input-group-editable\n                    formGroupClass=\"m-b-0\"\n                    [ariaLabel]=\"'Software description' | translate\"\n                    [placeholder]=\"'e.g. Cloud connectivity software' | translate\"\n                    [ngModel]=\"(software$ | async)?.description\"\n                    (save)=\"updateSoftware$.next({ description: $event })\"\n                  ></c8y-input-group-editable>\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                      [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                      type=\"button\"\n                    >\n                      <i c8yIcon=\"question-circle-o\"></i>\n                    </button>\n                  </label>\n                  <c8y-input-group-editable\n                    formGroupClass=\"m-b-0\"\n                    [ariaLabel]=\"'Device type' | translate\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Linux' }\"\n                    [ngModel]=\"(software$ | async)?.c8y_Filter?.type\"\n                    (save)=\"updateSoftware$.next({ c8y_Filter: { type: $event } })\"\n                  ></c8y-input-group-editable>\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\">\n                    <c8y-software-type\n                      [class.ng-dirty]=\"isSoftwareTypeChanged\"\n                      [softwareTypeMO]=\"softwareTypeObject\"\n                      (onSelectSoftware)=\"onSelectSoftwareType($event)\"\n                    ></c8y-software-type>\n                    @if (isSoftwareTypeChanged) {\n                      <div class=\"input-group-btn\">\n                        <button\n                          class=\"btn btn-default\"\n                          [title]=\"'Cancel' | translate\"\n                          [attr.aria-label]=\"'Cancel' | translate\"\n                          type=\"button\"\n                          (click)=\"cancelSoftwareTypeChange()\"\n                        >\n                          <i\n                            c8yIcon=\"times\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                        <button\n                          class=\"m-l-0 btn btn-primary\"\n                          [title]=\"'Save' | translate\"\n                          [attr.aria-label]=\"'Save' | translate\"\n                          type=\"button\"\n                          [disabled]=\"softwareTypeObject?.softwareType === ''\"\n                          (click)=\"\n                            updateSoftware$.next({ softwareType: softwareTypeObject.softwareType });\n                            isSoftwareTypeChanged = false\n                          \"\n                        >\n                          <i\n                            c8yIcon=\"check\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                      </div>\n                    }\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          @if ((baseVersions$ | async)?.data.length === 0) {\n            <c8y-ui-empty-state\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                  title=\"{{ 'Add software' | translate }}\"\n                  type=\"button\"\n                  (click)=\"addBaseVersion()\"\n                >\n                  {{ 'Add software' | translate }}\n                </button>\n              </p>\n            </c8y-ui-empty-state>\n          }\n\n          @if ((baseVersions$ | async)?.data.length > 0) {\n            <c8y-list-group>\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                <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                      @if (baseVersion?.c8y_Software?.url === '') {\n                        <span title=\"{{ 'Provided by device' | translate }}\">\n                          {{ 'Provided by device' | translate }}\n                        </span>\n                      } @else {\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                      }\n                    </p>\n                  </div>\n                  <div class=\"col-2 d-flex a-i-start\">\n                    @if (isLegacy$ | async) {\n                      <span class=\"label label-warning m-l-auto-sm\">\n                        {{ 'Legacy' | translate }}\n                      </span>\n                    }\n                    @if (!(isLegacy$ | async)) {\n                      <div class=\"fit-h-20\">\n                        <button\n                          class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n                          title=\"{{ 'Delete' | translate }}\"\n                          type=\"button\"\n                          (click)=\"deleteBaseVersion(baseVersion)\"\n                        >\n                          <i c8yIcon=\"delete\"></i>\n                          {{ 'Delete' | translate }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                  @if (!(isLegacy$ | async)) {\n                    <div class=\"m-l-auto fit-h-20 hidden-xs\">\n                      <button\n                        class=\"btn btn-dot text-danger showOnHover\"\n                        [attr.aria-label]=\"'Delete' | translate\"\n                        tooltip=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        data-cy=\"software-details-component--Delete-button\"\n                        [delay]=\"500\"\n                        (click)=\"deleteBaseVersion(baseVersion)\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                      </button>\n                    </div>\n                  }\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2$1.InventoryService }, { type: i1$1.RepositoryService }, { type: i2.AlertService }, { type: i4$1.TranslateService }, { type: i2.ModalService }, { type: i1.BsModalService }, { type: i2.GainsightService }, { type: i1$2.Router }], propDecorators: { softwareType: [{
                 type: ViewChild,
                 args: [SoftwareTypeComponent, { static: true }]