@hmcts/ccd-case-ui-toolkit 7.3.99-innerhtml-security-update → 7.3.99

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, Injectable, DOCUMENT, Inject, InjectionToken, Optional, ChangeDetectorRef, Directive, ViewChild, ChangeDetectionStrategy, Injector, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, Injectable, DOCUMENT, Inject, InjectionToken, Optional, ChangeDetectorRef, Directive, ViewChild, ChangeDetectionStrategy, SecurityContext, 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';
@@ -31,7 +31,7 @@ import { MAT_LEGACY_DATE_LOCALE } from '@angular/material/legacy-core';
 import * as i3 from '@hmcts/ccpay-web-component';
 import { PaymentLibModule } from '@hmcts/ccpay-web-component';
 import { v4 } from 'uuid';
-import DOMPurify from 'dompurify';
+import * as i1$5 from '@angular/platform-browser';
 import * as i3$1 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
 import { nodes, marks } from 'ngx-editor/schema';
@@ -6308,7 +6308,7 @@ class FormValidatorsService {
         // Matches: [text](url), ![alt](url), <img ...>, <a ...>...</a>
         const inlineMarkdownPattern = /(?:!?\[[^\]]{0,500}\]\([^)]{0,500}\)|<(?:img\b[^>]{0,500}>|a\b[^>]{0,500}>[\s\S]*?<\/a>))/i;
         // Matches: [text][id], ![alt][id], and the collapsed form [text][]
-        const referenceBoxPattern = /(!)?\[((?:[^[\]\\]|\\.){0,500})\]\s*\[([^\]]{0,100})\]/;
+        const referenceBoxPattern = /(!)?\[((?:[^[\]\\]|\\.){0,500})\]\[([^\]]{0,100})\](?!\s*\/)/;
         // Matches: autolinks such as <http://example.com>
         const autolinkPattern = /<(?:[A-Za-z][A-Za-z0-9+.-]*:[^ <>\n]*|[A-Za-z0-9.!#$%&'*+/=?^_`{|}~-]+@[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)+)>/;
         // Matches: bare www.example.com autolinks
@@ -26378,8 +26378,10 @@ function sanitiseRichTextHtml(value) {
 }
 
 class ReadRichTextAreaFieldComponent extends AbstractFieldReadComponent {
-    constructor() {
+    sanitizer;
+    constructor(sanitizer) {
         super();
+        this.sanitizer = sanitizer;
     }
     sanitisedValue() {
         const supportedHtml = sanitiseRichTextHtml(this.caseField.value || '');
@@ -26390,12 +26392,9 @@ class ReadRichTextAreaFieldComponent extends AbstractFieldReadComponent {
             delete element.dataset.indent;
             element.classList.add(`ccd-rich-text-indent-${indent}`);
         });
-        return DOMPurify.sanitize(documentElement.body.innerHTML, {
-            ALLOWED_ATTR: ['align', 'class', 'start', 'type'],
-            ALLOWED_TAGS: ['b', 'blockquote', 'br', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'li', 'ol', 'p', 'strong', 'u', 'ul']
-        });
+        return this.sanitizer.sanitize(SecurityContext.HTML, documentElement.body.innerHTML) || '';
     }
-    static ɵfac = function ReadRichTextAreaFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ReadRichTextAreaFieldComponent)(); };
+    static ɵfac = function ReadRichTextAreaFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ReadRichTextAreaFieldComponent)(i0.ɵɵdirectiveInject(i1$5.DomSanitizer)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadRichTextAreaFieldComponent, selectors: [["ccd-read-rich-text-area-field"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[1, "ccd-rich-text-area-read", 3, "innerHTML"]], template: function ReadRichTextAreaFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelement(0, "div", 0);
         } if (rf & 2) {
@@ -26404,8 +26403,8 @@ class ReadRichTextAreaFieldComponent extends AbstractFieldReadComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadRichTextAreaFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-rich-text-area-field', template: '<div class="ccd-rich-text-area-read" [innerHTML]="sanitisedValue()"></div>', encapsulation: ViewEncapsulation.None, standalone: false, styles: ["@charset \"UTF-8\";.ccd-rich-text-area-read{font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal}.ccd-rich-text-area-read strong,.ccd-rich-text-area-read strong *,.ccd-rich-text-area-read b,.ccd-rich-text-area-read b *{font-weight:700}.ccd-rich-text-area-read strong u,.ccd-rich-text-area-read u strong,.ccd-rich-text-area-read b u,.ccd-rich-text-area-read u b{font-weight:700!important;text-decoration:underline}.ccd-rich-text-area-read p,.ccd-rich-text-area-read ul,.ccd-rich-text-area-read ol,.ccd-rich-text-area-read li{font-size:14px;margin-top:0;overflow-wrap:anywhere;word-break:normal}.ccd-rich-text-area-read p:empty:before{content:\"\\a0\"}.ccd-rich-text-area-read ul{list-style:disc outside;padding-left:25px}.ccd-rich-text-area-read ol{list-style:decimal outside;padding-left:25px}.ccd-rich-text-area-read ol[type=a]{list-style-type:lower-alpha}.ccd-rich-text-area-read ol[type=i]{list-style-type:lower-roman}.ccd-rich-text-area-read ol[type=i]>li::marker{content:\"(\" counter(list-item,lower-roman) \") \"}.ccd-rich-text-area-read li{display:list-item;margin-bottom:5px}.ccd-rich-text-area-read li>p{margin:0}.ccd-rich-text-area-read li>ul,.ccd-rich-text-area-read li>ol{margin-top:5px}.ccd-rich-text-area-read h1{font-size:20px;font-weight:700}.ccd-rich-text-area-read h2{font-size:18px;font-weight:700}.ccd-rich-text-area-read h3{font-size:16px;font-weight:700}.ccd-rich-text-area-read .ccd-rich-text-indent-1{margin-left:40px}.ccd-rich-text-area-read .ccd-rich-text-indent-2{margin-left:80px}.ccd-rich-text-area-read .ccd-rich-text-indent-3{margin-left:120px}.ccd-rich-text-area-read .ccd-rich-text-indent-4{margin-left:160px}.ccd-rich-text-area-read .ccd-rich-text-indent-5{margin-left:200px}.ccd-rich-text-area-read .ccd-rich-text-indent-6{margin-left:240px}\n"] }]
-    }], () => [], null); })();
+        args: [{ selector: 'ccd-read-rich-text-area-field', template: `<div class="ccd-rich-text-area-read" [innerHTML]="sanitisedValue()"></div>`, encapsulation: ViewEncapsulation.None, standalone: false, styles: ["@charset \"UTF-8\";.ccd-rich-text-area-read{font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal}.ccd-rich-text-area-read strong,.ccd-rich-text-area-read strong *,.ccd-rich-text-area-read b,.ccd-rich-text-area-read b *{font-weight:700}.ccd-rich-text-area-read strong u,.ccd-rich-text-area-read u strong,.ccd-rich-text-area-read b u,.ccd-rich-text-area-read u b{font-weight:700!important;text-decoration:underline}.ccd-rich-text-area-read p,.ccd-rich-text-area-read ul,.ccd-rich-text-area-read ol,.ccd-rich-text-area-read li{font-size:14px;margin-top:0;overflow-wrap:anywhere;word-break:normal}.ccd-rich-text-area-read p:empty:before{content:\"\\a0\"}.ccd-rich-text-area-read ul{list-style:disc outside;padding-left:25px}.ccd-rich-text-area-read ol{list-style:decimal outside;padding-left:25px}.ccd-rich-text-area-read ol[type=a]{list-style-type:lower-alpha}.ccd-rich-text-area-read ol[type=i]{list-style-type:lower-roman}.ccd-rich-text-area-read ol[type=i]>li::marker{content:\"(\" counter(list-item,lower-roman) \") \"}.ccd-rich-text-area-read li{display:list-item;margin-bottom:5px}.ccd-rich-text-area-read li>p{margin:0}.ccd-rich-text-area-read li>ul,.ccd-rich-text-area-read li>ol{margin-top:5px}.ccd-rich-text-area-read h1{font-size:20px;font-weight:700}.ccd-rich-text-area-read h2{font-size:18px;font-weight:700}.ccd-rich-text-area-read h3{font-size:16px;font-weight:700}.ccd-rich-text-area-read .ccd-rich-text-indent-1{margin-left:40px}.ccd-rich-text-area-read .ccd-rich-text-indent-2{margin-left:80px}.ccd-rich-text-area-read .ccd-rich-text-indent-3{margin-left:120px}.ccd-rich-text-area-read .ccd-rich-text-indent-4{margin-left:160px}.ccd-rich-text-area-read .ccd-rich-text-indent-5{margin-left:200px}.ccd-rich-text-area-read .ccd-rich-text-indent-6{margin-left:240px}\n"] }]
+    }], () => [{ type: i1$5.DomSanitizer }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadRichTextAreaFieldComponent, { className: "ReadRichTextAreaFieldComponent", filePath: "lib/shared/components/palette/rich-text-area/read-rich-text-area-field.component.ts", lineNumber: 13 }); })();
 
 const _c0$D = ["editorHost"];
