npm - @c8y/ngx-components - Versions diffs - 1023.71.1 → 1023.75.1 - Mend

@c8y/ngx-components 1023.71.1 → 1023.75.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/fesm2022/c8y-ngx-components-device-profile.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ import { get, isEmpty, mapValues, omitBy, keyBy, uniqBy, keys, pickBy, sortBy, t
 import * as i1$1 from '@c8y/ngx-components/repository/shared';
 import { PRODUCT_EXPERIENCE_REPOSITORY_SHARED, RepositoryType, RepositorySelectModalComponent, RepositoryItemNameGridColumn, DeviceTypeGridColumn, SharedRepositoryModule } from '@c8y/ngx-components/repository/shared';
 import { Subject, from, BehaviorSubject, pipe, combineLatest } from 'rxjs';
-import { switchMap, map, take, distinctUntilChanged, shareReplay, filter, tap } from 'rxjs/operators';
+import { switchMap, map, take, distinctUntilChanged, shareReplay, filter, tap, debounceTime } from 'rxjs/operators';
 import { AsyncPipe, NgIf, NgFor, NgTemplateOutlet, NgClass } from '@angular/common';
 import * as i5 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -894,7 +894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class DeviceProfileItemListComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DeviceProfileItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DeviceProfileItemListComponent, isStandalone: true, selector: "c8y-device-profile-item-list", inputs: { icon: "icon", comparisonResults: "comparisonResults", showProfileItems: "showProfileItems", showTextLabel: "showTextLabel" }, ngImport: i0, template: "<div\n  class=\"d-contents\"\n  *ngFor=\"let comparisonResult of comparisonResults\"\n>\n  <div\n    class=\"p-l-16 p-r-16\"\n    *ngIf=\"showProfileItems\"\n  >\n    <div class=\"c8y-list__item fit-h\">\n      <div\n        class=\"c8y-list__item__block\"\n        *ngIf=\"comparisonResult.profile\"\n      >\n        <div class=\"c8y-list__item__icon\">\n          <i [c8yIcon]=\"icon\"></i>\n        </div>\n        <div class=\"c8y-list__item__body\">\n          <ng-container\n            *ngTemplateOutlet=\"comparisonResultInfo; context: comparisonResult.profile\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"p-l-16 p-r-16 bg-level-1\">\n    <div\n      class=\"c8y-list__item bg-level-1\"\n      [ngClass]=\"{\n        'has-warning': !!comparisonResult.comparisonAlert\n      }\"\n    >\n      <div class=\"c8y-list__item__block\">\n        <div class=\"c8y-list__item__icon\">\n          <i [c8yIcon]=\"icon\"></i>\n        </div>\n        <div class=\"c8y-list__item__body\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              comparisonResultInfo;\n              context: comparisonResult.device ? comparisonResult.device : comparisonResult.profile\n            \"\n          ></ng-container>\n          <c8y-messages\n            class=\"m-0\"\n            style=\"margin-bottom: calc(var(--margin-base, 8px) * -1)\"\n            *ngIf=\"comparisonResult.comparisonAlert\"\n          >\n            <c8y-message>\n              {{ comparisonResult.comparisonAlert | translate }}\n            </c8y-message>\n          </c8y-messages>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"p-l-16 p-r-16 bg-level-0 hidden-xs hidden-sm\"\n    *ngIf=\"!showProfileItems\"\n  ></div>\n</div>\n\n<ng-template\n  #comparisonResultInfo\n  let-name=\"itemName\"\n  let-details=\"itemDetails\"\n  let-type=\"itemType\"\n>\n  <div class=\"content-flex-40\">\n    <div class=\"col-5\">\n      <span class=\"text-truncate\">\n        <span class=\"text-label-small m-r-4\">Name</span>\n        <span title=\"{{ name }}\">\n          {{ name }}\n        </span>\n      </span>\n    </div>\n    <div class=\"col-3\">\n      <span\n        class=\"text-truncate\"\n        *ngIf=\"!!type\"\n      >\n        <span class=\"text-label-small m-r-4\">Type</span>\n        <span title=\"{{ type }}\">\n          <span class=\"label label-info m-l-4\">\n            {{ type }}\n          </span>\n        </span>\n      </span>\n    </div>\n    <div class=\"col-4\">\n      <span\n        class=\"text-truncate\"\n        *ngIf=\"showTextLabel && details; else showInfoLabel\"\n      >\n        <span\n          class=\"text-label-small m-r-4\"\n          translate\n        >\n          Version\n        </span>\n        <span title=\"{{ details }}\">{{ details }}</span>\n      </span>\n      <ng-template #showInfoLabel>\n        <span class=\"label label-info\">{{ details }}</span>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DeviceProfileItemListComponent, isStandalone: true, selector: "c8y-device-profile-item-list", inputs: { icon: "icon", comparisonResults: "comparisonResults", showProfileItems: "showProfileItems", showTextLabel: "showTextLabel" }, ngImport: i0, template: "<div\n  class=\"d-contents\"\n  *ngFor=\"let comparisonResult of comparisonResults\"\n>\n  <div\n    class=\"p-l-16 p-r-16\"\n    *ngIf=\"showProfileItems\"\n  >\n    <div class=\"c8y-list__item fit-h\">\n      <div\n        class=\"c8y-list__item__block\"\n        *ngIf=\"comparisonResult.profile\"\n      >\n        <div class=\"c8y-list__item__icon\">\n          <i [c8yIcon]=\"icon\"></i>\n        </div>\n        <div class=\"c8y-list__item__body\">\n          <ng-container\n            *ngTemplateOutlet=\"comparisonResultInfo; context: comparisonResult.profile\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"p-l-16 p-r-16 bg-level-1\">\n    <div\n      class=\"c8y-list__item bg-level-1\"\n      [ngClass]=\"{\n        'has-warning': !!comparisonResult.comparisonAlert\n      }\"\n    >\n      <div class=\"c8y-list__item__block\">\n        <div class=\"c8y-list__item__icon\">\n          <i [c8yIcon]=\"icon\"></i>\n        </div>\n        <div class=\"c8y-list__item__body\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              comparisonResultInfo;\n              context: comparisonResult.device ? comparisonResult.device : comparisonResult.profile\n            \"\n          ></ng-container>\n          <c8y-messages\n            class=\"m-0\"\n            style=\"margin-bottom: calc(var(--margin-base, 8px) * -1)\"\n            *ngIf=\"comparisonResult.comparisonAlert\"\n          >\n            <c8y-message>\n              {{ comparisonResult.comparisonAlert | translate }}\n            </c8y-message>\n          </c8y-messages>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"p-l-16 p-r-16 bg-level-0 hidden-xs hidden-sm\"\n    *ngIf=\"!showProfileItems\"\n  ></div>\n</div>\n\n<ng-template\n  #comparisonResultInfo\n  let-name=\"itemName\"\n  let-details=\"itemDetails\"\n  let-type=\"itemType\"\n>\n  <div class=\"content-flex-40\">\n    <div class=\"col-5\">\n      <span class=\"text-truncate\">\n        <span class=\"text-label-small m-r-4\">Name</span>\n        <span title=\"{{ name }}\">\n          {{ name }}\n        </span>\n      </span>\n    </div>\n    <div class=\"col-3\">\n      <span\n        class=\"text-truncate\"\n        *ngIf=\"!!type\"\n      >\n        <span class=\"text-label-small m-r-4\">Type</span>\n        <span title=\"{{ type }}\">\n          <span class=\"label label-info m-l-4\">\n            {{ type }}\n          </span>\n        </span>\n      </span>\n    </div>\n    <div class=\"col-4\">\n      <span\n        class=\"text-truncate\"\n        *ngIf=\"showTextLabel && details; else showInfoLabel\"\n      >\n        <span\n          class=\"text-label-small m-r-4\"\n          translate\n        >\n          Version\n        </span>\n        <span title=\"{{ details }}\">{{ details }}</span>\n      </span>\n      <ng-template #showInfoLabel>\n        <span class=\"label label-info\">{{ details }}</span>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DeviceProfileItemListComponent, decorators: [{
             type: Component,
@@ -956,18 +956,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 class DeviceTabProfileComponent {
-    constructor(deviceRealtime, deviceProfileService, route, operationRealtime, alertService) {
+    constructor(deviceRealtime, deviceProfileService, route, operationRealtime, alertService, inventoryService) {
         this.deviceRealtime = deviceRealtime;
         this.deviceProfileService = deviceProfileService;
         this.route = route;
         this.operationRealtime = operationRealtime;
         this.alertService = alertService;
+        this.inventoryService = inventoryService;
         this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_DEVICE_PROFILE;
         this.firmwareItems = [];
         this.softwareItems = [];
         this.configurationItems = [];
         this.pattern$ = new BehaviorSubject('');
         this.reload$ = new BehaviorSubject(true);
+        this.autoSyncProfile = true;
+        this.deviceReload$ = new Subject();
         this.productExperienceEvent = {
             eventName: PRODUCT_EXPERIENCE_DEVICE_PROFILE.EVENTS.DEVICE_TAB,
             data: {
@@ -978,6 +981,10 @@ class DeviceTabProfileComponent {
         this.device = this.route.snapshot.parent.data.contextData;
     }
     async ngOnInit() {
+        await this.loadDevice();
+        this.subscribeToDeviceReload();
+        this.subscribeToPatternChanges();
+        this.subscribeToOperations();
         this.getDeviceProfilesAndUpdateProfileItems();
         this.subscribeToManagedObjects();
         const supportedSoftwareTypes = new Set(this.device.c8y_SupportedSoftwareTypes);
@@ -995,19 +1002,23 @@ class DeviceTabProfileComponent {
     }
     async getDeviceProfilesAndUpdateProfileItems() {
         this.deviceProfiles$ = combineLatest([this.reload$.pipe(filter(Boolean)), this.pattern$]).pipe(switchMap(([_, name]) => this.deviceProfileService.getDeviceProfilesByDevice(this.device, name)), tap(async (profiles) => {
-            if (this.device.c8y_Profile) {
+            if (this.autoSyncProfile && this.device.c8y_Profile && !this.pattern$.value) {
                 const profileId = this.device.c8y_Profile.profileId;
-                this.selectedProfile = profiles.data.find(mo => mo.id === profileId);
+                this.selectedProfile = profiles.data.find(({ id }) => id === profileId);
             }
             this.updateProfileItems(this.device, this.selectedProfile);
             this.operation = await this.deviceProfileService.getProfileOperation(this.device.id);
-            this.subscribeToOperations();
         }), tap(() => this.reload$.next(false)), takeUntilDestroyed(this.destroyRef));
     }
     selectProfile(mo) {
+        this.autoSyncProfile = false;
         this.selectedProfile = this.toProfileForDevice(mo);
         this.updateProfileItems(this.device, this.selectedProfile);
     }
+    reload() {
+        this.autoSyncProfile = true;
+        this.reload$.next(true);
+    }
     async createOperation() {
         this.operation = await this.deviceProfileService.createProfileOperation(this.device, this.selectedProfile);
     }
@@ -1016,12 +1027,27 @@ class DeviceTabProfileComponent {
         this.softwareItems = this.deviceProfileService.getSoftwareItems(device, profile);
         this.configurationItems = this.deviceProfileService.getConfigurationItems(device, profile);
     }
+    subscribeToPatternChanges() {
+        this.pattern$.pipe(filter(Boolean), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.autoSyncProfile = false;
+        });
+    }
+    subscribeToDeviceReload() {
+        this.deviceReload$
+            .pipe(debounceTime(100), switchMap(() => from(this.loadDevice())), tap(() => this.updateProfileItems(this.device, this.selectedProfile)), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    async loadDevice() {
+        const device = (await this.inventoryService.detail(this.device.id, { withChildren: false }))
+            .data;
+        this.device = device;
+    }
     subscribeToManagedObjects() {
         this.deviceRealtime
             .onUpdate$(this.device.id)
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((managedObject) => {
-            this.updateProfileItems(managedObject, this.selectedProfile);
+            .subscribe(() => {
+            this.deviceReload$.next();
         });
         this.deviceRealtime
             .onDelete$(this.device.id)
@@ -1054,14 +1080,14 @@ class DeviceTabProfileComponent {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DeviceTabProfileComponent, deps: [{ token: i2.ManagedObjectRealtimeService }, { token: DeviceProfileService }, { token: i5.ActivatedRoute }, { token: i2.OperationRealtimeService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DeviceTabProfileComponent, deps: [{ token: i2.ManagedObjectRealtimeService }, { token: DeviceProfileService }, { token: i5.ActivatedRoute }, { token: i2.OperationRealtimeService }, { token: i2.AlertService }, { token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DeviceTabProfileComponent, isStandalone: true, selector: "c8y-device-tab-profile", providers: [
             ManagedObjectRealtimeService,
             {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => DeviceTabProfileComponent)
             }
-        ], ngImport: i0, template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"reload$.next(true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reload$.value }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n<c8y-action-bar-item [placement]=\"'right'\">\n  <c8y-realtime-btn [service]=\"deviceRealtime\"></c8y-realtime-btn>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid--fullpage card--grid--fullpage card--grid grid__row--2-10--md\">\n  <div class=\"card--grid grid__col--6-6--md\">\n    <!-- AVAILABLE PROFILES -->\n    <div class=\"bg-level-0\">\n      <div class=\"card-header separator\">\n        <div\n          class=\"card-title\"\n          translate\n        >\n          Device profile\n        </div>\n      </div>\n      <div class=\"p-16\">\n        <form #deviceProfileForm=\"ngForm\">\n          <div class=\"input-group\">\n            <c8y-typeahead\n              class=\"flex-grow\"\n              placeholder=\"{{ 'Select device profile' | translate }}\"\n              name=\"selectProfile\"\n              data-cy=\"device-tab-profile--select-device-profile\"\n              [(ngModel)]=\"selectedProfile\"\n              (onSearch)=\"pattern$.next($event)\"\n              [allowFreeEntries]=\"false\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *c8yFor=\"let profile of deviceProfiles$; pipe: filterPipe\"\n                (click)=\"selectProfile(profile); pattern$.next('')\"\n              >\n                <c8y-highlight\n                  [text]=\"profile.name || '&#45;&#45;'\"\n                  [pattern]=\"pattern$.value\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n            <div class=\"input-group-btn\">\n              <button\n                class=\"btn btn-primary\"\n                title=\"{{ 'Assign device profile' | translate }}\"\n                type=\"button\"\n                (click)=\"createOperation()\"\n                data-cy=\"device-tab-profile--Assign-device-profile-button\"\n                [disabled]=\"!selectedProfile?.id\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PRODUCT_EXPERIENCE.ACTIONS.ASSIGN_DEVICE_PROFILE }\"\n              >\n                <span>{{ 'Assign device profile' | translate }}</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- INSTALL PROFILE OPERATION -->\n    <div class=\"bg-level-1\">\n      <div class=\"card-header separator\">\n        <div\n          class=\"card-title\"\n          translate\n        >\n          Currently installed\n        </div>\n      </div>\n      <div class=\"card-block\">\n        <c8y-operation-details\n          [operation]=\"operation\"\n          c8yProductExperience\n          inherit\n          suppressDataOverriding\n        ></c8y-operation-details>\n      </div>\n    </div>\n  </div>\n  <div class=\"card--grid__inner-scroll d-col no-align-items\">\n    <div class=\"d-contents\">\n      <!-- FIRMWARE -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'c8y-firmware'\"\n        [sectionTitle]=\"'Firmware' | translate\"\n        [emptyStateText]=\"'No firmware to display.' | translate\"\n        [emptyStateDetails]=\"'No firmware assigned.' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"firmwareItems\"\n        [isEmpty]=\"!selectedProfile?.c8y_DeviceProfile?.firmware?.name\"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <div class=\"d-contents\">\n      <!-- SOFTWARE -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'c8y-tools'\"\n        [sectionTitle]=\"'Software' | translate\"\n        [emptyStateText]=\"'No software to display.' | translate\"\n        [emptyStateDetails]=\"'No software assigned.' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"softwareItems\"\n        [isEmpty]=\"\n          !selectedProfile?.c8y_DeviceProfile?.software ||\n          selectedProfile?.c8y_DeviceProfile?.software?.length === 0\n        \"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <div class=\"d-contents\">\n      <!-- CONFIGURATION -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'gears'\"\n        [sectionTitle]=\"'Configuration' | translate\"\n        [emptyStateText]=\"'No configuration to display' | translate\"\n        [emptyStateDetails]=\"'No configuration assigned' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"configurationItems\"\n        [isEmpty]=\"\n          !selectedProfile?.c8y_DeviceProfile?.configuration ||\n          selectedProfile?.c8y_DeviceProfile?.configuration?.length === 0\n        \"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <!-- fill in the remanining vertical space when empty -->\n    <div class=\"card--grid grid__col--6-6--md flex-grow\">\n      <div class=\"bg-level-0\"></div>\n      <div class=\"bg-level-1\"></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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: RealtimeButtonComponent, selector: "c8y-realtime-btn", inputs: ["service", "label", "title", "disabled"], outputs: ["onToggle"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { 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: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "component", type: DeviceTabProfileDetailComponent, selector: "c8y-device-tab-profile-detail", inputs: ["sectionTitle", "sectionIcon", "emptyStateText", "emptyStateDetails", "isProfileSelected", "isEmpty", "items", "showTextLabel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"reload()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reload$.value }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n<c8y-action-bar-item [placement]=\"'right'\">\n  <c8y-realtime-btn [service]=\"deviceRealtime\"></c8y-realtime-btn>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid--fullpage card--grid--fullpage card--grid grid__row--2-10--md\">\n  <div class=\"card--grid grid__col--6-6--md\">\n    <!-- AVAILABLE PROFILES -->\n    <div class=\"bg-level-0\">\n      <div class=\"card-header separator\">\n        <div\n          class=\"card-title\"\n          translate\n        >\n          Device profile\n        </div>\n      </div>\n      <div class=\"p-16\">\n        <form #deviceProfileForm=\"ngForm\">\n          <div class=\"input-group\">\n            <c8y-typeahead\n              class=\"flex-grow\"\n              placeholder=\"{{ 'Select device profile' | translate }}\"\n              name=\"selectProfile\"\n              data-cy=\"device-tab-profile--select-device-profile\"\n              [(ngModel)]=\"selectedProfile\"\n              (onSearch)=\"pattern$.next($event)\"\n              [allowFreeEntries]=\"false\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *c8yFor=\"let profile of deviceProfiles$; pipe: filterPipe\"\n                (click)=\"selectProfile(profile); pattern$.next('')\"\n              >\n                <c8y-highlight\n                  [text]=\"profile.name || '&#45;&#45;'\"\n                  [pattern]=\"pattern$.value\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n            <div class=\"input-group-btn\">\n              <button\n                class=\"btn btn-primary\"\n                title=\"{{ 'Assign device profile' | translate }}\"\n                type=\"button\"\n                (click)=\"createOperation()\"\n                data-cy=\"device-tab-profile--Assign-device-profile-button\"\n                [disabled]=\"!selectedProfile?.id\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PRODUCT_EXPERIENCE.ACTIONS.ASSIGN_DEVICE_PROFILE }\"\n              >\n                <span>{{ 'Assign device profile' | translate }}</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- INSTALL PROFILE OPERATION -->\n    <div class=\"bg-level-1\">\n      <div class=\"card-header separator\">\n        <div\n          class=\"card-title\"\n          translate\n        >\n          Currently installed\n        </div>\n      </div>\n      <div class=\"card-block\">\n        <c8y-operation-details\n          [operation]=\"operation\"\n          c8yProductExperience\n          inherit\n          suppressDataOverriding\n        ></c8y-operation-details>\n      </div>\n    </div>\n  </div>\n  <div class=\"card--grid__inner-scroll d-col no-align-items\">\n    <div class=\"d-contents\">\n      <!-- FIRMWARE -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'c8y-firmware'\"\n        [sectionTitle]=\"'Firmware' | translate\"\n        [emptyStateText]=\"'No firmware to display.' | translate\"\n        [emptyStateDetails]=\"'No firmware assigned.' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"firmwareItems\"\n        [isEmpty]=\"!selectedProfile?.c8y_DeviceProfile?.firmware?.name\"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <div class=\"d-contents\">\n      <!-- SOFTWARE -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'c8y-tools'\"\n        [sectionTitle]=\"'Software' | translate\"\n        [emptyStateText]=\"'No software to display.' | translate\"\n        [emptyStateDetails]=\"'No software assigned.' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"softwareItems\"\n        [isEmpty]=\"\n          !selectedProfile?.c8y_DeviceProfile?.software ||\n          selectedProfile?.c8y_DeviceProfile?.software?.length === 0\n        \"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <div class=\"d-contents\">\n      <!-- CONFIGURATION -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'gears'\"\n        [sectionTitle]=\"'Configuration' | translate\"\n        [emptyStateText]=\"'No configuration to display' | translate\"\n        [emptyStateDetails]=\"'No configuration assigned' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"configurationItems\"\n        [isEmpty]=\"\n          !selectedProfile?.c8y_DeviceProfile?.configuration ||\n          selectedProfile?.c8y_DeviceProfile?.configuration?.length === 0\n        \"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <!-- fill in the remanining vertical space when empty -->\n    <div class=\"card--grid grid__col--6-6--md flex-grow\">\n      <div class=\"bg-level-0\"></div>\n      <div class=\"bg-level-1\"></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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: RealtimeButtonComponent, selector: "c8y-realtime-btn", inputs: ["service", "label", "title", "disabled"], outputs: ["onToggle"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { 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: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "component", type: DeviceTabProfileDetailComponent, selector: "c8y-device-tab-profile-detail", inputs: ["sectionTitle", "sectionIcon", "emptyStateText", "emptyStateDetails", "isProfileSelected", "isEmpty", "items", "showTextLabel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DeviceTabProfileComponent, decorators: [{
             type: Component,
@@ -1086,8 +1112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         OperationDetailsComponent,
                         DeviceTabProfileDetailComponent,
                         C8yTranslatePipe
-                    ], template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"reload$.next(true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reload$.value }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n<c8y-action-bar-item [placement]=\"'right'\">\n  <c8y-realtime-btn [service]=\"deviceRealtime\"></c8y-realtime-btn>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid--fullpage card--grid--fullpage card--grid grid__row--2-10--md\">\n  <div class=\"card--grid grid__col--6-6--md\">\n    <!-- AVAILABLE PROFILES -->\n    <div class=\"bg-level-0\">\n      <div class=\"card-header separator\">\n        <div\n          class=\"card-title\"\n          translate\n        >\n          Device profile\n        </div>\n      </div>\n      <div class=\"p-16\">\n        <form #deviceProfileForm=\"ngForm\">\n          <div class=\"input-group\">\n            <c8y-typeahead\n              class=\"flex-grow\"\n              placeholder=\"{{ 'Select device profile' | translate }}\"\n              name=\"selectProfile\"\n              data-cy=\"device-tab-profile--select-device-profile\"\n              [(ngModel)]=\"selectedProfile\"\n              (onSearch)=\"pattern$.next($event)\"\n              [allowFreeEntries]=\"false\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *c8yFor=\"let profile of deviceProfiles$; pipe: filterPipe\"\n                (click)=\"selectProfile(profile); pattern$.next('')\"\n              >\n                <c8y-highlight\n                  [text]=\"profile.name || '&#45;&#45;'\"\n                  [pattern]=\"pattern$.value\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n            <div class=\"input-group-btn\">\n              <button\n                class=\"btn btn-primary\"\n                title=\"{{ 'Assign device profile' | translate }}\"\n                type=\"button\"\n                (click)=\"createOperation()\"\n                data-cy=\"device-tab-profile--Assign-device-profile-button\"\n                [disabled]=\"!selectedProfile?.id\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PRODUCT_EXPERIENCE.ACTIONS.ASSIGN_DEVICE_PROFILE }\"\n              >\n                <span>{{ 'Assign device profile' | translate }}</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- INSTALL PROFILE OPERATION -->\n    <div class=\"bg-level-1\">\n      <div class=\"card-header separator\">\n        <div\n          class=\"card-title\"\n          translate\n        >\n          Currently installed\n        </div>\n      </div>\n      <div class=\"card-block\">\n        <c8y-operation-details\n          [operation]=\"operation\"\n          c8yProductExperience\n          inherit\n          suppressDataOverriding\n        ></c8y-operation-details>\n      </div>\n    </div>\n  </div>\n  <div class=\"card--grid__inner-scroll d-col no-align-items\">\n    <div class=\"d-contents\">\n      <!-- FIRMWARE -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'c8y-firmware'\"\n        [sectionTitle]=\"'Firmware' | translate\"\n        [emptyStateText]=\"'No firmware to display.' | translate\"\n        [emptyStateDetails]=\"'No firmware assigned.' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"firmwareItems\"\n        [isEmpty]=\"!selectedProfile?.c8y_DeviceProfile?.firmware?.name\"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <div class=\"d-contents\">\n      <!-- SOFTWARE -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'c8y-tools'\"\n        [sectionTitle]=\"'Software' | translate\"\n        [emptyStateText]=\"'No software to display.' | translate\"\n        [emptyStateDetails]=\"'No software assigned.' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"softwareItems\"\n        [isEmpty]=\"\n          !selectedProfile?.c8y_DeviceProfile?.software ||\n          selectedProfile?.c8y_DeviceProfile?.software?.length === 0\n        \"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <div class=\"d-contents\">\n      <!-- CONFIGURATION -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'gears'\"\n        [sectionTitle]=\"'Configuration' | translate\"\n        [emptyStateText]=\"'No configuration to display' | translate\"\n        [emptyStateDetails]=\"'No configuration assigned' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"configurationItems\"\n        [isEmpty]=\"\n          !selectedProfile?.c8y_DeviceProfile?.configuration ||\n          selectedProfile?.c8y_DeviceProfile?.configuration?.length === 0\n        \"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <!-- fill in the remanining vertical space when empty -->\n    <div class=\"card--grid grid__col--6-6--md flex-grow\">\n      <div class=\"bg-level-0\"></div>\n      <div class=\"bg-level-1\"></div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i2.ManagedObjectRealtimeService }, { type: DeviceProfileService }, { type: i5.ActivatedRoute }, { type: i2.OperationRealtimeService }, { type: i2.AlertService }] });
+                    ], template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"reload()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reload$.value }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n<c8y-action-bar-item [placement]=\"'right'\">\n  <c8y-realtime-btn [service]=\"deviceRealtime\"></c8y-realtime-btn>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid--fullpage card--grid--fullpage card--grid grid__row--2-10--md\">\n  <div class=\"card--grid grid__col--6-6--md\">\n    <!-- AVAILABLE PROFILES -->\n    <div class=\"bg-level-0\">\n      <div class=\"card-header separator\">\n        <div\n          class=\"card-title\"\n          translate\n        >\n          Device profile\n        </div>\n      </div>\n      <div class=\"p-16\">\n        <form #deviceProfileForm=\"ngForm\">\n          <div class=\"input-group\">\n            <c8y-typeahead\n              class=\"flex-grow\"\n              placeholder=\"{{ 'Select device profile' | translate }}\"\n              name=\"selectProfile\"\n              data-cy=\"device-tab-profile--select-device-profile\"\n              [(ngModel)]=\"selectedProfile\"\n              (onSearch)=\"pattern$.next($event)\"\n              [allowFreeEntries]=\"false\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *c8yFor=\"let profile of deviceProfiles$; pipe: filterPipe\"\n                (click)=\"selectProfile(profile); pattern$.next('')\"\n              >\n                <c8y-highlight\n                  [text]=\"profile.name || '&#45;&#45;'\"\n                  [pattern]=\"pattern$.value\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n            <div class=\"input-group-btn\">\n              <button\n                class=\"btn btn-primary\"\n                title=\"{{ 'Assign device profile' | translate }}\"\n                type=\"button\"\n                (click)=\"createOperation()\"\n                data-cy=\"device-tab-profile--Assign-device-profile-button\"\n                [disabled]=\"!selectedProfile?.id\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PRODUCT_EXPERIENCE.ACTIONS.ASSIGN_DEVICE_PROFILE }\"\n              >\n                <span>{{ 'Assign device profile' | translate }}</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- INSTALL PROFILE OPERATION -->\n    <div class=\"bg-level-1\">\n      <div class=\"card-header separator\">\n        <div\n          class=\"card-title\"\n          translate\n        >\n          Currently installed\n        </div>\n      </div>\n      <div class=\"card-block\">\n        <c8y-operation-details\n          [operation]=\"operation\"\n          c8yProductExperience\n          inherit\n          suppressDataOverriding\n        ></c8y-operation-details>\n      </div>\n    </div>\n  </div>\n  <div class=\"card--grid__inner-scroll d-col no-align-items\">\n    <div class=\"d-contents\">\n      <!-- FIRMWARE -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'c8y-firmware'\"\n        [sectionTitle]=\"'Firmware' | translate\"\n        [emptyStateText]=\"'No firmware to display.' | translate\"\n        [emptyStateDetails]=\"'No firmware assigned.' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"firmwareItems\"\n        [isEmpty]=\"!selectedProfile?.c8y_DeviceProfile?.firmware?.name\"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <div class=\"d-contents\">\n      <!-- SOFTWARE -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'c8y-tools'\"\n        [sectionTitle]=\"'Software' | translate\"\n        [emptyStateText]=\"'No software to display.' | translate\"\n        [emptyStateDetails]=\"'No software assigned.' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"softwareItems\"\n        [isEmpty]=\"\n          !selectedProfile?.c8y_DeviceProfile?.software ||\n          selectedProfile?.c8y_DeviceProfile?.software?.length === 0\n        \"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <div class=\"d-contents\">\n      <!-- CONFIGURATION -->\n      <c8y-device-tab-profile-detail\n        class=\"d-contents\"\n        [sectionIcon]=\"'gears'\"\n        [sectionTitle]=\"'Configuration' | translate\"\n        [emptyStateText]=\"'No configuration to display' | translate\"\n        [emptyStateDetails]=\"'No configuration assigned' | translate\"\n        [isProfileSelected]=\"!!selectedProfile\"\n        [items]=\"configurationItems\"\n        [isEmpty]=\"\n          !selectedProfile?.c8y_DeviceProfile?.configuration ||\n          selectedProfile?.c8y_DeviceProfile?.configuration?.length === 0\n        \"\n      ></c8y-device-tab-profile-detail>\n    </div>\n    <!-- fill in the remanining vertical space when empty -->\n    <div class=\"card--grid grid__col--6-6--md flex-grow\">\n      <div class=\"bg-level-0\"></div>\n      <div class=\"bg-level-1\"></div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i2.ManagedObjectRealtimeService }, { type: DeviceProfileService }, { type: i5.ActivatedRoute }, { type: i2.OperationRealtimeService }, { type: i2.AlertService }, { type: i1.InventoryService }] });
 const deviceProfilesRoutes = [
     {