@hmcts/rpx-xui-common-lib 3.2.17 → 3.2.18-innerHtml-update

package/fesm2022/hmcts-rpx-xui-common-lib.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, ViewEncapsulation, Input, Output, Injectable, InjectionToken, DOCUMENT, Inject, ViewChild, Pipe, ChangeDetectionStrategy, Directive, SecurityContext, ElementRef, NgModule } from '@angular/core';
+import { Component, EventEmitter, ViewEncapsulation, Input, Output, Injectable, InjectionToken, DOCUMENT, Inject, ViewChild, Pipe, ChangeDetectionStrategy, Directive, ElementRef, NgModule } from '@angular/core';
 import * as i2 from 'rpx-xui-translation';
 import { RpxTranslationModule } from 'rpx-xui-translation';
 import * as i1 from '@angular/common';
-import { formatDate, CommonModule } from '@angular/common';
+import { formatDate, DOCUMENT as DOCUMENT$1, CommonModule } from '@angular/common';
 import * as i2$3 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { combineLatest, BehaviorSubject, Subject, of as of$1, forkJoin, zip, iif } from 'rxjs';
@@ -21,6 +21,7 @@ import * as i2$2 from '@ng-idle/keepalive';
 import * as i4 from '@angular/material/legacy-autocomplete';
 import { MatLegacyAutocompleteModule } from '@angular/material/legacy-autocomplete';
 import * as i5 from '@angular/material/legacy-core';
+import DOMPurify from 'dompurify';
 import * as i1$4 from '@angular/material/legacy-tabs';
 import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
 import * as i2$4 from 'ngx-pagination';
