@c8y/ngx-components 1021.38.0 → 1021.49.1

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

@@ -1,29 +1,29 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, InjectionToken, ViewChild, Input, NgModule } from '@angular/core';
+import { Injectable, Component, ViewChild, ChangeDetectionStrategy, InjectionToken, Input, NgModule } from '@angular/core';
 import * as i4 from 'ngx-bootstrap/modal';
 import { __decorate, __metadata } from 'tslib';
-import * as i1$2 from '@c8y/ngx-components';
-import { gettext, memoize, hookGeneric, ExtensionPointWithoutStateForPlugins, fromTriggerOnce, Status, Permissions, NavigatorNode, C8yStepper, CommonModule, CoreModule, StepperModule, DynamicFormsModule, hookNavigator, DeviceBootstrapRealtimeService } from '@c8y/ngx-components';
+import * as i1$1 from '@c8y/ngx-components';
+import { gettext, C8yStepper, memoize, hookGeneric, ExtensionPointWithoutStateForPlugins, fromTriggerOnce, Status, Permissions, NavigatorNode, 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 i1$1 from '@c8y/client';
+import * as i2 from '@c8y/client';
 import { DeviceRegistrationStatus, DeviceRegistrationSecurityMode, ApplicationType } from '@c8y/client';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { get, pick, sortBy, flatMap } from 'lodash-es';
+import { saveAs } from 'file-saver';
 import * as i5 from '@angular/common';
 import * as i6 from '@angular/cdk/stepper';
 import { STEP_STATE } from '@angular/cdk/stepper';
 import * as i7 from '@ngx-formly/core';
-import * as i3$1 from '@ngx-translate/core';
-import * as i4$1 from 'ngx-bootstrap/popover';
+import * as i5$1 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
+import * as i3$1 from '@ngx-translate/core';
 import { flatten } from 'lodash';
 import * as i3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { saveAs } from 'file-saver';
 
 class RegisterDeviceService {
     constructor(router, deviceRegService, alertService) {
@@ -196,7 +196,7 @@ class RegisterDeviceService {
         this._loading.next(false);
         return items;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceService, deps: [{ token: i1.Router }, { token: i1$1.DeviceRegistrationService }, { token: i1$2.AlertService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceService, deps: [{ token: i1.Router }, { token: i2.DeviceRegistrationService }, { token: i1$1.AlertService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceService, decorators: [{
@@ -204,10 +204,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: i1$1.DeviceRegistrationService }, { type: i1$2.AlertService }] });
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i2.DeviceRegistrationService }, { type: i1$1.AlertService }] });
+
+const PRODUCT_EXPERIENCE_BASE_REGISTRATION = {
+    EVENT: 'deviceRegistration',
+    COMPONENT: {
+        BULK: 'bulk-registration',
+        EXTENSIBLE_BULK: 'bulk-extensible-registration',
+        EXTENSIBLE_SINGLE: 'single-extensible-registration'
+    },
+    RESULT: { SUCCESS: 'registrationSuccess', FAILURE: 'registrationFailure' }
+};
+
+const registerDeviceBulkSchema = {
+    $schema: 'https://json-schema.org/draft/2019-09/schema',
+    type: 'object',
+    properties: {
+        csvBulkFile: {
+            type: 'array',
+            title: gettext('CSV file upload'),
+            description: gettext('You can use file upload component to let users send files. This input accepts only a single CSV file.'),
+            contentMediaType: 'csv'
+        }
+    },
+    required: ['csvBulkFile'],
+    additionalProperties: false
+};
+const simpleCsvHeaders = ['ID', 'PATH'];
+const csvHeaders = [
+    'ID',
+    'TYPE',
+    'NAME',
+    'ICCID',
+    'IDTYPE',
+    'PATH',
+    'SHELL',
+    'AUTH_TYPE'
+];
+const fullCsvHeaders = [...csvHeaders, 'CREDENTIALS'];
+const ESTCsvHeaders = [...csvHeaders, 'ENROLLMENT_OTP'];
+class BulkDeviceRegistrationModalComponent {
+    constructor(jsonschema, deviceRegistrationService, registerDeviceService, bsModalRef, gainsightService, featureService) {
+        this.jsonschema = jsonschema;
+        this.deviceRegistrationService = deviceRegistrationService;
+        this.registerDeviceService = registerDeviceService;
+        this.bsModalRef = bsModalRef;
+        this.gainsightService = gainsightService;
+        this.featureService = featureService;
+        this.form = new FormGroup({});
+        this.model = {};
+        this.certificateAuthorityFeatureEnabled = this.featureService
+            .detail('certificate-authority')
+            .then(({ data }) => data.active);
+    }
+    ngOnInit() {
+        this.template = [this.jsonschema.toFieldConfig(registerDeviceBulkSchema)];
+    }
+    upload() {
+        this.pending = true;
+        const file = this.getFile(this.model);
+        this.deviceRegistrationService
+            .create(file)
+            .then(({ res, data }) => {
+            if (res.status < 400) {
+                this.result = data;
+                this.success = data.numberOfFailed === 0 && data.numberOfSuccessful === data.numberOfAll;
+                this.message = this.success
+                    ? gettext('Device registration created.')
+                    : (this.message = gettext('Device registration failed.'));
+                if (this.success) {
+                    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_BASE_REGISTRATION.EVENT, {
+                        result: PRODUCT_EXPERIENCE_BASE_REGISTRATION.RESULT.SUCCESS,
+                        component: PRODUCT_EXPERIENCE_BASE_REGISTRATION.COMPONENT.BULK
+                    });
+                }
+                else {
+                    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_BASE_REGISTRATION.EVENT, {
+                        result: PRODUCT_EXPERIENCE_BASE_REGISTRATION.RESULT.FAILURE,
+                        component: PRODUCT_EXPERIENCE_BASE_REGISTRATION.COMPONENT.BULK
+                    });
+                }
+            }
+            else {
+                this.failedResult = data;
+                this.message = gettext('Device registration failed.');
+                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_BASE_REGISTRATION.EVENT, {
+                    result: PRODUCT_EXPERIENCE_BASE_REGISTRATION.RESULT.FAILURE,
+                    component: PRODUCT_EXPERIENCE_BASE_REGISTRATION.COMPONENT.BULK
+                });
+            }
+            this.model = {};
+            this.pending = false;
+            this.stepper.next();
+        })
+            .catch(() => {
+            this.message = gettext('Error occurred while processing the uploaded file.');
+            this.pending = false;
+            this.stepper.next();
+        });
+    }
+    downloadSimple() {
+        return this.download(simpleCsvHeaders, gettext('Simple bulk registration - template.csv'));
+    }
+    downloadFull() {
+        return this.download(fullCsvHeaders, gettext('Full bulk registration - template.csv'));
+    }
+    downloadEst() {
+        return this.download(ESTCsvHeaders, gettext('EST registration - template.csv'));
+    }
+    download(headers, fileName) {
+        const headerRaw = headers.map(header => `"${header}"`).join(';');
+        const binaryFile = new Blob([headerRaw], { type: 'text/csv' });
+        saveAs(binaryFile, fileName);
+    }
+    complete() {
+        this.registerDeviceService.list();
+        this.bsModalRef.hide();
+    }
+    cancel() {
+        this.bsModalRef.hide();
+    }
+    getFile(model) {
+        const csvBulkFile = model?.csvBulkFile;
+        return csvBulkFile ? csvBulkFile[0]?.file : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BulkDeviceRegistrationModalComponent, deps: [{ token: i1$1.C8yJSONSchema }, { token: i2.DeviceRegistrationBulkService }, { token: RegisterDeviceService }, { token: i4.BsModalRef }, { token: i1$1.GainsightService }, { token: i2.FeatureService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\">\n            <div>\n              <p class=\"m-b-8 text-medium\">\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=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\">\n            <div>\n              <p class=\"m-b-8 text-medium\">\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 class=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\" *ngIf=\"certificateAuthorityFeatureEnabled | async\">\n            <div>\n              <p class=\"m-b-8 text-medium\">\n                <strong translate>Full registration with device certificate creation</strong>\n              </p>\n              <small class=\"text-muted\" translate>\n                Creates device certificates and devices using the provided list of property values. Once the certificates are provisioned, the devices can immediately start communicating with the platform\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)=\"downloadEst()\"\n              >\n                <i c8yIcon=\"download\"></i>\n                {{ 'Download template' | translate }}\n              </a>\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 have been processed.' | translate }}</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  </c8y-stepper>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i1$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1$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: i1$1.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i1$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1$1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\">\n            <div>\n              <p class=\"m-b-8 text-medium\">\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=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\">\n            <div>\n              <p class=\"m-b-8 text-medium\">\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 class=\"bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24\" *ngIf=\"certificateAuthorityFeatureEnabled | async\">\n            <div>\n              <p class=\"m-b-8 text-medium\">\n                <strong translate>Full registration with device certificate creation</strong>\n              </p>\n              <small class=\"text-muted\" translate>\n                Creates device certificates and devices using the provided list of property values. Once the certificates are provisioned, the devices can immediately start communicating with the platform\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)=\"downloadEst()\"\n              >\n                <i c8yIcon=\"download\"></i>\n                {{ 'Download template' | translate }}\n              </a>\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 have been processed.' | translate }}</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  </c8y-stepper>\n</c8y-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.C8yJSONSchema }, { type: i2.DeviceRegistrationBulkService }, { type: RegisterDeviceService }, { type: i4.BsModalRef }, { type: i1$1.GainsightService }, { type: i2.FeatureService }], propDecorators: { stepper: [{
+                type: ViewChild,
+                args: [C8yStepper, { static: true }]
+            }] } });
 
 class GeneralDeviceRegistrationComponent {
-    constructor(tenantUIService, tenantService, registerDeviceService, inventoryService, cd, bsModalRef, gainsightService) {
+    constructor(tenantUIService, tenantService, registerDeviceService, inventoryService, cd, bsModalRef, gainsightService, deviceRegistrationService, featureService) {
         this.tenantUIService = tenantUIService;
         this.tenantService = tenantService;
         this.registerDeviceService = registerDeviceService;
@@ -215,18 +348,25 @@ class GeneralDeviceRegistrationComponent {
         this.cd = cd;
         this.bsModalRef = bsModalRef;
         this.gainsightService = gainsightService;
+        this.deviceRegistrationService = deviceRegistrationService;
+        this.featureService = featureService;
         this.MANAGEMENT = 'management';
         this.FILTER = {
             withTotalPages: true,
             pageSize: 25
         };
+        this.useEST$ = new BehaviorSubject(false);
+        this.certificateAuthorityFeatureEnabled = this.featureService
+            .detail('certificate-authority')
+            .then(({ data }) => data.active);
         this.form = new FormGroup({});
         this.model = {
             devicesToCreate: [{}]
         };
         this.options = {
             formState: {
-                canLoadTenants: true
+                canLoadTenants: true,
+                useEST: this.useEST$.getValue()
             }
         };
         this.PRODUCT_EXPERIENCE = {
@@ -240,7 +380,7 @@ class GeneralDeviceRegistrationComponent {
             {
                 type: 'array',
                 key: 'devicesToCreate',
-                templateOptions: {
+                props: {
                     addText: gettext('Add device'),
                     addTextDataCy: 'add-device'
                 },
@@ -250,7 +390,7 @@ class GeneralDeviceRegistrationComponent {
                             key: 'id',
                             type: 'string',
                             focus: true,
-                            templateOptions: {
+                            props: {
                                 placeholder: '0123ab32fcd',
                                 label: gettext('Device ID'),
                                 required: true
@@ -268,14 +408,17 @@ class GeneralDeviceRegistrationComponent {
                         {
                             key: 'tenant',
                             type: 'typeahead',
-                            hideExpression: (model, formState, field) => {
-                                if (!formState?.canLoadTenants) {
-                                    field.formControl.setValue(null);
+                            expressions: {
+                                hide: field => {
+                                    const formState = field.options?.formState;
+                                    if (!formState?.canLoadTenants) {
+                                        field.formControl.setValue(null);
+                                    }
+                                    return !formState?.canLoadTenants || false;
                                 }
-                                return !formState?.canLoadTenants || false;
                             },
                             defaultValue: { id: this.MANAGEMENT },
-                            templateOptions: {
+                            props: {
                                 label: gettext('Add to tenant'),
                                 required: true,
                                 c8yForOptions: this.canLoadTenants$().pipe(filter(canLoad => canLoad), switchMap(() => this.getTenants$())),
@@ -293,19 +436,21 @@ class GeneralDeviceRegistrationComponent {
                         {
                             key: 'group',
                             type: 'typeahead',
-                            expressionProperties: {
-                                'templateOptions.disabled': (model, formState, field) => {
+                            expressions: {
+                                'props.disabled': (field) => {
+                                    const formState = field.options?.formState;
+                                    const model = field.model;
                                     if (formState?.canLoadTenants) {
                                         if (model?.tenant?.id !== this.MANAGEMENT) {
                                             field.formControl.setValue(null);
                                         }
                                         return !(model?.tenant?.id === this.MANAGEMENT);
                                     }
-                                    delete field?.templateOptions?.description;
+                                    delete field?.props?.description;
                                     return false;
                                 }
                             },
-                            templateOptions: {
+                            props: {
                                 disabled: false,
                                 label: gettext('Add to group'),
                                 description: gettext('You can add device to specific group for management tenant only.'),
@@ -320,6 +465,24 @@ class GeneralDeviceRegistrationComponent {
                                     this.cd.detectChanges();
                                 }))
                             }
+                        },
+                        {
+                            key: 'oneTimePassword',
+                            type: 'string',
+                            expressions: {
+                                hide: field => !field.options?.formState?.useEST
+                            },
+                            props: {
+                                placeholder: 'TruDN3H45L0',
+                                label: gettext('One-time password'),
+                                required: true
+                            },
+                            hooks: {
+                                onInit: _field => this.useEST$.pipe(tap(useEST => {
+                                    this.options.formState.useEST = useEST;
+                                    this.cd.detectChanges();
+                                }))
+                            }
                         }
                     ]
                 }
@@ -336,6 +499,20 @@ class GeneralDeviceRegistrationComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    registerDevice(eventObject) {
+        !this.useEST$.getValue() ? this.create(eventObject) : this.registerByEst(eventObject);
+    }
+    fixErrors(event, failedRequests) {
+        if (failedRequests && failedRequests.length > 0) {
+            this.options.resetModel({
+                devicesToCreate: [
+                    ...this.lastCreatedDevices.filter(el => failedRequests.map(data => data.id).includes(el.id))
+                ]
+            });
+            this.cd.detectChanges();
+        }
+        event?.stepper.previous();
+    }
     create(eventObject) {
         if (this.model?.devicesToCreate?.length > 0) {
             this.lastCreatedDevices = [...this.model.devicesToCreate];
@@ -374,16 +551,45 @@ class GeneralDeviceRegistrationComponent {
             });
         }
     }
-    fixErrors(event, failedRequests) {
-        if (failedRequests && failedRequests.length > 0) {
-            this.options.resetModel({
-                devicesToCreate: [
-                    ...this.lastCreatedDevices.filter(el => failedRequests.map(data => data.id).includes(el.id))
-                ]
-            });
-            this.cd.detectChanges();
-        }
-        event?.stepper.previous();
+    registerByEst(eventObject) {
+        this.lastCreatedDevices = [...this.model.devicesToCreate];
+        this.deviceRegistrationService
+            .create(this.convertObjectToCSVFile(this.model.devicesToCreate))
+            .then(({ res, data }) => {
+            if (res.status < 400) {
+                this.failed = data.failedCreationList.map(value => {
+                    return {
+                        id: value.deviceId,
+                        message: value.failureReason
+                    };
+                });
+                const failedIds = new Set(this.failed.map(item => item.id));
+                this.success = this.model.devicesToCreate.filter(item => !failedIds.has(item.id));
+            }
+            eventObject.stepper.next();
+        })
+            .catch(() => {
+            eventObject.stepper.next();
+        });
+    }
+    convertObjectToCSVFile(data) {
+        const fullCsvHeaders = ESTCsvHeaders;
+        const csvHeaders = fullCsvHeaders.join(';') + '\n';
+        const dataToSend = data.map(el => {
+            return {
+                ID: el.id,
+                AUTH_TYPE: 'CERTIFICATES',
+                ENROLLMENT_OTP: el.oneTimePassword,
+                PATH: el.group?.id || '',
+                TENANT: el.tenant?.id || ''
+            };
+        });
+        const csvRows = dataToSend
+            .map(row => fullCsvHeaders.map(header => row[header] ?? '').join(';'))
+            .join('\n');
+        const csvContent = csvHeaders + csvRows;
+        const blob = new Blob([csvContent], { type: 'text/csv' });
+        return new File([blob], `ESTRegistrationFile.csv`, { type: 'text/csv' });
     }
     canLoadTenants$() {
         return defer(() => from(this.tenantUIService.isManagementTenant())).pipe(shareReplay(1));
@@ -394,8 +600,8 @@ class GeneralDeviceRegistrationComponent {
     getGroups$() {
         return defer(() => from(this.inventoryService.listQuery({ __filter: { __has: 'c8y_IsDeviceGroup' }, __orderby: [{ name: 1 }] }, { ...this.FILTER }))).pipe(shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GeneralDeviceRegistrationComponent, deps: [{ token: i1$2.TenantUiService }, { token: i1$1.TenantService }, { token: RegisterDeviceService }, { token: i1$1.InventoryService }, { token: i0.ChangeDetectorRef }, { token: i4.BsModalRef }, { token: i1$2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$2.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: i1$2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i1$2.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: i1$2.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1$2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GeneralDeviceRegistrationComponent, deps: [{ token: i1$1.TenantUiService }, { token: i2.TenantService }, { token: RegisterDeviceService }, { token: i2.InventoryService }, { token: i0.ChangeDetectorRef }, { token: i4.BsModalRef }, { token: i1$1.GainsightService }, { token: i2.DeviceRegistrationBulkService }, { token: i2.FeatureService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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=\"text-center sticky-top bg-component\">\n        <p class=\"text-medium text-16 separator-bottom p-16\" translate>Register general devices</p>\n        <label\n          class=\"c8y-switch m-24 a-i-center\"\n          title=\"{{ 'Create device certificates during device registration' | translate }}\"\n          for=\"useEST\"\n          *ngIf=\"certificateAuthorityFeatureEnabled | async\"\n        >\n          <input\n            type=\"checkbox\"\n            name=\"useEST\"\n            id=\"useEST\"\n            [ngModel]=\"useEST$.getValue()\"\n            (ngModelChange)=\"useEST$.next($event)\"\n          />\n          <span></span>\n          <span class=\"control-label\">{{ 'Create device certificates during device registration' | translate }}</span>\n          <button\n            type=\"button\"\n            class=\"btn-help\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ 'The device registration process includes creating device certificates, which are issued by the tenant\\'s Certificate Authority (CA).' | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n          ></button>\n        </label>\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-l-24 p-b-24 min-height-fit p-r-8\"\n          [ngClass]=\"{'p-t-24' : !(certificateAuthorityFeatureEnabled | async)}\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        (onNext)=\"registerDevice($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: i5$1.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: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$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: "component", type: i1$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: i6$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$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: i1$1.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i1$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1$1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     memoize(),
@@ -417,23 +623,23 @@ __decorate([
 ], GeneralDeviceRegistrationComponent.prototype, "getGroups$", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: () => [{ type: i1$2.TenantUiService }, { type: i1$1.TenantService }, { type: RegisterDeviceService }, { type: i1$1.InventoryService }, { type: i0.ChangeDetectorRef }, { type: i4.BsModalRef }, { type: i1$2.GainsightService }], propDecorators: { canLoadTenants$: [], getTenants$: [], getGroups$: [] } });
+            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=\"text-center sticky-top bg-component\">\n        <p class=\"text-medium text-16 separator-bottom p-16\" translate>Register general devices</p>\n        <label\n          class=\"c8y-switch m-24 a-i-center\"\n          title=\"{{ 'Create device certificates during device registration' | translate }}\"\n          for=\"useEST\"\n          *ngIf=\"certificateAuthorityFeatureEnabled | async\"\n        >\n          <input\n            type=\"checkbox\"\n            name=\"useEST\"\n            id=\"useEST\"\n            [ngModel]=\"useEST$.getValue()\"\n            (ngModelChange)=\"useEST$.next($event)\"\n          />\n          <span></span>\n          <span class=\"control-label\">{{ 'Create device certificates during device registration' | translate }}</span>\n          <button\n            type=\"button\"\n            class=\"btn-help\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ 'The device registration process includes creating device certificates, which are issued by the tenant\\'s Certificate Authority (CA).' | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n          ></button>\n        </label>\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-l-24 p-b-24 min-height-fit p-r-8\"\n          [ngClass]=\"{'p-t-24' : !(certificateAuthorityFeatureEnabled | async)}\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        (onNext)=\"registerDevice($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: () => [{ type: i1$1.TenantUiService }, { type: i2.TenantService }, { type: RegisterDeviceService }, { type: i2.InventoryService }, { type: i0.ChangeDetectorRef }, { type: i4.BsModalRef }, { type: i1$1.GainsightService }, { type: i2.DeviceRegistrationBulkService }, { type: i2.FeatureService }], propDecorators: { canLoadTenants$: [], getTenants$: [], getGroups$: [] } });
 
 class GeneralDeviceRegistrationButtonComponent {
     constructor(modalService) {
         this.modalService = modalService;
     }
-    open() {
+    async open() {
         this.modalService.show(GeneralDeviceRegistrationComponent, {
-            class: 'modal-sm',
+            class: 'modal-md',
             ariaDescribedby: 'modal-body',
             ariaLabelledBy: 'modal-title',
             ignoreBackdropClick: true
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GeneralDeviceRegistrationButtonComponent, deps: [{ token: i4.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GeneralDeviceRegistrationButtonComponent, decorators: [{
             type: Component,
@@ -484,7 +690,7 @@ class RegisterDeviceExtensionService extends ExtensionPointWithoutStateForPlugin
             () => this.factories
         ]).pipe(startWith([]), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceExtensionService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1$2.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceExtensionService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1$1.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceExtensionService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceExtensionService, decorators: [{
@@ -492,7 +698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.Router }, { type: i1$2.PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.Router }, { type: i1$1.PluginsResolveService }] });
 
 class RegisterDeviceDropdownComponent {
     constructor(registerDeviceExtensionService, registerDeviceService) {
@@ -503,7 +709,7 @@ class RegisterDeviceDropdownComponent {
         this.limit$ = this.registerDeviceService.limit$.pipe(map(limit => limit.isReached));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceDropdownComponent, deps: [{ token: RegisterDeviceExtensionService }, { token: RegisterDeviceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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    data-cy=\"register-device--dropdown-button\"\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: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$2.OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i1$2.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: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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    data-cy=\"register-device--dropdown-button\"\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: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$1.OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i1$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: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceDropdownComponent, decorators: [{
             type: Component,
@@ -619,13 +825,13 @@ class DeviceRegistrationViewComponent {
     showTokenInputBasedOnSecurityMode() {
         return this._securityTokenPolicy.getValue() !== DeviceRegistrationSecurityMode.IGNORED;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceRegistrationViewComponent, deps: [{ token: RegisterDeviceService }, { token: i1$2.DeviceBootstrapRealtimeService }, { token: i1$2.TenantUiService }, { token: i1$2.ModalService }, { token: i3$1.TranslateService }, { token: i1$2.OptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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\n      [icon]=\"'exchange'\"\n      [label]=\"'Devices' | translate\"\n    ></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\n    [placement]=\"'left'\"\n    itemClass=\"navbar-form hidden-xs\"\n  >\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\n      [placement]=\"'right'\"\n      [priority]=\"10\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Accept all' | translate }}\"\n        type=\"button\"\n        *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\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\n      [placement]=\"'right'\"\n      [priority]=\"9\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadAll()\"\n        [disabled]=\"isLoading\"\n      >\n        <i\n          [c8yIcon]=\"'refresh'\"\n          [ngClass]=\"{ 'icon-spin': isLoading }\"\n        ></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n    >\n      <c8y-register-device-dropdown></c8y-register-device-dropdown>\n    </c8y-action-bar-item>\n\n    <c8y-help\n      src=\"/docs/device-management-application/registering-devices/#registering-devices\"\n    ></c8y-help>\n\n    <ng-container *ngIf=\"deviceRequestList.data.length > 0; else noData\">\n      <div\n        class=\"card-group\"\n        [ngClass]=\"gridOrList\"\n      >\n        <!-- START interact-list sticky header START -->\n        <div\n          class=\"page-sticky-header hidden-xs\"\n          *ngIf=\"gridOrList === 'interact-list'\"\n        >\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\n              class=\"card-block card-column-30 p-0\"\n              *ngIf=\"showTokenInputBasedOnSecurityMode()\"\n            >\n              <p translate>Security token</p>\n              <button\n                class=\"btn-help\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Security token is required if the connected device uses it.' | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n            <div class=\"card-footer card-column-50\">\n              <div\n                class=\"d-contents\"\n                *ngIf=\"isManagementTenant; else noManagement\"\n              >\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\n              class=\"card-actions-group\"\n              style=\"min-width: 176px\"\n            >\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\n          class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\"\n          *ngIf=\"limitStatus?.isReached\"\n        >\n          <p\n            class=\"alert alert-warning center-block\"\n            role=\"alert\"\n          >\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                    [class]=\"statusProps[singleRequest.status].cls\"\n                    [c8yIcon]=\"statusProps[singleRequest.status].icon\"\n                  ></i>\n                </div>\n                <p\n                  class=\"card-title text-truncate\"\n                  title=\"{{ singleRequest.id }}\"\n                >\n                  {{ singleRequest.id }}\n                </p>\n              </div>\n\n              <div class=\"card-block text-center card-column-30\">\n                <span\n                  class=\"text-label-small\"\n                  translate\n                >\n                  Status\n                </span>\n                <p>\n                  <i\n                    class=\"icon-spin text-primary\"\n                    c8yIcon=\"refresh\"\n                    *ngIf=\"singleRequest.status === status.WAITING_FOR_CONNECTION\"\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\n                      class=\"text-label-small\"\n                      *ngIf=\"gridOrList !== 'interact-list'\"\n                      translate\n                    >\n                      Security token\n                    </span>\n                    <input\n                      class=\"form-control\"\n                      type=\"text\"\n                      [(ngModel)]=\"singleRequest.securityToken\"\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                    title=\"{{\n                      singleRequest.status === status.PENDING_ACCEPTANCE\n                        ? ('Remove' | translate)\n                        : ('Cancel' | translate)\n                    }}\"\n                    type=\"button\"\n                    [ngClass]=\"{\n                      'btn-danger': singleRequest.status === status.PENDING_ACCEPTANCE,\n                      'btn-default': singleRequest.status !== status.PENDING_ACCEPTANCE\n                    }\"\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\n                  class=\"d-contents\"\n                  *ngIf=\"isManagementTenant; else noManagement\"\n                >\n                  <div\n                    class=\"d-contents\"\n                    *ngIf=\"singleRequest.creationTime && singleRequest.owner\"\n                  >\n                    <span class=\"card-column-50\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        Created on`date`\n                      </span>\n                      <span data-cy=\"device-registration--creation-date\">\n                        {{ singleRequest.creationTime | c8yDate }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-30 text-truncate\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        by`user`\n                      </span>\n                      <span\n                        title=\"{{ singleRequest.owner }}\"\n                        data-cy=\"device-registration--created-by\"\n                      >\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-20\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        in`tenant`\n                      </span>\n                      <span>{{ singleRequest.tenantId }}</span>\n                    </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\n                      class=\"text-label-small\"\n                      translate\n                    >\n                      Created in`tenant`\n                    </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=\"card-column-50\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        Created on`date`\n                      </span>\n                      <span data-cy=\"device-registration--creation-date\">\n                        {{ singleRequest.creationTime | c8yDate }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-50 text-truncate\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        by`user`\n                      </span>\n                      <span\n                        title=\"{{ singleRequest.owner }}\"\n                        data-cy=\"device-registration--created-by\"\n                      >\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\n            *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n            translate\n          >\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$1.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: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$2.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: i1$2.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i1$2.LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "component", type: i1$2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i1$2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i1$2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i1$2.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: i1$2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i1$2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i1$2.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: RegisterDeviceDropdownComponent, selector: "c8y-register-device-dropdown" }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceRegistrationViewComponent, deps: [{ token: RegisterDeviceService }, { token: i1$1.DeviceBootstrapRealtimeService }, { token: i1$1.TenantUiService }, { token: i1$1.ModalService }, { token: i3$1.TranslateService }, { token: i1$1.OptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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\n      [icon]=\"'exchange'\"\n      [label]=\"'Devices' | translate\"\n    ></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\n    [placement]=\"'left'\"\n    itemClass=\"navbar-form hidden-xs\"\n  >\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\n      [placement]=\"'right'\"\n      [priority]=\"10\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Accept all' | translate }}\"\n        type=\"button\"\n        *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\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\n      [placement]=\"'right'\"\n      [priority]=\"9\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadAll()\"\n        [disabled]=\"isLoading\"\n      >\n        <i\n          [c8yIcon]=\"'refresh'\"\n          [ngClass]=\"{ 'icon-spin': isLoading }\"\n        ></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n    >\n      <c8y-register-device-dropdown></c8y-register-device-dropdown>\n    </c8y-action-bar-item>\n\n    <c8y-help\n      src=\"/docs/device-management-application/registering-devices/#registering-devices\"\n    ></c8y-help>\n\n    <ng-container *ngIf=\"deviceRequestList.data.length > 0; else noData\">\n      <div\n        class=\"card-group\"\n        [ngClass]=\"gridOrList\"\n      >\n        <!-- START interact-list sticky header START -->\n        <div\n          class=\"page-sticky-header hidden-xs\"\n          *ngIf=\"gridOrList === 'interact-list'\"\n        >\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\n              class=\"card-block card-column-30 p-0\"\n              *ngIf=\"showTokenInputBasedOnSecurityMode()\"\n            >\n              <p translate>Security token</p>\n              <button\n                class=\"btn-help\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Security token is required if the connected device uses it.' | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n            <div class=\"card-footer card-column-50\">\n              <div\n                class=\"d-contents\"\n                *ngIf=\"isManagementTenant; else noManagement\"\n              >\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\n              class=\"card-actions-group\"\n              style=\"min-width: 176px\"\n            >\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\n          class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\"\n          *ngIf=\"limitStatus?.isReached\"\n        >\n          <p\n            class=\"alert alert-warning center-block\"\n            role=\"alert\"\n          >\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                    [class]=\"statusProps[singleRequest.status].cls\"\n                    [c8yIcon]=\"statusProps[singleRequest.status].icon\"\n                  ></i>\n                </div>\n                <p\n                  class=\"card-title text-truncate\"\n                  title=\"{{ singleRequest.id }}\"\n                >\n                  {{ singleRequest.id }}\n                </p>\n              </div>\n\n              <div class=\"card-block text-center card-column-30\">\n                <span\n                  class=\"text-label-small\"\n                  translate\n                >\n                  Status\n                </span>\n                <p>\n                  <i\n                    class=\"icon-spin text-primary\"\n                    c8yIcon=\"refresh\"\n                    *ngIf=\"singleRequest.status === status.WAITING_FOR_CONNECTION\"\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\n                      class=\"text-label-small\"\n                      *ngIf=\"gridOrList !== 'interact-list'\"\n                      translate\n                    >\n                      Security token\n                    </span>\n                    <input\n                      class=\"form-control\"\n                      type=\"text\"\n                      [(ngModel)]=\"singleRequest.securityToken\"\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                    title=\"{{\n                      singleRequest.status === status.PENDING_ACCEPTANCE\n                        ? ('Remove' | translate)\n                        : ('Cancel' | translate)\n                    }}\"\n                    type=\"button\"\n                    [ngClass]=\"{\n                      'btn-danger': singleRequest.status === status.PENDING_ACCEPTANCE,\n                      'btn-default': singleRequest.status !== status.PENDING_ACCEPTANCE\n                    }\"\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\n                  class=\"d-contents\"\n                  *ngIf=\"isManagementTenant; else noManagement\"\n                >\n                  <div\n                    class=\"d-contents\"\n                    *ngIf=\"singleRequest.creationTime && singleRequest.owner\"\n                  >\n                    <span class=\"card-column-50\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        Created on`date`\n                      </span>\n                      <span data-cy=\"device-registration--creation-date\">\n                        {{ singleRequest.creationTime | c8yDate }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-30 text-truncate\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        by`user`\n                      </span>\n                      <span\n                        title=\"{{ singleRequest.owner }}\"\n                        data-cy=\"device-registration--created-by\"\n                      >\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-20\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        in`tenant`\n                      </span>\n                      <span>{{ singleRequest.tenantId }}</span>\n                    </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\n                      class=\"text-label-small\"\n                      translate\n                    >\n                      Created in`tenant`\n                    </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=\"card-column-50\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        Created on`date`\n                      </span>\n                      <span data-cy=\"device-registration--creation-date\">\n                        {{ singleRequest.creationTime | c8yDate }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-50 text-truncate\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        by`user`\n                      </span>\n                      <span\n                        title=\"{{ singleRequest.owner }}\"\n                        data-cy=\"device-registration--created-by\"\n                      >\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\n            *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n            translate\n          >\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: i5$1.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: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$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: i1$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i1$1.LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "component", type: i1$1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i1$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i1$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i1$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: i1$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i1$1.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i1$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: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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\n      [icon]=\"'exchange'\"\n      [label]=\"'Devices' | translate\"\n    ></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\n    [placement]=\"'left'\"\n    itemClass=\"navbar-form hidden-xs\"\n  >\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\n      [placement]=\"'right'\"\n      [priority]=\"10\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Accept all' | translate }}\"\n        type=\"button\"\n        *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\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\n      [placement]=\"'right'\"\n      [priority]=\"9\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadAll()\"\n        [disabled]=\"isLoading\"\n      >\n        <i\n          [c8yIcon]=\"'refresh'\"\n          [ngClass]=\"{ 'icon-spin': isLoading }\"\n        ></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n    >\n      <c8y-register-device-dropdown></c8y-register-device-dropdown>\n    </c8y-action-bar-item>\n\n    <c8y-help\n      src=\"/docs/device-management-application/registering-devices/#registering-devices\"\n    ></c8y-help>\n\n    <ng-container *ngIf=\"deviceRequestList.data.length > 0; else noData\">\n      <div\n        class=\"card-group\"\n        [ngClass]=\"gridOrList\"\n      >\n        <!-- START interact-list sticky header START -->\n        <div\n          class=\"page-sticky-header hidden-xs\"\n          *ngIf=\"gridOrList === 'interact-list'\"\n        >\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\n              class=\"card-block card-column-30 p-0\"\n              *ngIf=\"showTokenInputBasedOnSecurityMode()\"\n            >\n              <p translate>Security token</p>\n              <button\n                class=\"btn-help\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Security token is required if the connected device uses it.' | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n            <div class=\"card-footer card-column-50\">\n              <div\n                class=\"d-contents\"\n                *ngIf=\"isManagementTenant; else noManagement\"\n              >\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\n              class=\"card-actions-group\"\n              style=\"min-width: 176px\"\n            >\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\n          class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\"\n          *ngIf=\"limitStatus?.isReached\"\n        >\n          <p\n            class=\"alert alert-warning center-block\"\n            role=\"alert\"\n          >\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                    [class]=\"statusProps[singleRequest.status].cls\"\n                    [c8yIcon]=\"statusProps[singleRequest.status].icon\"\n                  ></i>\n                </div>\n                <p\n                  class=\"card-title text-truncate\"\n                  title=\"{{ singleRequest.id }}\"\n                >\n                  {{ singleRequest.id }}\n                </p>\n              </div>\n\n              <div class=\"card-block text-center card-column-30\">\n                <span\n                  class=\"text-label-small\"\n                  translate\n                >\n                  Status\n                </span>\n                <p>\n                  <i\n                    class=\"icon-spin text-primary\"\n                    c8yIcon=\"refresh\"\n                    *ngIf=\"singleRequest.status === status.WAITING_FOR_CONNECTION\"\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\n                      class=\"text-label-small\"\n                      *ngIf=\"gridOrList !== 'interact-list'\"\n                      translate\n                    >\n                      Security token\n                    </span>\n                    <input\n                      class=\"form-control\"\n                      type=\"text\"\n                      [(ngModel)]=\"singleRequest.securityToken\"\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                    title=\"{{\n                      singleRequest.status === status.PENDING_ACCEPTANCE\n                        ? ('Remove' | translate)\n                        : ('Cancel' | translate)\n                    }}\"\n                    type=\"button\"\n                    [ngClass]=\"{\n                      'btn-danger': singleRequest.status === status.PENDING_ACCEPTANCE,\n                      'btn-default': singleRequest.status !== status.PENDING_ACCEPTANCE\n                    }\"\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\n                  class=\"d-contents\"\n                  *ngIf=\"isManagementTenant; else noManagement\"\n                >\n                  <div\n                    class=\"d-contents\"\n                    *ngIf=\"singleRequest.creationTime && singleRequest.owner\"\n                  >\n                    <span class=\"card-column-50\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        Created on`date`\n                      </span>\n                      <span data-cy=\"device-registration--creation-date\">\n                        {{ singleRequest.creationTime | c8yDate }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-30 text-truncate\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        by`user`\n                      </span>\n                      <span\n                        title=\"{{ singleRequest.owner }}\"\n                        data-cy=\"device-registration--created-by\"\n                      >\n                        {{ singleRequest.owner }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-20\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        in`tenant`\n                      </span>\n                      <span>{{ singleRequest.tenantId }}</span>\n                    </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\n                      class=\"text-label-small\"\n                      translate\n                    >\n                      Created in`tenant`\n                    </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=\"card-column-50\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        Created on`date`\n                      </span>\n                      <span data-cy=\"device-registration--creation-date\">\n                        {{ singleRequest.creationTime | c8yDate }}\n                      </span>\n                    </span>\n                    <span class=\"card-column-50 text-truncate\">\n                      <span\n                        class=\"text-label-small m-l-4 m-r-4\"\n                        translate\n                      >\n                        by`user`\n                      </span>\n                      <span\n                        title=\"{{ singleRequest.owner }}\"\n                        data-cy=\"device-registration--created-by\"\n                      >\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\n            *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\"\n            translate\n          >\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: () => [{ type: RegisterDeviceService }, { type: i1$2.DeviceBootstrapRealtimeService }, { type: i1$2.TenantUiService }, { type: i1$2.ModalService }, { type: i3$1.TranslateService }, { type: i1$2.OptionsService }] });
+        }], ctorParameters: () => [{ type: RegisterDeviceService }, { type: i1$1.DeviceBootstrapRealtimeService }, { type: i1$1.TenantUiService }, { type: i1$1.ModalService }, { type: i3$1.TranslateService }, { type: i1$1.OptionsService }] });
 
 class RegisterDeviceNavigationFactory {
     constructor(permissions) {
@@ -649,12 +855,12 @@ class RegisterDeviceNavigationFactory {
         }
         return nav;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceNavigationFactory, deps: [{ token: i1$2.Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceNavigationFactory, deps: [{ token: i1$1.Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceNavigationFactory }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RegisterDeviceNavigationFactory, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Permissions }] });
+        }], ctorParameters: () => [{ type: i1$1.Permissions }] });
 
 class BaseExtensibleDeviceRegistrationService {
     constructor(applicationService, stateService) {
@@ -746,22 +952,12 @@ class ExtensibleDeviceRegistrationService extends BaseExtensibleDeviceRegistrati
         const data = await res.json();
         return { res, data };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationService, deps: [{ token: i1$1.ApplicationService }, { token: i1$2.AppStateService }, { token: i1$1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationService, deps: [{ token: i2.ApplicationService }, { token: i1$1.AppStateService }, { token: i2.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ApplicationService }, { type: i1$2.AppStateService }, { type: i1$1.FetchClient }] });
-
-const PRODUCT_EXPERIENCE_BASE_REGISTRATION = {
-    EVENT: 'deviceRegistration',
-    COMPONENT: {
-        BULK: 'bulk-registration',
-        EXTENSIBLE_BULK: 'bulk-extensible-registration',
-        EXTENSIBLE_SINGLE: 'single-extensible-registration'
-    },
-    RESULT: { SUCCESS: 'registrationSuccess', FAILURE: 'registrationFailure' }
-};
+        }], ctorParameters: () => [{ type: i2.ApplicationService }, { type: i1$1.AppStateService }, { type: i2.FetchClient }] });
 
 class ExtensibleDeviceRegistrationStepperComponent {
     constructor(customProviderService, registerDeviceService, bsModalRef, gainsightService) {
@@ -846,13 +1042,13 @@ class ExtensibleDeviceRegistrationStepperComponent {
         });
         this.errorMessage = message;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationStepperComponent, deps: [{ token: ExtensibleDeviceRegistrationService }, { token: RegisterDeviceService }, { token: i4.BsModalRef }, { token: i1$2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1$2.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: i1$2.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationStepperComponent, deps: [{ token: ExtensibleDeviceRegistrationService }, { token: RegisterDeviceService }, { token: i4.BsModalRef }, { token: i1$1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1$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: i1$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: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: () => [{ type: ExtensibleDeviceRegistrationService }, { type: RegisterDeviceService }, { type: i4.BsModalRef }, { type: i1$2.GainsightService }], propDecorators: { stepper: [{
+        }], ctorParameters: () => [{ type: ExtensibleDeviceRegistrationService }, { type: RegisterDeviceService }, { type: i4.BsModalRef }, { type: i1$1.GainsightService }], propDecorators: { stepper: [{
                 type: ViewChild,
                 args: [C8yStepper, { static: true }]
             }], contextPath: [{
@@ -886,13 +1082,13 @@ class ExtensibleDeviceRegistrationModalComponent {
             return [this.jsonschema.toFieldConfig(step)];
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationModalComponent, deps: [{ token: i4.BsModalRef }, { token: i1$2.C8yJSONSchema }, { token: ExtensibleDeviceRegistrationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ExtensibleDeviceRegistrationModalComponent, selector: "extensible-device-registration-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"title | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\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        class=\"lead text-regular\"\n        type=\"error\"\n        text=\"{{ loadingErrorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n      <div class=\"modal-footer\">\n        <button\n          class=\"btn btn-default\"\n          title=\"{{ 'Close' | translate }}\"\n          type=\"button\"\n          (click)=\"bsModalRef.hide()\"\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-loading\n          class=\"text-center\"\n          layout=\"application\"\n          [message]=\"'Loading the registration form definition\u2026' | translate\"\n        ></c8y-loading>\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: i1$2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i1$2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$2.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: i1$2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationModalComponent, deps: [{ token: i4.BsModalRef }, { token: i1$1.C8yJSONSchema }, { token: ExtensibleDeviceRegistrationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ExtensibleDeviceRegistrationModalComponent, selector: "extensible-device-registration-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"title | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\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        class=\"lead text-regular\"\n        type=\"error\"\n        text=\"{{ loadingErrorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n      <div class=\"modal-footer\">\n        <button\n          class=\"btn btn-default\"\n          title=\"{{ 'Close' | translate }}\"\n          type=\"button\"\n          (click)=\"bsModalRef.hide()\"\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-loading\n          class=\"text-center\"\n          layout=\"application\"\n          [message]=\"'Loading the registration form definition\u2026' | translate\"\n        ></c8y-loading>\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: i1$1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i1$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$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: i1$1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'extensible-device-registration-modal', template: "<c8y-modal\n  [title]=\"title | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\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        class=\"lead text-regular\"\n        type=\"error\"\n        text=\"{{ loadingErrorMessage | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        data-cy=\"error\"\n      ></c8y-operation-result>\n      <div class=\"modal-footer\">\n        <button\n          class=\"btn btn-default\"\n          title=\"{{ 'Close' | translate }}\"\n          type=\"button\"\n          (click)=\"bsModalRef.hide()\"\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-loading\n          class=\"text-center\"\n          layout=\"application\"\n          [message]=\"'Loading the registration form definition\u2026' | translate\"\n        ></c8y-loading>\n      </div>\n    </ng-template>\n  </ng-template>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i4.BsModalRef }, { type: i1$2.C8yJSONSchema }, { type: ExtensibleDeviceRegistrationService }] });
+        }], ctorParameters: () => [{ type: i4.BsModalRef }, { type: i1$1.C8yJSONSchema }, { type: ExtensibleDeviceRegistrationService }] });
 
 class ExtensibleDeviceRegistrationButtonComponent {
     constructor(deviceRegistrationService, modalService) {
@@ -913,7 +1109,7 @@ class ExtensibleDeviceRegistrationButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationButtonComponent, deps: [{ token: ExtensibleDeviceRegistrationService }, { token: i4.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleDeviceRegistrationButtonComponent, decorators: [{
             type: Component,
@@ -956,12 +1152,12 @@ class BulkExtensibleDeviceRegistrationService extends BaseExtensibleDeviceRegist
         body.append('file', newFile, newFile.name);
         return body;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BulkExtensibleDeviceRegistrationService, deps: [{ token: i1$1.ApplicationService }, { token: i1$2.AppStateService }, { token: i1$1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BulkExtensibleDeviceRegistrationService, deps: [{ token: i2.ApplicationService }, { token: i1$1.AppStateService }, { token: i2.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BulkExtensibleDeviceRegistrationService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BulkExtensibleDeviceRegistrationService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ApplicationService }, { type: i1$2.AppStateService }, { type: i1$1.FetchClient }] });
+        }], ctorParameters: () => [{ type: i2.ApplicationService }, { type: i1$1.AppStateService }, { type: i2.FetchClient }] });
 
 const extensibleDeviceRegistrationBulkSchema = {
     $schema: 'https://json-schema.org/draft/2019-09/schema',
@@ -1059,128 +1255,13 @@ class ExtensibleBulkDeviceRegistrationModalComponent {
     cancel() {
         this.bsModalRef.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleBulkDeviceRegistrationModalComponent, deps: [{ token: i1$2.C8yJSONSchema }, { token: BulkExtensibleDeviceRegistrationService }, { token: RegisterDeviceService }, { token: i4.BsModalRef }, { token: i1$2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$2.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: i1$2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i1$2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1$2.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: i1$2.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1$2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleBulkDeviceRegistrationModalComponent, deps: [{ token: i1$1.C8yJSONSchema }, { token: BulkExtensibleDeviceRegistrationService }, { token: RegisterDeviceService }, { token: i4.BsModalRef }, { token: i1$1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$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: i1$1.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i1$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1$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: i1$1.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i1$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1$1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: () => [{ type: i1$2.C8yJSONSchema }, { type: BulkExtensibleDeviceRegistrationService }, { type: RegisterDeviceService }, { type: i4.BsModalRef }, { type: i1$2.GainsightService }], propDecorators: { stepper: [{
-                type: ViewChild,
-                args: [C8yStepper, { static: true }]
-            }] } });
-
-const registerDeviceBulkSchema = {
-    $schema: 'https://json-schema.org/draft/2019-09/schema',
-    type: 'object',
-    properties: {
-        csvBulkFile: {
-            type: 'array',
-            title: gettext('CSV file upload'),
-            description: gettext('You can use file upload component to let users send files. This input accepts only a single CSV file.'),
-            contentMediaType: 'csv'
-        }
-    },
-    required: ['csvBulkFile'],
-    additionalProperties: false
-};
-const simpleCsvHeaders = ['ID', 'PATH'];
-const fullCsvHeaders = [
-    'ID',
-    'CREDENTIALS',
-    'TYPE',
-    'NAME',
-    'ICCID',
-    'IDTYPE',
-    'PATH',
-    'SHELL',
-    'AUTH_TYPE'
-];
-class BulkDeviceRegistrationModalComponent {
-    constructor(jsonschema, deviceRegistrationService, registerDeviceService, bsModalRef, gainsightService) {
-        this.jsonschema = jsonschema;
-        this.deviceRegistrationService = deviceRegistrationService;
-        this.registerDeviceService = registerDeviceService;
-        this.bsModalRef = bsModalRef;
-        this.gainsightService = gainsightService;
-        this.form = new FormGroup({});
-        this.model = {};
-    }
-    ngOnInit() {
-        this.template = [this.jsonschema.toFieldConfig(registerDeviceBulkSchema)];
-    }
-    upload() {
-        this.pending = true;
-        const file = this.getFile(this.model);
-        this.deviceRegistrationService
-            .create(file)
-            .then(({ res, data }) => {
-            if (res.status < 400) {
-                this.result = data;
-                this.success = data.numberOfFailed === 0 && data.numberOfSuccessful === data.numberOfAll;
-                this.message = this.success
-                    ? gettext('Device registration created.')
-                    : (this.message = gettext('Device registration failed.'));
-                if (this.success) {
-                    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_BASE_REGISTRATION.EVENT, {
-                        result: PRODUCT_EXPERIENCE_BASE_REGISTRATION.RESULT.SUCCESS,
-                        component: PRODUCT_EXPERIENCE_BASE_REGISTRATION.COMPONENT.BULK
-                    });
-                }
-                else {
-                    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_BASE_REGISTRATION.EVENT, {
-                        result: PRODUCT_EXPERIENCE_BASE_REGISTRATION.RESULT.FAILURE,
-                        component: PRODUCT_EXPERIENCE_BASE_REGISTRATION.COMPONENT.BULK
-                    });
-                }
-            }
-            else {
-                this.failedResult = data;
-                this.message = gettext('Device registration failed.');
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_BASE_REGISTRATION.EVENT, {
-                    result: PRODUCT_EXPERIENCE_BASE_REGISTRATION.RESULT.FAILURE,
-                    component: PRODUCT_EXPERIENCE_BASE_REGISTRATION.COMPONENT.BULK
-                });
-            }
-            this.model = {};
-            this.pending = false;
-            this.stepper.next();
-        })
-            .catch(() => {
-            this.message = gettext('Error occurred while processing the uploaded file.');
-            this.pending = false;
-            this.stepper.next();
-        });
-    }
-    downloadSimple() {
-        return this.download(simpleCsvHeaders, gettext('Simple bulk registration - template.csv'));
-    }
-    downloadFull() {
-        return this.download(fullCsvHeaders, gettext('Full bulk registration - template.csv'));
-    }
-    download(headers, fileName) {
-        const headerRaw = headers.map(header => `"${header}"`).join(';');
-        const binaryFile = new Blob([headerRaw], { type: 'text/csv' });
-        saveAs(binaryFile, fileName);
-    }
-    complete() {
-        this.registerDeviceService.list();
-        this.bsModalRef.hide();
-    }
-    cancel() {
-        this.bsModalRef.hide();
-    }
-    getFile(model) {
-        const csvBulkFile = model?.csvBulkFile;
-        return csvBulkFile ? csvBulkFile[0]?.file : undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BulkDeviceRegistrationModalComponent, deps: [{ token: i1$2.C8yJSONSchema }, { token: i1$1.DeviceRegistrationBulkService }, { token: RegisterDeviceService }, { token: i4.BsModalRef }, { token: i1$2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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 have been processed.' | translate }}</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  </c8y-stepper>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i1$2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i1$2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1$2.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: i1$2.C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1$2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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 have been processed.' | translate }}</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  </c8y-stepper>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.C8yJSONSchema }, { type: i1$1.DeviceRegistrationBulkService }, { type: RegisterDeviceService }, { type: i4.BsModalRef }, { type: i1$2.GainsightService }], propDecorators: { stepper: [{
+        }], ctorParameters: () => [{ type: i1$1.C8yJSONSchema }, { type: BulkExtensibleDeviceRegistrationService }, { type: RegisterDeviceService }, { type: i4.BsModalRef }, { type: i1$1.GainsightService }], propDecorators: { stepper: [{
                 type: ViewChild,
                 args: [C8yStepper, { static: true }]
             }] } });
@@ -1204,7 +1285,7 @@ class ExtensibleBulkDeviceRegistrationButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleBulkDeviceRegistrationButtonComponent, deps: [{ token: BulkExtensibleDeviceRegistrationService }, { token: i4.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ExtensibleBulkDeviceRegistrationButtonComponent, decorators: [{
             type: Component,
@@ -1224,7 +1305,7 @@ class BulkDeviceRegistrationButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BulkDeviceRegistrationButtonComponent, deps: [{ token: i4.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BulkDeviceRegistrationButtonComponent, decorators: [{
             type: Component,