@c8y/ngx-components 1023.0.2 → 1023.4.1

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

@@ -18,7 +18,7 @@ import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { get, pick, sortBy, flatMap } from 'lodash-es';
 import { CdkStep, STEP_STATE } from '@angular/cdk/stepper';
-import { NgIf, NgClass, NgFor, AsyncPipe, JsonPipe, NgTemplateOutlet } from '@angular/common';
+import { NgClass, AsyncPipe, JsonPipe, NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
 import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
 import * as i3 from '@ngx-translate/core';
 import { flatten } from 'lodash';
@@ -334,7 +334,7 @@ class GeneralDeviceRegistrationComponent {
                         },
                         {
                             key: 'oneTimePassword',
-                            type: 'string',
+                            type: 'password',
                             expressions: {
                                 hide: field => !field.options?.formState?.useEST
                             },
@@ -442,7 +442,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: "20.3.3", ngImport: i0, type: GeneralDeviceRegistrationComponent, deps: [{ token: i1$2.TenantUiService }, { token: i1$1.TenantService }, { token: RegisterDeviceService }, { token: i1$1.InventoryService }, { token: i0.ChangeDetectorRef }, { token: i4.BsModalRef }, { token: i1$2.GainsightService }, { token: i1$2.FeatureCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: GeneralDeviceRegistrationComponent, isStandalone: true, 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\n    [hideStepProgress]=\"true\"\n    linear\n    c8y-modal-body\n  >\n    <cdk-step [stepControl]=\"form\">\n      <div class=\"text-center sticky-top bg-component\">\n        <p\n          class=\"text-medium text-16 separator-bottom p-16\"\n          translate\n        >\n          Register general devices\n        </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            id=\"useEST\"\n            name=\"useEST\"\n            type=\"checkbox\"\n            [ngModel]=\"useEST$.getValue()\"\n            (ngModelChange)=\"useEST$.next($event)\"\n          />\n          <span></span>\n          <span class=\"control-label\">\n            {{ 'Create device certificates during device registration' | translate }}\n          </span>\n          <button\n            class=\"btn-help\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The device registration process includes creating device certificates, which are issued by the tenant\\'s Certificate Authority (CA).'\n                | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </label>\n      </div>\n      <div>\n        <formly-form\n          class=\"formly-group-array-cols d-block p-l-24 p-b-24 min-height-fit p-r-8\"\n          [form]=\"form\"\n          [fields]=\"fields\"\n          [model]=\"model\"\n          [options]=\"options\"\n          [ngClass]=\"{ 'p-t-24': !(certificateAuthorityFeatureEnabled | async) }\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        (onNext)=\"registerDevice($event)\"\n        (onCancel)=\"cancel()\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"!form?.valid\"\n        [pending]=\"isLoading$ | async\"\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          class=\"lead\"\n          type=\"success\"\n          *ngIf=\"success.length === 1 && failed.length === 0\"\n          text=\"{{ 'Device registered' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n        ></c8y-operation-result>\n        <c8y-operation-result\n          class=\"lead\"\n          type=\"error\"\n          *ngIf=\"success.length === 0 && failed.length === 1\"\n          text=\"{{ 'Failed to register device' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n        ></c8y-operation-result>\n\n        <ng-container *ngIf=\"success.length > 1 || failed.length > 1\">\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"success\"\n            *ngIf=\"failed.length === 0\"\n            [text]=\"\n              '{{ successfulDevicesCount }} devices registered'\n                | translate: { successfulDevicesCount: success.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"error\"\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          ></c8y-operation-result>\n        </ng-container>\n\n        <div\n          class=\"p-l-24 p-r-24 text-center\"\n          data-cy=\"device-registration-failure-message\"\n          *ngIf=\"success.length > 0 && failed.length > 0\"\n        >\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"error\"\n            text=\"{{ 'Several devices failed to register' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n          <p\n            class=\"p-b-16 text-danger\"\n            ngNonBindable\n            translate\n            [translateParams]=\"{ count: failed.length, total: failed.length + success.length }\"\n          >\n            Registration failed for {{ count }} devices out of {{ total }}.\n          </p>\n        </div>\n\n        <div\n          class=\"m-b-8 p-l-24 p-r-24\"\n          data-cy=\"device-registration-success-message\"\n          *ngIf=\"success.length > 0\"\n        >\n          <span\n            *ngIf=\"!(useEST$ | async)\"\n            translate\n          >\n            Turn on the registered devices and wait for connections to be established. Once a device\n            is connected, its status will change to \"Pending acceptance\". You will need to approve\n            it by clicking on the \"Accept\" button.\n          </span>\n          <span\n            *ngIf=\"useEST$ | async\"\n            translate\n          >\n            The successfully enrolled devices can now request signed certificates and use them to\n            connect and authenticate to the platform via certificate-based authentication.\n          </span>\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\n              class=\"text-danger\"\n              [icon]=\"'ban'\"\n            ></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\n              class=\"text-success\"\n              [icon]=\"'check-circle'\"\n            ></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: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i5.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GeneralDeviceRegistrationComponent, isStandalone: true, 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\n    [hideStepProgress]=\"true\"\n    linear\n    c8y-modal-body\n  >\n    <cdk-step [stepControl]=\"form\">\n      <div class=\"text-center sticky-top bg-component\">\n        <p\n          class=\"text-medium text-16 separator-bottom p-16\"\n          translate\n        >\n          Register general devices\n        </p>\n        @if (certificateAuthorityFeatureEnabled | async) {\n          <label\n            class=\"c8y-switch m-24 a-i-center\"\n            title=\"{{ 'Create device certificates during device registration' | translate }}\"\n            for=\"useEST\"\n          >\n            <input\n              id=\"useEST\"\n              name=\"useEST\"\n              type=\"checkbox\"\n              [ngModel]=\"useEST$.getValue()\"\n              (ngModelChange)=\"useEST$.next($event)\"\n            />\n            <span></span>\n            <span class=\"control-label\">\n              {{ 'Create device certificates during device registration' | translate }}\n            </span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'The device registration process includes creating device certificates, which are issued by the tenant\\'s Certificate Authority (CA).'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n        }\n      </div>\n      <div>\n        <formly-form\n          class=\"formly-group-array-cols d-block p-l-24 p-b-24 min-height-fit p-r-8\"\n          [form]=\"form\"\n          [fields]=\"fields\"\n          [model]=\"model\"\n          [options]=\"options\"\n          [ngClass]=\"{ 'p-t-24': !(certificateAuthorityFeatureEnabled | async) }\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        (onNext)=\"registerDevice($event)\"\n        (onCancel)=\"cancel()\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"!form?.valid\"\n        [pending]=\"isLoading$ | async\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step state=\"final\">\n      <div class=\"p-24 min-height-fit\">\n        @if (success.length === 1 && failed.length === 0) {\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"success\"\n            text=\"{{ 'Device registered' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        } @else if (success.length === 0 && failed.length === 1) {\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"error\"\n            text=\"{{ 'Failed to register device' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        } @else if (success.length > 1 && failed.length === 0) {\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"success\"\n            [text]=\"\n              '{{ successfulDevicesCount }} devices registered'\n                | translate: { successfulDevicesCount: success.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        } @else if (success.length === 0 && failed.length > 1) {\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"error\"\n            [text]=\"\n              '{{ failedDevicesCount }} devices failed to register'\n                | translate: { failedDevicesCount: failed.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        } @else if (success.length > 0 && failed.length > 0) {\n          <div\n            class=\"p-l-24 p-r-24 text-center\"\n            data-cy=\"device-registration-failure-message\"\n          >\n            <c8y-operation-result\n              class=\"lead\"\n              type=\"error\"\n              text=\"{{ 'Several devices failed to register' | translate }}\"\n              [size]=\"84\"\n              [vertical]=\"true\"\n            ></c8y-operation-result>\n            <p\n              class=\"p-b-16 text-danger\"\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: failed.length, total: failed.length + success.length }\"\n            >\n              Registration failed for {{ count }} devices out of {{ total }}.\n            </p>\n          </div>\n        }\n\n        @if (success.length > 0) {\n          <div\n            class=\"m-b-8 p-l-24 p-r-24\"\n            data-cy=\"device-registration-success-message\"\n          >\n            @if (!(useEST$ | async)) {\n              <span translate>\n                Turn on the registered devices and wait for connections to be established. Once a\n                device is connected, its status will change to \"Pending acceptance\". You will need\n                to approve it by clicking on the \"Accept\" button.\n              </span>\n            } @else {\n              <span translate>\n                The successfully enrolled devices can now request signed certificates and use them\n                to connect and authenticate to the platform via certificate-based authentication.\n              </span>\n            }\n          </div>\n        }\n\n        <c8y-list-group class=\"separator-top m-t-16\">\n          @for (fail of failed; track $index) {\n            <c8y-li>\n              <c8y-li-icon\n                class=\"text-danger\"\n                [icon]=\"'ban'\"\n              ></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\n          @for (s of success; track $index) {\n            <c8y-li>\n              <c8y-li-icon\n                class=\"text-success\"\n                [icon]=\"'check-circle'\"\n              ></c8y-li-icon>\n              {{ s?.id }}\n            </c8y-li>\n          }\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: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "component", type: CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i5.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     memoize(),
@@ -470,7 +470,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         C8yStepper,
                         CdkStep,
                         C8yTranslateDirective,
-                        NgIf,
                         FormsModule,
                         PopoverDirective,
                         FormlyModule,
@@ -478,14 +477,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         C8yStepperButtons,
                         OperationResultComponent,
                         ListGroupComponent,
-                        NgFor,
                         ListItemComponent,
                         ListItemIconComponent,
                         ListItemCollapseComponent,
                         C8yTranslatePipe,
                         AsyncPipe,
                         JsonPipe
-                    ], 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\n    [hideStepProgress]=\"true\"\n    linear\n    c8y-modal-body\n  >\n    <cdk-step [stepControl]=\"form\">\n      <div class=\"text-center sticky-top bg-component\">\n        <p\n          class=\"text-medium text-16 separator-bottom p-16\"\n          translate\n        >\n          Register general devices\n        </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            id=\"useEST\"\n            name=\"useEST\"\n            type=\"checkbox\"\n            [ngModel]=\"useEST$.getValue()\"\n            (ngModelChange)=\"useEST$.next($event)\"\n          />\n          <span></span>\n          <span class=\"control-label\">\n            {{ 'Create device certificates during device registration' | translate }}\n          </span>\n          <button\n            class=\"btn-help\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The device registration process includes creating device certificates, which are issued by the tenant\\'s Certificate Authority (CA).'\n                | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </label>\n      </div>\n      <div>\n        <formly-form\n          class=\"formly-group-array-cols d-block p-l-24 p-b-24 min-height-fit p-r-8\"\n          [form]=\"form\"\n          [fields]=\"fields\"\n          [model]=\"model\"\n          [options]=\"options\"\n          [ngClass]=\"{ 'p-t-24': !(certificateAuthorityFeatureEnabled | async) }\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        (onNext)=\"registerDevice($event)\"\n        (onCancel)=\"cancel()\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"!form?.valid\"\n        [pending]=\"isLoading$ | async\"\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          class=\"lead\"\n          type=\"success\"\n          *ngIf=\"success.length === 1 && failed.length === 0\"\n          text=\"{{ 'Device registered' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n        ></c8y-operation-result>\n        <c8y-operation-result\n          class=\"lead\"\n          type=\"error\"\n          *ngIf=\"success.length === 0 && failed.length === 1\"\n          text=\"{{ 'Failed to register device' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n        ></c8y-operation-result>\n\n        <ng-container *ngIf=\"success.length > 1 || failed.length > 1\">\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"success\"\n            *ngIf=\"failed.length === 0\"\n            [text]=\"\n              '{{ successfulDevicesCount }} devices registered'\n                | translate: { successfulDevicesCount: success.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"error\"\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          ></c8y-operation-result>\n        </ng-container>\n\n        <div\n          class=\"p-l-24 p-r-24 text-center\"\n          data-cy=\"device-registration-failure-message\"\n          *ngIf=\"success.length > 0 && failed.length > 0\"\n        >\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"error\"\n            text=\"{{ 'Several devices failed to register' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n          <p\n            class=\"p-b-16 text-danger\"\n            ngNonBindable\n            translate\n            [translateParams]=\"{ count: failed.length, total: failed.length + success.length }\"\n          >\n            Registration failed for {{ count }} devices out of {{ total }}.\n          </p>\n        </div>\n\n        <div\n          class=\"m-b-8 p-l-24 p-r-24\"\n          data-cy=\"device-registration-success-message\"\n          *ngIf=\"success.length > 0\"\n        >\n          <span\n            *ngIf=\"!(useEST$ | async)\"\n            translate\n          >\n            Turn on the registered devices and wait for connections to be established. Once a device\n            is connected, its status will change to \"Pending acceptance\". You will need to approve\n            it by clicking on the \"Accept\" button.\n          </span>\n          <span\n            *ngIf=\"useEST$ | async\"\n            translate\n          >\n            The successfully enrolled devices can now request signed certificates and use them to\n            connect and authenticate to the platform via certificate-based authentication.\n          </span>\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\n              class=\"text-danger\"\n              [icon]=\"'ban'\"\n            ></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\n              class=\"text-success\"\n              [icon]=\"'check-circle'\"\n            ></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" }]
+                    ], 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\n    [hideStepProgress]=\"true\"\n    linear\n    c8y-modal-body\n  >\n    <cdk-step [stepControl]=\"form\">\n      <div class=\"text-center sticky-top bg-component\">\n        <p\n          class=\"text-medium text-16 separator-bottom p-16\"\n          translate\n        >\n          Register general devices\n        </p>\n        @if (certificateAuthorityFeatureEnabled | async) {\n          <label\n            class=\"c8y-switch m-24 a-i-center\"\n            title=\"{{ 'Create device certificates during device registration' | translate }}\"\n            for=\"useEST\"\n          >\n            <input\n              id=\"useEST\"\n              name=\"useEST\"\n              type=\"checkbox\"\n              [ngModel]=\"useEST$.getValue()\"\n              (ngModelChange)=\"useEST$.next($event)\"\n            />\n            <span></span>\n            <span class=\"control-label\">\n              {{ 'Create device certificates during device registration' | translate }}\n            </span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'The device registration process includes creating device certificates, which are issued by the tenant\\'s Certificate Authority (CA).'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n        }\n      </div>\n      <div>\n        <formly-form\n          class=\"formly-group-array-cols d-block p-l-24 p-b-24 min-height-fit p-r-8\"\n          [form]=\"form\"\n          [fields]=\"fields\"\n          [model]=\"model\"\n          [options]=\"options\"\n          [ngClass]=\"{ 'p-t-24': !(certificateAuthorityFeatureEnabled | async) }\"\n        ></formly-form>\n      </div>\n      <c8y-stepper-buttons\n        class=\"sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0\"\n        (onNext)=\"registerDevice($event)\"\n        (onCancel)=\"cancel()\"\n        [showButtons]=\"{ cancel: true, next: true }\"\n        [disabled]=\"!form?.valid\"\n        [pending]=\"isLoading$ | async\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step state=\"final\">\n      <div class=\"p-24 min-height-fit\">\n        @if (success.length === 1 && failed.length === 0) {\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"success\"\n            text=\"{{ 'Device registered' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        } @else if (success.length === 0 && failed.length === 1) {\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"error\"\n            text=\"{{ 'Failed to register device' | translate }}\"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        } @else if (success.length > 1 && failed.length === 0) {\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"success\"\n            [text]=\"\n              '{{ successfulDevicesCount }} devices registered'\n                | translate: { successfulDevicesCount: success.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        } @else if (success.length === 0 && failed.length > 1) {\n          <c8y-operation-result\n            class=\"lead\"\n            type=\"error\"\n            [text]=\"\n              '{{ failedDevicesCount }} devices failed to register'\n                | translate: { failedDevicesCount: failed.length }\n            \"\n            [size]=\"84\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        } @else if (success.length > 0 && failed.length > 0) {\n          <div\n            class=\"p-l-24 p-r-24 text-center\"\n            data-cy=\"device-registration-failure-message\"\n          >\n            <c8y-operation-result\n              class=\"lead\"\n              type=\"error\"\n              text=\"{{ 'Several devices failed to register' | translate }}\"\n              [size]=\"84\"\n              [vertical]=\"true\"\n            ></c8y-operation-result>\n            <p\n              class=\"p-b-16 text-danger\"\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: failed.length, total: failed.length + success.length }\"\n            >\n              Registration failed for {{ count }} devices out of {{ total }}.\n            </p>\n          </div>\n        }\n\n        @if (success.length > 0) {\n          <div\n            class=\"m-b-8 p-l-24 p-r-24\"\n            data-cy=\"device-registration-success-message\"\n          >\n            @if (!(useEST$ | async)) {\n              <span translate>\n                Turn on the registered devices and wait for connections to be established. Once a\n                device is connected, its status will change to \"Pending acceptance\". You will need\n                to approve it by clicking on the \"Accept\" button.\n              </span>\n            } @else {\n              <span translate>\n                The successfully enrolled devices can now request signed certificates and use them\n                to connect and authenticate to the platform via certificate-based authentication.\n              </span>\n            }\n          </div>\n        }\n\n        <c8y-list-group class=\"separator-top m-t-16\">\n          @for (fail of failed; track $index) {\n            <c8y-li>\n              <c8y-li-icon\n                class=\"text-danger\"\n                [icon]=\"'ban'\"\n              ></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\n          @for (s of success; track $index) {\n            <c8y-li>\n              <c8y-li-icon\n                class=\"text-success\"\n                [icon]=\"'check-circle'\"\n              ></c8y-li-icon>\n              {{ s?.id }}\n            </c8y-li>\n          }\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$2.TenantUiService }, { type: i1$1.TenantService }, { type: RegisterDeviceService }, { type: i1$1.InventoryService }, { type: i0.ChangeDetectorRef }, { type: i4.BsModalRef }, { type: i1$2.GainsightService }, { type: i1$2.FeatureCacheService }], propDecorators: { canLoadTenants$: [], getTenants$: [], getGroups$: [] } });
 
 class GeneralDeviceRegistrationService {