@@ -1708,11 +1709,11 @@ class GoogleAnalyticsService {
             script1.src = `https://www.googletagmanager.com/gtag/js?id=${this.googleAnalyticsKey}`;
             this.document.head.appendChild(script1);
             const script2 = this.document.createElement('script');
-            script2.innerHTML = `
+            script2.text = `
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
-        gtag('config', '${this.googleAnalyticsKey}', {'send_page_view': false});
+        gtag('config', ${JSON.stringify(this.googleAnalyticsKey)}, {'send_page_view': false});
       `;
             this.document.head.appendChild(script2);
         }
@@ -1724,11 +1725,11 @@ class GoogleAnalyticsService {
     }
     listenForRouteChanges() {
         if (this.googleAnalyticsKey) {
-            this.router.events.subscribe(event => {
+            this.router.events.subscribe((event) => {
                 if (event instanceof NavigationEnd) {
                     this.window.gtag('config', this.googleAnalyticsKey, {
                         page_path: event.urlAfterRedirects,
-                        page_title: this.title.getTitle(),
+                        page_title: this.title.getTitle()
                     });
                 }
             });
@@ -6516,26 +6517,134 @@ class SelectedCaseListComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectedCaseListComponent, { className: "SelectedCaseListComponent", filePath: "lib/components/selected-case-list/selected-case-list.component.ts", lineNumber: 12 }); })();
 
+class SafeHtmlDirective {
+    constructor(elementRef, renderer, document) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.document = document;
+        this.allowedAttributes = [
+            'aria-label',
+            'class',
+            'href',
+            'rel',
+            'target',
+            'title'
+        ];
+        this.allowedTags = [
+            'a',
+            'b',
+            'br',
+            'div',
+            'em',
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            'li',
+            'ol',
+            'p',
+            'span',
+            'strong',
+            'u',
+            'ul'
+        ];
+    }
+    ngOnChanges() {
+        this.clearContent();
+        if (!this.xuilibSafeHtml) {
+            return;
+        }
+        // DOMPurify is the primary XSS sanitisation boundary.
+        const sanitizedContent = DOMPurify.sanitize(this.xuilibSafeHtml, {
+            ALLOWED_ATTR: this.allowedAttributes,
+            ALLOWED_TAGS: this.allowedTags
+        });
+        const parsedDocument = new DOMParser().parseFromString(sanitizedContent, 'text/html');
+        Array.from(parsedDocument.body.childNodes).forEach((node) => {
+            this.renderer.appendChild(this.elementRef.nativeElement, this.createSafeNode(node));
+        });
+    }
+    clearContent() {
+        const element = this.elementRef.nativeElement;
+        while (element.firstChild) {
+            this.renderer.removeChild(element, element.firstChild);
+        }
+    }
+    /**
+     * Rebuild the DOM instead of assigning sanitized content to innerHTML.
+     *
+     * DOMPurify performs the security sanitisation. Rebuilding the DOM also
+     * avoids introducing another innerHTML sink that security tooling may flag.
+     */
+    createSafeNode(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return this.renderer.createText(node.textContent ?? '');
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.renderer.createText('');
+        }
+        const sourceElement = node;
+        const tagName = sourceElement.tagName.toLowerCase();
+        if (!this.allowedTags.includes(tagName)) {
+            return this.createSafeFragment(sourceElement);
+        }
+        const safeElement = this.renderer.createElement(tagName);
+        Array.from(sourceElement.attributes).forEach((attribute) => {
+            if (!this.allowedAttributes.includes(attribute.name.toLowerCase())) {
+                return;
+            }
+            this.renderer.setAttribute(safeElement, attribute.name, attribute.value);
+        });
+        // Defence in depth for links opened in a new browsing context.
+        if (tagName === 'a' &&
+            safeElement.getAttribute('target')?.toLowerCase() === '_blank') {
+            this.renderer.setAttribute(safeElement, 'rel', 'noopener noreferrer');
+        }
+        Array.from(sourceElement.childNodes).forEach((childNode) => {
+            this.renderer.appendChild(safeElement, this.createSafeNode(childNode));
+        });
+        return safeElement;
+    }
+    createSafeFragment(element) {
+        const fragment = this.document.createDocumentFragment();
+        Array.from(element.childNodes).forEach((childNode) => {
+            fragment.appendChild(this.createSafeNode(childNode));
+        });
+        return fragment;
+    }
+    static { this.ɵfac = function SafeHtmlDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SafeHtmlDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(DOCUMENT$1)); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SafeHtmlDirective, selectors: [["", "xuilibSafeHtml", ""]], inputs: { xuilibSafeHtml: "xuilibSafeHtml" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SafeHtmlDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[xuilibSafeHtml]',
+                standalone: false
+            }]
+    }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
+                type: Inject,
+                args: [DOCUMENT$1]
+            }] }], { xuilibSafeHtml: [{
+            type: Input
+        }] }); })();
+
 function ServiceMessageComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "h2", 5);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("innerHTML", ctx_r0.sanitizeHtml(ctx_r0.message_cy), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("xuilibSafeHtml", ctx_r0.message_cy);
 } }
 class ServiceMessageComponent {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
+    constructor() {
         this.hideMessage = new EventEmitter();
     }
     onHideMessageEvent(key) {
         this.hideMessage.emit(key);
     }
-    // ensure no dangerous HTML is rendered in the service message banner
-    sanitizeHtml(content) {
-        return this.sanitizer.sanitize(SecurityContext.HTML, content ?? '') ?? '';
-    }
-    static { this.ɵfac = function ServiceMessageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ServiceMessageComponent)(i0.ɵɵdirectiveInject(i2$1.DomSanitizer)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ServiceMessageComponent, selectors: [["xuilib-service-message"]], inputs: { message_en: "message_en", message_cy: "message_cy", key: "key" }, outputs: { hideMessage: "hideMessage" }, standalone: false, decls: 12, vars: 8, consts: [[1, "hmcts-banner", "hmcts-banner--warning"], ["fill", "currentColor", "role", "img", "aria-label", "hmcts-warning-icon", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], [1, "govuk-heading-s", 3, "innerHTML"], ["tabindex", "0", 1, "govuk-link--no-visited-state", 3, "click", "keyup.enter", "routerLink"]], template: function ServiceMessageComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵfac = function ServiceMessageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ServiceMessageComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ServiceMessageComponent, selectors: [["xuilib-service-message"]], inputs: { message_en: "message_en", message_cy: "message_cy", key: "key" }, outputs: { hideMessage: "hideMessage" }, standalone: false, decls: 12, vars: 8, consts: [[1, "hmcts-banner", "hmcts-banner--warning"], ["fill", "currentColor", "role", "img", "aria-label", "hmcts-warning-icon", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], [1, "govuk-heading-s", 3, "xuilibSafeHtml"], ["tabindex", "0", 1, "govuk-link--no-visited-state", 3, "click", "keyup.enter", "routerLink"]], template: function ServiceMessageComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(1, "svg", 1);
@@ -6557,17 +6666,17 @@ class ServiceMessageComponent {
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 4, "Warning"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("innerHTML", ctx.sanitizeHtml(ctx.message_en), i0.ɵɵsanitizeHtml);
+            i0.ɵɵproperty("xuilibSafeHtml", ctx.message_en);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.message_cy ? 8 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 6, "Hide message"));
-        } }, dependencies: [i1$1.RouterLink, i2.RpxTranslatePipe], styles: [".govuk-link--no-visited-state[_ngcontent-%COMP%]{cursor:pointer}"] }); }
+        } }, dependencies: [i1$1.RouterLink, SafeHtmlDirective, i2.RpxTranslatePipe], styles: [".govuk-link--no-visited-state[_ngcontent-%COMP%]{cursor:pointer}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ServiceMessageComponent, [{
         type: Component,
-        args: [{ selector: 'xuilib-service-message', standalone: false, template: "<div class=\"hmcts-banner hmcts-banner--warning\">\n\n  <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"img\" aria-label=\"hmcts-warning-icon\" focusable=\"false\"\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n    <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" />\n  </svg>\n\n  <div class=\"hmcts-banner__message\">\n    <span class=\"hmcts-banner__assistive\">{{'Warning' | rpxTranslate}}</span>\n    <h2 class=\"govuk-heading-s\" [innerHTML]=\"sanitizeHtml(message_en)\"></h2>\n    @if (message_cy) {\n      <h2 class=\"govuk-heading-s\" [innerHTML]=\"sanitizeHtml(message_cy)\"></h2>\n    }\n    <a [routerLink]=\"\" tabindex=\"0\" class=\"govuk-link--no-visited-state\" (click)=\"onHideMessageEvent(key)\" (keyup.enter)=\"onHideMessageEvent(key)\">{{'Hide message' | rpxTranslate}}</a>\n  </div>\n\n</div>", styles: [".govuk-link--no-visited-state{cursor:pointer}\n"] }]
-    }], () => [{ type: i2$1.DomSanitizer }], { message_en: [{
+        args: [{ selector: 'xuilib-service-message', standalone: false, template: "<div class=\"hmcts-banner hmcts-banner--warning\">\n\n  <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"img\" aria-label=\"hmcts-warning-icon\" focusable=\"false\"\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n    <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" />\n  </svg>\n\n  <div class=\"hmcts-banner__message\">\n    <span class=\"hmcts-banner__assistive\">{{'Warning' | rpxTranslate}}</span>\n    <h2 class=\"govuk-heading-s\" [xuilibSafeHtml]=\"message_en\"></h2>\n    @if (message_cy) {\n      <h2 class=\"govuk-heading-s\" [xuilibSafeHtml]=\"message_cy\"></h2>\n    }\n    <a [routerLink]=\"\" tabindex=\"0\" class=\"govuk-link--no-visited-state\" (click)=\"onHideMessageEvent(key)\" (keyup.enter)=\"onHideMessageEvent(key)\">{{'Hide message' | rpxTranslate}}</a>\n  </div>\n\n</div>\n", styles: [".govuk-link--no-visited-state{cursor:pointer}\n"] }]
+    }], () => [], { message_en: [{
             type: Input
         }], message_cy: [{
             type: Input
@@ -6576,7 +6685,7 @@ class ServiceMessageComponent {
         }], hideMessage: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ServiceMessageComponent, { className: "ServiceMessageComponent", filePath: "lib/components/service-message/service-message.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ServiceMessageComponent, { className: "ServiceMessageComponent", filePath: "lib/components/service-message/service-message.component.ts", lineNumber: 10 }); })();
 
 function ServiceMessagesComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
@@ -6592,18 +6701,19 @@ function ServiceMessagesComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(7, "h2", 6);
     i0.ɵɵtext(8, "Error:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(9, "p", 7);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "p");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const errMsg_r1 = ctx.$implicit;
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 2, "Warning"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("innerHTML", errMsg_r1.message, i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(errMsg_r1.message);
 } }
 function ServiceMessagesComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, ServiceMessagesComponent_Conditional_0_For_2_Template, 10, 4, "div", 1, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, ServiceMessagesComponent_Conditional_0_For_2_Template, 11, 4, "div", 1, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -6612,7 +6722,7 @@ function ServiceMessagesComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
 } }
 function ServiceMessagesComponent_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "xuilib-service-message", 9);
+    i0.ɵɵelementStart(0, "xuilib-service-message", 8);
     i0.ɵɵpipe(1, "rpxTranslate");
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵlistener("hideMessage", function ServiceMessagesComponent_Conditional_1_For_2_Template_xuilib_service_message_hideMessage_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.hideMessage($event)); });
@@ -6623,7 +6733,7 @@ function ServiceMessagesComponent_Conditional_1_For_2_Template(rf, ctx) { if (rf
 } }
 function ServiceMessagesComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, ServiceMessagesComponent_Conditional_1_For_2_Template, 3, 7, "xuilib-service-message", 8, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, ServiceMessagesComponent_Conditional_1_For_2_Template, 3, 7, "xuilib-service-message", 7, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -6725,7 +6835,7 @@ class ServiceMessagesComponent {
         return cookie ? JSON.parse(decodeURIComponent(cookie.split("=")[1])) : [];
     }
     static { this.ɵfac = function ServiceMessagesComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ServiceMessagesComponent)(i0.ɵɵdirectiveInject(FeatureToggleService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ServiceMessagesComponent, selectors: [["xuilib-service-messages"]], inputs: { userRoles: "userRoles", featureToggleKey: "featureToggleKey", serviceMessageCookie: "serviceMessageCookie" }, standalone: false, decls: 2, vars: 2, consts: [[1, "govuk-width-container", "govuk-!-margin-top-6"], [1, "hmcts-banner", "hmcts-banner--warning"], ["fill", "currentColor", "role", "presentation", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], [1, "govuk-heading-s"], [3, "innerHTML"], [3, "key", "message_en", "message_cy"], [3, "hideMessage", "key", "message_en", "message_cy"]], template: function ServiceMessagesComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ServiceMessagesComponent, selectors: [["xuilib-service-messages"]], inputs: { userRoles: "userRoles", featureToggleKey: "featureToggleKey", serviceMessageCookie: "serviceMessageCookie" }, standalone: false, decls: 2, vars: 2, consts: [[1, "govuk-width-container", "govuk-!-margin-top-6"], [1, "hmcts-banner", "hmcts-banner--warning"], ["fill", "currentColor", "role", "presentation", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], [1, "govuk-heading-s"], [3, "key", "message_en", "message_cy"], [3, "hideMessage", "key", "message_en", "message_cy"]], template: function ServiceMessagesComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ServiceMessagesComponent_Conditional_0_Template, 3, 0, "div", 0);
             i0.ɵɵconditionalCreate(1, ServiceMessagesComponent_Conditional_1_Template, 3, 0, "div", 0);
         } if (rf & 2) {
@@ -6736,7 +6846,7 @@ class ServiceMessagesComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ServiceMessagesComponent, [{
         type: Component,
-        args: [{ selector: "xuilib-service-messages", standalone: false, template: "@if (isBannerError) {\n  <div class=\"govuk-width-container govuk-!-margin-top-6\">\n    @for (errMsg of bannerErrorMsgs; track errMsg) {\n      <div class=\"hmcts-banner hmcts-banner--warning\">\n        <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n          <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" />\n        </svg>\n        <div class=\"hmcts-banner__message\">\n          <span class=\"hmcts-banner__assistive\">{{'Warning' | rpxTranslate}}</span>\n          <h2 class=\"govuk-heading-s\">Error:</h2>\n          <p [innerHTML]=\"errMsg.message\"></p>\n        </div>\n      </div>\n    }\n  </div>\n}\n@if (filteredMessages?.length > 0) {\n  <div class=\"govuk-width-container govuk-!-margin-top-6\">\n    @for (message of filteredMessages; track message) {\n      <xuilib-service-message [key]=\"message\"\n        [message_en]=\"message?.message_en | rpxTranslate\"\n        [message_cy]=\"message?.message_cy | rpxTranslate\"\n        (hideMessage)=\"hideMessage($event)\">\n      </xuilib-service-message>\n    }\n  </div>\n}" }]
+        args: [{ selector: "xuilib-service-messages", standalone: false, template: "@if (isBannerError) {\n  <div class=\"govuk-width-container govuk-!-margin-top-6\">\n    @for (errMsg of bannerErrorMsgs; track errMsg) {\n      <div class=\"hmcts-banner hmcts-banner--warning\">\n        <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n          <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" />\n        </svg>\n        <div class=\"hmcts-banner__message\">\n          <span class=\"hmcts-banner__assistive\">{{'Warning' | rpxTranslate}}</span>\n          <h2 class=\"govuk-heading-s\">Error:</h2>\n          <p>{{ errMsg.message }}</p>\n        </div>\n      </div>\n    }\n  </div>\n}\n@if (filteredMessages?.length > 0) {\n  <div class=\"govuk-width-container govuk-!-margin-top-6\">\n    @for (message of filteredMessages; track message) {\n      <xuilib-service-message [key]=\"message\"\n        [message_en]=\"message?.message_en | rpxTranslate\"\n        [message_cy]=\"message?.message_cy | rpxTranslate\"\n        (hideMessage)=\"hideMessage($event)\">\n      </xuilib-service-message>\n    }\n  </div>\n}\n" }]
     }], () => [{ type: FeatureToggleService }], { userRoles: [{
             type: Input
         }], featureToggleKey: [{
@@ -7583,7 +7693,7 @@ function TermsAndConditionsComponent_Case_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r0.sanitizeHtml(i0.ɵɵpipeBind1(2, 1, ctx_r0.document.content)), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("xuilibSafeHtml", i0.ɵɵpipeBind1(2, 1, ctx_r0.document.content));
 } }
 function TermsAndConditionsComponent_Case_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "xuilib-tc-display-plain");
@@ -7605,28 +7715,22 @@ function TermsAndConditionsComponent_Case_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "An error occured. Please try again."), " ");
 } }
 class TermsAndConditionsComponent {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    // ensure no dangerous HTML is rendered in the terms and conditions document
-    sanitizeHtml(content) {
-        return this.sanitizer.sanitize(SecurityContext.HTML, content ?? '') ?? '';
-    }
-    static { this.ɵfac = function TermsAndConditionsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TermsAndConditionsComponent)(i0.ɵɵdirectiveInject(i2$1.DomSanitizer)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TermsAndConditionsComponent, selectors: [["xuilib-terms-and-conditions"]], inputs: { document: "document" }, standalone: false, decls: 3, vars: 1, consts: [[3, "innerHTML"]], template: function TermsAndConditionsComponent_Template(rf, ctx) { if (rf & 1) {
+    constructor() { }
+    static { this.ɵfac = function TermsAndConditionsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TermsAndConditionsComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TermsAndConditionsComponent, selectors: [["xuilib-terms-and-conditions"]], inputs: { document: "document" }, standalone: false, decls: 3, vars: 1, consts: [[3, "xuilibSafeHtml"]], template: function TermsAndConditionsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, TermsAndConditionsComponent_Case_0_Template, 3, 3, "xuilib-tc-display-html")(1, TermsAndConditionsComponent_Case_1_Template, 3, 3, "xuilib-tc-display-plain")(2, TermsAndConditionsComponent_Case_2_Template, 3, 3, "div");
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.document.mimeType) === "text/html" ? 0 : tmp_0_0 === "text/plain" ? 1 : 2);
-        } }, dependencies: [TcDisplayHtmlComponent, TcDisplayPlainComponent, i2.RpxTranslatePipe], styles: ["[_nghost-%COMP%]{display:block;width:100%}"] }); }
+        } }, dependencies: [TcDisplayHtmlComponent, TcDisplayPlainComponent, SafeHtmlDirective, i2.RpxTranslatePipe], styles: ["[_nghost-%COMP%]{display:block;width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TermsAndConditionsComponent, [{
         type: Component,
-        args: [{ selector: 'xuilib-terms-and-conditions', standalone: false, template: "\n@switch (document.mimeType) {\n  @case ('text/html') {\n    <xuilib-tc-display-html>\n      <div [innerHTML]=\"sanitizeHtml(document.content | rpxTranslate)\"></div>\n    </xuilib-tc-display-html>\n  }\n  @case ('text/plain') {\n    <xuilib-tc-display-plain>\n      {{ document.content | rpxTranslate}}\n    </xuilib-tc-display-plain>\n  }\n  @default {\n    <div>\n      {{'An error occured. Please try again.' | rpxTranslate}}\n    </div>\n  }\n}\n", styles: [":host{display:block;width:100%}\n"] }]
-    }], () => [{ type: i2$1.DomSanitizer }], { document: [{
+        args: [{ selector: 'xuilib-terms-and-conditions', standalone: false, template: "\n@switch (document.mimeType) {\n  @case ('text/html') {\n    <xuilib-tc-display-html>\n      <div [xuilibSafeHtml]=\"document.content | rpxTranslate\"></div>\n    </xuilib-tc-display-html>\n  }\n  @case ('text/plain') {\n    <xuilib-tc-display-plain>\n      {{ document.content | rpxTranslate}}\n    </xuilib-tc-display-plain>\n  }\n  @default {\n    <div>\n      {{'An error occured. Please try again.' | rpxTranslate}}\n    </div>\n  }\n}\n", styles: [":host{display:block;width:100%}\n"] }]
+    }], () => [], { document: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TermsAndConditionsComponent, { className: "TermsAndConditionsComponent", filePath: "lib/components/terms-and-conditions/terms-and-conditions.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TermsAndConditionsComponent, { className: "TermsAndConditionsComponent", filePath: "lib/components/terms-and-conditions/terms-and-conditions.component.ts", lineNumber: 10 }); })();
 
 function UserDetailsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "span", 4);
@@ -10340,21 +10444,23 @@ function HmctsPrimaryNavigationComponent_Conditional_0_Conditional_2_Template(rf
     i0.ɵɵelement(0, "div", 2);
 } }
 function HmctsPrimaryNavigationComponent_Conditional_0_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 4);
-    i0.ɵɵelement(1, "a", 5);
-    i0.ɵɵpipe(2, "rpxTranslate");
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(0, "li", 4)(1, "a", 5);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "rpxTranslate");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r1 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("routerLink", item_r1.href)("innerHTML", i0.ɵɵpipeBind1(2, 3, item_r1.text), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("routerLink", item_r1.href);
     i0.ɵɵattribute("aria-current", item_r1.active ? true : null);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 3, item_r1.text));
 } }
 function HmctsPrimaryNavigationComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "nav", 0)(1, "div", 1);
     i0.ɵɵconditionalCreate(2, HmctsPrimaryNavigationComponent_Conditional_0_Conditional_2_Template, 1, 0, "div", 2);
     i0.ɵɵelementStart(3, "ul", 3);
-    i0.ɵɵrepeaterCreate(4, HmctsPrimaryNavigationComponent_Conditional_0_For_5_Template, 3, 5, "li", 4, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(4, HmctsPrimaryNavigationComponent_Conditional_0_For_5_Template, 4, 5, "li", 4, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -10371,7 +10477,7 @@ class HmctsPrimaryNavigationComponent {
     constructor() {
     }
     static { this.ɵfac = function HmctsPrimaryNavigationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HmctsPrimaryNavigationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HmctsPrimaryNavigationComponent, selectors: [["xuilib-hmcts-primary-navigation"]], inputs: { userLoggedIn: "userLoggedIn", label: "label", items: "items", isBrandedHeader: "isBrandedHeader" }, standalone: false, decls: 1, vars: 1, consts: [[1, "hmcts-primary-navigation"], [1, "hmcts-primary-navigation__container"], [1, "govuk-header__logo"], [1, "hmcts-primary-navigation__list"], [1, "hmcts-primary-navigation__item"], [1, "hmcts-primary-navigation__link", 3, "routerLink", "innerHTML"]], template: function HmctsPrimaryNavigationComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HmctsPrimaryNavigationComponent, selectors: [["xuilib-hmcts-primary-navigation"]], inputs: { userLoggedIn: "userLoggedIn", label: "label", items: "items", isBrandedHeader: "isBrandedHeader" }, standalone: false, decls: 1, vars: 1, consts: [[1, "hmcts-primary-navigation"], [1, "hmcts-primary-navigation__container"], [1, "govuk-header__logo"], [1, "hmcts-primary-navigation__list"], [1, "hmcts-primary-navigation__item"], [1, "hmcts-primary-navigation__link", 3, "routerLink"]], template: function HmctsPrimaryNavigationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, HmctsPrimaryNavigationComponent_Conditional_0_Template, 6, 2, "nav", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isUserLoggedIn ? 0 : -1);
@@ -10379,7 +10485,7 @@ class HmctsPrimaryNavigationComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HmctsPrimaryNavigationComponent, [{
         type: Component,
-        args: [{ selector: 'xuilib-hmcts-primary-navigation', standalone: false, template: "@if (isUserLoggedIn) {\n  <nav class=\"hmcts-primary-navigation\" [attr.aria-label]=\"label\">\n    <div class=\"hmcts-primary-navigation__container\">\n      @if (isBrandedHeader) {\n        <div class=\"govuk-header__logo\"></div>\n      }\n      <ul class=\"hmcts-primary-navigation__list\">\n        @for (item of items; track item) {\n          <li class=\"hmcts-primary-navigation__item\" >\n            <a class=\"hmcts-primary-navigation__link\" [attr.aria-current]=\"item.active ? true: null\" [routerLink]=\"item.href\" [innerHTML]=\"item.text | rpxTranslate\"></a>\n          </li>\n        }\n      </ul>\n    </div>\n  </nav>\n}\n" }]
+        args: [{ selector: 'xuilib-hmcts-primary-navigation', standalone: false, template: "@if (isUserLoggedIn) {\n  <nav class=\"hmcts-primary-navigation\" [attr.aria-label]=\"label\">\n    <div class=\"hmcts-primary-navigation__container\">\n      @if (isBrandedHeader) {\n        <div class=\"govuk-header__logo\"></div>\n      }\n      <ul class=\"hmcts-primary-navigation__list\">\n        @for (item of items; track item) {\n          <li class=\"hmcts-primary-navigation__item\" >\n            <a class=\"hmcts-primary-navigation__link\" [attr.aria-current]=\"item.active ? true: null\" [routerLink]=\"item.href\">{{ item.text | rpxTranslate }}</a>\n          </li>\n        }\n      </ul>\n    </div>\n  </nav>\n}\n" }]
     }], () => [], { userLoggedIn: [{
             type: Input
         }], label: [{
@@ -10453,6 +10559,7 @@ const COMMON_COMPONENTS = [
     ContactDetailsComponent,
     FeatureToggleDirective,
     LetDirective,
+    SafeHtmlDirective,
     HmctsSessionDialogComponent,
     UserListComponent,
     UserDetailsComponent,
@@ -10567,6 +10674,7 @@ class ExuiCommonLibModule {
         ContactDetailsComponent,
         FeatureToggleDirective,
         LetDirective,
+        SafeHtmlDirective,
         HmctsSessionDialogComponent,
         UserListComponent,
         UserDetailsComponent,
@@ -10633,6 +10741,7 @@ class ExuiCommonLibModule {
         ContactDetailsComponent,
         FeatureToggleDirective,
         LetDirective,
+        SafeHtmlDirective,
         HmctsSessionDialogComponent,
         UserListComponent,
         UserDetailsComponent,
@@ -10768,5 +10877,5 @@ function radioGroupValidator() {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessibilityComponent, AddressMessageEnum, AddressModel, AddressOption, AddressService, AnonymousFeatureUser, BadgeColour, BookingCheckType, COMMON_COMPONENTS, CapitalizePipe, CheckboxListComponent, ContactDetailsComponent, CookieBannerComponent, CookieService, DateBadgeColour, DueDateComponent, ExuiCommonLibModule, ExuiPageWrapperComponent, FeatureToggleDirective, FeatureToggleGuard, FeatureToggleService, FilterService, FindLocationComponent, FindPersonComponent, FindServiceComponent, FindTaskNameComponent, FindWorkTypeComponent, GOV_UI_COMPONENTS, GenericFilterComponent, GoogleAnalyticsService, GoogleTagManagerService, GovUiService, GovUkCheckboxComponent, GovUkCheckboxesComponent, GovUkDateComponent, GovUkErrorMessageComponent, GovUkFieldsetComponent, GovUkFileUploadComponent, GovUkFormGroupWrapperComponent, GovUkInputComponent, GovUkLabelComponent, GovUkRadioComponent, GovUkRadiosComponent, GovUkSelectComponent, GovUkTextareaComponent, GovukTableColumnConfig, GovukTableComponent, HasLoadingState, HmctsBannerComponent, HmctsErrorSummaryComponent, HmctsIdentityBarComponent, HmctsMainWrapperComponent, HmctsPaginationComponent, HmctsPrimaryNavigationComponent, HmctsSessionDialogComponent, HmctsSubNavigationComponent, InviteUserFormComponent, InviteUserPermissionComponent, LaunchDarklyService, LetContext, LetDirective, LoadingService, LoadingSpinnerComponent, LocationService, LoggedInFeatureUser, ManageSessionServices, PaginationComponent, PersonRole, RadioFilterFieldConfig, RefDataService, RemoveHostDirective, RoleCategory, RoleGuard, RoleMatching, RoleService, SECONDS_IN_A_DAY, SearchJudicialsComponent, SearchLocationComponent, SearchServiceComponent, SearchVenueComponent, SearchWorkTypeComponent, SelectedCaseComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseComponent, ShareCaseConfirmComponent, SharedCaseErrorMessages, TabComponent, TaskService, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, TimeoutNotificationsService, UserDetailsComponent, UserListComponent, UserSelectComponent, WriteAddressFieldComponent, WriteAddressInputsComponent, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, windowProvider, windowToken };
+export { AccessibilityComponent, AddressMessageEnum, AddressModel, AddressOption, AddressService, AnonymousFeatureUser, BadgeColour, BookingCheckType, COMMON_COMPONENTS, CapitalizePipe, CheckboxListComponent, ContactDetailsComponent, CookieBannerComponent, CookieService, DateBadgeColour, DueDateComponent, ExuiCommonLibModule, ExuiPageWrapperComponent, FeatureToggleDirective, FeatureToggleGuard, FeatureToggleService, FilterService, FindLocationComponent, FindPersonComponent, FindServiceComponent, FindTaskNameComponent, FindWorkTypeComponent, GOV_UI_COMPONENTS, GenericFilterComponent, GoogleAnalyticsService, GoogleTagManagerService, GovUiService, GovUkCheckboxComponent, GovUkCheckboxesComponent, GovUkDateComponent, GovUkErrorMessageComponent, GovUkFieldsetComponent, GovUkFileUploadComponent, GovUkFormGroupWrapperComponent, GovUkInputComponent, GovUkLabelComponent, GovUkRadioComponent, GovUkRadiosComponent, GovUkSelectComponent, GovUkTextareaComponent, GovukTableColumnConfig, GovukTableComponent, HasLoadingState, HmctsBannerComponent, HmctsErrorSummaryComponent, HmctsIdentityBarComponent, HmctsMainWrapperComponent, HmctsPaginationComponent, HmctsPrimaryNavigationComponent, HmctsSessionDialogComponent, HmctsSubNavigationComponent, InviteUserFormComponent, InviteUserPermissionComponent, LaunchDarklyService, LetContext, LetDirective, LoadingService, LoadingSpinnerComponent, LocationService, LoggedInFeatureUser, ManageSessionServices, PaginationComponent, PersonRole, RadioFilterFieldConfig, RefDataService, RemoveHostDirective, RoleCategory, RoleGuard, RoleMatching, RoleService, SECONDS_IN_A_DAY, SafeHtmlDirective, SearchJudicialsComponent, SearchLocationComponent, SearchServiceComponent, SearchVenueComponent, SearchWorkTypeComponent, SelectedCaseComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseComponent, ShareCaseConfirmComponent, SharedCaseErrorMessages, TabComponent, TaskService, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, TimeoutNotificationsService, UserDetailsComponent, UserListComponent, UserSelectComponent, WriteAddressFieldComponent, WriteAddressInputsComponent, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, windowProvider, windowToken };
 //# sourceMappingURL=hmcts-rpx-xui-common-lib.mjs.map