@c8y/ngx-components 1018.503.23 → 1018.503.26

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

@@ -1,27 +1,268 @@
 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/client';
-import * as i4$1 from '@ngx-translate/core';
+import * as i2 from '@c8y/ngx-components';
+import { NavigatorNode, gettext, Status, CoreModule, CommonModule, hookNavigator, hookPatternMessages, hookTab } from '@c8y/ngx-components';
+import * as i5$1 from 'ngx-bootstrap/datepicker';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { pull, isEmpty, assign } from 'lodash-es';
+import * as i2$1 from '@c8y/client';
 import { saveAs } from 'file-saver';
-import { assign } from 'lodash-es';
-import * as i1 from 'ngx-bootstrap/modal';
-import { BehaviorSubject, pipe } from 'rxjs';
-import { tap, switchMap } from 'rxjs/operators';
+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$1 from '@angular/common';
+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 * as i4$1 from '@ngx-translate/core';
+import { BehaviorSubject, pipe } from 'rxjs';
+import { tap, switchMap } from 'rxjs/operators';
 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 = [];
+    }
+    async get() {
+        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 };
+    }
+    async ngOnInit() {
+        this.crlCheck = {
+            offline: (await this.optionsService.getTenantOption('configuration', 'crl.offline.check.enabled', false)),
+            online: (await this.optionsService.getTenantOption('configuration', 'crl.online.check.enabled', false))
+        };
+    }
+    async updateTenantOption(tenantOption) {
+        try {
+            await 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.');
+    }
+    async downloadCrl() {
+        let arrayBuffer;
+        try {
+            const res = await this.crlService.downloadCrlFile();
+            arrayBuffer = await 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();
+        }
+    }
+    async save() {
+        try {
+            await this.confirm();
+            await this.saveCrls();
+            await this.uploadCrlFile();
+            await 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]);
+    }
+    async confirm() {
+        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?');
+        await this.modalService.confirm(gettext('Update certificate revocation list'), body, status, {
+            ok: gettext('Update')
+        });
+    }
+    clearSavedData() {
+        this.droppedFiles = [];
+        this.crls = [this.getEmptyCertificateRevocation()];
+    }
+    async saveCrls() {
+        if (!this.isListEmpty) {
+            await this.crlService.uploadCrls(this.crls);
+        }
+    }
+    async uploadCrlFile() {
+        if (this.isFileDropped) {
+            await 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',
@@ -108,14 +349,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;
@@ -271,99 +512,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 = [];
-    }
-    async get() {
-        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)
+                    ]
                 }]
         }] });
 
@@ -371,5 +600,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