@c8y/ngx-components 1020.28.11 → 1020.33.1

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

@@ -1,27 +1,25 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, Component, Pipe, Input, Output, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/router';
-import * as i5 from '@c8y/client';
+import * as i4 from '@c8y/client';
 import { OperationStatus } from '@c8y/client';
 import * as i2 from '@c8y/ngx-components';
-import { gettext, Permissions, hookRoute, ViewContext, CoreModule, Status, FilterInputComponent, memoize, NavigatorNode, hookNavigator, FormsModule } from '@c8y/ngx-components';
+import { gettext, Permissions, hookRoute, ViewContext, CoreModule, Status, FilterInputComponent, NavigatorNode, hookNavigator, FormsModule } from '@c8y/ngx-components';
 import * as i3 from '@c8y/ngx-components/repository/shared';
-import { DeviceConfigurationOperation, RepositoryType, SharedRepositoryModule } from '@c8y/ngx-components/repository/shared';
+import { DeviceConfigurationOperation, RepositoryType, SharedRepositoryModule, RepositoryItemNameGridColumn, DescriptionGridColumn, FileGridColumn, DeviceTypeGridColumn, TypeGridColumn } from '@c8y/ngx-components/repository/shared';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import * as i8 from '@c8y/ngx-components/operations/operation-details';
 import { OperationDetailsModule } from '@c8y/ngx-components/operations/operation-details';
-import { has, cloneDeep, uniqBy, isUndefined, property } from 'lodash-es';
+import { has, cloneDeep, uniqBy, isUndefined } from 'lodash-es';
 import { saveAs } from 'file-saver';
 import * as i3$1 from 'ngx-bootstrap/modal';
 import { map } from 'rxjs/operators';
 import * as i7 from 'ngx-bootstrap/tabs';
 import { TabsModule } from 'ngx-bootstrap/tabs';
