npm - @hmcts/ccd-case-ui-toolkit - Versions diffs - 7.3.96 → 7.3.97 - Mend

@hmcts/ccd-case-ui-toolkit 7.3.96 → 7.3.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs +293 -131
package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs.map +1 -1
package/index.d.ts +13 -2
package/index.d.ts.map +1 -1
package/package.json +1 -1

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

@@ -25958,11 +25958,11 @@ class ReadRichTextAreaFieldComponent extends AbstractFieldReadComponent {
             i0.ɵɵelement(0, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("innerHTML", ctx.sanitisedValue(), i0.ɵɵsanitizeHtml);
-        } }, styles: ["@charset \"UTF-8\";.ccd-rich-text-area-read{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{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 .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"], encapsulation: 2 });
+        } }, 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"], encapsulation: 2 });
 }
 (() => { (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{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{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 .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"] }]
+        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 }); })();
@@ -25971,7 +25971,7 @@ const _c1$e = a0 => ({ "form-group-error": a0 });
 const _c2$3 = a0 => ({ "ccd-rich-text-area__editor--error": a0 });
 const _c3 = a0 => ({ "ccd-rich-text-area__toolbar-button--active": a0 });
 function WriteRichTextAreaFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵelementStart(0, "span", 48);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "ccdFieldLabel");
     i0.ɵɵelementEnd();
@@ -25981,7 +25981,7 @@ function WriteRichTextAreaFieldComponent_span_2_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r1.caseField));
 } }
 function WriteRichTextAreaFieldComponent_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵelementStart(0, "span", 49);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -25991,8 +25991,8 @@ function WriteRichTextAreaFieldComponent_span_3_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 2, ctx_r1.caseField.hint_text));
 } }
-function WriteRichTextAreaFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 43);
+function WriteRichTextAreaFieldComponent_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "ccdFirstError");
     i0.ɵɵelementEnd();
@@ -26002,8 +26002,31 @@ function WriteRichTextAreaFieldComponent_span_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 2, ctx_r1.richTextAreaControl.errors, ctx_r1.caseField.label), " ");
 } }
-function WriteRichTextAreaFieldComponent_option_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 44);
+function WriteRichTextAreaFieldComponent_div_35_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 51)(1, "label", 52);
+    i0.ɵɵtext(2, "Heading level");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "select", 53);
+    i0.ɵɵlistener("change", function WriteRichTextAreaFieldComponent_div_35_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onHeadingLevelChange($event)); });
+    i0.ɵɵelementStart(4, "option", 54);
+    i0.ɵɵtext(5, "Heading 1");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "option", 55);
+    i0.ɵɵtext(7, "Heading 2");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "option", 56);
+    i0.ɵɵtext(9, "Heading 3");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("for", ctx_r1.headingLevelId());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("id", ctx_r1.headingLevelId())("value", ctx_r1.selectedHeadingLevel);
+} }
+function WriteRichTextAreaFieldComponent_option_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 57);
     i0.ɵɵtext(1, "No list");
     i0.ɵɵelementEnd();
 } }
@@ -26027,6 +26050,7 @@ function orderedListTypeForStyle(style) {
 }
 const WORD_COLUMN_SPACING = 12;
 const MAX_INDENT = 6;
+const DEFAULT_HEADING_LEVEL = 3;
 const CSS_LENGTH_UNITS = ['rem', 'px', 'pt', 'in', 'cm', 'mm', 'em'];
 const BLOCK_NODE_NAMES = new Set([
     'address', 'article', 'aside', 'blockquote', 'div', 'dl', 'fieldset', 'figcaption', 'figure', 'footer', 'form',
@@ -26034,6 +26058,13 @@ const BLOCK_NODE_NAMES = new Set([
 ]);
 const richTextNodes = {
     ...nodes,
+    heading: {
+        ...nodes.heading,
+        attrs: {
+            ...nodes.heading.attrs,
+            level: { default: DEFAULT_HEADING_LEVEL }
+        }
+    },
     list_item: {
         ...nodes.list_item,
         content: '(paragraph | heading) block*'
@@ -26088,10 +26119,12 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     editor;
     richTextAreaControl;
     activeToolbarCommands = {};
+    selectedHeadingLevel = DEFAULT_HEADING_LEVEL;
     editorUpdateSubscription;
     isNormalisingValue = false;
     paragraphCommandApplied = false;
     statusChangesSubscription;
+    toolbarPointerInteraction = false;
     valueChangesSubscription;
     ngOnInit() {
         this.editor = new Editor({
@@ -26155,9 +26188,15 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     errorId() {
         return `${this.id()}_error`;
     }
+    keyboardInstructionsId() {
+        return `${this.id()}_keyboard_instructions`;
+    }
     listStyleId() {
         return `${this.id()}_list_style`;
     }
+    headingLevelId() {
+        return `${this.id()}_heading_level`;
+    }
     toolbarLabel() {
         return `${this.caseField.label || this.caseField.id} formatting options`;
     }
@@ -26168,10 +26207,70 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         this.richTextAreaControl.markAsTouched();
         this.syncAccessibilityLater();
     }
+    onEditorClick() {
+        this.syncAccessibilityLater();
+    }
     onToolbarButtonMouseDown(event) {
+        this.toolbarPointerInteraction = true;
+        this.setToolbarTabStop(event.currentTarget);
         event.preventDefault();
     }
+    onToolbarFocusIn(event) {
+        const control = event.target;
+        if (control?.matches('button, select')) {
+            this.setToolbarTabStop(control);
+        }
+    }
+    onToolbarKeyDown(event) {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+            return;
+        }
+        const control = event.target;
+        if (!control?.matches('button, select')) {
+            return;
+        }
+        const isSelect = control.tagName === 'SELECT';
+        const isPrevious = event.key === 'ArrowLeft';
+        const isNext = event.key === 'ArrowRight';
+        const isFirst = event.key === 'Home' && !isSelect;
+        const isLast = event.key === 'End' && !isSelect;
+        if (!isPrevious && !isNext && !isFirst && !isLast) {
+            return;
+        }
+        const controls = this.toolbarControls();
+        const currentIndex = controls.indexOf(control);
+        if (currentIndex === -1 || controls.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        let nextIndex;
+        if (isFirst) {
+            nextIndex = 0;
+        }
+        else if (isLast) {
+            nextIndex = controls.length - 1;
+        }
+        else {
+            const direction = isPrevious ? -1 : 1;
+            nextIndex = (currentIndex + direction + controls.length) % controls.length;
+        }
+        const nextControl = controls[nextIndex];
+        this.setToolbarTabStop(nextControl);
+        nextControl.focus();
+    }
     handleEditorKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            const controls = this.toolbarControls();
+            const toolbarControl = controls.find((control) => control.tabIndex === 0) || controls[0];
+            if (toolbarControl) {
+                this.setToolbarTabStop(toolbarControl);
+                toolbarControl.focus();
+            }
+            return true;
+        }
         const isUnmodifiedEnter = event.key === 'Enter' &&
             !event.shiftKey &&
             !event.altKey &&
@@ -26182,10 +26281,24 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             event.stopPropagation();
             return true;
         }
-        if (event.key !== 'Tab' || !this.isNodeActive('list_item')) {
+        if (event.key !== 'Tab') {
             return false;
         }
-        this.executeToolbarCommand(event, event.shiftKey ? 'outdent' : 'indent');
+        if (event.altKey || event.ctrlKey || event.metaKey) {
+            return false;
+        }
+        if (!this.isNodeActive('list_item')) {
+            return false;
+        }
+        const indentChanged = this.changeIndent(!event.shiftKey);
+        if (!indentChanged) {
+            return false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.richTextAreaControl.markAsDirty();
+        this.updateToolbarState();
+        this.syncAccessibilityLater();
         return true;
     }
     splitListContinuationParagraph() {
@@ -26260,13 +26373,33 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
                 break;
         }
         this.richTextAreaControl.markAsDirty();
-        this.editor.view.focus();
+        const eventTarget = event.currentTarget;
+        const keepToolbarFocus = eventTarget?.matches('button, select') && !this.toolbarPointerInteraction;
+        if (keepToolbarFocus) {
+            this.setToolbarTabStop(eventTarget);
+            eventTarget.focus();
+        }
+        else {
+            this.editor.view.focus();
+        }
+        this.toolbarPointerInteraction = false;
         this.updateToolbarState();
         this.syncAccessibilityLater();
     }
     isToolbarCommandActive(command) {
         return !!this.activeToolbarCommands[command];
     }
+    onHeadingLevelChange(event) {
+        const level = Number(event.target.value);
+        if (level !== 1 && level !== 2 && level !== 3) {
+            return;
+        }
+        this.selectedHeadingLevel = level;
+        this.applyHeadingLevel(level);
+        this.richTextAreaControl.markAsDirty();
+        this.updateToolbarState();
+        this.syncAccessibilityLater();
+    }
     currentListStyle() {
         const activeList = this.activeListNode();
         if (activeList?.type.name === 'ordered_list') {
@@ -26300,7 +26433,6 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         }
         this.applyListStyleSelection(listStyle);
         this.richTextAreaControl.markAsDirty();
-        this.editor.view.focus();
         this.updateToolbarState();
         this.syncAccessibilityLater();
     }
@@ -26813,6 +26945,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         if (this.caseField.hint_text) {
             ids.push(this.hintId());
         }
+        ids.push(this.keyboardInstructionsId());
         if (this.isInvalid()) {
             ids.push(this.errorId());
         }
@@ -26834,7 +26967,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             Italic: 'italic',
             Underline: 'underline',
             Paragraph: 'paragraph',
-            'Heading level 1': 'heading',
+            Heading: 'heading',
             'Bullet List': 'bullet_list',
             'Numbered List': 'ordered_list'
         };
@@ -26851,6 +26984,21 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
                 button.setAttribute('aria-pressed', `${isActive}`);
             }
         });
