@hmcts/ccd-case-ui-toolkit 7.3.45-EXUI-4188-sanitize-HTML → 7.3.45-exui-4368-2916

package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, DOCUMENT, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, ViewChild, ChangeDetectionStrategy, Injector, ViewContainerRef, SecurityContext, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, DOCUMENT, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, ViewChild, ChangeDetectionStrategy, Injector, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, AsyncPipe, CurrencyPipe, formatDate } from '@angular/common';
 import * as i1 from 'rpx-xui-translation';
@@ -39,7 +39,6 @@ import * as i2$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i6$1 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
-import * as i2$2 from '@angular/platform-browser';
 import { cloneDeep } from 'lodash';
 import * as i4$1 from '@angular-material-components/datetime-picker';
 import { NGX_MAT_DATE_FORMATS, NgxMatDateAdapter, NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
@@ -53,7 +52,7 @@ import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import * as i14 from '@hmcts/media-viewer';
 import { MediaViewerModule } from '@hmcts/media-viewer';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i2$3 from 'ngx-pagination';
+import * as i2$2 from 'ngx-pagination';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
 import * as i10 from '@angular/material/legacy-tabs';
 import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
@@ -6625,6 +6624,7 @@ class LabelSubstitutorDirective {
     contextFields = [];
     formGroup;
     elementsToSubstitute = ['label', 'hint_text'];
+    initialLabel;
     initialHintText;
     languageSubscription;
     constructor(fieldsUtils, placeholderService, rpxTranslationPipe, rpxTranslationService) {
@@ -6634,9 +6634,10 @@ class LabelSubstitutorDirective {
         this.rpxTranslationService = rpxTranslationService;
     }
     ngOnInit() {
+        this.initialLabel = this.caseField.label;
         this.initialHintText = this.caseField.hint_text;
-        this.caseField.originalLabel = this.caseField.label;
         this.noCacheProcessing();
+        this.caseField.originalLabel = this.caseField.originalLabel || this.caseField.label;
         this.formGroup = this.formGroup || new FormGroup({});
         this.languageSubscription = this.rpxTranslationService.language$.pipe(skip(1)).subscribe(() => {
             this.onLanguageChange();
@@ -6659,23 +6660,10 @@ class LabelSubstitutorDirective {
             }
         }
     }
-    applySubstitutions() {
+    applySubstitutions(isLanguageChange = false) {
         const fields = this.getReadOnlyAndFormFields();
         if (this.shouldSubstitute('label')) {
-            const oldLabel = this.caseField.label;
-            const substitutedLabel = this.resolvePlaceholders(fields, this.caseField.label);
-            if (oldLabel && oldLabel !== substitutedLabel) {
-                // we need to translate the uninterpolated data then substitute the values in translated string
-                this.caseField.originalLabel = substitutedLabel;
-                const translated = this.rpxTranslationPipe.transform(oldLabel);
-                const transSubstitutedLabel = this.resolvePlaceholders(fields, translated);
-                this.caseField.label = transSubstitutedLabel;
-                this.caseField.isTranslated = this.rpxTranslationService.language === 'cy' && translated !== oldLabel;
-            }
-            else {
-                this.caseField.label = substitutedLabel;
-                this.caseField.isTranslated = false;
-            }
+            this.applyLabelSubstitution(fields, isLanguageChange);
         }
         if (this.shouldSubstitute('hint_text')) {
             this.caseField.hint_text = this.resolvePlaceholders(fields, this.caseField.hint_text);
@@ -6684,14 +6672,83 @@ class LabelSubstitutorDirective {
             this.caseField.value = this.resolvePlaceholders(fields, this.caseField.value);
         }
     }
+    applyLabelSubstitution(fields, isLanguageChange) {
+        const currentLabel = this.caseField.label;
+        // `originalLabel` stores the label exactly as it came from the server, before any
+        // placeholder values were inserted. That gives us a clean starting point when the user
+        // changes language or returns to the page later.
+        const originalLabel = this.caseField.originalLabel || currentLabel;
+        const substitutedCurrentLabel = this.resolvePlaceholders(fields, currentLabel);
+        const substitutedOriginalLabel = originalLabel === currentLabel
+            ? substitutedCurrentLabel
+            : this.resolvePlaceholders(fields, originalLabel);
+        const substitutedLabel = substitutedCurrentLabel || substitutedOriginalLabel;
+        const hasAnyLabelSubstitution = (currentLabel && currentLabel !== substitutedCurrentLabel)
+            || (originalLabel && originalLabel !== substitutedOriginalLabel);
+        if (!hasAnyLabelSubstitution) {
+            // No placeholders were resolved, so keep the current label and allow the render layer
+            // to translate it normally if needed.
+            this.setLabelState(substitutedLabel);
+            return;
+        }
+        // Preserve the original template the first time we successfully interpolate it.
+        this.caseField.originalLabel = this.caseField.originalLabel || originalLabel;
+        this.applyTranslatedLabelState(fields, originalLabel, substitutedLabel, isLanguageChange);
+    }
+    applyTranslatedLabelState(fields, originalLabel, substitutedLabel, isLanguageChange) {
+        // Some labels only translate correctly if we translate the template first and then
+        // substitute the helper values into the translated sentence.
+        const translatedTemplateLabel = this.resolvePlaceholders(fields, isLanguageChange ? this.translateLabelOnLanguageChange(originalLabel) : this.translateLabel(originalLabel));
+        // Other labels only translate correctly if we first resolve the English phrase and let
+        // the render layer translate that final resolved string.
+        const translatedResolvedLabel = isLanguageChange
+            ? this.translateLabelOnLanguageChange(substitutedLabel)
+            : this.translateLabel(substitutedLabel);
+        const languageIsWelsh = this.rpxTranslationService.language === 'cy';
+        const hasResolvedWelshTranslation = languageIsWelsh
+            && translatedResolvedLabel
+            && translatedResolvedLabel !== substitutedLabel;
+        const hasTemplateWelshTranslation = languageIsWelsh
+            && translatedTemplateLabel
+            && translatedTemplateLabel !== substitutedLabel;
+        if (hasResolvedWelshTranslation) {
+            // Keep the resolved English label and mark it as not yet translated so the field
+            // template can run `rpxTranslate` on the full phrase at render time.
+            this.setLabelState(substitutedLabel);
+            return;
+        }
+        if (hasTemplateWelshTranslation) {
+            // Use the template-translated result when translating the fully resolved label does
+            // not improve the Welsh output.
+            this.setLabelState(translatedTemplateLabel, true);
+            return;
+        }
+        // English, untranslated Welsh, or labels whose translation is handled elsewhere.
+        this.setLabelState(substitutedLabel);
+    }
+    translateLabel(label) {
+        return this.rpxTranslationPipe.transform(label);
+    }
+    translateLabelOnLanguageChange(label) {
+        return this.rpxTranslationService.language === 'en'
+            ? label
+            : this.translateLabel(label);
+    }
+    setLabelState(label, isTranslated = false) {
+        this.caseField.label = label;
+        this.caseField.isTranslated = isTranslated;
+    }
     onLanguageChange() {
-        this.resetToInitialValues();
-        this.applySubstitutions();
+        this.resetToInitialValues(true);
+        this.applySubstitutions(true);
     }
-    resetToInitialValues() {
-        if (this.caseField?.originalLabel) {
+    resetToInitialValues(isLanguageChange = false) {
+        if (isLanguageChange && this.caseField?.originalLabel) {
             this.caseField.label = this.caseField.originalLabel;
         }
+        if (!isLanguageChange && this.initialLabel) {
+            this.caseField.label = this.initialLabel;
+        }
         if (this.initialHintText) {
             this.caseField.hint_text = this.initialHintText;
         }
@@ -26727,10 +26784,9 @@ function ManageCaseFlagsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", i0.ɵɵinterpolate1("flag-selection-", i_r4))("checked", ctx_r0.isSelected(flagDisplay_r3));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("for", i0.ɵɵinterpolate1("flag-selection-", i_r4))("innerHTML", ctx_r0.sanitizeHtml(i0.ɵɵpipeBind1(3, 6, flagDisplay_r3)), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("for", i0.ɵɵinterpolate1("flag-selection-", i_r4))("innerHtml", i0.ɵɵpipeBind1(3, 6, flagDisplay_r3), i0.ɵɵsanitizeHtml);
 } }
 class ManageCaseFlagsComponent extends AbstractJourneyComponent {
-    sanitizer;
     formGroup;
     flagsData;
     caseTitle;
@@ -26745,10 +26801,6 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
     selectedControlName = 'selectedManageCaseLocation';
     excludedFlagStatuses = [CaseFlagStatus.INACTIVE, CaseFlagStatus.NOT_APPROVED];
     cachedControls;
-    constructor(multipageComponentStateService, sanitizer) {
-        super(multipageComponentStateService);
-        this.sanitizer = sanitizer;
-    }
     ngOnInit() {
         this.manageCaseFlagTitle = this.setManageCaseFlagTitle(this.displayContextParameter);
         let originalStatus;
@@ -26995,12 +27047,8 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
             });
         }
     }
-    // Ensure there is no dangerous HTML in the flag name or description that could lead to XSS vulnerabilities
-    sanitizeHtml(content) {
-        return this.sanitizer.sanitize(SecurityContext.HTML, content ?? '') ?? '';
-    }
-    static ɵfac = function ManageCaseFlagsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManageCaseFlagsComponent)(i0.ɵɵdirectiveInject(MultipageComponentStateService), i0.ɵɵdirectiveInject(i2$2.DomSanitizer)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ManageCaseFlagsComponent, selectors: [["ccd-manage-case-flags"]], inputs: { formGroup: "formGroup", flagsData: "flagsData", caseTitle: "caseTitle", displayContextParameter: "displayContextParameter" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 9, consts: [[3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "manage-case-flag-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "manage-case-flag-heading", 1, "govuk-fieldset__heading"], ["id", "manage-case-flag-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["id", "manage-case-flag-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "change", "id", "checked"], [1, "govuk-label", "govuk-radios__label", 3, "for", "innerHTML"]], template: function ManageCaseFlagsComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = /*@__PURE__*/ (() => { let ɵManageCaseFlagsComponent_BaseFactory; return function ManageCaseFlagsComponent_Factory(__ngFactoryType__) { return (ɵManageCaseFlagsComponent_BaseFactory || (ɵManageCaseFlagsComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ManageCaseFlagsComponent)))(__ngFactoryType__ || ManageCaseFlagsComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ManageCaseFlagsComponent, selectors: [["ccd-manage-case-flags"]], inputs: { formGroup: "formGroup", flagsData: "flagsData", caseTitle: "caseTitle", displayContextParameter: "displayContextParameter" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 9, consts: [[3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "manage-case-flag-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "manage-case-flag-heading", 1, "govuk-fieldset__heading"], ["id", "manage-case-flag-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["id", "manage-case-flag-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "change", "id", "checked"], [1, "govuk-label", "govuk-radios__label", 3, "for", "innerHtml"]], template: function ManageCaseFlagsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementContainerStart(0, 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "fieldset", 2)(3, "legend", 3)(4, "h1", 4);
             i0.ɵɵtext(5);
@@ -27025,8 +27073,8 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ManageCaseFlagsComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-manage-case-flags', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"manage-case-flag-heading\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h1 id=\"manage-case-flag-heading\" class=\"govuk-fieldset__heading\">\n          {{manageCaseFlagTitle | rpxTranslate}}\n        </h1>\n      </legend>\n      <div id=\"manage-case-flag-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"manageCaseFlagSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{manageCaseFlagSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n        <div class=\"govuk-radios__item\" *ngFor=\"let flagDisplay of flagsDisplayData; index as i\">\n          <input class=\"govuk-radios__input\" id=\"flag-selection-{{i}}\"\n            type=\"radio\"\n            [checked]=\"isSelected(flagDisplay)\"\n            (change)=\"onFlagSelectionChange(flagDisplay)\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"flag-selection-{{i}}\" [innerHTML]=\"sanitizeHtml(flagDisplay | manageCaseFlagsLabelDisplay)\"></label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>", styles: [".flag-name-and-description{font-weight:700}\n"] }]
-    }], () => [{ type: MultipageComponentStateService }, { type: i2$2.DomSanitizer }], { formGroup: [{
+        args: [{ selector: 'ccd-manage-case-flags', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"manage-case-flag-heading\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h1 id=\"manage-case-flag-heading\" class=\"govuk-fieldset__heading\">\n          {{manageCaseFlagTitle | rpxTranslate}}\n        </h1>\n      </legend>\n      <div id=\"manage-case-flag-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"manageCaseFlagSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{manageCaseFlagSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n        <div class=\"govuk-radios__item\" *ngFor=\"let flagDisplay of flagsDisplayData; index as i\">\n          <input class=\"govuk-radios__input\" id=\"flag-selection-{{i}}\"\n            type=\"radio\"\n            [checked]=\"isSelected(flagDisplay)\"\n            (change)=\"onFlagSelectionChange(flagDisplay)\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"flag-selection-{{i}}\" [innerHtml]=\"flagDisplay | manageCaseFlagsLabelDisplay\"></label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>", styles: [".flag-name-and-description{font-weight:700}\n"] }]
+    }], null, { formGroup: [{
             type: Input
         }], flagsData: [{
             type: Input
@@ -27037,7 +27085,7 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
         }], caseFlagStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ManageCaseFlagsComponent, { className: "ManageCaseFlagsComponent", filePath: "lib/shared/components/palette/case-flag/components/manage-case-flags/manage-case-flags.component.ts", lineNumber: 19 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ManageCaseFlagsComponent, { className: "ManageCaseFlagsComponent", filePath: "lib/shared/components/palette/case-flag/components/manage-case-flags/manage-case-flags.component.ts", lineNumber: 17 }); })();
 
 // tslint:disable:variable-name
 /**
@@ -33531,7 +33579,7 @@ class PaginationComponent {
             i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 4, "Pagination"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !(ctx.autoHide && p_r3.pages.length <= 1));
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i2$3.PaginationControlsDirective, i5.DecimalPipe, i1.RpxTranslatePipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]:after{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900;text-decoration:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i2$2.PaginationControlsDirective, i5.DecimalPipe, i1.RpxTranslatePipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]:after{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900;text-decoration:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationComponent, [{
         type: Component,
@@ -33875,7 +33923,7 @@ class CaseListComponent {
             i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(10, 9, ctx.cases, i0.ɵɵpureFunction3(12, _c0$d, ctx.pageSize, ctx.currentPageNo, ctx.totalResultsCount)));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.totalResultsCount > ctx.pageSize);
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i5.NgSwitchDefault, i1$1.RouterLink, PaginationComponent, i5.CurrencyPipe, i2$3.PaginatePipe, i1.RpxTranslatePipe], encapsulation: 2 });
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i5.NgSwitchDefault, i1$1.RouterLink, PaginationComponent, i5.CurrencyPipe, i2$2.PaginatePipe, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseListComponent, [{
         type: Component,
@@ -41130,7 +41178,7 @@ class SearchResultModule {
         PipesModule,
         ActivityModule,
         PaginationModule, i1.RpxTranslationModule, PaletteModule], exports: [SearchResultComponent] }); })();
-i0.ɵɵsetComponentScope(SearchResultComponent, function () { return [i5.NgForOf, i5.NgIf, i1$1.RouterLink, LabelSubstitutorDirective, ActivityComponent, PaginationComponent, FieldReadComponent]; }, function () { return [i5.DecimalPipe, i2$3.PaginatePipe, CaseReferencePipe, SortSearchResultPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(SearchResultComponent, function () { return [i5.NgForOf, i5.NgIf, i1$1.RouterLink, LabelSubstitutorDirective, ActivityComponent, PaginationComponent, FieldReadComponent]; }, function () { return [i5.DecimalPipe, i2$2.PaginatePipe, CaseReferencePipe, SortSearchResultPipe, i1.RpxTranslatePipe]; });
 
 // tslint:disable:variable-name
 class ComplexFieldOverride {