@c8y/ngx-components 1017.0.78 → 1017.0.81

package/fesm2015/c8y-ngx-components-register-device.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, InjectionToken, InjectFlags, ViewChild, Input, NgModule } from '@angular/core';
 import { __decorate, __metadata, __awaiter } from 'tslib';
-import * as i2$1 from '@c8y/ngx-components';
+import * as i2 from '@c8y/ngx-components';
 import { gettext, memoize, hookGeneric, fromTriggerOnce, Status, NavigatorNode, C8yStepper, CommonModule, CoreModule, StepperModule, DynamicFormsModule, hookNavigator, DeviceBootstrapRealtimeService } from '@c8y/ngx-components';
 import * as i6$1 from '@angular/forms';
 import { FormGroup } from '@angular/forms';
 import { Subject, BehaviorSubject, from, forkJoin, defer, Observable } from 'rxjs';
 import { takeUntil, finalize, mergeMap, takeLast, map, filter, switchMap, tap, shareReplay, startWith } from 'rxjs/operators';
-import * as i2 from '@c8y/client';
-import { DeviceRegistrationStatus, DeviceRegistrationSecurityMode } from '@c8y/client';
+import * as i1$1 from '@c8y/client';
+import { DeviceRegistrationStatus, DeviceRegistrationSecurityMode, ApplicationType } from '@c8y/client';
 import { get, pick, sortBy, flatMap } from 'lodash-es';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i1$1 from 'ngx-bootstrap/modal';
+import * as i1$2 from 'ngx-bootstrap/modal';
 import * as i5 from '@angular/common';
 import * as i6 from '@angular/cdk/stepper';
 import { STEP_STATE } from '@angular/cdk/stepper';
@@ -197,14 +197,14 @@ class RegisterDeviceService {
         return items;
     }
 }
-RegisterDeviceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceService, deps: [{ token: i1.Router }, { token: i2.DeviceRegistrationService }, { token: i2$1.AlertService }], target: i0.ɵɵFactoryTarget.Injectable });
+RegisterDeviceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceService, deps: [{ token: i1.Router }, { token: i1$1.DeviceRegistrationService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Injectable });
 RegisterDeviceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.DeviceRegistrationService }, { type: i2$1.AlertService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.DeviceRegistrationService }, { type: i2.AlertService }]; } });
 
 class GeneralDeviceRegistrationComponent {
     constructor(tenantUIService, tenantService, registerDeviceService, inventoryService, cd, bsModalRef, gainsightService) {
@@ -392,8 +392,8 @@ class GeneralDeviceRegistrationComponent {
         return defer(() => from(this.inventoryService.listQuery({ __filter: { __has: 'c8y_IsDeviceGroup' }, __orderby: [{ name: 1 }] }, Object.assign({}, this.FILTER)))).pipe(shareReplay(1));
     }
 }
-GeneralDeviceRegistrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GeneralDeviceRegistrationComponent, deps: [{ token: i2$1.TenantUiService }, { token: i2.TenantService }, { token: RegisterDeviceService }, { token: i2.InventoryService }, { token: i0.ChangeDetectorRef }, { token: i1$1.BsModalRef }, { token: i2$1.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-GeneralDeviceRegistrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: GeneralDeviceRegistrationComponent, selector: "c8y-general-device-registration", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Register devices' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'c8y-device-connect'\"></span>\n  </ng-container>\n  <c8y-stepper [hideStepProgress]=\"true\" linear c8y-modal-body>\n    <cdk-step [stepControl]=\"form\">\n      <div class=\"p-16 text-center sticky-top separator-bottom bg-component\">\n        <p class=\"text-medium text-16\" translate>Register a general device</p>\n      </div>\n      <div>\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"fields\"\n          [model]=\"model\"\n          [options]=\"options\"\n          class=\"formly-group-array-cols d-block p-24 min-height-fit p-r-8\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        (onNext)=\"create($event)\"\n        (onCancel)=\"bsModalRef.hide()\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"!form?.valid\"\n        [pending]=\"isLoading$ | async\"\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step state=\"final\">\n      <div class=\"p-24 min-height-fit\">\n        <c8y-operation-result\n          *ngIf=\"success.length === 1 && failed.length === 0\"\n          text=\"{{ 'Device registered' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"success\"\n          class=\"lead\"\n        ></c8y-operation-result>\n        <c8y-operation-result\n          *ngIf=\"success.length === 0 && failed.length === 1\"\n          text=\"{{ 'Failed to register device' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"error\"\n          class=\"lead\"\n        ></c8y-operation-result>\n\n        <ng-container *ngIf=\"success.length > 1 || failed.length > 1\">\n          <c8y-operation-result\n            *ngIf=\"failed.length === 0\"\n            [text]=\"\n              '{{ successfulDevicesCount }} devices registered'\n                | translate: { successfulDevicesCount: success.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n          ></c8y-operation-result>\n          <c8y-operation-result\n            *ngIf=\"success.length === 0\"\n            [text]=\"\n              '{{ failedDevicesCount }} devices failed to register'\n                | translate: { failedDevicesCount: failed.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </ng-container>\n\n        <div *ngIf=\"success.length > 0 && failed.length > 0\" class=\"p-l-24 p-r-24 text-center\">\n          <c8y-operation-result\n            text=\"{{ 'Several devices failed to register' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n          <p\n            ngNonBindable\n            translate\n            [translateParams]=\"{ count: failed.length, total: failed.length + success.length }\"\n            class=\"p-b-16 text-danger\"\n          >\n            Registration failed for {{ count }} devices out of {{ total }}.\n          </p>\n        </div>\n\n        <div class=\"m-b-8 p-l-24 p-r-24\" *ngIf=\"success.length > 0\" translate>\n          Turn on the registered device(s) and wait for connection(s) to be established. Once a\n          device is connected, its status will change to \"Pending acceptance\". You will need to\n          approve it by clicking on the \"Accept\" button.\n        </div>\n\n        <c8y-list-group class=\"separator-top m-t-16\">\n          <c8y-li *ngFor=\"let fail of failed\">\n            <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n            <p>{{ fail?.id }}</p>\n            <small>{{ fail?.message | translate }}</small>\n            <c8y-li-collapse>\n              <pre><code>{{ fail?.details | json }}</code></pre>\n            </c8y-li-collapse>\n          </c8y-li>\n\n          <c8y-li *ngFor=\"let s of success\">\n            <c8y-li-icon class=\"text-success\" [icon]=\"'check-circle'\"></c8y-li-icon>\n            {{ s?.id }}\n          </c8y-li>\n        </c8y-list-group>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        (onCustom)=\"bsModalRef.hide()\"\n        (onBack)=\"fixErrors($event, failed)\"\n        [showButtons]=\"{ back: failed.length > 0, custom: true }\"\n        [labels]=\"{ back: 'Fix errors', custom: 'Close' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2$1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2$1.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i6.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i2$1.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i2$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2$1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2$1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GeneralDeviceRegistrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GeneralDeviceRegistrationComponent, deps: [{ token: i2.TenantUiService }, { token: i1$1.TenantService }, { token: RegisterDeviceService }, { token: i1$1.InventoryService }, { token: i0.ChangeDetectorRef }, { token: i1$2.BsModalRef }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+GeneralDeviceRegistrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: GeneralDeviceRegistrationComponent, selector: "c8y-general-device-registration", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Register devices' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'c8y-device-connect'\"></span>\n  </ng-container>\n  <c8y-stepper [hideStepProgress]=\"true\" linear c8y-modal-body>\n    <cdk-step [stepControl]=\"form\">\n      <div class=\"p-16 text-center sticky-top separator-bottom bg-component\">\n        <p class=\"text-medium text-16\" translate>Register a general device</p>\n      </div>\n      <div>\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"fields\"\n          [model]=\"model\"\n          [options]=\"options\"\n          class=\"formly-group-array-cols d-block p-24 min-height-fit p-r-8\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        (onNext)=\"create($event)\"\n        (onCancel)=\"bsModalRef.hide()\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"!form?.valid\"\n        [pending]=\"isLoading$ | async\"\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step state=\"final\">\n      <div class=\"p-24 min-height-fit\">\n        <c8y-operation-result\n          *ngIf=\"success.length === 1 && failed.length === 0\"\n          text=\"{{ 'Device registered' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"success\"\n          class=\"lead\"\n        ></c8y-operation-result>\n        <c8y-operation-result\n          *ngIf=\"success.length === 0 && failed.length === 1\"\n          text=\"{{ 'Failed to register device' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"error\"\n          class=\"lead\"\n        ></c8y-operation-result>\n\n        <ng-container *ngIf=\"success.length > 1 || failed.length > 1\">\n          <c8y-operation-result\n            *ngIf=\"failed.length === 0\"\n            [text]=\"\n              '{{ successfulDevicesCount }} devices registered'\n                | translate: { successfulDevicesCount: success.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n          ></c8y-operation-result>\n          <c8y-operation-result\n            *ngIf=\"success.length === 0\"\n            [text]=\"\n              '{{ failedDevicesCount }} devices failed to register'\n                | translate: { failedDevicesCount: failed.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </ng-container>\n\n        <div *ngIf=\"success.length > 0 && failed.length > 0\" class=\"p-l-24 p-r-24 text-center\">\n          <c8y-operation-result\n            text=\"{{ 'Several devices failed to register' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n          <p\n            ngNonBindable\n            translate\n            [translateParams]=\"{ count: failed.length, total: failed.length + success.length }\"\n            class=\"p-b-16 text-danger\"\n          >\n            Registration failed for {{ count }} devices out of {{ total }}.\n          </p>\n        </div>\n\n        <div class=\"m-b-8 p-l-24 p-r-24\" *ngIf=\"success.length > 0\" translate>\n          Turn on the registered device(s) and wait for connection(s) to be established. Once a\n          device is connected, its status will change to \"Pending acceptance\". You will need to\n          approve it by clicking on the \"Accept\" button.\n        </div>\n\n        <c8y-list-group class=\"separator-top m-t-16\">\n          <c8y-li *ngFor=\"let fail of failed\">\n            <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n            <p>{{ fail?.id }}</p>\n            <small>{{ fail?.message | translate }}</small>\n            <c8y-li-collapse>\n              <pre><code>{{ fail?.details | json }}</code></pre>\n            </c8y-li-collapse>\n          </c8y-li>\n\n          <c8y-li *ngFor=\"let s of success\">\n            <c8y-li-icon class=\"text-success\" [icon]=\"'check-circle'\"></c8y-li-icon>\n            {{ s?.id }}\n          </c8y-li>\n        </c8y-list-group>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        (onCustom)=\"bsModalRef.hide()\"\n        (onBack)=\"fixErrors($event, failed)\"\n        [showButtons]=\"{ back: failed.length > 0, custom: true }\"\n        [labels]=\"{ back: 'Fix errors', custom: 'Close' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i6.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i2.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { 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.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     memoize(),
     __metadata("design:type", Function),
@@ -415,7 +415,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GeneralDeviceRegistrationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-general-device-registration', changeDetection: ChangeDetectionStrategy.OnPush, template: "<c8y-modal\n  [title]=\"'Register devices' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'c8y-device-connect'\"></span>\n  </ng-container>\n  <c8y-stepper [hideStepProgress]=\"true\" linear c8y-modal-body>\n    <cdk-step [stepControl]=\"form\">\n      <div class=\"p-16 text-center sticky-top separator-bottom bg-component\">\n        <p class=\"text-medium text-16\" translate>Register a general device</p>\n      </div>\n      <div>\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"fields\"\n          [model]=\"model\"\n          [options]=\"options\"\n          class=\"formly-group-array-cols d-block p-24 min-height-fit p-r-8\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        (onNext)=\"create($event)\"\n        (onCancel)=\"bsModalRef.hide()\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"!form?.valid\"\n        [pending]=\"isLoading$ | async\"\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step state=\"final\">\n      <div class=\"p-24 min-height-fit\">\n        <c8y-operation-result\n          *ngIf=\"success.length === 1 && failed.length === 0\"\n          text=\"{{ 'Device registered' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"success\"\n          class=\"lead\"\n        ></c8y-operation-result>\n        <c8y-operation-result\n          *ngIf=\"success.length === 0 && failed.length === 1\"\n          text=\"{{ 'Failed to register device' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          type=\"error\"\n          class=\"lead\"\n        ></c8y-operation-result>\n\n        <ng-container *ngIf=\"success.length > 1 || failed.length > 1\">\n          <c8y-operation-result\n            *ngIf=\"failed.length === 0\"\n            [text]=\"\n              '{{ successfulDevicesCount }} devices registered'\n                | translate: { successfulDevicesCount: success.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n          ></c8y-operation-result>\n          <c8y-operation-result\n            *ngIf=\"success.length === 0\"\n            [text]=\"\n              '{{ failedDevicesCount }} devices failed to register'\n                | translate: { failedDevicesCount: failed.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </ng-container>\n\n        <div *ngIf=\"success.length > 0 && failed.length > 0\" class=\"p-l-24 p-r-24 text-center\">\n          <c8y-operation-result\n            text=\"{{ 'Several devices failed to register' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n          <p\n            ngNonBindable\n            translate\n            [translateParams]=\"{ count: failed.length, total: failed.length + success.length }\"\n            class=\"p-b-16 text-danger\"\n          >\n            Registration failed for {{ count }} devices out of {{ total }}.\n          </p>\n        </div>\n\n        <div class=\"m-b-8 p-l-24 p-r-24\" *ngIf=\"success.length > 0\" translate>\n          Turn on the registered device(s) and wait for connection(s) to be established. Once a\n          device is connected, its status will change to \"Pending acceptance\". You will need to\n          approve it by clicking on the \"Accept\" button.\n        </div>\n\n        <c8y-list-group class=\"separator-top m-t-16\">\n          <c8y-li *ngFor=\"let fail of failed\">\n            <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n            <p>{{ fail?.id }}</p>\n            <small>{{ fail?.message | translate }}</small>\n            <c8y-li-collapse>\n              <pre><code>{{ fail?.details | json }}</code></pre>\n            </c8y-li-collapse>\n          </c8y-li>\n\n          <c8y-li *ngFor=\"let s of success\">\n            <c8y-li-icon class=\"text-success\" [icon]=\"'check-circle'\"></c8y-li-icon>\n            {{ s?.id }}\n          </c8y-li>\n        </c8y-list-group>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        (onCustom)=\"bsModalRef.hide()\"\n        (onBack)=\"fixErrors($event, failed)\"\n        [showButtons]=\"{ back: failed.length > 0, custom: true }\"\n        [labels]=\"{ back: 'Fix errors', custom: 'Close' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</c8y-modal>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$1.TenantUiService }, { type: i2.TenantService }, { type: RegisterDeviceService }, { type: i2.InventoryService }, { type: i0.ChangeDetectorRef }, { type: i1$1.BsModalRef }, { type: i2$1.GainsightService }]; }, propDecorators: { canLoadTenants$: [], getTenants$: [], getGroups$: [] } });
+        }], ctorParameters: function () { return [{ type: i2.TenantUiService }, { type: i1$1.TenantService }, { type: RegisterDeviceService }, { type: i1$1.InventoryService }, { type: i0.ChangeDetectorRef }, { type: i1$2.BsModalRef }, { type: i2.GainsightService }]; }, propDecorators: { canLoadTenants$: [], getTenants$: [], getGroups$: [] } });
 
 class GeneralDeviceRegistrationButtonComponent {
     constructor(modalService) {
@@ -430,12 +430,12 @@ class GeneralDeviceRegistrationButtonComponent {
         });
     }
 }
-GeneralDeviceRegistrationButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GeneralDeviceRegistrationButtonComponent, deps: [{ token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
-GeneralDeviceRegistrationButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: GeneralDeviceRegistrationButtonComponent, selector: "c8y-general-device-registration-button", ngImport: i0, template: "<button title=\"{{ 'General' | translate }}\" type=\"button\" (click)=\"open()\">\n  <i c8yIcon=\"c8y-device-connect\"></i>\n  {{ 'General' | translate }}\n</button>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] });
+GeneralDeviceRegistrationButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GeneralDeviceRegistrationButtonComponent, deps: [{ token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
+GeneralDeviceRegistrationButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: GeneralDeviceRegistrationButtonComponent, selector: "c8y-general-device-registration-button", ngImport: i0, template: "<button title=\"{{ 'General' | translate }}\" type=\"button\" (click)=\"open()\">\n  <i c8yIcon=\"c8y-device-connect\"></i>\n  {{ 'General' | translate }}\n</button>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GeneralDeviceRegistrationButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-general-device-registration-button', template: "<button title=\"{{ 'General' | translate }}\" type=\"button\" (click)=\"open()\">\n  <i c8yIcon=\"c8y-device-connect\"></i>\n  {{ 'General' | translate }}\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.BsModalService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.BsModalService }]; } });
 
 /**
  * A hook to use for Multi Provider extension.
@@ -506,10 +506,10 @@ class RegisterDeviceDropdownComponent {
     }
 }
 RegisterDeviceDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceDropdownComponent, deps: [{ token: RegisterDeviceExtensionService }, { token: RegisterDeviceService }], target: i0.ɵɵFactoryTarget.Component });
-RegisterDeviceDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: RegisterDeviceDropdownComponent, selector: "c8y-register-device-dropdown", ngImport: i0, template: "<div class=\"dropdown\" dropdown>\n  <button\n    *ngIf=\"!(limit$ | async); else disable\"\n    title=\"{{ 'Register device' | translate }}\"\n    type=\"button\"\n    class=\"dropdown-toggle c8y-dropdown d-flex a-i-center\"\n    dropdownToggle\n    aria-haspopup=\"true\"\n  >\n    <span class=\"text-truncate\" translate>Register device</span>\n    <i [c8yIcon]=\"'caret-down'\" class=\"m-l-4 text-primary\"></i>\n  </button>\n  <ng-template #disable>\n    <button\n      title=\"{{ 'Device registration disabled' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-clean d-flex p-l-8\"\n      disabled\n    >\n      <span class=\"text-truncate\" translate>Register device</span>\n      <i [c8yIcon]=\"'caret-down'\"></i>\n    </button>\n  </ng-template>\n\n  <!-- dropdown for normal screen sizes -->\n  <ul class=\"dropdown-menu dropdown-menu-right hidden-xs\" *dropdownMenu>\n    <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n  </ul>\n\n  <!-- fake dropdown for mobile screen sizes. *dropdownMenu is missing by design! -->\n  <ul class=\"dropdown-menu dropdown-menu visible-xs\">\n    <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n  </ul>\n\n  <ng-template #dropdown>\n    <ng-container *ngIf=\"single$ | async as single\">\n      <li class=\"dropdown-header\" *ngIf=\"single.length > 0\" translate data-cy=\"single-group\">Single registration</li>\n      <li *ngFor=\"let item of single\">\n        <ng-container *c8yOutlet=\"item.template\"></ng-container>\n      </li>\n    </ng-container>\n    <ng-container *ngIf=\"bulk$ | async as bulk\">\n      <li class=\"dropdown-header\" *ngIf=\"bulk.length > 0\" translate data-cy=\"bulk-group\">Bulk registration</li>\n      <li *ngFor=\"let item of bulk\">\n        <ng-container *c8yOutlet=\"item.template\"></ng-container>\n      </li>\n    </ng-container>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
+RegisterDeviceDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: RegisterDeviceDropdownComponent, selector: "c8y-register-device-dropdown", ngImport: i0, template: "<div class=\"dropdown\" dropdown>\n  <button\n    *ngIf=\"!(limit$ | async); else disable\"\n    title=\"{{ 'Register device' | translate }}\"\n    type=\"button\"\n    class=\"dropdown-toggle c8y-dropdown d-flex a-i-center\"\n    dropdownToggle\n    aria-haspopup=\"true\"\n  >\n    <span class=\"text-truncate\" translate>Register device</span>\n    <i [c8yIcon]=\"'caret-down'\" class=\"m-l-4 text-primary\"></i>\n  </button>\n  <ng-template #disable>\n    <button\n      title=\"{{ 'Device registration disabled' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-clean d-flex p-l-8\"\n      disabled\n    >\n      <span class=\"text-truncate\" translate>Register device</span>\n      <i [c8yIcon]=\"'caret-down'\"></i>\n    </button>\n  </ng-template>\n\n  <!-- dropdown for normal screen sizes -->\n  <ul class=\"dropdown-menu dropdown-menu-right hidden-xs\" data-cy=\"register-device--dropdown\" *dropdownMenu>\n    <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n  </ul>\n\n  <!-- fake dropdown for mobile screen sizes. *dropdownMenu is missing by design! -->\n  <ul class=\"dropdown-menu dropdown-menu visible-xs\">\n    <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n  </ul>\n\n  <ng-template #dropdown>\n    <ng-container *ngIf=\"single$ | async as single\">\n      <li class=\"dropdown-header\" *ngIf=\"single.length > 0\" translate data-cy=\"single-group\">Single registration</li>\n      <li *ngFor=\"let item of single\">\n        <ng-container *c8yOutlet=\"item.template\"></ng-container>\n      </li>\n    </ng-container>\n    <ng-container *ngIf=\"bulk$ | async as bulk\">\n      <li class=\"dropdown-header\" *ngIf=\"bulk.length > 0\" translate data-cy=\"bulk-group\">Bulk registration</li>\n      <li *ngFor=\"let item of bulk\">\n        <ng-container *c8yOutlet=\"item.template\"></ng-container>\n      </li>\n    </ng-container>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-register-device-dropdown', template: "<div class=\"dropdown\" dropdown>\n  <button\n    *ngIf=\"!(limit$ | async); else disable\"\n    title=\"{{ 'Register device' | translate }}\"\n    type=\"button\"\n    class=\"dropdown-toggle c8y-dropdown d-flex a-i-center\"\n    dropdownToggle\n    aria-haspopup=\"true\"\n  >\n    <span class=\"text-truncate\" translate>Register device</span>\n    <i [c8yIcon]=\"'caret-down'\" class=\"m-l-4 text-primary\"></i>\n  </button>\n  <ng-template #disable>\n    <button\n      title=\"{{ 'Device registration disabled' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-clean d-flex p-l-8\"\n      disabled\n    >\n      <span class=\"text-truncate\" translate>Register device</span>\n      <i [c8yIcon]=\"'caret-down'\"></i>\n    </button>\n  </ng-template>\n\n  <!-- dropdown for normal screen sizes -->\n  <ul class=\"dropdown-menu dropdown-menu-right hidden-xs\" *dropdownMenu>\n    <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n  </ul>\n\n  <!-- fake dropdown for mobile screen sizes. *dropdownMenu is missing by design! -->\n  <ul class=\"dropdown-menu dropdown-menu visible-xs\">\n    <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n  </ul>\n\n  <ng-template #dropdown>\n    <ng-container *ngIf=\"single$ | async as single\">\n      <li class=\"dropdown-header\" *ngIf=\"single.length > 0\" translate data-cy=\"single-group\">Single registration</li>\n      <li *ngFor=\"let item of single\">\n        <ng-container *c8yOutlet=\"item.template\"></ng-container>\n      </li>\n    </ng-container>\n    <ng-container *ngIf=\"bulk$ | async as bulk\">\n      <li class=\"dropdown-header\" *ngIf=\"bulk.length > 0\" translate data-cy=\"bulk-group\">Bulk registration</li>\n      <li *ngFor=\"let item of bulk\">\n        <ng-container *c8yOutlet=\"item.template\"></ng-container>\n      </li>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'c8y-register-device-dropdown', template: "<div class=\"dropdown\" dropdown>\n  <button\n    *ngIf=\"!(limit$ | async); else disable\"\n    title=\"{{ 'Register device' | translate }}\"\n    type=\"button\"\n    class=\"dropdown-toggle c8y-dropdown d-flex a-i-center\"\n    dropdownToggle\n    aria-haspopup=\"true\"\n  >\n    <span class=\"text-truncate\" translate>Register device</span>\n    <i [c8yIcon]=\"'caret-down'\" class=\"m-l-4 text-primary\"></i>\n  </button>\n  <ng-template #disable>\n    <button\n      title=\"{{ 'Device registration disabled' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-clean d-flex p-l-8\"\n      disabled\n    >\n      <span class=\"text-truncate\" translate>Register device</span>\n      <i [c8yIcon]=\"'caret-down'\"></i>\n    </button>\n  </ng-template>\n\n  <!-- dropdown for normal screen sizes -->\n  <ul class=\"dropdown-menu dropdown-menu-right hidden-xs\" data-cy=\"register-device--dropdown\" *dropdownMenu>\n    <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n  </ul>\n\n  <!-- fake dropdown for mobile screen sizes. *dropdownMenu is missing by design! -->\n  <ul class=\"dropdown-menu dropdown-menu visible-xs\">\n    <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n  </ul>\n\n  <ng-template #dropdown>\n    <ng-container *ngIf=\"single$ | async as single\">\n      <li class=\"dropdown-header\" *ngIf=\"single.length > 0\" translate data-cy=\"single-group\">Single registration</li>\n      <li *ngFor=\"let item of single\">\n        <ng-container *c8yOutlet=\"item.template\"></ng-container>\n      </li>\n    </ng-container>\n    <ng-container *ngIf=\"bulk$ | async as bulk\">\n      <li class=\"dropdown-header\" *ngIf=\"bulk.length > 0\" translate data-cy=\"bulk-group\">Bulk registration</li>\n      <li *ngFor=\"let item of bulk\">\n        <ng-container *c8yOutlet=\"item.template\"></ng-container>\n      </li>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: RegisterDeviceExtensionService }, { type: RegisterDeviceService }]; } });
 
 class DeviceRegistrationViewComponent {
@@ -628,12 +628,12 @@ class DeviceRegistrationViewComponent {
         return this._securityTokenPolicy.getValue() !== DeviceRegistrationSecurityMode.IGNORED;
     }
 }
-DeviceRegistrationViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DeviceRegistrationViewComponent, deps: [{ token: RegisterDeviceService }, { token: i2$1.DeviceBootstrapRealtimeService }, { token: i2$1.TenantUiService }, { token: i2$1.ModalService }, { token: i3$1.TranslateService }, { token: i2$1.OptionsService }], target: i0.ɵɵFactoryTarget.Component });
-DeviceRegistrationViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DeviceRegistrationViewComponent, selector: "c8y-device-registration-view", ngImport: i0, template: "<ng-container *ngIf=\"deviceRequests$ | async as deviceRequestList\">\n  <c8y-title>\n    {{ 'Device registration' | translate }}\n    <small *ngIf=\"deviceRequestList.data.length === 1\">1 {{ 'new device' | translate }}</small>\n    <small *ngIf=\"deviceRequestList.data.length > 1\">\n      {{ deviceRequestList.data.length }} {{ 'new devices' | translate }}\n    </small>\n  </c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item [icon]=\"'exchange'\" [label]=\"'Devices' | translate\"></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-device-connect'\"\n      [label]=\"'Device registration' | translate\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n\n  <c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n    <c8y-list-display-switch (onListClassChange)=\"displayMode($event)\"></c8y-list-display-switch>\n  </c8y-action-bar-item>\n\n  <ng-container *ngIf=\"limit$ | async as limitStatus\">\n    <c8y-action-bar-item [placement]=\"'right'\" [priority]=\"10\">\n      <button\n        *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n        class=\"btn btn-link\"\n        title=\"{{ 'Accept all' | translate }}\"\n        (click)=\"acceptAll()\"\n        [disabled]=\"canAcceptAll() || limitStatus?.isReached\"\n      >\n        <i [c8yIcon]=\"'check'\"></i>\n        {{ 'Accept all' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item [placement]=\"'right'\" [priority]=\"9\">\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadAll()\"\n        [disabled]=\"isLoading\"\n      >\n        <i [c8yIcon]=\"'refresh'\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\">\n      <c8y-register-device-dropdown></c8y-register-device-dropdown>\n    </c8y-action-bar-item>\n\n    <c8y-help src=\"/users-guide/device-management/#connecting-devices\"></c8y-help>\n\n    <ng-container *ngIf=\"deviceRequestList.data.length > 0; else noData\">\n      <div class=\"card-group\" [ngClass]=\"gridOrList\">\n        <!-- START interact-list sticky header START -->\n        <div *ngIf=\"gridOrList === 'interact-list'\" class=\"page-sticky-header hidden-xs\">\n          <div class=\"d-flex\">\n            <div class=\"card-header p-l-40\">\n              <p translate>Device</p>\n            </div>\n            <div class=\"card-block card-column-30 p-l-0 m-l-8\">\n              <p translate>Status</p>\n            </div>\n            <div class=\"card-block card-column-30 p-0\" *ngIf=\"showTokenInputBasedOnSecurityMode()\">\n              <p translate>Security token</p>\n              <button\n                class=\"btn-help\"\n                type=\"button\"\n                popover=\"{{\n                  'Security token is required if the connected device uses it.' | translate\n                }}\"\n                placement=\"right\"\n                container=\"body\"\n                [attr.aria-label]=\"'Help' | translate\"\n                triggers=\"focus\"\n              >\n                <i [c8yIcon]=\"'question-circle-o'\"></i>\n              </button>\n            </div>\n            <div class=\"card-footer card-column-50\">\n              <div class=\"d-contents\" *ngIf=\"isManagementTenant; else noManagement\">\n                <div class=\"card-column-50\">\n                  {{ 'Created' | translate }}\n                </div>\n                <div class=\"card-column-30\">\n                  {{ 'By`user`' | translate }}\n                </div>\n                <div class=\"card-column-20\">\n                  {{ 'Tenant ID' | translate }}\n                </div>\n              </div>\n              <ng-template #noManagement>\n                <div class=\"d-contents\">\n                  <div class=\"card-column-50\">\n                    {{ 'Created' | translate }}\n                  </div>\n                  <div class=\"card-column-50\">\n                    {{ 'By`user`' | translate }}\n                  </div>\n                </div>\n              </ng-template>\n            </div>\n            <div class=\"card-actions-group\" style=\"min-width: 176px\">\n              <div class=\"btn btn-xs invisible\">\n                <!--EMPTY by design-->\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END interact-list sticky header END -->\n\n        <div *ngIf=\"limitStatus?.isReached\" class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\">\n          <p class=\"alert alert-warning center-block\" role=\"alert\">\n            <strong>\n              {{ limitReachedInfo$ | async }}\n            </strong>\n            <br />\n            <span translate>Please contact your platform administrator.</span>\n          </p>\n        </div>\n\n        <ng-container *ngFor=\"let singleRequest of deviceRequestList.data\">\n          <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\">\n            <div class=\"card\">\n              <div class=\"card-header separator\">\n                <div class=\"card-icon\">\n                  <i\n                    [c8yIcon]=\"statusProps[singleRequest.status].icon\"\n                    [class]=\"statusProps[singleRequest.status].cls\"\n                  ></i>\n                </div>\n                <p class=\"card-title text-truncate\" title=\"{{ singleRequest.id }}\">{{ singleRequest.id }}</p>\n              </div>\n\n              <div class=\"card-block text-center card-column-30\">\n                <span class=\"text-label-small\" translate>Status</span>\n                <p>\n                  <i\n                    *ngIf=\"singleRequest.status === status.WAITING_FOR_CONNECTION\"\n                    c8yIcon=\"refresh\"\n                    class=\"icon-spin text-primary\"\n                  ></i>\n                  {{ statusProps[singleRequest.status].label | translate }}\n                </p>\n              </div>\n\n              <ng-container *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\">\n                <div\n                  class=\"card-block text-center card-column-30 p-t-0\"\n                  [ngClass]=\"{ 'p-b-0': !shouldShowSecurityTokenInput(singleRequest) }\"\n                  *ngIf=\"showTokenInputBasedOnSecurityMode()\"\n                >\n                  <ng-container *ngIf=\"shouldShowSecurityTokenInput(singleRequest)\">\n                    <span *ngIf=\"gridOrList !== 'interact-list'\" class=\"text-label-small\" translate>\n                      Security token\n                    </span>\n                    <input\n                      [(ngModel)]=\"singleRequest.securityToken\"\n                      type=\"text\"\n                      class=\"form-control\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'A1e3gh5ds' }\"\n                      [required]=\"requireSecurityToken\"\n                    />\n                  </ng-container>\n                </div>\n\n                <div\n                  class=\"card-actions-group d-flex a-i-center j-c-center\"\n                  style=\"min-width: 176px\"\n                >\n                  <button\n                    class=\"btn btn-sm\"\n                    [ngClass]=\"{\n                      'btn-danger': singleRequest.status === status.PENDING_ACCEPTANCE,\n                      'btn-default': singleRequest.status !== status.PENDING_ACCEPTANCE\n                    }\"\n                    title=\"{{\n                      singleRequest.status === status.PENDING_ACCEPTANCE\n                        ? ('Remove' | translate)\n                        : ('Cancel' | translate)\n                    }}\"\n                    type=\"button\"\n                    (click)=\"delete(singleRequest.id)\"\n                    [disabled]=\"isLoading\"\n                  >\n                    <span *ngIf=\"singleRequest.status === status.PENDING_ACCEPTANCE\">\n                      {{ 'Remove' | translate }}\n                    </span>\n                    <span *ngIf=\"singleRequest.status !== status.PENDING_ACCEPTANCE\">\n                      {{ 'Cancel' | translate }}\n                    </span>\n                  </button>\n                  <button\n                    class=\"btn btn-primary btn-sm\"\n                    title=\"{{ 'Accept' | translate }}\"\n                    type=\"button\"\n                    (click)=\"accept(singleRequest)\"\n                    *ngIf=\"singleRequest.status === status.PENDING_ACCEPTANCE\"\n                    [disabled]=\"\n                      isLoading ||\n                      limitStatus?.isReached ||\n                      (!singleRequest.securityToken && requireSecurityToken)\n                    \"\n                  >\n                    {{ 'Accept' | translate }}\n                  </button>\n                </div>\n              </ng-container>\n\n              <div class=\"card-footer separator text-center card-column-50\">\n                <small *ngIf=\"isManagementTenant; else noManagement\" class=\"d-contents\">\n                  <div class=\"d-contents\" *ngIf=\"singleRequest.creationTime && singleRequest.owner\">\n                    <span class=\"text-label-small\" translate>Created on`date`</span>\n                    <span class=\"card-column-50\">\n                      {{ singleRequest.creationTime | c8yDate }}\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>by`user`</span>\n                    <span class=\"card-column-30\">\n                      <span class=\"text-truncate\" title=\"{{ singleRequest.owner }}\">\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>in`tenant`</span>\n                    <span class=\"card-column-20\">{{ singleRequest.tenantId }}</span>\n                  </div>\n                  <div\n                    class=\"d-contents\"\n                    *ngIf=\"!singleRequest.creationTime || !singleRequest.owner\"\n                  >\n                    <div class=\"card-column-50\"></div>\n                    <div class=\"card-column-30\"></div>\n                    <span class=\"text-label-small\" translate>Created in`tenant`</span>\n                    <div class=\"card-column-20\">\n                      <span>\n                        {{ singleRequest.tenantId }}\n                      </span>\n                    </div>\n                  </div>\n                </small>\n                <ng-template #noManagement>\n                  <small class=\"d-contents\">\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>Created on`date`</span>\n                    <span class=\"card-column-50\">\n                      {{ singleRequest.creationTime | c8yDate }}\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>by`user`</span>\n                    <span class=\"card-column-50\">\n                      <span class=\"text-truncate\" title=\"{{ singleRequest.owner }}\">\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                  </small>\n                </ng-template>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <c8y-load-more\n        [paging]=\"deviceRequestList.paging\"\n        [hidden]=\"true\"\n        (onLoad)=\"updateList($event)\"\n      ></c8y-load-more>\n    </ng-container>\n\n    <ng-template #noData>\n      <div class=\"c8y-empty-state m-t-40 text-center\">\n        <h1 class=\"c8y-icon c8y-icon-device-connect c8y-icon-duocolor\"></h1>\n        <ng-container *ngIf=\"limitStatus?.isReached; else limitNotReached\">\n          <h3>\n            {{ limitReachedInfo$ | async }}\n          </h3>\n          <p translate>Please contact your platform administrator.</p>\n        </ng-container>\n        <ng-template #limitNotReached>\n          <h3 translate>No pending registrations to display.</h3>\n          <p *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\" translate>\n            Use the \"Register device\" dropdown in the top right corner.\n          </p>\n        </ng-template>\n      </div>\n    </ng-template>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i2$1.LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "component", type: i2$1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i2$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i6$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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2$1.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i2$1.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: RegisterDeviceDropdownComponent, selector: "c8y-register-device-dropdown" }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.DatePipe, name: "c8yDate" }] });
+DeviceRegistrationViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DeviceRegistrationViewComponent, deps: [{ token: RegisterDeviceService }, { token: i2.DeviceBootstrapRealtimeService }, { token: i2.TenantUiService }, { token: i2.ModalService }, { token: i3$1.TranslateService }, { token: i2.OptionsService }], target: i0.ɵɵFactoryTarget.Component });
+DeviceRegistrationViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DeviceRegistrationViewComponent, selector: "c8y-device-registration-view", ngImport: i0, template: "<ng-container *ngIf=\"deviceRequests$ | async as deviceRequestList\">\n  <c8y-title>\n    {{ 'Device registration' | translate }}\n    <small *ngIf=\"deviceRequestList.data.length === 1\">1 {{ 'new device' | translate }}</small>\n    <small *ngIf=\"deviceRequestList.data.length > 1\">\n      {{ deviceRequestList.data.length }} {{ 'new devices' | translate }}\n    </small>\n  </c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item [icon]=\"'exchange'\" [label]=\"'Devices' | translate\"></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-device-connect'\"\n      [label]=\"'Device registration' | translate\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n\n  <c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n    <c8y-list-display-switch (onListClassChange)=\"displayMode($event)\"></c8y-list-display-switch>\n  </c8y-action-bar-item>\n\n  <ng-container *ngIf=\"limit$ | async as limitStatus\">\n    <c8y-action-bar-item [placement]=\"'right'\" [priority]=\"10\">\n      <button\n        *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n        class=\"btn btn-link\"\n        title=\"{{ 'Accept all' | translate }}\"\n        (click)=\"acceptAll()\"\n        [disabled]=\"canAcceptAll() || limitStatus?.isReached\"\n      >\n        <i [c8yIcon]=\"'check'\"></i>\n        {{ 'Accept all' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item [placement]=\"'right'\" [priority]=\"9\">\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadAll()\"\n        [disabled]=\"isLoading\"\n      >\n        <i [c8yIcon]=\"'refresh'\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\">\n      <c8y-register-device-dropdown></c8y-register-device-dropdown>\n    </c8y-action-bar-item>\n\n    <c8y-help src=\"/users-guide/device-management/#connecting-devices\"></c8y-help>\n\n    <ng-container *ngIf=\"deviceRequestList.data.length > 0; else noData\">\n      <div class=\"card-group\" [ngClass]=\"gridOrList\">\n        <!-- START interact-list sticky header START -->\n        <div *ngIf=\"gridOrList === 'interact-list'\" class=\"page-sticky-header hidden-xs\">\n          <div class=\"d-flex\">\n            <div class=\"card-header p-l-40\">\n              <p translate>Device</p>\n            </div>\n            <div class=\"card-block card-column-30 p-l-0 m-l-8\">\n              <p translate>Status</p>\n            </div>\n            <div class=\"card-block card-column-30 p-0\" *ngIf=\"showTokenInputBasedOnSecurityMode()\">\n              <p translate>Security token</p>\n              <button\n                class=\"btn-help\"\n                type=\"button\"\n                popover=\"{{\n                  'Security token is required if the connected device uses it.' | translate\n                }}\"\n                placement=\"right\"\n                container=\"body\"\n                [attr.aria-label]=\"'Help' | translate\"\n                triggers=\"focus\"\n              >\n                <i [c8yIcon]=\"'question-circle-o'\"></i>\n              </button>\n            </div>\n            <div class=\"card-footer card-column-50\">\n              <div class=\"d-contents\" *ngIf=\"isManagementTenant; else noManagement\">\n                <div class=\"card-column-50\">\n                  {{ 'Created' | translate }}\n                </div>\n                <div class=\"card-column-30\">\n                  {{ 'By`user`' | translate }}\n                </div>\n                <div class=\"card-column-20\">\n                  {{ 'Tenant ID' | translate }}\n                </div>\n              </div>\n              <ng-template #noManagement>\n                <div class=\"d-contents\">\n                  <div class=\"card-column-50\">\n                    {{ 'Created' | translate }}\n                  </div>\n                  <div class=\"card-column-50\">\n                    {{ 'By`user`' | translate }}\n                  </div>\n                </div>\n              </ng-template>\n            </div>\n            <div class=\"card-actions-group\" style=\"min-width: 176px\">\n              <div class=\"btn btn-xs invisible\">\n                <!--EMPTY by design-->\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END interact-list sticky header END -->\n\n        <div *ngIf=\"limitStatus?.isReached\" class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\">\n          <p class=\"alert alert-warning center-block\" role=\"alert\">\n            <strong>\n              {{ limitReachedInfo$ | async }}\n            </strong>\n            <br />\n            <span translate>Please contact your platform administrator.</span>\n          </p>\n        </div>\n\n        <ng-container *ngFor=\"let singleRequest of deviceRequestList.data\">\n          <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\">\n            <div class=\"card\">\n              <div class=\"card-header separator\">\n                <div class=\"card-icon\">\n                  <i\n                    [c8yIcon]=\"statusProps[singleRequest.status].icon\"\n                    [class]=\"statusProps[singleRequest.status].cls\"\n                  ></i>\n                </div>\n                <p class=\"card-title text-truncate\" title=\"{{ singleRequest.id }}\">{{ singleRequest.id }}</p>\n              </div>\n\n              <div class=\"card-block text-center card-column-30\">\n                <span class=\"text-label-small\" translate>Status</span>\n                <p>\n                  <i\n                    *ngIf=\"singleRequest.status === status.WAITING_FOR_CONNECTION\"\n                    c8yIcon=\"refresh\"\n                    class=\"icon-spin text-primary\"\n                  ></i>\n                  {{ statusProps[singleRequest.status].label | translate }}\n                </p>\n              </div>\n\n              <ng-container *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\">\n                <div\n                  class=\"card-block text-center card-column-30 p-t-0\"\n                  [ngClass]=\"{ 'p-b-0': !shouldShowSecurityTokenInput(singleRequest) }\"\n                  *ngIf=\"showTokenInputBasedOnSecurityMode()\"\n                >\n                  <ng-container *ngIf=\"shouldShowSecurityTokenInput(singleRequest)\">\n                    <span *ngIf=\"gridOrList !== 'interact-list'\" class=\"text-label-small\" translate>\n                      Security token\n                    </span>\n                    <input\n                      [(ngModel)]=\"singleRequest.securityToken\"\n                      type=\"text\"\n                      class=\"form-control\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'A1e3gh5ds' }\"\n                      [required]=\"requireSecurityToken\"\n                    />\n                  </ng-container>\n                </div>\n\n                <div\n                  class=\"card-actions-group d-flex a-i-center j-c-center\"\n                  style=\"min-width: 176px\"\n                >\n                  <button\n                    class=\"btn btn-sm\"\n                    [ngClass]=\"{\n                      'btn-danger': singleRequest.status === status.PENDING_ACCEPTANCE,\n                      'btn-default': singleRequest.status !== status.PENDING_ACCEPTANCE\n                    }\"\n                    title=\"{{\n                      singleRequest.status === status.PENDING_ACCEPTANCE\n                        ? ('Remove' | translate)\n                        : ('Cancel' | translate)\n                    }}\"\n                    type=\"button\"\n                    (click)=\"delete(singleRequest.id)\"\n                    [disabled]=\"isLoading\"\n                  >\n                    <span *ngIf=\"singleRequest.status === status.PENDING_ACCEPTANCE\">\n                      {{ 'Remove' | translate }}\n                    </span>\n                    <span *ngIf=\"singleRequest.status !== status.PENDING_ACCEPTANCE\">\n                      {{ 'Cancel' | translate }}\n                    </span>\n                  </button>\n                  <button\n                    class=\"btn btn-primary btn-sm\"\n                    title=\"{{ 'Accept' | translate }}\"\n                    type=\"button\"\n                    (click)=\"accept(singleRequest)\"\n                    *ngIf=\"singleRequest.status === status.PENDING_ACCEPTANCE\"\n                    [disabled]=\"\n                      isLoading ||\n                      limitStatus?.isReached ||\n                      (!singleRequest.securityToken && requireSecurityToken)\n                    \"\n                  >\n                    {{ 'Accept' | translate }}\n                  </button>\n                </div>\n              </ng-container>\n\n              <div class=\"card-footer separator text-center card-column-50\">\n                <small *ngIf=\"isManagementTenant; else noManagement\" class=\"d-contents\">\n                  <div class=\"d-contents\" *ngIf=\"singleRequest.creationTime && singleRequest.owner\">\n                    <span class=\"text-label-small\" translate>Created on`date`</span>\n                    <span class=\"card-column-50\">\n                      {{ singleRequest.creationTime | c8yDate }}\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>by`user`</span>\n                    <span class=\"card-column-30\">\n                      <span class=\"text-truncate\" title=\"{{ singleRequest.owner }}\">\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>in`tenant`</span>\n                    <span class=\"card-column-20\">{{ singleRequest.tenantId }}</span>\n                  </div>\n                  <div\n                    class=\"d-contents\"\n                    *ngIf=\"!singleRequest.creationTime || !singleRequest.owner\"\n                  >\n                    <div class=\"card-column-50\"></div>\n                    <div class=\"card-column-30\"></div>\n                    <span class=\"text-label-small\" translate>Created in`tenant`</span>\n                    <div class=\"card-column-20\">\n                      <span>\n                        {{ singleRequest.tenantId }}\n                      </span>\n                    </div>\n                  </div>\n                </small>\n                <ng-template #noManagement>\n                  <small class=\"d-contents\">\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>Created on`date`</span>\n                    <span class=\"card-column-50\">\n                      {{ singleRequest.creationTime | c8yDate }}\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>by`user`</span>\n                    <span class=\"card-column-50\">\n                      <span class=\"text-truncate\" title=\"{{ singleRequest.owner }}\">\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                  </small>\n                </ng-template>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <c8y-load-more\n        [paging]=\"deviceRequestList.paging\"\n        [hidden]=\"true\"\n        (onLoad)=\"updateList($event)\"\n      ></c8y-load-more>\n    </ng-container>\n\n    <ng-template #noData>\n      <div class=\"c8y-empty-state m-t-40 text-center\">\n        <h1 class=\"c8y-icon c8y-icon-device-connect c8y-icon-duocolor\"></h1>\n        <ng-container *ngIf=\"limitStatus?.isReached; else limitNotReached\">\n          <h3>\n            {{ limitReachedInfo$ | async }}\n          </h3>\n          <p translate>Please contact your platform administrator.</p>\n        </ng-container>\n        <ng-template #limitNotReached>\n          <h3 translate>No pending registrations to display.</h3>\n          <p *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\" translate>\n            Use the \"Register device\" dropdown in the top right corner.\n          </p>\n        </ng-template>\n      </div>\n    </ng-template>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i2.LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { 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.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i6$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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i2.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: RegisterDeviceDropdownComponent, selector: "c8y-register-device-dropdown" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DeviceRegistrationViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-registration-view', template: "<ng-container *ngIf=\"deviceRequests$ | async as deviceRequestList\">\n  <c8y-title>\n    {{ 'Device registration' | translate }}\n    <small *ngIf=\"deviceRequestList.data.length === 1\">1 {{ 'new device' | translate }}</small>\n    <small *ngIf=\"deviceRequestList.data.length > 1\">\n      {{ deviceRequestList.data.length }} {{ 'new devices' | translate }}\n    </small>\n  </c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item [icon]=\"'exchange'\" [label]=\"'Devices' | translate\"></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-device-connect'\"\n      [label]=\"'Device registration' | translate\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n\n  <c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n    <c8y-list-display-switch (onListClassChange)=\"displayMode($event)\"></c8y-list-display-switch>\n  </c8y-action-bar-item>\n\n  <ng-container *ngIf=\"limit$ | async as limitStatus\">\n    <c8y-action-bar-item [placement]=\"'right'\" [priority]=\"10\">\n      <button\n        *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n        class=\"btn btn-link\"\n        title=\"{{ 'Accept all' | translate }}\"\n        (click)=\"acceptAll()\"\n        [disabled]=\"canAcceptAll() || limitStatus?.isReached\"\n      >\n        <i [c8yIcon]=\"'check'\"></i>\n        {{ 'Accept all' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item [placement]=\"'right'\" [priority]=\"9\">\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadAll()\"\n        [disabled]=\"isLoading\"\n      >\n        <i [c8yIcon]=\"'refresh'\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\">\n      <c8y-register-device-dropdown></c8y-register-device-dropdown>\n    </c8y-action-bar-item>\n\n    <c8y-help src=\"/users-guide/device-management/#connecting-devices\"></c8y-help>\n\n    <ng-container *ngIf=\"deviceRequestList.data.length > 0; else noData\">\n      <div class=\"card-group\" [ngClass]=\"gridOrList\">\n        <!-- START interact-list sticky header START -->\n        <div *ngIf=\"gridOrList === 'interact-list'\" class=\"page-sticky-header hidden-xs\">\n          <div class=\"d-flex\">\n            <div class=\"card-header p-l-40\">\n              <p translate>Device</p>\n            </div>\n            <div class=\"card-block card-column-30 p-l-0 m-l-8\">\n              <p translate>Status</p>\n            </div>\n            <div class=\"card-block card-column-30 p-0\" *ngIf=\"showTokenInputBasedOnSecurityMode()\">\n              <p translate>Security token</p>\n              <button\n                class=\"btn-help\"\n                type=\"button\"\n                popover=\"{{\n                  'Security token is required if the connected device uses it.' | translate\n                }}\"\n                placement=\"right\"\n                container=\"body\"\n                [attr.aria-label]=\"'Help' | translate\"\n                triggers=\"focus\"\n              >\n                <i [c8yIcon]=\"'question-circle-o'\"></i>\n              </button>\n            </div>\n            <div class=\"card-footer card-column-50\">\n              <div class=\"d-contents\" *ngIf=\"isManagementTenant; else noManagement\">\n                <div class=\"card-column-50\">\n                  {{ 'Created' | translate }}\n                </div>\n                <div class=\"card-column-30\">\n                  {{ 'By`user`' | translate }}\n                </div>\n                <div class=\"card-column-20\">\n                  {{ 'Tenant ID' | translate }}\n                </div>\n              </div>\n              <ng-template #noManagement>\n                <div class=\"d-contents\">\n                  <div class=\"card-column-50\">\n                    {{ 'Created' | translate }}\n                  </div>\n                  <div class=\"card-column-50\">\n                    {{ 'By`user`' | translate }}\n                  </div>\n                </div>\n              </ng-template>\n            </div>\n            <div class=\"card-actions-group\" style=\"min-width: 176px\">\n              <div class=\"btn btn-xs invisible\">\n                <!--EMPTY by design-->\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END interact-list sticky header END -->\n\n        <div *ngIf=\"limitStatus?.isReached\" class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\">\n          <p class=\"alert alert-warning center-block\" role=\"alert\">\n            <strong>\n              {{ limitReachedInfo$ | async }}\n            </strong>\n            <br />\n            <span translate>Please contact your platform administrator.</span>\n          </p>\n        </div>\n\n        <ng-container *ngFor=\"let singleRequest of deviceRequestList.data\">\n          <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\">\n            <div class=\"card\">\n              <div class=\"card-header separator\">\n                <div class=\"card-icon\">\n                  <i\n                    [c8yIcon]=\"statusProps[singleRequest.status].icon\"\n                    [class]=\"statusProps[singleRequest.status].cls\"\n                  ></i>\n                </div>\n                <p class=\"card-title text-truncate\" title=\"{{ singleRequest.id }}\">{{ singleRequest.id }}</p>\n              </div>\n\n              <div class=\"card-block text-center card-column-30\">\n                <span class=\"text-label-small\" translate>Status</span>\n                <p>\n                  <i\n                    *ngIf=\"singleRequest.status === status.WAITING_FOR_CONNECTION\"\n                    c8yIcon=\"refresh\"\n                    class=\"icon-spin text-primary\"\n                  ></i>\n                  {{ statusProps[singleRequest.status].label | translate }}\n                </p>\n              </div>\n\n              <ng-container *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\">\n                <div\n                  class=\"card-block text-center card-column-30 p-t-0\"\n                  [ngClass]=\"{ 'p-b-0': !shouldShowSecurityTokenInput(singleRequest) }\"\n                  *ngIf=\"showTokenInputBasedOnSecurityMode()\"\n                >\n                  <ng-container *ngIf=\"shouldShowSecurityTokenInput(singleRequest)\">\n                    <span *ngIf=\"gridOrList !== 'interact-list'\" class=\"text-label-small\" translate>\n                      Security token\n                    </span>\n                    <input\n                      [(ngModel)]=\"singleRequest.securityToken\"\n                      type=\"text\"\n                      class=\"form-control\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'A1e3gh5ds' }\"\n                      [required]=\"requireSecurityToken\"\n                    />\n                  </ng-container>\n                </div>\n\n                <div\n                  class=\"card-actions-group d-flex a-i-center j-c-center\"\n                  style=\"min-width: 176px\"\n                >\n                  <button\n                    class=\"btn btn-sm\"\n                    [ngClass]=\"{\n                      'btn-danger': singleRequest.status === status.PENDING_ACCEPTANCE,\n                      'btn-default': singleRequest.status !== status.PENDING_ACCEPTANCE\n                    }\"\n                    title=\"{{\n                      singleRequest.status === status.PENDING_ACCEPTANCE\n                        ? ('Remove' | translate)\n                        : ('Cancel' | translate)\n                    }}\"\n                    type=\"button\"\n                    (click)=\"delete(singleRequest.id)\"\n                    [disabled]=\"isLoading\"\n                  >\n                    <span *ngIf=\"singleRequest.status === status.PENDING_ACCEPTANCE\">\n                      {{ 'Remove' | translate }}\n                    </span>\n                    <span *ngIf=\"singleRequest.status !== status.PENDING_ACCEPTANCE\">\n                      {{ 'Cancel' | translate }}\n                    </span>\n                  </button>\n                  <button\n                    class=\"btn btn-primary btn-sm\"\n                    title=\"{{ 'Accept' | translate }}\"\n                    type=\"button\"\n                    (click)=\"accept(singleRequest)\"\n                    *ngIf=\"singleRequest.status === status.PENDING_ACCEPTANCE\"\n                    [disabled]=\"\n                      isLoading ||\n                      limitStatus?.isReached ||\n                      (!singleRequest.securityToken && requireSecurityToken)\n                    \"\n                  >\n                    {{ 'Accept' | translate }}\n                  </button>\n                </div>\n              </ng-container>\n\n              <div class=\"card-footer separator text-center card-column-50\">\n                <small *ngIf=\"isManagementTenant; else noManagement\" class=\"d-contents\">\n                  <div class=\"d-contents\" *ngIf=\"singleRequest.creationTime && singleRequest.owner\">\n                    <span class=\"text-label-small\" translate>Created on`date`</span>\n                    <span class=\"card-column-50\">\n                      {{ singleRequest.creationTime | c8yDate }}\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>by`user`</span>\n                    <span class=\"card-column-30\">\n                      <span class=\"text-truncate\" title=\"{{ singleRequest.owner }}\">\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>in`tenant`</span>\n                    <span class=\"card-column-20\">{{ singleRequest.tenantId }}</span>\n                  </div>\n                  <div\n                    class=\"d-contents\"\n                    *ngIf=\"!singleRequest.creationTime || !singleRequest.owner\"\n                  >\n                    <div class=\"card-column-50\"></div>\n                    <div class=\"card-column-30\"></div>\n                    <span class=\"text-label-small\" translate>Created in`tenant`</span>\n                    <div class=\"card-column-20\">\n                      <span>\n                        {{ singleRequest.tenantId }}\n                      </span>\n                    </div>\n                  </div>\n                </small>\n                <ng-template #noManagement>\n                  <small class=\"d-contents\">\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>Created on`date`</span>\n                    <span class=\"card-column-50\">\n                      {{ singleRequest.creationTime | c8yDate }}\n                    </span>\n                    <span class=\"text-label-small m-l-4 m-r-4\" translate>by`user`</span>\n                    <span class=\"card-column-50\">\n                      <span class=\"text-truncate\" title=\"{{ singleRequest.owner }}\">\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                  </small>\n                </ng-template>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <c8y-load-more\n        [paging]=\"deviceRequestList.paging\"\n        [hidden]=\"true\"\n        (onLoad)=\"updateList($event)\"\n      ></c8y-load-more>\n    </ng-container>\n\n    <ng-template #noData>\n      <div class=\"c8y-empty-state m-t-40 text-center\">\n        <h1 class=\"c8y-icon c8y-icon-device-connect c8y-icon-duocolor\"></h1>\n        <ng-container *ngIf=\"limitStatus?.isReached; else limitNotReached\">\n          <h3>\n            {{ limitReachedInfo$ | async }}\n          </h3>\n          <p translate>Please contact your platform administrator.</p>\n        </ng-container>\n        <ng-template #limitNotReached>\n          <h3 translate>No pending registrations to display.</h3>\n          <p *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\" translate>\n            Use the \"Register device\" dropdown in the top right corner.\n          </p>\n        </ng-template>\n      </div>\n    </ng-template>\n  </ng-container>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: RegisterDeviceService }, { type: i2$1.DeviceBootstrapRealtimeService }, { type: i2$1.TenantUiService }, { type: i2$1.ModalService }, { type: i3$1.TranslateService }, { type: i2$1.OptionsService }]; } });
+        }], ctorParameters: function () { return [{ type: RegisterDeviceService }, { type: i2.DeviceBootstrapRealtimeService }, { type: i2.TenantUiService }, { type: i2.ModalService }, { type: i3$1.TranslateService }, { type: i2.OptionsService }]; } });
 
 class RegisterDeviceNavigationFactory {
     constructor(permissions) {
@@ -658,26 +658,16 @@ class RegisterDeviceNavigationFactory {
         return nav;
     }
 }
-RegisterDeviceNavigationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceNavigationFactory, deps: [{ token: i2$1.Permissions }], target: i0.ɵɵFactoryTarget.Injectable });
+RegisterDeviceNavigationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceNavigationFactory, deps: [{ token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Injectable });
 RegisterDeviceNavigationFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceNavigationFactory });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RegisterDeviceNavigationFactory, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2$1.Permissions }]; } });
+        }], ctorParameters: function () { return [{ type: i2.Permissions }]; } });
 
 class BaseExtensibleDeviceRegistrationService {
-    constructor(router, stateService, client, tenantUiService) {
-        this.tenantUiService = tenantUiService;
-        this.router = router;
+    constructor(applicationService, stateService) {
+        this.applicationService = applicationService;
         this.stateService = stateService;
-        this.client = client;
-    }
-    getDeviceRegistrationProviders(bulk) {
-        let providers = [];
-        const microservices = this.tenantUiService.getSubscribedMicroservicesInCurrentTenant();
-        if (microservices && microservices.length > 0) {
-            providers = this.getProvidersFromManifestExtensions(microservices, bulk).concat(this.getProvidersFromExtensions(microservices, bulk));
-        }
-        return providers;
     }
     getMetadataUrl(contextPath) {
         return `${this.getServiceBaseUrl(contextPath)}/metadata`;
@@ -688,6 +678,28 @@ class BaseExtensibleDeviceRegistrationService {
         }
         return `/service/${contextPath}/deviceRegistration`;
     }
+    getDeviceRegistrationProviders(bulk) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let providers = [];
+            const microservices = yield this.listMicroservicesByUser();
+            if (microservices && microservices.length > 0) {
+                providers = this.getProvidersFromManifestExtensions(microservices, bulk).concat(this.getProvidersFromExtensions(microservices, bulk));
+            }
+            return providers;
+        });
+    }
+    listMicroservicesByUser() {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            const { data } = yield this.applicationService.listByUser((_c = (_b = (_a = this.stateService) === null || _a === void 0 ? void 0 : _a.currentUser) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.userName, {
+                dropOverwrittenApps: true,
+                noPaging: true,
+                pageSize: 100,
+                withTotalPages: true
+            });
+            return data === null || data === void 0 ? void 0 : data.filter(({ type }) => type === ApplicationType.MICROSERVICE);
+        });
+    }
     getProvidersFromManifestExtensions(applications, bulk) {
         return flatMap(applications, application => {
             var _a, _b;
@@ -715,8 +727,11 @@ class BaseExtensibleDeviceRegistrationService {
 }
 
 class ExtensibleDeviceRegistrationService extends BaseExtensibleDeviceRegistrationService {
-    constructor(router, stateService, client, tenantUiService) {
-        super(router, stateService, client, tenantUiService);
+    constructor(applicationService, stateService, client) {
+        super(applicationService, stateService);
+        this.applicationService = applicationService;
+        this.stateService = stateService;
+        this.client = client;
     }
     getSchema(contextPath) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -748,11 +763,11 @@ class ExtensibleDeviceRegistrationService extends BaseExtensibleDeviceRegistrati
         });
     }
 }
-ExtensibleDeviceRegistrationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationService, deps: [{ token: i1.Router }, { token: i2$1.AppStateService }, { token: i2.FetchClient }, { token: i2$1.TenantUiService }], target: i0.ɵɵFactoryTarget.Injectable });
+ExtensibleDeviceRegistrationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationService, deps: [{ token: i1$1.ApplicationService }, { token: i2.AppStateService }, { token: i1$1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable });
 ExtensibleDeviceRegistrationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2$1.AppStateService }, { type: i2.FetchClient }, { type: i2$1.TenantUiService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.ApplicationService }, { type: i2.AppStateService }, { type: i1$1.FetchClient }]; } });
 
 class ExtensibleDeviceRegistrationStepperComponent {
     constructor(customProviderService, registerDeviceService, bsModalRef) {
@@ -831,12 +846,12 @@ class ExtensibleDeviceRegistrationStepperComponent {
         this.errorMessage = message;
     }
 }
-ExtensibleDeviceRegistrationStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationStepperComponent, deps: [{ token: ExtensibleDeviceRegistrationService }, { token: RegisterDeviceService }, { token: i1$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-ExtensibleDeviceRegistrationStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleDeviceRegistrationStepperComponent, selector: "c8y-extensible-device-registration-stepper", inputs: { contextPath: "contextPath", labels: "labels", steps: "steps" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-stepper\n  [disableProgressButtons]=\"true\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n  [customClasses]=\"['m-40', 'm-t-8', 'm-b-16']\"\n>\n  <cdk-step *ngFor=\"let step of steps; let i = index\" [stepControl]=\"forms[i]\" [label]=\"labels[i]\">\n    <c8y-form-group class=\"form-group p-24 p-b-0 p-t-16\">\n      <formly-form [form]=\"forms[i]\" [fields]=\"step\" [model]=\"model\"></formly-form>\n    </c8y-form-group>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      *ngIf=\"isRegistrationStep()\"\n      [showButtons]=\"{ cancel: true, back: true, next: true }\"\n      [labels]=\"{ next: 'Register' }\"\n      (onCancel)=\"close()\"\n      (onNext)=\"save()\"\n      [pending]=\"pendingStatus\"\n      [disabled]=\"forms[i].invalid\"\n    ></c8y-stepper-buttons>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      *ngIf=\"!isRegistrationStep()\"\n      [showButtons]=\"{ cancel: true, back: i !== 0, next: true }\"\n      [disabled]=\"forms[i].invalid\"\n      (onCancel)=\"close()\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n  <cdk-step [state]=\"finalStepStatus()\" label=\"{{ 'Summary' | translate }}\">\n    <c8y-operation-result\n      *ngIf=\"!errorMessage; else errorInfo\"\n      text=\"{{ message | translate }}\"\n      [size]=\"84\"\n      [vertical]=\"true\"\n      type=\"success\"\n      class=\"lead\"\n      data-cy=\"success\"\n    ></c8y-operation-result>\n    <ng-template #errorInfo>\n      <c8y-operation-result\n        text=\"{{ errorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"error\"\n        class=\"lead\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n    </ng-template>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      [showButtons]=\"{ cancel: errorMessage, back: errorMessage, next: !errorMessage }\"\n      [labels]=\"{ back: 'Fix issue', next: 'Close' }\"\n      (onCancel)=\"close()\"\n      (onNext)=\"complete()\"\n      (onBack)=\"goToFirstStep()\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n</c8y-stepper>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2$1.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i6.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i2$1.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] });
+ExtensibleDeviceRegistrationStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationStepperComponent, deps: [{ token: ExtensibleDeviceRegistrationService }, { token: RegisterDeviceService }, { token: i1$2.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleDeviceRegistrationStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleDeviceRegistrationStepperComponent, selector: "c8y-extensible-device-registration-stepper", inputs: { contextPath: "contextPath", labels: "labels", steps: "steps" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-stepper\n  [disableProgressButtons]=\"true\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n  [customClasses]=\"['m-40', 'm-t-8', 'm-b-16']\"\n>\n  <cdk-step *ngFor=\"let step of steps; let i = index\" [stepControl]=\"forms[i]\" [label]=\"labels[i]\">\n    <c8y-form-group class=\"form-group p-24 p-b-0 p-t-16\">\n      <formly-form [form]=\"forms[i]\" [fields]=\"step\" [model]=\"model\"></formly-form>\n    </c8y-form-group>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      *ngIf=\"isRegistrationStep()\"\n      [showButtons]=\"{ cancel: true, back: true, next: true }\"\n      [labels]=\"{ next: 'Register' }\"\n      (onCancel)=\"close()\"\n      (onNext)=\"save()\"\n      [pending]=\"pendingStatus\"\n      [disabled]=\"forms[i].invalid\"\n    ></c8y-stepper-buttons>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      *ngIf=\"!isRegistrationStep()\"\n      [showButtons]=\"{ cancel: true, back: i !== 0, next: true }\"\n      [disabled]=\"forms[i].invalid\"\n      (onCancel)=\"close()\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n  <cdk-step [state]=\"finalStepStatus()\" label=\"{{ 'Summary' | translate }}\">\n    <c8y-operation-result\n      *ngIf=\"!errorMessage; else errorInfo\"\n      text=\"{{ message | translate }}\"\n      [size]=\"84\"\n      [vertical]=\"true\"\n      type=\"success\"\n      class=\"lead\"\n      data-cy=\"success\"\n    ></c8y-operation-result>\n    <ng-template #errorInfo>\n      <c8y-operation-result\n        text=\"{{ errorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"error\"\n        class=\"lead\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n    </ng-template>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      [showButtons]=\"{ cancel: errorMessage, back: errorMessage, next: !errorMessage }\"\n      [labels]=\"{ back: 'Fix issue', next: 'Close' }\"\n      (onCancel)=\"close()\"\n      (onNext)=\"complete()\"\n      (onBack)=\"goToFirstStep()\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n</c8y-stepper>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i6.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i2.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-extensible-device-registration-stepper', template: "<c8y-stepper\n  [disableProgressButtons]=\"true\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n  [customClasses]=\"['m-40', 'm-t-8', 'm-b-16']\"\n>\n  <cdk-step *ngFor=\"let step of steps; let i = index\" [stepControl]=\"forms[i]\" [label]=\"labels[i]\">\n    <c8y-form-group class=\"form-group p-24 p-b-0 p-t-16\">\n      <formly-form [form]=\"forms[i]\" [fields]=\"step\" [model]=\"model\"></formly-form>\n    </c8y-form-group>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      *ngIf=\"isRegistrationStep()\"\n      [showButtons]=\"{ cancel: true, back: true, next: true }\"\n      [labels]=\"{ next: 'Register' }\"\n      (onCancel)=\"close()\"\n      (onNext)=\"save()\"\n      [pending]=\"pendingStatus\"\n      [disabled]=\"forms[i].invalid\"\n    ></c8y-stepper-buttons>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      *ngIf=\"!isRegistrationStep()\"\n      [showButtons]=\"{ cancel: true, back: i !== 0, next: true }\"\n      [disabled]=\"forms[i].invalid\"\n      (onCancel)=\"close()\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n  <cdk-step [state]=\"finalStepStatus()\" label=\"{{ 'Summary' | translate }}\">\n    <c8y-operation-result\n      *ngIf=\"!errorMessage; else errorInfo\"\n      text=\"{{ message | translate }}\"\n      [size]=\"84\"\n      [vertical]=\"true\"\n      type=\"success\"\n      class=\"lead\"\n      data-cy=\"success\"\n    ></c8y-operation-result>\n    <ng-template #errorInfo>\n      <c8y-operation-result\n        text=\"{{ errorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"error\"\n        class=\"lead\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n    </ng-template>\n    <c8y-stepper-buttons\n      class=\"sticky-bottom d-block modal-footer separator-top bg-component\"\n      [showButtons]=\"{ cancel: errorMessage, back: errorMessage, next: !errorMessage }\"\n      [labels]=\"{ back: 'Fix issue', next: 'Close' }\"\n      (onCancel)=\"close()\"\n      (onNext)=\"complete()\"\n      (onBack)=\"goToFirstStep()\"\n    ></c8y-stepper-buttons>\n  </cdk-step>\n</c8y-stepper>\n" }]
-        }], ctorParameters: function () { return [{ type: ExtensibleDeviceRegistrationService }, { type: RegisterDeviceService }, { type: i1$1.BsModalRef }]; }, propDecorators: { stepper: [{
+        }], ctorParameters: function () { return [{ type: ExtensibleDeviceRegistrationService }, { type: RegisterDeviceService }, { type: i1$2.BsModalRef }]; }, propDecorators: { stepper: [{
                 type: ViewChild,
                 args: [C8yStepper, { static: true }]
             }], contextPath: [{
@@ -873,12 +888,12 @@ class ExtensibleDeviceRegistrationModalComponent {
         });
     }
 }
-ExtensibleDeviceRegistrationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationModalComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2$1.C8yJSONSchema }, { token: ExtensibleDeviceRegistrationService }], target: i0.ɵɵFactoryTarget.Component });
-ExtensibleDeviceRegistrationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleDeviceRegistrationModalComponent, selector: "extensible-device-registration-modal", ngImport: i0, template: "<c8y-modal [title]=\"title | translate\" [headerClasses]=\"'dialog-header'\" [customFooter]=\"true\">\n  <ng-container c8y-modal-title>\n    <span class=\"c8y-icon c8y-icon-device-connect\"></span>\n  </ng-container>\n  <ng-container *ngIf=\"pages as steps; else loadingOrError\">\n    <c8y-extensible-device-registration-stepper\n      c8y-modal-body\n      [steps]=\"steps\"\n      [labels]=\"labels\"\n      [contextPath]=\"contextPath\"\n    ></c8y-extensible-device-registration-stepper>\n  </ng-container>\n  <ng-template #loadingOrError>\n    <ng-container *ngIf=\"loadingErrorMessage; else loading\">\n      <c8y-operation-result\n        text=\"{{ loadingErrorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"error\"\n        class=\"lead text-regular\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n      <div class=\"modal-footer\">\n        <button\n          title=\"{{ 'Close' | translate }}\"\n          (click)=\"bsModalRef.hide()\"\n          type=\"button\"\n          class=\"btn btn-default\"\n        >\n          {{ 'Close' | translate }}\n        </button>\n      </div>\n    </ng-container>\n    <ng-template #loading>\n      <div class=\"modal-header modal-header-info text-center\">\n        <c8y-progress-bar\n          [message]=\"'Loading the registration form definition\u2026' | translate\"\n          class=\"text-center\"\n        ></c8y-progress-bar>\n      </div>\n    </ng-template>\n  </ng-template>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: i2$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2$1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: ExtensibleDeviceRegistrationStepperComponent, selector: "c8y-extensible-device-registration-stepper", inputs: ["contextPath", "labels", "steps"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] });
+ExtensibleDeviceRegistrationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationModalComponent, deps: [{ token: i1$2.BsModalRef }, { token: i2.C8yJSONSchema }, { token: ExtensibleDeviceRegistrationService }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleDeviceRegistrationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleDeviceRegistrationModalComponent, selector: "extensible-device-registration-modal", ngImport: i0, template: "<c8y-modal [title]=\"title | translate\" [headerClasses]=\"'dialog-header'\" [customFooter]=\"true\">\n  <ng-container c8y-modal-title>\n    <span class=\"c8y-icon c8y-icon-device-connect\"></span>\n  </ng-container>\n  <ng-container *ngIf=\"pages as steps; else loadingOrError\">\n    <c8y-extensible-device-registration-stepper\n      c8y-modal-body\n      [steps]=\"steps\"\n      [labels]=\"labels\"\n      [contextPath]=\"contextPath\"\n    ></c8y-extensible-device-registration-stepper>\n  </ng-container>\n  <ng-template #loadingOrError>\n    <ng-container *ngIf=\"loadingErrorMessage; else loading\">\n      <c8y-operation-result\n        text=\"{{ loadingErrorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"error\"\n        class=\"lead text-regular\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n      <div class=\"modal-footer\">\n        <button\n          title=\"{{ 'Close' | translate }}\"\n          (click)=\"bsModalRef.hide()\"\n          type=\"button\"\n          class=\"btn btn-default\"\n        >\n          {{ 'Close' | translate }}\n        </button>\n      </div>\n    </ng-container>\n    <ng-template #loading>\n      <div class=\"modal-header modal-header-info text-center\">\n        <c8y-progress-bar\n          [message]=\"'Loading the registration form definition\u2026' | translate\"\n          class=\"text-center\"\n        ></c8y-progress-bar>\n      </div>\n    </ng-template>\n  </ng-template>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: ExtensibleDeviceRegistrationStepperComponent, selector: "c8y-extensible-device-registration-stepper", inputs: ["contextPath", "labels", "steps"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'extensible-device-registration-modal', template: "<c8y-modal [title]=\"title | translate\" [headerClasses]=\"'dialog-header'\" [customFooter]=\"true\">\n  <ng-container c8y-modal-title>\n    <span class=\"c8y-icon c8y-icon-device-connect\"></span>\n  </ng-container>\n  <ng-container *ngIf=\"pages as steps; else loadingOrError\">\n    <c8y-extensible-device-registration-stepper\n      c8y-modal-body\n      [steps]=\"steps\"\n      [labels]=\"labels\"\n      [contextPath]=\"contextPath\"\n    ></c8y-extensible-device-registration-stepper>\n  </ng-container>\n  <ng-template #loadingOrError>\n    <ng-container *ngIf=\"loadingErrorMessage; else loading\">\n      <c8y-operation-result\n        text=\"{{ loadingErrorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"error\"\n        class=\"lead text-regular\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n      <div class=\"modal-footer\">\n        <button\n          title=\"{{ 'Close' | translate }}\"\n          (click)=\"bsModalRef.hide()\"\n          type=\"button\"\n          class=\"btn btn-default\"\n        >\n          {{ 'Close' | translate }}\n        </button>\n      </div>\n    </ng-container>\n    <ng-template #loading>\n      <div class=\"modal-header modal-header-info text-center\">\n        <c8y-progress-bar\n          [message]=\"'Loading the registration form definition\u2026' | translate\"\n          class=\"text-center\"\n        ></c8y-progress-bar>\n      </div>\n    </ng-template>\n  </ng-template>\n</c8y-modal>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i2$1.C8yJSONSchema }, { type: ExtensibleDeviceRegistrationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.BsModalRef }, { type: i2.C8yJSONSchema }, { type: ExtensibleDeviceRegistrationService }]; } });
 
 class ExtensibleDeviceRegistrationButtonComponent {
     constructor(deviceRegistrationService, modalService) {
@@ -899,16 +914,19 @@ class ExtensibleDeviceRegistrationButtonComponent {
         });
     }
 }
-ExtensibleDeviceRegistrationButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationButtonComponent, deps: [{ token: ExtensibleDeviceRegistrationService }, { token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
-ExtensibleDeviceRegistrationButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleDeviceRegistrationButtonComponent, selector: "extensible-device-registration-provider", ngImport: i0, template: "<div *ngFor=\"let provider of providersMetaData\">\n  <button title=\"{{ provider.name | translate }}\" type=\"button\" (click)=\"click(provider)\">\n    <i c8yIcon=\"c8y-device-connect\"></i>\n    {{ provider.name | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] });
+ExtensibleDeviceRegistrationButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationButtonComponent, deps: [{ token: ExtensibleDeviceRegistrationService }, { token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleDeviceRegistrationButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleDeviceRegistrationButtonComponent, selector: "extensible-device-registration-provider", ngImport: i0, template: "<div *ngFor=\"let provider of providersMetaData | async\">\n  <button title=\"{{ provider.name | translate }}\" type=\"button\" (click)=\"click(provider)\">\n    <i c8yIcon=\"c8y-device-connect\"></i>\n    {{ provider.name | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleDeviceRegistrationButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'extensible-device-registration-provider', template: "<div *ngFor=\"let provider of providersMetaData\">\n  <button title=\"{{ provider.name | translate }}\" type=\"button\" (click)=\"click(provider)\">\n    <i c8yIcon=\"c8y-device-connect\"></i>\n    {{ provider.name | translate }}\n  </button>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ExtensibleDeviceRegistrationService }, { type: i1$1.BsModalService }]; } });
+            args: [{ selector: 'extensible-device-registration-provider', template: "<div *ngFor=\"let provider of providersMetaData | async\">\n  <button title=\"{{ provider.name | translate }}\" type=\"button\" (click)=\"click(provider)\">\n    <i c8yIcon=\"c8y-device-connect\"></i>\n    {{ provider.name | translate }}\n  </button>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ExtensibleDeviceRegistrationService }, { type: i1$2.BsModalService }]; } });
 
 class BulkExtensibleDeviceRegistrationService extends BaseExtensibleDeviceRegistrationService {
-    constructor(router, stateService, client, tenantUiService) {
-        super(router, stateService, client, tenantUiService);
+    constructor(applicationService, stateService, client) {
+        super(applicationService, stateService);
+        this.applicationService = applicationService;
+        this.stateService = stateService;
+        this.client = client;
     }
     getDeviceRegistrationProviders() {
         return super.getDeviceRegistrationProviders(true);
@@ -943,11 +961,11 @@ class BulkExtensibleDeviceRegistrationService extends BaseExtensibleDeviceRegist
         return body;
     }
 }
-BulkExtensibleDeviceRegistrationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkExtensibleDeviceRegistrationService, deps: [{ token: i1.Router }, { token: i2$1.AppStateService }, { token: i2.FetchClient }, { token: i2$1.TenantUiService }], target: i0.ɵɵFactoryTarget.Injectable });
+BulkExtensibleDeviceRegistrationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkExtensibleDeviceRegistrationService, deps: [{ token: i1$1.ApplicationService }, { token: i2.AppStateService }, { token: i1$1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable });
 BulkExtensibleDeviceRegistrationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkExtensibleDeviceRegistrationService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkExtensibleDeviceRegistrationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2$1.AppStateService }, { type: i2.FetchClient }, { type: i2$1.TenantUiService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.ApplicationService }, { type: i2.AppStateService }, { type: i1$1.FetchClient }]; } });
 
 const bulkSchema$1 = {
     $schema: 'https://json-schema.org/draft/2019-09/schema',
@@ -1039,12 +1057,12 @@ class ExtensibleBulkDeviceRegistrationModalComponent {
         this.bsModalRef.hide();
     }
 }
-ExtensibleBulkDeviceRegistrationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleBulkDeviceRegistrationModalComponent, deps: [{ token: i2$1.C8yJSONSchema }, { token: BulkExtensibleDeviceRegistrationService }, { token: RegisterDeviceService }, { token: i1$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-ExtensibleBulkDeviceRegistrationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleBulkDeviceRegistrationModalComponent, selector: "extensible-device-registration-modal-component", viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"title | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <i c8yIcon=\"c8y-device-connect\"></i>\n  </ng-container>\n  <c8y-stepper [hideStepProgress]=\"true\" linear class=\"p-t-16\" c8y-modal-body>\n    <ng-container *ngIf=\"!loadingError\">\n      <cdk-step>\n        <div class=\"sticky-top bg-component separator-bottom\">\n          <p\n            class=\"p-l-24 p-r-24 p-t-16 p-b-16 m-b-0 separator-bottom text-16 text-medium text-center bg-component\"\n            translate\n          >\n            Register devices in bulk\n          </p>\n          <c8y-form-group class=\"p-24 p-t-16 p-b-8 m-b-0\">\n            <formly-form [form]=\"form\" [fields]=\"template\" [model]=\"model\"></formly-form>\n          </c8y-form-group>\n        </div>\n        <div\n          *ngFor=\"let example of examples\"\n          class=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\"\n        >\n          <p class=\"m-b-8 text-medium\">\n            {{ example.title | translate }}\n          </p>\n          <p class=\"small m-b-8\">{{ example.description | translate }}</p>\n          <a\n            title=\"{{ 'Download template' | translate }}\"\n            class=\"btn btn-default btn-sm\"\n            target=\"_self\"\n            [href]=\"example.url\"\n            download=\"{{ 'Example bulk registration - template.csv' | translate }}\"\n          >\n            <i c8yIcon=\"download\"></i>\n            <span translate>Download template</span>\n          </a>\n        </div>\n        <c8y-stepper-buttons\n          class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n          [showButtons]=\"{ cancel: true, next: true }\"\n          [disabled]=\"form.invalid\"\n          [pending]=\"pending\"\n          (onCancel)=\"cancel()\"\n          (onNext)=\"upload()\"\n          [labels]=\"{ next: 'Upload' }\"\n        ></c8y-stepper-buttons>\n      </cdk-step>\n    </ng-container>\n    <cdk-step state=\"final\">\n      <div class=\"p-24\">\n        <div *ngIf=\"success; else fail\">\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n            data-cy=\"success\"\n          ></c8y-operation-result>\n          <c8y-list-group class=\"separator-top m-t-16\">\n            <c8y-li>\n              <c8y-li-icon class=\"text-success\" [icon]=\"'check-circle'\"></c8y-li-icon>\n              <p translate>File successfully uploaded.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n        <ng-template #fail>\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n            data-cy=\"error\"\n          ></c8y-operation-result>\n          <c8y-list-group *ngIf=\"result\" class=\"separator-top m-t-16\">\n            <c8y-li>\n              <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n              <p translate>Bulk operation failed.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </c8y-list-group>\n        </ng-template>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-component\"\n        [showButtons]=\"{ next: true }\"\n        (onNext)=\"complete()\"\n        [labels]=\"{ next: success ? 'Complete' : 'Cancel' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2$1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2$1.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i6.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i2$1.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i2$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2$1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2$1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] });
+ExtensibleBulkDeviceRegistrationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleBulkDeviceRegistrationModalComponent, deps: [{ token: i2.C8yJSONSchema }, { token: BulkExtensibleDeviceRegistrationService }, { token: RegisterDeviceService }, { token: i1$2.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleBulkDeviceRegistrationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleBulkDeviceRegistrationModalComponent, selector: "extensible-device-registration-modal-component", viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"title | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <i c8yIcon=\"c8y-device-connect\"></i>\n  </ng-container>\n  <c8y-stepper [hideStepProgress]=\"true\" linear class=\"p-t-16\" c8y-modal-body>\n    <ng-container *ngIf=\"!loadingError\">\n      <cdk-step>\n        <div class=\"sticky-top bg-component separator-bottom\">\n          <p\n            class=\"p-l-24 p-r-24 p-t-16 p-b-16 m-b-0 separator-bottom text-16 text-medium text-center bg-component\"\n            translate\n          >\n            Register devices in bulk\n          </p>\n          <c8y-form-group class=\"p-24 p-t-16 p-b-8 m-b-0\">\n            <formly-form [form]=\"form\" [fields]=\"template\" [model]=\"model\"></formly-form>\n          </c8y-form-group>\n        </div>\n        <div\n          *ngFor=\"let example of examples\"\n          class=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\"\n        >\n          <p class=\"m-b-8 text-medium\">\n            {{ example.title | translate }}\n          </p>\n          <p class=\"small m-b-8\">{{ example.description | translate }}</p>\n          <a\n            title=\"{{ 'Download template' | translate }}\"\n            class=\"btn btn-default btn-sm\"\n            target=\"_self\"\n            [href]=\"example.url\"\n            download=\"{{ 'Example bulk registration - template.csv' | translate }}\"\n          >\n            <i c8yIcon=\"download\"></i>\n            <span translate>Download template</span>\n          </a>\n        </div>\n        <c8y-stepper-buttons\n          class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n          [showButtons]=\"{ cancel: true, next: true }\"\n          [disabled]=\"form.invalid\"\n          [pending]=\"pending\"\n          (onCancel)=\"cancel()\"\n          (onNext)=\"upload()\"\n          [labels]=\"{ next: 'Upload' }\"\n        ></c8y-stepper-buttons>\n      </cdk-step>\n    </ng-container>\n    <cdk-step state=\"final\">\n      <div class=\"p-24\">\n        <div *ngIf=\"success; else fail\">\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n            data-cy=\"success\"\n          ></c8y-operation-result>\n          <c8y-list-group class=\"separator-top m-t-16\">\n            <c8y-li>\n              <c8y-li-icon class=\"text-success\" [icon]=\"'check-circle'\"></c8y-li-icon>\n              <p translate>File successfully uploaded.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n        <ng-template #fail>\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n            data-cy=\"error\"\n          ></c8y-operation-result>\n          <c8y-list-group *ngIf=\"result\" class=\"separator-top m-t-16\">\n            <c8y-li>\n              <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n              <p translate>Bulk operation failed.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </c8y-list-group>\n        </ng-template>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-component\"\n        [showButtons]=\"{ next: true }\"\n        (onNext)=\"complete()\"\n        [labels]=\"{ next: success ? 'Complete' : 'Cancel' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i6.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i2.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { 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.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleBulkDeviceRegistrationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'extensible-device-registration-modal-component', template: "<c8y-modal\n  [title]=\"title | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <i c8yIcon=\"c8y-device-connect\"></i>\n  </ng-container>\n  <c8y-stepper [hideStepProgress]=\"true\" linear class=\"p-t-16\" c8y-modal-body>\n    <ng-container *ngIf=\"!loadingError\">\n      <cdk-step>\n        <div class=\"sticky-top bg-component separator-bottom\">\n          <p\n            class=\"p-l-24 p-r-24 p-t-16 p-b-16 m-b-0 separator-bottom text-16 text-medium text-center bg-component\"\n            translate\n          >\n            Register devices in bulk\n          </p>\n          <c8y-form-group class=\"p-24 p-t-16 p-b-8 m-b-0\">\n            <formly-form [form]=\"form\" [fields]=\"template\" [model]=\"model\"></formly-form>\n          </c8y-form-group>\n        </div>\n        <div\n          *ngFor=\"let example of examples\"\n          class=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\"\n        >\n          <p class=\"m-b-8 text-medium\">\n            {{ example.title | translate }}\n          </p>\n          <p class=\"small m-b-8\">{{ example.description | translate }}</p>\n          <a\n            title=\"{{ 'Download template' | translate }}\"\n            class=\"btn btn-default btn-sm\"\n            target=\"_self\"\n            [href]=\"example.url\"\n            download=\"{{ 'Example bulk registration - template.csv' | translate }}\"\n          >\n            <i c8yIcon=\"download\"></i>\n            <span translate>Download template</span>\n          </a>\n        </div>\n        <c8y-stepper-buttons\n          class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n          [showButtons]=\"{ cancel: true, next: true }\"\n          [disabled]=\"form.invalid\"\n          [pending]=\"pending\"\n          (onCancel)=\"cancel()\"\n          (onNext)=\"upload()\"\n          [labels]=\"{ next: 'Upload' }\"\n        ></c8y-stepper-buttons>\n      </cdk-step>\n    </ng-container>\n    <cdk-step state=\"final\">\n      <div class=\"p-24\">\n        <div *ngIf=\"success; else fail\">\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n            data-cy=\"success\"\n          ></c8y-operation-result>\n          <c8y-list-group class=\"separator-top m-t-16\">\n            <c8y-li>\n              <c8y-li-icon class=\"text-success\" [icon]=\"'check-circle'\"></c8y-li-icon>\n              <p translate>File successfully uploaded.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n        <ng-template #fail>\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n            data-cy=\"error\"\n          ></c8y-operation-result>\n          <c8y-list-group *ngIf=\"result\" class=\"separator-top m-t-16\">\n            <c8y-li>\n              <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n              <p translate>Bulk operation failed.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </c8y-list-group>\n        </ng-template>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-component\"\n        [showButtons]=\"{ next: true }\"\n        (onNext)=\"complete()\"\n        [labels]=\"{ next: success ? 'Complete' : 'Cancel' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</c8y-modal>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$1.C8yJSONSchema }, { type: BulkExtensibleDeviceRegistrationService }, { type: RegisterDeviceService }, { type: i1$1.BsModalRef }]; }, propDecorators: { stepper: [{
+        }], ctorParameters: function () { return [{ type: i2.C8yJSONSchema }, { type: BulkExtensibleDeviceRegistrationService }, { type: RegisterDeviceService }, { type: i1$2.BsModalRef }]; }, propDecorators: { stepper: [{
                 type: ViewChild,
                 args: [C8yStepper, { static: true }]
             }] } });
@@ -1157,12 +1175,12 @@ class BulkDeviceRegistrationModalComponent {
         return csvBulkFile ? (_a = csvBulkFile[0]) === null || _a === void 0 ? void 0 : _a.file : undefined;
     }
 }
-BulkDeviceRegistrationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkDeviceRegistrationModalComponent, deps: [{ token: i1.Router }, { token: i2$1.C8yJSONSchema }, { token: i2.DeviceRegistrationBulkService }, { token: RegisterDeviceService }, { token: i1$1.BsModalRef }, { token: i2$1.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-BulkDeviceRegistrationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BulkDeviceRegistrationModalComponent, selector: "bulk-device-registration", viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Bulk device registration' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <i c8yIcon=\"upload\"></i>\n  </ng-container>\n\n  <c8y-stepper [hideStepProgress]=\"true\" linear id=\"modal-body\">\n    <cdk-step>\n      <p class=\"modal-subtitle sticky-top\" translate>Register devices in bulk</p>\n\n      <c8y-form-group class=\"d-block p-24 p-t-16 p-b-0 m-b-0\">\n        <formly-form [form]=\"form\" [fields]=\"template\" [model]=\"model\"></formly-form>\n      </c8y-form-group>\n\n      <div class=\"p-24 m-t-0 bg-level-1\">\n        <div class=\"content-flex-30 flex-stretch\">\n          <div class=\"col-6 p-16 p-b-0 d-flex d-col j-c-between\">\n            <div>\n              <p class=\"m-b-8\">\n                <strong translate>Simple registration</strong>\n              </p>\n              <small class=\"text-muted\" translate>\n                Creates all registration requests at once, then each one needs to go through regular\n                acceptance process.\n              </small>\n            </div>\n            <div class=\"m-b-16 m-t-16\">\n              <a\n                title=\"{{ 'Download template' | translate }}\"\n                class=\"btn btn-default btn-sm\"\n                target=\"_self\"\n                (click)=\"downloadSimple()\"\n              >\n                <i c8yIcon=\"download\" translate></i>\n                {{ 'Download template' | translate }}\n              </a>\n            </div>\n          </div>\n          <div class=\"col-6 p-16 p-b-0 d-flex d-col j-c-between\">\n            <div>\n              <p class=\"m-b-8\">\n                <strong translate>Full registration</strong>\n              </p>\n              <small class=\"text-muted\" translate>\n                Creates all device credentials and devices using provided list of property values.\n                Devices can start communicating with the platform immediately.\n              </small>\n            </div>\n            <div class=\"m-b-16 m-t-16\">\n              <a\n                title=\"{{ 'Download template' | translate }}\"\n                class=\"btn btn-default btn-sm\"\n                target=\"_self\"\n                (click)=\"downloadFull()\"\n              >\n                <i c8yIcon=\"download\" translate></i>\n                {{ 'Download template' | translate }}\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"form.invalid\"\n        [pending]=\"pending\"\n        (onCancel)=\"cancel()\"\n        (onNext)=\"upload()\"\n        [labels]=\"{ next: 'Upload' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n\n    <cdk-step state=\"final\">\n      <div class=\"m-24\">\n        <div *ngIf=\"success; else warning\">\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </div>\n        <ng-template #warning>\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </ng-template>\n        <c8y-list-group class=\"separator-top m-t-16\">\n          <ng-container *ngIf=\"result; else failedResponse\">\n            <c8y-li *ngIf=\"success; else fail\">\n              <c8y-li-icon class=\"text-success\" icon=\"check-circle\"></c8y-li-icon>\n              <p>All devices processed successfully.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n            <ng-template #fail>\n              <c8y-li>\n                <c8y-li-icon class=\"text-danger\" icon=\"ban\"></c8y-li-icon>\n                <p\n                  ngNonBindable\n                  [translateParams]=\"{ count: result?.numberOfFailed, total: result?.numberOfAll }\"\n                  translate\n                >\n                  Failed to process {{ count }} out of {{ total }}.\n                </p>\n                <c8y-li-collapse>\n                  <pre><code>{{ result | json }}</code></pre>\n                </c8y-li-collapse>\n              </c8y-li>\n            </ng-template>\n          </ng-container>\n          <ng-template #failedResponse>\n            <c8y-li>\n              <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n              <small>{{ failedResult?.message | translate }}</small>\n              <c8y-li-collapse>\n                <pre><code>{{ failedResult | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </ng-template>\n        </c8y-list-group>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        [showButtons]=\"{ next: true }\"\n        (onNext)=\"complete()\"\n        [labels]=\"{ next: success ? 'Close' : 'Cancel' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    \n  </c8y-stepper>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2$1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2$1.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i6.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i2$1.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i2$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2$1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2$1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] });
+BulkDeviceRegistrationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkDeviceRegistrationModalComponent, deps: [{ token: i1.Router }, { token: i2.C8yJSONSchema }, { token: i1$1.DeviceRegistrationBulkService }, { token: RegisterDeviceService }, { token: i1$2.BsModalRef }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+BulkDeviceRegistrationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BulkDeviceRegistrationModalComponent, selector: "bulk-device-registration", viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Bulk device registration' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <i c8yIcon=\"upload\"></i>\n  </ng-container>\n\n  <c8y-stepper [hideStepProgress]=\"true\" linear id=\"modal-body\">\n    <cdk-step>\n      <p class=\"modal-subtitle sticky-top\" translate>Register devices in bulk</p>\n\n      <c8y-form-group class=\"d-block p-24 p-t-16 p-b-0 m-b-0\">\n        <formly-form [form]=\"form\" [fields]=\"template\" [model]=\"model\"></formly-form>\n      </c8y-form-group>\n\n      <div class=\"p-24 m-t-0 bg-level-1\">\n        <div class=\"content-flex-30 flex-stretch\">\n          <div class=\"col-6 p-16 p-b-0 d-flex d-col j-c-between\">\n            <div>\n              <p class=\"m-b-8\">\n                <strong translate>Simple registration</strong>\n              </p>\n              <small class=\"text-muted\" translate>\n                Creates all registration requests at once, then each one needs to go through regular\n                acceptance process.\n              </small>\n            </div>\n            <div class=\"m-b-16 m-t-16\">\n              <a\n                title=\"{{ 'Download template' | translate }}\"\n                class=\"btn btn-default btn-sm\"\n                target=\"_self\"\n                (click)=\"downloadSimple()\"\n              >\n                <i c8yIcon=\"download\" translate></i>\n                {{ 'Download template' | translate }}\n              </a>\n            </div>\n          </div>\n          <div class=\"col-6 p-16 p-b-0 d-flex d-col j-c-between\">\n            <div>\n              <p class=\"m-b-8\">\n                <strong translate>Full registration</strong>\n              </p>\n              <small class=\"text-muted\" translate>\n                Creates all device credentials and devices using provided list of property values.\n                Devices can start communicating with the platform immediately.\n              </small>\n            </div>\n            <div class=\"m-b-16 m-t-16\">\n              <a\n                title=\"{{ 'Download template' | translate }}\"\n                class=\"btn btn-default btn-sm\"\n                target=\"_self\"\n                (click)=\"downloadFull()\"\n              >\n                <i c8yIcon=\"download\" translate></i>\n                {{ 'Download template' | translate }}\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"form.invalid\"\n        [pending]=\"pending\"\n        (onCancel)=\"cancel()\"\n        (onNext)=\"upload()\"\n        [labels]=\"{ next: 'Upload' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n\n    <cdk-step state=\"final\">\n      <div class=\"m-24\">\n        <div *ngIf=\"success; else warning\">\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </div>\n        <ng-template #warning>\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </ng-template>\n        <c8y-list-group class=\"separator-top m-t-16\">\n          <ng-container *ngIf=\"result; else failedResponse\">\n            <c8y-li *ngIf=\"success; else fail\">\n              <c8y-li-icon class=\"text-success\" icon=\"check-circle\"></c8y-li-icon>\n              <p>All devices processed successfully.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n            <ng-template #fail>\n              <c8y-li>\n                <c8y-li-icon class=\"text-danger\" icon=\"ban\"></c8y-li-icon>\n                <p\n                  ngNonBindable\n                  [translateParams]=\"{ count: result?.numberOfFailed, total: result?.numberOfAll }\"\n                  translate\n                >\n                  Failed to process {{ count }} out of {{ total }}.\n                </p>\n                <c8y-li-collapse>\n                  <pre><code>{{ result | json }}</code></pre>\n                </c8y-li-collapse>\n              </c8y-li>\n            </ng-template>\n          </ng-container>\n          <ng-template #failedResponse>\n            <c8y-li>\n              <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n              <small>{{ failedResult?.message | translate }}</small>\n              <c8y-li-collapse>\n                <pre><code>{{ failedResult | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </ng-template>\n        </c8y-list-group>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        [showButtons]=\"{ next: true }\"\n        (onNext)=\"complete()\"\n        [labels]=\"{ next: success ? 'Close' : 'Cancel' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    \n  </c8y-stepper>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: i6.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i2.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { 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.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkDeviceRegistrationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bulk-device-registration', template: "<c8y-modal\n  [title]=\"'Bulk device registration' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <i c8yIcon=\"upload\"></i>\n  </ng-container>\n\n  <c8y-stepper [hideStepProgress]=\"true\" linear id=\"modal-body\">\n    <cdk-step>\n      <p class=\"modal-subtitle sticky-top\" translate>Register devices in bulk</p>\n\n      <c8y-form-group class=\"d-block p-24 p-t-16 p-b-0 m-b-0\">\n        <formly-form [form]=\"form\" [fields]=\"template\" [model]=\"model\"></formly-form>\n      </c8y-form-group>\n\n      <div class=\"p-24 m-t-0 bg-level-1\">\n        <div class=\"content-flex-30 flex-stretch\">\n          <div class=\"col-6 p-16 p-b-0 d-flex d-col j-c-between\">\n            <div>\n              <p class=\"m-b-8\">\n                <strong translate>Simple registration</strong>\n              </p>\n              <small class=\"text-muted\" translate>\n                Creates all registration requests at once, then each one needs to go through regular\n                acceptance process.\n              </small>\n            </div>\n            <div class=\"m-b-16 m-t-16\">\n              <a\n                title=\"{{ 'Download template' | translate }}\"\n                class=\"btn btn-default btn-sm\"\n                target=\"_self\"\n                (click)=\"downloadSimple()\"\n              >\n                <i c8yIcon=\"download\" translate></i>\n                {{ 'Download template' | translate }}\n              </a>\n            </div>\n          </div>\n          <div class=\"col-6 p-16 p-b-0 d-flex d-col j-c-between\">\n            <div>\n              <p class=\"m-b-8\">\n                <strong translate>Full registration</strong>\n              </p>\n              <small class=\"text-muted\" translate>\n                Creates all device credentials and devices using provided list of property values.\n                Devices can start communicating with the platform immediately.\n              </small>\n            </div>\n            <div class=\"m-b-16 m-t-16\">\n              <a\n                title=\"{{ 'Download template' | translate }}\"\n                class=\"btn btn-default btn-sm\"\n                target=\"_self\"\n                (click)=\"downloadFull()\"\n              >\n                <i c8yIcon=\"download\" translate></i>\n                {{ 'Download template' | translate }}\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"form.invalid\"\n        [pending]=\"pending\"\n        (onCancel)=\"cancel()\"\n        (onNext)=\"upload()\"\n        [labels]=\"{ next: 'Upload' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n\n    <cdk-step state=\"final\">\n      <div class=\"m-24\">\n        <div *ngIf=\"success; else warning\">\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"success\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </div>\n        <ng-template #warning>\n          <c8y-operation-result\n            text=\"{{ message | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n            type=\"error\"\n            class=\"lead\"\n          ></c8y-operation-result>\n        </ng-template>\n        <c8y-list-group class=\"separator-top m-t-16\">\n          <ng-container *ngIf=\"result; else failedResponse\">\n            <c8y-li *ngIf=\"success; else fail\">\n              <c8y-li-icon class=\"text-success\" icon=\"check-circle\"></c8y-li-icon>\n              <p>All devices processed successfully.</p>\n              <c8y-li-collapse>\n                <pre><code>{{ result | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n            <ng-template #fail>\n              <c8y-li>\n                <c8y-li-icon class=\"text-danger\" icon=\"ban\"></c8y-li-icon>\n                <p\n                  ngNonBindable\n                  [translateParams]=\"{ count: result?.numberOfFailed, total: result?.numberOfAll }\"\n                  translate\n                >\n                  Failed to process {{ count }} out of {{ total }}.\n                </p>\n                <c8y-li-collapse>\n                  <pre><code>{{ result | json }}</code></pre>\n                </c8y-li-collapse>\n              </c8y-li>\n            </ng-template>\n          </ng-container>\n          <ng-template #failedResponse>\n            <c8y-li>\n              <c8y-li-icon class=\"text-danger\" [icon]=\"'ban'\"></c8y-li-icon>\n              <small>{{ failedResult?.message | translate }}</small>\n              <c8y-li-collapse>\n                <pre><code>{{ failedResult | json }}</code></pre>\n              </c8y-li-collapse>\n            </c8y-li>\n          </ng-template>\n        </c8y-list-group>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        [showButtons]=\"{ next: true }\"\n        (onNext)=\"complete()\"\n        [labels]=\"{ next: success ? 'Close' : 'Cancel' }\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    \n  </c8y-stepper>\n</c8y-modal>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2$1.C8yJSONSchema }, { type: i2.DeviceRegistrationBulkService }, { type: RegisterDeviceService }, { type: i1$1.BsModalRef }, { type: i2$1.GainsightService }]; }, propDecorators: { stepper: [{
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.C8yJSONSchema }, { type: i1$1.DeviceRegistrationBulkService }, { type: RegisterDeviceService }, { type: i1$2.BsModalRef }, { type: i2.GainsightService }]; }, propDecorators: { stepper: [{
                 type: ViewChild,
                 args: [C8yStepper, { static: true }]
             }] } });
@@ -1186,12 +1204,12 @@ class ExtensibleBulkDeviceRegistrationButtonComponent {
         });
     }
 }
-ExtensibleBulkDeviceRegistrationButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleBulkDeviceRegistrationButtonComponent, deps: [{ token: BulkExtensibleDeviceRegistrationService }, { token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
-ExtensibleBulkDeviceRegistrationButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleBulkDeviceRegistrationButtonComponent, selector: "extensible-device-registration-component", ngImport: i0, template: "<div *ngFor=\"let provider of bulkProvidersMetaData\">\n  <button\n    title=\"{{ provider.name | translate }}\"\n    type=\"button\"\n    (click)=\"click(provider.contextPath)\"\n  >\n    <i c8yIcon=\"upload\"></i>\n    {{ provider.name | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] });
+ExtensibleBulkDeviceRegistrationButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleBulkDeviceRegistrationButtonComponent, deps: [{ token: BulkExtensibleDeviceRegistrationService }, { token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleBulkDeviceRegistrationButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ExtensibleBulkDeviceRegistrationButtonComponent, selector: "extensible-device-registration-component", ngImport: i0, template: "<div *ngFor=\"let provider of bulkProvidersMetaData | async\">\n  <button\n    title=\"{{ provider.name | translate }}\"\n    type=\"button\"\n    (click)=\"click(provider.contextPath)\"\n  >\n    <i c8yIcon=\"upload\"></i>\n    {{ provider.name | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ExtensibleBulkDeviceRegistrationButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'extensible-device-registration-component', template: "<div *ngFor=\"let provider of bulkProvidersMetaData\">\n  <button\n    title=\"{{ provider.name | translate }}\"\n    type=\"button\"\n    (click)=\"click(provider.contextPath)\"\n  >\n    <i c8yIcon=\"upload\"></i>\n    {{ provider.name | translate }}\n  </button>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: BulkExtensibleDeviceRegistrationService }, { type: i1$1.BsModalService }]; } });
+            args: [{ selector: 'extensible-device-registration-component', template: "<div *ngFor=\"let provider of bulkProvidersMetaData | async\">\n  <button\n    title=\"{{ provider.name | translate }}\"\n    type=\"button\"\n    (click)=\"click(provider.contextPath)\"\n  >\n    <i c8yIcon=\"upload\"></i>\n    {{ provider.name | translate }}\n  </button>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: BulkExtensibleDeviceRegistrationService }, { type: i1$2.BsModalService }]; } });
 
 class BulkDeviceRegistrationButtonComponent {
     constructor(modalService) {
@@ -1206,12 +1224,12 @@ class BulkDeviceRegistrationButtonComponent {
         });
     }
 }
-BulkDeviceRegistrationButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkDeviceRegistrationButtonComponent, deps: [{ token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
-BulkDeviceRegistrationButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BulkDeviceRegistrationButtonComponent, selector: "extensible-device-registration-component", ngImport: i0, template: "<button title=\"{{ 'General' | translate }}\" type=\"button\" (click)=\"click()\">\n  <i c8yIcon=\"upload\"></i>\n  {{ 'General' | translate }}\n</button>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] });
+BulkDeviceRegistrationButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkDeviceRegistrationButtonComponent, deps: [{ token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
+BulkDeviceRegistrationButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BulkDeviceRegistrationButtonComponent, selector: "extensible-device-registration-component", ngImport: i0, template: "<button title=\"{{ 'General' | translate }}\" type=\"button\" (click)=\"click()\">\n  <i c8yIcon=\"upload\"></i>\n  {{ 'General' | translate }}\n</button>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BulkDeviceRegistrationButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'extensible-device-registration-component', template: "<button title=\"{{ 'General' | translate }}\" type=\"button\" (click)=\"click()\">\n  <i c8yIcon=\"upload\"></i>\n  {{ 'General' | translate }}\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.BsModalService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.BsModalService }]; } });
 
 class DeviceRegistrationFactory {
     get() {