+        const controls = this.toolbarControls();
+        if (controls.length && !controls.some((control) => control.tabIndex === 0)) {
+            this.setToolbarTabStop(controls[0]);
+        }
+    }
+    toolbarControls() {
+        if (!this.editorHost) {
+            return [];
+        }
+        return Array.prototype.slice.call(this.editorHost.nativeElement.querySelectorAll('.ccd-rich-text-area__toolbar button:not([disabled]), .ccd-rich-text-area__toolbar select:not([disabled])'));
+    }
+    setToolbarTabStop(activeControl) {
+        this.toolbarControls().forEach((control) => {
+            control.tabIndex = control === activeControl ? 0 : -1;
+        });
     }
     getEditableElement() {
         if (!this.editorHost) {
@@ -26927,7 +27075,9 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
                             if (headingLevel) {
                                 element.dataset.wordHeadingLevel = headingLevel.toString();
                             }
-                            if (hasBoldStyle) {
+                            // A Word heading style is rendered bold by the corresponding h1-h3
+                            // element. Only retain a strong mark for independently bold text.
+                            if (hasBoldStyle && !headingLevel) {
                                 this.wrapBoldInlineContents(documentElement, element);
                             }
                         });
@@ -27040,30 +27190,21 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     normaliseWordSemanticBlocks(documentElement) {
         const blocks = Array.prototype.slice.call(documentElement.body.querySelectorAll('p, h1, h2, h3, h4, h5, h6'));
         blocks.forEach((block) => {
-            const namedHeadingLevel = this.namedWordHeadingLevel(block);
             const existingHeadingLevel = /^h([1-6])$/i.exec(block.tagName)?.[1];
             if (existingHeadingLevel) {
-                const heading = existingHeadingLevel === '1'
-                    ? block
-                    : this.replaceElementTag(documentElement, block, 'h1');
-                if (namedHeadingLevel) {
-                    this.removeRedundantHeadingBold(heading);
+                const supportedHeadingLevel = Math.min(Number(existingHeadingLevel), 3);
+                const headingTag = `h${supportedHeadingLevel}`;
+                if (block.tagName.toLowerCase() !== headingTag) {
+                    this.replaceElementTag(documentElement, block, headingTag);
                 }
                 return;
             }
             const headingLevel = this.wordHeadingLevel(block);
             if (headingLevel) {
-                const heading = this.replaceElementTag(documentElement, block, 'h1');
-                if (namedHeadingLevel) {
-                    this.removeRedundantHeadingBold(heading);
-                }
+                this.replaceElementTag(documentElement, block, `h${Math.min(headingLevel, 3)}`);
             }
         });
     }
-    removeRedundantHeadingBold(heading) {
-        const boldElements = Array.prototype.slice.call(heading.querySelectorAll('strong, b'));
-        boldElements.reverse().forEach((element) => this.unwrapElement(element));
-    }
     wordHeadingLevel(element) {
         const namedHeadingLevel = this.namedWordHeadingLevel(element);
         if (namedHeadingLevel) {
@@ -27194,7 +27335,10 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             if (!style || this.isWordLayoutContainer(htmlElement)) {
                 return;
             }
-            if (this.hasBoldStyle(style)) {
+            // Heading elements provide their own bold presentation. Do not turn that
+            // semantic heading weight into an independently selected Bold mark.
+            const isHeading = /^h[1-3]$/i.test(htmlElement.tagName);
+            if (this.hasBoldStyle(style) && !isHeading) {
                 this.wrapBoldInlineContents(documentElement, htmlElement);
             }
             if (this.hasItalicStyle(style)) {
@@ -27762,12 +27906,16 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             return;
         }
         const activeListType = this.activeListNode()?.type.name;
+        const activeHeadingLevel = this.activeHeadingLevel();
+        if (activeHeadingLevel === 1 || activeHeadingLevel === 2 || activeHeadingLevel === 3) {
+            this.selectedHeadingLevel = activeHeadingLevel;
+        }
         this.activeToolbarCommands = {
             bold: this.isMarkActive('strong'),
             italic: this.isMarkActive('em'),
             underline: this.isMarkActive('u'),
             paragraph: this.paragraphCommandApplied && this.isPlainParagraphActive(),
-            heading: this.isHeadingOneActive(),
+            heading: activeHeadingLevel !== null,
             ordered_list: activeListType === 'ordered_list',
             bullet_list: activeListType === 'bullet_list'
         };
@@ -28065,23 +28213,21 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         const listItemType = state.schema.nodes.list_item;
         if (listItemType && this.isNodeActive('list_item')) {
             if (!increase && this.changeListIndent(false, state, dispatch)) {
-                return;
+                return true;
             }
             const listCommand = increase ? sinkListItem(listItemType) : liftListItem(listItemType);
             if (listCommand(state, dispatch)) {
                 this.applyOrderedListStyleForCurrentDepth();
-                return;
+                return true;
             }
             if (increase && this.changeListIndent(true, state, dispatch)) {
-                return;
+                return true;
             }
         }
         if (increase) {
-            this.editor.commands.indent().exec();
-        }
-        else {
-            this.editor.commands.outdent().exec();
+            return this.editor.commands.indent().exec();
         }
+        return this.editor.commands.outdent().exec();
     }
     applyOrderedListStyleForCurrentDepth() {
         const { state, dispatch } = this.editor.view;
@@ -28141,7 +28287,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         this.paragraphCommandApplied = true;
     }
     toggleHeading() {
-        if (this.isHeadingOneActive()) {
+        if (this.activeHeadingLevel() !== null) {
             const paragraphType = this.editor.view.state.schema.nodes.paragraph;
             if (paragraphType) {
                 setBlockType(paragraphType)(this.editor.view.state, this.editor.view.dispatch);
@@ -28149,34 +28295,38 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             this.paragraphCommandApplied = false;
             return;
         }
+        this.applyHeadingLevel(this.selectedHeadingLevel);
+        this.paragraphCommandApplied = false;
+    }
+    applyHeadingLevel(level) {
         const headingType = this.editor.view.state.schema.nodes.heading;
         if (headingType) {
-            setBlockType(headingType, { level: 1 })(this.editor.view.state, this.editor.view.dispatch);
+            setBlockType(headingType, { level })(this.editor.view.state, this.editor.view.dispatch);
         }
         this.paragraphCommandApplied = false;
     }
-    isHeadingOneActive() {
+    activeHeadingLevel() {
         const state = this.editor.view.state;
         const headingType = state.schema.nodes.heading;
         if (!headingType) {
-            return false;
+            return null;
         }
         const { $from, from, to } = state.selection;
         for (let depth = $from.depth; depth > 0; depth--) {
             const node = $from.node(depth);
-            if (node.type === headingType && node.attrs.level === 1) {
-                return true;
+            if (node.type === headingType) {
+                return Number(node.attrs.level);
             }
         }
-        let isActive = false;
+        let activeLevel = null;
         state.doc.nodesBetween(from, to, (node) => {
-            if (node.type === headingType && node.attrs.level === 1) {
-                isActive = true;
+            if (node.type === headingType) {
+                activeLevel = Number(node.attrs.level);
                 return false;
             }
             return true;
         });
-        return isActive;
+        return activeLevel;
     }
     isPlainParagraphActive() {
         return this.isNodeActive('paragraph') &&
@@ -28251,110 +28401,118 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorHost = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 57, vars: 45, consts: [["editorHost", ""], [1, "form-group", "ccd-rich-text-area", 3, "ngClass"], [3, "id"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 3, "id", 4, "ngIf"], ["class", "error-message", 3, "id", 4, "ngIf"], [1, "ccd-rich-text-area__editor", 3, "click", "keydown", "keyup", "paste", "ngClass"], ["role", "toolbar", 1, "ccd-rich-text-area__toolbar"], ["type", "button", "aria-label", "Undo", "title", "Undo", "aria-keyshortcuts", "Control+Z", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["viewBox", "0 0 24 24", "aria-hidden", "true", "focusable", "false", 1, "ccd-rich-text-area__toolbar-icon"], ["d", "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"], ["type", "button", "aria-label", "Redo", "title", "Redo", "aria-keyshortcuts", "Control+Y", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["d", "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-separator"], ["type", "button", "aria-label", "Bold", "title", "Bold", "aria-keyshortcuts", "Control+B", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--bold", 3, "mousedown", "click", "ngClass"], ["d", "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5S13.83 9.5 13 9.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"], ["type", "button", "aria-label", "Italic", "title", "Italic", "aria-keyshortcuts", "Control+I", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--italic", 3, "mousedown", "click", "ngClass"], ["d", "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"], ["type", "button", "aria-label", "Underline", "title", "Underline", "aria-keyshortcuts", "Control+U", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--underline", 3, "mousedown", "click", "ngClass"], ["d", "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"], ["type", "button", "aria-label", "Paragraph", "title", "Paragraph", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--paragraph", 3, "mousedown", "click", "ngClass"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--paragraph"], ["type", "button", "aria-label", "Heading level 1", "title", "Heading level 1", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--heading", 3, "mousedown", "click", "ngClass"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--heading"], ["type", "button", "aria-label", "Bullet List", "title", "Bullet List", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click", "ngClass"], ["d", "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6C3.17 4.5 2.5 5.17 2.5 6S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 13h14v-2H7v2zm0 6h14v-2H7v2zM7 5v2h14V5H7z"], ["type", "button", "aria-label", "Numbered List", "title", "Numbered List", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click", "ngClass"], ["d", "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1V14h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"], [1, "ccd-rich-text-area__list-style"], [1, "ccd-rich-text-area__list-style-label", 3, "for"], [1, "ccd-rich-text-area__list-style-select", 3, "change", "id", "value"], ["value", "", 4, "ngIf"], ["value", "ordered_list"], ["value", "ordered_alpha"], ["value", "ordered_roman"], ["type", "button", "aria-label", "Decrease Indent", "title", "Decrease Indent", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["d", "M11 17h10v-2H11v2zm-8-5 4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"], ["type", "button", "aria-label", "Increase Indent", "title", "Increase Indent", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["d", "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"], [1, "NgxEditor__Wrapper"], ["outputFormat", "html", 3, "focusIn", "focusOut", "editor", "formControl"], [1, "form-label"], [1, "form-hint", 3, "id"], [1, "error-message", 3, "id"], ["value", ""]], template: function WriteRichTextAreaFieldComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 65, vars: 47, consts: [["editorHost", ""], [1, "form-group", "ccd-rich-text-area", 3, "ngClass"], [3, "id"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 3, "id", 4, "ngIf"], [1, "ccd-rich-text-area__keyboard-instructions", 3, "id"], ["class", "error-message", 3, "id", 4, "ngIf"], [1, "ccd-rich-text-area__editor", 3, "click", "keydown", "keyup", "paste", "ngClass"], ["role", "toolbar", "aria-orientation", "horizontal", 1, "ccd-rich-text-area__toolbar", 3, "focusin", "keydown"], ["role", "group", "aria-label", "History", 1, "ccd-rich-text-area__toolbar-group"], ["type", "button", "tabindex", "0", "aria-label", "Undo", "title", "Undo", "aria-keyshortcuts", "Control+Z", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["viewBox", "0 0 24 24", "aria-hidden", "true", "focusable", "false", 1, "ccd-rich-text-area__toolbar-icon"], ["d", "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"], ["type", "button", "tabindex", "-1", "aria-label", "Redo", "title", "Redo", "aria-keyshortcuts", "Control+Y", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["d", "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-separator"], ["role", "group", "aria-label", "Text formatting", 1, "ccd-rich-text-area__toolbar-group"], ["type", "button", "tabindex", "-1", "aria-label", "Bold", "title", "Bold", "aria-keyshortcuts", "Control+B", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--bold", 3, "mousedown", "click", "ngClass"], ["d", "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5S13.83 9.5 13 9.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"], ["type", "button", "tabindex", "-1", "aria-label", "Italic", "title", "Italic", "aria-keyshortcuts", "Control+I", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--italic", 3, "mousedown", "click", "ngClass"], ["d", "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"], ["type", "button", "tabindex", "-1", "aria-label", "Underline", "title", "Underline", "aria-keyshortcuts", "Control+U", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--underline", 3, "mousedown", "click", "ngClass"], ["d", "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"], ["role", "group", "aria-label", "Paragraph and heading formatting", 1, "ccd-rich-text-area__toolbar-group"], ["type", "button", "tabindex", "-1", "aria-label", "Paragraph", "title", "Paragraph", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--paragraph", 3, "mousedown", "click", "ngClass"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--paragraph"], ["type", "button", "tabindex", "-1", "aria-label", "Heading", "title", "Heading", 1, "ccd-rich-text-area__toolbar-button", "ccd-rich-text-area__toolbar-button--heading", 3, "mousedown", "click", "ngClass"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--heading"], ["class", "ccd-rich-text-area__heading-level", 4, "ngIf"], ["role", "group", "aria-label", "List formatting", 1, "ccd-rich-text-area__toolbar-group", "ccd-rich-text-area__toolbar-group--list"], ["type", "button", "tabindex", "-1", "aria-label", "Bullet List", "title", "Bullet List", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click", "ngClass"], ["d", "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6C3.17 4.5 2.5 5.17 2.5 6S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 13h14v-2H7v2zm0 6h14v-2H7v2zM7 5v2h14V5H7z"], ["type", "button", "tabindex", "-1", "aria-label", "Numbered List", "title", "Numbered List", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click", "ngClass"], ["d", "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1V14h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"], [1, "ccd-rich-text-area__list-style"], [1, "ccd-rich-text-area__list-style-label", 3, "for"], ["tabindex", "-1", 1, "ccd-rich-text-area__list-style-select", 3, "change", "id", "value"], ["value", "", 4, "ngIf"], ["value", "ordered_list"], ["value", "ordered_alpha"], ["value", "ordered_roman"], ["role", "group", "aria-label", "Indentation", 1, "ccd-rich-text-area__toolbar-group"], ["type", "button", "tabindex", "-1", "aria-label", "Decrease Indent", "title", "Decrease Indent", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["d", "M11 17h10v-2H11v2zm-8-5 4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"], ["type", "button", "tabindex", "-1", "aria-label", "Increase Indent", "title", "Increase Indent", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["d", "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"], [1, "NgxEditor__Wrapper"], ["outputFormat", "html", 3, "focusIn", "focusOut", "editor", "formControl"], [1, "form-label"], [1, "form-hint", 3, "id"], [1, "error-message", 3, "id"], [1, "ccd-rich-text-area__heading-level"], [1, "ccd-rich-text-area__heading-level-label", 3, "for"], ["tabindex", "-1", 1, "ccd-rich-text-area__heading-level-select", 3, "change", "id", "value"], ["value", "1"], ["value", "2"], ["value", "3"], ["value", ""]], template: function WriteRichTextAreaFieldComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
             i0.ɵɵtemplate(2, WriteRichTextAreaFieldComponent_span_2_Template, 3, 3, "span", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(3, WriteRichTextAreaFieldComponent_span_3_Template, 3, 4, "span", 4)(4, WriteRichTextAreaFieldComponent_span_4_Template, 3, 5, "span", 5);
-            i0.ɵɵelementStart(5, "div", 6, 0);
-            i0.ɵɵlistener("click", function WriteRichTextAreaFieldComponent_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.syncAccessibilityLater()); })("keydown", function WriteRichTextAreaFieldComponent_Template_div_keydown_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEditorKeyDown($event)); })("keyup", function WriteRichTextAreaFieldComponent_Template_div_keyup_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.syncAccessibilityLater()); })("paste", function WriteRichTextAreaFieldComponent_Template_div_paste_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onPaste($event)); });
-            i0.ɵɵelementStart(7, "div", 7)(8, "button", 8);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "undo")); });
+            i0.ɵɵtemplate(3, WriteRichTextAreaFieldComponent_span_3_Template, 3, 4, "span", 4);
+            i0.ɵɵelementStart(4, "span", 5);
+            i0.ɵɵtext(5, " Press Escape to move from the editor to the formatting toolbar. ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, WriteRichTextAreaFieldComponent_span_6_Template, 3, 5, "span", 6);
+            i0.ɵɵelementStart(7, "div", 7, 0);
+            i0.ɵɵlistener("click", function WriteRichTextAreaFieldComponent_Template_div_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEditorClick()); })("keydown", function WriteRichTextAreaFieldComponent_Template_div_keydown_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEditorKeyDown($event)); })("keyup", function WriteRichTextAreaFieldComponent_Template_div_keyup_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.syncAccessibilityLater()); })("paste", function WriteRichTextAreaFieldComponent_Template_div_paste_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onPaste($event)); });
+            i0.ɵɵelementStart(9, "div", 8);
+            i0.ɵɵlistener("focusin", function WriteRichTextAreaFieldComponent_Template_div_focusin_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarFocusIn($event)); })("keydown", function WriteRichTextAreaFieldComponent_Template_div_keydown_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarKeyDown($event)); });
+            i0.ɵɵelementStart(10, "div", 9)(11, "button", 10);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "undo")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(9, "svg", 9);
-            i0.ɵɵelement(10, "path", 10);
+            i0.ɵɵelementStart(12, "svg", 11);
+            i0.ɵɵelement(13, "path", 12);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(11, "button", 11);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "redo")); });
+            i0.ɵɵelementStart(14, "button", 13);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_14_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_14_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "redo")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(12, "svg", 9);
-            i0.ɵɵelement(13, "path", 12);
-            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "svg", 11);
+            i0.ɵɵelement(16, "path", 14);
+            i0.ɵɵelementEnd()()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelement(14, "span", 13);
-            i0.ɵɵelementStart(15, "button", 14);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_15_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_15_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "bold")); });
+            i0.ɵɵelement(17, "span", 15);
+            i0.ɵɵelementStart(18, "div", 16)(19, "button", 17);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "bold")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(16, "svg", 9);
-            i0.ɵɵelement(17, "path", 15);
+            i0.ɵɵelementStart(20, "svg", 11);
+            i0.ɵɵelement(21, "path", 18);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(18, "button", 16);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_18_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_18_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "italic")); });
+            i0.ɵɵelementStart(22, "button", 19);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_22_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_22_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "italic")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(19, "svg", 9);
-            i0.ɵɵelement(20, "path", 17);
+            i0.ɵɵelementStart(23, "svg", 11);
+            i0.ɵɵelement(24, "path", 20);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(21, "button", 18);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "underline")); });
+            i0.ɵɵelementStart(25, "button", 21);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_25_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_25_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "underline")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(22, "svg", 9);
-            i0.ɵɵelement(23, "path", 19);
-            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(26, "svg", 11);
+            i0.ɵɵelement(27, "path", 22);
+            i0.ɵɵelementEnd()()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(24, "button", 20);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_24_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_24_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "paragraph")); });
-            i0.ɵɵelementStart(25, "span", 21);
-            i0.ɵɵtext(26, "P");
+            i0.ɵɵelementStart(28, "div", 23)(29, "button", 24);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_29_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_29_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "paragraph")); });
+            i0.ɵɵelementStart(30, "span", 25);
+            i0.ɵɵtext(31, "P");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(27, "button", 22);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_27_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_27_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "heading")); });
-            i0.ɵɵelementStart(28, "span", 23);
-            i0.ɵɵtext(29, "H");
+            i0.ɵɵelementStart(32, "button", 26);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "heading")); });
+            i0.ɵɵelementStart(33, "span", 27);
+            i0.ɵɵtext(34, "H");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(30, "span", 13);
-            i0.ɵɵelementStart(31, "button", 24);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_31_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_31_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "bullet_list")); });
+            i0.ɵɵtemplate(35, WriteRichTextAreaFieldComponent_div_35_Template, 10, 3, "div", 28);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(36, "span", 15);
+            i0.ɵɵelementStart(37, "div", 29)(38, "button", 30);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_38_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_38_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "bullet_list")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(32, "svg", 9);
-            i0.ɵɵelement(33, "path", 25);
+            i0.ɵɵelementStart(39, "svg", 11);
+            i0.ɵɵelement(40, "path", 31);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(34, "button", 26);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "ordered_list")); });
+            i0.ɵɵelementStart(41, "button", 32);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_41_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_41_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "ordered_list")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(35, "svg", 9);
-            i0.ɵɵelement(36, "path", 27);
+            i0.ɵɵelementStart(42, "svg", 11);
+            i0.ɵɵelement(43, "path", 33);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(37, "div", 28)(38, "label", 29);
-            i0.ɵɵtext(39, "List style");
+            i0.ɵɵelementStart(44, "div", 34)(45, "label", 35);
+            i0.ɵɵtext(46, "List style");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(40, "select", 30);
-            i0.ɵɵlistener("change", function WriteRichTextAreaFieldComponent_Template_select_change_40_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListStyleChange($event)); });
-            i0.ɵɵtemplate(41, WriteRichTextAreaFieldComponent_option_41_Template, 2, 0, "option", 31);
-            i0.ɵɵelementStart(42, "option", 32);
-            i0.ɵɵtext(43, "Numbers (1, 2, 3)");
+            i0.ɵɵelementStart(47, "select", 36);
+            i0.ɵɵlistener("change", function WriteRichTextAreaFieldComponent_Template_select_change_47_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListStyleChange($event)); });
+            i0.ɵɵtemplate(48, WriteRichTextAreaFieldComponent_option_48_Template, 2, 0, "option", 37);
+            i0.ɵɵelementStart(49, "option", 38);
+            i0.ɵɵtext(50, "Numbers (1, 2, 3)");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(44, "option", 33);
-            i0.ɵɵtext(45, "Letters (a, b, c)");
+            i0.ɵɵelementStart(51, "option", 39);
+            i0.ɵɵtext(52, "Letters (a, b, c)");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(46, "option", 34);
-            i0.ɵɵtext(47, "Roman numerals (i), (ii), (iii)");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(48, "span", 13);
-            i0.ɵɵelementStart(49, "button", 35);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_49_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_49_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "outdent")); });
+            i0.ɵɵelementStart(53, "option", 40);
+            i0.ɵɵtext(54, "Roman numerals (i), (ii), (iii)");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelement(55, "span", 15);
+            i0.ɵɵelementStart(56, "div", 41)(57, "button", 42);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_57_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_57_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "outdent")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(50, "svg", 9);
-            i0.ɵɵelement(51, "path", 36);
+            i0.ɵɵelementStart(58, "svg", 11);
+            i0.ɵɵelement(59, "path", 43);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(52, "button", 37);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_52_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_52_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "indent")); });
+            i0.ɵɵelementStart(60, "button", 44);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_60_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_60_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "indent")); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(53, "svg", 9);
-            i0.ɵɵelement(54, "path", 38);
-            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(61, "svg", 11);
+            i0.ɵɵelement(62, "path", 45);
+            i0.ɵɵelementEnd()()()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(55, "div", 39)(56, "ngx-editor", 40);
-            i0.ɵɵlistener("focusIn", function WriteRichTextAreaFieldComponent_Template_ngx_editor_focusIn_56_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.syncAccessibilityLater()); })("focusOut", function WriteRichTextAreaFieldComponent_Template_ngx_editor_focusOut_56_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEditorFocusOut()); });
+            i0.ɵɵelementStart(63, "div", 46)(64, "ngx-editor", 47);
+            i0.ɵɵlistener("focusIn", function WriteRichTextAreaFieldComponent_Template_ngx_editor_focusIn_64_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.syncAccessibilityLater()); })("focusOut", function WriteRichTextAreaFieldComponent_Template_ngx_editor_focusOut_64_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEditorFocusOut()); });
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c1$e, !ctx.richTextAreaControl.valid && ctx.richTextAreaControl.dirty));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(29, _c1$e, !ctx.richTextAreaControl.valid && ctx.richTextAreaControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.labelId());
             i0.ɵɵadvance();