@@ -26579,6 +26578,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             },
             plugins: [
                 new Plugin({
+                    appendTransaction: (transactions, oldState, newState) => this.renumberContinuedOrderedLists(transactions, oldState, newState),
                     props: {
                         handlePaste: (_view, event) => this.handleEditorPaste(event),
                         handleDOMEvents: {
@@ -27062,6 +27062,71 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             ? candidateOrder === adjacentOrder + adjacentList.childCount
             : candidateOrder + candidateList.childCount === adjacentOrder;
     }
+    renumberContinuedOrderedLists(transactions, oldState, newState) {
+        if (!transactions.some((transaction) => transaction.docChanged)) {
+            return null;
+        }
+        const oldChildren = [];
+        let oldPosition = 0;
+        oldState.doc.forEach((node) => {
+            oldChildren.push({ node, position: oldPosition });
+            oldPosition += node.nodeSize;
+        });
+        const mapPosition = (position) => transactions.reduce((mappedPosition, transaction) => transaction.mapping.map(mappedPosition, 1), position);
+        const effectiveOrders = new Map();
+        let result = null;
+        oldChildren.forEach(({ node: candidate, position: candidatePosition }, candidateIndex) => {
+            if (candidate.type.name !== 'ordered_list') {
+                return;
+            }
+            let previousIndex = candidateIndex - 1;
+            while (previousIndex >= 0 &&
+                this.isOrderedListContinuationSeparator(oldChildren[previousIndex].node, candidate)) {
+                previousIndex--;
+            }
+            if (previousIndex < 0) {
+                return;
+            }
+            const previous = oldChildren[previousIndex].node;
+            const previousPosition = oldChildren[previousIndex].position;
+            if (previous.type.name !== 'ordered_list' ||
+                !this.hasMatchingListType(candidate, previous) ||
+                candidate.attrs.indent !== previous.attrs.indent ||
+                !this.isSequentialList(candidate, previous, 1)) {
+                return;
+            }
+            const mappedPreviousPosition = mapPosition(previousPosition);
+            const mappedCandidatePosition = mapPosition(candidatePosition);
+            const newPrevious = newState.doc.nodeAt(mappedPreviousPosition);
+            const newCandidate = newState.doc.nodeAt(mappedCandidatePosition);
+            if (!newPrevious || !newCandidate ||
+                newPrevious.type.name !== 'ordered_list' || newCandidate.type.name !== 'ordered_list' ||
+                newPrevious.firstChild?.textContent !== previous.firstChild?.textContent ||
+                newCandidate.firstChild?.textContent !== candidate.firstChild?.textContent ||
+                !this.hasMatchingListType(newCandidate, newPrevious) ||
+                newCandidate.attrs.indent !== newPrevious.attrs.indent) {
+                return;
+            }
+            const previousOrder = effectiveOrders.get(previousPosition) ?? (Number(newPrevious.attrs.order) || 1);
+            const expectedOrder = previousOrder + newPrevious.childCount;
+            effectiveOrders.set(candidatePosition, expectedOrder);
+            if (Number(newCandidate.attrs.order) === expectedOrder) {
+                return;
+            }
+            result = (result || newState.tr).setNodeMarkup(mappedCandidatePosition, newCandidate.type, {
+                ...newCandidate.attrs,
+                order: expectedOrder
+            });
+        });
+        return result;
+    }
+    isOrderedListContinuationSeparator(node, candidate) {
+        if (this.isEmptyParagraph(node) || this.isListSectionHeading(node)) {
+            return true;
+        }
+        return this.isList(node) &&
+            (Number(node.attrs.indent) || 0) > (Number(candidate.attrs.indent) || 0);
+    }
     hasListContinuation(list) {
         return list.type.name === 'ordered_list' || Boolean(list.attrs.continuationOrder);
     }
@@ -27327,7 +27392,10 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         this.removeUnsupportedMarkup(documentElement);
         this.normaliseDateRangeSpacing(documentElement);
         this.removeUnsupportedAttributes(documentElement);
-        return this.normalisePlainTextValue(sanitiseRichTextDocument(documentElement));
+        const sanitisedValue = sanitiseRichTextDocument(documentElement);
+        return this.hasMeaningfulRichTextContent(documentElement)
+            ? this.normalisePlainTextValue(sanitisedValue)
+            : '';
     }
     normaliseRichTextValue(value) {
         if (!value) {
@@ -27345,7 +27413,15 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         this.removeUnsupportedMarkup(documentElement);
         this.normaliseDateRangeSpacing(documentElement);
         this.removeUnsupportedAttributes(documentElement);
-        return this.normalisePlainTextValue(sanitiseRichTextDocument(documentElement));
+        const sanitisedValue = sanitiseRichTextDocument(documentElement);
+        return this.hasMeaningfulRichTextContent(documentElement)
+            ? this.normalisePlainTextValue(sanitisedValue)
+            : '';
+    }
+    hasMeaningfulRichTextContent(documentElement) {
+        const visibleText = (documentElement.body.textContent || '')
+            .replace(/[\s\u00a0\u200b-\u200d\ufeff]/g, '');
+        return visibleText.length > 0 || Boolean(documentElement.body.querySelector('hr'));
     }
     syncAccessibilityLater() {
         setTimeout(() => this.syncAccessibilityState());
@@ -27458,13 +27534,31 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         }
         this.isNormalisingValue = true;
         try {
-            this.richTextAreaControl.setValue(normalisedValue, { emitEvent: false });
-            this.editor.setContent(normalisedValue || '');
+            this.richTextAreaControl.setValue(normalisedValue, {
+                emitEvent: false,
+                emitModelToViewChange: false
+            });
+            if (normalisedValue || this.editorHasMeaningfulRichTextContent()) {
+                this.editor.setContent(normalisedValue || '');
+            }
         }
         finally {
             this.isNormalisingValue = false;
         }
     }
+    editorHasMeaningfulRichTextContent() {
+        const documentNode = this.editor.view.state.doc;
+        const visibleText = documentNode.textContent.replace(/[\s\u00a0\u200b-\u200d\ufeff]/g, '');
+        let hasHorizontalRule = false;
+        documentNode.descendants((node) => {
+            if (node.type.name === 'horizontal_rule') {
+                hasHorizontalRule = true;
+                return false;
+            }
+            return !hasHorizontalRule;
+        });
+        return visibleText.length > 0 || hasHorizontalRule;
+    }
     richTextRequiredValidator() {
         return (control) => {
             const textValue = this.htmlToText(control.value);
@@ -27478,8 +27572,9 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         };
     }
     htmlToText(value) {
-        const documentElement = new DOMParser().parseFromString(value || '', 'text/html');
-        return (documentElement.body.textContent || '').replaceAll('\u00a0', ' ').trim();
+        const container = document.createElement('div');
+        container.innerHTML = value || '';
+        return (container.textContent || '').replaceAll('\u00a0', ' ').trim();
     }
     isWordHtml(html) {
         return /(class="?Mso|mso-|urn:schemas-microsoft-com:office:word|xmlns:o)/i.test(html);
@@ -28114,7 +28209,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         }
         return value
             .replace(/!?\[([^\]]{0,500})\]\(([^)]{0,500})\)/g, (_match, text, url) => text || url)
-            .replace(/!?\[((?:[^[\]\\]|\\.){0,500})\]\s*\[[^\]]{0,100}\]/g, '$1');
+            .replace(/!?\[((?:[^[\]\\]|\\.){0,500})\]\[[^\]]{0,100}\](?!\s*\/)/g, '$1');
     }
     unwrapElement(element) {
         const parentNode = element.parentNode;
@@ -28133,6 +28228,8 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         const state = {
             listStack: [],
             listParents: [],
+            listRunDeclaredLevel: null,
+            listRunVisualLevel: null,
             resetListLevels: new Map(),
             previousListId: null
         };
@@ -28161,12 +28258,19 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     resetWordListConversionState(state) {
         state.listStack.length = 0;
         state.listParents.length = 0;
+        state.listRunDeclaredLevel = null;
+        state.listRunVisualLevel = null;
         state.resetListLevels.clear();
         state.previousListId = null;
     }
     wordListRequestedLevel(paragraph, listId, wordListIndents, state) {
         const declaredLevel = this.wordListDeclaredLevel(paragraph);
-        let requestedLevel = this.wordListLevel(paragraph, wordListIndents);
+        const visualLevel = this.wordListVisualLevel(paragraph, wordListIndents);
+        if (state.listRunDeclaredLevel === null || state.listRunVisualLevel === null) {
+            state.listRunDeclaredLevel = declaredLevel;
+            state.listRunVisualLevel = visualLevel;
+        }
+        let requestedLevel = Math.max(1, declaredLevel - state.listRunDeclaredLevel + 1, visualLevel - state.listRunVisualLevel + 1);
         const rememberedResetLevel = declaredLevel === 1 ? state.resetListLevels.get(listId) : null;
         if (rememberedResetLevel) {
             return Math.max(requestedLevel, rememberedResetLevel);
@@ -28187,7 +28291,8 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         let currentList = state.listStack[stackIndex];
         if (currentList?.tagName.toLowerCase() !== listType || currentList?.getAttribute('type') !== orderedListType ||
             state.listParents[stackIndex] !== listParent) {
-            currentList = this.createWordList(documentElement, paragraph, listType, orderedListType, parentListItem);
+            const rootIndent = level === 1 ? state.listRunVisualLevel - 1 : 0;
+            currentList = this.createWordList(documentElement, paragraph, listType, orderedListType, parentListItem, rootIndent);
             state.listStack[stackIndex] = currentList;
             state.listParents[stackIndex] = listParent;
         }
@@ -28195,15 +28300,18 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         state.listParents.length = level;
         return currentList;
     }
-    createWordList(documentElement, paragraph, listType, orderedListType, parentListItem) {
+    createWordList(documentElement, paragraph, listType, orderedListType, parentListItem, rootIndent) {
         const list = documentElement.createElement(listType);
-        const listStart = this.wordListStart(paragraph);
+        const listStart = this.wordListStart(paragraph, orderedListType);
         if (listType === 'ol' && listStart > 1) {
             list.setAttribute('start', listStart.toString());
         }
         if (orderedListType) {
             list.setAttribute('type', orderedListType);
         }
+        if (rootIndent > 0) {
+            list.dataset.indent = Math.min(6, rootIndent).toString();
+        }
         if (parentListItem) {
             parentListItem.appendChild(list);
         }
@@ -28262,11 +28370,10 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             .find((element) => /mso-list:\s*Ignore/i.test(element.getAttribute('style') || ''));
         return (markerElement ? markerElement.textContent : paragraph.textContent).trim();
     }
-    wordListLevel(paragraph, wordListIndents) {
-        const declaredLevel = this.wordListDeclaredLevel(paragraph);
+    wordListVisualLevel(paragraph, wordListIndents) {
         const indent = this.wordListIndent(paragraph);
         const visualLevel = wordListIndents.indexOf(indent) + 1;
-        return Math.max(declaredLevel, visualLevel || 1);
+        return visualLevel || 1;
     }
     wordListDeclaredLevel(paragraph) {
         const match = (paragraph.getAttribute('style') || '').match(/mso-list:[^;]*\blevel(\d+)/i);
@@ -28287,9 +28394,18 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         const indent = Math.max(this.cssLengthToPixels(this.cssStyleLength(style, 'margin-left')), this.cssLengthToPixels(this.cssStyleLength(style, 'margin-inline-start')), this.cssLengthToPixels(this.cssStyleLength(style, 'mso-para-margin-left')), this.cssLengthToPixels(this.cssStyleLength(style, 'mso-margin-left-alt')), this.cssLengthToPixels(this.cssMarginLeftLength(style)));
         return Math.round(indent);
     }
-    wordListStart(paragraph) {
-        const match = /^(\d+)[.)]/.exec(this.wordListMarker(paragraph));
-        return match ? Number(match[1]) : 1;
+    wordListStart(paragraph, orderedListType) {
+        const match = /^\(?([a-z]+|\d+)[.)]/i.exec(this.wordListMarker(paragraph));
+        if (!match) {
+            return 1;
+        }
+        if (/^\d+$/.test(match[1])) {
+            return Number(match[1]);
+        }
+        if (orderedListType === 'a') {
+            return match[1].toLowerCase().split('').reduce((start, character) => (start * 26) + character.charCodeAt(0) - 96, 0);
+        }
+        return 1;
     }
     copyListItemContents(documentElement, paragraph, listItem) {
         Array.prototype.slice.call(paragraph.childNodes).forEach((childNode) => {
@@ -29008,7 +29124,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             type: ViewChild,
             args: ['editorHost']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteRichTextAreaFieldComponent, { className: "WriteRichTextAreaFieldComponent", filePath: "lib/shared/components/palette/rich-text-area/write-rich-text-area-field.component.ts", lineNumber: 137 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteRichTextAreaFieldComponent, { className: "WriteRichTextAreaFieldComponent", filePath: "lib/shared/components/palette/rich-text-area/write-rich-text-area-field.component.ts", lineNumber: 139 }); })();
 
 class ReadTextFieldComponent extends AbstractFieldReadComponent {
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadTextFieldComponent_BaseFactory; return function ReadTextFieldComponent_Factory(__ngFactoryType__) { return (ɵReadTextFieldComponent_BaseFactory || (ɵReadTextFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadTextFieldComponent)))(__ngFactoryType__ || ReadTextFieldComponent); }; })();
@@ -31438,6 +31554,7 @@ function ManageCaseFlagsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("for", i0.ɵɵinterpolate1("flag-selection-", i_r4))("innerHTML", ctx_r0.sanitizeHtml(i0.ɵɵpipeBind1(3, 6, flagDisplay_r3)), i0.ɵɵsanitizeHtml);
 } }
 class ManageCaseFlagsComponent extends AbstractJourneyComponent {
+    sanitizer;
     formGroup;
     flagsData;
     caseTitle;
@@ -31452,8 +31569,9 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
     selectedControlName = 'selectedManageCaseLocation';
     excludedFlagStatuses = [CaseFlagStatus.INACTIVE, CaseFlagStatus.NOT_APPROVED];
     cachedControls;
-    constructor(multipageComponentStateService) {
+    constructor(multipageComponentStateService, sanitizer) {
         super(multipageComponentStateService);
+        this.sanitizer = sanitizer;
     }
     ngOnInit() {
         this.manageCaseFlagTitle = this.setManageCaseFlagTitle(this.displayContextParameter);
@@ -31703,9 +31821,9 @@ 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 DOMPurify.sanitize(content ?? '');
+        return this.sanitizer.sanitize(SecurityContext.HTML, content ?? '') ?? '';
     }
-    static ɵfac = function ManageCaseFlagsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManageCaseFlagsComponent)(i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵfac = function ManageCaseFlagsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManageCaseFlagsComponent)(i0.ɵɵdirectiveInject(MultipageComponentStateService), i0.ɵɵdirectiveInject(i1$5.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) {
             i0.ɵɵelementContainerStart(0, 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "fieldset", 2)(3, "legend", 3)(4, "h1", 4);
@@ -31732,7 +31850,7 @@ 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 }], { formGroup: [{
+    }], () => [{ type: MultipageComponentStateService }, { type: i1$5.DomSanitizer }], { formGroup: [{
             type: Input
         }], flagsData: [{
             type: Input
@@ -34107,7 +34225,6 @@ function ReadComplexFieldCollectionTableComponent_th_10_Template(rf, ctx) { if (
     i0.ɵɵelementStart(4, "a", 9);
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵlistener("click", function ReadComplexFieldCollectionTableComponent_th_10_Template_a_click_4_listener($event) { const heading_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.sortRowsByColumns(heading_r2); return i0.ɵɵresetView($event.preventDefault()); })("keyup.enter", function ReadComplexFieldCollectionTableComponent_th_10_Template_a_keyup_enter_4_listener() { const heading_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.sortRowsByColumns(heading_r2)); });
-    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const heading_r2 = ctx.$implicit;
@@ -34115,9 +34232,8 @@ function ReadComplexFieldCollectionTableComponent_th_10_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 3, ctx_r2.columnsAllLabels[heading_r2].label));
     i0.ɵɵadvance(2);
+    i0.ɵɵproperty("innerHTML", ctx_r2.sortWidget(ctx_r2.columnsAllLabels[heading_r2]), i0.ɵɵsanitizeHtml);
     i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(5, 5, "Sort " + ctx_r2.columnsAllLabels[heading_r2].label));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.sortWidget(ctx_r2.columnsAllLabels[heading_r2]));
 } }
 function ReadComplexFieldCollectionTableComponent_ng_container_12_ng_container_2_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
@@ -34327,11 +34443,15 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
         if (this.isHidden[row]) {
             return 'assets/img/accordion-plus.png';
         }
-        if (this.isVerticleDataNotEmpty(row)) {
-            return 'assets/img/accordion-minus.png';
+        else {
+            if (this.isVerticleDataNotEmpty(row)) {
+                return 'assets/img/accordion-minus.png';
+            }
+            else {
+                this.isHidden[row] = true;
+                return 'assets/img/accordion-plus.png';
+            }
         }
-        this.isHidden[row] = true;
-        return 'assets/img/accordion-plus.png';
     }
     /**
      * Needs to be called before 'ccdFieldsFilter' pipe is used, as it needs a caseField value.
@@ -34356,7 +34476,7 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
             field_type: fieldType
         });
     }
-    keepOriginalOrder = (a) => a.key;
+    keepOriginalOrder = (a, b) => a.key;
     sortRowsByColumns(column) {
         const shouldSortInAscendingOrder = this.columnsHorizontalLabel[column].sortOrder === SortOrder$1.UNSORTED
             || this.columnsHorizontalLabel[column].sortOrder === SortOrder$1.DESCENDING;
@@ -34399,7 +34519,7 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
         }
     }
     sortWidget(column) {
-        return String.fromCharCode(ReadComplexFieldCollectionTableComponent.isSortAscending(column) ? 9660 : 9650);
+        return ReadComplexFieldCollectionTableComponent.isSortAscending(column) ? '&#9660;' : '&#9650;';
     }
     populateHorizontalLabels(labelsHorizontal, allLabels, labelsVertical) {
         for (const id of this.columns) {
@@ -34443,7 +34563,7 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
         return result;
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadComplexFieldCollectionTableComponent_BaseFactory; return function ReadComplexFieldCollectionTableComponent_Factory(__ngFactoryType__) { return (ɵReadComplexFieldCollectionTableComponent_BaseFactory || (ɵReadComplexFieldCollectionTableComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadComplexFieldCollectionTableComponent)))(__ngFactoryType__ || ReadComplexFieldCollectionTableComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldCollectionTableComponent, selectors: [["ccd-read-complex-field-collection-table"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 6, consts: [["showEmptyTd", ""], ["SimpleRow", ""], [1, "complex-panel", 3, "hidden"], [1, "complex-panel-title"], [1, "text-16"], ["aria-describedby", "complex panel table", 1, "complex-panel-table"], ["scope", "col", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], ["scope", "col"], ["href", "#", 1, "sort-widget", 3, "click", "keyup.enter"], [1, "new-table-row", "accordion-heading", 3, "keyup", "click"], [2, "float", "right"], ["href", "#", 3, "click"], ["alt", "accordion-img", 1, "accordion-image", 3, "src"], [3, "hidden"], [3, "colSpan"], ["aria-describedby", "complex panel table expanded", 1, "complex-panel-table"], [4, "ngIf", "ngIfElse"], [3, "caseField", "context"], ["class", "complex-panel-simple-field accordion-body", 3, "hidden", 4, "ngIf"], [3, "hidden", 4, "ngIf"], [1, "complex-panel-simple-field", "accordion-body", 3, "hidden"], ["class", "text-16", 4, "ngIf"], ["colspan", "2"], ["class", "complex-panel-compound-field", 3, "hidden", 4, "ngIf", "ngIfElse"], [1, "complex-panel-compound-field", 3, "hidden"], [1, "complex-panel-nested-field", 3, "hidden"], [4, "ngIf"]], template: function ReadComplexFieldCollectionTableComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldCollectionTableComponent, selectors: [["ccd-read-complex-field-collection-table"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 6, consts: [["showEmptyTd", ""], ["SimpleRow", ""], [1, "complex-panel", 3, "hidden"], [1, "complex-panel-title"], [1, "text-16"], ["aria-describedby", "complex panel table", 1, "complex-panel-table"], ["scope", "col", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], ["scope", "col"], ["href", "#", 1, "sort-widget", 3, "click", "keyup.enter", "innerHTML"], [1, "new-table-row", "accordion-heading", 3, "keyup", "click"], [2, "float", "right"], ["href", "#", 3, "click"], ["alt", "accordion-img", 1, "accordion-image", 3, "src"], [3, "hidden"], [3, "colSpan"], ["aria-describedby", "complex panel table expanded", 1, "complex-panel-table"], [4, "ngIf", "ngIfElse"], [3, "caseField", "context"], ["class", "complex-panel-simple-field accordion-body", 3, "hidden", 4, "ngIf"], [3, "hidden", 4, "ngIf"], [1, "complex-panel-simple-field", "accordion-body", 3, "hidden"], ["class", "text-16", 4, "ngIf"], ["colspan", "2"], ["class", "complex-panel-compound-field", 3, "hidden", 4, "ngIf", "ngIfElse"], [1, "complex-panel-compound-field", 3, "hidden"], [1, "complex-panel-nested-field", 3, "hidden"], [4, "ngIf"]], template: function ReadComplexFieldCollectionTableComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2)(1, "dl", 3)(2, "dt")(3, "span", 4);
             i0.ɵɵtext(4);
             i0.ɵɵpipe(5, "rpxTranslate");
@@ -34451,7 +34571,7 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
             i0.ɵɵelement(6, "dd");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(7, "table", 5)(8, "tbody")(9, "tr");
-            i0.ɵɵtemplate(10, ReadComplexFieldCollectionTableComponent_th_10_Template, 7, 7, "th", 6);
+            i0.ɵɵtemplate(10, ReadComplexFieldCollectionTableComponent_th_10_Template, 6, 7, "th", 6);
             i0.ɵɵelement(11, "th");
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(12, ReadComplexFieldCollectionTableComponent_ng_container_12_Template, 15, 20, "ng-container", 7);
@@ -34468,7 +34588,7 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadComplexFieldCollectionTableComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-complex-field-collection-table', standalone: false, template: "<div class=\"complex-panel\" [hidden]=\"caseField.hidden\">\n  <dl class=\"complex-panel-title\">\n    <dt><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></dt>\n    <dd></dd>\n  </dl>\n  <table class=\"complex-panel-table\" aria-describedby=\"complex panel table\">\n    <tbody>\n    <!-- <COMPLEX table field header>-->\n    <tr>\n      <th *ngFor=\"let heading of columns\" scope=\"col\">\n        <span class=\"text-16\">{{columnsAllLabels[heading].label | rpxTranslate}}</span>\n        <a href=\"#\"\n           (click)=\"sortRowsByColumns(heading); $event.preventDefault()\"\n           (keyup.enter)=\"sortRowsByColumns(heading)\"\n           class=\"sort-widget\"\n           [attr.aria-label]=\"'Sort ' + columnsAllLabels[heading].label | rpxTranslate\"\n        >{{ sortWidget(columnsAllLabels[heading]) }}</a>\n      </th>\n      <th></th>\n    </tr>\n    <!-- </COMPLEX table field header>-->\n    <ng-container *ngFor=\"let item of rows; let i = index;\">\n      <!-- <COMPLEX table collapsed view>-->\n      <tr class=\"new-table-row accordion-heading\" (keyup)=\"$event.key === 'Enter' ? (isHidden[i] = !isHidden[i]) : null\" (click)=\"isHidden[i] = !isHidden[i]\"\n          [class.last-accordion]=\"isHidden[i]\">\n        <ng-container *ngFor=\"let heading of columns\">\n          <td class=\"text-16\">\n            <div *ngIf=\"item[heading]; else showEmptyTd\">\n              <ccd-field-read\n                [caseField]=\"toCaseField(heading, item[heading].label, columnsHorizontalLabel[heading].type, item[heading])\"\n                [context]=\"context\"></ccd-field-read>\n            </div>\n            <ng-template #showEmptyTd>\n              <div>&nbsp;</div>\n            </ng-template>\n          </td>\n        </ng-container>\n        <td>\n          <div style=\"float: right;\">\n            <a href=\"#\" (click)=\"$event.preventDefault()\"> <img src=\"{{ getImage(i) }}\" alt=\"accordion-img\" class=\"accordion-image\"/></a>\n          </div>\n        </td>\n      </tr>\n      <!-- </COMPLEX table collapsed view>-->\n      <!-- <COMPLEX table expanded view>-->\n      <tr [hidden]=\"isHidden[i]\">\n        <td [colSpan]=\"columns.length + 1\">\n          <table class=\"complex-panel-table\" aria-describedby=\"complex panel table expanded\">\n            <tbody>\n            <ng-container\n              *ngFor=\"let vLabel of columnsVerticalLabel | keyvalue: keepOriginalOrder | ccdCollectionTableCaseFieldsFilter: caseField: rows[i] | ccdReadFieldsFilter:true :undefined :true\">\n              <!-- <COMPLEX table expandable body simple field>-->\n              <tr class=\"complex-panel-simple-field accordion-body\" *ngIf=\"item[vLabel.id]\" [hidden]=\"vLabel.hidden\">\n                <th scope=\"col\"><span class=\"text-16\">{{ vLabel.label | rpxTranslate }}</span></th>\n                <td *ngIf=\"vLabel['type'] !== 'Complex'\" class=\"text-16\">\n                  <ccd-field-read [caseField]=\"toCaseField('', vLabel.label, vLabel.field_type, item[vLabel.id])\"\n                                  [context]=\"context\"></ccd-field-read>\n                </td>\n              </tr>\n              <!-- </COMPLEX table expandable body simple field>-->\n\n              <!-- <COMPLEX table expandable body complex field>-->\n              <tr *ngIf=\"vLabel['type'] === 'Complex' && addCaseFieldValue(vLabel, item[vLabel.id])\" [hidden]=\"vLabel.hidden\">\n                <td colspan=\"2\">\n                  <ng-container *ngFor=\"let caseField of vLabel | ccdReadFieldsFilter:true :undefined :true\">\n                      <tr class=\"complex-panel-compound-field\" *ngIf=\"(caseField | ccdIsCompound); else SimpleRow\" [hidden]=\"caseField\">\n                        <td colspan=\"2\">\n                          <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                        </td>\n                      </tr>\n                      <ng-template #SimpleRow>\n                        <tr class=\"complex-panel-nested-field\" [hidden]=\"caseField.hidden\">\n                          <th scope=\"col\"><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></th>\n                          <td *ngIf=\"!item[vLabel.id]?.hasOwnProperty('CaseReference')\">\n                            <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                          </td>\n                          <td *ngIf=\"item[vLabel.id]?.hasOwnProperty('CaseReference')\">\n                            <ccd-read-case-link-field [caseField]=\"addCaseReferenceValue(caseField, item[vLabel.id].CaseReference)\" [context]=\"context\"></ccd-read-case-link-field>\n                          </td>\n                        </tr>\n                      </ng-template>\n                  </ng-container>\n                </td>\n              </tr>\n              <!-- <COMPLEX table expandable body complex field>-->\n            </ng-container>\n            </tbody>\n          </table>\n        </td>\n      </tr>\n      <!-- </COMPLEX table expanded view>-->\n    </ng-container>\n    </tbody>\n  </table>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th{border-bottom:none}.complex-panel .complex-panel-table th{padding-left:5px;font-weight:700;border-bottom:none}.complex-panel .complex-panel-table td{padding-left:5px;padding-top:0;padding-bottom:0;border-bottom:none}.complex-panel .new-table-row{border-top:1px solid #bfc1c3}.complex-panel .complex-panel-simple-field th{padding-left:5px;padding-top:0;padding-bottom:0;width:295px}.complex-panel .complex-panel-nested-field th{padding-left:33px;padding-top:0;padding-bottom:0;width:200px}.complex-panel .complex-panel-compound-field td{padding:5px;border-bottom:none}.sort-widget{cursor:pointer;text-decoration:none;color:#0b0c0c}.accordion-wrapper{margin-bottom:20px}.accordion-wrapper .heading-medium{margin:0}.accordion-wrapper .accordion-heading{border-top:1px solid #bfc1c3;padding-top:20px;padding-bottom:10px;height:20px;cursor:pointer}.accordion-wrapper .accordion-heading .accordion-image{width:25px;margin-right:20px}.accordion-wrapper .accordion-body{margin-top:20px;margin-right:20px}.accordion-wrapper .last-accordion{border-bottom:1px solid #bfc1c3;padding-bottom:30px}\n"] }]
+        args: [{ selector: 'ccd-read-complex-field-collection-table', standalone: false, template: "<div class=\"complex-panel\" [hidden]=\"caseField.hidden\">\n  <dl class=\"complex-panel-title\">\n    <dt><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></dt>\n    <dd></dd>\n  </dl>\n  <table class=\"complex-panel-table\" aria-describedby=\"complex panel table\">\n    <tbody>\n    <!-- <COMPLEX table field header>-->\n    <tr>\n      <th *ngFor=\"let heading of columns\" scope=\"col\">\n        <span class=\"text-16\">{{columnsAllLabels[heading].label | rpxTranslate}}</span>\n        <a href=\"#\"\n           (click)=\"sortRowsByColumns(heading); $event.preventDefault()\"\n           (keyup.enter)=\"sortRowsByColumns(heading)\"\n           class=\"sort-widget\"\n           [attr.aria-label]=\"'Sort ' + columnsAllLabels[heading].label | rpxTranslate\"\n           [innerHTML]=\"sortWidget(columnsAllLabels[heading])\"></a>\n      </th>\n      <th></th>\n    </tr>\n    <!-- </COMPLEX table field header>-->\n    <ng-container *ngFor=\"let item of rows; let i = index;\">\n      <!-- <COMPLEX table collapsed view>-->\n      <tr class=\"new-table-row accordion-heading\" (keyup)=\"$event.key === 'Enter' ? (isHidden[i] = !isHidden[i]) : null\" (click)=\"isHidden[i] = !isHidden[i]\"\n          [class.last-accordion]=\"isHidden[i]\">\n        <ng-container *ngFor=\"let heading of columns\">\n          <td class=\"text-16\">\n            <div *ngIf=\"item[heading]; else showEmptyTd\">\n              <ccd-field-read\n                [caseField]=\"toCaseField(heading, item[heading].label, columnsHorizontalLabel[heading].type, item[heading])\"\n                [context]=\"context\"></ccd-field-read>\n            </div>\n            <ng-template #showEmptyTd>\n              <div>&nbsp;</div>\n            </ng-template>\n          </td>\n        </ng-container>\n        <td>\n          <div style=\"float: right;\">\n            <a href=\"#\" (click)=\"$event.preventDefault()\"> <img src=\"{{ getImage(i) }}\" alt=\"accordion-img\" class=\"accordion-image\"/></a>\n          </div>\n        </td>\n      </tr>\n      <!-- </COMPLEX table collapsed view>-->\n      <!-- <COMPLEX table expanded view>-->\n      <tr [hidden]=\"isHidden[i]\">\n        <td [colSpan]=\"columns.length + 1\">\n          <table class=\"complex-panel-table\" aria-describedby=\"complex panel table expanded\">\n            <tbody>\n            <ng-container\n              *ngFor=\"let vLabel of columnsVerticalLabel | keyvalue: keepOriginalOrder | ccdCollectionTableCaseFieldsFilter: caseField: rows[i] | ccdReadFieldsFilter:true :undefined :true\">\n              <!-- <COMPLEX table expandable body simple field>-->\n              <tr class=\"complex-panel-simple-field accordion-body\" *ngIf=\"item[vLabel.id]\" [hidden]=\"vLabel.hidden\">\n                <th scope=\"col\"><span class=\"text-16\">{{ vLabel.label | rpxTranslate }}</span></th>\n                <td *ngIf=\"vLabel['type'] !== 'Complex'\" class=\"text-16\">\n                  <ccd-field-read [caseField]=\"toCaseField('', vLabel.label, vLabel.field_type, item[vLabel.id])\"\n                                  [context]=\"context\"></ccd-field-read>\n                </td>\n              </tr>\n              <!-- </COMPLEX table expandable body simple field>-->\n\n              <!-- <COMPLEX table expandable body complex field>-->\n              <tr *ngIf=\"vLabel['type'] === 'Complex' && addCaseFieldValue(vLabel, item[vLabel.id])\" [hidden]=\"vLabel.hidden\">\n                <td colspan=\"2\">\n                  <ng-container *ngFor=\"let caseField of vLabel | ccdReadFieldsFilter:true :undefined :true\">\n                      <tr class=\"complex-panel-compound-field\" *ngIf=\"(caseField | ccdIsCompound); else SimpleRow\" [hidden]=\"caseField\">\n                        <td colspan=\"2\">\n                          <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                        </td>\n                      </tr>\n                      <ng-template #SimpleRow>\n                        <tr class=\"complex-panel-nested-field\" [hidden]=\"caseField.hidden\">\n                          <th scope=\"col\"><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></th>\n                          <td *ngIf=\"!item[vLabel.id]?.hasOwnProperty('CaseReference')\">\n                            <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                          </td>\n                          <td *ngIf=\"item[vLabel.id]?.hasOwnProperty('CaseReference')\">\n                            <ccd-read-case-link-field [caseField]=\"addCaseReferenceValue(caseField, item[vLabel.id].CaseReference)\" [context]=\"context\"></ccd-read-case-link-field>\n                          </td>\n                        </tr>\n                      </ng-template>\n                  </ng-container>\n                </td>\n              </tr>\n              <!-- <COMPLEX table expandable body complex field>-->\n            </ng-container>\n            </tbody>\n          </table>\n        </td>\n      </tr>\n      <!-- </COMPLEX table expanded view>-->\n    </ng-container>\n    </tbody>\n  </table>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th{border-bottom:none}.complex-panel .complex-panel-table th{padding-left:5px;font-weight:700;border-bottom:none}.complex-panel .complex-panel-table td{padding-left:5px;padding-top:0;padding-bottom:0;border-bottom:none}.complex-panel .new-table-row{border-top:1px solid #bfc1c3}.complex-panel .complex-panel-simple-field th{padding-left:5px;padding-top:0;padding-bottom:0;width:295px}.complex-panel .complex-panel-nested-field th{padding-left:33px;padding-top:0;padding-bottom:0;width:200px}.complex-panel .complex-panel-compound-field td{padding:5px;border-bottom:none}.sort-widget{cursor:pointer;text-decoration:none;color:#0b0c0c}.accordion-wrapper{margin-bottom:20px}.accordion-wrapper .heading-medium{margin:0}.accordion-wrapper .accordion-heading{border-top:1px solid #bfc1c3;padding-top:20px;padding-bottom:10px;height:20px;cursor:pointer}.accordion-wrapper .accordion-heading .accordion-image{width:25px;margin-right:20px}.accordion-wrapper .accordion-body{margin-top:20px;margin-right:20px}.accordion-wrapper .last-accordion{border-bottom:1px solid #bfc1c3;padding-bottom:30px}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadComplexFieldCollectionTableComponent, { className: "ReadComplexFieldCollectionTableComponent", filePath: "lib/shared/components/palette/complex/read-complex-field-collection-table.component.ts", lineNumber: 13 }); })();
 
@@ -45172,15 +45292,13 @@ function SearchResultComponent_table_0_th_11_div_5_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(0, "div", 28)(1, "a", 29);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵlistener("click", function SearchResultComponent_table_0_th_11_div_5_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r6); const col_r5 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.sort(col_r5); return i0.ɵɵresetView($event.preventDefault()); })("keyup.enter", function SearchResultComponent_table_0_th_11_div_5_Template_a_keyup_enter_1_listener() { i0.ɵɵrestoreView(_r6); const col_r5 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sort(col_r5)); });
-    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const col_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r0.sortWidget(col_r5), i0.ɵɵsanitizeHtml);
     i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 2, "Sort " + col_r5.label));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.sortWidget(col_r5));
 } }
 function SearchResultComponent_table_0_th_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -45189,7 +45307,7 @@ function SearchResultComponent_table_0_th_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, SearchResultComponent_table_0_th_11_div_5_Template, 4, 4, "div", 27);
+    i0.ɵɵtemplate(5, SearchResultComponent_table_0_th_11_div_5_Template, 3, 4, "div", 27);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const col_r5 = ctx.$implicit;
@@ -45538,7 +45656,7 @@ class SearchResultComponent {
     ngOnInit() {
         if (this.preSelectedCases) {
             for (const preSelectedCase of this.preSelectedCases) {
-                if (this.selectedCases && !this.selectedCases.some((aCase) => aCase.case_id === preSelectedCase.case_id)) {
+                if (this.selectedCases && !this.selectedCases.some(aCase => aCase.case_id === preSelectedCase.case_id)) {
                     this.selectedCases.push(preSelectedCase);
                 }
             }
@@ -45547,7 +45665,7 @@ class SearchResultComponent {
         this.selection.emit(this.selectedCases);
     }
     ngOnChanges(changes) {
-        if (changes.resultView) {
+        if (changes['resultView']) {
             this.hideRows = false;
             this.sortParameters = undefined;
             // Clone `resultView` to prevent sorting the external variable
@@ -45562,8 +45680,8 @@ class SearchResultComponent {
             this.hydrateResultView();
             this.draftsCount = this.draftsCount ? this.draftsCount : this.numberOfDrafts();
         }
-        if (changes.page) {
-            this.selected.page = (changes.page).currentValue;
+        if (changes['page']) {
+            this.selected.page = (changes['page']).currentValue;
         }
     }
     isTranslatable(col) {
@@ -45593,7 +45711,7 @@ class SearchResultComponent {
     selectAll() {
         if (this.allOnPageSelected()) {
             // all cases already selected, so unselect all on this page
-            this.resultView.results.forEach((c) => {
+            this.resultView.results.forEach(c => {
                 this.selectedCases.forEach((s, i) => {
                     if (c.case_id === s.case_id) {
                         this.selectedCases.splice(i, 1);
@@ -45602,7 +45720,7 @@ class SearchResultComponent {
             });
         }
         else {
-            this.resultView.results.forEach((c) => {
+            this.resultView.results.forEach(c => {
                 if (!this.isSelected(c) && this.canBeShared(c)) {
                     this.selectedCases.push(c);
                 }
@@ -45654,21 +45772,21 @@ class SearchResultComponent {
      */
     // A longer term resolution is to move this piece of logic to the backend
     hydrateResultView() {
-        this.resultView.results.forEach((result) => {
+        this.resultView.results.forEach(result => {
             const caseFields = [];
-            Object.keys(result.case_fields).forEach((fieldId) => {
+            Object.keys(result.case_fields).forEach(fieldId => {
                 const field = result.case_fields[fieldId];
                 caseFields.push(Object.assign(new CaseField(), {
                     id: fieldId,
                     label: null,
                     field_type: {},
                     value: field,
-                    display_context: null
+                    display_context: null,
                 }));
             });
             result.hydrated_case_fields = caseFields;
             result.columns = {};
-            this.resultView.columns.forEach((col) => {
+            this.resultView.columns.forEach(col => {
                 result.columns[col.case_field_id] = this.buildCaseField(col, result);
             });
         });
@@ -45706,7 +45824,7 @@ class SearchResultComponent {
             field_type: col.case_field_type,
             value: result.case_fields[col.case_field_id],
             display_context_parameter: col.display_context_parameter,
-            display_context: col.display_context
+            display_context: col.display_context,
         });
     }
     getColumnsWithPrefix(col, result) {
@@ -45759,7 +45877,7 @@ class SearchResultComponent {
         else {
             condition = this.isSortAscending(column);
         }
-        return String.fromCodePoint(condition ? 9660 : 9650);
+        return condition ? '&#9660;' : '&#9650;';
     }
     activityEnabled() {
         return this.activityService.isEnabled;
@@ -45768,13 +45886,19 @@ class SearchResultComponent {
         if (col.case_field_id === '[CASE_REFERENCE]') {
             return this.caseReferencePipe.transform(result.case_fields[col.case_field_id]);
         }
-        if (col.id) {
-            if (col.id === '[CASE_REFERENCE]') {
-                return this.caseReferencePipe.transform(result.case_fields[col.id]);
+        else {
+            if (col.id) {
+                if (col.id === '[CASE_REFERENCE]') {
+                    return this.caseReferencePipe.transform(result.case_fields[col.id]);
+                }
+                else {
+                    return result.case_fields[col.id];
+                }
+            }
+            else {
+                return result.case_fields[col.case_field_id];
             }
-            return result.case_fields[col.id];
         }
-        return result.case_fields[col.case_field_id];
     }
     draftPrefixOrGet(col, result) {
         return result.case_id.startsWith(DRAFT_PREFIX) ? DRAFT_PREFIX : this.hyphenateIfCaseReferenceOrGet(col, result);
@@ -45809,7 +45933,7 @@ class SearchResultComponent {
         return currentPage > 1 ? this.draftsCount : 0;
     }
     numberOfDrafts() {
-        return this.resultView.results.filter((_) => _.case_id.startsWith(DRAFT_PREFIX)).length;
+        return this.resultView.results.filter(_ => _.case_id.startsWith(DRAFT_PREFIX)).length;
     }
     goToCase(caseId) {
         this.clickCase.emit({
@@ -45826,7 +45950,7 @@ class SearchResultComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     noop() { }
     static ɵfac = function SearchResultComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchResultComponent)(i0.ɵɵdirectiveInject(SearchResultViewItemComparatorFactory), i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(ActivityService), i0.ɵɵdirectiveInject(CaseReferencePipe), i0.ɵɵdirectiveInject(PlaceholderService), i0.ɵɵdirectiveInject(BrowserService), i0.ɵɵdirectiveInject(SessionStorageService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultComponent, selectors: [["ccd-search-result"]], inputs: { caseLinkUrlTemplate: "caseLinkUrlTemplate", jurisdiction: "jurisdiction", caseType: "caseType", caseState: "caseState", caseFilterFG: "caseFilterFG", resultView: "resultView", page: "page", paginationMetadata: "paginationMetadata", metadataFields: "metadataFields", selectionEnabled: "selectionEnabled", showOnlySelected: "showOnlySelected", preSelectedCases: "preSelectedCases", consumerSortingEnabled: "consumerSortingEnabled" }, outputs: { selection: "selection", changePage: "changePage", clickCase: "clickCase", sortHandler: "sortHandler" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [["case_reference", ""], [4, "ngIf"], [3, "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel", "pageChange", 4, "ngIf"], ["class", "notification", 4, "ngIf"], ["id", "search-result-heading__text", "tabindex", "-1", 1, "heading-h2"], ["class", "govuk-warning-text pagination-limit-warning", 4, "ngIf"], ["class", "pagination-top", 4, "ngIf"], ["class", "reset-selection", 4, "ngIf"], ["scope", "row"], ["class", "govuk-table__checkbox", 4, "ngIf"], ["class", "search-result-column-header", "scope", "col", 4, "ngFor", "ngForOf"], ["style", "width: 110px;", "scope", "col", 4, "ngIf"], [1, "govuk-warning-text", "pagination-limit-warning"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], [1, "pagination-top"], ["id", "search-result-summary__text", 1, "text-16"], [1, "govuk-!-font-weight-bold"], [1, "reset-selection"], ["href", "#", 1, "search-result-reset-link", 3, "click"], [1, "govuk-table__checkbox"], [1, "govuk-checkboxes__item"], ["id", "select-all", "name", "select-all", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "checked", "disabled"], ["for", "select-all", 1, "govuk-label", "govuk-checkboxes__label"], ["scope", "col", 1, "search-result-column-header"], [1, "search-result-column-label", 3, "click", "keyup"], ["class", "search-result-column-sort", 4, "ngIf"], [1, "search-result-column-sort"], ["href", "#", 1, "sort-widget", 3, "click", "keyup.enter"], ["scope", "col", 2, "width", "110px"], [4, "ngFor", "ngForOf"], ["class", "govuk-table__checkbox", "scope", "col", 4, "ngIf"], ["class", "search-result-column-cell", "scope", "row", 4, "ngFor", "ngForOf"], ["scope", "col", 1, "govuk-table__checkbox"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "name", "checked", "disabled"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["scope", "row", 1, "search-result-column-cell"], ["class", "govuk-link", 3, "routerLink", 4, "ngIf"], ["class", "text-16", 3, "visibility", 4, "ngIf"], [1, "govuk-link", 3, "routerLink"], ["class", "text-16", 4, "ngIf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute", 4, "ngIf", "ngIfElse"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute"], [3, "caseId", "displayMode"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "keyup", "id", "name", "checked", "disabled"], [3, "pageChange", "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], [1, "notification"]], template: function SearchResultComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultComponent, selectors: [["ccd-search-result"]], inputs: { caseLinkUrlTemplate: "caseLinkUrlTemplate", jurisdiction: "jurisdiction", caseType: "caseType", caseState: "caseState", caseFilterFG: "caseFilterFG", resultView: "resultView", page: "page", paginationMetadata: "paginationMetadata", metadataFields: "metadataFields", selectionEnabled: "selectionEnabled", showOnlySelected: "showOnlySelected", preSelectedCases: "preSelectedCases", consumerSortingEnabled: "consumerSortingEnabled" }, outputs: { selection: "selection", changePage: "changePage", clickCase: "clickCase", sortHandler: "sortHandler" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [["case_reference", ""], [4, "ngIf"], [3, "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel", "pageChange", 4, "ngIf"], ["class", "notification", 4, "ngIf"], ["id", "search-result-heading__text", "tabindex", "-1", 1, "heading-h2"], ["class", "govuk-warning-text pagination-limit-warning", 4, "ngIf"], ["class", "pagination-top", 4, "ngIf"], ["class", "reset-selection", 4, "ngIf"], ["scope", "row"], ["class", "govuk-table__checkbox", 4, "ngIf"], ["class", "search-result-column-header", "scope", "col", 4, "ngFor", "ngForOf"], ["style", "width: 110px;", "scope", "col", 4, "ngIf"], [1, "govuk-warning-text", "pagination-limit-warning"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], [1, "pagination-top"], ["id", "search-result-summary__text", 1, "text-16"], [1, "govuk-!-font-weight-bold"], [1, "reset-selection"], ["href", "#", 1, "search-result-reset-link", 3, "click"], [1, "govuk-table__checkbox"], [1, "govuk-checkboxes__item"], ["id", "select-all", "name", "select-all", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "checked", "disabled"], ["for", "select-all", 1, "govuk-label", "govuk-checkboxes__label"], ["scope", "col", 1, "search-result-column-header"], [1, "search-result-column-label", 3, "click", "keyup"], ["class", "search-result-column-sort", 4, "ngIf"], [1, "search-result-column-sort"], ["href", "#", 1, "sort-widget", 3, "click", "keyup.enter", "innerHTML"], ["scope", "col", 2, "width", "110px"], [4, "ngFor", "ngForOf"], ["class", "govuk-table__checkbox", "scope", "col", 4, "ngIf"], ["class", "search-result-column-cell", "scope", "row", 4, "ngFor", "ngForOf"], ["scope", "col", 1, "govuk-table__checkbox"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "name", "checked", "disabled"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["scope", "row", 1, "search-result-column-cell"], ["class", "govuk-link", 3, "routerLink", 4, "ngIf"], ["class", "text-16", 3, "visibility", 4, "ngIf"], [1, "govuk-link", 3, "routerLink"], ["class", "text-16", 4, "ngIf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute", 4, "ngIf", "ngIfElse"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute"], [3, "caseId", "displayMode"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "keyup", "id", "name", "checked", "disabled"], [3, "pageChange", "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], [1, "notification"]], template: function SearchResultComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SearchResultComponent_table_0_Template, 16, 11, "table", 1)(1, SearchResultComponent_ccd_pagination_1_Template, 1, 6, "ccd-pagination", 2)(2, SearchResultComponent_div_2_Template, 4, 6, "div", 3);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.hasResults() || ctx.hasDrafts());
@@ -45838,7 +45962,7 @@ class SearchResultComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-search-result', standalone: false, template: "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ (caseState ? 'Your cases' : 'Search result') | rpxTranslate}}</h2>\n\n    <div class=\"govuk-warning-text pagination-limit-warning\" *ngIf=\"paginationLimitEnforced\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-warning-text__assistive\">{{'Warning' | rpxTranslate}}</span>\n        {{'The total size of the result set is' | rpxTranslate}} {{paginationMetadata.totalResultsCount | number}}. {{'Only the first 10,000 records are available for display.' | rpxTranslate}}\n      </strong>\n    </div>\n\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\">\n      <output [attr.aria-label]=\"getTotalResults() + ' ' + ('results have been found' | rpxTranslate)\"></output>\n          <span class=\"text-16\" id=\"search-result-summary__text\">{{'Showing' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        {{'to' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        {{'of' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> {{'results' | rpxTranslate}}</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n    [attr.aria-label]=\"'Reset selection' | rpxTranslate\">\n      <span><a class=\"search-result-reset-link\" href=\"#\" (click)=\"clearSelection(); $event.preventDefault()\">{{'Reset case selection' | rpxTranslate}}</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\" [attr.aria-labelledby]=\"'select-all'\">\n          </label>\n        </div>\n      </td>\n      <th *ngFor=\"let col of resultView.columns\" class=\"search-result-column-header\"\n        [attr.aria-sort]=\"isSortAscending(col) === null ? null : (isSortAscending(col) ? 'ascending' : 'descending')\" scope=\"col\">\n        <div>\n          <div class=\"search-result-column-label\" (click)=\"sort(col)\" (keyup)=\"noop()\">\n            {{ isTranslatable(col) ? (col.label | rpxTranslate) : col.label }}\n          </div>\n          <div *ngIf=\"comparator(col)\" class=\"search-result-column-sort\">\n            <a (click)=\"sort(col); $event.preventDefault()\" (keyup.enter)=\"sort(col)\" class=\"sort-widget\" [attr.aria-label]=\"'Sort ' + col.label | rpxTranslate\" href=\"#\">{{ sortWidget(col) }}</a>\n          </div>\n        </div>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\" scope=\"col\">&ZeroWidthSpace;</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\" [attr.aria-labelledby]=\"'select-' + result.case_id\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\" [attr.aria-labelledby]=\"'select-' + result.case_id\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination\n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\"\n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"'Pagination'\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n[attr.aria-describedby]=\"'No cases found. Try using different filters.' | rpxTranslate\">\n{{'No cases found. Try using different filters.' | rpxTranslate}}\n</div>\n", styles: ["table thead tr th{vertical-align:top}table tbody tr td{font-size:16px;word-wrap:break-word}table tbody tr td a{float:left}table .caseid-col{white-space:nowrap}.notification{text-align:center;padding:30px 0;margin-top:75px}a:hover{color:#005ea5}.search-result-reset-link{padding-right:15px;padding-left:15px}.search-result-column-header{width:unset;table-layout:normal}.search-result-column-header div{display:table-cell;width:auto}@media screen and (max-width:379px){.search-result-column-header div{display:block;float:right}}.search-result-column-label{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort{font-size:16px}.sort-widget{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium{margin-top:-20px}.govuk-table__checkbox{vertical-align:middle;padding-left:3px}#search-result-heading__text:focus{outline:none}\n"] }]
+        args: [{ selector: 'ccd-search-result', standalone: false, template: "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ (caseState ? 'Your cases' : 'Search result') | rpxTranslate}}</h2>\n\n    <div class=\"govuk-warning-text pagination-limit-warning\" *ngIf=\"paginationLimitEnforced\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-warning-text__assistive\">{{'Warning' | rpxTranslate}}</span>\n        {{'The total size of the result set is' | rpxTranslate}} {{paginationMetadata.totalResultsCount | number}}. {{'Only the first 10,000 records are available for display.' | rpxTranslate}}\n      </strong>\n    </div>\n\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\">\n      <output [attr.aria-label]=\"getTotalResults() + ' ' + ('results have been found' | rpxTranslate)\"></output>\n          <span class=\"text-16\" id=\"search-result-summary__text\">{{'Showing' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        {{'to' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        {{'of' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> {{'results' | rpxTranslate}}</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n    [attr.aria-label]=\"'Reset selection' | rpxTranslate\">\n      <span><a class=\"search-result-reset-link\" href=\"#\" (click)=\"clearSelection(); $event.preventDefault()\">{{'Reset case selection' | rpxTranslate}}</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\" [attr.aria-labelledby]=\"'select-all'\">\n          </label>\n        </div>\n      </td>\n      <th *ngFor=\"let col of resultView.columns\" class=\"search-result-column-header\"\n        [attr.aria-sort]=\"isSortAscending(col) === null ? null : (isSortAscending(col) ? 'ascending' : 'descending')\" scope=\"col\">\n        <div>\n          <div class=\"search-result-column-label\" (click)=\"sort(col)\" (keyup)=\"noop()\">\n            {{ isTranslatable(col) ? (col.label | rpxTranslate) : col.label }}\n          </div>\n          <div *ngIf=\"comparator(col)\" class=\"search-result-column-sort\">\n            <a (click)=\"sort(col); $event.preventDefault()\" (keyup.enter)=\"sort(col)\" class=\"sort-widget\" [innerHTML]=\"sortWidget(col)\" [attr.aria-label]=\"'Sort ' + col.label | rpxTranslate\" href=\"#\"></a>\n          </div>\n        </div>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\" scope=\"col\">&ZeroWidthSpace;</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\" [attr.aria-labelledby]=\"'select-' + result.case_id\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\" [attr.aria-labelledby]=\"'select-' + result.case_id\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination\n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\"\n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"'Pagination'\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n[attr.aria-describedby]=\"'No cases found. Try using different filters.' | rpxTranslate\">\n{{'No cases found. Try using different filters.' | rpxTranslate}}\n</div>\n", styles: ["table thead tr th{vertical-align:top}table tbody tr td{font-size:16px;word-wrap:break-word}table tbody tr td a{float:left}table .caseid-col{white-space:nowrap}.notification{text-align:center;padding:30px 0;margin-top:75px}a:hover{color:#005ea5}.search-result-reset-link{padding-right:15px;padding-left:15px}.search-result-column-header{width:unset;table-layout:normal}.search-result-column-header div{display:table-cell;width:auto}@media screen and (max-width:379px){.search-result-column-header div{display:block;float:right}}.search-result-column-label{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort{font-size:16px}.sort-widget{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium{margin-top:-20px}.govuk-table__checkbox{vertical-align:middle;padding-left:3px}#search-result-heading__text:focus{outline:none}\n"] }]
     }], () => [{ type: SearchResultViewItemComparatorFactory }, { type: AbstractAppConfig }, { type: ActivityService }, { type: CaseReferencePipe }, { type: PlaceholderService }, { type: BrowserService }, { type: SessionStorageService }], { caseLinkUrlTemplate: [{
             type: Input
         }], jurisdiction: [{