@c8y/ngx-components 1018.0.59 → 1018.0.60

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

@@ -48,7 +48,7 @@ const PRODUCT_EXPERIENCE = {
             DOWNLOAD_CODE: 'download-unsigned-verification-code'
         },
         ACTIONS: {
-            REGENERATE: 'regenrate',
+            REGENERATE: 'regenerate',
             VERIFY: 'verify',
             DOWNLOAD: 'download'
         },
@@ -242,9 +242,9 @@ class TrustedCertificatesComponent {
             this.alertService.success(gettext('Verification code regenerated.'));
         }, ex => this.alertService.addServerFailure(ex));
     }
-    verifySignedVerificationCode(trustedCertificate, signedVerificationCode) {
+    verifySignedVerificationCode(trustedCertificate) {
         this.trustedCertificateService
-            .verifySignedVerificationCode(trustedCertificate, signedVerificationCode)
+            .verifySignedVerificationCode(trustedCertificate, trustedCertificate.signedVerificationCode)
             .then(({ data }) => {
             assign(trustedCertificate, data);
             this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.EVENT, {
@@ -270,20 +270,20 @@ class TrustedCertificatesComponent {
     copyUnsignedVerificationCodeToClipboard(trustedCertificate) {
         this.clipboardService.writeText(trustedCertificate.proofOfPossessionUnsignedVerificationCode);
     }
-    onFileInput(event) {
+    onFileInput(event, trustedCertificate) {
         const input = event.target;
         const reader = new FileReader();
         reader.onload = () => {
-            this.signedVerificationCode = reader.result;
+            trustedCertificate.signedVerificationCode = reader.result;
         };
         reader.readAsText(input.files[0]);
     }
 }
 TrustedCertificatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TrustedCertificatesComponent, deps: [{ token: i1.BsModalService }, { token: i2$1.AlertService }, { token: i2.TrustedCertificateService }, { token: i2$1.ModalService }, { token: i4$1.TranslateService }, { token: i2$1.ClipboardService }, { token: i2$1.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-TrustedCertificatesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TrustedCertificatesComponent, selector: "c8y-trusted-certificates", ngImport: i0, template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Management' | translate }}\"\n    icon=\"c8y-management\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Trusted certificates' | translate }}\"\n    icon=\"certificate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    (click)=\"addTrustedCertificate()\"\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 [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadTrustedCertificates()\"\n  >\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading | async }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/device-management/#trusted-certificates\"></c8y-help>\n\n<c8y-ui-empty-state\n  *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\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    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"addTrustedCertificate()\"\n  >\n    {{ 'Add trusted certificate' | translate }}\n  </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n  <div\n    *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n    class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i c8yIcon=\"certificate\" class=\"invisible\"></i>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Certificate' | translate }} \">\n              {{ 'Certificate' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Status' | translate }}\">\n              {{ 'Status' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Algorithm' | translate }}\">\n              {{ 'Algorithm' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Expiration date' | translate }}\">\n              {{ 'Expiration date' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Auto registration' | translate }}\">\n              {{ 'Auto registration' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Proof of possession' | translate }}\">\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  <c8y-li\n    *c8yFor=\"\n      let trustedCertificate of trustedCertificates | async;\n      let i = index;\n      pipe: sortByExpirationDateAsc;\n      loadMore: 'none'\n    \"\n    #listItem\n  >\n    <c8y-li-icon>\n      <i c8yIcon=\"certificate\"></i>\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          type=\"button\"\n          title=\"{{ trustedCertificate.name }}\"\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          type=\"button\"\n          name=\"certificateStatus\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n          (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\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 class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\" translate>Algorithm</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 }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n        >\n          <span class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\" translate>\n            Expiration date\n          </span>\n          <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n            <i\n              c8yIcon=\"calendar\"\n              class=\"m-r-4\"\n              *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <i\n              c8yIcon=\"warning\"\n              class=\"m-r-4\"\n              *ngIf=\"highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n          </small>\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          <span\n            *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Enabled`auto registration`' | translate\n            }}\"\n          >\n            {{ 'Enabled`auto registration`' | translate }}\n          </span>\n          <span\n            *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Disabled`auto registration`' | translate\n            }}\"\n          >\n            {{ 'Disabled`auto registration`' | translate }}\n          </span>\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          <span\n            *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Complete`proof of possession`' | translate\n            }}\"\n          >\n            <div class=\"icon-flex\">\n              <i c8yIcon=\"success\" class=\"text-success\"></i>\n              {{ 'Complete`proof of possession`' | translate }}\n            </div>\n          </span>\n          <span\n            *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Incomplete`proof of possession`' | translate\n            }}\"\n          >\n            <div class=\"icon-flex\">\n              <i c8yIcon=\"warning\" class=\"text-warning\"></i>\n              {{ 'Incomplete`proof of possession`' | translate }}\n            </div>\n          </span>\n        </div>\n        <button\n          class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          placement=\"right\"\n          [delay]=\"500\"\n          (click)=\"deleteTrustedCertificate(trustedCertificate)\"\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                  type=\"text\"\n                  class=\"form-control\"\n                  [(ngModel)]=\"trustedCertificate.name\"\n                  required\n                />\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    title=\"{{ 'Update certificate name' | translate }}\"\n                    type=\"button\"\n                    class=\"btn btn-primary\"\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 for=\"certInPemFormat\" class=\"control-label\" translate>Certificate</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 title=\"{{ 'Auto registration' | translate }}\" class=\"c8y-checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                  (ngModelChange)=\"\n                    updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                  \"\n                />\n                <span></span>\n                <span>{{ 'Auto registration' | translate }}</span>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <div class=\"legend form-block\" translate>Additional properties</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          <div class=\"col-md-7\">\n            <div class=\"legend form-block\">\n              {{ 'Proof of possession' | translate }}\n              <button\n                type=\"button\"\n                class=\"btn-help btn-help--sm\"\n                type=\"button\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n              ></button>\n            </div>\n            <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n              <span\n                title=\"{{ 'Proof of possession' | translate }}:  {{\n                  'Complete`proof of possession`' | translate\n                }}\"\n                class=\"icon-flex\"\n              >\n                <i c8yIcon=\"success\" class=\"text-success\"></i>\n                {{ 'Complete`proof of possession`' | translate }}\n              </span>\n            </div>\n            <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n              <div class=\"row m-b-16\">\n                <div class=\"col-md-6\">\n                  <span\n                    title=\"{{ 'Proof of possession' | translate }}:  {{\n                      'Incomplete`proof of possession`' | translate\n                    }}\"\n                    class=\"icon-flex\"\n                  >\n                    <i c8yIcon=\"warning\" class=\"text-warning\"></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 | c8yDate) ||\n                      '---'\n                  }}\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-md-6 col-lg-6\">\n                  <c8y-form-group>\n                    <label for=\"unsignedVerificationCode\" class=\"control-label\" translate>\n                      Verification code\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      name=\"unsignedVerificationCode\"\n                      id=\"unsignedVerificationCode\"\n                      readonly\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      type=\"button\"\n                      title=\"{{ 'Regenerate verification code' | translate }}\"\n                      (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\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                      type=\"button\"\n                      [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                      tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                      placement=\"right\"\n                      [delay]=\"500\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                    >\n                      <i c8yIcon=\"clipboard\"></i>\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      type=\"button\"\n                      tooltip=\"{{ 'Download as file' | translate }}\"\n                      [delay]=\"500\"\n                      [attr.aria-label]=\"'Download as file' | translate\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: 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 for=\"signedVerificationCode\" class=\"control-label\">\n                      {{ 'Signed verification code' | translate }}\n                      <button\n                        type=\"button\"\n                        class=\"btn-help btn-help--sm\"\n                        popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        container=\"body\"\n                        placement=\"top\"\n                      ></button>\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      name=\"signedVerificationCode\"\n                      id=\"signedVerificationCode\"\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"signedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      type=\"button\"\n                      title=\"{{ 'Verify signed verification code' | translate }}\"\n                      (click)=\"\n                        verifySignedVerificationCode(trustedCertificate, signedVerificationCode)\n                      \"\n                      [disabled]=\"!signedVerificationCode\"\n                    >\n                      {{ 'Verify`signed verification code`' | translate }}\n                    </button>\n                    <button\n                      class=\"btn btn-sm btn-default m-l-auto\"\n                      type=\"button\"\n                      [attr.aria-label]=\"'Upload file' | translate\"\n                      tooltip=\"{{ 'Upload file' | translate }}\"\n                      [delay]=\"500\"\n                      (click)=\"fileInput.click()\"\n                    >\n                      <i c8yIcon=\"upload\"></i>\n                    </button>\n                    <input #fileInput type=\"file\" (change)=\"onFileInput($event)\" class=\"hidden\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </c8y-li-collapse>\n  </c8y-li>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: i2$1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i2$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: i2$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { 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: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2$1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2$1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2$1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: i2$1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i2$1.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i7.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: "directive", type: i5.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.DatePipe, name: "c8yDate" }] });
+TrustedCertificatesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TrustedCertificatesComponent, selector: "c8y-trusted-certificates", ngImport: i0, template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Management' | translate }}\"\n    icon=\"c8y-management\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Trusted certificates' | translate }}\"\n    icon=\"certificate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    (click)=\"addTrustedCertificate()\"\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 [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadTrustedCertificates()\"\n  >\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading | async }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/device-management/#trusted-certificates\"></c8y-help>\n\n<c8y-ui-empty-state\n  *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\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    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"addTrustedCertificate()\"\n  >\n    {{ 'Add trusted certificate' | translate }}\n  </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n  <div\n    *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n    class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i c8yIcon=\"certificate\" class=\"invisible\"></i>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Certificate' | translate }} \">\n              {{ 'Certificate' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Status' | translate }}\">\n              {{ 'Status' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Algorithm' | translate }}\">\n              {{ 'Algorithm' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Expiration date' | translate }}\">\n              {{ 'Expiration date' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Auto registration' | translate }}\">\n              {{ 'Auto registration' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Proof of possession' | translate }}\">\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  <c8y-li\n    *c8yFor=\"\n      let trustedCertificate of trustedCertificates | async;\n      let i = index;\n      pipe: sortByExpirationDateAsc;\n      loadMore: 'none'\n    \"\n    #listItem\n  >\n    <c8y-li-icon>\n      <i c8yIcon=\"certificate\"></i>\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          type=\"button\"\n          title=\"{{ trustedCertificate.name }}\"\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          type=\"button\"\n          name=\"certificateStatus\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n          (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\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 class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\" translate>Algorithm</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 }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n        >\n          <span class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\" translate>\n            Expiration date\n          </span>\n          <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n            <i\n              c8yIcon=\"calendar\"\n              class=\"m-r-4\"\n              *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <i\n              c8yIcon=\"warning\"\n              class=\"m-r-4\"\n              *ngIf=\"highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n          </small>\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          <span\n            *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Enabled`auto registration`' | translate\n            }}\"\n          >\n            {{ 'Enabled`auto registration`' | translate }}\n          </span>\n          <span\n            *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Disabled`auto registration`' | translate\n            }}\"\n          >\n            {{ 'Disabled`auto registration`' | translate }}\n          </span>\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          <span\n            *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Complete`proof of possession`' | translate\n            }}\"\n          >\n            <div class=\"icon-flex\">\n              <i c8yIcon=\"success\" class=\"text-success\"></i>\n              {{ 'Complete`proof of possession`' | translate }}\n            </div>\n          </span>\n          <span\n            *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Incomplete`proof of possession`' | translate\n            }}\"\n          >\n            <div class=\"icon-flex\">\n              <i c8yIcon=\"warning\" class=\"text-warning\"></i>\n              {{ 'Incomplete`proof of possession`' | translate }}\n            </div>\n          </span>\n        </div>\n        <button\n          class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          placement=\"right\"\n          [delay]=\"500\"\n          (click)=\"deleteTrustedCertificate(trustedCertificate)\"\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                  type=\"text\"\n                  class=\"form-control\"\n                  [(ngModel)]=\"trustedCertificate.name\"\n                  required\n                />\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    title=\"{{ 'Update certificate name' | translate }}\"\n                    type=\"button\"\n                    class=\"btn btn-primary\"\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 for=\"certInPemFormat\" class=\"control-label\" translate>Certificate</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 title=\"{{ 'Auto registration' | translate }}\" class=\"c8y-checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                  (ngModelChange)=\"\n                    updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                  \"\n                />\n                <span></span>\n                <span>{{ 'Auto registration' | translate }}</span>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <div class=\"legend form-block\" translate>Additional properties</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          <div class=\"col-md-7\">\n            <div class=\"legend form-block\">\n              {{ 'Proof of possession' | translate }}\n              <button\n                type=\"button\"\n                class=\"btn-help btn-help--sm\"\n                type=\"button\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n              ></button>\n            </div>\n            <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n              <span\n                title=\"{{ 'Proof of possession' | translate }}:  {{\n                  'Complete`proof of possession`' | translate\n                }}\"\n                class=\"icon-flex\"\n              >\n                <i c8yIcon=\"success\" class=\"text-success\"></i>\n                {{ 'Complete`proof of possession`' | translate }}\n              </span>\n            </div>\n            <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n              <div class=\"row m-b-16\">\n                <div class=\"col-md-6\">\n                  <span\n                    title=\"{{ 'Proof of possession' | translate }}:  {{\n                      'Incomplete`proof of possession`' | translate\n                    }}\"\n                    class=\"icon-flex\"\n                  >\n                    <i c8yIcon=\"warning\" class=\"text-warning\"></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 | c8yDate) ||\n                      '---'\n                  }}\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-md-6 col-lg-6\">\n                  <c8y-form-group>\n                    <label for=\"unsignedVerificationCode\" class=\"control-label\" translate>\n                      Verification code\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      name=\"unsignedVerificationCode\"\n                      id=\"unsignedVerificationCode\"\n                      readonly\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      type=\"button\"\n                      title=\"{{ 'Regenerate verification code' | translate }}\"\n                      (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\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                      type=\"button\"\n                      [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                      tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                      placement=\"right\"\n                      [delay]=\"500\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                    >\n                      <i c8yIcon=\"clipboard\"></i>\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      type=\"button\"\n                      tooltip=\"{{ 'Download as file' | translate }}\"\n                      [delay]=\"500\"\n                      [attr.aria-label]=\"'Download as file' | translate\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: 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 for=\"signedVerificationCode\" class=\"control-label\">\n                      {{ 'Signed verification code' | translate }}\n                      <button\n                        type=\"button\"\n                        class=\"btn-help btn-help--sm\"\n                        popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        container=\"body\"\n                        placement=\"top\"\n                      ></button>\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      name=\"signedVerificationCode\"\n                      id=\"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                      type=\"button\"\n                      title=\"{{ 'Verify signed verification code' | translate }}\"\n                      (click)=\"\n                        verifySignedVerificationCode(trustedCertificate)\n                      \"\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                      type=\"button\"\n                      [attr.aria-label]=\"'Upload file' | translate\"\n                      tooltip=\"{{ 'Upload file' | translate }}\"\n                      [delay]=\"500\"\n                      (click)=\"fileInput.click()\"\n                    >\n                      <i c8yIcon=\"upload\"></i>\n                    </button>\n                    <input #fileInput type=\"file\" (change)=\"onFileInput($event, trustedCertificate)\" class=\"hidden\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </c8y-li-collapse>\n  </c8y-li>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: i2$1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i2$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: i2$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { 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: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2$1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2$1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2$1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: i2$1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i2$1.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i7.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: "directive", type: i5.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.DatePipe, name: "c8yDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TrustedCertificatesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-trusted-certificates', template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Management' | translate }}\"\n    icon=\"c8y-management\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Trusted certificates' | translate }}\"\n    icon=\"certificate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    (click)=\"addTrustedCertificate()\"\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 [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadTrustedCertificates()\"\n  >\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading | async }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/device-management/#trusted-certificates\"></c8y-help>\n\n<c8y-ui-empty-state\n  *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\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    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"addTrustedCertificate()\"\n  >\n    {{ 'Add trusted certificate' | translate }}\n  </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n  <div\n    *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n    class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i c8yIcon=\"certificate\" class=\"invisible\"></i>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Certificate' | translate }} \">\n              {{ 'Certificate' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Status' | translate }}\">\n              {{ 'Status' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Algorithm' | translate }}\">\n              {{ 'Algorithm' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Expiration date' | translate }}\">\n              {{ 'Expiration date' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Auto registration' | translate }}\">\n              {{ 'Auto registration' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Proof of possession' | translate }}\">\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  <c8y-li\n    *c8yFor=\"\n      let trustedCertificate of trustedCertificates | async;\n      let i = index;\n      pipe: sortByExpirationDateAsc;\n      loadMore: 'none'\n    \"\n    #listItem\n  >\n    <c8y-li-icon>\n      <i c8yIcon=\"certificate\"></i>\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          type=\"button\"\n          title=\"{{ trustedCertificate.name }}\"\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          type=\"button\"\n          name=\"certificateStatus\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n          (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\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 class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\" translate>Algorithm</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 }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n        >\n          <span class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\" translate>\n            Expiration date\n          </span>\n          <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n            <i\n              c8yIcon=\"calendar\"\n              class=\"m-r-4\"\n              *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <i\n              c8yIcon=\"warning\"\n              class=\"m-r-4\"\n              *ngIf=\"highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n          </small>\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          <span\n            *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Enabled`auto registration`' | translate\n            }}\"\n          >\n            {{ 'Enabled`auto registration`' | translate }}\n          </span>\n          <span\n            *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Disabled`auto registration`' | translate\n            }}\"\n          >\n            {{ 'Disabled`auto registration`' | translate }}\n          </span>\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          <span\n            *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Complete`proof of possession`' | translate\n            }}\"\n          >\n            <div class=\"icon-flex\">\n              <i c8yIcon=\"success\" class=\"text-success\"></i>\n              {{ 'Complete`proof of possession`' | translate }}\n            </div>\n          </span>\n          <span\n            *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Incomplete`proof of possession`' | translate\n            }}\"\n          >\n            <div class=\"icon-flex\">\n              <i c8yIcon=\"warning\" class=\"text-warning\"></i>\n              {{ 'Incomplete`proof of possession`' | translate }}\n            </div>\n          </span>\n        </div>\n        <button\n          class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          placement=\"right\"\n          [delay]=\"500\"\n          (click)=\"deleteTrustedCertificate(trustedCertificate)\"\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                  type=\"text\"\n                  class=\"form-control\"\n                  [(ngModel)]=\"trustedCertificate.name\"\n                  required\n                />\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    title=\"{{ 'Update certificate name' | translate }}\"\n                    type=\"button\"\n                    class=\"btn btn-primary\"\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 for=\"certInPemFormat\" class=\"control-label\" translate>Certificate</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 title=\"{{ 'Auto registration' | translate }}\" class=\"c8y-checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                  (ngModelChange)=\"\n                    updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                  \"\n                />\n                <span></span>\n                <span>{{ 'Auto registration' | translate }}</span>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <div class=\"legend form-block\" translate>Additional properties</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          <div class=\"col-md-7\">\n            <div class=\"legend form-block\">\n              {{ 'Proof of possession' | translate }}\n              <button\n                type=\"button\"\n                class=\"btn-help btn-help--sm\"\n                type=\"button\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n              ></button>\n            </div>\n            <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n              <span\n                title=\"{{ 'Proof of possession' | translate }}:  {{\n                  'Complete`proof of possession`' | translate\n                }}\"\n                class=\"icon-flex\"\n              >\n                <i c8yIcon=\"success\" class=\"text-success\"></i>\n                {{ 'Complete`proof of possession`' | translate }}\n              </span>\n            </div>\n            <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n              <div class=\"row m-b-16\">\n                <div class=\"col-md-6\">\n                  <span\n                    title=\"{{ 'Proof of possession' | translate }}:  {{\n                      'Incomplete`proof of possession`' | translate\n                    }}\"\n                    class=\"icon-flex\"\n                  >\n                    <i c8yIcon=\"warning\" class=\"text-warning\"></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 | c8yDate) ||\n                      '---'\n                  }}\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-md-6 col-lg-6\">\n                  <c8y-form-group>\n                    <label for=\"unsignedVerificationCode\" class=\"control-label\" translate>\n                      Verification code\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      name=\"unsignedVerificationCode\"\n                      id=\"unsignedVerificationCode\"\n                      readonly\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      type=\"button\"\n                      title=\"{{ 'Regenerate verification code' | translate }}\"\n                      (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\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                      type=\"button\"\n                      [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                      tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                      placement=\"right\"\n                      [delay]=\"500\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                    >\n                      <i c8yIcon=\"clipboard\"></i>\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      type=\"button\"\n                      tooltip=\"{{ 'Download as file' | translate }}\"\n                      [delay]=\"500\"\n                      [attr.aria-label]=\"'Download as file' | translate\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: 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 for=\"signedVerificationCode\" class=\"control-label\">\n                      {{ 'Signed verification code' | translate }}\n                      <button\n                        type=\"button\"\n                        class=\"btn-help btn-help--sm\"\n                        popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        container=\"body\"\n                        placement=\"top\"\n                      ></button>\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      name=\"signedVerificationCode\"\n                      id=\"signedVerificationCode\"\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"signedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      type=\"button\"\n                      title=\"{{ 'Verify signed verification code' | translate }}\"\n                      (click)=\"\n                        verifySignedVerificationCode(trustedCertificate, signedVerificationCode)\n                      \"\n                      [disabled]=\"!signedVerificationCode\"\n                    >\n                      {{ 'Verify`signed verification code`' | translate }}\n                    </button>\n                    <button\n                      class=\"btn btn-sm btn-default m-l-auto\"\n                      type=\"button\"\n                      [attr.aria-label]=\"'Upload file' | translate\"\n                      tooltip=\"{{ 'Upload file' | translate }}\"\n                      [delay]=\"500\"\n                      (click)=\"fileInput.click()\"\n                    >\n                      <i c8yIcon=\"upload\"></i>\n                    </button>\n                    <input #fileInput type=\"file\" (change)=\"onFileInput($event)\" class=\"hidden\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </c8y-li-collapse>\n  </c8y-li>\n</c8y-list-group>\n" }]
+            args: [{ selector: 'c8y-trusted-certificates', template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Management' | translate }}\"\n    icon=\"c8y-management\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    label=\"{{ 'Trusted certificates' | translate }}\"\n    icon=\"certificate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    (click)=\"addTrustedCertificate()\"\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 [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    type=\"button\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"loadTrustedCertificates()\"\n  >\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading | async }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/device-management/#trusted-certificates\"></c8y-help>\n\n<c8y-ui-empty-state\n  *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\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    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"addTrustedCertificate()\"\n  >\n    {{ 'Add trusted certificate' | translate }}\n  </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n  <div\n    *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n    class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i c8yIcon=\"certificate\" class=\"invisible\"></i>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Certificate' | translate }} \">\n              {{ 'Certificate' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Status' | translate }}\">\n              {{ 'Status' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Algorithm' | translate }}\">\n              {{ 'Algorithm' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\"{{ 'Expiration date' | translate }}\">\n              {{ 'Expiration date' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Auto registration' | translate }}\">\n              {{ 'Auto registration' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span class=\"text-truncate\" title=\" {{ 'Proof of possession' | translate }}\">\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  <c8y-li\n    *c8yFor=\"\n      let trustedCertificate of trustedCertificates | async;\n      let i = index;\n      pipe: sortByExpirationDateAsc;\n      loadMore: 'none'\n    \"\n    #listItem\n  >\n    <c8y-li-icon>\n      <i c8yIcon=\"certificate\"></i>\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          type=\"button\"\n          title=\"{{ trustedCertificate.name }}\"\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          type=\"button\"\n          name=\"certificateStatus\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n          (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\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 class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\" translate>Algorithm</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 }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n        >\n          <span class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\" translate>\n            Expiration date\n          </span>\n          <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n            <i\n              c8yIcon=\"calendar\"\n              class=\"m-r-4\"\n              *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <i\n              c8yIcon=\"warning\"\n              class=\"m-r-4\"\n              *ngIf=\"highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n          </small>\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          <span\n            *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Enabled`auto registration`' | translate\n            }}\"\n          >\n            {{ 'Enabled`auto registration`' | translate }}\n          </span>\n          <span\n            *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Disabled`auto registration`' | translate\n            }}\"\n          >\n            {{ 'Disabled`auto registration`' | translate }}\n          </span>\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          <span\n            *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Complete`proof of possession`' | translate\n            }}\"\n          >\n            <div class=\"icon-flex\">\n              <i c8yIcon=\"success\" class=\"text-success\"></i>\n              {{ 'Complete`proof of possession`' | translate }}\n            </div>\n          </span>\n          <span\n            *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Incomplete`proof of possession`' | translate\n            }}\"\n          >\n            <div class=\"icon-flex\">\n              <i c8yIcon=\"warning\" class=\"text-warning\"></i>\n              {{ 'Incomplete`proof of possession`' | translate }}\n            </div>\n          </span>\n        </div>\n        <button\n          class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          placement=\"right\"\n          [delay]=\"500\"\n          (click)=\"deleteTrustedCertificate(trustedCertificate)\"\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                  type=\"text\"\n                  class=\"form-control\"\n                  [(ngModel)]=\"trustedCertificate.name\"\n                  required\n                />\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    title=\"{{ 'Update certificate name' | translate }}\"\n                    type=\"button\"\n                    class=\"btn btn-primary\"\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 for=\"certInPemFormat\" class=\"control-label\" translate>Certificate</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 title=\"{{ 'Auto registration' | translate }}\" class=\"c8y-checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                  (ngModelChange)=\"\n                    updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                  \"\n                />\n                <span></span>\n                <span>{{ 'Auto registration' | translate }}</span>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <div class=\"legend form-block\" translate>Additional properties</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          <div class=\"col-md-7\">\n            <div class=\"legend form-block\">\n              {{ 'Proof of possession' | translate }}\n              <button\n                type=\"button\"\n                class=\"btn-help btn-help--sm\"\n                type=\"button\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n              ></button>\n            </div>\n            <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n              <span\n                title=\"{{ 'Proof of possession' | translate }}:  {{\n                  'Complete`proof of possession`' | translate\n                }}\"\n                class=\"icon-flex\"\n              >\n                <i c8yIcon=\"success\" class=\"text-success\"></i>\n                {{ 'Complete`proof of possession`' | translate }}\n              </span>\n            </div>\n            <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n              <div class=\"row m-b-16\">\n                <div class=\"col-md-6\">\n                  <span\n                    title=\"{{ 'Proof of possession' | translate }}:  {{\n                      'Incomplete`proof of possession`' | translate\n                    }}\"\n                    class=\"icon-flex\"\n                  >\n                    <i c8yIcon=\"warning\" class=\"text-warning\"></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 | c8yDate) ||\n                      '---'\n                  }}\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-md-6 col-lg-6\">\n                  <c8y-form-group>\n                    <label for=\"unsignedVerificationCode\" class=\"control-label\" translate>\n                      Verification code\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      name=\"unsignedVerificationCode\"\n                      id=\"unsignedVerificationCode\"\n                      readonly\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      type=\"button\"\n                      title=\"{{ 'Regenerate verification code' | translate }}\"\n                      (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\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                      type=\"button\"\n                      [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                      tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                      placement=\"right\"\n                      [delay]=\"500\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                    >\n                      <i c8yIcon=\"clipboard\"></i>\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      type=\"button\"\n                      tooltip=\"{{ 'Download as file' | translate }}\"\n                      [delay]=\"500\"\n                      [attr.aria-label]=\"'Download as file' | translate\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: 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 for=\"signedVerificationCode\" class=\"control-label\">\n                      {{ 'Signed verification code' | translate }}\n                      <button\n                        type=\"button\"\n                        class=\"btn-help btn-help--sm\"\n                        popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        container=\"body\"\n                        placement=\"top\"\n                      ></button>\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      name=\"signedVerificationCode\"\n                      id=\"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                      type=\"button\"\n                      title=\"{{ 'Verify signed verification code' | translate }}\"\n                      (click)=\"\n                        verifySignedVerificationCode(trustedCertificate)\n                      \"\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                      type=\"button\"\n                      [attr.aria-label]=\"'Upload file' | translate\"\n                      tooltip=\"{{ 'Upload file' | translate }}\"\n                      [delay]=\"500\"\n                      (click)=\"fileInput.click()\"\n                    >\n                      <i c8yIcon=\"upload\"></i>\n                    </button>\n                    <input #fileInput type=\"file\" (change)=\"onFileInput($event, trustedCertificate)\" class=\"hidden\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </c8y-li-collapse>\n  </c8y-li>\n</c8y-list-group>\n" }]
         }], ctorParameters: function () { return [{ type: i1.BsModalService }, { type: i2$1.AlertService }, { type: i2.TrustedCertificateService }, { type: i2$1.ModalService }, { type: i4$1.TranslateService }, { type: i2$1.ClipboardService }, { type: i2$1.GainsightService }]; } });
 
 class TrustedCertificatesNavigationFactory {