@@ -28362,31 +28520,35 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.caseField.hint_text);
             i0.ɵɵadvance();
+            i0.ɵɵproperty("id", ctx.keyboardInstructionsId());
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isInvalid());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(29, _c2$3, ctx.isInvalid()));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(31, _c2$3, ctx.isInvalid()));
             i0.ɵɵadvance(2);
             i0.ɵɵattribute("aria-label", ctx.toolbarLabel());
-            i0.ɵɵadvance(8);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(31, _c3, ctx.isToolbarCommandActive("bold")));
+            i0.ɵɵadvance(10);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(33, _c3, ctx.isToolbarCommandActive("bold")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("bold"));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(33, _c3, ctx.isToolbarCommandActive("italic")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(35, _c3, ctx.isToolbarCommandActive("italic")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("italic"));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(35, _c3, ctx.isToolbarCommandActive("underline")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(37, _c3, ctx.isToolbarCommandActive("underline")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("underline"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(37, _c3, ctx.isToolbarCommandActive("paragraph")));
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(39, _c3, ctx.isToolbarCommandActive("paragraph")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("paragraph"));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(39, _c3, ctx.isToolbarCommandActive("heading")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(41, _c3, ctx.isToolbarCommandActive("heading")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("heading"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(41, _c3, ctx.isToolbarCommandActive("bullet_list")));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.isToolbarCommandActive("heading"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c3, ctx.isToolbarCommandActive("bullet_list")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("bullet_list"));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c3, ctx.isOrderedListActive()));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(45, _c3, ctx.isOrderedListActive()));
             i0.ɵɵattribute("aria-pressed", ctx.isOrderedListActive());
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("for", ctx.listStyleId());
@@ -28394,18 +28556,18 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵproperty("id", ctx.listStyleId())("value", ctx.currentListSelectValue());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.isOrderedListActive());
-            i0.ɵɵadvance(15);
+            i0.ɵɵadvance(16);
             i0.ɵɵproperty("editor", ctx.editor)("formControl", ctx.richTextAreaControl);
-        } }, dependencies: [i5.NgClass, i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.NgControlStatus, i4.FormControlDirective, i3$1.NgxEditorComponent, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], styles: [".ccd-rich-text-area{margin-bottom:30px}.ccd-rich-text-area__editor{max-width:100%}.ccd-rich-text-area__toolbar{align-items:center;background:#fff;border:1px solid #d8dde0;border-radius:6px;display:flex;flex-wrap:wrap;gap:2px;margin-bottom:10px;padding:6px 8px;width:fit-content}.ccd-rich-text-area .NgxEditor__Wrapper{border:1px solid #000;border-radius:0;box-sizing:border-box;height:255px;max-width:100%;min-height:255px;min-width:200px;overflow:hidden;resize:both;width:100%}.ccd-rich-text-area .NgxEditor__Wrapper:focus-within{outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button{background:#fff;align-items:center;border:0;border-radius:2px;color:#0b0c0c;display:inline-flex;font-family:inherit;font-size:18px;font-weight:700;height:28px;justify-content:center;min-width:28px;padding:4px;width:28px}.ccd-rich-text-area__toolbar-button:hover{background:#f3f2f1}.ccd-rich-text-area__toolbar-button:focus{background:#fd0;box-shadow:0 0 0 2px #0b0c0c;outline:2px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button--active,.ccd-rich-text-area__toolbar-button--active:hover{background:#1d70b8;color:#fff}.ccd-rich-text-area__toolbar-button--italic{font-style:italic}.ccd-rich-text-area__toolbar-button--underline{text-decoration:underline}.ccd-rich-text-area__toolbar-separator{border-left:1px solid #b1b4b6;height:24px;margin:0 5px 0 3px}.ccd-rich-text-area__list-style{align-items:center;display:inline-flex;gap:8px;margin:0 4px}.ccd-rich-text-area__list-style-label{font-weight:700;white-space:nowrap}.ccd-rich-text-area__list-style-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;min-width:190px;padding:2px 28px 2px 8px}.ccd-rich-text-area__list-style-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-icon{display:block;fill:currentColor;height:20px;width:20px}.ccd-rich-text-area__toolbar-icon--paragraph{display:inline-flex;font-size:18px;line-height:1;width:auto}.ccd-rich-text-area__toolbar-icon--heading{display:inline-flex;font-size:18px;font-weight:700;line-height:1;width:auto}.ccd-rich-text-area .ProseMirror h1{font-size:20px;font-weight:700}.ccd-rich-text-area .NgxEditor__Wrapper .NgxEditor{border:0;border-radius:0;height:100%;min-height:0;overflow:hidden;width:100%}.ccd-rich-text-area__editor--error .NgxEditor__Wrapper{border-color:#d4351c}.ccd-rich-text-area .NgxEditor__Content{box-sizing:border-box;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px 14px}.ccd-rich-text-area .ProseMirror{min-height:231px;outline:0;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal}.ccd-rich-text-area .ProseMirror [data-indent=\"1\"]{margin-left:40px}.ccd-rich-text-area .ProseMirror [data-indent=\"2\"]{margin-left:80px}.ccd-rich-text-area .ProseMirror [data-indent=\"3\"]{margin-left:120px}.ccd-rich-text-area .ProseMirror [data-indent=\"4\"]{margin-left:160px}.ccd-rich-text-area .ProseMirror [data-indent=\"5\"]{margin-left:200px}.ccd-rich-text-area .ProseMirror [data-indent=\"6\"]{margin-left:240px}.ccd-rich-text-area .ProseMirror strong,.ccd-rich-text-area .ProseMirror strong *,.ccd-rich-text-area .ProseMirror b,.ccd-rich-text-area .ProseMirror b *{font-weight:700}.ccd-rich-text-area .ProseMirror strong u,.ccd-rich-text-area .ProseMirror u strong,.ccd-rich-text-area .ProseMirror b u,.ccd-rich-text-area .ProseMirror u b{font-weight:700!important;text-decoration:underline}.ccd-rich-text-area .ProseMirror:focus{box-shadow:none;outline:0}.ccd-rich-text-area .ProseMirror p,.ccd-rich-text-area .ProseMirror ul,.ccd-rich-text-area .ProseMirror ol{margin-top:0;overflow-wrap:anywhere;word-break:normal}.ccd-rich-text-area .ProseMirror p{margin-bottom:5px}.ccd-rich-text-area .ProseMirror ul{list-style:disc outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ol{list-style:decimal outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"1\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"1\"]{margin-left:40px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"2\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"2\"]{margin-left:80px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"3\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"3\"]{margin-left:120px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"4\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"4\"]{margin-left:160px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"5\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"5\"]{margin-left:200px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"6\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"6\"]{margin-left:240px;padding-left:25px}.ccd-rich-text-area .ProseMirror ol[type=a]{list-style-type:lower-alpha}.ccd-rich-text-area .ProseMirror ol[type=i]{list-style-type:lower-roman}.ccd-rich-text-area .ProseMirror ol[type=i]>li::marker{content:\"(\" counter(list-item,lower-roman) \") \"}.ccd-rich-text-area .ProseMirror li{display:list-item;margin-bottom:5px}.ccd-rich-text-area .ProseMirror li>p{margin:0}.ccd-rich-text-area .ProseMirror li>ul,.ccd-rich-text-area .ProseMirror li>ol{margin-top:5px}\n"], encapsulation: 2 });
+        } }, dependencies: [i5.NgClass, i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.NgControlStatus, i4.FormControlDirective, i3$1.NgxEditorComponent, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], styles: [".ccd-rich-text-area{margin-bottom:30px}.ccd-rich-text-area__editor{max-width:100%}.ccd-rich-text-area__keyboard-instructions{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ccd-rich-text-area__toolbar{align-items:center;background:#fff;border:1px solid #d8dde0;border-radius:6px;box-sizing:border-box;display:flex;flex-wrap:wrap;column-gap:2px;margin-bottom:10px;max-width:100%;padding:6px 8px;row-gap:6px;width:fit-content}.ccd-rich-text-area__toolbar-group{align-items:center;display:inline-flex;flex:0 0 auto;gap:2px}.ccd-rich-text-area__toolbar-group--list{max-width:100%}.ccd-rich-text-area .NgxEditor__Wrapper{border:1px solid #000;border-radius:0;box-sizing:border-box;height:255px;max-width:100%;min-height:255px;min-width:200px;overflow:hidden;resize:both;width:100%}.ccd-rich-text-area .NgxEditor__Wrapper:focus-within{outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button{background:#fff;align-items:center;border:0;border-radius:2px;color:#0b0c0c;display:inline-flex;font-family:inherit;font-size:18px;font-weight:700;height:28px;justify-content:center;min-width:28px;padding:4px;width:28px}.ccd-rich-text-area__toolbar-button:hover{background:#f3f2f1}.ccd-rich-text-area__toolbar-button:focus{background:#fd0;box-shadow:0 0 0 2px #0b0c0c;outline:2px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button--active,.ccd-rich-text-area__toolbar-button--active:hover{background:#1d70b8;color:#fff}.ccd-rich-text-area__toolbar-button--italic{font-style:italic}.ccd-rich-text-area__toolbar-button--underline{text-decoration:underline}.ccd-rich-text-area__toolbar-separator{border-left:1px solid #b1b4b6;height:24px;margin:0 5px 0 3px}.ccd-rich-text-area__heading-level{display:inline-flex;margin-right:3px}.ccd-rich-text-area__heading-level-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ccd-rich-text-area__heading-level-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;min-width:108px;padding:2px 24px 2px 6px;width:150px}.ccd-rich-text-area__heading-level-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__list-style{align-items:center;display:inline-flex;gap:8px;margin:0 4px;min-width:0}.ccd-rich-text-area__list-style-label{font-weight:700;white-space:nowrap}.ccd-rich-text-area__list-style-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;max-width:100%;min-width:0;padding:2px 28px 2px 8px;width:260px}.ccd-rich-text-area__list-style-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}@media(max-width:480px){.ccd-rich-text-area__toolbar-group--list{flex-wrap:wrap}.ccd-rich-text-area__list-style{flex:1 1 100%;margin-left:0}.ccd-rich-text-area__list-style-select{flex:1 1 auto;width:auto}}.ccd-rich-text-area__toolbar-icon{display:block;fill:currentColor;height:20px;width:20px}.ccd-rich-text-area__toolbar-icon--paragraph{display:inline-flex;font-size:18px;line-height:1;width:auto}.ccd-rich-text-area__toolbar-icon--heading{display:inline-flex;font-size:18px;font-weight:700;line-height:1;width:auto}.ccd-rich-text-area .ProseMirror h1{font-size:20px;font-weight:700}.ccd-rich-text-area .ProseMirror h2{font-size:18px;font-weight:700}.ccd-rich-text-area .ProseMirror h3{font-size:16px;font-weight:700}.ccd-rich-text-area .NgxEditor__Wrapper .NgxEditor{border:0;border-radius:0;height:100%;min-height:0;overflow:hidden;width:100%}.ccd-rich-text-area__editor--error .NgxEditor__Wrapper{border-color:#d4351c}.ccd-rich-text-area .NgxEditor__Content{box-sizing:border-box;font-size:14px;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px 14px}.ccd-rich-text-area .ProseMirror{font-size:14px;min-height:231px;outline:0;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal}.ccd-rich-text-area .ProseMirror [data-indent=\"1\"]{margin-left:40px}.ccd-rich-text-area .ProseMirror [data-indent=\"2\"]{margin-left:80px}.ccd-rich-text-area .ProseMirror [data-indent=\"3\"]{margin-left:120px}.ccd-rich-text-area .ProseMirror [data-indent=\"4\"]{margin-left:160px}.ccd-rich-text-area .ProseMirror [data-indent=\"5\"]{margin-left:200px}.ccd-rich-text-area .ProseMirror [data-indent=\"6\"]{margin-left:240px}.ccd-rich-text-area .ProseMirror strong,.ccd-rich-text-area .ProseMirror strong *,.ccd-rich-text-area .ProseMirror b,.ccd-rich-text-area .ProseMirror b *{font-weight:700}.ccd-rich-text-area .ProseMirror strong u,.ccd-rich-text-area .ProseMirror u strong,.ccd-rich-text-area .ProseMirror b u,.ccd-rich-text-area .ProseMirror u b{font-weight:700!important;text-decoration:underline}.ccd-rich-text-area .ProseMirror:focus{box-shadow:none;outline:0}.ccd-rich-text-area .ProseMirror p,.ccd-rich-text-area .ProseMirror ul,.ccd-rich-text-area .ProseMirror ol,.ccd-rich-text-area .ProseMirror li{font-size:14px;margin-top:0;overflow-wrap:anywhere;word-break:normal}.ccd-rich-text-area .ProseMirror p{margin-bottom:5px}.ccd-rich-text-area .ProseMirror ul{list-style:disc outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ol{list-style:decimal outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"1\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"1\"]{margin-left:40px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"2\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"2\"]{margin-left:80px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"3\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"3\"]{margin-left:120px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"4\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"4\"]{margin-left:160px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"5\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"5\"]{margin-left:200px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"6\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"6\"]{margin-left:240px;padding-left:25px}.ccd-rich-text-area .ProseMirror ol[type=a]{list-style-type:lower-alpha}.ccd-rich-text-area .ProseMirror ol[type=i]{list-style-type:lower-roman}.ccd-rich-text-area .ProseMirror ol[type=i]>li::marker{content:\"(\" counter(list-item,lower-roman) \") \"}.ccd-rich-text-area .ProseMirror li{display:list-item;margin-bottom:5px}.ccd-rich-text-area .ProseMirror li>p{margin:0}.ccd-rich-text-area .ProseMirror li>ul,.ccd-rich-text-area .ProseMirror li>ol{margin-top:5px}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteRichTextAreaFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-rich-text-area-field', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"form-group ccd-rich-text-area\" [ngClass]=\"{'form-group-error': !richTextAreaControl.valid && richTextAreaControl.dirty}\">\n  <div [id]=\"labelId()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </div>\n  <span [id]=\"hintId()\" class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span [id]=\"errorId()\" class=\"error-message\" *ngIf=\"isInvalid()\">\n    {{richTextAreaControl.errors | ccdFirstError:caseField.label}}\n  </span>\n\n  <div\n    #editorHost\n    class=\"ccd-rich-text-area__editor\"\n    [ngClass]=\"{'ccd-rich-text-area__editor--error': isInvalid()}\"\n    (click)=\"syncAccessibilityLater()\"\n    (keydown)=\"onEditorKeyDown($event)\"\n    (keyup)=\"syncAccessibilityLater()\"\n    (paste)=\"onPaste($event)\">\n    <div\n      class=\"ccd-rich-text-area__toolbar\"\n      role=\"toolbar\"\n      [attr.aria-label]=\"toolbarLabel()\">\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        aria-label=\"Undo\"\n        title=\"Undo\"\n        aria-keyshortcuts=\"Control+Z\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'undo')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\"></path>\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        aria-label=\"Redo\"\n        title=\"Redo\"\n        aria-keyshortcuts=\"Control+Y\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'redo')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z\"></path>\n        </svg>\n      </button>\n      <span class=\"ccd-rich-text-area__toolbar-separator\" aria-hidden=\"true\"></span>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--bold\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('bold')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('bold')\"\n        aria-label=\"Bold\"\n        title=\"Bold\"\n        aria-keyshortcuts=\"Control+B\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'bold')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5S13.83 9.5 13 9.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z\"></path>\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--italic\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('italic')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('italic')\"\n        aria-label=\"Italic\"\n        title=\"Italic\"\n        aria-keyshortcuts=\"Control+I\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'italic')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z\"></path>\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--underline\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('underline')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('underline')\"\n        aria-label=\"Underline\"\n        title=\"Underline\"\n        aria-keyshortcuts=\"Control+U\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'underline')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z\"></path>\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--paragraph\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('paragraph')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('paragraph')\"\n        aria-label=\"Paragraph\"\n        title=\"Paragraph\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'paragraph')\">\n        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--paragraph\" aria-hidden=\"true\">P</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--heading\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('heading')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('heading')\"\n        aria-label=\"Heading level 1\"\n        title=\"Heading level 1\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'heading')\">\n        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--heading\" aria-hidden=\"true\">H</span>\n      </button>\n      <span class=\"ccd-rich-text-area__toolbar-separator\" aria-hidden=\"true\"></span>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('bullet_list')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('bullet_list')\"\n        aria-label=\"Bullet List\"\n        title=\"Bullet List\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'bullet_list')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6C3.17 4.5 2.5 5.17 2.5 6S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 13h14v-2H7v2zm0 6h14v-2H7v2zM7 5v2h14V5H7z\"></path>\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isOrderedListActive()}\"\n        [attr.aria-pressed]=\"isOrderedListActive()\"\n        aria-label=\"Numbered List\"\n        title=\"Numbered List\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'ordered_list')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1V14h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z\"></path>\n        </svg>\n      </button>\n      <div class=\"ccd-rich-text-area__list-style\">\n        <label class=\"ccd-rich-text-area__list-style-label\" [for]=\"listStyleId()\">List style</label>\n        <select\n          class=\"ccd-rich-text-area__list-style-select\"\n          [id]=\"listStyleId()\"\n          [value]=\"currentListSelectValue()\"\n          (change)=\"onListStyleChange($event)\">\n          <option *ngIf=\"!isOrderedListActive()\" value=\"\">No list</option>\n          <option value=\"ordered_list\">Numbers (1, 2, 3)</option>\n          <option value=\"ordered_alpha\">Letters (a, b, c)</option>\n          <option value=\"ordered_roman\">Roman numerals (i), (ii), (iii)</option>\n        </select>\n      </div>\n      <span class=\"ccd-rich-text-area__toolbar-separator\" aria-hidden=\"true\"></span>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        aria-label=\"Decrease Indent\"\n        title=\"Decrease Indent\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'outdent')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M11 17h10v-2H11v2zm-8-5 4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z\"></path>\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        aria-label=\"Increase Indent\"\n        title=\"Increase Indent\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'indent')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"NgxEditor__Wrapper\">\n      <ngx-editor\n        [editor]=\"editor\"\n        [formControl]=\"richTextAreaControl\"\n        outputFormat=\"html\"\n        (focusIn)=\"syncAccessibilityLater()\"\n        (focusOut)=\"onEditorFocusOut()\">\n      </ngx-editor>\n    </div>\n  </div>\n</div>\n", styles: [".ccd-rich-text-area{margin-bottom:30px}.ccd-rich-text-area__editor{max-width:100%}.ccd-rich-text-area__toolbar{align-items:center;background:#fff;border:1px solid #d8dde0;border-radius:6px;display:flex;flex-wrap:wrap;gap:2px;margin-bottom:10px;padding:6px 8px;width:fit-content}.ccd-rich-text-area .NgxEditor__Wrapper{border:1px solid #000;border-radius:0;box-sizing:border-box;height:255px;max-width:100%;min-height:255px;min-width:200px;overflow:hidden;resize:both;width:100%}.ccd-rich-text-area .NgxEditor__Wrapper:focus-within{outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button{background:#fff;align-items:center;border:0;border-radius:2px;color:#0b0c0c;display:inline-flex;font-family:inherit;font-size:18px;font-weight:700;height:28px;justify-content:center;min-width:28px;padding:4px;width:28px}.ccd-rich-text-area__toolbar-button:hover{background:#f3f2f1}.ccd-rich-text-area__toolbar-button:focus{background:#fd0;box-shadow:0 0 0 2px #0b0c0c;outline:2px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button--active,.ccd-rich-text-area__toolbar-button--active:hover{background:#1d70b8;color:#fff}.ccd-rich-text-area__toolbar-button--italic{font-style:italic}.ccd-rich-text-area__toolbar-button--underline{text-decoration:underline}.ccd-rich-text-area__toolbar-separator{border-left:1px solid #b1b4b6;height:24px;margin:0 5px 0 3px}.ccd-rich-text-area__list-style{align-items:center;display:inline-flex;gap:8px;margin:0 4px}.ccd-rich-text-area__list-style-label{font-weight:700;white-space:nowrap}.ccd-rich-text-area__list-style-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;min-width:190px;padding:2px 28px 2px 8px}.ccd-rich-text-area__list-style-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-icon{display:block;fill:currentColor;height:20px;width:20px}.ccd-rich-text-area__toolbar-icon--paragraph{display:inline-flex;font-size:18px;line-height:1;width:auto}.ccd-rich-text-area__toolbar-icon--heading{display:inline-flex;font-size:18px;font-weight:700;line-height:1;width:auto}.ccd-rich-text-area .ProseMirror h1{font-size:20px;font-weight:700}.ccd-rich-text-area .NgxEditor__Wrapper .NgxEditor{border:0;border-radius:0;height:100%;min-height:0;overflow:hidden;width:100%}.ccd-rich-text-area__editor--error .NgxEditor__Wrapper{border-color:#d4351c}.ccd-rich-text-area .NgxEditor__Content{box-sizing:border-box;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px 14px}.ccd-rich-text-area .ProseMirror{min-height:231px;outline:0;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal}.ccd-rich-text-area .ProseMirror [data-indent=\"1\"]{margin-left:40px}.ccd-rich-text-area .ProseMirror [data-indent=\"2\"]{margin-left:80px}.ccd-rich-text-area .ProseMirror [data-indent=\"3\"]{margin-left:120px}.ccd-rich-text-area .ProseMirror [data-indent=\"4\"]{margin-left:160px}.ccd-rich-text-area .ProseMirror [data-indent=\"5\"]{margin-left:200px}.ccd-rich-text-area .ProseMirror [data-indent=\"6\"]{margin-left:240px}.ccd-rich-text-area .ProseMirror strong,.ccd-rich-text-area .ProseMirror strong *,.ccd-rich-text-area .ProseMirror b,.ccd-rich-text-area .ProseMirror b *{font-weight:700}.ccd-rich-text-area .ProseMirror strong u,.ccd-rich-text-area .ProseMirror u strong,.ccd-rich-text-area .ProseMirror b u,.ccd-rich-text-area .ProseMirror u b{font-weight:700!important;text-decoration:underline}.ccd-rich-text-area .ProseMirror:focus{box-shadow:none;outline:0}.ccd-rich-text-area .ProseMirror p,.ccd-rich-text-area .ProseMirror ul,.ccd-rich-text-area .ProseMirror ol{margin-top:0;overflow-wrap:anywhere;word-break:normal}.ccd-rich-text-area .ProseMirror p{margin-bottom:5px}.ccd-rich-text-area .ProseMirror ul{list-style:disc outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ol{list-style:decimal outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"1\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"1\"]{margin-left:40px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"2\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"2\"]{margin-left:80px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"3\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"3\"]{margin-left:120px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"4\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"4\"]{margin-left:160px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"5\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"5\"]{margin-left:200px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"6\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"6\"]{margin-left:240px;padding-left:25px}.ccd-rich-text-area .ProseMirror ol[type=a]{list-style-type:lower-alpha}.ccd-rich-text-area .ProseMirror ol[type=i]{list-style-type:lower-roman}.ccd-rich-text-area .ProseMirror ol[type=i]>li::marker{content:\"(\" counter(list-item,lower-roman) \") \"}.ccd-rich-text-area .ProseMirror li{display:list-item;margin-bottom:5px}.ccd-rich-text-area .ProseMirror li>p{margin:0}.ccd-rich-text-area .ProseMirror li>ul,.ccd-rich-text-area .ProseMirror li>ol{margin-top:5px}\n"] }]
+        args: [{ selector: 'ccd-write-rich-text-area-field', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"form-group ccd-rich-text-area\" [ngClass]=\"{'form-group-error': !richTextAreaControl.valid && richTextAreaControl.dirty}\">\n  <div [id]=\"labelId()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </div>\n  <span [id]=\"hintId()\" class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span [id]=\"keyboardInstructionsId()\" class=\"ccd-rich-text-area__keyboard-instructions\">\n    Press Escape to move from the editor to the formatting toolbar.\n  </span>\n  <span [id]=\"errorId()\" class=\"error-message\" *ngIf=\"isInvalid()\">\n    {{richTextAreaControl.errors | ccdFirstError:caseField.label}}\n  </span>\n\n  <div\n    #editorHost\n    class=\"ccd-rich-text-area__editor\"\n    [ngClass]=\"{'ccd-rich-text-area__editor--error': isInvalid()}\"\n    (click)=\"onEditorClick()\"\n    (keydown)=\"onEditorKeyDown($event)\"\n    (keyup)=\"syncAccessibilityLater()\"\n    (paste)=\"onPaste($event)\">\n    <div\n      class=\"ccd-rich-text-area__toolbar\"\n      role=\"toolbar\"\n      aria-orientation=\"horizontal\"\n      [attr.aria-label]=\"toolbarLabel()\"\n      (focusin)=\"onToolbarFocusIn($event)\"\n      (keydown)=\"onToolbarKeyDown($event)\">\n      <div class=\"ccd-rich-text-area__toolbar-group\" role=\"group\" aria-label=\"History\">\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        tabindex=\"0\"\n        aria-label=\"Undo\"\n        title=\"Undo\"\n        aria-keyshortcuts=\"Control+Z\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'undo')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\"></path>\n        </svg>\n        </button>\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        tabindex=\"-1\"\n        aria-label=\"Redo\"\n        title=\"Redo\"\n        aria-keyshortcuts=\"Control+Y\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'redo')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z\"></path>\n        </svg>\n        </button>\n      </div>\n      <span class=\"ccd-rich-text-area__toolbar-separator\" aria-hidden=\"true\"></span>\n      <div class=\"ccd-rich-text-area__toolbar-group\" role=\"group\" aria-label=\"Text formatting\">\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--bold\"\n        tabindex=\"-1\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('bold')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('bold')\"\n        aria-label=\"Bold\"\n        title=\"Bold\"\n        aria-keyshortcuts=\"Control+B\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'bold')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5S13.83 9.5 13 9.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z\"></path>\n        </svg>\n        </button>\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--italic\"\n        tabindex=\"-1\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('italic')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('italic')\"\n        aria-label=\"Italic\"\n        title=\"Italic\"\n        aria-keyshortcuts=\"Control+I\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'italic')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z\"></path>\n        </svg>\n        </button>\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--underline\"\n        tabindex=\"-1\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('underline')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('underline')\"\n        aria-label=\"Underline\"\n        title=\"Underline\"\n        aria-keyshortcuts=\"Control+U\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'underline')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z\"></path>\n        </svg>\n        </button>\n      </div>\n      <div class=\"ccd-rich-text-area__toolbar-group\" role=\"group\" aria-label=\"Paragraph and heading formatting\">\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--paragraph\"\n        tabindex=\"-1\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('paragraph')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('paragraph')\"\n        aria-label=\"Paragraph\"\n        title=\"Paragraph\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'paragraph')\">\n        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--paragraph\" aria-hidden=\"true\">P</span>\n        </button>\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button ccd-rich-text-area__toolbar-button--heading\"\n        tabindex=\"-1\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('heading')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('heading')\"\n        aria-label=\"Heading\"\n        title=\"Heading\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'heading')\">\n        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--heading\" aria-hidden=\"true\">H</span>\n        </button>\n        <div\n          *ngIf=\"isToolbarCommandActive('heading')\"\n          class=\"ccd-rich-text-area__heading-level\">\n          <label class=\"ccd-rich-text-area__heading-level-label\" [for]=\"headingLevelId()\">Heading level</label>\n          <select\n            class=\"ccd-rich-text-area__heading-level-select\"\n            tabindex=\"-1\"\n            [id]=\"headingLevelId()\"\n            [value]=\"selectedHeadingLevel\"\n            (change)=\"onHeadingLevelChange($event)\">\n            <option value=\"1\">Heading 1</option>\n            <option value=\"2\">Heading 2</option>\n            <option value=\"3\">Heading 3</option>\n          </select>\n        </div>\n      </div>\n      <span class=\"ccd-rich-text-area__toolbar-separator\" aria-hidden=\"true\"></span>\n      <div\n        class=\"ccd-rich-text-area__toolbar-group ccd-rich-text-area__toolbar-group--list\"\n        role=\"group\"\n        aria-label=\"List formatting\">\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        tabindex=\"-1\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('bullet_list')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('bullet_list')\"\n        aria-label=\"Bullet List\"\n        title=\"Bullet List\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'bullet_list')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6C3.17 4.5 2.5 5.17 2.5 6S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 13h14v-2H7v2zm0 6h14v-2H7v2zM7 5v2h14V5H7z\"></path>\n        </svg>\n        </button>\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        tabindex=\"-1\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isOrderedListActive()}\"\n        [attr.aria-pressed]=\"isOrderedListActive()\"\n        aria-label=\"Numbered List\"\n        title=\"Numbered List\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'ordered_list')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1V14h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z\"></path>\n        </svg>\n        </button>\n        <div class=\"ccd-rich-text-area__list-style\">\n          <label class=\"ccd-rich-text-area__list-style-label\" [for]=\"listStyleId()\">List style</label>\n          <select\n            class=\"ccd-rich-text-area__list-style-select\"\n            tabindex=\"-1\"\n            [id]=\"listStyleId()\"\n            [value]=\"currentListSelectValue()\"\n            (change)=\"onListStyleChange($event)\">\n            <option *ngIf=\"!isOrderedListActive()\" value=\"\">No list</option>\n            <option value=\"ordered_list\">Numbers (1, 2, 3)</option>\n            <option value=\"ordered_alpha\">Letters (a, b, c)</option>\n            <option value=\"ordered_roman\">Roman numerals (i), (ii), (iii)</option>\n          </select>\n        </div>\n      </div>\n      <span class=\"ccd-rich-text-area__toolbar-separator\" aria-hidden=\"true\"></span>\n      <div class=\"ccd-rich-text-area__toolbar-group\" role=\"group\" aria-label=\"Indentation\">\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        tabindex=\"-1\"\n        aria-label=\"Decrease Indent\"\n        title=\"Decrease Indent\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'outdent')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M11 17h10v-2H11v2zm-8-5 4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z\"></path>\n        </svg>\n        </button>\n        <button\n        type=\"button\"\n        class=\"ccd-rich-text-area__toolbar-button\"\n        tabindex=\"-1\"\n        aria-label=\"Increase Indent\"\n        title=\"Increase Indent\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'indent')\">\n        <svg class=\"ccd-rich-text-area__toolbar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z\"></path>\n        </svg>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"NgxEditor__Wrapper\">\n      <ngx-editor\n        [editor]=\"editor\"\n        [formControl]=\"richTextAreaControl\"\n        outputFormat=\"html\"\n        (focusIn)=\"syncAccessibilityLater()\"\n        (focusOut)=\"onEditorFocusOut()\">\n      </ngx-editor>\n    </div>\n  </div>\n</div>\n", styles: [".ccd-rich-text-area{margin-bottom:30px}.ccd-rich-text-area__editor{max-width:100%}.ccd-rich-text-area__keyboard-instructions{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ccd-rich-text-area__toolbar{align-items:center;background:#fff;border:1px solid #d8dde0;border-radius:6px;box-sizing:border-box;display:flex;flex-wrap:wrap;column-gap:2px;margin-bottom:10px;max-width:100%;padding:6px 8px;row-gap:6px;width:fit-content}.ccd-rich-text-area__toolbar-group{align-items:center;display:inline-flex;flex:0 0 auto;gap:2px}.ccd-rich-text-area__toolbar-group--list{max-width:100%}.ccd-rich-text-area .NgxEditor__Wrapper{border:1px solid #000;border-radius:0;box-sizing:border-box;height:255px;max-width:100%;min-height:255px;min-width:200px;overflow:hidden;resize:both;width:100%}.ccd-rich-text-area .NgxEditor__Wrapper:focus-within{outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button{background:#fff;align-items:center;border:0;border-radius:2px;color:#0b0c0c;display:inline-flex;font-family:inherit;font-size:18px;font-weight:700;height:28px;justify-content:center;min-width:28px;padding:4px;width:28px}.ccd-rich-text-area__toolbar-button:hover{background:#f3f2f1}.ccd-rich-text-area__toolbar-button:focus{background:#fd0;box-shadow:0 0 0 2px #0b0c0c;outline:2px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button--active,.ccd-rich-text-area__toolbar-button--active:hover{background:#1d70b8;color:#fff}.ccd-rich-text-area__toolbar-button--italic{font-style:italic}.ccd-rich-text-area__toolbar-button--underline{text-decoration:underline}.ccd-rich-text-area__toolbar-separator{border-left:1px solid #b1b4b6;height:24px;margin:0 5px 0 3px}.ccd-rich-text-area__heading-level{display:inline-flex;margin-right:3px}.ccd-rich-text-area__heading-level-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ccd-rich-text-area__heading-level-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;min-width:108px;padding:2px 24px 2px 6px;width:150px}.ccd-rich-text-area__heading-level-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__list-style{align-items:center;display:inline-flex;gap:8px;margin:0 4px;min-width:0}.ccd-rich-text-area__list-style-label{font-weight:700;white-space:nowrap}.ccd-rich-text-area__list-style-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;max-width:100%;min-width:0;padding:2px 28px 2px 8px;width:260px}.ccd-rich-text-area__list-style-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}@media(max-width:480px){.ccd-rich-text-area__toolbar-group--list{flex-wrap:wrap}.ccd-rich-text-area__list-style{flex:1 1 100%;margin-left:0}.ccd-rich-text-area__list-style-select{flex:1 1 auto;width:auto}}.ccd-rich-text-area__toolbar-icon{display:block;fill:currentColor;height:20px;width:20px}.ccd-rich-text-area__toolbar-icon--paragraph{display:inline-flex;font-size:18px;line-height:1;width:auto}.ccd-rich-text-area__toolbar-icon--heading{display:inline-flex;font-size:18px;font-weight:700;line-height:1;width:auto}.ccd-rich-text-area .ProseMirror h1{font-size:20px;font-weight:700}.ccd-rich-text-area .ProseMirror h2{font-size:18px;font-weight:700}.ccd-rich-text-area .ProseMirror h3{font-size:16px;font-weight:700}.ccd-rich-text-area .NgxEditor__Wrapper .NgxEditor{border:0;border-radius:0;height:100%;min-height:0;overflow:hidden;width:100%}.ccd-rich-text-area__editor--error .NgxEditor__Wrapper{border-color:#d4351c}.ccd-rich-text-area .NgxEditor__Content{box-sizing:border-box;font-size:14px;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px 14px}.ccd-rich-text-area .ProseMirror{font-size:14px;min-height:231px;outline:0;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal}.ccd-rich-text-area .ProseMirror [data-indent=\"1\"]{margin-left:40px}.ccd-rich-text-area .ProseMirror [data-indent=\"2\"]{margin-left:80px}.ccd-rich-text-area .ProseMirror [data-indent=\"3\"]{margin-left:120px}.ccd-rich-text-area .ProseMirror [data-indent=\"4\"]{margin-left:160px}.ccd-rich-text-area .ProseMirror [data-indent=\"5\"]{margin-left:200px}.ccd-rich-text-area .ProseMirror [data-indent=\"6\"]{margin-left:240px}.ccd-rich-text-area .ProseMirror strong,.ccd-rich-text-area .ProseMirror strong *,.ccd-rich-text-area .ProseMirror b,.ccd-rich-text-area .ProseMirror b *{font-weight:700}.ccd-rich-text-area .ProseMirror strong u,.ccd-rich-text-area .ProseMirror u strong,.ccd-rich-text-area .ProseMirror b u,.ccd-rich-text-area .ProseMirror u b{font-weight:700!important;text-decoration:underline}.ccd-rich-text-area .ProseMirror:focus{box-shadow:none;outline:0}.ccd-rich-text-area .ProseMirror p,.ccd-rich-text-area .ProseMirror ul,.ccd-rich-text-area .ProseMirror ol,.ccd-rich-text-area .ProseMirror li{font-size:14px;margin-top:0;overflow-wrap:anywhere;word-break:normal}.ccd-rich-text-area .ProseMirror p{margin-bottom:5px}.ccd-rich-text-area .ProseMirror ul{list-style:disc outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ol{list-style:decimal outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"1\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"1\"]{margin-left:40px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"2\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"2\"]{margin-left:80px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"3\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"3\"]{margin-left:120px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"4\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"4\"]{margin-left:160px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"5\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"5\"]{margin-left:200px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"6\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"6\"]{margin-left:240px;padding-left:25px}.ccd-rich-text-area .ProseMirror ol[type=a]{list-style-type:lower-alpha}.ccd-rich-text-area .ProseMirror ol[type=i]{list-style-type:lower-roman}.ccd-rich-text-area .ProseMirror ol[type=i]>li::marker{content:\"(\" counter(list-item,lower-roman) \") \"}.ccd-rich-text-area .ProseMirror li{display:list-item;margin-bottom:5px}.ccd-rich-text-area .ProseMirror li>p{margin:0}.ccd-rich-text-area .ProseMirror li>ul,.ccd-rich-text-area .ProseMirror li>ol{margin-top:5px}\n"] }]
     }], null, { editorHost: [{
             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: 128 }); })();
+(() => { (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 }); })();
 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); }; })();