@hmcts/media-viewer 3.0.0 → 3.0.1-RC.1

package/fesm2020/hmcts-media-viewer.mjs

@@ -5,7 +5,7 @@ import { Injectable, Component, ViewChild, HostListener, Directive, Input, ViewE
 import * as i4 from '@angular/common';
 import { DatePipe, CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { UntypedFormControl, FormsModule, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormControl, FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import { BehaviorSubject, Subject, of, combineLatest, asyncScheduler } from 'rxjs';
@@ -5772,10 +5772,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class GovUkDateComponent {
 }
 /** @nocollapse */ GovUkDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GovUkDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ GovUkDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: { config: "config", errorMessage: "errorMessage", formGroup: "formGroup" }, ngImport: i0, template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-gov-uk-error-message>\n\n    <div class=\"govuk-date-input\" [id]=\"config.id + '-date'\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-month'\"\n            [name]=\"config.id + '-month'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-year'\"\n            [name]=\"config.id + '-year'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: GovUkErrorMessageComponent, selector: " mv-gov-uk-error-message", inputs: ["config", "errorMessage"] }, { kind: "component", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "component", type: GovUkLabelComponent, selector: "mv-gov-label", inputs: ["config"] }] });
+/** @nocollapse */ GovUkDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: { config: "config", errorMessage: "errorMessage", formGroup: "formGroup" }, ngImport: i0, template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage.isInvalid\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-gov-uk-error-message>\n\n    <div class=\"govuk-date-input\" [id]=\"config.id + '-date'\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-month'\"\n            [name]=\"config.id + '-month'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-year'\"\n            [name]=\"config.id + '-year'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: GovUkErrorMessageComponent, selector: " mv-gov-uk-error-message", inputs: ["config", "errorMessage"] }, { kind: "component", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "component", type: GovUkLabelComponent, selector: "mv-gov-label", inputs: ["config"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GovUkDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-gov-uk-date', template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-gov-uk-error-message>\n\n    <div class=\"govuk-date-input\" [id]=\"config.id + '-date'\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-month'\"\n            [name]=\"config.id + '-month'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-year'\"\n            [name]=\"config.id + '-year'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n" }]
+            args: [{ selector: 'mv-gov-uk-date', template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage.isInvalid\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-gov-uk-error-message>\n\n    <div class=\"govuk-date-input\" [id]=\"config.id + '-date'\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-month'\"\n            [name]=\"config.id + '-month'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-year'\"\n            [name]=\"config.id + '-year'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], errorMessage: [{
@@ -5792,18 +5792,20 @@ class CommentsSummaryComponent {
         this.fb = fb;
         this.showFilters = false;
         this.hasFilter = false;
+        this.fromFilterValid = true;
+        this.toFilterValid = true;
     }
     ngOnInit() {
         this.filtersFg = this.fb.group({
-            dateRangeFrom: new UntypedFormGroup({
-                day: new UntypedFormControl(''),
-                month: new UntypedFormControl(''),
-                year: new UntypedFormControl('')
+            dateRangeFrom: new FormGroup({
+                day: new FormControl('', [Validators.required]),
+                month: new FormControl('', [Validators.required]),
+                year: new FormControl('', [Validators.required])
             }),
-            dateRangeTo: new UntypedFormGroup({
-                day: new UntypedFormControl(''),
-                month: new UntypedFormControl(''),
-                year: new UntypedFormControl('')
+            dateRangeTo: new FormGroup({
+                day: new FormControl('', [Validators.required]),
+                month: new FormControl('', [Validators.required]),
+                year: new FormControl('', [Validators.required])
             }),
             tagFilters: this.fb.group({}),
         });
@@ -5822,7 +5824,7 @@ class CommentsSummaryComponent {
                 const checkBoxValue = (filters.filters.tagFilters &&
                     filters.filters.tagFilters.hasOwnProperty(val.key)) ?
                     filters.filters.tagFilters[val.key] : false;
-                checkboxes.addControl(val.key, new UntypedFormControl(checkBoxValue));
+                checkboxes.addControl(val.key, new FormControl(checkBoxValue));
             });
             this.filtersFg.updateValueAndValidity();
         });
@@ -5839,7 +5841,11 @@ class CommentsSummaryComponent {
             new Date(value.dateRangeFrom.year, value.dateRangeFrom.month - 1, value.dateRangeFrom.day).getTime() : null;
         const dateRangeTo = hasDateTo ?
             new Date(value.dateRangeTo.year, value.dateRangeTo.month - 1, value.dateRangeTo.day).getTime() : null;
-        this.store.dispatch(new ApplyCommentSymmaryFilter({ ...value, dateRangeFrom, dateRangeTo }));
+        this.fromFilterValid = hasDateFrom ? true : false;
+        this.toFilterValid = hasDateTo ? true : false;
+        if (this.filtersFg.valid) {
+            this.store.dispatch(new ApplyCommentSymmaryFilter({ ...value, dateRangeFrom, dateRangeTo }));
+        }
     }
     onFiltersToggle() {
         this.showFilters = !this.showFilters;
@@ -5861,12 +5867,12 @@ class CommentsSummaryComponent {
         this.$subscriptions.unsubscribe();
     }
 }
-/** @nocollapse */ CommentsSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentsSummaryComponent, deps: [{ token: i1.Store }, { token: PrintService }, { token: ToolbarEventService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentsSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: { title: "title", contentType: "contentType" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["outerContainer"], descendants: true, static: true }, { propertyName: "commentsTable", first: true, predicate: ["commentContainer"], descendants: true }], ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"'test'\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"'test'\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a [routerLink]=\"[]\" class=\"comment-summary_pages\" (click)=\"navigateToPage(value)\">{{value}}</a>\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i8.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i8.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: ["config", "errorMessage", "formGroup"] }, { kind: "component", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: UnsnakePipe, name: "unsnake" }] });
+/** @nocollapse */ CommentsSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentsSummaryComponent, deps: [{ token: i1.Store }, { token: PrintService }, { token: ToolbarEventService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CommentsSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: { title: "title", contentType: "contentType" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["outerContainer"], descendants: true, static: true }, { propertyName: "commentsTable", first: true, predicate: ["commentContainer"], descendants: true }], ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"{\n                      isInvalid: !fromFilterValid,\n                      messages: ['From date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"{\n                      isInvalid: !toFilterValid,\n                      messages: ['To date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a\n                    [routerLink]=\"[]\"\n                    class=\"comment-summary_pages\"\n                    (click)=\"navigateToPage(value)\"\n                    >{{ value }}</a\n                  >\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i8.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i8.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: ["config", "errorMessage", "formGroup"] }, { kind: "component", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: UnsnakePipe, name: "unsnake" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentsSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-comments-summary', template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"'test'\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"'test'\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a [routerLink]=\"[]\" class=\"comment-summary_pages\" (click)=\"navigateToPage(value)\">{{value}}</a>\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: PrintService }, { type: ToolbarEventService }, { type: i2.UntypedFormBuilder }]; }, propDecorators: { title: [{
+            args: [{ selector: 'mv-comments-summary', template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"{\n                      isInvalid: !fromFilterValid,\n                      messages: ['From date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"{\n                      isInvalid: !toFilterValid,\n                      messages: ['To date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a\n                    [routerLink]=\"[]\"\n                    class=\"comment-summary_pages\"\n                    (click)=\"navigateToPage(value)\"\n                    >{{ value }}</a\n                  >\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: PrintService }, { type: ToolbarEventService }, { type: i2.FormBuilder }]; }, propDecorators: { title: [{
                 type: Input
             }], contentType: [{
                 type: Input