-import { __decorate, __metadata } from 'tslib';
-import * as i4$1 from '@ngx-translate/core';
-import { pipe, of } from 'rxjs';
-import * as i7$1 from 'ngx-bootstrap/tooltip';
+import * as i4$2 from '@ngx-translate/core';
+import { pipe } from 'rxjs';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 class DeviceConfigurationService {
@@ -145,13 +143,13 @@ class TextBasedConfigurationComponent {
             withChildren: false
         })).data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: TextBasedConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.AlertService }, { token: i3.RepositoryService }, { token: DeviceConfigurationService }, { token: i5.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: TextBasedConfigurationComponent, selector: "c8y-text-based-configuration", ngImport: i0, template: "<div class=\"d-flex d-col fit-h\">\n  <fieldset class=\"card-block bg-level-1 fit-w\">\n    <div class=\"content-flex-50\">\n      <div class=\"m-l-auto d-flex\">\n        <button\n          class=\"btn btn-default btn-sm a-s-center m-t-8 m-b-8\"\n          title=\"{{ 'Get configuration from device' | translate }}\"\n          type=\"button\"\n          *ngIf=\"showTextBasedConfigReload\"\n          (click)=\"reloadConfiguration()\"\n          [disabled]=\"reloadingConfig || savingConfig\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n            *ngIf=\"reloadingConfig\"\n            [ngClass]=\"{ 'icon-spin': reloadingConfig }\"\n          ></i>\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"download\"\n            *ngIf=\"!reloadingConfig\"\n          ></i>\n\n          {{ 'Get configuration from device' | translate }}\n        </button>\n      </div>\n    </div>\n  </fieldset>\n  <div class=\"flex-grow\">\n    <textarea\n      class=\"form-control fit-h p-r-16 p-l-16\"\n      [attr.aria-label]=\"'Operations' | translate\"\n      [(ngModel)]=\"config\"\n      [disabled]=\"reloadingConfig || savingConfig\"\n      c8y-spellcheck=\"false\"\n    ></textarea>\n  </div>\n  <c8y-operation-details\n    class=\"bg-level-2 p-0\"\n    *ngIf=\"latestOperation !== undefined\"\n    [operation]=\"latestOperation\"\n  ></c8y-operation-details>\n  <div\n    class=\"card-footer fit-w separator\"\n    *ngIf=\"showTextBasedConfigSave\"\n  >\n    <button\n      class=\"btn btn-primary\"\n      id=\"send-config-btn\"\n      type=\"button\"\n      (click)=\"updateConfiguration(config)\"\n      [disabled]=\"reloadingConfig || savingConfig || !config\"\n      [ngClass]=\"{ 'btn-pending': savingConfig }\"\n    >\n      <span\n        title=\"{{ 'Send' | translate }}\"\n        *ngIf=\"!savingConfig\"\n      >\n        {{ 'Send configuration to device' | translate }}\n      </span>\n      <span\n        title=\"{{ 'Sending\u2026' | translate }}\"\n        *ngIf=\"savingConfig\"\n      >\n        {{ 'Sending\u2026' | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: TextBasedConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.AlertService }, { token: i3.RepositoryService }, { token: DeviceConfigurationService }, { token: i4.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: TextBasedConfigurationComponent, selector: "c8y-text-based-configuration", ngImport: i0, template: "<div class=\"d-flex d-col fit-h\">\n  <fieldset class=\"card-block bg-level-1 fit-w\">\n    <div class=\"content-flex-50\">\n      <div class=\"m-l-auto d-flex\">\n        <button\n          class=\"btn btn-default btn-sm a-s-center m-t-8 m-b-8\"\n          title=\"{{ 'Get configuration from device' | translate }}\"\n          type=\"button\"\n          *ngIf=\"showTextBasedConfigReload\"\n          (click)=\"reloadConfiguration()\"\n          [disabled]=\"reloadingConfig || savingConfig\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n            *ngIf=\"reloadingConfig\"\n            [ngClass]=\"{ 'icon-spin': reloadingConfig }\"\n          ></i>\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"download\"\n            *ngIf=\"!reloadingConfig\"\n          ></i>\n\n          {{ 'Get configuration from device' | translate }}\n        </button>\n      </div>\n    </div>\n  </fieldset>\n  <div class=\"flex-grow\">\n    <textarea\n      class=\"form-control fit-h p-r-16 p-l-16\"\n      [attr.aria-label]=\"'Operations' | translate\"\n      [(ngModel)]=\"config\"\n      [disabled]=\"reloadingConfig || savingConfig\"\n      c8y-spellcheck=\"false\"\n    ></textarea>\n  </div>\n  <c8y-operation-details\n    class=\"bg-level-2 p-0\"\n    *ngIf=\"latestOperation !== undefined\"\n    [operation]=\"latestOperation\"\n  ></c8y-operation-details>\n  <div\n    class=\"card-footer fit-w separator\"\n    *ngIf=\"showTextBasedConfigSave\"\n  >\n    <button\n      class=\"btn btn-primary\"\n      id=\"send-config-btn\"\n      type=\"button\"\n      (click)=\"updateConfiguration(config)\"\n      [disabled]=\"reloadingConfig || savingConfig || !config\"\n      [ngClass]=\"{ 'btn-pending': savingConfig }\"\n    >\n      <span\n        title=\"{{ 'Send' | translate }}\"\n        *ngIf=\"!savingConfig\"\n      >\n        {{ 'Send configuration to device' | translate }}\n      </span>\n      <span\n        title=\"{{ 'Sending\u2026' | translate }}\"\n        *ngIf=\"savingConfig\"\n      >\n        {{ 'Sending\u2026' | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: TextBasedConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-text-based-configuration', template: "<div class=\"d-flex d-col fit-h\">\n  <fieldset class=\"card-block bg-level-1 fit-w\">\n    <div class=\"content-flex-50\">\n      <div class=\"m-l-auto d-flex\">\n        <button\n          class=\"btn btn-default btn-sm a-s-center m-t-8 m-b-8\"\n          title=\"{{ 'Get configuration from device' | translate }}\"\n          type=\"button\"\n          *ngIf=\"showTextBasedConfigReload\"\n          (click)=\"reloadConfiguration()\"\n          [disabled]=\"reloadingConfig || savingConfig\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n            *ngIf=\"reloadingConfig\"\n            [ngClass]=\"{ 'icon-spin': reloadingConfig }\"\n          ></i>\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"download\"\n            *ngIf=\"!reloadingConfig\"\n          ></i>\n\n          {{ 'Get configuration from device' | translate }}\n        </button>\n      </div>\n    </div>\n  </fieldset>\n  <div class=\"flex-grow\">\n    <textarea\n      class=\"form-control fit-h p-r-16 p-l-16\"\n      [attr.aria-label]=\"'Operations' | translate\"\n      [(ngModel)]=\"config\"\n      [disabled]=\"reloadingConfig || savingConfig\"\n      c8y-spellcheck=\"false\"\n    ></textarea>\n  </div>\n  <c8y-operation-details\n    class=\"bg-level-2 p-0\"\n    *ngIf=\"latestOperation !== undefined\"\n    [operation]=\"latestOperation\"\n  ></c8y-operation-details>\n  <div\n    class=\"card-footer fit-w separator\"\n    *ngIf=\"showTextBasedConfigSave\"\n  >\n    <button\n      class=\"btn btn-primary\"\n      id=\"send-config-btn\"\n      type=\"button\"\n      (click)=\"updateConfiguration(config)\"\n      [disabled]=\"reloadingConfig || savingConfig || !config\"\n      [ngClass]=\"{ 'btn-pending': savingConfig }\"\n    >\n      <span\n        title=\"{{ 'Send' | translate }}\"\n        *ngIf=\"!savingConfig\"\n      >\n        {{ 'Send configuration to device' | translate }}\n      </span>\n      <span\n        title=\"{{ 'Sending\u2026' | translate }}\"\n        *ngIf=\"savingConfig\"\n      >\n        {{ 'Sending\u2026' | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.AlertService }, { type: i3.RepositoryService }, { type: DeviceConfigurationService }, { type: i5.InventoryService }] });
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.AlertService }, { type: i3.RepositoryService }, { type: DeviceConfigurationService }, { type: i4.InventoryService }] });
 
 class DeviceConfigurationGuard {
     constructor(deviceConfigurationService) {
@@ -238,7 +236,7 @@ class SaveToRepositoryComponent {
         this.modal.hide();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SaveToRepositoryComponent, deps: [{ token: i3$1.BsModalRef }, { token: i2.AlertService }, { token: i3.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SaveToRepositoryComponent, selector: "c8y-save-config-to-configuration-repository", ngImport: i0, template: "<div class=\"modal-header dialog-header\">\n  <i c8yIcon=\"gears\"></i>\n  <h4 id=\"modal-title\" translate>\n    Save configuration\n  </h4>\n</div>\n<div class=\"modal-body\" id=\"modal-body\">\n  <form #saveConfigurationSnapshot=\"ngForm\" class=\"p-t-24\">\n    <c8y-form-group>\n      <label translate for=\"name\">Name</label>\n      <input\n        id=\"name\"\n        type=\"text\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"name\"\n        [(ngModel)]=\"configSnapshot.name\"\n        required\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"deviceType\">Device type</label>\n      <input\n        id=\"deviceType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"deviceType\"\n        [(ngModel)]=\"configSnapshot.deviceType\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"description\">Description</label>\n      <input\n        type=\"text\"\n        id=\"description\"\n        class=\"form-control\"\n        maxlength=\"254\"\n        autocomplete=\"off\"\n        name=\"description\"\n        [(ngModel)]=\"configSnapshot.description\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"configurationType\">Configuration type</label>\n      <input\n        id=\"configurationType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"configurationType\"\n        [(ngModel)]=\"configSnapshot.configurationType\"\n      />\n    </c8y-form-group>\n  </form>\n</div>\n<div class=\"modal-footer\">\n  <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"close()\" translate>\n    Cancel\n  </button>\n\n  <button\n    title=\"{{ 'Save configuration to repository' | translate }}\"\n    class=\"btn btn-primary\"\n    (click)=\"save()\"\n    [disabled]=\"saveConfigurationSnapshot.form.invalid\"\n    translate\n  >\n    Save\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SaveToRepositoryComponent, selector: "c8y-save-config-to-configuration-repository", ngImport: i0, template: "<div class=\"modal-header dialog-header\">\n  <i c8yIcon=\"gears\"></i>\n  <h4 id=\"modal-title\" translate>\n    Save configuration\n  </h4>\n</div>\n<div class=\"modal-body\" id=\"modal-body\">\n  <form #saveConfigurationSnapshot=\"ngForm\" class=\"p-t-24\">\n    <c8y-form-group>\n      <label translate for=\"name\">Name</label>\n      <input\n        id=\"name\"\n        type=\"text\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"name\"\n        [(ngModel)]=\"configSnapshot.name\"\n        required\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"deviceType\">Device type</label>\n      <input\n        id=\"deviceType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"deviceType\"\n        [(ngModel)]=\"configSnapshot.deviceType\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"description\">Description</label>\n      <input\n        type=\"text\"\n        id=\"description\"\n        class=\"form-control\"\n        maxlength=\"254\"\n        autocomplete=\"off\"\n        name=\"description\"\n        [(ngModel)]=\"configSnapshot.description\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"configurationType\">Configuration type</label>\n      <input\n        id=\"configurationType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"configurationType\"\n        [(ngModel)]=\"configSnapshot.configurationType\"\n      />\n    </c8y-form-group>\n  </form>\n</div>\n<div class=\"modal-footer\">\n  <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"close()\" translate>\n    Cancel\n  </button>\n\n  <button\n    title=\"{{ 'Save configuration to repository' | translate }}\"\n    class=\"btn btn-primary\"\n    (click)=\"save()\"\n    [disabled]=\"saveConfigurationSnapshot.form.invalid\"\n    translate\n  >\n    Save\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SaveToRepositoryComponent, decorators: [{
             type: Component,
@@ -405,13 +403,13 @@ class ConfigurationPreviewComponent {
             this.deviceConfigurationService.updateConfigurations();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ConfigurationPreviewComponent, deps: [{ token: DeviceConfigurationService }, { token: i2.OperationRealtimeService }, { token: i3$1.BsModalService }, { token: i5.UserService }, { token: i2.AppStateService }, { token: i3.RepositoryService }, { token: i5.OperationService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ConfigurationPreviewComponent, deps: [{ token: DeviceConfigurationService }, { token: i2.OperationRealtimeService }, { token: i3$1.BsModalService }, { token: i4.UserService }, { token: i2.AppStateService }, { token: i3.RepositoryService }, { token: i4.OperationService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ConfigurationPreviewComponent, selector: "c8y-device-configuration-preview", inputs: { device: "device", configurationType: "configurationType", configSnapshot: "configSnapshot", canSaveSnapshot: "canSaveSnapshot", actionButtonText: "actionButtonText", actionButtonIcon: "actionButtonIcon", isLegacy: "isLegacy", operationToTrigger: "operationToTrigger" }, ngImport: i0, template: "<div class=\"content-flex-55 p-b-16\">\n  <div class=\"col-7 p-t-4\">\n    <p>\n      <span class=\"text-label-small text-uppercase m-r-4\" translate>Configuration</span>\n      <span *ngIf=\"configSnapshot?.name; else emptyText\">\n        <strong>{{ configSnapshot.name }}</strong>\n      </span>\n      <ng-template #emptyText>---</ng-template>\n    </p>\n    <p>\n      <span class=\"text-label-small text-uppercase m-r-4\" translate>Last updated</span>\n      <small *ngIf=\"configSnapshot?.time; else emptyDate\">\n        {{ configSnapshot.time | c8yDate }}\n      </small>\n      <ng-template #emptyDate>---</ng-template>\n    </p>\n  </div>\n  <div class=\"col-5\">\n    <button\n      id=\"action-btn\"\n      class=\"btn btn-default btn-sm pull-right\"\n      type=\"button\"\n      title=\"{{ actionButtonText | translate }}\"\n      (click)=\"createDeviceOperation()\"\n      [disabled]=\"isCreateOperationDisabled()\"\n      *ngIf=\"canCallAction\"\n    >\n      <i [c8yIcon]=\"actionButtonIcon\"></i>\n      {{ actionButtonText | translate }}\n    </button>\n  </div>\n</div>\n<div class=\"c8y-empty-state text-left\" *ngIf=\"!configSnapshot?.binary && showBinary()\">\n  <h1 [c8yIcon]=\"'file-image-o'\"></h1>\n  <p>\n    <strong translate>No preview available.</strong>\n    <br />\n    <small *ngIf=\"configSnapshot?.binary !== ''; else emptyFile\" translate>\n      The file is not available.\n    </small>\n    <ng-template #emptyFile>\n      <small translate>The file is empty.</small>\n    </ng-template>\n  </p>\n</div>\n<div *ngIf=\"configSnapshot?.binary && showBinary()\" class=\"flex-grow d-flex d-col\">\n  <c8y-source-code-preview\n    [text]=\"configSnapshot.binary\"\n    [isDisabled]=\"true\"\n    class=\"d-contents\"\n  ></c8y-source-code-preview>\n  <div *ngIf=\"canSaveSnapshot\" class=\"p-t-16\">\n    <button\n      title=\"{{ 'Download' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary btn-sm pull-right m-l-8\"\n      (click)=\"download()\"\n    >\n      {{ 'Download' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save to repository' | translate }}\"\n      *ngIf=\"hasPermission()\"\n      type=\"button\"\n      class=\"btn btn-default btn-sm pull-right\"\n      (click)=\"saveToRepository()\"\n    >\n      {{ 'Save to repository' | translate }}\n    </button>\n  </div>\n</div>\n<div *ngIf=\"showOperation()\">\n  <c8y-operation-details [operation]=\"operation\"></c8y-operation-details>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i8.OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "component", type: SourceCodePreviewComponent, selector: "c8y-source-code-preview", inputs: ["isDisabled", "text"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ConfigurationPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-configuration-preview', template: "<div class=\"content-flex-55 p-b-16\">\n  <div class=\"col-7 p-t-4\">\n    <p>\n      <span class=\"text-label-small text-uppercase m-r-4\" translate>Configuration</span>\n      <span *ngIf=\"configSnapshot?.name; else emptyText\">\n        <strong>{{ configSnapshot.name }}</strong>\n      </span>\n      <ng-template #emptyText>---</ng-template>\n    </p>\n    <p>\n      <span class=\"text-label-small text-uppercase m-r-4\" translate>Last updated</span>\n      <small *ngIf=\"configSnapshot?.time; else emptyDate\">\n        {{ configSnapshot.time | c8yDate }}\n      </small>\n      <ng-template #emptyDate>---</ng-template>\n    </p>\n  </div>\n  <div class=\"col-5\">\n    <button\n      id=\"action-btn\"\n      class=\"btn btn-default btn-sm pull-right\"\n      type=\"button\"\n      title=\"{{ actionButtonText | translate }}\"\n      (click)=\"createDeviceOperation()\"\n      [disabled]=\"isCreateOperationDisabled()\"\n      *ngIf=\"canCallAction\"\n    >\n      <i [c8yIcon]=\"actionButtonIcon\"></i>\n      {{ actionButtonText | translate }}\n    </button>\n  </div>\n</div>\n<div class=\"c8y-empty-state text-left\" *ngIf=\"!configSnapshot?.binary && showBinary()\">\n  <h1 [c8yIcon]=\"'file-image-o'\"></h1>\n  <p>\n    <strong translate>No preview available.</strong>\n    <br />\n    <small *ngIf=\"configSnapshot?.binary !== ''; else emptyFile\" translate>\n      The file is not available.\n    </small>\n    <ng-template #emptyFile>\n      <small translate>The file is empty.</small>\n    </ng-template>\n  </p>\n</div>\n<div *ngIf=\"configSnapshot?.binary && showBinary()\" class=\"flex-grow d-flex d-col\">\n  <c8y-source-code-preview\n    [text]=\"configSnapshot.binary\"\n    [isDisabled]=\"true\"\n    class=\"d-contents\"\n  ></c8y-source-code-preview>\n  <div *ngIf=\"canSaveSnapshot\" class=\"p-t-16\">\n    <button\n      title=\"{{ 'Download' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary btn-sm pull-right m-l-8\"\n      (click)=\"download()\"\n    >\n      {{ 'Download' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save to repository' | translate }}\"\n      *ngIf=\"hasPermission()\"\n      type=\"button\"\n      class=\"btn btn-default btn-sm pull-right\"\n      (click)=\"saveToRepository()\"\n    >\n      {{ 'Save to repository' | translate }}\n    </button>\n  </div>\n</div>\n<div *ngIf=\"showOperation()\">\n  <c8y-operation-details [operation]=\"operation\"></c8y-operation-details>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: DeviceConfigurationService }, { type: i2.OperationRealtimeService }, { type: i3$1.BsModalService }, { type: i5.UserService }, { type: i2.AppStateService }, { type: i3.RepositoryService }, { type: i5.OperationService }, { type: i2.AlertService }], propDecorators: { device: [{
+        }], ctorParameters: () => [{ type: DeviceConfigurationService }, { type: i2.OperationRealtimeService }, { type: i3$1.BsModalService }, { type: i4.UserService }, { type: i2.AppStateService }, { type: i3.RepositoryService }, { type: i4.OperationService }, { type: i2.AlertService }], propDecorators: { device: [{
                 type: Input
             }], configurationType: [{
                 type: Input
@@ -545,13 +543,13 @@ class DeviceConfigurationComponent {
         }
         this.reloading = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DeviceConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: DeviceConfigurationService }, { token: i5.Realtime }, { token: i3.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DeviceConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: DeviceConfigurationService }, { token: i4.Realtime }, { token: i3.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: DeviceConfigurationComponent, selector: "c8y-device-configuration", viewQueries: [{ propertyName: "textBasedConfigurationComponent", first: true, predicate: TextBasedConfigurationComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\" (click)=\"updateSnapshots()\">\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage card-has-tabs\">\n  <tabset>\n    <div class=\"card-header separator\" *ngIf=\"showBinaryBasedConfig && !showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Configurations' | translate }}</div>\n    </div>\n    <div class=\"card-header separator\" *ngIf=\"!showBinaryBasedConfig && showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Text-based configuration' | translate }}</div>\n    </div>\n    <tab heading=\"{{ 'Configurations' | translate }}\" *ngIf=\"showBinaryBasedConfig\">\n      <div class=\"card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0\">\n        <!-- DEVICE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\">\n              <span translate>Device-supported configurations</span>\n            </h5>\n          </div>\n          <c8y-device-configuration-list\n            [items]=\"supportedConfigurations\"\n            [itemIcon]=\"'gears'\"\n            (configSelected)=\"onConfigTypeSelected($event)\"\n          ></c8y-device-configuration-list>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block d-flex d-col flex-grow\">\n            <h5 class=\"legend form-block\"><span translate>Preview</span></h5>\n\n            <!-- EMPTY STATE -->\n\n            <c8y-ui-empty-state\n              *ngIf=\"!configurationType\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- PREVIEW AVAILABLE STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"configurationType\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"configSnapshot\"\n              [canSaveSnapshot]=\"true\"\n              [operationToTrigger]=\"'c8y_UploadConfigFile'\"\n              [actionButtonText]=\"'Get snapshot from device' | translate\"\n              [actionButtonIcon]=\"'download'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n\n        <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\" translate>Available supported configurations</h5>\n          </div>\n\n          <!-- EMPTY STATE -->\n\n          <c8y-ui-empty-state\n            *ngIf=\"!configurationType\"\n            [icon]=\"'gears'\"\n            [title]=\"'No selection.' | translate\"\n            [subtitle]=\"\n              'Select a configuration from the device-supported configuration list.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n\n          <div class=\"p-r-16\" *ngIf=\"configurationType\">\n            <c8y-device-configuration-list\n              [items]=\"repositorySnapshots\"\n              [itemIcon]=\"'file-text'\"\n              [emptyState]=\"repositorySnapshotsEmptyState\"\n              [isFilterEnabled]=\"true\"\n              (configSelected)=\"onRepositoryConfigSelected($event)\"\n            ></c8y-device-configuration-list>\n          </div>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block flex-grow d-flex d-col\">\n            <h5 class=\"legend form-block\" translate>Preview</h5>\n\n            <!-- EMPTY STATE -->\n            <c8y-ui-empty-state\n              *ngIf=\"!repositorySnapshot\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- CONFIGURATION SELECTED STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"repositorySnapshot\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"repositorySnapshot\"\n              [operationToTrigger]=\"'c8y_DownloadConfigFile'\"\n              [actionButtonText]=\"'Send configuration to device' | translate\"\n              [actionButtonIcon]=\"'upload'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n      </div>\n    </tab>\n    <tab heading=\"{{ 'Text-based configuration' | translate }}\" *ngIf=\"showTextBasedConfig\">\n      <c8y-text-based-configuration></c8y-text-based-configuration>\n    </tab>\n  </tabset>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.TabsetAriaDirective, selector: "tabset" }, { kind: "directive", type: i7.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i7.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "component", type: DeviceConfigurationListComponent, selector: "c8y-device-configuration-list", inputs: ["items", "itemIcon", "emptyState", "isFilterEnabled"], outputs: ["configSelected"] }, { kind: "component", type: ConfigurationPreviewComponent, selector: "c8y-device-configuration-preview", inputs: ["device", "configurationType", "configSnapshot", "canSaveSnapshot", "actionButtonText", "actionButtonIcon", "isLegacy", "operationToTrigger"] }, { kind: "component", type: TextBasedConfigurationComponent, selector: "c8y-text-based-configuration" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DeviceConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-configuration', template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\" (click)=\"updateSnapshots()\">\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage card-has-tabs\">\n  <tabset>\n    <div class=\"card-header separator\" *ngIf=\"showBinaryBasedConfig && !showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Configurations' | translate }}</div>\n    </div>\n    <div class=\"card-header separator\" *ngIf=\"!showBinaryBasedConfig && showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Text-based configuration' | translate }}</div>\n    </div>\n    <tab heading=\"{{ 'Configurations' | translate }}\" *ngIf=\"showBinaryBasedConfig\">\n      <div class=\"card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0\">\n        <!-- DEVICE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\">\n              <span translate>Device-supported configurations</span>\n            </h5>\n          </div>\n          <c8y-device-configuration-list\n            [items]=\"supportedConfigurations\"\n            [itemIcon]=\"'gears'\"\n            (configSelected)=\"onConfigTypeSelected($event)\"\n          ></c8y-device-configuration-list>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block d-flex d-col flex-grow\">\n            <h5 class=\"legend form-block\"><span translate>Preview</span></h5>\n\n            <!-- EMPTY STATE -->\n\n            <c8y-ui-empty-state\n              *ngIf=\"!configurationType\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- PREVIEW AVAILABLE STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"configurationType\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"configSnapshot\"\n              [canSaveSnapshot]=\"true\"\n              [operationToTrigger]=\"'c8y_UploadConfigFile'\"\n              [actionButtonText]=\"'Get snapshot from device' | translate\"\n              [actionButtonIcon]=\"'download'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n\n        <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\" translate>Available supported configurations</h5>\n          </div>\n\n          <!-- EMPTY STATE -->\n\n          <c8y-ui-empty-state\n            *ngIf=\"!configurationType\"\n            [icon]=\"'gears'\"\n            [title]=\"'No selection.' | translate\"\n            [subtitle]=\"\n              'Select a configuration from the device-supported configuration list.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n\n          <div class=\"p-r-16\" *ngIf=\"configurationType\">\n            <c8y-device-configuration-list\n              [items]=\"repositorySnapshots\"\n              [itemIcon]=\"'file-text'\"\n              [emptyState]=\"repositorySnapshotsEmptyState\"\n              [isFilterEnabled]=\"true\"\n              (configSelected)=\"onRepositoryConfigSelected($event)\"\n            ></c8y-device-configuration-list>\n          </div>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block flex-grow d-flex d-col\">\n            <h5 class=\"legend form-block\" translate>Preview</h5>\n\n            <!-- EMPTY STATE -->\n            <c8y-ui-empty-state\n              *ngIf=\"!repositorySnapshot\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- CONFIGURATION SELECTED STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"repositorySnapshot\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"repositorySnapshot\"\n              [operationToTrigger]=\"'c8y_DownloadConfigFile'\"\n              [actionButtonText]=\"'Send configuration to device' | translate\"\n              [actionButtonIcon]=\"'upload'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n      </div>\n    </tab>\n    <tab heading=\"{{ 'Text-based configuration' | translate }}\" *ngIf=\"showTextBasedConfig\">\n      <c8y-text-based-configuration></c8y-text-based-configuration>\n    </tab>\n  </tabset>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: DeviceConfigurationService }, { type: i5.Realtime }, { type: i3.RepositoryService }], propDecorators: { textBasedConfigurationComponent: [{
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: DeviceConfigurationService }, { type: i4.Realtime }, { type: i3.RepositoryService }], propDecorators: { textBasedConfigurationComponent: [{
                 type: ViewChild,
                 args: [TextBasedConfigurationComponent]
             }] } });
@@ -709,7 +707,7 @@ class ConfigurationDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ConfigurationDetailComponent, deps: [{ token: i3.RepositoryService }, { token: i3$1.BsModalRef }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ConfigurationDetailComponent, selector: "c8y-configuration-detail", viewQueries: [{ propertyName: "configurationForm", first: true, predicate: ["configurationForm"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div\n    class=\"modal-header dialog-header\"\n    id=\"configurationModalTitle\"\n  >\n    <i [c8yIcon]=\"'cogs'\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n      *ngIf=\"mo.id\"\n    >\n      Update configuration\n    </h4>\n    <h4\n      id=\"modal-title\"\n      translate\n      *ngIf=\"!mo.id\"\n    >\n      Add configuration\n    </h4>\n  </div>\n\n  <form\n    class=\"d-contents\"\n    #configurationForm=\"ngForm\"\n    (ngSubmit)=\"configurationForm.form.valid && save()\"\n  >\n    <div\n      class=\"modal-inner-scroll\"\n      id=\"modal-body\"\n    >\n      <div\n        class=\"modal-body\"\n        id=\"configurationModalDescription\"\n      >\n        <c8y-form-group>\n          <label translate>Name</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g.' | translate }} hosts\"\n            name=\"version\"\n            type=\"text\"\n            autocomplete=\"off\"\n            required\n            maxlength=\"254\"\n            [(ngModel)]=\"version\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Device type</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n            name=\"deviceType\"\n            type=\"text\"\n            autocomplete=\"off\"\n            maxlength=\"254\"\n            [(ngModel)]=\"deviceType\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Description</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g. Host configuration' | translate }} c8y_Linux\"\n            name=\"description\"\n            type=\"text\"\n            autocomplete=\"off\"\n            maxlength=\"254\"\n            [(ngModel)]=\"description\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Configuration type</label>\n          <c8y-typeahead\n            placeholder=\"{{ 'e.g.' | translate }} ssh\"\n            name=\"confType\"\n            [(ngModel)]=\"configurationTypeMO\"\n            maxlength=\"254\"\n            (onSearch)=\"setPipe($event)\"\n            displayProperty=\"configurationType\"\n          >\n            <c8y-li\n              class=\"p-l-8 p-r-8 c8y-list__item--link\"\n              *c8yFor=\"let config of configs; pipe: filterPipe; notFound: notFoundTemplate\"\n              (click)=\"configurationTypeMO = config; setPipe('')\"\n              [active]=\"configurationTypeMO === config\"\n            >\n              <c8y-highlight\n                [text]=\"config.configurationType || '--'\"\n                [pattern]=\"pattern\"\n              ></c8y-highlight>\n            </c8y-li>\n            <ng-template #notFoundTemplate>\n              <c8y-li\n                class=\"bg-level-2 p-8\"\n                *ngIf=\"pattern.length > 0\"\n              >\n                <span translate>No match found.</span>\n                <button\n                  class=\"btn btn-primary btn-xs m-l-8\"\n                  title=\"{{ 'Add new`configuration type`' | translate }}\"\n                  type=\"button\"\n                  translate\n                >\n                  Add new`configuration type`\n                </button>\n              </c8y-li>\n            </ng-template>\n          </c8y-typeahead>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <div\n            class=\"legend form-block m-t-40\"\n            translate\n          >\n            Configuration file\n          </div>\n          <c8y-file-picker\n            [maxAllowedFiles]=\"1\"\n            (onFilesPicked)=\"onFile($event)\"\n            [uploadChoice]=\"uploadChoice\"\n            [fileUrl]=\"binary.url\"\n            [fileBinary]=\"binary.file\"\n            [fileUrlPopover]=\"textForConfigurationUrlPopover\"\n          ></c8y-file-picker>\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        <span translate>Cancel</span>\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        title=\"{{ submitButtonTitle | translate }}\"\n        type=\"submit\"\n        [ngClass]=\"{ 'btn-pending': saving }\"\n        [disabled]=\"\n          !configurationForm.valid ||\n          configurationForm.pristine ||\n          (!binary?.url && !binary?.file) ||\n          saving\n        \"\n      >\n        {{ submitButtonTitle | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.FilePickerComponent, selector: "c8y-file-picker", inputs: ["maxAllowedFiles", "uploadChoice", "fileUrl", "fileBinary", "config", "filePickerIndex", "fileUrlPopover"], outputs: ["onFilesPicked"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ConfigurationDetailComponent, selector: "c8y-configuration-detail", viewQueries: [{ propertyName: "configurationForm", first: true, predicate: ["configurationForm"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div\n    class=\"modal-header dialog-header\"\n    id=\"configurationModalTitle\"\n  >\n    <i [c8yIcon]=\"'cogs'\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n      *ngIf=\"mo.id\"\n    >\n      Update configuration\n    </h4>\n    <h4\n      id=\"modal-title\"\n      translate\n      *ngIf=\"!mo.id\"\n    >\n      Add configuration\n    </h4>\n  </div>\n\n  <form\n    class=\"d-contents\"\n    #configurationForm=\"ngForm\"\n    (ngSubmit)=\"configurationForm.form.valid && save()\"\n  >\n    <div\n      class=\"modal-inner-scroll\"\n      id=\"modal-body\"\n    >\n      <div\n        class=\"modal-body\"\n        id=\"configurationModalDescription\"\n      >\n        <c8y-form-group>\n          <label translate>Name</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g.' | translate }} hosts\"\n            name=\"version\"\n            type=\"text\"\n            autocomplete=\"off\"\n            required\n            maxlength=\"254\"\n            [(ngModel)]=\"version\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Device type</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n            name=\"deviceType\"\n            type=\"text\"\n            autocomplete=\"off\"\n            maxlength=\"254\"\n            [(ngModel)]=\"deviceType\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Description</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g. Host configuration' | translate }} c8y_Linux\"\n            name=\"description\"\n            type=\"text\"\n            autocomplete=\"off\"\n            maxlength=\"254\"\n            [(ngModel)]=\"description\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Configuration type</label>\n          <c8y-typeahead\n            placeholder=\"{{ 'e.g.' | translate }} ssh\"\n            name=\"confType\"\n            [(ngModel)]=\"configurationTypeMO\"\n            maxlength=\"254\"\n            (onSearch)=\"setPipe($event)\"\n            displayProperty=\"configurationType\"\n          >\n            <c8y-li\n              class=\"p-l-8 p-r-8 c8y-list__item--link\"\n              *c8yFor=\"let config of configs; pipe: filterPipe; notFound: notFoundTemplate\"\n              (click)=\"configurationTypeMO = config; setPipe('')\"\n              [active]=\"configurationTypeMO === config\"\n            >\n              <c8y-highlight\n                [text]=\"config.configurationType || '--'\"\n                [pattern]=\"pattern\"\n              ></c8y-highlight>\n            </c8y-li>\n            <ng-template #notFoundTemplate>\n              <c8y-li\n                class=\"bg-level-2 p-8\"\n                *ngIf=\"pattern.length > 0\"\n              >\n                <span translate>No match found.</span>\n                <button\n                  class=\"btn btn-primary btn-xs m-l-8\"\n                  title=\"{{ 'Add new`configuration type`' | translate }}\"\n                  type=\"button\"\n                  translate\n                >\n                  Add new`configuration type`\n                </button>\n              </c8y-li>\n            </ng-template>\n          </c8y-typeahead>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <div\n            class=\"legend form-block m-t-40\"\n            translate\n          >\n            Configuration file\n          </div>\n          <c8y-file-picker\n            [maxAllowedFiles]=\"1\"\n            (onFilesPicked)=\"onFile($event)\"\n            [uploadChoice]=\"uploadChoice\"\n            [fileUrl]=\"binary.url\"\n            [fileBinary]=\"binary.file\"\n            [fileUrlPopover]=\"textForConfigurationUrlPopover\"\n          ></c8y-file-picker>\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancel()\"\n        [disabled]=\"saving\"\n      >\n        <span translate>Cancel</span>\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        title=\"{{ submitButtonTitle | translate }}\"\n        type=\"submit\"\n        [ngClass]=\"{ 'btn-pending': saving }\"\n        [disabled]=\"\n          !configurationForm.valid ||\n          configurationForm.pristine ||\n          (!binary?.url && !binary?.file) ||\n          saving\n        \"\n      >\n        {{ submitButtonTitle | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.FilePickerComponent, selector: "c8y-file-picker", inputs: ["maxAllowedFiles", "uploadChoice", "fileUrl", "fileBinary", "config", "filePickerIndex", "fileUrlPopover"], outputs: ["onFilesPicked"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ConfigurationDetailComponent, decorators: [{
             type: Component,
@@ -720,26 +718,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             }] } });
 
 class ConfigurationListComponent {
-    constructor(alert, repositoryService, bsModalService, modalService, translateService, inventoryBinaryService, inventoryService) {
+    constructor(alert, gridService, repositoryService, bsModalService, modalService, translateService, inventoryBinaryService) {
         this.alert = alert;
+        this.gridService = gridService;
         this.repositoryService = repositoryService;
         this.bsModalService = bsModalService;
         this.modalService = modalService;
         this.translateService = translateService;
         this.inventoryBinaryService = inventoryBinaryService;
-        this.inventoryService = inventoryService;
-        this.filterTerm = '';
-        this.reloading = false;
+        this.refresh$ = new EventEmitter();
+        this.pagination = {
+            pageSize: 50,
+            currentPage: 1
+        };
+        this.noResultsMessage = gettext('No results to display.');
+        this.noDataMessage = gettext('There are no configuration snapshots defined.');
+        this.noResultsSubtitle = gettext('Refine your search terms or check your spelling.');
+        this.noDataSubtitle = gettext('Add a configuration snapshot first.');
+        this.actionControls = [];
+        this.columns = [
+            new RepositoryItemNameGridColumn({
+                filterLabel: gettext('Filter configurations by name'),
+                placeholder: gettext('SSH'),
+                callback: this.edit.bind(this)
+            }),
+            new DescriptionGridColumn({
+                filterLabel: gettext('Filter configurations by description'),
+                placeholder: gettext('SSH configuration')
+            }),
+            new FileGridColumn(),
+            new DeviceTypeGridColumn({
+                path: 'deviceType',
+                filterLabel: gettext('Filter configurations by device type')
+            }),
+            new TypeGridColumn({
+                header: gettext('Configuration type'),
+                filterLabel: gettext('Filter by configuration type'),
+                example: 'ssh',
+                path: 'configurationType',
+                repositoryType: RepositoryType.CONFIGURATION
+            })
+        ];
+        this.sizeRequestDone = false;
         this.DELETED_SUCCESS_MSG = gettext('Configuration deleted.');
+        this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
     }
     ngOnInit() {
-        this.loadConfigurations();
+        this.actionControls.push({
+            type: "EDIT" /* BuiltInActionType.Edit */,
+            callback: this.edit.bind(this)
+        });
+        this.actionControls.push({
+            type: "DELETE" /* BuiltInActionType.Delete */,
+            callback: this.delete.bind(this)
+        });
+        this.actionControls.push({
+            type: 'download',
+            icon: 'download',
+            text: gettext('Download'),
+            showIf: row => this.isBinaryFile(row),
+            callback: this.download.bind(this)
+        });
     }
-    async loadConfigurations() {
-        this.reloading = true;
-        this.configurations$ = of(await this.repositoryService.listRepositoryEntries(RepositoryType.CONFIGURATION));
-        this.reloading = false;
-        this.reset();
+    async onDataSourceModifier(dataSourceModifier) {
+        const dataRequest = this.repositoryService.listRepositoryEntries(RepositoryType.CONFIGURATION, {
+            query: this.gridService.getQueryObj(dataSourceModifier.columns),
+            skipDefaultOrder: true,
+            params: {
+                pageSize: dataSourceModifier.pagination.pageSize,
+                currentPage: dataSourceModifier.pagination.currentPage,
+                withTotalPages: true
+            }
+        });
+        const filtererdSizeRequest = this.repositoryService
+            .listRepositoryEntries(RepositoryType.CONFIGURATION, {
+            query: this.gridService.getQueryObj(dataSourceModifier.columns),
+            skipDefaultOrder: true,
+            params: { pageSize: 1 }
+        })
+            .then(response => response?.paging?.totalPages);
+        this.size$ = this.repositoryService
+            .listRepositoryEntries(RepositoryType.CONFIGURATION, {
+            skipDefaultOrder: true,
+            params: { pageSize: 1 }
+        })
+            .then(response => {
+            this.sizeRequestDone = true;
+            return response?.paging?.totalPages;
+        });
+        const [dataResponse, size, filteredSize] = await Promise.all([
+            dataRequest,
+            this.size$,
+            filtererdSizeRequest
+        ]);
+        const { res, data, paging } = dataResponse;
+        const serverSideDataResult = {
+            res,
+            data,
+            paging,
+            filteredSize,
+            size
+        };
+        return serverSideDataResult;
     }
     async add() {
         try {
@@ -750,7 +830,7 @@ class ConfigurationListComponent {
                 ignoreBackdropClick: true,
                 keyboard: false
             }).content.result;
-            await this.loadConfigurations();
+            this.refresh$.next();
         }
         catch (ex) {
             // intended empty
@@ -776,7 +856,7 @@ class ConfigurationListComponent {
             }).content;
             modal.mo = configuration;
             await modal.result;
-            await this.loadConfigurations();
+            this.refresh$.next();
         }
         catch (ex) {
             // intended empty
@@ -787,9 +867,6 @@ class ConfigurationListComponent {
             ? !!this.inventoryBinaryService.getIdFromUrl(configuration.url)
             : false;
     }
-    getBinaryName(configuration) {
-        return this.repositoryService.getBinaryName$(configuration.url);
-    }
     async download(configuration) {
         const fileBinary = await this.repositoryService.getBinaryFile(configuration.url, {
             allowExternal: false
@@ -815,7 +892,7 @@ class ConfigurationListComponent {
             await this.modalService.confirm(title, body, Status.DANGER, labels);
             await this.repositoryService.delete(configuration);
             this.alert.success(this.DELETED_SUCCESS_MSG);
-            await this.loadConfigurations();
+            this.refresh$.next();
         }
         catch (ex) {
             if (ex) {
@@ -823,46 +900,19 @@ class ConfigurationListComponent {
             }
         }
     }
-    setPipe(filterTerm) {
-        this.filterTerm = filterTerm;
-        this.filterPipe = pipe(map(data => {
-            this.data =
-                filterTerm.trim().length === 0
-                    ? data
-                    : data.filter(mo => this.filterContainString(mo.name, filterTerm) ||
-                        this.filterContainString(mo.configurationType, filterTerm) ||
-                        this.filterContainString(mo.deviceType, filterTerm) ||
-                        this.filterContainString(mo.description, filterTerm));
-            return this.data;
-        }));
-    }
-    shouldShowEmptyState() {
-        return !(this.data && this.data.length > 0);
-    }
-    reset() {
-        this.filter.filterTerm = '';
-        this.setPipe('');
-    }
-    filterContainString(name, filterTerm) {
-        const term = filterTerm.toLowerCase().trim();
-        return name && name.toLowerCase().indexOf(term) > -1;
+    trackByName(_index, column) {
+        return column.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ConfigurationListComponent, deps: [{ token: i2.AlertService }, { token: i3.RepositoryService }, { token: i3$1.BsModalService }, { token: i2.ModalService }, { token: i4$1.TranslateService }, { token: i5.InventoryBinaryService }, { token: i5.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ConfigurationListComponent, selector: "c8y-configuration-list", viewQueries: [{ propertyName: "filter", first: true, predicate: FilterInputComponent, descendants: true }], ngImport: i0, template: "<c8y-title>\n  <span\n    class=\"m-r-4\"\n    translate\n  >\n    Configuration repository\n  </span>\n  <small *ngIf=\"(configurations$ | async)?.paging.totalPages === 1 && !filterTerm\">\n    {{ (configurations$ | async).data.length }}\n    <span translate>snapshots</span>\n  </small>\n  <small\n    [tooltip]=\"'More data available. Scroll to the bottom of the list to load it.' | translate\"\n    container=\"body\"\n    *ngIf=\"(configurations$ | async)?.paging.totalPages > 1 && !filterTerm\"\n  >\n    {{ (configurations$ | async).paging.pageSize }}+\n    <span translate>snapshots</span>\n  </small>\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=\"gears\"\n    label=\"{{ 'Configuration repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item itemClass=\"navbar-form\">\n  <c8y-filter\n    [icon]=\"'search'\"\n    (onSearch)=\"setPipe($event)\"\n  ></c8y-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add configuration snapshot' | translate }}\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add configuration snapshot' | translate }}\n  </button>\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)=\"loadConfigurations()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n></c8y-help>\n\n<!-- empty state -->\n<c8y-ui-empty-state\n  [icon]=\"'gears'\"\n  [title]=\"'There are no configuration snapshots defined.' | translate\"\n  [subtitle]=\"'Add a configuration snapshot first.' | translate\"\n  *ngIf=\"!filterTerm && (configurations$ | async)?.data.length === 0\"\n>\n  <div>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add configuration snapshot' | translate }}\"\n      type=\"button\"\n      (click)=\"add()\"\n    >\n      {{ 'Add configuration snapshot' | translate }}\n    </button>\n  </div>\n  <p c8y-guide-docs>\n    <small\n      translate\n      ngNonBindable\n    >\n      Find out more in the\n      <a\n        c8y-guide-href=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n      >\n        user documentation\n      </a>\n      .\n    </small>\n  </p>\n</c8y-ui-empty-state>\n\n<!-- no results empty state -->\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No results to display.' | translate\"\n  [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n  *ngIf=\"shouldShowEmptyState() && (configurations$ | async)?.data.length > 0\"\n></c8y-ui-empty-state>\n\n<c8y-list-group\n  class=\"m-b-24\"\n  *ngIf=\"(configurations$ | async)?.data.length > 0\"\n  [ngClass]=\"{\n    'dd-low': data && data.length ? data.length < 10 : (configurations$ | async)?.data.length < 10\n  }\"\n>\n  <c8y-li\n    class=\"page-sticky-header hidden-xs\"\n    [emptyActions]=\"true\"\n    *ngIf=\"!shouldShowEmptyState()\"\n  >\n    <c8y-li-icon>\n      <i class=\"p-l-24\"></i>\n    </c8y-li-icon>\n    <c8y-li-body class=\"content-flex-60\">\n      <div class=\"col-2\">\n        {{ 'Configuration' | translate }}\n      </div>\n      <div class=\"col-3\">\n        {{ 'Description' | translate }}\n      </div>\n      <div class=\"col-3\">\n        {{ 'File' | translate }}\n      </div>\n      <div class=\"col-2\">\n        {{ 'Device type' | translate }}\n      </div>\n      <div class=\"col-2\">\n        {{ 'Configuration type' | translate }}\n      </div>\n    </c8y-li-body>\n  </c8y-li>\n\n  <c8y-li *c8yFor=\"let configuration of configurations$; pipe: filterPipe\">\n    <c8y-li-icon icon=\"gears\"></c8y-li-icon>\n    <div class=\"content-flex-60\">\n      <button\n        class=\"btn-clean col-2\"\n        title=\"{{ configuration.name || '-' }}\"\n        type=\"button\"\n        (click)=\"edit(configuration)\"\n      >\n        <span class=\"text-truncate\">\n          <c8y-highlight\n            [text]=\"configuration.name || '-'\"\n            elementClass=\"text-info\"\n            [pattern]=\"filterTerm\"\n          ></c8y-highlight>\n        </span>\n      </button>\n      <div class=\"col-3\">\n        <div class=\"text-label-small visible-xs-inline m-r-4\">\n          {{ 'Description' | translate }}\n        </div>\n        <small\n          class=\"text-truncate\"\n          title=\"configuration.description\"\n          *ngIf=\"configuration.description; else emptyDescription\"\n        >\n          <c8y-highlight\n            [text]=\"configuration.description || '-'\"\n            elementClass=\"text-info\"\n            [pattern]=\"filterTerm\"\n          ></c8y-highlight>\n        </small>\n      </div>\n      <div class=\"col-3\">\n        <span class=\"text-truncate\">\n          <span\n            class=\"text-label-small m-r-4 visible-xs-inline\"\n            translate\n          >\n            File\n          </span>\n          <small\n            title=\"{{ getBinaryName(configuration) | async }}\"\n            *ngIf=\"isBinaryFile(configuration); else noFile\"\n          >\n            {{ getBinaryName(configuration) | async }}\n          </small>\n          <ng-template #noFile>\n            <small title=\"{{ configuration.url }}\">\n              {{ configuration.url }}\n            </small>\n          </ng-template>\n        </span>\n      </div>\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ 'Device type' | translate }}: {{ configuration.deviceType || '-' }}\"\n        >\n          <span\n            class=\"text-label-small visible-xs-inline m-r-4\"\n            translate\n          >\n            Device type\n          </span>\n          <span *ngIf=\"configuration.deviceType; else emptyText\">\n            <c8y-highlight\n              [text]=\"configuration.deviceType || '-'\"\n              elementClass=\"text-info\"\n              [pattern]=\"filterTerm\"\n            ></c8y-highlight>\n          </span>\n        </div>\n      </div>\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ configuration.configurationType }}\"\n        >\n          <span\n            class=\"label label-primary\"\n            *ngIf=\"configuration.configurationType; else emptyText\"\n          >\n            <c8y-highlight\n              [text]=\"configuration.configurationType\"\n              elementClass=\"text-info\"\n              [pattern]=\"filterTerm\"\n            ></c8y-highlight>\n          </span>\n        </div>\n      </div>\n    </div>\n    <c8y-li-action\n      icon=\"pencil\"\n      (click)=\"edit(configuration)\"\n      label=\"{{ 'Edit' | translate }}\"\n    ></c8y-li-action>\n    <c8y-li-action\n      icon=\"delete\"\n      (click)=\"delete(configuration)\"\n      label=\"{{ 'Delete' | translate }}\"\n    ></c8y-li-action>\n    <c8y-li-action\n      icon=\"download\"\n      *ngIf=\"isBinaryFile(configuration)\"\n      (click)=\"download(configuration)\"\n      label=\"{{ 'Download' | translate }}\"\n    ></c8y-li-action>\n    <ng-template #emptyText>\n      <small class=\"text-muted\">\n        <em>{{ 'Undefined' | translate }}</em>\n      </small>\n    </ng-template>\n    <ng-template #emptyDescription>\n      <small class=\"text-muted\">\n        <em>{{ 'No description' | translate }}</em>\n      </small>\n    </ng-template>\n  </c8y-li>\n</c8y-list-group>\n", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.FilterInputComponent, selector: "c8y-filter", inputs: ["icon"], outputs: ["onSearch"] }, { kind: "directive", type: i2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i7$1.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: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ConfigurationListComponent, deps: [{ token: i2.AlertService }, { token: i2.DataGridService }, { token: i3.RepositoryService }, { token: i3$1.BsModalService }, { token: i2.ModalService }, { token: i4$2.TranslateService }, { token: i4.InventoryBinaryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ConfigurationListComponent, selector: "c8y-configuration-list", viewQueries: [{ propertyName: "filter", first: true, predicate: FilterInputComponent, descendants: true }], ngImport: i0, template: "<c8y-title>\n  <span\n    class=\"m-r-4\"\n    translate\n  >\n    Configuration repository\n  </span>\n  <small>\n    {{ size$ | async }}\n    <span translate>snapshots</span>\n  </small>\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=\"gears\"\n    label=\"{{ 'Configuration repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add configuration snapshot' | translate }}\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add configuration snapshot' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"'Configurations' | translate\"\n    [refresh]=\"refresh$\"\n    [pagination]=\"pagination\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [infiniteScroll]=\"'auto'\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'gears'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <ng-container *ngIf=\"stats?.size === 0\">\n        <p>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Add configuration snapshot' | translate }}\"\n            type=\"button\"\n            (click)=\"add()\"\n          >\n            {{ 'Add configuration snapshot' | translate }}\n          </button>\n        </p>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </ng-container>\n    </c8y-ui-empty-state>\n    <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n      <c8y-column [name]=\"column.name\"></c8y-column>\n    </ng-container>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: i2.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
-__decorate([
-    memoize(property('id')),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ConfigurationListComponent.prototype, "getBinaryName", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ConfigurationListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-configuration-list', template: "<c8y-title>\n  <span\n    class=\"m-r-4\"\n    translate\n  >\n    Configuration repository\n  </span>\n  <small *ngIf=\"(configurations$ | async)?.paging.totalPages === 1 && !filterTerm\">\n    {{ (configurations$ | async).data.length }}\n    <span translate>snapshots</span>\n  </small>\n  <small\n    [tooltip]=\"'More data available. Scroll to the bottom of the list to load it.' | translate\"\n    container=\"body\"\n    *ngIf=\"(configurations$ | async)?.paging.totalPages > 1 && !filterTerm\"\n  >\n    {{ (configurations$ | async).paging.pageSize }}+\n    <span translate>snapshots</span>\n  </small>\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=\"gears\"\n    label=\"{{ 'Configuration repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item itemClass=\"navbar-form\">\n  <c8y-filter\n    [icon]=\"'search'\"\n    (onSearch)=\"setPipe($event)\"\n  ></c8y-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add configuration snapshot' | translate }}\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add configuration snapshot' | translate }}\n  </button>\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)=\"loadConfigurations()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n></c8y-help>\n\n<!-- empty state -->\n<c8y-ui-empty-state\n  [icon]=\"'gears'\"\n  [title]=\"'There are no configuration snapshots defined.' | translate\"\n  [subtitle]=\"'Add a configuration snapshot first.' | translate\"\n  *ngIf=\"!filterTerm && (configurations$ | async)?.data.length === 0\"\n>\n  <div>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add configuration snapshot' | translate }}\"\n      type=\"button\"\n      (click)=\"add()\"\n    >\n      {{ 'Add configuration snapshot' | translate }}\n    </button>\n  </div>\n  <p c8y-guide-docs>\n    <small\n      translate\n      ngNonBindable\n    >\n      Find out more in the\n      <a\n        c8y-guide-href=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n      >\n        user documentation\n      </a>\n      .\n    </small>\n  </p>\n</c8y-ui-empty-state>\n\n<!-- no results empty state -->\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No results to display.' | translate\"\n  [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n  *ngIf=\"shouldShowEmptyState() && (configurations$ | async)?.data.length > 0\"\n></c8y-ui-empty-state>\n\n<c8y-list-group\n  class=\"m-b-24\"\n  *ngIf=\"(configurations$ | async)?.data.length > 0\"\n  [ngClass]=\"{\n    'dd-low': data && data.length ? data.length < 10 : (configurations$ | async)?.data.length < 10\n  }\"\n>\n  <c8y-li\n    class=\"page-sticky-header hidden-xs\"\n    [emptyActions]=\"true\"\n    *ngIf=\"!shouldShowEmptyState()\"\n  >\n    <c8y-li-icon>\n      <i class=\"p-l-24\"></i>\n    </c8y-li-icon>\n    <c8y-li-body class=\"content-flex-60\">\n      <div class=\"col-2\">\n        {{ 'Configuration' | translate }}\n      </div>\n      <div class=\"col-3\">\n        {{ 'Description' | translate }}\n      </div>\n      <div class=\"col-3\">\n        {{ 'File' | translate }}\n      </div>\n      <div class=\"col-2\">\n        {{ 'Device type' | translate }}\n      </div>\n      <div class=\"col-2\">\n        {{ 'Configuration type' | translate }}\n      </div>\n    </c8y-li-body>\n  </c8y-li>\n\n  <c8y-li *c8yFor=\"let configuration of configurations$; pipe: filterPipe\">\n    <c8y-li-icon icon=\"gears\"></c8y-li-icon>\n    <div class=\"content-flex-60\">\n      <button\n        class=\"btn-clean col-2\"\n        title=\"{{ configuration.name || '-' }}\"\n        type=\"button\"\n        (click)=\"edit(configuration)\"\n      >\n        <span class=\"text-truncate\">\n          <c8y-highlight\n            [text]=\"configuration.name || '-'\"\n            elementClass=\"text-info\"\n            [pattern]=\"filterTerm\"\n          ></c8y-highlight>\n        </span>\n      </button>\n      <div class=\"col-3\">\n        <div class=\"text-label-small visible-xs-inline m-r-4\">\n          {{ 'Description' | translate }}\n        </div>\n        <small\n          class=\"text-truncate\"\n          title=\"configuration.description\"\n          *ngIf=\"configuration.description; else emptyDescription\"\n        >\n          <c8y-highlight\n            [text]=\"configuration.description || '-'\"\n            elementClass=\"text-info\"\n            [pattern]=\"filterTerm\"\n          ></c8y-highlight>\n        </small>\n      </div>\n      <div class=\"col-3\">\n        <span class=\"text-truncate\">\n          <span\n            class=\"text-label-small m-r-4 visible-xs-inline\"\n            translate\n          >\n            File\n          </span>\n          <small\n            title=\"{{ getBinaryName(configuration) | async }}\"\n            *ngIf=\"isBinaryFile(configuration); else noFile\"\n          >\n            {{ getBinaryName(configuration) | async }}\n          </small>\n          <ng-template #noFile>\n            <small title=\"{{ configuration.url }}\">\n              {{ configuration.url }}\n            </small>\n          </ng-template>\n        </span>\n      </div>\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ 'Device type' | translate }}: {{ configuration.deviceType || '-' }}\"\n        >\n          <span\n            class=\"text-label-small visible-xs-inline m-r-4\"\n            translate\n          >\n            Device type\n          </span>\n          <span *ngIf=\"configuration.deviceType; else emptyText\">\n            <c8y-highlight\n              [text]=\"configuration.deviceType || '-'\"\n              elementClass=\"text-info\"\n              [pattern]=\"filterTerm\"\n            ></c8y-highlight>\n          </span>\n        </div>\n      </div>\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ configuration.configurationType }}\"\n        >\n          <span\n            class=\"label label-primary\"\n            *ngIf=\"configuration.configurationType; else emptyText\"\n          >\n            <c8y-highlight\n              [text]=\"configuration.configurationType\"\n              elementClass=\"text-info\"\n              [pattern]=\"filterTerm\"\n            ></c8y-highlight>\n          </span>\n        </div>\n      </div>\n    </div>\n    <c8y-li-action\n      icon=\"pencil\"\n      (click)=\"edit(configuration)\"\n      label=\"{{ 'Edit' | translate }}\"\n    ></c8y-li-action>\n    <c8y-li-action\n      icon=\"delete\"\n      (click)=\"delete(configuration)\"\n      label=\"{{ 'Delete' | translate }}\"\n    ></c8y-li-action>\n    <c8y-li-action\n      icon=\"download\"\n      *ngIf=\"isBinaryFile(configuration)\"\n      (click)=\"download(configuration)\"\n      label=\"{{ 'Download' | translate }}\"\n    ></c8y-li-action>\n    <ng-template #emptyText>\n      <small class=\"text-muted\">\n        <em>{{ 'Undefined' | translate }}</em>\n      </small>\n    </ng-template>\n    <ng-template #emptyDescription>\n      <small class=\"text-muted\">\n        <em>{{ 'No description' | translate }}</em>\n      </small>\n    </ng-template>\n  </c8y-li>\n</c8y-list-group>\n" }]
-        }], ctorParameters: () => [{ type: i2.AlertService }, { type: i3.RepositoryService }, { type: i3$1.BsModalService }, { type: i2.ModalService }, { type: i4$1.TranslateService }, { type: i5.InventoryBinaryService }, { type: i5.InventoryService }], propDecorators: { filter: [{
+            args: [{ selector: 'c8y-configuration-list', template: "<c8y-title>\n  <span\n    class=\"m-r-4\"\n    translate\n  >\n    Configuration repository\n  </span>\n  <small>\n    {{ size$ | async }}\n    <span translate>snapshots</span>\n  </small>\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=\"gears\"\n    label=\"{{ 'Configuration repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add configuration snapshot' | translate }}\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add configuration snapshot' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"'Configurations' | translate\"\n    [refresh]=\"refresh$\"\n    [pagination]=\"pagination\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [infiniteScroll]=\"'auto'\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'gears'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <ng-container *ngIf=\"stats?.size === 0\">\n        <p>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Add configuration snapshot' | translate }}\"\n            type=\"button\"\n            (click)=\"add()\"\n          >\n            {{ 'Add configuration snapshot' | translate }}\n          </button>\n        </p>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </ng-container>\n    </c8y-ui-empty-state>\n    <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n      <c8y-column [name]=\"column.name\"></c8y-column>\n    </ng-container>\n  </c8y-data-grid>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i2.AlertService }, { type: i2.DataGridService }, { type: i3.RepositoryService }, { type: i3$1.BsModalService }, { type: i2.ModalService }, { type: i4$2.TranslateService }, { type: i4.InventoryBinaryService }], propDecorators: { filter: [{
                 type: ViewChild,
                 args: [FilterInputComponent, { static: false }]
-            }], getBinaryName: [] } });
+            }] } });
 
 class ConfigurationRepositoryNavigationFactory {
     constructor() {