npm - @c8y/ngx-components - Versions diffs - 1021.62.9 → 1021.63.2 - Mend

@c8y/ngx-components 1021.62.9 → 1021.63.2

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

Files changed (41) hide show

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

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, ChangeDetectionStrategy, InjectionToken, Input, NgModule } from '@angular/core';
+import { Injectable, Component, ViewChild, ChangeDetectionStrategy, inject, InjectionToken, Input, NgModule } from '@angular/core';
 import * as i4 from 'ngx-bootstrap/modal';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { __decorate, __metadata } from 'tslib';
 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 * as i8 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';
@@ -399,8 +400,10 @@ class GeneralDeviceRegistrationComponent {
                             validators: {
                                 unique: {
                                     expression: (control) => {
-                                        const found = control.root.get('devicesToCreate').value.filter(el => el.id === control.value);
-                                        return found.length === 0;
+                                        const found = control.root.get('devicesToCreate').controls
+                                            .map(el => el.controls.id)
+                                            .find(el => el !== control && el.value === control.value);
+                                        return !found;
                                     },
                                     message: () => gettext('Device ID duplicates are not allowed')
                                 }
@@ -489,6 +492,10 @@ class GeneralDeviceRegistrationComponent {
                 }
             }
         ];
+        this.result = new Promise((resolve, reject) => {
+            this.onSuccessfulClosing = resolve;
+            this.onCancel = reject;
+        });
         this.destroy$ = new Subject();
         this.lastCreatedDevices = [];
         this.isLoading$ = this.registerDeviceService.loading$;
@@ -514,6 +521,14 @@ class GeneralDeviceRegistrationComponent {
         }
         event?.stepper.previous();
     }
