@c8y/ngx-components 1023.17.6 → 1023.17.11

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

@@ -40,10 +40,10 @@ class TrustedCertificatesGuard {
             Permissions.ROLE_TENANT_MANAGEMENT_ADMIN
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesGuard, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesGuard, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesGuard, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -66,10 +66,10 @@ class TrustedCertificatesNavigationFactory {
         }
         return this.navs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesNavigationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesNavigationFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesNavigationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesNavigationFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesNavigationFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesNavigationFactory, decorators: [{
             type: Injectable
         }] });
 
@@ -129,10 +129,10 @@ class TabsFactory {
         }
         return tabs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabsFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabsFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabsFactory, decorators: [{
             type: Injectable
         }] });
 
@@ -158,10 +158,10 @@ class CrlCheckSettingsComponent {
             this.alertService.addServerFailure(er);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrlCheckSettingsComponent, deps: [{ token: i2.OptionsService }, { token: i2$1.TenantOptionsService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CrlCheckSettingsComponent, isStandalone: true, 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: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrlCheckSettingsComponent, deps: [{ token: i2.OptionsService }, { token: i2$1.TenantOptionsService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CrlCheckSettingsComponent, isStandalone: true, 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: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrlCheckSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrlCheckSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-crl-check-settings', imports: [
                         ActionBarItemComponent,
@@ -267,10 +267,10 @@ class CrlSettingsComponent {
             serialNumberInHex: ''
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrlSettingsComponent, deps: [{ token: i2$1.CrlService }, { token: i2.AlertService }, { token: i2.ModalService }, { token: TrustedCertificatesGuard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CrlSettingsComponent, isStandalone: true, selector: "c8y-crl-settings", ngImport: i0, template: "<div *ngIf=\"(hasReadRole$ | async) || (hasAdminRole$ | async)\">\n  <c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      icon=\"c8y-management\"\n      label=\"{{ 'Management' | translate }}\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      icon=\"certificate\"\n      label=\"{{ 'Trusted certificates' | translate }}\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n\n  <c8y-crl-check-settings></c8y-crl-check-settings>\n\n  <c8y-help\n    [icon]=\"'settings'\"\n    src=\"/docs/device-certificate-authentication/managing-trusted-certificate-settings/#managing-trusted-certificate-settings\"\n  ></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        {{ 'Offline configuration of Certificate Revocation List (CRL)' | translate }}\n      </div>\n    </div>\n    <div class=\"inner-scroll\">\n      <div class=\"card-block\">\n        <div class=\"legend form-block\">\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          data-cy=\"c8y-row-grid--new-row\"\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=\"colonedHexNumber\"\n                [disabled]=\"!(hasAdminRole$ | async)\"\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                [disabled]=\"!(hasAdminRole$ | async)\"\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                  class=\"btn btn-link hidden-xs hidden-sm\"\n                  title=\"{{ 'Remove' | translate }}\"\n                  type=\"button\"\n                  *ngIf=\"crls.length > 1\"\n                  (click)=\"removeCertificateRevocation(certificateRevocation)\"\n                  [disabled]=\"!(hasAdminRole$ | async)\"\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                  [disabled]=\"!(hasAdminRole$ | async)\"\n                  *ngIf=\"isLast\"\n                >\n                  <i\n                    class=\"text-primary\"\n                    c8yIcon=\"plus-circle\"\n                  ></i>\n                </button>\n\n                <button\n                  class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n                  title=\"{{ 'Remove' | translate }}\"\n                  type=\"button\"\n                  *ngIf=\"crls.length > 1\"\n                  (click)=\"removeCertificateRevocation(certificateRevocation)\"\n                  [disabled]=\"!(hasAdminRole$ | async)\"\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                  [disabled]=\"!(hasAdminRole$ | async)\"\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 class=\"legend form-block\">\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          [disabled]=\"!(hasAdminRole$ | async)\"\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]=\"\n          !(hasAdminRole$ | async) ||\n          !(crlManualForm.form.valid || isListEmpty) ||\n          (isListEmpty && !isFileDropped)\n        \"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: CrlCheckSettingsComponent, selector: "c8y-crl-check-settings" }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrlSettingsComponent, deps: [{ token: i2$1.CrlService }, { token: i2.AlertService }, { token: i2.ModalService }, { token: TrustedCertificatesGuard }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CrlSettingsComponent, isStandalone: true, selector: "c8y-crl-settings", ngImport: i0, template: "<div *ngIf=\"(hasReadRole$ | async) || (hasAdminRole$ | async)\">\n  <c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      icon=\"c8y-management\"\n      label=\"{{ 'Management' | translate }}\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      icon=\"certificate\"\n      label=\"{{ 'Trusted certificates' | translate }}\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n\n  <c8y-crl-check-settings></c8y-crl-check-settings>\n\n  <c8y-help\n    [icon]=\"'settings'\"\n    src=\"/docs/device-certificate-authentication/managing-trusted-certificate-settings/#managing-trusted-certificate-settings\"\n  ></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        {{ 'Offline configuration of Certificate Revocation List (CRL)' | translate }}\n      </div>\n    </div>\n    <div class=\"inner-scroll\">\n      <div class=\"card-block\">\n        <div class=\"legend form-block\">\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          data-cy=\"c8y-row-grid--new-row\"\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=\"colonedHexNumber\"\n                [disabled]=\"!(hasAdminRole$ | async)\"\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                [disabled]=\"!(hasAdminRole$ | async)\"\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                  class=\"btn btn-link hidden-xs hidden-sm\"\n                  title=\"{{ 'Remove' | translate }}\"\n                  type=\"button\"\n                  *ngIf=\"crls.length > 1\"\n                  (click)=\"removeCertificateRevocation(certificateRevocation)\"\n                  [disabled]=\"!(hasAdminRole$ | async)\"\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                  [disabled]=\"!(hasAdminRole$ | async)\"\n                  *ngIf=\"isLast\"\n                >\n                  <i\n                    class=\"text-primary\"\n                    c8yIcon=\"plus-circle\"\n                  ></i>\n                </button>\n\n                <button\n                  class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n                  title=\"{{ 'Remove' | translate }}\"\n                  type=\"button\"\n                  *ngIf=\"crls.length > 1\"\n                  (click)=\"removeCertificateRevocation(certificateRevocation)\"\n                  [disabled]=\"!(hasAdminRole$ | async)\"\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                  [disabled]=\"!(hasAdminRole$ | async)\"\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 class=\"legend form-block\">\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          [disabled]=\"!(hasAdminRole$ | async)\"\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]=\"\n          !(hasAdminRole$ | async) ||\n          !(crlManualForm.form.valid || isListEmpty) ||\n          (isListEmpty && !isFileDropped)\n        \"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: CrlCheckSettingsComponent, selector: "c8y-crl-check-settings" }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrlSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrlSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-crl-settings', imports: [
                         TitleComponent,
@@ -303,13 +303,13 @@ const trustedCertificatesSettingsRoutes = [
     }
 ];
 class CrlSettingsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrlSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CrlSettingsModule, imports: [CoreModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrlSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: CrlSettingsModule, imports: [CoreModule,
             CommonModule, i1.RouterModule, i2$2.BsDropdownModule, BsDatepickerModule,
             PopoverModule,
             CrlSettingsComponent,
             CrlCheckSettingsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrlSettingsModule, imports: [CoreModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrlSettingsModule, imports: [CoreModule,
             CommonModule,
             RouterModule.forChild(trustedCertificatesSettingsRoutes),
             BsDropdownModule.forRoot(),
@@ -318,7 +318,7 @@ class CrlSettingsModule {
             CrlSettingsComponent,
             CrlCheckSettingsComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrlSettingsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrlSettingsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [],
@@ -421,10 +421,10 @@ class AddTrustedCertificateComponent {
         this._cancel();
         this.modal.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddTrustedCertificateComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2$1.TrustedCertificateService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AddTrustedCertificateComponent, isStandalone: true, 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { 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: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: 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: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddTrustedCertificateComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2$1.TrustedCertificateService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AddTrustedCertificateComponent, isStandalone: true, 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { 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: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: 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: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddTrustedCertificateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddTrustedCertificateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-add-trusted-certificate', imports: [
                         IconDirective,
@@ -675,10 +675,10 @@ class TrustedCertificateListComponent {
     async checkCertificateAuthorityFeature() {
         this.certificateAuthorityFeatureEnabled = await firstValueFrom(this.featureCacheService.getFeatureState('certificate-authority'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificateListComponent, deps: [{ token: i1$1.BsModalService }, { token: i2.AlertService }, { token: i2$1.TrustedCertificateService }, { token: i2.ModalService }, { token: i4$1.TranslateService }, { token: i2.ClipboardService }, { token: i2.GainsightService }, { token: i2$1.SystemOptionsService }, { token: i2.FeatureCacheService }, { token: TrustedCertificatesGuard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TrustedCertificateListComponent, isStandalone: true, selector: "c8y-trusted-certificates", ngImport: i0, template: "<div *ngIf=\"(hasReadRole$ | async) || (hasAdminRole$ | async)\">\n  <c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      icon=\"c8y-management\"\n      label=\"{{ 'Management' | translate }}\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      icon=\"certificate\"\n      label=\"{{ 'Trusted certificates' | translate }}\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    *ngIf=\"certificateAuthorityFeatureEnabled\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add CA certificate' | translate }}\"\n      type=\"button\"\n      [disabled]=\"!(hasAdminRole$ | async) || certificateAuthorityExists\"\n      (click)=\"addCACertificate()\"\n    >\n      <i c8yIcon=\"contract\"></i>\n      {{ 'Add CA certificate' | translate }}\n    </button>\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections. Only one certificate is allowed, which is why the button is disabled.'\n          | translate\n      }}\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      type=\"button\"\n      *ngIf=\"certificateAuthorityExists\"\n    ></button>\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections.'\n          | translate\n      }}\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      type=\"button\"\n      *ngIf=\"!certificateAuthorityExists\"\n    ></button>\n  </c8y-action-bar-item>\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      [disabled]=\"!(hasAdminRole$ | async)\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add trusted certificate' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item [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\n    src=\"/docs/device-certificate-authentication/managing-trusted-certificates/#managing-trusted-certificates\"\n  ></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        <button\n          class=\"btn-clean\"\n          attr.aria-label=\"{{ 'Certificate' | translate }}\"\n          tooltip=\"{{ 'Certificate' | translate }}\"\n          type=\"button\"\n          [delay]=\"500\"\n          *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n        >\n          <i c8yIcon=\"certificate\"></i>\n        </button>\n        <button\n          class=\"btn-clean\"\n          attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n          tooltip=\"{{ 'CA certificate' | translate }}\"\n          type=\"button\"\n          [delay]=\"500\"\n          *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n        >\n          <i c8yIcon=\"contract\"></i>\n        </button>\n      </c8y-li-icon>\n\n      <c8y-li-body class=\"content-flex-60\">\n        <div class=\"col-2\">\n          <button\n            class=\"btn-clean text-truncate\"\n            title=\"{{ trustedCertificate.name }}\"\n            type=\"button\"\n            (click)=\"listItem.toggleCollapsed()\"\n          >\n            {{ trustedCertificate.name }}\n          </button>\n        </div>\n        <div class=\"col-2\">\n          <div class=\"visible-xs p-8\"></div>\n          <button\n            class=\"btn c8y-btn-checkbox--inline\"\n            name=\"certificateStatus\"\n            type=\"button\"\n            [(ngModel)]=\"trustedCertificate.status\"\n            btnCheckbox\n            btnCheckboxTrue=\"ENABLED\"\n            btnCheckboxFalse=\"DISABLED\"\n            (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n            [disabled]=\"!(hasAdminRole$ | async)\"\n            [ngClass]=\"{\n              disabled: !(hasAdminRole$ | async)\n            }\"\n          >\n            <small\n              title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n              [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n            >\n              {{ 'Disabled`trusted certificate status`' | translate }}\n            </small>\n            <small\n              title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n              [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n            >\n              {{ 'Enabled`trusted certificate status`' | translate }}\n            </small>\n          </button>\n          <div class=\"visible-xs p-8\"></div>\n        </div>\n        <div class=\"col-2\">\n          <div\n            class=\"text-truncate\"\n            title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n          >\n            <span\n              class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n              translate\n            >\n              Algorithm\n            </span>\n            {{ trustedCertificate.algorithmName }}\n          </div>\n        </div>\n\n        <div class=\"col-2\">\n          <div\n            class=\"text-truncate\"\n            title=\"{{ 'Expiration date' | translate }}: {{ 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            @let expirationHighlight = getExpirationHighlight(trustedCertificate);\n            <span>\n              <small\n                [attr.title]=\"expirationHighlight?.tooltipText\"\n                [ngClass]=\"expirationHighlight?.textClass\"\n              >\n                <ng-container *ngIf=\"expirationHighlight?.expired; else notExpiredYet\">\n                  <del>\n                    <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                  </del>\n                </ng-container>\n                <ng-template #notExpiredYet>\n                  <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                </ng-template>\n                <ng-template #expirationDateTpl>\n                  <i\n                    class=\"m-r-4\"\n                    c8yIcon=\"{{ expirationHighlight?.icon }}\"\n                    *ngIf=\"expirationHighlight?.icon\"\n                  ></i>\n                  <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n                </ng-template>\n              </small>\n              <button\n                class=\"btn btn-link btn-icon\"\n                title=\"{{ 'Renew certificate' | translate }}\"\n                type=\"button\"\n                *ngIf=\"expirationHighlight?.renewable\"\n                (click)=\"renewCertificate()\"\n              >\n                <i c8yIcon=\"refresh\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n        <div class=\"col-2\">\n          <div class=\"text-truncate\">\n            <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n              {{ 'Auto registration' | translate }}\n            </span>\n            <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/A' | translate }}\"\n              *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n            >\n              {{ 'N/A' | translate }}\n            </span>\n            <span *ngIf=\"!trustedCertificate.tenantCertificateAuthority\">\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            </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            [disabled]=\"!(hasAdminRole$ | async)\"\n          >\n            <i c8yIcon=\"delete\"></i>\n          </button>\n        </div>\n      </c8y-li-body>\n\n      <c8y-li-collapse>\n        <div class=\"p-t-16 p-b-16\">\n          <div class=\"row\">\n            <div class=\"col-md-4\">\n              <c8y-form-group>\n                <label class=\"control-label\">\n                  {{ 'Certificate name' | translate }}\n                </label>\n                <div class=\"input-group input-group-editable\">\n                  <input\n                    class=\"form-control\"\n                    type=\"text\"\n                    required\n                    data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                    [(ngModel)]=\"trustedCertificate.name\"\n                    [disabled]=\"!(hasAdminRole$ | async)\"\n                  />\n                  <span></span>\n                  <div class=\"input-group-btn\">\n                    <button\n                      class=\"btn btn-primary\"\n                      title=\"{{ 'Update certificate name' | translate }}\"\n                      type=\"button\"\n                      (click)=\"\n                        updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                      \"\n                      [disabled]=\"!trustedCertificate.name\"\n                    >\n                      {{ 'Save' | translate }}\n                    </button>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </div>\n            <div class=\"col-md-1\"></div>\n            <div class=\"col-md-7\">\n              <c8y-form-group>\n                <label\n                  class=\"control-label\"\n                  for=\"certInPemFormat\"\n                  translate\n                >\n                  Certificate\n                </label>\n                <textarea\n                  class=\"form-control no-resize\"\n                  id=\"certInPemFormat\"\n                  name=\"certInPemFormat\"\n                  type=\"text\"\n                  rows=\"7\"\n                  readonly\n                  [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n                ></textarea>\n              </c8y-form-group>\n              <c8y-form-group>\n                <label\n                  class=\"c8y-checkbox\"\n                  title=\"{{ 'Auto registration' | translate }}\"\n                  [ngClass]=\"{\n                    disabled: !(hasAdminRole$ | async)\n                  }\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                    (ngModelChange)=\"\n                      updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                    \"\n                    [disabled]=\"!(hasAdminRole$ | async)\"\n                  />\n                  <span></span>\n                  <span>{{ 'Auto registration' | translate }}</span>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    type=\"button\"\n                  ></button>\n                </label>\n              </c8y-form-group>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-4\">\n              <div\n                class=\"legend form-block\"\n                translate\n              >\n                Additional properties\n              </div>\n              <ul class=\"list-unstyled\">\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Algorithm' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.algorithmName }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Version' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.version }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Valid from' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.notBefore | c8yDate }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Issuer' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.issuer }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Expiration date' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.notAfter | c8yDate }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Serial number' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.serialNumber }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Subject`of a certificate`' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.subject }}\n                  </span>\n                </li>\n              </ul>\n            </div>\n            <div class=\"col-md-1\"></div>\n            <div\n              class=\"col-md-7\"\n              *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n            >\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                        [disabled]=\"!(hasAdminRole$ | async)\"\n                      >\n                        {{ 'Regenerate`verification code`' | translate }}\n                      </button>\n\n                      <button\n                        class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                        [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                        tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                        placement=\"right\"\n                        type=\"button\"\n                        data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                        [delay]=\"500\"\n                        [disabled]=\"!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                        [disabled]=\"!(hasAdminRole$ | async)\"\n                      >\n                        <i c8yIcon=\"upload\"></i>\n                      </button>\n                      <input\n                        class=\"hidden\"\n                        type=\"file\"\n                        #fileInput\n                        (change)=\"onFileInput($event, trustedCertificate)\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </c8y-li-collapse>\n    </c8y-li>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificateListComponent, deps: [{ token: i1$1.BsModalService }, { token: i2.AlertService }, { token: i2$1.TrustedCertificateService }, { token: i2.ModalService }, { token: i4$1.TranslateService }, { token: i2.ClipboardService }, { token: i2.GainsightService }, { token: i2$1.SystemOptionsService }, { token: i2.FeatureCacheService }, { token: TrustedCertificatesGuard }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TrustedCertificateListComponent, isStandalone: true, selector: "c8y-trusted-certificates", ngImport: i0, template: "<div *ngIf=\"(hasReadRole$ | async) || (hasAdminRole$ | async)\">\n  <c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      icon=\"c8y-management\"\n      label=\"{{ 'Management' | translate }}\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      icon=\"certificate\"\n      label=\"{{ 'Trusted certificates' | translate }}\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    *ngIf=\"certificateAuthorityFeatureEnabled\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add CA certificate' | translate }}\"\n      type=\"button\"\n      [disabled]=\"!(hasAdminRole$ | async) || certificateAuthorityExists\"\n      (click)=\"addCACertificate()\"\n    >\n      <i c8yIcon=\"contract\"></i>\n      {{ 'Add CA certificate' | translate }}\n    </button>\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections. Only one certificate is allowed, which is why the button is disabled.'\n          | translate\n      }}\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      type=\"button\"\n      *ngIf=\"certificateAuthorityExists\"\n    ></button>\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections.'\n          | translate\n      }}\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      type=\"button\"\n      *ngIf=\"!certificateAuthorityExists\"\n    ></button>\n  </c8y-action-bar-item>\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      [disabled]=\"!(hasAdminRole$ | async)\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add trusted certificate' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item [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\n    src=\"/docs/device-certificate-authentication/managing-trusted-certificates/#managing-trusted-certificates\"\n  ></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        <button\n          class=\"btn-clean\"\n          attr.aria-label=\"{{ 'Certificate' | translate }}\"\n          tooltip=\"{{ 'Certificate' | translate }}\"\n          type=\"button\"\n          [delay]=\"500\"\n          *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n        >\n          <i c8yIcon=\"certificate\"></i>\n        </button>\n        <button\n          class=\"btn-clean\"\n          attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n          tooltip=\"{{ 'CA certificate' | translate }}\"\n          type=\"button\"\n          [delay]=\"500\"\n          *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n        >\n          <i c8yIcon=\"contract\"></i>\n        </button>\n      </c8y-li-icon>\n\n      <c8y-li-body class=\"content-flex-60\">\n        <div class=\"col-2\">\n          <button\n            class=\"btn-clean text-truncate\"\n            title=\"{{ trustedCertificate.name }}\"\n            type=\"button\"\n            (click)=\"listItem.toggleCollapsed()\"\n          >\n            {{ trustedCertificate.name }}\n          </button>\n        </div>\n        <div class=\"col-2\">\n          <div class=\"visible-xs p-8\"></div>\n          <button\n            class=\"btn c8y-btn-checkbox--inline\"\n            name=\"certificateStatus\"\n            type=\"button\"\n            [(ngModel)]=\"trustedCertificate.status\"\n            btnCheckbox\n            btnCheckboxTrue=\"ENABLED\"\n            btnCheckboxFalse=\"DISABLED\"\n            (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n            [disabled]=\"!(hasAdminRole$ | async)\"\n            [ngClass]=\"{\n              disabled: !(hasAdminRole$ | async)\n            }\"\n          >\n            <small\n              title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n              [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n            >\n              {{ 'Disabled`trusted certificate status`' | translate }}\n            </small>\n            <small\n              title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n              [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n            >\n              {{ 'Enabled`trusted certificate status`' | translate }}\n            </small>\n          </button>\n          <div class=\"visible-xs p-8\"></div>\n        </div>\n        <div class=\"col-2\">\n          <div\n            class=\"text-truncate\"\n            title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n          >\n            <span\n              class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n              translate\n            >\n              Algorithm\n            </span>\n            {{ trustedCertificate.algorithmName }}\n          </div>\n        </div>\n\n        <div class=\"col-2\">\n          <div\n            class=\"text-truncate\"\n            title=\"{{ 'Expiration date' | translate }}: {{ 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            @let expirationHighlight = getExpirationHighlight(trustedCertificate);\n            <span>\n              <small\n                [attr.title]=\"expirationHighlight?.tooltipText\"\n                [ngClass]=\"expirationHighlight?.textClass\"\n              >\n                <ng-container *ngIf=\"expirationHighlight?.expired; else notExpiredYet\">\n                  <del>\n                    <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                  </del>\n                </ng-container>\n                <ng-template #notExpiredYet>\n                  <ng-container *ngTemplateOutlet=\"expirationDateTpl\"></ng-container>\n                </ng-template>\n                <ng-template #expirationDateTpl>\n                  <i\n                    class=\"m-r-4\"\n                    c8yIcon=\"{{ expirationHighlight?.icon }}\"\n                    *ngIf=\"expirationHighlight?.icon\"\n                  ></i>\n                  <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n                </ng-template>\n              </small>\n              <button\n                class=\"btn btn-link btn-icon\"\n                title=\"{{ 'Renew certificate' | translate }}\"\n                type=\"button\"\n                *ngIf=\"expirationHighlight?.renewable\"\n                (click)=\"renewCertificate()\"\n              >\n                <i c8yIcon=\"refresh\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n        <div class=\"col-2\">\n          <div class=\"text-truncate\">\n            <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n              {{ 'Auto registration' | translate }}\n            </span>\n            <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/A' | translate }}\"\n              *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n            >\n              {{ 'N/A' | translate }}\n            </span>\n            <span *ngIf=\"!trustedCertificate.tenantCertificateAuthority\">\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            </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            [disabled]=\"!(hasAdminRole$ | async)\"\n          >\n            <i c8yIcon=\"delete\"></i>\n          </button>\n        </div>\n      </c8y-li-body>\n\n      <c8y-li-collapse>\n        <div class=\"p-t-16 p-b-16\">\n          <div class=\"row\">\n            <div class=\"col-md-4\">\n              <c8y-form-group>\n                <label class=\"control-label\">\n                  {{ 'Certificate name' | translate }}\n                </label>\n                <div class=\"input-group input-group-editable\">\n                  <input\n                    class=\"form-control\"\n                    type=\"text\"\n                    required\n                    data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n                    [(ngModel)]=\"trustedCertificate.name\"\n                    [disabled]=\"!(hasAdminRole$ | async)\"\n                  />\n                  <span></span>\n                  <div class=\"input-group-btn\">\n                    <button\n                      class=\"btn btn-primary\"\n                      title=\"{{ 'Update certificate name' | translate }}\"\n                      type=\"button\"\n                      (click)=\"\n                        updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n                      \"\n                      [disabled]=\"!trustedCertificate.name\"\n                    >\n                      {{ 'Save' | translate }}\n                    </button>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </div>\n            <div class=\"col-md-1\"></div>\n            <div class=\"col-md-7\">\n              <c8y-form-group>\n                <label\n                  class=\"control-label\"\n                  for=\"certInPemFormat\"\n                  translate\n                >\n                  Certificate\n                </label>\n                <textarea\n                  class=\"form-control no-resize\"\n                  id=\"certInPemFormat\"\n                  name=\"certInPemFormat\"\n                  type=\"text\"\n                  rows=\"7\"\n                  readonly\n                  [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n                ></textarea>\n              </c8y-form-group>\n              <c8y-form-group>\n                <label\n                  class=\"c8y-checkbox\"\n                  title=\"{{ 'Auto registration' | translate }}\"\n                  [ngClass]=\"{\n                    disabled: !(hasAdminRole$ | async)\n                  }\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n                    (ngModelChange)=\"\n                      updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n                    \"\n                    [disabled]=\"!(hasAdminRole$ | async)\"\n                  />\n                  <span></span>\n                  <span>{{ 'Auto registration' | translate }}</span>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    type=\"button\"\n                  ></button>\n                </label>\n              </c8y-form-group>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-4\">\n              <div\n                class=\"legend form-block\"\n                translate\n              >\n                Additional properties\n              </div>\n              <ul class=\"list-unstyled\">\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Algorithm' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.algorithmName }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Version' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.version }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Valid from' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.notBefore | c8yDate }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Issuer' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.issuer }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Expiration date' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.notAfter | c8yDate }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Serial number' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.serialNumber }}\n                  </span>\n                </li>\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n                  <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n                    {{ 'Subject`of a certificate`' | translate }}\n                  </label>\n                  <span class=\"m-l-auto text-break-word\">\n                    {{ trustedCertificate.subject }}\n                  </span>\n                </li>\n              </ul>\n            </div>\n            <div class=\"col-md-1\"></div>\n            <div\n              class=\"col-md-7\"\n              *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n            >\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                        [disabled]=\"!(hasAdminRole$ | async)\"\n                      >\n                        {{ 'Regenerate`verification code`' | translate }}\n                      </button>\n\n                      <button\n                        class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n                        [attr.aria-label]=\"'Copy to clipboard' | translate\"\n                        tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n                        placement=\"right\"\n                        type=\"button\"\n                        data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n                        [delay]=\"500\"\n                        [disabled]=\"!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                        [disabled]=\"!(hasAdminRole$ | async)\"\n                      >\n                        <i c8yIcon=\"upload\"></i>\n                      </button>\n                      <input\n                        class=\"hidden\"\n                        type=\"file\"\n                        #fileInput\n                        (change)=\"onFileInput($event, trustedCertificate)\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </c8y-li-collapse>\n    </c8y-li>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificateListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificateListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-trusted-certificates', imports: [
                         TitleComponent,
@@ -719,15 +719,15 @@ const trustedCertificatesRoutes = [
     }
 ];
 class TrustedCertificateListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificateListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificateListModule, imports: [CoreModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificateListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificateListModule, imports: [CoreModule,
             CommonModule, i1.RouterModule, i2$2.BsDropdownModule, TooltipModule,
             ReactiveFormsModule,
             ButtonsModule,
             PopoverModule,
             TrustedCertificateListComponent,
             AddTrustedCertificateComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificateListModule, imports: [CoreModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificateListModule, imports: [CoreModule,
             CommonModule,
             RouterModule.forChild(trustedCertificatesRoutes),
             BsDropdownModule.forRoot(),
@@ -738,7 +738,7 @@ class TrustedCertificateListModule {
             TrustedCertificateListComponent,
             AddTrustedCertificateComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificateListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificateListModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [],
@@ -765,10 +765,10 @@ const trustedCertificatesRedirectRoutes = [
     }
 ];
 class TrustedCertificatesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesModule, imports: [i1.RouterModule, CrlSettingsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesModule, imports: [i1.RouterModule, CrlSettingsModule,
             TrustedCertificateListModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesModule, providers: [
             hookNavigator(TrustedCertificatesNavigationFactory),
             hookPatternMessages(MESSAGES_TRUSTED_CERTIFICATES),
             hookTab(TabsFactory)
@@ -776,7 +776,7 @@ class TrustedCertificatesModule {
             CrlSettingsModule,
             TrustedCertificateListModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrustedCertificatesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrustedCertificatesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [],

package/fesm2022/c8y-ngx-components-upgrade-upgraded-services.mjs

@@ -51,16 +51,16 @@ const smartRulesServiceProvider = {
  * NgJS upgraded services.
  */
 class UpgradedServicesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UpgradedServicesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: UpgradedServicesModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UpgradedServicesModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UpgradedServicesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: UpgradedServicesModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UpgradedServicesModule, providers: [
             rolesServiceProvider,
             userInventoryRolesServiceProvider,
             tenantPoliciesServiceProvider,
             smartRulesServiceProvider
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UpgradedServicesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UpgradedServicesModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [