@c8y/ngx-components 1024.15.13 → 1024.16.10

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

@@ -690,9 +690,10 @@ class DeviceRegistrationViewComponent {
         if (!externalId) {
             return;
         }
+        const useEST = this.activatedRoute.snapshot.queryParamMap.has('one-time-password');
         try {
             await this.generalRegistration.open({
-                useEST$: new BehaviorSubject(!!oneTimePassword),
+                useEST$: new BehaviorSubject(useEST),
                 model: {
                     devicesToCreate: [
                         {
@@ -704,7 +705,7 @@ class DeviceRegistrationViewComponent {
             });
             this.loadAll();
         }
-        catch (e) {
+        catch {
             // modal closed
         }
     }
@@ -750,12 +751,11 @@ class DeviceRegistrationViewComponent {
         return this._securityTokenPolicy.getValue() !== DeviceRegistrationSecurityMode.IGNORED;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceRegistrationViewComponent, deps: [{ token: RegisterDeviceService }, { token: i1$2.DeviceBootstrapRealtimeService }, { token: i1$2.TenantUiService }, { token: i1$2.ModalService }, { token: i3.TranslateService }, { token: i1$2.OptionsService }, { token: i1.ActivatedRoute }, { token: GeneralDeviceRegistrationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: DeviceRegistrationViewComponent, isStandalone: true, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RegisterDeviceDropdownComponent, selector: "c8y-register-device-dropdown" }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DeviceRegistrationViewComponent, isStandalone: true, selector: "c8y-device-registration-view", ngImport: i0, template: "@if (deviceRequests$ | async; as deviceRequestList) {\n  <c8y-title>\n    {{ 'Device registration' | translate }}\n    @if (deviceRequestList.data.length === 1) {\n      <small>1 {{ 'new device' | translate }}</small>\n    }\n    @if (deviceRequestList.data.length > 1) {\n      <small> {{ deviceRequestList.data.length }} {{ 'new devices' | translate }} </small>\n    }\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  @if (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    @if (deviceRequestList.data.length > 0) {\n      <div\n        class=\"card-group\"\n        [ngClass]=\"gridOrList\"\n      >\n        <!-- START interact-list sticky header START -->\n        @if (gridOrList === 'interact-list') {\n          <div class=\"page-sticky-header hidden-xs\">\n            <div class=\"d-flex\">\n              <div class=\"card-header p-l-40\">\n                <p translate>Device</p>\n              </div>\n              <div class=\"card-block card-column-30 p-l-0 m-l-8\">\n                <p translate>Status</p>\n              </div>\n              @if (showTokenInputBasedOnSecurityMode()) {\n                <div class=\"card-block card-column-30 p-0\">\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              }\n              <div class=\"card-footer card-column-50\">\n                @if (isManagementTenant) {\n                  <div class=\"d-contents\">\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                } @else {\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                }\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        }\n        <!-- END interact-list sticky header END -->\n\n        @if (limitStatus?.isReached) {\n          <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\">\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\n        @for (singleRequest of deviceRequestList.data; track singleRequest.id) {\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                  @if (singleRequest.status === status.WAITING_FOR_CONNECTION) {\n                    <i\n                      class=\"icon-spin text-primary\"\n                      c8yIcon=\"refresh\"\n                    ></i>\n                  }\n                  {{ statusProps[singleRequest.status].label | translate }}\n                </p>\n              </div>\n\n              <ng-container *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\">\n                @if (showTokenInputBasedOnSecurityMode()) {\n                  <div\n                    class=\"card-block text-center card-column-30 p-t-0\"\n                    [ngClass]=\"{ 'p-b-0': !shouldShowSecurityTokenInput(singleRequest) }\"\n                  >\n                    @if (shouldShowSecurityTokenInput(singleRequest)) {\n                      @if (gridOrList !== 'interact-list') {\n                        <span\n                          class=\"text-label-small\"\n                          translate\n                        >\n                          Security token\n                        </span>\n                      }\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                    }\n                  </div>\n                }\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                    @if (singleRequest.status === status.PENDING_ACCEPTANCE) {\n                      <span>{{ 'Remove' | translate }}</span>\n                    } @else {\n                      <span>{{ 'Cancel' | translate }}</span>\n                    }\n                  </button>\n                  @if (singleRequest.status === status.PENDING_ACCEPTANCE) {\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      title=\"{{ 'Accept' | translate }}\"\n                      type=\"button\"\n                      (click)=\"accept(singleRequest)\"\n                      [disabled]=\"\n                        isLoading ||\n                        limitStatus?.isReached ||\n                        (!singleRequest.securityToken && requireSecurityToken)\n                      \"\n                    >\n                      {{ 'Accept' | translate }}\n                    </button>\n                  }\n                </div>\n              </ng-container>\n\n              <div class=\"card-footer separator text-center card-column-50\">\n                @if (isManagementTenant) {\n                  <small class=\"d-contents\">\n                    @if (singleRequest.creationTime && singleRequest.owner) {\n                      <div 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-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                    } @else {\n                      <div class=\"d-contents\">\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                    }\n                  </small>\n                } @else {\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                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <c8y-load-more\n        [paging]=\"deviceRequestList.paging\"\n        [hidden]=\"true\"\n        (onLoad)=\"updateList($event)\"\n      ></c8y-load-more>\n    } @else {\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        @if (limitStatus?.isReached) {\n          <h3>\n            {{ limitReachedInfo$ | async }}\n          </h3>\n          <p translate>Please contact your platform administrator.</p>\n        } @else {\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        }\n      </div>\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RegisterDeviceDropdownComponent, selector: "c8y-register-device-dropdown" }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: FormsModule }, { kind: "directive", type: i6.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceRegistrationViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-registration-view', imports: [
-                        NgIf,
                         TitleComponent,
                         BreadcrumbComponent,
                         BreadcrumbItemComponent,
@@ -768,14 +768,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         HelpComponent,
                         C8yTranslateDirective,
                         PopoverDirective,
-                        NgFor,
                         FormsModule,
                         RequiredInputPlaceholderDirective,
                         LoadMoreComponent,
                         C8yTranslatePipe,
                         AsyncPipe,
                         DatePipe
-                    ], 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" }]
+                    ], template: "@if (deviceRequests$ | async; as deviceRequestList) {\n  <c8y-title>\n    {{ 'Device registration' | translate }}\n    @if (deviceRequestList.data.length === 1) {\n      <small>1 {{ 'new device' | translate }}</small>\n    }\n    @if (deviceRequestList.data.length > 1) {\n      <small> {{ deviceRequestList.data.length }} {{ 'new devices' | translate }} </small>\n    }\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  @if (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    @if (deviceRequestList.data.length > 0) {\n      <div\n        class=\"card-group\"\n        [ngClass]=\"gridOrList\"\n      >\n        <!-- START interact-list sticky header START -->\n        @if (gridOrList === 'interact-list') {\n          <div class=\"page-sticky-header hidden-xs\">\n            <div class=\"d-flex\">\n              <div class=\"card-header p-l-40\">\n                <p translate>Device</p>\n              </div>\n              <div class=\"card-block card-column-30 p-l-0 m-l-8\">\n                <p translate>Status</p>\n              </div>\n              @if (showTokenInputBasedOnSecurityMode()) {\n                <div class=\"card-block card-column-30 p-0\">\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              }\n              <div class=\"card-footer card-column-50\">\n                @if (isManagementTenant) {\n                  <div class=\"d-contents\">\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                } @else {\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                }\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        }\n        <!-- END interact-list sticky header END -->\n\n        @if (limitStatus?.isReached) {\n          <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3\">\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\n        @for (singleRequest of deviceRequestList.data; track singleRequest.id) {\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                  @if (singleRequest.status === status.WAITING_FOR_CONNECTION) {\n                    <i\n                      class=\"icon-spin text-primary\"\n                      c8yIcon=\"refresh\"\n                    ></i>\n                  }\n                  {{ statusProps[singleRequest.status].label | translate }}\n                </p>\n              </div>\n\n              <ng-container *c8yIfAllowed=\"['ROLE_DEVICE_CONTROL_ADMIN']\">\n                @if (showTokenInputBasedOnSecurityMode()) {\n                  <div\n                    class=\"card-block text-center card-column-30 p-t-0\"\n                    [ngClass]=\"{ 'p-b-0': !shouldShowSecurityTokenInput(singleRequest) }\"\n                  >\n                    @if (shouldShowSecurityTokenInput(singleRequest)) {\n                      @if (gridOrList !== 'interact-list') {\n                        <span\n                          class=\"text-label-small\"\n                          translate\n                        >\n                          Security token\n                        </span>\n                      }\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                    }\n                  </div>\n                }\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                    @if (singleRequest.status === status.PENDING_ACCEPTANCE) {\n                      <span>{{ 'Remove' | translate }}</span>\n                    } @else {\n                      <span>{{ 'Cancel' | translate }}</span>\n                    }\n                  </button>\n                  @if (singleRequest.status === status.PENDING_ACCEPTANCE) {\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      title=\"{{ 'Accept' | translate }}\"\n                      type=\"button\"\n                      (click)=\"accept(singleRequest)\"\n                      [disabled]=\"\n                        isLoading ||\n                        limitStatus?.isReached ||\n                        (!singleRequest.securityToken && requireSecurityToken)\n                      \"\n                    >\n                      {{ 'Accept' | translate }}\n                    </button>\n                  }\n                </div>\n              </ng-container>\n\n              <div class=\"card-footer separator text-center card-column-50\">\n                @if (isManagementTenant) {\n                  <small class=\"d-contents\">\n                    @if (singleRequest.creationTime && singleRequest.owner) {\n                      <div 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-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                    } @else {\n                      <div class=\"d-contents\">\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                    }\n                  </small>\n                } @else {\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                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <c8y-load-more\n        [paging]=\"deviceRequestList.paging\"\n        [hidden]=\"true\"\n        (onLoad)=\"updateList($event)\"\n      ></c8y-load-more>\n    } @else {\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        @if (limitStatus?.isReached) {\n          <h3>\n            {{ limitReachedInfo$ | async }}\n          </h3>\n          <p translate>Please contact your platform administrator.</p>\n        } @else {\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        }\n      </div>\n    }\n  }\n}\n" }]
         }], ctorParameters: () => [{ type: RegisterDeviceService }, { type: i1$2.DeviceBootstrapRealtimeService }, { type: i1$2.TenantUiService }, { type: i1$2.ModalService }, { type: i3.TranslateService }, { type: i1$2.OptionsService }, { type: i1.ActivatedRoute }, { type: GeneralDeviceRegistrationService }] });
 
 class RegisterDeviceNavigationFactory {