+    close() {
+        this.bsModalRef.hide();
+        this.onSuccessfulClosing();
+    }
+    cancel() {
+        this.bsModalRef.hide();
+        this.onCancel();
+    }
     create(eventObject) {
         if (this.model?.devicesToCreate?.length > 0) {
             this.lastCreatedDevices = [...this.model.devicesToCreate];
@@ -602,7 +617,7 @@ class GeneralDeviceRegistrationComponent {
         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.13", 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.13", 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$2.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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)=\"cancel()\"\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)=\"close()\"\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$2.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.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: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     memoize(),
@@ -624,28 +639,54 @@ __decorate([
 ], GeneralDeviceRegistrationComponent.prototype, "getGroups$", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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=\"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" }]
+            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)=\"cancel()\"\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)=\"close()\"\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;
+class GeneralDeviceRegistrationService {
+    constructor() {
+        this.modalService = inject(BsModalService);
     }
-    async open() {
-        this.modalService.show(GeneralDeviceRegistrationComponent, {
+    async open(initialState) {
+        const modalRef = this.modalService.show(GeneralDeviceRegistrationComponent, {
             class: 'modal-md',
             ariaDescribedby: 'modal-body',
             ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
+            ignoreBackdropClick: true,
+            initialState: {
+                ...initialState
+            }
         });
+        return await modalRef.content.result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralDeviceRegistrationButtonComponent, deps: [{ token: i4.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralDeviceRegistrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralDeviceRegistrationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralDeviceRegistrationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+class GeneralDeviceRegistrationButtonComponent {
+    constructor(registrationService) {
+        this.registrationService = registrationService;
+    }
+    async open() {
+        try {
+            await this.registrationService.open();
+        }
+        catch {
+            // modal was closed
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralDeviceRegistrationButtonComponent, deps: [{ token: GeneralDeviceRegistrationService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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.13", ngImport: i0, type: GeneralDeviceRegistrationButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-general-device-registration-button', template: "<button title=\"{{ 'General' | translate }}\" type=\"button\" (click)=\"open()\">\n  <i c8yIcon=\"c8y-device-connect\"></i>\n  {{ 'General' | translate }}\n</button>\n" }]
-        }], ctorParameters: () => [{ type: i4.BsModalService }] });
+        }], ctorParameters: () => [{ type: GeneralDeviceRegistrationService }] });
 /**
  * A hook to use for Multi Provider extension.
@@ -718,13 +759,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: RegisterDeviceExtensionService }, { type: RegisterDeviceService }] });
 class DeviceRegistrationViewComponent {
-    constructor(registerDeviceService, bootstrapRealtimeService, tenantUiService, modalService, translateService, optionsService) {
+    constructor(registerDeviceService, bootstrapRealtimeService, tenantUiService, modalService, translateService, optionsService, activatedRoute, generalRegistration) {
         this.registerDeviceService = registerDeviceService;
         this.bootstrapRealtimeService = bootstrapRealtimeService;
         this.tenantUiService = tenantUiService;
         this.modalService = modalService;
         this.translateService = translateService;
         this.optionsService = optionsService;
+        this.activatedRoute = activatedRoute;
+        this.generalRegistration = generalRegistration;
         this.requireSecurityToken = false;
         this.isManagementTenant = false;
         this.isLoading = false;
@@ -777,6 +820,7 @@ class DeviceRegistrationViewComponent {
             .subscribe((bootstrap) => {
             this.registerDeviceService.onDeviceBootstrap(bootstrap);
         });
+        this.handleQueryParams();
     }
     ngOnDestroy() {
         this.unsubscribe$.next();
@@ -785,6 +829,29 @@ class DeviceRegistrationViewComponent {
     updateList(data) {
         this.registerDeviceService.internalListUpdate(data);
     }
+    async handleQueryParams() {
+        const { externalId, 'one-time-password': oneTimePassword } = this.activatedRoute.snapshot.queryParams;
+        if (!externalId) {
+            return;
+        }
+        try {
+            await this.generalRegistration.open({
+                useEST$: new BehaviorSubject(!!oneTimePassword),
+                model: {
+                    devicesToCreate: [
+                        {
+                            id: externalId,
+                            oneTimePassword
+                        }
+                    ]
+                }
+            });
+            this.loadAll();
+        }
+        catch (e) {
+            // modal closed
+        }
+    }
     async delete(id) {
         const confirmed = await this.modalService.confirm(gettext('Cancel device registration'), this.translateService.instant(gettext('You are about to cancel device registration for ID "{{id}}". Do you want to proceed?'), { id }), Status.DANGER, {
             ok: gettext('Cancel registration'),
@@ -826,13 +893,13 @@ class DeviceRegistrationViewComponent {
     showTokenInputBasedOnSecurityMode() {
         return this._securityTokenPolicy.getValue() !== DeviceRegistrationSecurityMode.IGNORED;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceRegistrationViewComponent, deps: [{ token: RegisterDeviceService }, { token: i1$1.DeviceBootstrapRealtimeService }, { token: i1$1.TenantUiService }, { token: i1$1.ModalService }, { token: i5.TranslateService }, { token: i1$1.OptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$2.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceRegistrationViewComponent, deps: [{ token: RegisterDeviceService }, { token: i1$1.DeviceBootstrapRealtimeService }, { token: i1$1.TenantUiService }, { token: i1$1.ModalService }, { token: i5.TranslateService }, { token: i1$1.OptionsService }, { token: i1.ActivatedRoute }, { token: GeneralDeviceRegistrationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$2.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.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: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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$1.DeviceBootstrapRealtimeService }, { type: i1$1.TenantUiService }, { type: i1$1.ModalService }, { type: i5.TranslateService }, { type: i1$1.OptionsService }] });
+        }], ctorParameters: () => [{ type: RegisterDeviceService }, { type: i1$1.DeviceBootstrapRealtimeService }, { type: i1$1.TenantUiService }, { type: i1$1.ModalService }, { type: i5.TranslateService }, { type: i1$1.OptionsService }, { type: i1.ActivatedRoute }, { type: GeneralDeviceRegistrationService }] });
 class RegisterDeviceNavigationFactory {
     constructor(permissions) {
@@ -1422,5 +1489,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { DeviceRegistrationFactory, GeneralDeviceRegistrationButtonComponent, GeneralDeviceRegistrationComponent, HOOK_DEVICE_REGISTRATION, RegisterDeviceExtensionService, RegisterDeviceModule, RegisterDeviceService, hookDeviceRegistration };
+export { DeviceRegistrationFactory, GeneralDeviceRegistrationButtonComponent, GeneralDeviceRegistrationComponent, GeneralDeviceRegistrationService, HOOK_DEVICE_REGISTRATION, RegisterDeviceExtensionService, RegisterDeviceModule, RegisterDeviceService, hookDeviceRegistration };
 //# sourceMappingURL=c8y-ngx-components-register-device.mjs.map