@c8y/ngx-components 1018.503.23 → 1018.503.26

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

@@ -1,28 +1,285 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/router';
+import { Injectable, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i2$1 from '@c8y/ngx-components';
-import { gettext, Status, NavigatorNode, CoreModule, CommonModule, hookNavigator, hookPatternMessages } from '@c8y/ngx-components';
+import * as i2 from '@c8y/ngx-components';
+import { NavigatorNode, gettext, Status, CoreModule, CommonModule, hookNavigator, hookPatternMessages, hookTab } from '@c8y/ngx-components';
 import { __awaiter } from 'tslib';
+import * as i5$1 from 'ngx-bootstrap/datepicker';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { pull, isEmpty, assign } from 'lodash-es';
 import { saveAs } from 'file-saver';
-import { assign } from 'lodash-es';
-import { BehaviorSubject, pipe } from 'rxjs';
-import { tap, switchMap } from 'rxjs/operators';
-import * as i1 from 'ngx-bootstrap/modal';
-import * as i2 from '@c8y/client';
+import * as i2$1 from '@c8y/client';
+import * as i3 from '@angular/common';
 import * as i4 from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
-import * as i5 from 'ngx-bootstrap/buttons';
-import { ButtonsModule } from 'ngx-bootstrap/buttons';
 import * as i6 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
+import * as i5 from 'ngx-bootstrap/dropdown';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import * as i1$1 from 'ngx-bootstrap/modal';
+import * as i5$2 from 'ngx-bootstrap/buttons';
+import { ButtonsModule } from 'ngx-bootstrap/buttons';
+import { BehaviorSubject, pipe } from 'rxjs';
+import { tap, switchMap } from 'rxjs/operators';
 import * as i4$1 from '@ngx-translate/core';
-import * as i5$1 from '@angular/common';
 import * as i7 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import * as i2$2 from 'ngx-bootstrap/dropdown';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+
+class TrustedCertificatesNavigationFactory {
+    constructor() {
+        this.navs = [];
+    }
+    get() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.navs.length === 0) {
+                this.navs.push(new NavigatorNode({
+                    label: gettext('Trusted certificates'),
+                    icon: 'certificate',
+                    path: '/trusted-certificates/certificates',
+                    parent: gettext('Management'),
+                    priority: 100
+                }));
+            }
+            return this.navs;
+        });
+    }
+}
+TrustedCertificatesNavigationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesNavigationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TrustedCertificatesNavigationFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesNavigationFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesNavigationFactory, decorators: [{
+            type: Injectable
+        }] });
+
+/* tslint:disable:max-line-length */
+const MESSAGES = {
+    '^Cannot find certificate with fingerprint (.+?).$': {
+        gettext: gettext('Could not find {{ fingerprint }} certificate.'),
+        placeholders: {
+            fingerprint: '$1'
+        }
+    },
+    '^Wrong proof of possession verification code used for tenant (.+?). Certificate (.+?), usage not granted.$': {
+        gettext: gettext('Could not confirm the ownership of {{ fingerprint }} certificate: invalid proof of possession verification code provided, sign verification code with private key.'),
+        placeholders: {
+            tenant: '$1',
+            fingerprint: '$2'
+        }
+    },
+    '^Proof of possession verification code used for tenant (.+?) expired. Certificate (.+?), usage not granted.': {
+        gettext: gettext('Could not confirm the ownership of {{ fingerprint }} certificate: proof of possession verification code has expired, generate a new code and try again.'),
+        placeholders: {
+            tenant: '$1',
+            fingerprint: '$2'
+        }
+    }
+};
+
+class TabsFactory {
+    constructor(router) {
+        this.router = router;
+    }
+    get() {
+        const tabs = [];
+        if (this.router.url.match(/trusted-certificates/g)) {
+            tabs.push({
+                icon: 'certificate',
+                priority: 1000,
+                label: gettext('Certificates'),
+                path: 'trusted-certificates/certificates',
+                orientation: 'horizontal'
+            });
+            tabs.push({
+                icon: 'settings',
+                priority: 900,
+                label: gettext('Settings'),
+                path: 'trusted-certificates/settings',
+                orientation: 'horizontal'
+            });
+        }
+        return tabs;
+    }
+}
+TabsFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TabsFactory, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+TabsFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TabsFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TabsFactory, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.Router }]; } });
+
+class CrlCheckSettingsComponent {
+    constructor(optionsService, tenantOptionsService, alertService) {
+        this.optionsService = optionsService;
+        this.tenantOptionsService = tenantOptionsService;
+        this.alertService = alertService;
+        this.crlCheck = { online: false, offline: false };
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.crlCheck = {
+                offline: (yield this.optionsService.getTenantOption('configuration', 'crl.offline.check.enabled', false)),
+                online: (yield this.optionsService.getTenantOption('configuration', 'crl.online.check.enabled', false))
+            };
+        });
+    }
+    updateTenantOption(tenantOption) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield this.tenantOptionsService.update(tenantOption);
+                this.alertService.success(gettext('CRL check configuration saved.'));
+            }
+            catch (er) {
+                this.alertService.addServerFailure(er);
+            }
+        });
+    }
+}
+CrlCheckSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CrlCheckSettingsComponent, deps: [{ token: i2.OptionsService }, { token: i2$1.TenantOptionsService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+CrlCheckSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CrlCheckSettingsComponent, selector: "c8y-crl-check-settings", ngImport: i0, template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <div\n    class=\"dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle c8y-dropdown d-flex a-i-center\"\n      title=\"{{ 'CRL check' | translate }}\"\n      aria-haspopup=\"true\"\n      type=\"button\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        [c8yIcon]=\"'check-document'\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        translate\n      >\n        CRL check\n      </span>\n      <i\n        class=\"m-l-4 text-primary\"\n        [c8yIcon]=\"'caret-down'\"\n      ></i>\n    </button>\n    <ul\n      class=\"dropdown-menu dropdown-menu-right hidden-xs\"\n      data-cy=\"register-device--dropdown\"\n      *dropdownMenu\n    >\n      <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n    </ul>\n\n    <ul class=\"dropdown-menu dropdown-menu-right visible-xs\">\n      <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n    </ul>\n\n    <ng-template #dropdown>\n      <li>\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          title=\"{{ 'Online`type of checking`' | translate }}\"\n        >\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"crlCheck.online\"\n            (ngModelChange)=\"\n              updateTenantOption({\n                category: 'configuration',\n                key: 'crl.online.check.enabled',\n                value: $event\n              })\n            \"\n          />\n          <span class=\"m-r-4\"></span>\n          {{ 'Online`type of checking`' | translate }}\n        </label>\n      </li>\n      <li>\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          title=\"{{ 'Offline`type of checking`' | translate }}\"\n        >\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"crlCheck.offline\"\n            (ngModelChange)=\"\n              updateTenantOption({\n                category: 'configuration',\n                key: 'crl.offline.check.enabled',\n                value: $event\n              })\n            \"\n          />\n          <span class=\"m-r-4\"></span>\n          {{ 'Offline`type of checking`' | translate }}\n        </label>\n      </li>\n    </ng-template>\n  </div>\n</c8y-action-bar-item>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i5.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CrlCheckSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-crl-check-settings', template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <div\n    class=\"dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle c8y-dropdown d-flex a-i-center\"\n      title=\"{{ 'CRL check' | translate }}\"\n      aria-haspopup=\"true\"\n      type=\"button\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        [c8yIcon]=\"'check-document'\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        translate\n      >\n        CRL check\n      </span>\n      <i\n        class=\"m-l-4 text-primary\"\n        [c8yIcon]=\"'caret-down'\"\n      ></i>\n    </button>\n    <ul\n      class=\"dropdown-menu dropdown-menu-right hidden-xs\"\n      data-cy=\"register-device--dropdown\"\n      *dropdownMenu\n    >\n      <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n    </ul>\n\n    <ul class=\"dropdown-menu dropdown-menu-right visible-xs\">\n      <ng-container *ngTemplateOutlet=\"dropdown\"></ng-container>\n    </ul>\n\n    <ng-template #dropdown>\n      <li>\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          title=\"{{ 'Online`type of checking`' | translate }}\"\n        >\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"crlCheck.online\"\n            (ngModelChange)=\"\n              updateTenantOption({\n                category: 'configuration',\n                key: 'crl.online.check.enabled',\n                value: $event\n              })\n            \"\n          />\n          <span class=\"m-r-4\"></span>\n          {{ 'Online`type of checking`' | translate }}\n        </label>\n      </li>\n      <li>\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          title=\"{{ 'Offline`type of checking`' | translate }}\"\n        >\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"crlCheck.offline\"\n            (ngModelChange)=\"\n              updateTenantOption({\n                category: 'configuration',\n                key: 'crl.offline.check.enabled',\n                value: $event\n              })\n            \"\n          />\n          <span class=\"m-r-4\"></span>\n          {{ 'Offline`type of checking`' | translate }}\n        </label>\n      </li>\n    </ng-template>\n  </div>\n</c8y-action-bar-item>\n" }]
+        }], ctorParameters: function () { return [{ type: i2.OptionsService }, { type: i2$1.TenantOptionsService }, { type: i2.AlertService }]; } });
+
+class CrlSettingsComponent {
+    constructor(crlService, alertService, modalService) {
+        this.crlService = crlService;
+        this.alertService = alertService;
+        this.modalService = modalService;
+        this.crls = [this.getEmptyCertificateRevocation()];
+        this.droppedFiles = [];
+        this.today = new Date();
+        this.MANUAL_ENTRY_POPOVER = gettext('In this section, you can override or add individual entries to the Certificate Revocation List. Providing the serial number is mandatory. In case the revocation date is not set, it will be configured to the current date.');
+        this.FILE_UPLOAD_POPOVER = gettext('In this section, you can upload a file containing a revocation list for certificates. The file must be in CSV format, and it should include the serial number and revocation date. If the revocation date is empty, it will be set to the current date.');
+    }
+    downloadCrl() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let arrayBuffer;
+            try {
+                const res = yield this.crlService.downloadCrlFile();
+                arrayBuffer = yield res.arrayBuffer();
+                const fileBinary = new File([arrayBuffer], 'cumulocity.crl', {
+                    type: 'application/pkix-crl'
+                });
+                saveAs(fileBinary);
+            }
+            catch (ex) {
+                this.alertService.addServerFailure(ex);
+            }
+        });
+    }
+    downloadCrlTemplate() {
+        const blob = new Blob([`SERIALNO,DATE\nSERIAL_NO1,${new Date().toISOString()}`], {
+            type: 'text/csv;charset=utf-8;'
+        });
+        const fileName = 'crl-template';
+        saveAs(blob, `${fileName}.csv`);
+    }
+    addCertificateRevocation() {
+        this.crls.push(this.getEmptyCertificateRevocation());
+    }
+    removeCertificateRevocation(certificateRevocation) {
+        pull(this.crls, certificateRevocation);
+        if (this.crls.length === 0) {
+            this.addCertificateRevocation();
+        }
+    }
+    save() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield this.confirm();
+                yield this.saveCrls();
+                yield this.uploadCrlFile();
+                yield this.clearSavedData();
+                this.alertService.success(gettext('CRL saved.'));
+            }
+            catch (er) {
+                this.alertService.addServerFailure(er);
+            }
+        });
+    }
+    get isListEmpty() {
+        return this.crls.length === 1 && isEmpty(this.crls[0].serialNumberInHex);
+    }
+    get isFileDropped() {
+        return !!(this.droppedFiles && this.droppedFiles[0]);
+    }
+    confirm() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const isOverrideManualEntries = !this.isListEmpty && this.isFileDropped;
+            const status = isOverrideManualEntries ? Status.DANGER : Status.WARNING;
+            const body = isOverrideManualEntries
+                ? gettext('You are about to update certificate revocation list. The CRL file content will override manual entries. Do you want to proceed?')
+                : gettext('You are about to update certificate revocation list. Do you want to proceed?');
+            yield this.modalService.confirm(gettext('Update certificate revocation list'), body, status, {
+                ok: gettext('Update')
+            });
+        });
+    }
+    clearSavedData() {
+        this.droppedFiles = [];
+        this.crls = [this.getEmptyCertificateRevocation()];
+    }
+    saveCrls() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.isListEmpty) {
+                yield this.crlService.uploadCrls(this.crls);
+            }
+        });
+    }
+    uploadCrlFile() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isFileDropped) {
+                yield this.crlService.uploadCrlFile(this.droppedFiles[0].file);
+            }
+        });
+    }
+    getEmptyCertificateRevocation() {
+        return {
+            serialNumberInHex: ''
+        };
+    }
+}
+CrlSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CrlSettingsComponent, deps: [{ token: i2$1.CrlService }, { token: i2.AlertService }, { token: i2.ModalService }], target: i0.ɵɵFactoryTarget.Component });
+CrlSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CrlSettingsComponent, selector: "c8y-crl-settings", ngImport: i0, template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"certificate\"\n    label=\"{{ 'Trusted certificates' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-crl-check-settings></c8y-crl-check-settings>\n\n<!-- #TODO uncomment when available in documentation  -->\n<!-- <c8y-help src=\"/users-guide/device-management/#TODO\"></c8y-help> -->\n\n<form\n  class=\"card card--fullpage\"\n  #crlManualForm=\"ngForm\"\n  novalidate\n>\n  <div class=\"card-header separator\">\n    <div class=\"card-title\">\n      {{ 'CRL offline setup' | translate }}\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-block\">\n      <div\n        class=\"legend form-block\"\n      >\n        {{ 'Manual' | translate }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          popover=\"{{ MANUAL_ENTRY_POPOVER | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n        ></button>\n      </div>\n\n      <div\n        class=\"row tight-grid\"\n        *ngFor=\"let certificateRevocation of crls; index as index; last as isLast\"\n      >\n        <div class=\"col-sm-5\">\n          <c8y-form-group>\n            <label\n              [for]=\"'serialNumber' + index\"\n              translate\n            >\n              Serial number\n            </label>\n            <input\n              class=\"form-control\"\n              required\n              [name]=\"'serialNumber' + index\"\n              [id]=\"'serialNumber' + index\"\n              [(ngModel)]=\"certificateRevocation.serialNumberInHex\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: '8ab34fe5476' }\"\n              c8yDefaultValidation=\"hexNumber\"\n            />\n          </c8y-form-group>\n        </div>\n        <div class=\"col-sm-5\">\n          <c8y-form-group class=\"datepicker\">\n            <label [for]=\"'validTillPicker' + index\">\n              {{ 'Valid till' | translate }}\n            </label>\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Date to' | translate\"\n              placeholder=\"{{ 'Date to' | translate }}\"\n              [name]=\"'validTillPicker' + index\"\n              [id]=\"'validTillPicker' + index\"\n              [(ngModel)]=\"certificateRevocation.revocationDate\"\n              [bsConfig]=\"{ customTodayClass: 'today' }\"\n              bsDatepicker\n              [maxDate]=\"today\"\n            />\n          </c8y-form-group>\n        </div>\n        <div class=\"col-sm-2\">\n          <c8y-form-group>\n            <div class=\"p-t-24\">\n              <button\n                *ngIf=\"crls.length > 1\"\n                class=\"btn btn-link hidden-xs hidden-sm\"\n                title=\"{{ 'Remove' | translate }}\"\n                type=\"button\"\n                (click)=\"removeCertificateRevocation(certificateRevocation)\"\n              >\n                <i\n                  class=\"text-danger\"\n                  c8yIcon=\"minus-circle\"\n                ></i>\n              </button>\n              <button\n                class=\"btn btn-link hidden-xs hidden-sm\"\n                title=\"{{ 'Add' | translate }}\"\n                type=\"button\"\n                (click)=\"addCertificateRevocation()\"\n                *ngIf=\"isLast\"\n              >\n                <i\n                  class=\"text-primary\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n              </button>\n\n              <button\n                *ngIf=\"crls.length > 1\"\n                class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n                title=\"{{ 'Remove' | translate }}\"\n                type=\"button\"\n                (click)=\"removeCertificateRevocation(certificateRevocation)\"\n              >\n                <i c8yIcon=\"minus-circle\"></i>\n                {{ 'Remove' | translate }}\n              </button>\n              <button\n                class=\"btn btn-primary btn-block btn-sm visible-xs visible-sm\"\n                title=\"{{ 'Add' | translate }}\"\n                type=\"button\"\n                (click)=\"addCertificateRevocation()\"\n                *ngIf=\"isLast\"\n              >\n                <i c8yIcon=\"plus-circle\"></i>\n                {{ 'Add' | translate }}\n              </button>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n      <div class=\"legend form-block center\">\n        {{ 'or' | translate }}\n      </div>\n      <div\n        class=\"legend form-block\"\n      >\n        {{ 'File upload' | translate }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          popover=\"{{ FILE_UPLOAD_POPOVER | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n        ></button>\n      </div>\n\n      <c8y-drop-area\n        class=\"drop-area-sm\"\n        [title]=\"'Upload CRL file (.csv format)' | translate\"\n        name=\"uploadCrlDropArea\"\n        [(ngModel)]=\"droppedFiles\"\n        [message]=\"'Upload CRL file (.csv format)' | translate\"\n        [loadingMessage]=\"'Uploading\u2026' | translate\"\n        [accept]=\"'.csv'\"\n        [maxAllowedFiles]=\"1\"\n      ></c8y-drop-area>\n      <p class=\"help-block has-info text-muted m-t-4\">\n        {{ 'CRL file content will override manual entries.' | translate }}\n      </p>\n\n      <button\n        class=\"btn btn-sm btn-default m-t-16\"\n        title=\"{{ 'Download template' | translate }}\"\n        type=\"button\"\n        (click)=\"downloadCrlTemplate()\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"template\"\n        ></i>\n        {{ 'Download template' | translate }}\n      </button>\n    </div>\n  </div>\n  <div class=\"card-footer separator\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Download CRL file' | translate }}\"\n      type=\"button\"\n      (click)=\"downloadCrl()\"\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"download\"\n      ></i>\n      {{ 'Download CRL file' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      (click)=\"save()\"\n      [disabled]=\"!(crlManualForm.form.valid || isListEmpty) || (isListEmpty && !isFileDropped)\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2.DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i5$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i5$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { 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: "component", type: CrlCheckSettingsComponent, selector: "c8y-crl-check-settings" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CrlSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-crl-settings', template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"certificate\"\n    label=\"{{ 'Trusted certificates' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-crl-check-settings></c8y-crl-check-settings>\n\n<!-- #TODO uncomment when available in documentation  -->\n<!-- <c8y-help src=\"/users-guide/device-management/#TODO\"></c8y-help> -->\n\n<form\n  class=\"card card--fullpage\"\n  #crlManualForm=\"ngForm\"\n  novalidate\n>\n  <div class=\"card-header separator\">\n    <div class=\"card-title\">\n      {{ 'CRL offline setup' | translate }}\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-block\">\n      <div\n        class=\"legend form-block\"\n      >\n        {{ 'Manual' | translate }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          popover=\"{{ MANUAL_ENTRY_POPOVER | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n        ></button>\n      </div>\n\n      <div\n        class=\"row tight-grid\"\n        *ngFor=\"let certificateRevocation of crls; index as index; last as isLast\"\n      >\n        <div class=\"col-sm-5\">\n          <c8y-form-group>\n            <label\n              [for]=\"'serialNumber' + index\"\n              translate\n            >\n              Serial number\n            </label>\n            <input\n              class=\"form-control\"\n              required\n              [name]=\"'serialNumber' + index\"\n              [id]=\"'serialNumber' + index\"\n              [(ngModel)]=\"certificateRevocation.serialNumberInHex\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: '8ab34fe5476' }\"\n              c8yDefaultValidation=\"hexNumber\"\n            />\n          </c8y-form-group>\n        </div>\n        <div class=\"col-sm-5\">\n          <c8y-form-group class=\"datepicker\">\n            <label [for]=\"'validTillPicker' + index\">\n              {{ 'Valid till' | translate }}\n            </label>\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Date to' | translate\"\n              placeholder=\"{{ 'Date to' | translate }}\"\n              [name]=\"'validTillPicker' + index\"\n              [id]=\"'validTillPicker' + index\"\n              [(ngModel)]=\"certificateRevocation.revocationDate\"\n              [bsConfig]=\"{ customTodayClass: 'today' }\"\n              bsDatepicker\n              [maxDate]=\"today\"\n            />\n          </c8y-form-group>\n        </div>\n        <div class=\"col-sm-2\">\n          <c8y-form-group>\n            <div class=\"p-t-24\">\n              <button\n                *ngIf=\"crls.length > 1\"\n                class=\"btn btn-link hidden-xs hidden-sm\"\n                title=\"{{ 'Remove' | translate }}\"\n                type=\"button\"\n                (click)=\"removeCertificateRevocation(certificateRevocation)\"\n              >\n                <i\n                  class=\"text-danger\"\n                  c8yIcon=\"minus-circle\"\n                ></i>\n              </button>\n              <button\n                class=\"btn btn-link hidden-xs hidden-sm\"\n                title=\"{{ 'Add' | translate }}\"\n                type=\"button\"\n                (click)=\"addCertificateRevocation()\"\n                *ngIf=\"isLast\"\n              >\n                <i\n                  class=\"text-primary\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n              </button>\n\n              <button\n                *ngIf=\"crls.length > 1\"\n                class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n                title=\"{{ 'Remove' | translate }}\"\n                type=\"button\"\n                (click)=\"removeCertificateRevocation(certificateRevocation)\"\n              >\n                <i c8yIcon=\"minus-circle\"></i>\n                {{ 'Remove' | translate }}\n              </button>\n              <button\n                class=\"btn btn-primary btn-block btn-sm visible-xs visible-sm\"\n                title=\"{{ 'Add' | translate }}\"\n                type=\"button\"\n                (click)=\"addCertificateRevocation()\"\n                *ngIf=\"isLast\"\n              >\n                <i c8yIcon=\"plus-circle\"></i>\n                {{ 'Add' | translate }}\n              </button>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n      <div class=\"legend form-block center\">\n        {{ 'or' | translate }}\n      </div>\n      <div\n        class=\"legend form-block\"\n      >\n        {{ 'File upload' | translate }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          popover=\"{{ FILE_UPLOAD_POPOVER | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n        ></button>\n      </div>\n\n      <c8y-drop-area\n        class=\"drop-area-sm\"\n        [title]=\"'Upload CRL file (.csv format)' | translate\"\n        name=\"uploadCrlDropArea\"\n        [(ngModel)]=\"droppedFiles\"\n        [message]=\"'Upload CRL file (.csv format)' | translate\"\n        [loadingMessage]=\"'Uploading\u2026' | translate\"\n        [accept]=\"'.csv'\"\n        [maxAllowedFiles]=\"1\"\n      ></c8y-drop-area>\n      <p class=\"help-block has-info text-muted m-t-4\">\n        {{ 'CRL file content will override manual entries.' | translate }}\n      </p>\n\n      <button\n        class=\"btn btn-sm btn-default m-t-16\"\n        title=\"{{ 'Download template' | translate }}\"\n        type=\"button\"\n        (click)=\"downloadCrlTemplate()\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"template\"\n        ></i>\n        {{ 'Download template' | translate }}\n      </button>\n    </div>\n  </div>\n  <div class=\"card-footer separator\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Download CRL file' | translate }}\"\n      type=\"button\"\n      (click)=\"downloadCrl()\"\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"download\"\n      ></i>\n      {{ 'Download CRL file' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      (click)=\"save()\"\n      [disabled]=\"!(crlManualForm.form.valid || isListEmpty) || (isListEmpty && !isFileDropped)\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: function () { return [{ type: i2$1.CrlService }, { type: i2.AlertService }, { type: i2.ModalService }]; } });
+
+const trustedCertificatesRoutes$2 = [
+    {
+        path: 'trusted-certificates/settings',
+        component: CrlSettingsComponent,
+        pathMatch: 'full'
+    }
+];
+class CrlSettingsModule {
+}
+CrlSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CrlSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CrlSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: CrlSettingsModule, declarations: [CrlSettingsComponent, CrlCheckSettingsComponent], imports: [CoreModule,
+        CommonModule, i1.RouterModule, i5.BsDropdownModule, BsDatepickerModule,
+        PopoverModule] });
+CrlSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CrlSettingsModule, imports: [CoreModule,
+        CommonModule,
+        RouterModule.forChild(trustedCertificatesRoutes$2),
+        BsDropdownModule.forRoot(),
+        BsDatepickerModule,
+        PopoverModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CrlSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CrlSettingsComponent, CrlCheckSettingsComponent],
+                    exports: [],
+                    imports: [
+                        CoreModule,
+                        CommonModule,
+                        RouterModule.forChild(trustedCertificatesRoutes$2),
+                        BsDropdownModule.forRoot(),
+                        BsDatepickerModule,
+                        PopoverModule
+                    ]
+                }]
+        }] });
 
 const PRODUCT_EXPERIENCE = {
     EVENT: 'trustedCertificate',
@@ -111,14 +368,14 @@ class AddTrustedCertificateComponent {
         this.modal.hide();
     }
 }
-AddTrustedCertificateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AddTrustedCertificateComponent, deps: [{ token: i1.BsModalRef }, { token: i2.TrustedCertificateService }, { token: i2$1.AlertService }, { token: i2$1.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-AddTrustedCertificateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: AddTrustedCertificateComponent, selector: "c8y-add-trusted-certificate", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"certificate\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"addCertificateModalTitle\"\n      translate\n    >\n      Add trusted certificate\n    </div>\n  </div>\n  <form\n    #addTrustedCertificateForm=\"ngForm\"\n    (ngSubmit)=\"addTrustedCertificateForm.form.valid && fileIsUploaded && save()\"\n  >\n    <div class=\"modal-inner-scroll\">\n      <div\n        class=\"modal-body\"\n        id=\"addCertificateModalDescription\"\n      >\n        <c8y-form-group>\n          <label\n            for=\"certificateName\"\n            translate\n          >\n            Certificate name\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"certificateName\"\n            placeholder=\"{{ 'e.g. My certificate' | translate }}\"\n            name=\"certificateName\"\n            type=\"text\"\n            autocomplete=\"off\"\n            required\n            [(ngModel)]=\"trustedCertificate.name\"\n          />\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            for=\"certificate\"\n            translate\n          >\n            Certificate\n          </label>\n          <c8y-drop-area\n            class=\"drop-area-sm\"\n            [title]=\"'Paste the certificate in PEM format.' | translate\"\n            (dropped)=\"uploadFile($event)\"\n            [loadingMessage]=\"'Importing, please wait.' | translate\"\n            [maxAllowedFiles]=\"maxAllowedFiles\"\n          ></c8y-drop-area>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Auto registration' | translate }}\"\n          >\n            <input\n              id=\"autoRegistration\"\n              name=\"autoRegistration\"\n              type=\"checkbox\"\n              [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n            />\n            <span></span>\n            <span>{{ 'Auto registration' | translate }}</span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n        </c8y-form-group>\n        <button\n          class=\"btn\"\n          name=\"certificateStatus\"\n          type=\"button\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n        >\n          <span\n            title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n          >\n            {{ 'Disabled`trusted certificate status`' | translate }}\n          </span>\n          <span\n            title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n          >\n            {{ 'Enabled`trusted certificate status`' | translate }}\n          </span>\n        </button>\n      </div>\n    </div>\n    <div class=\"modal-footer\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"close()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        class=\"btn btn-primary\"\n        title=\"{{ 'Add certificate' | translate }}\"\n        type=\"submit\"\n        [disabled]=\"\n          addTrustedCertificateForm.form.invalid ||\n          addTrustedCertificateForm.form.pristine ||\n          !fileIsUploaded\n        \"\n      >\n        {{ 'Add certificate' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2$1.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "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" }] });
+AddTrustedCertificateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AddTrustedCertificateComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2$1.TrustedCertificateService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+AddTrustedCertificateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: AddTrustedCertificateComponent, selector: "c8y-add-trusted-certificate", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"certificate\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"addCertificateModalTitle\"\n      translate\n    >\n      Add trusted certificate\n    </div>\n  </div>\n  <form\n    #addTrustedCertificateForm=\"ngForm\"\n    (ngSubmit)=\"addTrustedCertificateForm.form.valid && fileIsUploaded && save()\"\n  >\n    <div class=\"modal-inner-scroll\">\n      <div\n        class=\"modal-body\"\n        id=\"addCertificateModalDescription\"\n      >\n        <c8y-form-group>\n          <label\n            for=\"certificateName\"\n            translate\n          >\n            Certificate name\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"certificateName\"\n            placeholder=\"{{ 'e.g. My certificate' | translate }}\"\n            name=\"certificateName\"\n            type=\"text\"\n            autocomplete=\"off\"\n            required\n            [(ngModel)]=\"trustedCertificate.name\"\n          />\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            for=\"certificate\"\n            translate\n          >\n            Certificate\n          </label>\n          <c8y-drop-area\n            class=\"drop-area-sm\"\n            [title]=\"'Paste the certificate in PEM format.' | translate\"\n            (dropped)=\"uploadFile($event)\"\n            [loadingMessage]=\"'Importing, please wait.' | translate\"\n            [maxAllowedFiles]=\"maxAllowedFiles\"\n          ></c8y-drop-area>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Auto registration' | translate }}\"\n          >\n            <input\n              id=\"autoRegistration\"\n              name=\"autoRegistration\"\n              type=\"checkbox\"\n              [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n            />\n            <span></span>\n            <span>{{ 'Auto registration' | translate }}</span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n        </c8y-form-group>\n        <button\n          class=\"btn\"\n          name=\"certificateStatus\"\n          type=\"button\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n        >\n          <span\n            title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n          >\n            {{ 'Disabled`trusted certificate status`' | translate }}\n          </span>\n          <span\n            title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n          >\n            {{ 'Enabled`trusted certificate status`' | translate }}\n          </span>\n        </button>\n      </div>\n    </div>\n    <div class=\"modal-footer\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"close()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        class=\"btn btn-primary\"\n        title=\"{{ 'Add certificate' | translate }}\"\n        type=\"submit\"\n        [disabled]=\"\n          addTrustedCertificateForm.form.invalid ||\n          addTrustedCertificateForm.form.pristine ||\n          !fileIsUploaded\n        \"\n      >\n        {{ 'Add certificate' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i5$2.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.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AddTrustedCertificateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-add-trusted-certificate', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"certificate\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"addCertificateModalTitle\"\n      translate\n    >\n      Add trusted certificate\n    </div>\n  </div>\n  <form\n    #addTrustedCertificateForm=\"ngForm\"\n    (ngSubmit)=\"addTrustedCertificateForm.form.valid && fileIsUploaded && save()\"\n  >\n    <div class=\"modal-inner-scroll\">\n      <div\n        class=\"modal-body\"\n        id=\"addCertificateModalDescription\"\n      >\n        <c8y-form-group>\n          <label\n            for=\"certificateName\"\n            translate\n          >\n            Certificate name\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"certificateName\"\n            placeholder=\"{{ 'e.g. My certificate' | translate }}\"\n            name=\"certificateName\"\n            type=\"text\"\n            autocomplete=\"off\"\n            required\n            [(ngModel)]=\"trustedCertificate.name\"\n          />\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            for=\"certificate\"\n            translate\n          >\n            Certificate\n          </label>\n          <c8y-drop-area\n            class=\"drop-area-sm\"\n            [title]=\"'Paste the certificate in PEM format.' | translate\"\n            (dropped)=\"uploadFile($event)\"\n            [loadingMessage]=\"'Importing, please wait.' | translate\"\n            [maxAllowedFiles]=\"maxAllowedFiles\"\n          ></c8y-drop-area>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Auto registration' | translate }}\"\n          >\n            <input\n              id=\"autoRegistration\"\n              name=\"autoRegistration\"\n              type=\"checkbox\"\n              [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n            />\n            <span></span>\n            <span>{{ 'Auto registration' | translate }}</span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n        </c8y-form-group>\n        <button\n          class=\"btn\"\n          name=\"certificateStatus\"\n          type=\"button\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n        >\n          <span\n            title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n          >\n            {{ 'Disabled`trusted certificate status`' | translate }}\n          </span>\n          <span\n            title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n          >\n            {{ 'Enabled`trusted certificate status`' | translate }}\n          </span>\n        </button>\n      </div>\n    </div>\n    <div class=\"modal-footer\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"close()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n\n      <button\n        class=\"btn btn-primary\"\n        title=\"{{ 'Add certificate' | translate }}\"\n        type=\"submit\"\n        [disabled]=\"\n          addTrustedCertificateForm.form.invalid ||\n          addTrustedCertificateForm.form.pristine ||\n          !fileIsUploaded\n        \"\n      >\n        {{ 'Add certificate' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.BsModalRef }, { type: i2.TrustedCertificateService }, { type: i2$1.AlertService }, { type: i2$1.GainsightService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i2$1.TrustedCertificateService }, { type: i2.AlertService }, { type: i2.GainsightService }]; } });
 
-class TrustedCertificatesComponent {
+class TrustedCertificateListComponent {
     constructor(bsModal, alertService, trustedCertificateService, modalService, translateService, clipboardService, gainsightService) {
         this.bsModal = bsModal;
         this.alertService = alertService;
@@ -281,101 +538,87 @@ class TrustedCertificatesComponent {
         reader.readAsText(input.files[0]);
     }
 }
-TrustedCertificatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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: "15.2.7", 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    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"certificate\"\n    label=\"{{ 'Trusted certificates' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\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    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"loadTrustedCertificates()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading | async }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/device-management/#trusted-certificates\"></c8y-help>\n\n<c8y-ui-empty-state\n  [icon]=\"'certificate'\"\n  [title]=\"'No trusted certificates to display.' | translate\"\n  [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n  *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\n    (click)=\"addTrustedCertificate()\"\n  >\n    {{ 'Add trusted certificate' | translate }}\n  </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n  <div\n    class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n    *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i\n          class=\"invisible\"\n          c8yIcon=\"certificate\"\n        ></i>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Certificate' | translate }} \"\n            >\n              {{ 'Certificate' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Status' | translate }}\"\n            >\n              {{ 'Status' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Algorithm' | translate }}\"\n            >\n              {{ 'Algorithm' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Expiration date' | translate }}\"\n            >\n              {{ 'Expiration date' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Auto registration' | translate }}\"\n            >\n              {{ 'Auto registration' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Proof of possession' | translate }}\"\n            >\n              {{ 'Proof of possession' | translate }}\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"c8y-list__item__actions\"></div>\n    </div>\n  </div>\n\n  <c8y-li\n    *c8yFor=\"\n      let trustedCertificate of trustedCertificates | async;\n      let i = index;\n      pipe: sortByExpirationDateAsc;\n      loadMore: 'none'\n    \"\n    #listItem\n    data-cy=\"c8y-trusted-certificates-list--item-block\"\n  >\n    <c8y-li-icon>\n      <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          title=\"{{ trustedCertificate.name }}\"\n          type=\"button\"\n          (click)=\"listItem.toggleCollapsed()\"\n        >\n          {{ trustedCertificate.name }}\n        </button>\n      </div>\n      <div class=\"col-2\">\n        <div class=\"visible-xs p-8\"></div>\n        <button\n          class=\"btn c8y-btn-checkbox--inline\"\n          name=\"certificateStatus\"\n          type=\"button\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n          (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n        >\n          <small\n            title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n          >\n            {{ 'Disabled`trusted certificate status`' | translate }}\n          </small>\n          <small\n            title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n          >\n            {{ 'Enabled`trusted certificate status`' | translate }}\n          </small>\n        </button>\n        <div class=\"visible-xs p-8\"></div>\n      </div>\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n        >\n          <span\n            class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n            translate\n          >\n            Algorithm\n          </span>\n          {{ trustedCertificate.algorithmName }}\n        </div>\n      </div>\n\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ 'Expiration date' | translate }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n        >\n          <span\n            class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n            translate\n          >\n            Expiration date\n          </span>\n          <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"calendar\"\n              *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"warning\"\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            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Enabled`auto registration`' | translate\n            }}\"\n            *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n          >\n            {{ 'Enabled`auto registration`' | translate }}\n          </span>\n          <span\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Disabled`auto registration`' | translate\n            }}\"\n            *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n          >\n            {{ 'Disabled`auto registration`' | translate }}\n          </span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            type=\"button\"\n          ></button>\n        </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            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Complete`proof of possession`' | translate\n            }}\"\n            *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n          >\n            <div class=\"icon-flex\">\n              <i\n                class=\"text-success\"\n                c8yIcon=\"success\"\n              ></i>\n              {{ 'Complete`proof of possession`' | translate }}\n            </div>\n          </span>\n          <span\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Incomplete`proof of possession`' | translate\n            }}\"\n            *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n          >\n            <div class=\"icon-flex\">\n              <i\n                class=\"text-warning\"\n                c8yIcon=\"warning\"\n              ></i>\n              {{ 'Incomplete`proof of possession`' | translate }}\n            </div>\n          </span>\n        </div>\n        <button\n          class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          placement=\"right\"\n          type=\"button\"\n          data-cy=\"c8y-trusted-certificate--delete\"\n          [delay]=\"500\"\n          (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n        >\n          <i c8yIcon=\"delete\"></i>\n        </button>\n      </div>\n    </c8y-li-body>\n\n    <c8y-li-collapse>\n      <div class=\"p-t-16 p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <c8y-form-group>\n              <label class=\"control-label\">\n                {{ 'Certificate name' | translate }}\n              </label>\n              <div class=\"input-group input-group-editable\">\n                <input\n                  class=\"form-control\"\n                  type=\"text\"\n                  required\n                  data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                  [(ngModel)]=\"trustedCertificate.name\"\n                />\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-primary\"\n                    title=\"{{ 'Update certificate name' | translate }}\"\n                    type=\"button\"\n                    (click)=\"\n                      updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                    \"\n                    [disabled]=\"!trustedCertificate.name\"\n                  >\n                    {{ 'Save' | translate }}\n                  </button>\n                </div>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-1\"></div>\n          <div class=\"col-md-7\">\n            <c8y-form-group>\n              <label\n                class=\"control-label\"\n                for=\"certInPemFormat\"\n                translate\n              >\n                Certificate\n              </label>\n              <textarea\n                class=\"form-control no-resize\"\n                id=\"certInPemFormat\"\n                name=\"certInPemFormat\"\n                type=\"text\"\n                rows=\"7\"\n                readonly\n                [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n              ></textarea>\n            </c8y-form-group>\n            <c8y-form-group>\n              <label\n                class=\"c8y-checkbox\"\n                title=\"{{ 'Auto registration' | translate }}\"\n              >\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                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  type=\"button\"\n                ></button>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <div\n              class=\"legend form-block\"\n              translate\n            >\n              Additional properties\n            </div>\n            <ul class=\"list-unstyled\">\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Algorithm' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.algorithmName }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Version' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.version }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Valid from' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.notBefore | c8yDate }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Issuer' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.issuer }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Expiration date' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.notAfter | c8yDate }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Serial number' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.serialNumber }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Subject`of a certificate`' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.subject }}\n                </span>\n              </li>\n            </ul>\n          </div>\n          <div class=\"col-md-1\"></div>\n          <div class=\"col-md-7\">\n            <div class=\"legend form-block\">\n              {{ 'Proof of possession' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                type=\"button\"\n              ></button>\n            </div>\n            <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n              <span\n                class=\"icon-flex\"\n                title=\"{{ 'Proof of possession' | translate }}:  {{\n                  'Complete`proof of possession`' | translate\n                }}\"\n              >\n                <i\n                  class=\"text-success\"\n                  c8yIcon=\"success\"\n                ></i>\n                {{ 'Complete`proof of possession`' | translate }}\n              </span>\n            </div>\n            <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n              <div class=\"row m-b-16\">\n                <div class=\"col-md-6\">\n                  <span\n                    class=\"icon-flex\"\n                    title=\"{{ 'Proof of possession' | translate }}:  {{\n                      'Incomplete`proof of possession`' | translate\n                    }}\"\n                  >\n                    <i\n                      class=\"text-warning\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Incomplete`proof of possession`' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-md-6 col-lg-6 text-right-md\">\n                  <span class=\"text-label-small m-r-4\">\n                    {{ 'Verification code expires/expired on' | translate }}\n                  </span>\n                  {{\n                    (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | 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\n                      class=\"control-label\"\n                      for=\"unsignedVerificationCode\"\n                      translate\n                    >\n                      Verification code\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      id=\"unsignedVerificationCode\"\n                      name=\"unsignedVerificationCode\"\n                      type=\"text\"\n                      rows=\"5\"\n                      readonly\n                      [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      title=\"{{ 'Regenerate verification code' | translate }}\"\n                      type=\"button\"\n                      (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n                    >\n                      {{ 'Regenerate`verification code`' | translate }}\n                    </button>\n\n                    <button\n                      class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                      [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                      tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                      placement=\"right\"\n                      type=\"button\"\n                      data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                      [delay]=\"500\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                    >\n                      <i c8yIcon=\"clipboard\"></i>\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      [attr.aria-label]=\"'Download as file' | translate\"\n                      tooltip=\"{{ 'Download as file' | translate }}\"\n                      type=\"button\"\n                      data-cy=\"c8y-trusted-certificates--download-as-file\"\n                      [delay]=\"500\"\n                      [disabled]=\"!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\n                      class=\"control-label\"\n                      for=\"signedVerificationCode\"\n                    >\n                      {{ 'Signed verification code' | translate }}\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n                        [outsideClick]=\"true\"\n                      ></button>\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      id=\"signedVerificationCode\"\n                      name=\"signedVerificationCode\"\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      title=\"{{ 'Verify signed verification code' | translate }}\"\n                      type=\"button\"\n                      (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n                      [disabled]=\"!trustedCertificate.signedVerificationCode\"\n                    >\n                      {{ 'Verify`signed verification code`' | translate }}\n                    </button>\n                    <button\n                      class=\"btn btn-sm btn-default m-l-auto\"\n                      [attr.aria-label]=\"'Upload file' | translate\"\n                      tooltip=\"{{ 'Upload file' | translate }}\"\n                      type=\"button\"\n                      [delay]=\"500\"\n                      (click)=\"fileInput.click()\"\n                    >\n                      <i c8yIcon=\"upload\"></i>\n                    </button>\n                    <input\n                      class=\"hidden\"\n                      type=\"file\"\n                      #fileInput\n                      (change)=\"onFileInput($event, trustedCertificate)\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </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", "inGroupPriority"] }, { 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: "15.2.7", ngImport: i0, type: TrustedCertificatesComponent, decorators: [{
+TrustedCertificateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificateListComponent, deps: [{ token: i1$1.BsModalService }, { token: i2.AlertService }, { token: i2$1.TrustedCertificateService }, { token: i2.ModalService }, { token: i4$1.TranslateService }, { token: i2.ClipboardService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+TrustedCertificateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TrustedCertificateListComponent, selector: "c8y-trusted-certificates", ngImport: i0, template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"certificate\"\n    label=\"{{ 'Trusted certificates' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\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    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"loadTrustedCertificates()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading | async }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/device-management/#trusted-certificates\"></c8y-help>\n\n<c8y-ui-empty-state\n  [icon]=\"'certificate'\"\n  [title]=\"'No trusted certificates to display.' | translate\"\n  [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n  *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\n    (click)=\"addTrustedCertificate()\"\n  >\n    {{ 'Add trusted certificate' | translate }}\n  </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n  <div\n    class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n    *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i\n          class=\"invisible\"\n          c8yIcon=\"certificate\"\n        ></i>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Certificate' | translate }} \"\n            >\n              {{ 'Certificate' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Status' | translate }}\"\n            >\n              {{ 'Status' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Algorithm' | translate }}\"\n            >\n              {{ 'Algorithm' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Expiration date' | translate }}\"\n            >\n              {{ 'Expiration date' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Auto registration' | translate }}\"\n            >\n              {{ 'Auto registration' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Proof of possession' | translate }}\"\n            >\n              {{ 'Proof of possession' | translate }}\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"c8y-list__item__actions\"></div>\n    </div>\n  </div>\n\n  <c8y-li\n    *c8yFor=\"\n      let trustedCertificate of trustedCertificates | async;\n      let i = index;\n      pipe: sortByExpirationDateAsc;\n      loadMore: 'none'\n    \"\n    #listItem\n    data-cy=\"c8y-trusted-certificates-list--item-block\"\n  >\n    <c8y-li-icon>\n      <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          title=\"{{ trustedCertificate.name }}\"\n          type=\"button\"\n          (click)=\"listItem.toggleCollapsed()\"\n        >\n          {{ trustedCertificate.name }}\n        </button>\n      </div>\n      <div class=\"col-2\">\n        <div class=\"visible-xs p-8\"></div>\n        <button\n          class=\"btn c8y-btn-checkbox--inline\"\n          name=\"certificateStatus\"\n          type=\"button\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n          (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n        >\n          <small\n            title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n          >\n            {{ 'Disabled`trusted certificate status`' | translate }}\n          </small>\n          <small\n            title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n          >\n            {{ 'Enabled`trusted certificate status`' | translate }}\n          </small>\n        </button>\n        <div class=\"visible-xs p-8\"></div>\n      </div>\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n        >\n          <span\n            class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n            translate\n          >\n            Algorithm\n          </span>\n          {{ trustedCertificate.algorithmName }}\n        </div>\n      </div>\n\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ 'Expiration date' | translate }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n        >\n          <span\n            class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n            translate\n          >\n            Expiration date\n          </span>\n          <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"calendar\"\n              *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"warning\"\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            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Enabled`auto registration`' | translate\n            }}\"\n            *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n          >\n            {{ 'Enabled`auto registration`' | translate }}\n          </span>\n          <span\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Disabled`auto registration`' | translate\n            }}\"\n            *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n          >\n            {{ 'Disabled`auto registration`' | translate }}\n          </span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            type=\"button\"\n          ></button>\n        </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            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Complete`proof of possession`' | translate\n            }}\"\n            *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n          >\n            <div class=\"icon-flex\">\n              <i\n                class=\"text-success\"\n                c8yIcon=\"success\"\n              ></i>\n              {{ 'Complete`proof of possession`' | translate }}\n            </div>\n          </span>\n          <span\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Incomplete`proof of possession`' | translate\n            }}\"\n            *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n          >\n            <div class=\"icon-flex\">\n              <i\n                class=\"text-warning\"\n                c8yIcon=\"warning\"\n              ></i>\n              {{ 'Incomplete`proof of possession`' | translate }}\n            </div>\n          </span>\n        </div>\n        <button\n          class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          placement=\"right\"\n          type=\"button\"\n          data-cy=\"c8y-trusted-certificate--delete\"\n          [delay]=\"500\"\n          (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n        >\n          <i c8yIcon=\"delete\"></i>\n        </button>\n      </div>\n    </c8y-li-body>\n\n    <c8y-li-collapse>\n      <div class=\"p-t-16 p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <c8y-form-group>\n              <label class=\"control-label\">\n                {{ 'Certificate name' | translate }}\n              </label>\n              <div class=\"input-group input-group-editable\">\n                <input\n                  class=\"form-control\"\n                  type=\"text\"\n                  required\n                  data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                  [(ngModel)]=\"trustedCertificate.name\"\n                />\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-primary\"\n                    title=\"{{ 'Update certificate name' | translate }}\"\n                    type=\"button\"\n                    (click)=\"\n                      updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                    \"\n                    [disabled]=\"!trustedCertificate.name\"\n                  >\n                    {{ 'Save' | translate }}\n                  </button>\n                </div>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-1\"></div>\n          <div class=\"col-md-7\">\n            <c8y-form-group>\n              <label\n                class=\"control-label\"\n                for=\"certInPemFormat\"\n                translate\n              >\n                Certificate\n              </label>\n              <textarea\n                class=\"form-control no-resize\"\n                id=\"certInPemFormat\"\n                name=\"certInPemFormat\"\n                type=\"text\"\n                rows=\"7\"\n                readonly\n                [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n              ></textarea>\n            </c8y-form-group>\n            <c8y-form-group>\n              <label\n                class=\"c8y-checkbox\"\n                title=\"{{ 'Auto registration' | translate }}\"\n              >\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                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  type=\"button\"\n                ></button>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <div\n              class=\"legend form-block\"\n              translate\n            >\n              Additional properties\n            </div>\n            <ul class=\"list-unstyled\">\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Algorithm' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.algorithmName }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Version' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.version }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Valid from' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.notBefore | c8yDate }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Issuer' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.issuer }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Expiration date' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.notAfter | c8yDate }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Serial number' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.serialNumber }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Subject`of a certificate`' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.subject }}\n                </span>\n              </li>\n            </ul>\n          </div>\n          <div class=\"col-md-1\"></div>\n          <div class=\"col-md-7\">\n            <div class=\"legend form-block\">\n              {{ 'Proof of possession' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                type=\"button\"\n              ></button>\n            </div>\n            <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n              <span\n                class=\"icon-flex\"\n                title=\"{{ 'Proof of possession' | translate }}:  {{\n                  'Complete`proof of possession`' | translate\n                }}\"\n              >\n                <i\n                  class=\"text-success\"\n                  c8yIcon=\"success\"\n                ></i>\n                {{ 'Complete`proof of possession`' | translate }}\n              </span>\n            </div>\n            <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n              <div class=\"row m-b-16\">\n                <div class=\"col-md-6\">\n                  <span\n                    class=\"icon-flex\"\n                    title=\"{{ 'Proof of possession' | translate }}:  {{\n                      'Incomplete`proof of possession`' | translate\n                    }}\"\n                  >\n                    <i\n                      class=\"text-warning\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Incomplete`proof of possession`' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-md-6 col-lg-6 text-right-md\">\n                  <span class=\"text-label-small m-r-4\">\n                    {{ 'Verification code expires/expired on' | translate }}\n                  </span>\n                  {{\n                    (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | 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\n                      class=\"control-label\"\n                      for=\"unsignedVerificationCode\"\n                      translate\n                    >\n                      Verification code\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      id=\"unsignedVerificationCode\"\n                      name=\"unsignedVerificationCode\"\n                      type=\"text\"\n                      rows=\"5\"\n                      readonly\n                      [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      title=\"{{ 'Regenerate verification code' | translate }}\"\n                      type=\"button\"\n                      (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n                    >\n                      {{ 'Regenerate`verification code`' | translate }}\n                    </button>\n\n                    <button\n                      class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                      [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                      tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                      placement=\"right\"\n                      type=\"button\"\n                      data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                      [delay]=\"500\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                    >\n                      <i c8yIcon=\"clipboard\"></i>\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      [attr.aria-label]=\"'Download as file' | translate\"\n                      tooltip=\"{{ 'Download as file' | translate }}\"\n                      type=\"button\"\n                      data-cy=\"c8y-trusted-certificates--download-as-file\"\n                      [delay]=\"500\"\n                      [disabled]=\"!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\n                      class=\"control-label\"\n                      for=\"signedVerificationCode\"\n                    >\n                      {{ 'Signed verification code' | translate }}\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n                        [outsideClick]=\"true\"\n                      ></button>\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      id=\"signedVerificationCode\"\n                      name=\"signedVerificationCode\"\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      title=\"{{ 'Verify signed verification code' | translate }}\"\n                      type=\"button\"\n                      (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n                      [disabled]=\"!trustedCertificate.signedVerificationCode\"\n                    >\n                      {{ 'Verify`signed verification code`' | translate }}\n                    </button>\n                    <button\n                      class=\"btn btn-sm btn-default m-l-auto\"\n                      [attr.aria-label]=\"'Upload file' | translate\"\n                      tooltip=\"{{ 'Upload file' | translate }}\"\n                      type=\"button\"\n                      [delay]=\"500\"\n                      (click)=\"fileInput.click()\"\n                    >\n                      <i c8yIcon=\"upload\"></i>\n                    </button>\n                    <input\n                      class=\"hidden\"\n                      type=\"file\"\n                      #fileInput\n                      (change)=\"onFileInput($event, trustedCertificate)\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </c8y-li-collapse>\n  </c8y-li>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: i2.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.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i2.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$2.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.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificateListComponent, 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    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"certificate\"\n    label=\"{{ 'Trusted certificates' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\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    title=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"loadTrustedCertificates()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading | async }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/device-management/#trusted-certificates\"></c8y-help>\n\n<c8y-ui-empty-state\n  [icon]=\"'certificate'\"\n  [title]=\"'No trusted certificates to display.' | translate\"\n  [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n  *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Add trusted certificate' | translate }}\"\n    type=\"button\"\n    (click)=\"addTrustedCertificate()\"\n  >\n    {{ 'Add trusted certificate' | translate }}\n  </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n  <div\n    class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n    *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i\n          class=\"invisible\"\n          c8yIcon=\"certificate\"\n        ></i>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"content-flex-60\">\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Certificate' | translate }} \"\n            >\n              {{ 'Certificate' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Status' | translate }}\"\n            >\n              {{ 'Status' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Algorithm' | translate }}\"\n            >\n              {{ 'Algorithm' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Expiration date' | translate }}\"\n            >\n              {{ 'Expiration date' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Auto registration' | translate }}\"\n            >\n              {{ 'Auto registration' | translate }}\n            </span>\n          </div>\n          <div class=\"col-2\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Proof of possession' | translate }}\"\n            >\n              {{ 'Proof of possession' | translate }}\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"c8y-list__item__actions\"></div>\n    </div>\n  </div>\n\n  <c8y-li\n    *c8yFor=\"\n      let trustedCertificate of trustedCertificates | async;\n      let i = index;\n      pipe: sortByExpirationDateAsc;\n      loadMore: 'none'\n    \"\n    #listItem\n    data-cy=\"c8y-trusted-certificates-list--item-block\"\n  >\n    <c8y-li-icon>\n      <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          title=\"{{ trustedCertificate.name }}\"\n          type=\"button\"\n          (click)=\"listItem.toggleCollapsed()\"\n        >\n          {{ trustedCertificate.name }}\n        </button>\n      </div>\n      <div class=\"col-2\">\n        <div class=\"visible-xs p-8\"></div>\n        <button\n          class=\"btn c8y-btn-checkbox--inline\"\n          name=\"certificateStatus\"\n          type=\"button\"\n          [(ngModel)]=\"trustedCertificate.status\"\n          btnCheckbox\n          btnCheckboxTrue=\"ENABLED\"\n          btnCheckboxFalse=\"DISABLED\"\n          (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n        >\n          <small\n            title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n          >\n            {{ 'Disabled`trusted certificate status`' | translate }}\n          </small>\n          <small\n            title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n            [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n          >\n            {{ 'Enabled`trusted certificate status`' | translate }}\n          </small>\n        </button>\n        <div class=\"visible-xs p-8\"></div>\n      </div>\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n        >\n          <span\n            class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n            translate\n          >\n            Algorithm\n          </span>\n          {{ trustedCertificate.algorithmName }}\n        </div>\n      </div>\n\n      <div class=\"col-2\">\n        <div\n          class=\"text-truncate\"\n          title=\"{{ 'Expiration date' | translate }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n        >\n          <span\n            class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n            translate\n          >\n            Expiration date\n          </span>\n          <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"calendar\"\n              *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n            ></i>\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"warning\"\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            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Enabled`auto registration`' | translate\n            }}\"\n            *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n          >\n            {{ 'Enabled`auto registration`' | translate }}\n          </span>\n          <span\n            title=\"{{ 'Auto registration' | translate }}:  {{\n              'Disabled`auto registration`' | translate\n            }}\"\n            *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n          >\n            {{ 'Disabled`auto registration`' | translate }}\n          </span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            type=\"button\"\n          ></button>\n        </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            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Complete`proof of possession`' | translate\n            }}\"\n            *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n          >\n            <div class=\"icon-flex\">\n              <i\n                class=\"text-success\"\n                c8yIcon=\"success\"\n              ></i>\n              {{ 'Complete`proof of possession`' | translate }}\n            </div>\n          </span>\n          <span\n            title=\"{{ 'Proof of possession' | translate }}:  {{\n              'Incomplete`proof of possession`' | translate\n            }}\"\n            *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n          >\n            <div class=\"icon-flex\">\n              <i\n                class=\"text-warning\"\n                c8yIcon=\"warning\"\n              ></i>\n              {{ 'Incomplete`proof of possession`' | translate }}\n            </div>\n          </span>\n        </div>\n        <button\n          class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          placement=\"right\"\n          type=\"button\"\n          data-cy=\"c8y-trusted-certificate--delete\"\n          [delay]=\"500\"\n          (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n        >\n          <i c8yIcon=\"delete\"></i>\n        </button>\n      </div>\n    </c8y-li-body>\n\n    <c8y-li-collapse>\n      <div class=\"p-t-16 p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <c8y-form-group>\n              <label class=\"control-label\">\n                {{ 'Certificate name' | translate }}\n              </label>\n              <div class=\"input-group input-group-editable\">\n                <input\n                  class=\"form-control\"\n                  type=\"text\"\n                  required\n                  data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                  [(ngModel)]=\"trustedCertificate.name\"\n                />\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-primary\"\n                    title=\"{{ 'Update certificate name' | translate }}\"\n                    type=\"button\"\n                    (click)=\"\n                      updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                    \"\n                    [disabled]=\"!trustedCertificate.name\"\n                  >\n                    {{ 'Save' | translate }}\n                  </button>\n                </div>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-1\"></div>\n          <div class=\"col-md-7\">\n            <c8y-form-group>\n              <label\n                class=\"control-label\"\n                for=\"certInPemFormat\"\n                translate\n              >\n                Certificate\n              </label>\n              <textarea\n                class=\"form-control no-resize\"\n                id=\"certInPemFormat\"\n                name=\"certInPemFormat\"\n                type=\"text\"\n                rows=\"7\"\n                readonly\n                [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n              ></textarea>\n            </c8y-form-group>\n            <c8y-form-group>\n              <label\n                class=\"c8y-checkbox\"\n                title=\"{{ 'Auto registration' | translate }}\"\n              >\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                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  type=\"button\"\n                ></button>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <div\n              class=\"legend form-block\"\n              translate\n            >\n              Additional properties\n            </div>\n            <ul class=\"list-unstyled\">\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Algorithm' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.algorithmName }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Version' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.version }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Valid from' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.notBefore | c8yDate }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Issuer' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.issuer }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Expiration date' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.notAfter | c8yDate }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Serial number' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.serialNumber }}\n                </span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                  {{ 'Subject`of a certificate`' | translate }}\n                </label>\n                <span class=\"m-l-auto text-break-word\">\n                  {{ trustedCertificate.subject }}\n                </span>\n              </li>\n            </ul>\n          </div>\n          <div class=\"col-md-1\"></div>\n          <div class=\"col-md-7\">\n            <div class=\"legend form-block\">\n              {{ 'Proof of possession' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                type=\"button\"\n              ></button>\n            </div>\n            <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n              <span\n                class=\"icon-flex\"\n                title=\"{{ 'Proof of possession' | translate }}:  {{\n                  'Complete`proof of possession`' | translate\n                }}\"\n              >\n                <i\n                  class=\"text-success\"\n                  c8yIcon=\"success\"\n                ></i>\n                {{ 'Complete`proof of possession`' | translate }}\n              </span>\n            </div>\n            <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n              <div class=\"row m-b-16\">\n                <div class=\"col-md-6\">\n                  <span\n                    class=\"icon-flex\"\n                    title=\"{{ 'Proof of possession' | translate }}:  {{\n                      'Incomplete`proof of possession`' | translate\n                    }}\"\n                  >\n                    <i\n                      class=\"text-warning\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Incomplete`proof of possession`' | translate }}\n                  </span>\n                </div>\n                <div class=\"col-md-6 col-lg-6 text-right-md\">\n                  <span class=\"text-label-small m-r-4\">\n                    {{ 'Verification code expires/expired on' | translate }}\n                  </span>\n                  {{\n                    (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | 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\n                      class=\"control-label\"\n                      for=\"unsignedVerificationCode\"\n                      translate\n                    >\n                      Verification code\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      id=\"unsignedVerificationCode\"\n                      name=\"unsignedVerificationCode\"\n                      type=\"text\"\n                      rows=\"5\"\n                      readonly\n                      [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      title=\"{{ 'Regenerate verification code' | translate }}\"\n                      type=\"button\"\n                      (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n                    >\n                      {{ 'Regenerate`verification code`' | translate }}\n                    </button>\n\n                    <button\n                      class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                      [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                      tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                      placement=\"right\"\n                      type=\"button\"\n                      data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                      [delay]=\"500\"\n                      [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n                      (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n                    >\n                      <i c8yIcon=\"clipboard\"></i>\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      [attr.aria-label]=\"'Download as file' | translate\"\n                      tooltip=\"{{ 'Download as file' | translate }}\"\n                      type=\"button\"\n                      data-cy=\"c8y-trusted-certificates--download-as-file\"\n                      [delay]=\"500\"\n                      [disabled]=\"!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\n                      class=\"control-label\"\n                      for=\"signedVerificationCode\"\n                    >\n                      {{ 'Signed verification code' | translate }}\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n                        [outsideClick]=\"true\"\n                      ></button>\n                    </label>\n                    <textarea\n                      class=\"form-control no-resize\"\n                      id=\"signedVerificationCode\"\n                      name=\"signedVerificationCode\"\n                      type=\"text\"\n                      rows=\"5\"\n                      [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n                    ></textarea>\n                  </c8y-form-group>\n                  <div class=\"d-flex\">\n                    <button\n                      class=\"btn btn-primary btn-sm\"\n                      title=\"{{ 'Verify signed verification code' | translate }}\"\n                      type=\"button\"\n                      (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n                      [disabled]=\"!trustedCertificate.signedVerificationCode\"\n                    >\n                      {{ 'Verify`signed verification code`' | translate }}\n                    </button>\n                    <button\n                      class=\"btn btn-sm btn-default m-l-auto\"\n                      [attr.aria-label]=\"'Upload file' | translate\"\n                      tooltip=\"{{ 'Upload file' | translate }}\"\n                      type=\"button\"\n                      [delay]=\"500\"\n                      (click)=\"fileInput.click()\"\n                    >\n                      <i c8yIcon=\"upload\"></i>\n                    </button>\n                    <input\n                      class=\"hidden\"\n                      type=\"file\"\n                      #fileInput\n                      (change)=\"onFileInput($event, trustedCertificate)\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </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 }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.BsModalService }, { type: i2.AlertService }, { type: i2$1.TrustedCertificateService }, { type: i2.ModalService }, { type: i4$1.TranslateService }, { type: i2.ClipboardService }, { type: i2.GainsightService }]; } });
 
-class TrustedCertificatesNavigationFactory {
-    constructor() {
-        this.navs = [];
-    }
-    get() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.navs.length === 0) {
-                this.navs.push(new NavigatorNode({
-                    label: gettext('Trusted certificates'),
-                    icon: 'certificate',
-                    path: '/trusted-certificates',
-                    parent: gettext('Management'),
-                    priority: 100
-                }));
-            }
-            return this.navs;
-        });
-    }
-}
-TrustedCertificatesNavigationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesNavigationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TrustedCertificatesNavigationFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesNavigationFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesNavigationFactory, decorators: [{
-            type: Injectable
-        }] });
-
-/* tslint:disable:max-line-length */
-const MESSAGES = {
-    '^Cannot find certificate with fingerprint (.+?).$': {
-        gettext: gettext('Could not find {{ fingerprint }} certificate.'),
-        placeholders: {
-            fingerprint: '$1'
-        }
-    },
-    '^Wrong proof of possession verification code used for tenant (.+?). Certificate (.+?), usage not granted.$': {
-        gettext: gettext('Could not confirm the ownership of {{ fingerprint }} certificate: invalid proof of possession verification code provided, sign verification code with private key.'),
-        placeholders: {
-            tenant: '$1',
-            fingerprint: '$2'
-        }
-    },
-    '^Proof of possession verification code used for tenant (.+?) expired. Certificate (.+?), usage not granted.': {
-        gettext: gettext('Could not confirm the ownership of {{ fingerprint }} certificate: proof of possession verification code has expired, generate a new code and try again.'),
-        placeholders: {
-            tenant: '$1',
-            fingerprint: '$2'
-        }
-    }
-};
-
-const trustedCertificatesRoutes = [
+const trustedCertificatesRoutes$1 = [
     {
-        path: 'trusted-certificates',
-        component: TrustedCertificatesComponent
+        path: 'trusted-certificates/certificates',
+        component: TrustedCertificateListComponent,
+        pathMatch: 'full'
     }
 ];
-class TrustedCertificatesModule {
+class TrustedCertificateListModule {
 }
-TrustedCertificatesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TrustedCertificatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesModule, declarations: [TrustedCertificatesComponent, AddTrustedCertificateComponent], imports: [CoreModule,
-        CommonModule, i1$1.RouterModule, i2$2.BsDropdownModule, TooltipModule,
+TrustedCertificateListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificateListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TrustedCertificateListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificateListModule, declarations: [TrustedCertificateListComponent, AddTrustedCertificateComponent], imports: [CoreModule,
+        CommonModule, i1.RouterModule, i5.BsDropdownModule, TooltipModule,
         ReactiveFormsModule,
         ButtonsModule,
         PopoverModule] });
-TrustedCertificatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesModule, providers: [hookNavigator(TrustedCertificatesNavigationFactory), hookPatternMessages(MESSAGES)], imports: [CoreModule,
+TrustedCertificateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificateListModule, imports: [CoreModule,
         CommonModule,
-        RouterModule.forChild(trustedCertificatesRoutes),
+        RouterModule.forChild(trustedCertificatesRoutes$1),
         BsDropdownModule.forRoot(),
         TooltipModule,
         ReactiveFormsModule,
         ButtonsModule,
         PopoverModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificateListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TrustedCertificatesComponent, AddTrustedCertificateComponent],
+                    declarations: [TrustedCertificateListComponent, AddTrustedCertificateComponent],
                     exports: [],
                     imports: [
                         CoreModule,
                         CommonModule,
-                        RouterModule.forChild(trustedCertificatesRoutes),
+                        RouterModule.forChild(trustedCertificatesRoutes$1),
                         BsDropdownModule.forRoot(),
                         TooltipModule,
                         ReactiveFormsModule,
                         ButtonsModule,
                         PopoverModule
+                    ]
+                }]
+        }] });
+
+const trustedCertificatesRoutes = [
+    {
+        path: 'trusted-certificates',
+        pathMatch: 'full',
+        redirectTo: 'trusted-certificates/certificates'
+    }
+];
+class TrustedCertificatesModule {
+}
+TrustedCertificatesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TrustedCertificatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesModule, imports: [i1.RouterModule, CrlSettingsModule,
+        TrustedCertificateListModule] });
+TrustedCertificatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesModule, providers: [
+        hookNavigator(TrustedCertificatesNavigationFactory),
+        hookPatternMessages(MESSAGES),
+        hookTab(TabsFactory)
+    ], imports: [RouterModule.forChild(trustedCertificatesRoutes),
+        CrlSettingsModule,
+        TrustedCertificateListModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TrustedCertificatesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [],
+                    imports: [
+                        RouterModule.forChild(trustedCertificatesRoutes),
+                        CrlSettingsModule,
+                        TrustedCertificateListModule
                     ],
-                    entryComponents: [TrustedCertificatesComponent, AddTrustedCertificateComponent],
-                    providers: [hookNavigator(TrustedCertificatesNavigationFactory), hookPatternMessages(MESSAGES)]
+                    providers: [
+                        hookNavigator(TrustedCertificatesNavigationFactory),
+                        hookPatternMessages(MESSAGES),
+                        hookTab(TabsFactory)
+                    ]
                 }]
         }] });
 
@@ -383,5 +626,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddTrustedCertificateComponent, TrustedCertificatesComponent, TrustedCertificatesModule, TrustedCertificatesNavigationFactory };
+export { AddTrustedCertificateComponent, TrustedCertificateListComponent, TrustedCertificatesModule, TrustedCertificatesNavigationFactory };
 //# sourceMappingURL=c8y-ngx-components-trusted-certificates.mjs.map