@c8y/ngx-components 1024.2.4 → 1024.8.3

package/fesm2022/c8y-ngx-components-trusted-certificates.mjs

@@ -3,7 +3,7 @@ import { inject, Injectable, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
 import * as i2 from '@c8y/ngx-components';
-import { Permissions, NavigatorNode, ActionBarItemComponent, IconDirective, C8yTranslateDirective, C8yTranslatePipe, Status, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, HelpComponent, FormGroupComponent, RequiredInputPlaceholderDirective, DefaultValidationDirective, DropAreaComponent, CoreModule, CommonModule, EmptyStateComponent, ListGroupComponent, ForOfDirective, ListItemComponent, ListItemIconComponent, ListItemBodyComponent, ListItemCollapseComponent, ProductExperienceDirective, DatePipe, hookNavigator, hookPatternMessages, hookTab } from '@c8y/ngx-components';
+import { Permissions, NavigatorNode, ActionBarItemComponent, IconDirective, C8yTranslateDirective, C8yTranslatePipe, Status, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, HelpComponent, FormGroupComponent, RequiredInputPlaceholderDirective, DefaultValidationDirective, DropAreaComponent, CoreModule, CommonModule, EmptyStateComponent, ListGroupComponent, ForOfDirective, ListItemComponent, ListItemIconComponent, ListItemBodyComponent, ListItemCollapseComponent, InputGroupEditableComponent, ProductExperienceDirective, DatePipe, hookNavigator, hookPatternMessages, hookTab } from '@c8y/ngx-components';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { BsDatepickerInputDirective, BsDatepickerDirective, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { pull, isEmpty, assign } from 'lodash-es';
@@ -501,7 +501,7 @@ class TrustedCertificateListComponent {
             modal.close();
             this.reload.next();
         }
-        catch (ex) {
+        catch {
             // do nothing
         }
     }
@@ -682,7 +682,7 @@ class TrustedCertificateListComponent {
         this.certificateAuthorityFeatureEnabled = await firstValueFrom(this.featureCacheService.getFeatureState('certificate-authority'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrustedCertificateListComponent, deps: [{ token: i1$1.BsModalService }, { token: i2.AlertService }, { token: i2$1.TrustedCertificateService }, { token: i2.ModalService }, { token: i4$1.TranslateService }, { token: i2.ClipboardService }, { token: i2.GainsightService }, { token: i2$1.SystemOptionsService }, { token: i2.FeatureCacheService }, { token: TrustedCertificatesGuard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TrustedCertificateListComponent, isStandalone: true, selector: "c8y-trusted-certificates", ngImport: i0, template: "@if ((hasReadRole$ | async) || (hasAdminRole$ | async)) {\n  <div>\n    <c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n    <c8y-breadcrumb>\n      <c8y-breadcrumb-item\n        icon=\"c8y-management\"\n        label=\"{{ 'Management' | translate }}\"\n      ></c8y-breadcrumb-item>\n      <c8y-breadcrumb-item\n        icon=\"certificate\"\n        label=\"{{ 'Trusted certificates' | translate }}\"\n      ></c8y-breadcrumb-item>\n    </c8y-breadcrumb>\n\n    @if (certificateAuthorityFeatureEnabled) {\n      <c8y-action-bar-item\n        [placement]=\"'right'\"\n        [priority]=\"1000\"\n      >\n        <button\n          class=\"btn btn-link\"\n          title=\"{{ 'Generate CA certificate' | translate }}\"\n          type=\"button\"\n          data-cy=\"trusted-certificate-list--generate-ca-certificate\"\n          [disabled]=\"!(hasAdminRole$ | async) || certificateAuthorityExists\"\n          (click)=\"addCACertificate()\"\n        >\n          <i c8yIcon=\"contract\"></i>\n          {{ 'Generate CA certificate' | translate }}\n        </button>\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          popover=\"{{\n            'The Certificate Authority (CA) certificate is used to sign device certificates for secure authentication. Only one CA certificate can be generated for the tenant.'\n              | translate\n          }}\"\n          placement=\"bottom\"\n          triggers=\"focus\"\n          type=\"button\"\n        ></button>\n      </c8y-action-bar-item>\n    }\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"900\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Add trusted certificate' | translate }}\"\n        type=\"button\"\n        data-cy=\"trusted-certificate-list--add-trusted-certificate\"\n        (click)=\"addTrustedCertificate()\"\n        [disabled]=\"!(hasAdminRole$ | async)\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n        {{ 'Add trusted certificate' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"800\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadTrustedCertificates()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': reloading | async }\"\n        ></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-help\n      src=\"/docs/device-certificate-authentication/managing-trusted-certificates/#managing-trusted-certificates\"\n    ></c8y-help>\n\n    @if ((trustedCertificates | async)?.data.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'certificate'\"\n        [title]=\"'No trusted certificates to display.' | translate\"\n        [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n      >\n        <button\n          class=\"btn btn-primary\"\n          title=\"{{ 'Add trusted certificate' | translate }}\"\n          type=\"button\"\n          (click)=\"addTrustedCertificate()\"\n        >\n          {{ 'Add trusted certificate' | translate }}\n        </button>\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-list-group class=\"m-b-24\">\n      @if ((trustedCertificates | async)?.data.length > 0) {\n        <div class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\">\n          <div class=\"c8y-list__item__block\">\n            <div class=\"c8y-list__item__icon\">\n              <i\n                class=\"invisible\"\n                c8yIcon=\"certificate\"\n              ></i>\n            </div>\n            <div class=\"c8y-list__item__body\">\n              <div class=\"content-flex-60\">\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Certificate' | translate }} \"\n                  >\n                    {{ 'Certificate' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Status' | translate }}\"\n                  >\n                    {{ 'Status' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Algorithm' | translate }}\"\n                  >\n                    {{ 'Algorithm' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Expiration date' | translate }}\"\n                  >\n                    {{ 'Expiration date' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Auto registration' | translate }}\"\n                  >\n                    {{ 'Auto registration' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Proof of possession' | translate }}\"\n                  >\n                    {{ 'Proof of possession' | translate }}\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div class=\"c8y-list__item__actions\"></div>\n          </div>\n        </div>\n      }\n\n      <c8y-li\n        *c8yFor=\"\n          let trustedCertificate of trustedCertificates | async;\n          let i = index;\n          pipe: sortByExpirationDateAsc;\n          loadMore: 'none'\n        \"\n        #listItem\n        data-cy=\"c8y-trusted-certificates-list--item-block\"\n      >\n        <c8y-li-icon>\n          @if (!trustedCertificate.tenantCertificateAuthority) {\n            <button\n              class=\"btn-clean\"\n              attr.aria-label=\"{{ 'Certificate' | translate }}\"\n              tooltip=\"{{ 'Certificate' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n            >\n              <i c8yIcon=\"certificate\"></i>\n            </button>\n          }\n          @if (trustedCertificate.tenantCertificateAuthority) {\n            <button\n              class=\"btn-clean\"\n              attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n              tooltip=\"{{ 'CA certificate' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n            >\n              <i c8yIcon=\"contract\"></i>\n            </button>\n          }\n        </c8y-li-icon>\n\n        <c8y-li-body class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <button\n              class=\"btn-clean text-truncate\"\n              title=\"{{ trustedCertificate.name }}\"\n              type=\"button\"\n              (click)=\"listItem.toggleCollapsed()\"\n            >\n              {{ trustedCertificate.name }}\n            </button>\n          </div>\n          <div class=\"col-2\">\n            <div class=\"visible-xs p-8\"></div>\n            <button\n              class=\"btn c8y-btn-checkbox--inline\"\n              name=\"certificateStatus\"\n              type=\"button\"\n              [(ngModel)]=\"trustedCertificate.status\"\n              btnCheckbox\n              btnCheckboxTrue=\"ENABLED\"\n              btnCheckboxFalse=\"DISABLED\"\n              (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n              [disabled]=\"!(hasAdminRole$ | async)\"\n              [ngClass]=\"{\n                disabled: !(hasAdminRole$ | async)\n              }\"\n            >\n              <small\n                title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n                [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n              >\n                {{ 'Disabled`trusted certificate status`' | translate }}\n              </small>\n              <small\n                title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n                [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n              >\n                {{ 'Enabled`trusted certificate status`' | translate }}\n              </small>\n            </button>\n            <div class=\"visible-xs p-8\"></div>\n          </div>\n          <div class=\"col-2\">\n            <div\n              class=\"text-truncate\"\n              title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n            >\n              <span\n                class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n                translate\n              >\n                Algorithm\n              </span>\n              {{ trustedCertificate.algorithmName }}\n            </div>\n          </div>\n\n          <div class=\"col-2\">\n            <div\n              class=\"text-truncate\"\n              title=\"{{ 'Expiration date' | translate }}: {{\n                trustedCertificate.notAfter | c8yDate\n              }}\"\n            >\n              <span\n                class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n                translate\n              >\n                Expiration date\n              </span>\n              @let expirationHighlight = getExpirationHighlight(trustedCertificate);\n              <span>\n                <small\n                  [attr.title]=\"expirationHighlight?.tooltipText\"\n                  [ngClass]=\"expirationHighlight?.textClass\"\n                >\n                  @if (expirationHighlight?.expired) {\n                    <del>\n                      <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                    </del>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                  }\n                  <ng-template #expirationDateTpl>\n                    @if (expirationHighlight?.icon) {\n                      <i\n                        class=\"m-r-4\"\n                        c8yIcon=\"{{ expirationHighlight?.icon }}\"\n                      ></i>\n                    }\n                    <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n                  </ng-template>\n                </small>\n                @if (expirationHighlight?.renewable) {\n                  <button\n                    class=\"btn btn-link btn-icon\"\n                    title=\"{{ 'Renew certificate' | translate }}\"\n                    type=\"button\"\n                    (click)=\"renewCertificate()\"\n                  >\n                    <i c8yIcon=\"refresh\"></i>\n                  </button>\n                }\n              </span>\n            </div>\n          </div>\n          <div class=\"col-2\">\n            <div class=\"text-truncate\">\n              <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n                {{ 'Auto registration' | translate }}\n              </span>\n              @if (trustedCertificate.autoRegistrationEnabled) {\n                <span\n                  title=\"{{ 'Auto registration' | translate }}:  {{\n                    'Enabled`auto registration`' | translate\n                  }}\"\n                >\n                  {{ 'Enabled`auto registration`' | translate }}\n                </span>\n              }\n              @if (!trustedCertificate.autoRegistrationEnabled) {\n                <span\n                  title=\"{{ 'Auto registration' | translate }}:  {{\n                    'Disabled`auto registration`' | translate\n                  }}\"\n                >\n                  {{ 'Disabled`auto registration`' | translate }}\n                </span>\n              }\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n          </div>\n          <div class=\"col-2 d-flex\">\n            <div class=\"text-truncate\">\n              <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n                {{ 'Proof of possession' | translate }}\n              </span>\n              @if (trustedCertificate.tenantCertificateAuthority) {\n                <span title=\"{{ 'Proof of possession' | translate }}: {{ 'N/A' | translate }}\">\n                  {{ 'N/A' | translate }}\n                </span>\n              }\n              @if (!trustedCertificate.tenantCertificateAuthority) {\n                <span>\n                  @if (trustedCertificate.proofOfPossessionValid) {\n                    <span\n                      title=\"{{ 'Proof of possession' | translate }}:  {{\n                        'Complete`proof of possession`' | translate\n                      }}\"\n                    >\n                      <div class=\"icon-flex\">\n                        <i\n                          class=\"text-success\"\n                          c8yIcon=\"success\"\n                        ></i>\n                        {{ 'Complete`proof of possession`' | translate }}\n                      </div>\n                    </span>\n                  }\n                  @if (!trustedCertificate.proofOfPossessionValid) {\n                    <span\n                      title=\"{{ 'Proof of possession' | translate }}:  {{\n                        'Incomplete`proof of possession`' | translate\n                      }}\"\n                    >\n                      <div class=\"icon-flex\">\n                        <i\n                          class=\"text-warning\"\n                          c8yIcon=\"warning\"\n                        ></i>\n                        {{ 'Incomplete`proof of possession`' | translate }}\n                      </div>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n            <button\n              class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"right\"\n              type=\"button\"\n              data-cy=\"c8y-trusted-certificate--delete\"\n              [delay]=\"500\"\n              (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n              [disabled]=\"!(hasAdminRole$ | async)\"\n            >\n              <i c8yIcon=\"delete\"></i>\n            </button>\n          </div>\n        </c8y-li-body>\n\n        <c8y-li-collapse>\n          <div class=\"p-t-16 p-b-16\">\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Certificate name' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      class=\"form-control\"\n                      type=\"text\"\n                      required\n                      data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                      [(ngModel)]=\"trustedCertificate.name\"\n                      [disabled]=\"!(hasAdminRole$ | async)\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Update certificate name' | translate }}\"\n                        type=\"button\"\n                        (click)=\"\n                          updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                        \"\n                        [disabled]=\"!trustedCertificate.name\"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-1\"></div>\n              <div class=\"col-md-7\">\n                <c8y-form-group>\n                  <label\n                    class=\"control-label\"\n                    for=\"certInPemFormat\"\n                    translate\n                  >\n                    Certificate\n                  </label>\n                  <textarea\n                    class=\"form-control no-resize\"\n                    id=\"certInPemFormat\"\n                    name=\"certInPemFormat\"\n                    type=\"text\"\n                    rows=\"7\"\n                    readonly\n                    [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n                  ></textarea>\n                </c8y-form-group>\n                <c8y-form-group>\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ 'Auto registration' | translate }}\"\n                    [ngClass]=\"{\n                      disabled: !(hasAdminRole$ | async)\n                    }\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                      (ngModelChange)=\"\n                        updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                      \"\n                      [disabled]=\"!(hasAdminRole$ | async)\"\n                    />\n                    <span></span>\n                    <span>{{ 'Auto registration' | translate }}</span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <div\n                  class=\"legend form-block\"\n                  translate\n                >\n                  Additional properties\n                </div>\n                <ul class=\"list-unstyled\">\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Algorithm' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.algorithmName }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Version' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.version }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Valid from' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.notBefore | c8yDate }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Issuer' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.issuer }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Expiration date' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.notAfter | c8yDate }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Serial number' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.serialNumber }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Subject`of a certificate`' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.subject }}\n                    </span>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"col-md-1\"></div>\n              @if (!trustedCertificate.tenantCertificateAuthority) {\n                <div class=\"col-md-7\">\n                  <div class=\"legend form-block\">\n                    {{ 'Proof of possession' | translate }}\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      type=\"button\"\n                    ></button>\n                  </div>\n                  @if (trustedCertificate.proofOfPossessionValid) {\n                    <div>\n                      <span\n                        class=\"icon-flex\"\n                        title=\"{{ 'Proof of possession' | translate }}:  {{\n                          'Complete`proof of possession`' | translate\n                        }}\"\n                      >\n                        <i\n                          class=\"text-success\"\n                          c8yIcon=\"success\"\n                        ></i>\n                        {{ 'Complete`proof of possession`' | translate }}\n                      </span>\n                    </div>\n                  }\n                  @if (!trustedCertificate.proofOfPossessionValid) {\n                    <div>\n                      <div class=\"row m-b-16\">\n                        <div class=\"col-md-6\">\n                          <span\n                            class=\"icon-flex\"\n                            title=\"{{ 'Proof of possession' | translate }}:  {{\n                              'Incomplete`proof of possession`' | translate\n                            }}\"\n                          >\n                            <i\n                              class=\"text-warning\"\n                              c8yIcon=\"warning\"\n                            ></i>\n                            {{ 'Incomplete`proof of possession`' | translate }}\n                          </span>\n                        </div>\n                        <div class=\"col-md-6 col-lg-6 text-right-md\">\n                          <span class=\"text-label-small m-r-4\">\n                            {{ 'Verification code expires/expired on' | translate }}\n                          </span>\n                          {{\n                            (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil\n                              | c8yDate) || '---'\n                          }}\n                        </div>\n                      </div>\n                      <div class=\"row\">\n                        <div class=\"col-md-6 col-lg-6\">\n                          <c8y-form-group>\n                            <label\n                              class=\"control-label\"\n                              for=\"unsignedVerificationCode\"\n                              translate\n                            >\n                              Verification code\n                            </label>\n                            <textarea\n                              class=\"form-control no-resize\"\n                              id=\"unsignedVerificationCode\"\n                              name=\"unsignedVerificationCode\"\n                              type=\"text\"\n                              rows=\"5\"\n                              readonly\n                              [(ngModel)]=\"\n                                trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                            ></textarea>\n                          </c8y-form-group>\n                          <div class=\"d-flex\">\n                            <button\n                              class=\"btn btn-primary btn-sm\"\n                              title=\"{{ 'Regenerate verification code' | translate }}\"\n                              type=\"button\"\n                              (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n                              [disabled]=\"!(hasAdminRole$ | async)\"\n                            >\n                              {{ 'Regenerate`verification code`' | translate }}\n                            </button>\n\n                            <button\n                              class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                              [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                              tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                              placement=\"right\"\n                              type=\"button\"\n                              data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                              [delay]=\"500\"\n                              [disabled]=\"\n                                !trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                              (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                            >\n                              <i c8yIcon=\"clipboard\"></i>\n                            </button>\n                            <button\n                              class=\"btn btn-default btn-sm\"\n                              [attr.aria-label]=\"'Download as file' | translate\"\n                              tooltip=\"{{ 'Download as file' | translate }}\"\n                              type=\"button\"\n                              data-cy=\"c8y-trusted-certificates--download-as-file\"\n                              [delay]=\"500\"\n                              [disabled]=\"\n                                !trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                              (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n                              c8yProductExperience\n                              [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                              [actionData]=\"{\n                                component:\n                                  PRODUCT_EXPERIENCE.VERIFICATION_CODE.COMPONENTS.DOWNLOAD_CODE,\n                                action: PRODUCT_EXPERIENCE.VERIFICATION_CODE.ACTIONS.DOWNLOAD\n                              }\"\n                            >\n                              <i c8yIcon=\"download\"></i>\n                            </button>\n                          </div>\n                        </div>\n\n                        <div class=\"col-md-6 col-lg-6\">\n                          <c8y-form-group>\n                            <label\n                              class=\"control-label\"\n                              for=\"signedVerificationCode\"\n                            >\n                              {{ 'Signed verification code' | translate }}\n                              <button\n                                class=\"btn-help btn-help--sm\"\n                                [attr.aria-label]=\"'Help' | translate\"\n                                popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                                placement=\"top\"\n                                container=\"body\"\n                                type=\"button\"\n                                data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n                                [outsideClick]=\"true\"\n                              ></button>\n                            </label>\n                            <textarea\n                              class=\"form-control no-resize\"\n                              id=\"signedVerificationCode\"\n                              name=\"signedVerificationCode\"\n                              type=\"text\"\n                              rows=\"5\"\n                              [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n                            ></textarea>\n                          </c8y-form-group>\n                          <div class=\"d-flex\">\n                            <button\n                              class=\"btn btn-primary btn-sm\"\n                              title=\"{{ 'Verify signed verification code' | translate }}\"\n                              type=\"button\"\n                              (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n                              [disabled]=\"!trustedCertificate.signedVerificationCode\"\n                            >\n                              {{ 'Verify`signed verification code`' | translate }}\n                            </button>\n                            <button\n                              class=\"btn btn-sm btn-default m-l-auto\"\n                              [attr.aria-label]=\"'Upload file' | translate\"\n                              tooltip=\"{{ 'Upload file' | translate }}\"\n                              type=\"button\"\n                              [delay]=\"500\"\n                              (click)=\"fileInput.click()\"\n                              [disabled]=\"!(hasAdminRole$ | async)\"\n                            >\n                              <i c8yIcon=\"upload\"></i>\n                            </button>\n                            <input\n                              class=\"hidden\"\n                              type=\"file\"\n                              #fileInput\n                              (change)=\"onFileInput($event, trustedCertificate)\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </c8y-li-collapse>\n      </c8y-li>\n    </c8y-list-group>\n  </div>\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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { 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: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.17", type: TrustedCertificateListComponent, isStandalone: true, selector: "c8y-trusted-certificates", ngImport: i0, template: "@if ((hasReadRole$ | async) || (hasAdminRole$ | async)) {\n  <div>\n    <c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n    <c8y-breadcrumb>\n      <c8y-breadcrumb-item\n        icon=\"c8y-management\"\n        label=\"{{ 'Management' | translate }}\"\n      ></c8y-breadcrumb-item>\n      <c8y-breadcrumb-item\n        icon=\"certificate\"\n        label=\"{{ 'Trusted certificates' | translate }}\"\n      ></c8y-breadcrumb-item>\n    </c8y-breadcrumb>\n\n    @if (certificateAuthorityFeatureEnabled) {\n      <c8y-action-bar-item\n        [placement]=\"'right'\"\n        [priority]=\"1000\"\n      >\n        <button\n          class=\"btn btn-link\"\n          title=\"{{ 'Generate CA certificate' | translate }}\"\n          type=\"button\"\n          data-cy=\"trusted-certificate-list--generate-ca-certificate\"\n          [disabled]=\"!(hasAdminRole$ | async) || certificateAuthorityExists\"\n          (click)=\"addCACertificate()\"\n        >\n          <i c8yIcon=\"contract\"></i>\n          {{ 'Generate CA certificate' | translate }}\n        </button>\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          popover=\"{{\n            'The Certificate Authority (CA) certificate is used to sign device certificates for secure authentication. Only one CA certificate can be generated for the tenant.'\n              | translate\n          }}\"\n          placement=\"bottom\"\n          triggers=\"focus\"\n          type=\"button\"\n        ></button>\n      </c8y-action-bar-item>\n    }\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"900\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Add trusted certificate' | translate }}\"\n        type=\"button\"\n        data-cy=\"trusted-certificate-list--add-trusted-certificate\"\n        (click)=\"addTrustedCertificate()\"\n        [disabled]=\"!(hasAdminRole$ | async)\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n        {{ 'Add trusted certificate' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"800\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadTrustedCertificates()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': reloading | async }\"\n        ></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-help\n      src=\"/docs/device-certificate-authentication/managing-trusted-certificates/#managing-trusted-certificates\"\n    ></c8y-help>\n\n    @if ((trustedCertificates | async)?.data.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'certificate'\"\n        [title]=\"'No trusted certificates to display.' | translate\"\n        [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n      >\n        <button\n          class=\"btn btn-primary\"\n          title=\"{{ 'Add trusted certificate' | translate }}\"\n          type=\"button\"\n          (click)=\"addTrustedCertificate()\"\n        >\n          {{ 'Add trusted certificate' | translate }}\n        </button>\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-list-group class=\"m-b-24\">\n      @if ((trustedCertificates | async)?.data.length > 0) {\n        <div class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\">\n          <div class=\"c8y-list__item__block\">\n            <div class=\"c8y-list__item__icon\">\n              <i\n                class=\"invisible\"\n                c8yIcon=\"certificate\"\n              ></i>\n            </div>\n            <div class=\"c8y-list__item__body\">\n              <div class=\"content-flex-60\">\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Certificate' | translate }} \"\n                  >\n                    {{ 'Certificate' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Status' | translate }}\"\n                  >\n                    {{ 'Status' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Algorithm' | translate }}\"\n                  >\n                    {{ 'Algorithm' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Expiration date' | translate }}\"\n                  >\n                    {{ 'Expiration date' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Auto registration' | translate }}\"\n                  >\n                    {{ 'Auto registration' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Proof of possession' | translate }}\"\n                  >\n                    {{ 'Proof of possession' | translate }}\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div class=\"c8y-list__item__actions\"></div>\n          </div>\n        </div>\n      }\n\n      <c8y-li\n        *c8yFor=\"\n          let trustedCertificate of trustedCertificates | async;\n          let i = index;\n          pipe: sortByExpirationDateAsc;\n          loadMore: 'none'\n        \"\n        #listItem\n        data-cy=\"c8y-trusted-certificates-list--item-block\"\n      >\n        <c8y-li-icon>\n          @if (!trustedCertificate.tenantCertificateAuthority) {\n            <button\n              class=\"btn-clean\"\n              attr.aria-label=\"{{ 'Certificate' | translate }}\"\n              tooltip=\"{{ 'Certificate' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n            >\n              <i c8yIcon=\"certificate\"></i>\n            </button>\n          }\n          @if (trustedCertificate.tenantCertificateAuthority) {\n            <button\n              class=\"btn-clean\"\n              attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n              tooltip=\"{{ 'CA certificate' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n            >\n              <i c8yIcon=\"contract\"></i>\n            </button>\n          }\n        </c8y-li-icon>\n\n        <c8y-li-body class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <button\n              class=\"btn-clean text-truncate\"\n              title=\"{{ trustedCertificate.name }}\"\n              type=\"button\"\n              (click)=\"listItem.toggleCollapsed()\"\n            >\n              {{ trustedCertificate.name }}\n            </button>\n          </div>\n          <div class=\"col-2\">\n            <div class=\"visible-xs p-8\"></div>\n            <button\n              class=\"btn c8y-btn-checkbox--inline\"\n              name=\"certificateStatus\"\n              type=\"button\"\n              [(ngModel)]=\"trustedCertificate.status\"\n              btnCheckbox\n              btnCheckboxTrue=\"ENABLED\"\n              btnCheckboxFalse=\"DISABLED\"\n              (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n              [disabled]=\"!(hasAdminRole$ | async)\"\n              [ngClass]=\"{\n                disabled: !(hasAdminRole$ | async)\n              }\"\n            >\n              <small\n                title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n                [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n              >\n                {{ 'Disabled`trusted certificate status`' | translate }}\n              </small>\n              <small\n                title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n                [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n              >\n                {{ 'Enabled`trusted certificate status`' | translate }}\n              </small>\n            </button>\n            <div class=\"visible-xs p-8\"></div>\n          </div>\n          <div class=\"col-2\">\n            <div\n              class=\"text-truncate\"\n              title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n            >\n              <span\n                class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n                translate\n              >\n                Algorithm\n              </span>\n              {{ trustedCertificate.algorithmName }}\n            </div>\n          </div>\n\n          <div class=\"col-2\">\n            <div\n              class=\"text-truncate\"\n              title=\"{{ 'Expiration date' | translate }}: {{\n                trustedCertificate.notAfter | c8yDate\n              }}\"\n            >\n              <span\n                class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n                translate\n              >\n                Expiration date\n              </span>\n              @let expirationHighlight = getExpirationHighlight(trustedCertificate);\n              <span>\n                <small\n                  [attr.title]=\"expirationHighlight?.tooltipText\"\n                  [ngClass]=\"expirationHighlight?.textClass\"\n                >\n                  @if (expirationHighlight?.expired) {\n                    <del>\n                      <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                    </del>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                  }\n                  <ng-template #expirationDateTpl>\n                    @if (expirationHighlight?.icon) {\n                      <i\n                        class=\"m-r-4\"\n                        c8yIcon=\"{{ expirationHighlight?.icon }}\"\n                      ></i>\n                    }\n                    <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n                  </ng-template>\n                </small>\n                @if (expirationHighlight?.renewable) {\n                  <button\n                    class=\"btn btn-link btn-icon\"\n                    title=\"{{ 'Renew certificate' | translate }}\"\n                    type=\"button\"\n                    (click)=\"renewCertificate()\"\n                  >\n                    <i c8yIcon=\"refresh\"></i>\n                  </button>\n                }\n              </span>\n            </div>\n          </div>\n          <div class=\"col-2\">\n            <div class=\"text-truncate\">\n              <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n                {{ 'Auto registration' | translate }}\n              </span>\n              @if (trustedCertificate.autoRegistrationEnabled) {\n                <span\n                  title=\"{{ 'Auto registration' | translate }}:  {{\n                    'Enabled`auto registration`' | translate\n                  }}\"\n                >\n                  {{ 'Enabled`auto registration`' | translate }}\n                </span>\n              }\n              @if (!trustedCertificate.autoRegistrationEnabled) {\n                <span\n                  title=\"{{ 'Auto registration' | translate }}:  {{\n                    'Disabled`auto registration`' | translate\n                  }}\"\n                >\n                  {{ 'Disabled`auto registration`' | translate }}\n                </span>\n              }\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n          </div>\n          <div class=\"col-2 d-flex\">\n            <div class=\"text-truncate\">\n              <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n                {{ 'Proof of possession' | translate }}\n              </span>\n              @if (trustedCertificate.tenantCertificateAuthority) {\n                <span title=\"{{ 'Proof of possession' | translate }}: {{ 'N/A' | translate }}\">\n                  {{ 'N/A' | translate }}\n                </span>\n              }\n              @if (!trustedCertificate.tenantCertificateAuthority) {\n                <span>\n                  @if (trustedCertificate.proofOfPossessionValid) {\n                    <span\n                      title=\"{{ 'Proof of possession' | translate }}:  {{\n                        'Complete`proof of possession`' | translate\n                      }}\"\n                    >\n                      <div class=\"icon-flex\">\n                        <i\n                          class=\"text-success\"\n                          c8yIcon=\"success\"\n                        ></i>\n                        {{ 'Complete`proof of possession`' | translate }}\n                      </div>\n                    </span>\n                  }\n                  @if (!trustedCertificate.proofOfPossessionValid) {\n                    <span\n                      title=\"{{ 'Proof of possession' | translate }}:  {{\n                        'Incomplete`proof of possession`' | translate\n                      }}\"\n                    >\n                      <div class=\"icon-flex\">\n                        <i\n                          class=\"text-warning\"\n                          c8yIcon=\"warning\"\n                        ></i>\n                        {{ 'Incomplete`proof of possession`' | translate }}\n                      </div>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n            <button\n              class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"right\"\n              type=\"button\"\n              data-cy=\"c8y-trusted-certificate--delete\"\n              [delay]=\"500\"\n              (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n              [disabled]=\"!(hasAdminRole$ | async)\"\n            >\n              <i c8yIcon=\"delete\"></i>\n            </button>\n          </div>\n        </c8y-li-body>\n\n        <c8y-li-collapse>\n          <div class=\"p-t-16 p-b-16\">\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Certificate name' | translate }}\n                  </label>\n                  <c8y-input-group-editable\n                    required\n                    formGroupClass=\"m-b-0\"\n                    [ariaLabel]=\"'Certificate name' | translate\"\n                    data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                    [(ngModel)]=\"trustedCertificate.name\"\n                    [disabled]=\"!(hasAdminRole$ | async)\"\n                    (save)=\"\n                      updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                    \"\n                  ></c8y-input-group-editable>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-1\"></div>\n              <div class=\"col-md-7\">\n                <c8y-form-group>\n                  <label\n                    class=\"control-label\"\n                    for=\"certInPemFormat\"\n                    translate\n                  >\n                    Certificate\n                  </label>\n                  <textarea\n                    class=\"form-control no-resize\"\n                    id=\"certInPemFormat\"\n                    name=\"certInPemFormat\"\n                    type=\"text\"\n                    rows=\"7\"\n                    readonly\n                    [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n                  ></textarea>\n                </c8y-form-group>\n                <c8y-form-group>\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ 'Auto registration' | translate }}\"\n                    [ngClass]=\"{\n                      disabled: !(hasAdminRole$ | async)\n                    }\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                      (ngModelChange)=\"\n                        updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                      \"\n                      [disabled]=\"!(hasAdminRole$ | async)\"\n                    />\n                    <span></span>\n                    <span>{{ 'Auto registration' | translate }}</span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <div\n                  class=\"legend form-block\"\n                  translate\n                >\n                  Additional properties\n                </div>\n                <ul class=\"list-unstyled\">\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Algorithm' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.algorithmName }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Version' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.version }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Valid from' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.notBefore | c8yDate }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Issuer' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.issuer }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Expiration date' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.notAfter | c8yDate }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Serial number' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.serialNumber }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Subject`of a certificate`' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.subject }}\n                    </span>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"col-md-1\"></div>\n              @if (!trustedCertificate.tenantCertificateAuthority) {\n                <div class=\"col-md-7\">\n                  <div class=\"legend form-block\">\n                    {{ 'Proof of possession' | translate }}\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      type=\"button\"\n                    ></button>\n                  </div>\n                  @if (trustedCertificate.proofOfPossessionValid) {\n                    <div>\n                      <span\n                        class=\"icon-flex\"\n                        title=\"{{ 'Proof of possession' | translate }}:  {{\n                          'Complete`proof of possession`' | translate\n                        }}\"\n                      >\n                        <i\n                          class=\"text-success\"\n                          c8yIcon=\"success\"\n                        ></i>\n                        {{ 'Complete`proof of possession`' | translate }}\n                      </span>\n                    </div>\n                  }\n                  @if (!trustedCertificate.proofOfPossessionValid) {\n                    <div>\n                      <div class=\"row m-b-16\">\n                        <div class=\"col-md-6\">\n                          <span\n                            class=\"icon-flex\"\n                            title=\"{{ 'Proof of possession' | translate }}:  {{\n                              'Incomplete`proof of possession`' | translate\n                            }}\"\n                          >\n                            <i\n                              class=\"text-warning\"\n                              c8yIcon=\"warning\"\n                            ></i>\n                            {{ 'Incomplete`proof of possession`' | translate }}\n                          </span>\n                        </div>\n                        <div class=\"col-md-6 col-lg-6 text-right-md\">\n                          <span class=\"text-label-small m-r-4\">\n                            {{ 'Verification code expires/expired on' | translate }}\n                          </span>\n                          {{\n                            (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil\n                              | c8yDate) || '---'\n                          }}\n                        </div>\n                      </div>\n                      <div class=\"row\">\n                        <div class=\"col-md-6 col-lg-6\">\n                          <c8y-form-group>\n                            <label\n                              class=\"control-label\"\n                              for=\"unsignedVerificationCode\"\n                              translate\n                            >\n                              Verification code\n                            </label>\n                            <textarea\n                              class=\"form-control no-resize\"\n                              id=\"unsignedVerificationCode\"\n                              name=\"unsignedVerificationCode\"\n                              type=\"text\"\n                              rows=\"5\"\n                              readonly\n                              [(ngModel)]=\"\n                                trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                            ></textarea>\n                          </c8y-form-group>\n                          <div class=\"d-flex\">\n                            <button\n                              class=\"btn btn-primary btn-sm\"\n                              title=\"{{ 'Regenerate verification code' | translate }}\"\n                              type=\"button\"\n                              (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n                              [disabled]=\"!(hasAdminRole$ | async)\"\n                            >\n                              {{ 'Regenerate`verification code`' | translate }}\n                            </button>\n\n                            <button\n                              class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                              [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                              tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                              placement=\"right\"\n                              type=\"button\"\n                              data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                              [delay]=\"500\"\n                              [disabled]=\"\n                                !trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                              (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                            >\n                              <i c8yIcon=\"clipboard\"></i>\n                            </button>\n                            <button\n                              class=\"btn btn-default btn-sm\"\n                              [attr.aria-label]=\"'Download as file' | translate\"\n                              tooltip=\"{{ 'Download as file' | translate }}\"\n                              type=\"button\"\n                              data-cy=\"c8y-trusted-certificates--download-as-file\"\n                              [delay]=\"500\"\n                              [disabled]=\"\n                                !trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                              (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n                              c8yProductExperience\n                              [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                              [actionData]=\"{\n                                component:\n                                  PRODUCT_EXPERIENCE.VERIFICATION_CODE.COMPONENTS.DOWNLOAD_CODE,\n                                action: PRODUCT_EXPERIENCE.VERIFICATION_CODE.ACTIONS.DOWNLOAD\n                              }\"\n                            >\n                              <i c8yIcon=\"download\"></i>\n                            </button>\n                          </div>\n                        </div>\n\n                        <div class=\"col-md-6 col-lg-6\">\n                          <c8y-form-group>\n                            <label\n                              class=\"control-label\"\n                              for=\"signedVerificationCode\"\n                            >\n                              {{ 'Signed verification code' | translate }}\n                              <button\n                                class=\"btn-help btn-help--sm\"\n                                [attr.aria-label]=\"'Help' | translate\"\n                                popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                                placement=\"top\"\n                                container=\"body\"\n                                type=\"button\"\n                                data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n                                [outsideClick]=\"true\"\n                              ></button>\n                            </label>\n                            <textarea\n                              class=\"form-control no-resize\"\n                              id=\"signedVerificationCode\"\n                              name=\"signedVerificationCode\"\n                              type=\"text\"\n                              rows=\"5\"\n                              [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n                            ></textarea>\n                          </c8y-form-group>\n                          <div class=\"d-flex\">\n                            <button\n                              class=\"btn btn-primary btn-sm\"\n                              title=\"{{ 'Verify signed verification code' | translate }}\"\n                              type=\"button\"\n                              (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n                              [disabled]=\"!trustedCertificate.signedVerificationCode\"\n                            >\n                              {{ 'Verify`signed verification code`' | translate }}\n                            </button>\n                            <button\n                              class=\"btn btn-sm btn-default m-l-auto\"\n                              [attr.aria-label]=\"'Upload file' | translate\"\n                              tooltip=\"{{ 'Upload file' | translate }}\"\n                              type=\"button\"\n                              [delay]=\"500\"\n                              (click)=\"fileInput.click()\"\n                              [disabled]=\"!(hasAdminRole$ | async)\"\n                            >\n                              <i c8yIcon=\"upload\"></i>\n                            </button>\n                            <input\n                              class=\"hidden\"\n                              type=\"file\"\n                              #fileInput\n                              (change)=\"onFileInput($event, trustedCertificate)\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </c8y-li-collapse>\n      </c8y-li>\n    </c8y-list-group>\n  </div>\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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { 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: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete"], outputs: ["save", "cancel"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.17", ngImport: i0, type: TrustedCertificateListComponent, decorators: [{
             type: Component,
@@ -707,13 +707,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         C8yTranslateDirective,
                         ListItemCollapseComponent,
                         FormGroupComponent,
+                        InputGroupEditableComponent,
                         RequiredInputPlaceholderDirective,
                         ProductExperienceDirective,
                         C8yTranslatePipe,
                         AsyncPipe,
                         DatePipe,
                         NgTemplateOutlet
-                    ], template: "@if ((hasReadRole$ | async) || (hasAdminRole$ | async)) {\n  <div>\n    <c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n    <c8y-breadcrumb>\n      <c8y-breadcrumb-item\n        icon=\"c8y-management\"\n        label=\"{{ 'Management' | translate }}\"\n      ></c8y-breadcrumb-item>\n      <c8y-breadcrumb-item\n        icon=\"certificate\"\n        label=\"{{ 'Trusted certificates' | translate }}\"\n      ></c8y-breadcrumb-item>\n    </c8y-breadcrumb>\n\n    @if (certificateAuthorityFeatureEnabled) {\n      <c8y-action-bar-item\n        [placement]=\"'right'\"\n        [priority]=\"1000\"\n      >\n        <button\n          class=\"btn btn-link\"\n          title=\"{{ 'Generate CA certificate' | translate }}\"\n          type=\"button\"\n          data-cy=\"trusted-certificate-list--generate-ca-certificate\"\n          [disabled]=\"!(hasAdminRole$ | async) || certificateAuthorityExists\"\n          (click)=\"addCACertificate()\"\n        >\n          <i c8yIcon=\"contract\"></i>\n          {{ 'Generate CA certificate' | translate }}\n        </button>\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          popover=\"{{\n            'The Certificate Authority (CA) certificate is used to sign device certificates for secure authentication. Only one CA certificate can be generated for the tenant.'\n              | translate\n          }}\"\n          placement=\"bottom\"\n          triggers=\"focus\"\n          type=\"button\"\n        ></button>\n      </c8y-action-bar-item>\n    }\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"900\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Add trusted certificate' | translate }}\"\n        type=\"button\"\n        data-cy=\"trusted-certificate-list--add-trusted-certificate\"\n        (click)=\"addTrustedCertificate()\"\n        [disabled]=\"!(hasAdminRole$ | async)\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n        {{ 'Add trusted certificate' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"800\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadTrustedCertificates()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': reloading | async }\"\n        ></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-help\n      src=\"/docs/device-certificate-authentication/managing-trusted-certificates/#managing-trusted-certificates\"\n    ></c8y-help>\n\n    @if ((trustedCertificates | async)?.data.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'certificate'\"\n        [title]=\"'No trusted certificates to display.' | translate\"\n        [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n      >\n        <button\n          class=\"btn btn-primary\"\n          title=\"{{ 'Add trusted certificate' | translate }}\"\n          type=\"button\"\n          (click)=\"addTrustedCertificate()\"\n        >\n          {{ 'Add trusted certificate' | translate }}\n        </button>\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-list-group class=\"m-b-24\">\n      @if ((trustedCertificates | async)?.data.length > 0) {\n        <div class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\">\n          <div class=\"c8y-list__item__block\">\n            <div class=\"c8y-list__item__icon\">\n              <i\n                class=\"invisible\"\n                c8yIcon=\"certificate\"\n              ></i>\n            </div>\n            <div class=\"c8y-list__item__body\">\n              <div class=\"content-flex-60\">\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Certificate' | translate }} \"\n                  >\n                    {{ 'Certificate' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Status' | translate }}\"\n                  >\n                    {{ 'Status' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Algorithm' | translate }}\"\n                  >\n                    {{ 'Algorithm' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Expiration date' | translate }}\"\n                  >\n                    {{ 'Expiration date' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Auto registration' | translate }}\"\n                  >\n                    {{ 'Auto registration' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Proof of possession' | translate }}\"\n                  >\n                    {{ 'Proof of possession' | translate }}\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div class=\"c8y-list__item__actions\"></div>\n          </div>\n        </div>\n      }\n\n      <c8y-li\n        *c8yFor=\"\n          let trustedCertificate of trustedCertificates | async;\n          let i = index;\n          pipe: sortByExpirationDateAsc;\n          loadMore: 'none'\n        \"\n        #listItem\n        data-cy=\"c8y-trusted-certificates-list--item-block\"\n      >\n        <c8y-li-icon>\n          @if (!trustedCertificate.tenantCertificateAuthority) {\n            <button\n              class=\"btn-clean\"\n              attr.aria-label=\"{{ 'Certificate' | translate }}\"\n              tooltip=\"{{ 'Certificate' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n            >\n              <i c8yIcon=\"certificate\"></i>\n            </button>\n          }\n          @if (trustedCertificate.tenantCertificateAuthority) {\n            <button\n              class=\"btn-clean\"\n              attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n              tooltip=\"{{ 'CA certificate' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n            >\n              <i c8yIcon=\"contract\"></i>\n            </button>\n          }\n        </c8y-li-icon>\n\n        <c8y-li-body class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <button\n              class=\"btn-clean text-truncate\"\n              title=\"{{ trustedCertificate.name }}\"\n              type=\"button\"\n              (click)=\"listItem.toggleCollapsed()\"\n            >\n              {{ trustedCertificate.name }}\n            </button>\n          </div>\n          <div class=\"col-2\">\n            <div class=\"visible-xs p-8\"></div>\n            <button\n              class=\"btn c8y-btn-checkbox--inline\"\n              name=\"certificateStatus\"\n              type=\"button\"\n              [(ngModel)]=\"trustedCertificate.status\"\n              btnCheckbox\n              btnCheckboxTrue=\"ENABLED\"\n              btnCheckboxFalse=\"DISABLED\"\n              (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n              [disabled]=\"!(hasAdminRole$ | async)\"\n              [ngClass]=\"{\n                disabled: !(hasAdminRole$ | async)\n              }\"\n            >\n              <small\n                title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n                [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n              >\n                {{ 'Disabled`trusted certificate status`' | translate }}\n              </small>\n              <small\n                title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n                [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n              >\n                {{ 'Enabled`trusted certificate status`' | translate }}\n              </small>\n            </button>\n            <div class=\"visible-xs p-8\"></div>\n          </div>\n          <div class=\"col-2\">\n            <div\n              class=\"text-truncate\"\n              title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n            >\n              <span\n                class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n                translate\n              >\n                Algorithm\n              </span>\n              {{ trustedCertificate.algorithmName }}\n            </div>\n          </div>\n\n          <div class=\"col-2\">\n            <div\n              class=\"text-truncate\"\n              title=\"{{ 'Expiration date' | translate }}: {{\n                trustedCertificate.notAfter | c8yDate\n              }}\"\n            >\n              <span\n                class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n                translate\n              >\n                Expiration date\n              </span>\n              @let expirationHighlight = getExpirationHighlight(trustedCertificate);\n              <span>\n                <small\n                  [attr.title]=\"expirationHighlight?.tooltipText\"\n                  [ngClass]=\"expirationHighlight?.textClass\"\n                >\n                  @if (expirationHighlight?.expired) {\n                    <del>\n                      <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                    </del>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                  }\n                  <ng-template #expirationDateTpl>\n                    @if (expirationHighlight?.icon) {\n                      <i\n                        class=\"m-r-4\"\n                        c8yIcon=\"{{ expirationHighlight?.icon }}\"\n                      ></i>\n                    }\n                    <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n                  </ng-template>\n                </small>\n                @if (expirationHighlight?.renewable) {\n                  <button\n                    class=\"btn btn-link btn-icon\"\n                    title=\"{{ 'Renew certificate' | translate }}\"\n                    type=\"button\"\n                    (click)=\"renewCertificate()\"\n                  >\n                    <i c8yIcon=\"refresh\"></i>\n                  </button>\n                }\n              </span>\n            </div>\n          </div>\n          <div class=\"col-2\">\n            <div class=\"text-truncate\">\n              <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n                {{ 'Auto registration' | translate }}\n              </span>\n              @if (trustedCertificate.autoRegistrationEnabled) {\n                <span\n                  title=\"{{ 'Auto registration' | translate }}:  {{\n                    'Enabled`auto registration`' | translate\n                  }}\"\n                >\n                  {{ 'Enabled`auto registration`' | translate }}\n                </span>\n              }\n              @if (!trustedCertificate.autoRegistrationEnabled) {\n                <span\n                  title=\"{{ 'Auto registration' | translate }}:  {{\n                    'Disabled`auto registration`' | translate\n                  }}\"\n                >\n                  {{ 'Disabled`auto registration`' | translate }}\n                </span>\n              }\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n          </div>\n          <div class=\"col-2 d-flex\">\n            <div class=\"text-truncate\">\n              <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n                {{ 'Proof of possession' | translate }}\n              </span>\n              @if (trustedCertificate.tenantCertificateAuthority) {\n                <span title=\"{{ 'Proof of possession' | translate }}: {{ 'N/A' | translate }}\">\n                  {{ 'N/A' | translate }}\n                </span>\n              }\n              @if (!trustedCertificate.tenantCertificateAuthority) {\n                <span>\n                  @if (trustedCertificate.proofOfPossessionValid) {\n                    <span\n                      title=\"{{ 'Proof of possession' | translate }}:  {{\n                        'Complete`proof of possession`' | translate\n                      }}\"\n                    >\n                      <div class=\"icon-flex\">\n                        <i\n                          class=\"text-success\"\n                          c8yIcon=\"success\"\n                        ></i>\n                        {{ 'Complete`proof of possession`' | translate }}\n                      </div>\n                    </span>\n                  }\n                  @if (!trustedCertificate.proofOfPossessionValid) {\n                    <span\n                      title=\"{{ 'Proof of possession' | translate }}:  {{\n                        'Incomplete`proof of possession`' | translate\n                      }}\"\n                    >\n                      <div class=\"icon-flex\">\n                        <i\n                          class=\"text-warning\"\n                          c8yIcon=\"warning\"\n                        ></i>\n                        {{ 'Incomplete`proof of possession`' | translate }}\n                      </div>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n            <button\n              class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"right\"\n              type=\"button\"\n              data-cy=\"c8y-trusted-certificate--delete\"\n              [delay]=\"500\"\n              (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n              [disabled]=\"!(hasAdminRole$ | async)\"\n            >\n              <i c8yIcon=\"delete\"></i>\n            </button>\n          </div>\n        </c8y-li-body>\n\n        <c8y-li-collapse>\n          <div class=\"p-t-16 p-b-16\">\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Certificate name' | translate }}\n                  </label>\n                  <div class=\"input-group input-group-editable\">\n                    <input\n                      class=\"form-control\"\n                      type=\"text\"\n                      required\n                      data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                      [(ngModel)]=\"trustedCertificate.name\"\n                      [disabled]=\"!(hasAdminRole$ | async)\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Update certificate name' | translate }}\"\n                        type=\"button\"\n                        (click)=\"\n                          updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                        \"\n                        [disabled]=\"!trustedCertificate.name\"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-1\"></div>\n              <div class=\"col-md-7\">\n                <c8y-form-group>\n                  <label\n                    class=\"control-label\"\n                    for=\"certInPemFormat\"\n                    translate\n                  >\n                    Certificate\n                  </label>\n                  <textarea\n                    class=\"form-control no-resize\"\n                    id=\"certInPemFormat\"\n                    name=\"certInPemFormat\"\n                    type=\"text\"\n                    rows=\"7\"\n                    readonly\n                    [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n                  ></textarea>\n                </c8y-form-group>\n                <c8y-form-group>\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ 'Auto registration' | translate }}\"\n                    [ngClass]=\"{\n                      disabled: !(hasAdminRole$ | async)\n                    }\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                      (ngModelChange)=\"\n                        updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                      \"\n                      [disabled]=\"!(hasAdminRole$ | async)\"\n                    />\n                    <span></span>\n                    <span>{{ 'Auto registration' | translate }}</span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <div\n                  class=\"legend form-block\"\n                  translate\n                >\n                  Additional properties\n                </div>\n                <ul class=\"list-unstyled\">\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Algorithm' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.algorithmName }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Version' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.version }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Valid from' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.notBefore | c8yDate }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Issuer' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.issuer }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Expiration date' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.notAfter | c8yDate }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Serial number' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.serialNumber }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Subject`of a certificate`' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.subject }}\n                    </span>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"col-md-1\"></div>\n              @if (!trustedCertificate.tenantCertificateAuthority) {\n                <div class=\"col-md-7\">\n                  <div class=\"legend form-block\">\n                    {{ 'Proof of possession' | translate }}\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      type=\"button\"\n                    ></button>\n                  </div>\n                  @if (trustedCertificate.proofOfPossessionValid) {\n                    <div>\n                      <span\n                        class=\"icon-flex\"\n                        title=\"{{ 'Proof of possession' | translate }}:  {{\n                          'Complete`proof of possession`' | translate\n                        }}\"\n                      >\n                        <i\n                          class=\"text-success\"\n                          c8yIcon=\"success\"\n                        ></i>\n                        {{ 'Complete`proof of possession`' | translate }}\n                      </span>\n                    </div>\n                  }\n                  @if (!trustedCertificate.proofOfPossessionValid) {\n                    <div>\n                      <div class=\"row m-b-16\">\n                        <div class=\"col-md-6\">\n                          <span\n                            class=\"icon-flex\"\n                            title=\"{{ 'Proof of possession' | translate }}:  {{\n                              'Incomplete`proof of possession`' | translate\n                            }}\"\n                          >\n                            <i\n                              class=\"text-warning\"\n                              c8yIcon=\"warning\"\n                            ></i>\n                            {{ 'Incomplete`proof of possession`' | translate }}\n                          </span>\n                        </div>\n                        <div class=\"col-md-6 col-lg-6 text-right-md\">\n                          <span class=\"text-label-small m-r-4\">\n                            {{ 'Verification code expires/expired on' | translate }}\n                          </span>\n                          {{\n                            (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil\n                              | c8yDate) || '---'\n                          }}\n                        </div>\n                      </div>\n                      <div class=\"row\">\n                        <div class=\"col-md-6 col-lg-6\">\n                          <c8y-form-group>\n                            <label\n                              class=\"control-label\"\n                              for=\"unsignedVerificationCode\"\n                              translate\n                            >\n                              Verification code\n                            </label>\n                            <textarea\n                              class=\"form-control no-resize\"\n                              id=\"unsignedVerificationCode\"\n                              name=\"unsignedVerificationCode\"\n                              type=\"text\"\n                              rows=\"5\"\n                              readonly\n                              [(ngModel)]=\"\n                                trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                            ></textarea>\n                          </c8y-form-group>\n                          <div class=\"d-flex\">\n                            <button\n                              class=\"btn btn-primary btn-sm\"\n                              title=\"{{ 'Regenerate verification code' | translate }}\"\n                              type=\"button\"\n                              (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n                              [disabled]=\"!(hasAdminRole$ | async)\"\n                            >\n                              {{ 'Regenerate`verification code`' | translate }}\n                            </button>\n\n                            <button\n                              class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                              [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                              tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                              placement=\"right\"\n                              type=\"button\"\n                              data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                              [delay]=\"500\"\n                              [disabled]=\"\n                                !trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                              (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                            >\n                              <i c8yIcon=\"clipboard\"></i>\n                            </button>\n                            <button\n                              class=\"btn btn-default btn-sm\"\n                              [attr.aria-label]=\"'Download as file' | translate\"\n                              tooltip=\"{{ 'Download as file' | translate }}\"\n                              type=\"button\"\n                              data-cy=\"c8y-trusted-certificates--download-as-file\"\n                              [delay]=\"500\"\n                              [disabled]=\"\n                                !trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                              (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n                              c8yProductExperience\n                              [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                              [actionData]=\"{\n                                component:\n                                  PRODUCT_EXPERIENCE.VERIFICATION_CODE.COMPONENTS.DOWNLOAD_CODE,\n                                action: PRODUCT_EXPERIENCE.VERIFICATION_CODE.ACTIONS.DOWNLOAD\n                              }\"\n                            >\n                              <i c8yIcon=\"download\"></i>\n                            </button>\n                          </div>\n                        </div>\n\n                        <div class=\"col-md-6 col-lg-6\">\n                          <c8y-form-group>\n                            <label\n                              class=\"control-label\"\n                              for=\"signedVerificationCode\"\n                            >\n                              {{ 'Signed verification code' | translate }}\n                              <button\n                                class=\"btn-help btn-help--sm\"\n                                [attr.aria-label]=\"'Help' | translate\"\n                                popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                                placement=\"top\"\n                                container=\"body\"\n                                type=\"button\"\n                                data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n                                [outsideClick]=\"true\"\n                              ></button>\n                            </label>\n                            <textarea\n                              class=\"form-control no-resize\"\n                              id=\"signedVerificationCode\"\n                              name=\"signedVerificationCode\"\n                              type=\"text\"\n                              rows=\"5\"\n                              [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n                            ></textarea>\n                          </c8y-form-group>\n                          <div class=\"d-flex\">\n                            <button\n                              class=\"btn btn-primary btn-sm\"\n                              title=\"{{ 'Verify signed verification code' | translate }}\"\n                              type=\"button\"\n                              (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n                              [disabled]=\"!trustedCertificate.signedVerificationCode\"\n                            >\n                              {{ 'Verify`signed verification code`' | translate }}\n                            </button>\n                            <button\n                              class=\"btn btn-sm btn-default m-l-auto\"\n                              [attr.aria-label]=\"'Upload file' | translate\"\n                              tooltip=\"{{ 'Upload file' | translate }}\"\n                              type=\"button\"\n                              [delay]=\"500\"\n                              (click)=\"fileInput.click()\"\n                              [disabled]=\"!(hasAdminRole$ | async)\"\n                            >\n                              <i c8yIcon=\"upload\"></i>\n                            </button>\n                            <input\n                              class=\"hidden\"\n                              type=\"file\"\n                              #fileInput\n                              (change)=\"onFileInput($event, trustedCertificate)\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </c8y-li-collapse>\n      </c8y-li>\n    </c8y-list-group>\n  </div>\n}\n" }]
+                    ], template: "@if ((hasReadRole$ | async) || (hasAdminRole$ | async)) {\n  <div>\n    <c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n    <c8y-breadcrumb>\n      <c8y-breadcrumb-item\n        icon=\"c8y-management\"\n        label=\"{{ 'Management' | translate }}\"\n      ></c8y-breadcrumb-item>\n      <c8y-breadcrumb-item\n        icon=\"certificate\"\n        label=\"{{ 'Trusted certificates' | translate }}\"\n      ></c8y-breadcrumb-item>\n    </c8y-breadcrumb>\n\n    @if (certificateAuthorityFeatureEnabled) {\n      <c8y-action-bar-item\n        [placement]=\"'right'\"\n        [priority]=\"1000\"\n      >\n        <button\n          class=\"btn btn-link\"\n          title=\"{{ 'Generate CA certificate' | translate }}\"\n          type=\"button\"\n          data-cy=\"trusted-certificate-list--generate-ca-certificate\"\n          [disabled]=\"!(hasAdminRole$ | async) || certificateAuthorityExists\"\n          (click)=\"addCACertificate()\"\n        >\n          <i c8yIcon=\"contract\"></i>\n          {{ 'Generate CA certificate' | translate }}\n        </button>\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          popover=\"{{\n            'The Certificate Authority (CA) certificate is used to sign device certificates for secure authentication. Only one CA certificate can be generated for the tenant.'\n              | translate\n          }}\"\n          placement=\"bottom\"\n          triggers=\"focus\"\n          type=\"button\"\n        ></button>\n      </c8y-action-bar-item>\n    }\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"900\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Add trusted certificate' | translate }}\"\n        type=\"button\"\n        data-cy=\"trusted-certificate-list--add-trusted-certificate\"\n        (click)=\"addTrustedCertificate()\"\n        [disabled]=\"!(hasAdminRole$ | async)\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n        {{ 'Add trusted certificate' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"800\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Reload' | translate }}\"\n        type=\"button\"\n        (click)=\"loadTrustedCertificates()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': reloading | async }\"\n        ></i>\n        {{ 'Reload' | translate }}\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-help\n      src=\"/docs/device-certificate-authentication/managing-trusted-certificates/#managing-trusted-certificates\"\n    ></c8y-help>\n\n    @if ((trustedCertificates | async)?.data.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'certificate'\"\n        [title]=\"'No trusted certificates to display.' | translate\"\n        [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n      >\n        <button\n          class=\"btn btn-primary\"\n          title=\"{{ 'Add trusted certificate' | translate }}\"\n          type=\"button\"\n          (click)=\"addTrustedCertificate()\"\n        >\n          {{ 'Add trusted certificate' | translate }}\n        </button>\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-list-group class=\"m-b-24\">\n      @if ((trustedCertificates | async)?.data.length > 0) {\n        <div class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\">\n          <div class=\"c8y-list__item__block\">\n            <div class=\"c8y-list__item__icon\">\n              <i\n                class=\"invisible\"\n                c8yIcon=\"certificate\"\n              ></i>\n            </div>\n            <div class=\"c8y-list__item__body\">\n              <div class=\"content-flex-60\">\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Certificate' | translate }} \"\n                  >\n                    {{ 'Certificate' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Status' | translate }}\"\n                  >\n                    {{ 'Status' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Algorithm' | translate }}\"\n                  >\n                    {{ 'Algorithm' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\"{{ 'Expiration date' | translate }}\"\n                  >\n                    {{ 'Expiration date' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Auto registration' | translate }}\"\n                  >\n                    {{ 'Auto registration' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-2\">\n                  <span\n                    class=\"text-truncate\"\n                    title=\" {{ 'Proof of possession' | translate }}\"\n                  >\n                    {{ 'Proof of possession' | translate }}\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div class=\"c8y-list__item__actions\"></div>\n          </div>\n        </div>\n      }\n\n      <c8y-li\n        *c8yFor=\"\n          let trustedCertificate of trustedCertificates | async;\n          let i = index;\n          pipe: sortByExpirationDateAsc;\n          loadMore: 'none'\n        \"\n        #listItem\n        data-cy=\"c8y-trusted-certificates-list--item-block\"\n      >\n        <c8y-li-icon>\n          @if (!trustedCertificate.tenantCertificateAuthority) {\n            <button\n              class=\"btn-clean\"\n              attr.aria-label=\"{{ 'Certificate' | translate }}\"\n              tooltip=\"{{ 'Certificate' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n            >\n              <i c8yIcon=\"certificate\"></i>\n            </button>\n          }\n          @if (trustedCertificate.tenantCertificateAuthority) {\n            <button\n              class=\"btn-clean\"\n              attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n              tooltip=\"{{ 'CA certificate' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n            >\n              <i c8yIcon=\"contract\"></i>\n            </button>\n          }\n        </c8y-li-icon>\n\n        <c8y-li-body class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <button\n              class=\"btn-clean text-truncate\"\n              title=\"{{ trustedCertificate.name }}\"\n              type=\"button\"\n              (click)=\"listItem.toggleCollapsed()\"\n            >\n              {{ trustedCertificate.name }}\n            </button>\n          </div>\n          <div class=\"col-2\">\n            <div class=\"visible-xs p-8\"></div>\n            <button\n              class=\"btn c8y-btn-checkbox--inline\"\n              name=\"certificateStatus\"\n              type=\"button\"\n              [(ngModel)]=\"trustedCertificate.status\"\n              btnCheckbox\n              btnCheckboxTrue=\"ENABLED\"\n              btnCheckboxFalse=\"DISABLED\"\n              (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n              [disabled]=\"!(hasAdminRole$ | async)\"\n              [ngClass]=\"{\n                disabled: !(hasAdminRole$ | async)\n              }\"\n            >\n              <small\n                title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n                [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n              >\n                {{ 'Disabled`trusted certificate status`' | translate }}\n              </small>\n              <small\n                title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n                [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n              >\n                {{ 'Enabled`trusted certificate status`' | translate }}\n              </small>\n            </button>\n            <div class=\"visible-xs p-8\"></div>\n          </div>\n          <div class=\"col-2\">\n            <div\n              class=\"text-truncate\"\n              title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n            >\n              <span\n                class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n                translate\n              >\n                Algorithm\n              </span>\n              {{ trustedCertificate.algorithmName }}\n            </div>\n          </div>\n\n          <div class=\"col-2\">\n            <div\n              class=\"text-truncate\"\n              title=\"{{ 'Expiration date' | translate }}: {{\n                trustedCertificate.notAfter | c8yDate\n              }}\"\n            >\n              <span\n                class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n                translate\n              >\n                Expiration date\n              </span>\n              @let expirationHighlight = getExpirationHighlight(trustedCertificate);\n              <span>\n                <small\n                  [attr.title]=\"expirationHighlight?.tooltipText\"\n                  [ngClass]=\"expirationHighlight?.textClass\"\n                >\n                  @if (expirationHighlight?.expired) {\n                    <del>\n                      <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                    </del>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                  }\n                  <ng-template #expirationDateTpl>\n                    @if (expirationHighlight?.icon) {\n                      <i\n                        class=\"m-r-4\"\n                        c8yIcon=\"{{ expirationHighlight?.icon }}\"\n                      ></i>\n                    }\n                    <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n                  </ng-template>\n                </small>\n                @if (expirationHighlight?.renewable) {\n                  <button\n                    class=\"btn btn-link btn-icon\"\n                    title=\"{{ 'Renew certificate' | translate }}\"\n                    type=\"button\"\n                    (click)=\"renewCertificate()\"\n                  >\n                    <i c8yIcon=\"refresh\"></i>\n                  </button>\n                }\n              </span>\n            </div>\n          </div>\n          <div class=\"col-2\">\n            <div class=\"text-truncate\">\n              <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n                {{ 'Auto registration' | translate }}\n              </span>\n              @if (trustedCertificate.autoRegistrationEnabled) {\n                <span\n                  title=\"{{ 'Auto registration' | translate }}:  {{\n                    'Enabled`auto registration`' | translate\n                  }}\"\n                >\n                  {{ 'Enabled`auto registration`' | translate }}\n                </span>\n              }\n              @if (!trustedCertificate.autoRegistrationEnabled) {\n                <span\n                  title=\"{{ 'Auto registration' | translate }}:  {{\n                    'Disabled`auto registration`' | translate\n                  }}\"\n                >\n                  {{ 'Disabled`auto registration`' | translate }}\n                </span>\n              }\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n          </div>\n          <div class=\"col-2 d-flex\">\n            <div class=\"text-truncate\">\n              <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n                {{ 'Proof of possession' | translate }}\n              </span>\n              @if (trustedCertificate.tenantCertificateAuthority) {\n                <span title=\"{{ 'Proof of possession' | translate }}: {{ 'N/A' | translate }}\">\n                  {{ 'N/A' | translate }}\n                </span>\n              }\n              @if (!trustedCertificate.tenantCertificateAuthority) {\n                <span>\n                  @if (trustedCertificate.proofOfPossessionValid) {\n                    <span\n                      title=\"{{ 'Proof of possession' | translate }}:  {{\n                        'Complete`proof of possession`' | translate\n                      }}\"\n                    >\n                      <div class=\"icon-flex\">\n                        <i\n                          class=\"text-success\"\n                          c8yIcon=\"success\"\n                        ></i>\n                        {{ 'Complete`proof of possession`' | translate }}\n                      </div>\n                    </span>\n                  }\n                  @if (!trustedCertificate.proofOfPossessionValid) {\n                    <span\n                      title=\"{{ 'Proof of possession' | translate }}:  {{\n                        'Incomplete`proof of possession`' | translate\n                      }}\"\n                    >\n                      <div class=\"icon-flex\">\n                        <i\n                          class=\"text-warning\"\n                          c8yIcon=\"warning\"\n                        ></i>\n                        {{ 'Incomplete`proof of possession`' | translate }}\n                      </div>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n            <button\n              class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"right\"\n              type=\"button\"\n              data-cy=\"c8y-trusted-certificate--delete\"\n              [delay]=\"500\"\n              (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n              [disabled]=\"!(hasAdminRole$ | async)\"\n            >\n              <i c8yIcon=\"delete\"></i>\n            </button>\n          </div>\n        </c8y-li-body>\n\n        <c8y-li-collapse>\n          <div class=\"p-t-16 p-b-16\">\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Certificate name' | translate }}\n                  </label>\n                  <c8y-input-group-editable\n                    required\n                    formGroupClass=\"m-b-0\"\n                    [ariaLabel]=\"'Certificate name' | translate\"\n                    data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                    [(ngModel)]=\"trustedCertificate.name\"\n                    [disabled]=\"!(hasAdminRole$ | async)\"\n                    (save)=\"\n                      updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                    \"\n                  ></c8y-input-group-editable>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-1\"></div>\n              <div class=\"col-md-7\">\n                <c8y-form-group>\n                  <label\n                    class=\"control-label\"\n                    for=\"certInPemFormat\"\n                    translate\n                  >\n                    Certificate\n                  </label>\n                  <textarea\n                    class=\"form-control no-resize\"\n                    id=\"certInPemFormat\"\n                    name=\"certInPemFormat\"\n                    type=\"text\"\n                    rows=\"7\"\n                    readonly\n                    [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n                  ></textarea>\n                </c8y-form-group>\n                <c8y-form-group>\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ 'Auto registration' | translate }}\"\n                    [ngClass]=\"{\n                      disabled: !(hasAdminRole$ | async)\n                    }\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                      (ngModelChange)=\"\n                        updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                      \"\n                      [disabled]=\"!(hasAdminRole$ | async)\"\n                    />\n                    <span></span>\n                    <span>{{ 'Auto registration' | translate }}</span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <div\n                  class=\"legend form-block\"\n                  translate\n                >\n                  Additional properties\n                </div>\n                <ul class=\"list-unstyled\">\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Algorithm' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.algorithmName }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Version' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.version }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Valid from' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.notBefore | c8yDate }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Issuer' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.issuer }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Expiration date' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.notAfter | c8yDate }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Serial number' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.serialNumber }}\n                    </span>\n                  </li>\n                  <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                    <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                      {{ 'Subject`of a certificate`' | translate }}\n                    </label>\n                    <span class=\"m-l-auto text-break-word\">\n                      {{ trustedCertificate.subject }}\n                    </span>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"col-md-1\"></div>\n              @if (!trustedCertificate.tenantCertificateAuthority) {\n                <div class=\"col-md-7\">\n                  <div class=\"legend form-block\">\n                    {{ 'Proof of possession' | translate }}\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      type=\"button\"\n                    ></button>\n                  </div>\n                  @if (trustedCertificate.proofOfPossessionValid) {\n                    <div>\n                      <span\n                        class=\"icon-flex\"\n                        title=\"{{ 'Proof of possession' | translate }}:  {{\n                          'Complete`proof of possession`' | translate\n                        }}\"\n                      >\n                        <i\n                          class=\"text-success\"\n                          c8yIcon=\"success\"\n                        ></i>\n                        {{ 'Complete`proof of possession`' | translate }}\n                      </span>\n                    </div>\n                  }\n                  @if (!trustedCertificate.proofOfPossessionValid) {\n                    <div>\n                      <div class=\"row m-b-16\">\n                        <div class=\"col-md-6\">\n                          <span\n                            class=\"icon-flex\"\n                            title=\"{{ 'Proof of possession' | translate }}:  {{\n                              'Incomplete`proof of possession`' | translate\n                            }}\"\n                          >\n                            <i\n                              class=\"text-warning\"\n                              c8yIcon=\"warning\"\n                            ></i>\n                            {{ 'Incomplete`proof of possession`' | translate }}\n                          </span>\n                        </div>\n                        <div class=\"col-md-6 col-lg-6 text-right-md\">\n                          <span class=\"text-label-small m-r-4\">\n                            {{ 'Verification code expires/expired on' | translate }}\n                          </span>\n                          {{\n                            (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil\n                              | c8yDate) || '---'\n                          }}\n                        </div>\n                      </div>\n                      <div class=\"row\">\n                        <div class=\"col-md-6 col-lg-6\">\n                          <c8y-form-group>\n                            <label\n                              class=\"control-label\"\n                              for=\"unsignedVerificationCode\"\n                              translate\n                            >\n                              Verification code\n                            </label>\n                            <textarea\n                              class=\"form-control no-resize\"\n                              id=\"unsignedVerificationCode\"\n                              name=\"unsignedVerificationCode\"\n                              type=\"text\"\n                              rows=\"5\"\n                              readonly\n                              [(ngModel)]=\"\n                                trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                            ></textarea>\n                          </c8y-form-group>\n                          <div class=\"d-flex\">\n                            <button\n                              class=\"btn btn-primary btn-sm\"\n                              title=\"{{ 'Regenerate verification code' | translate }}\"\n                              type=\"button\"\n                              (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n                              [disabled]=\"!(hasAdminRole$ | async)\"\n                            >\n                              {{ 'Regenerate`verification code`' | translate }}\n                            </button>\n\n                            <button\n                              class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                              [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                              tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                              placement=\"right\"\n                              type=\"button\"\n                              data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                              [delay]=\"500\"\n                              [disabled]=\"\n                                !trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                              (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                            >\n                              <i c8yIcon=\"clipboard\"></i>\n                            </button>\n                            <button\n                              class=\"btn btn-default btn-sm\"\n                              [attr.aria-label]=\"'Download as file' | translate\"\n                              tooltip=\"{{ 'Download as file' | translate }}\"\n                              type=\"button\"\n                              data-cy=\"c8y-trusted-certificates--download-as-file\"\n                              [delay]=\"500\"\n                              [disabled]=\"\n                                !trustedCertificate.proofOfPossessionUnsignedVerificationCode\n                              \"\n                              (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n                              c8yProductExperience\n                              [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                              [actionData]=\"{\n                                component:\n                                  PRODUCT_EXPERIENCE.VERIFICATION_CODE.COMPONENTS.DOWNLOAD_CODE,\n                                action: PRODUCT_EXPERIENCE.VERIFICATION_CODE.ACTIONS.DOWNLOAD\n                              }\"\n                            >\n                              <i c8yIcon=\"download\"></i>\n                            </button>\n                          </div>\n                        </div>\n\n                        <div class=\"col-md-6 col-lg-6\">\n                          <c8y-form-group>\n                            <label\n                              class=\"control-label\"\n                              for=\"signedVerificationCode\"\n                            >\n                              {{ 'Signed verification code' | translate }}\n                              <button\n                                class=\"btn-help btn-help--sm\"\n                                [attr.aria-label]=\"'Help' | translate\"\n                                popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                                placement=\"top\"\n                                container=\"body\"\n                                type=\"button\"\n                                data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n                                [outsideClick]=\"true\"\n                              ></button>\n                            </label>\n                            <textarea\n                              class=\"form-control no-resize\"\n                              id=\"signedVerificationCode\"\n                              name=\"signedVerificationCode\"\n                              type=\"text\"\n                              rows=\"5\"\n                              [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n                            ></textarea>\n                          </c8y-form-group>\n                          <div class=\"d-flex\">\n                            <button\n                              class=\"btn btn-primary btn-sm\"\n                              title=\"{{ 'Verify signed verification code' | translate }}\"\n                              type=\"button\"\n                              (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n                              [disabled]=\"!trustedCertificate.signedVerificationCode\"\n                            >\n                              {{ 'Verify`signed verification code`' | translate }}\n                            </button>\n                            <button\n                              class=\"btn btn-sm btn-default m-l-auto\"\n                              [attr.aria-label]=\"'Upload file' | translate\"\n                              tooltip=\"{{ 'Upload file' | translate }}\"\n                              type=\"button\"\n                              [delay]=\"500\"\n                              (click)=\"fileInput.click()\"\n                              [disabled]=\"!(hasAdminRole$ | async)\"\n                            >\n                              <i c8yIcon=\"upload\"></i>\n                            </button>\n                            <input\n                              class=\"hidden\"\n                              type=\"file\"\n                              #fileInput\n                              (change)=\"onFileInput($event, trustedCertificate)\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </c8y-li-collapse>\n      </c8y-li>\n    </c8y-list-group>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1$1.BsModalService }, { type: i2.AlertService }, { type: i2$1.TrustedCertificateService }, { type: i2.ModalService }, { type: i4$1.TranslateService }, { type: i2.ClipboardService }, { type: i2.GainsightService }, { type: i2$1.SystemOptionsService }, { type: i2.FeatureCacheService }, { type: TrustedCertificatesGuard }] });
 
 const trustedCertificatesRoutes = [