@hmcts/ccd-case-ui-toolkit 7.3.91 → 7.3.92

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

@@ -37,9 +37,9 @@ import { Editor, NgxEditorModule } from 'ngx-editor';
 import { nodes, marks } from 'ngx-editor/schema';
 import { setBlockType } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
-import { Schema } from 'prosemirror-model';
+import { Schema, Fragment } from 'prosemirror-model';
 import { liftListItem, sinkListItem } from 'prosemirror-schema-list';
-import { Plugin } from 'prosemirror-state';
+import { Plugin, TextSelection } from 'prosemirror-state';
 import * as i2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i6$1 from '@angular/cdk/tree';
@@ -25910,6 +25910,9 @@ function sanitiseRichTextDocument(documentElement) {
         const listStart = tagName === 'ol' && /^\d{1,6}$/.test(element.getAttribute('start') || '')
             ? element.getAttribute('start')
             : null;
+        const listType = tagName === 'ol' && /^[ai]$/.test(element.getAttribute('type') || '')
+            ? element.getAttribute('type')
+            : null;
         while (element.attributes.length > 0) {
             element.removeAttribute(element.attributes[0].name);
         }
@@ -25922,6 +25925,9 @@ function sanitiseRichTextDocument(documentElement) {
         if (listStart) {
             element.setAttribute('start', listStart);
         }
+        if (listType) {
+            element.setAttribute('type', listType);
+        }
     });
     return documentElement.body.innerHTML;
 }
@@ -25952,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 li{display:list-item;margin-bottom:5px}.ccd-rich-text-area-read li>p{margin:0}.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{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 });
 }
 (() => { (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 li{display:list-item;margin-bottom:5px}.ccd-rich-text-area-read li>p{margin:0}.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{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"] }]
     }], () => [{ 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 }); })();
 
@@ -25965,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", 37);
+    i0.ɵɵelementStart(0, "span", 41);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "ccdFieldLabel");
     i0.ɵɵelementEnd();
@@ -25975,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", 38);
+    i0.ɵɵelementStart(0, "span", 42);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -25986,7 +25992,7 @@ function WriteRichTextAreaFieldComponent_span_3_Template(rf, ctx) { if (rf & 1)
     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", 39);
+    i0.ɵɵelementStart(0, "span", 43);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "ccdFirstError");
     i0.ɵɵelementEnd();
@@ -25996,6 +26002,29 @@ 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);
+    i0.ɵɵtext(1, "No list");
+    i0.ɵɵelementEnd();
+} }
+function orderedListStyleForType(type) {
+    if (type === 'a') {
+        return 'lower-alpha';
+    }
+    if (type === 'i') {
+        return 'lower-roman';
+    }
+    return null;
+}
+function orderedListTypeForStyle(style) {
+    if (style === 'lower-alpha') {
+        return 'a';
+    }
+    if (style === 'lower-roman') {
+        return 'i';
+    }
+    return null;
+}
 const WORD_COLUMN_SPACING = 12;
 const MAX_INDENT = 6;
 const CSS_LENGTH_UNITS = ['rem', 'px', 'pt', 'in', 'cm', 'mm', 'em'];
@@ -26005,11 +26034,16 @@ const BLOCK_NODE_NAMES = new Set([
 ]);
 const richTextNodes = {
     ...nodes,
+    list_item: {
+        ...nodes.list_item,
+        content: '(paragraph | heading) block*'
+    },
     ordered_list: {
         ...nodes.ordered_list,
         attrs: {
             order: { default: 1 },
-            indent: { default: null }
+            indent: { default: null },
+            listStyle: { default: null }
         },
         parseDOM: [{
                 tag: 'ol',
@@ -26017,28 +26051,35 @@ const richTextNodes = {
                     const list = element;
                     return {
                         order: list.hasAttribute('start') ? Number(list.getAttribute('start')) : 1,
-                        indent: Number(list.getAttribute('data-indent')) || null
+                        indent: Number(list.dataset.indent) || null,
+                        listStyle: orderedListStyleForType(list.getAttribute('type'))
                     };
                 }
             }],
         toDOM: (node) => ['ol', {
                 start: node.attrs.order === 1 ? null : node.attrs.order,
-                'data-indent': node.attrs.indent
+                'data-indent': node.attrs.indent,
+                type: orderedListTypeForStyle(node.attrs.listStyle)
             }, 0]
     },
     bullet_list: {
         ...nodes.bullet_list,
         attrs: {
-            indent: { default: null }
+            indent: { default: null },
+            continuationOrder: { default: null }
         },
         parseDOM: [{
                 tag: 'ul',
                 getAttrs: (element) => {
                     const list = element;
-                    return { indent: Number(list.getAttribute('data-indent')) || null };
+                    return {
+                        indent: Number(list.dataset.indent) || null
+                    };
                 }
             }],
-        toDOM: (node) => ['ul', { 'data-indent': node.attrs.indent }, 0]
+        toDOM: (node) => ['ul', {
+                'data-indent': node.attrs.indent
+            }, 0]
     }
 };
 const richTextSchema = new Schema({ nodes: richTextNodes, marks: marks });
@@ -26064,7 +26105,10 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             plugins: [
                 new Plugin({
                     props: {
-                        handlePaste: (_view, event) => this.handleEditorPaste(event)
+                        handlePaste: (_view, event) => this.handleEditorPaste(event),
+                        handleDOMEvents: {
+                            keydown: (_view, event) => this.handleEditorKeyDown(event)
+                        }
                     }
                 })
             ],
@@ -26111,6 +26155,9 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     errorId() {
         return `${this.id()}_error`;
     }
+    listStyleId() {
+        return `${this.id()}_list_style`;
+    }
     toolbarLabel() {
         return `${this.caseField.label || this.caseField.id} formatting options`;
     }
@@ -26124,6 +26171,53 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     onToolbarButtonMouseDown(event) {
         event.preventDefault();
     }
+    handleEditorKeyDown(event) {
+        const isUnmodifiedEnter = event.key === 'Enter' &&
+            !event.shiftKey &&
+            !event.altKey &&
+            !event.ctrlKey &&
+            !event.metaKey;
+        if (isUnmodifiedEnter && this.splitListContinuationParagraph()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        }
+        if (event.key !== 'Tab' || !this.isNodeActive('list_item')) {
+            return false;
+        }
+        this.executeToolbarCommand(event, event.shiftKey ? 'outdent' : 'indent');
+        return true;
+    }
+    splitListContinuationParagraph() {
+        const { state, dispatch } = this.editor.view;
+        const { $from, empty } = state.selection;
+        const textBlock = $from.parent;
+        if (!empty || !textBlock.isTextblock) {
+            return false;
+        }
+        let isContinuation = false;
+        for (let depth = $from.depth - 1; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name !== 'list_item') {
+                continue;
+            }
+            isContinuation = depth < $from.depth &&
+                $from.node(depth + 1) === textBlock &&
+                node.firstChild !== textBlock;
+            break;
+        }
+        if (!isContinuation) {
+            return false;
+        }
+        const textBlockStart = $from.before($from.depth);
+        const before = textBlock.type.create(textBlock.attrs, textBlock.content.cut(0, $from.parentOffset), textBlock.marks);
+        const after = textBlock.type.create(textBlock.attrs, textBlock.content.cut($from.parentOffset), textBlock.marks);
+        const transaction = state.tr.replaceWith(textBlockStart, $from.after($from.depth), Fragment.fromArray([before, after]));
+        transaction.setSelection(TextSelection.create(transaction.doc, textBlockStart + before.nodeSize + 1));
+        transaction.setStoredMarks(state.storedMarks || $from.marks());
+        dispatch(transaction.scrollIntoView());
+        return true;
+    }
     executeToolbarCommand(event, command) {
         event.preventDefault();
         event.stopPropagation();
@@ -26146,6 +26240,9 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             case 'paragraph':
                 this.toggleParagraph();
                 break;
+            case 'heading':
+                this.toggleHeading();
+                break;
             case 'indent':
                 this.changeIndent(true);
                 break;
@@ -26153,11 +26250,10 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
                 this.changeIndent(false);
                 break;
             case 'ordered_list':
-                this.editor.commands.toggleOrderedList().exec();
-                this.paragraphCommandApplied = false;
+                this.toggleOrderedList();
                 break;
             case 'bullet_list':
-                this.editor.commands.toggleBulletList().exec();
+                this.toggleBulletList();
                 this.paragraphCommandApplied = false;
                 break;
             default:
@@ -26171,6 +26267,424 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     isToolbarCommandActive(command) {
         return !!this.activeToolbarCommands[command];
     }
+    currentListStyle() {
+        const activeList = this.activeListNode();
+        if (activeList?.type.name === 'ordered_list') {
+            const orderedListStyle = activeList.attrs.listStyle || 'decimal';
+            if (orderedListStyle === 'lower-alpha') {
+                return 'ordered_alpha';
+            }
+            if (orderedListStyle === 'lower-roman') {
+                return 'ordered_roman';
+            }
+            return 'ordered_list';
+        }
+        if (activeList?.type.name === 'bullet_list') {
+            return 'bullet_list';
+        }
+        return '';
+    }
+    currentListSelectValue() {
+        const currentListStyle = this.currentListStyle();
+        return currentListStyle === 'bullet_list' ? '' : currentListStyle;
+    }
+    isOrderedListActive() {
+        return this.listType(this.currentListStyle()) === 'ordered_list';
+    }
+    onListStyleChange(event) {
+        const select = event.target;
+        const listStyle = select.value;
+        if (!listStyle) {
+            select.value = this.currentListSelectValue();
+            return;
+        }
+        this.applyListStyleSelection(listStyle);
+        this.richTextAreaControl.markAsDirty();
+        this.editor.view.focus();
+        this.updateToolbarState();
+        this.syncAccessibilityLater();
+    }
+    applyListStyleSelection(listStyle) {
+        const currentListStyle = this.currentListStyle();
+        if (listStyle === currentListStyle) {
+            if (listStyle === 'ordered_list') {
+                this.changeActiveListType('ordered_list', 'decimal');
+            }
+            return;
+        }
+        const currentListType = this.listType(currentListStyle);
+        const nextListType = this.listType(listStyle);
+        if (currentListType && nextListType && currentListType !== nextListType) {
+            this.changeActiveListType(nextListType, this.orderedListStyle(listStyle));
+        }
+        else if (nextListType === 'ordered_list') {
+            if (currentListType !== 'ordered_list') {
+                const rebuiltIndentedList = this.rebuildSelectedIndentedBlocksAsList('ordered_list', this.orderedListStyle(listStyle));
+                if (!rebuiltIndentedList) {
+                    this.editor.commands.toggleOrderedList().exec();
+                }
+            }
+            this.applyOrderedListStyle(this.orderedListStyle(listStyle));
+        }
+        else if (listStyle === 'bullet_list') {
+            if (currentListType !== 'bullet_list') {
+                this.editor.commands.toggleBulletList().exec();
+            }
+        }
+        else {
+            this.applyParagraph();
+            this.paragraphCommandApplied = true;
+        }
+    }
+    changeActiveListType(listType, orderedListStyle) {
+        const { state, dispatch } = this.editor.view;
+        const { $from } = state.selection;
+        const targetType = state.schema.nodes[listType];
+        if (this.changeFullySelectedListHierarchy(listType, orderedListStyle)) {
+            return;
+        }
+        for (let depth = $from.depth; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name !== 'ordered_list' && node.type.name !== 'bullet_list') {
+                continue;
+            }
+            const transaction = state.tr;
+            let nextOrder = 1;
+            this.contiguousListPositions(depth, listType).forEach(({ position, list }) => {
+                const indent = Number(list.attrs.indent) || null;
+                const attrs = listType === 'ordered_list'
+                    ? {
+                        order: nextOrder,
+                        indent,
+                        listStyle: orderedListStyle === 'decimal' ? null : orderedListStyle
+                    }
+                    : {
+                        indent,
+                        continuationOrder: Number(list.attrs.order) || null
+                    };
+                transaction.setNodeMarkup(position, targetType, attrs);
+                nextOrder += list.childCount;
+            });
+            dispatch(transaction);
+            return;
+        }
+    }
+    changeFullySelectedListHierarchy(listType, rootStyle) {
+        const { state, dispatch } = this.editor.view;
+        const { $from, $to, empty, from, to } = state.selection;
+        const targetListType = state.schema.nodes[listType];
+        if (empty || !targetListType) {
+            return false;
+        }
+        for (let depth = 1; depth <= $from.depth; depth++) {
+            const list = $from.node(depth);
+            if (!this.isListNode(list) || $to.depth < depth || $to.node(depth) !== list ||
+                $from.index(depth) !== 0 || $to.indexAfter(depth) !== list.childCount) {
+                continue;
+            }
+            const listPosition = $from.before(depth);
+            if (!this.selectionCoversListContent(list, listPosition, from, to)) {
+                continue;
+            }
+            const transaction = state.tr;
+            const changeListHierarchy = (node, position, listDepth) => {
+                const orderedStyle = this.orderedListStyleAtDepth(rootStyle, listDepth);
+                const indent = Number(node.attrs.indent) || null;
+                const attrs = listType === 'ordered_list'
+                    ? {
+                        order: 1,
+                        indent,
+                        listStyle: orderedStyle === 'decimal' ? null : orderedStyle
+                    }
+                    : {
+                        indent,
+                        continuationOrder: Number(node.attrs.order) || null
+                    };
+                transaction.setNodeMarkup(position, targetListType, attrs);
+                node.forEach((child, childOffset) => {
+                    const childPosition = position + 1 + childOffset;
+                    if (this.isListNode(child)) {
+                        changeListHierarchy(child, childPosition, listDepth + 1);
+                        return;
+                    }
+                    child.descendants((descendant, descendantOffset) => {
+                        if (!this.isListNode(descendant)) {
+                            return true;
+                        }
+                        changeListHierarchy(descendant, childPosition + descendantOffset + 1, listDepth + 1);
+                        return false;
+                    });
+                });
+            };
+            changeListHierarchy(list, listPosition, 0);
+            dispatch(transaction.scrollIntoView());
+            return true;
+        }
+        return false;
+    }
+    contiguousListPositions(depth, targetListType) {
+        const { $from } = this.editor.view.state.selection;
+        const parentDepth = depth - 1;
+        const parent = $from.node(parentDepth);
+        const activeList = $from.node(depth);
+        const activeIndex = $from.index(parentDepth);
+        const includedIndexes = new Set([activeIndex]);
+        this.collectContiguousListIndexes(parent, activeList, activeIndex, -1, targetListType, includedIndexes);
+        this.collectContiguousListIndexes(parent, activeList, activeIndex, 1, targetListType, includedIndexes);
+        const positions = [];
+        parent.forEach((child, childOffset, index) => {
+            if (includedIndexes.has(index) && this.isList(child)) {
+                positions.push({ position: $from.start(parentDepth) + childOffset, list: child });
+            }
+        });
+        return positions;
+    }
+    collectContiguousListIndexes(parent, activeList, activeIndex, direction, targetListType, includedIndexes) {
+        let adjacentList = activeList;
+        let crossedContent = false;
+        let crossedSectionHeading = false;
+        for (let index = activeIndex + direction; index >= 0 && index < parent.childCount; index += direction) {
+            const child = parent.child(index);
+            if (this.isEmptyParagraph(child)) {
+                continue;
+            }
+            const matchesActiveList = this.hasMatchingListType(child, activeList);
+            const isMixedListToRepair = crossedSectionHeading && this.isList(child) &&
+                child.type.name !== activeList.type.name && targetListType === activeList.type.name;
+            if (matchesActiveList || isMixedListToRepair) {
+                const isHeadingSeparatedBulletList = activeList.type.name === 'bullet_list';
+                if (matchesActiveList && crossedContent && !isHeadingSeparatedBulletList &&
+                    !this.isSequentialList(child, adjacentList, direction)) {
+                    return;
+                }
+                includedIndexes.add(index);
+                adjacentList = child;
+                crossedContent = false;
+                crossedSectionHeading = false;
+                continue;
+            }
+            if (this.isList(child)) {
+                return;
+            }
+            if (activeList.type.name === 'bullet_list') {
+                if (!this.isListSectionHeading(child)) {
+                    return;
+                }
+            }
+            else if (!this.hasListContinuation(activeList)) {
+                return;
+            }
+            crossedContent = true;
+            crossedSectionHeading = crossedSectionHeading || this.isListSectionHeading(child);
+        }
+    }
+    isSequentialList(candidateList, adjacentList, direction) {
+        const candidateOrder = this.listContinuationOrder(candidateList);
+        const adjacentOrder = this.listContinuationOrder(adjacentList);
+        if (!candidateOrder || !adjacentOrder) {
+            return false;
+        }
+        return direction === 1
+            ? candidateOrder === adjacentOrder + adjacentList.childCount
+            : candidateOrder + candidateList.childCount === adjacentOrder;
+    }
+    hasListContinuation(list) {
+        return list.type.name === 'ordered_list' || Boolean(list.attrs.continuationOrder);
+    }
+    listContinuationOrder(list) {
+        return Number(list.type.name === 'ordered_list' ? list.attrs.order : list.attrs.continuationOrder) || null;
+    }
+    isList(node) {
+        return node.type.name === 'ordered_list' || node.type.name === 'bullet_list';
+    }
+    hasMatchingListType(node, activeList) {
+        if (node.type !== activeList.type) {
+            return false;
+        }
+        return node.type.name !== 'ordered_list' ||
+            (node.attrs.listStyle || 'decimal') === (activeList.attrs.listStyle || 'decimal');
+    }
+    isEmptyParagraph(node) {
+        return node.type.name === 'paragraph' && !node.textContent.trim();
+    }
+    isListSectionHeading(node) {
+        if (!node.textContent.trim()) {
+            return false;
+        }
+        if (node.type.name === 'heading') {
+            return true;
+        }
+        if (node.type.name !== 'paragraph') {
+            return false;
+        }
+        let hasText = false;
+        let allTextIsBold = true;
+        node.descendants((child) => {
+            if (child.isText && child.textContent.trim()) {
+                hasText = true;
+                allTextIsBold = allTextIsBold && child.marks.some((mark) => mark.type.name === 'strong');
+            }
+        });
+        return hasText && allTextIsBold;
+    }
+    toggleBulletList() {
+        const currentListStyle = this.currentListStyle();
+        const currentListType = this.listType(currentListStyle);
+        if (currentListType === 'ordered_list') {
+            this.changeActiveListType('bullet_list', 'decimal');
+            return;
+        }
+        if (currentListType === 'bullet_list') {
+            this.applyParagraph();
+            this.paragraphCommandApplied = false;
+            return;
+        }
+        if (!this.rebuildSelectedIndentedBlocksAsList('bullet_list', 'decimal')) {
+            this.editor.commands.toggleBulletList().exec();
+        }
+        this.joinAdjacentLists('bullet_list');
+        this.paragraphCommandApplied = false;
+    }
+    toggleOrderedList() {
+        if (this.isOrderedListActive()) {
+            const continuation = this.orderedListContinuationAfterSelection();
+            this.applyParagraph();
+            this.restoreOrderedListContinuation(continuation);
+            this.paragraphCommandApplied = false;
+            return;
+        }
+        this.applyListStyleSelection('ordered_list');
+        this.joinAdjacentLists('ordered_list');
+        this.paragraphCommandApplied = false;
+    }
+    orderedListContinuationAfterSelection() {
+        const { state } = this.editor.view;
+        const { $from, $to } = state.selection;
+        for (let depth = $from.depth; depth > 0; depth--) {
+            const list = $from.node(depth);
+            if (list.type.name !== 'ordered_list') {
+                continue;
+            }
+            const fromIndex = $from.index(depth);
+            const toIndex = $to.depth >= depth && $to.node(depth) === list
+                ? $to.indexAfter(depth)
+                : fromIndex + 1;
+            if (toIndex >= list.childCount) {
+                return null;
+            }
+            return {
+                text: list.child(toIndex).textContent,
+                order: (Number(list.attrs.order) || 1) + fromIndex,
+                listStyle: list.attrs.listStyle || null
+            };
+        }
+        return null;
+    }
+    restoreOrderedListContinuation(continuation) {
+        if (!continuation) {
+            return;
+        }
+        const { state, dispatch } = this.editor.view;
+        let listPosition = null;
+        let listNode = null;
+        state.doc.descendants((node, position) => {
+            if (listPosition !== null || node.type.name !== 'ordered_list' || !node.childCount) {
+                return listPosition === null;
+            }
+            if (node.firstChild.textContent === continuation.text &&
+                (node.attrs.listStyle || null) === continuation.listStyle) {
+                listPosition = position;
+                listNode = node;
+                return false;
+            }
+            return true;
+        });
+        if (listPosition !== null && listNode && Number(listNode.attrs.order) !== continuation.order) {
+            dispatch(state.tr.setNodeMarkup(listPosition, listNode.type, {
+                ...listNode.attrs,
+                order: continuation.order
+            }));
+        }
+    }
+    joinAdjacentLists(listType) {
+        for (let attempt = 0; attempt < 2; attempt++) {
+            const { state, dispatch } = this.editor.view;
+            const { $from } = state.selection;
+            let joined = false;
+            for (let depth = $from.depth; depth > 0; depth--) {
+                const activeList = $from.node(depth);
+                if (activeList.type.name !== listType) {
+                    continue;
+                }
+                const parent = $from.node(depth - 1);
+                const index = $from.index(depth - 1);
+                const before = index > 0 ? parent.child(index - 1) : null;
+                const after = index + 1 < parent.childCount ? parent.child(index + 1) : null;
+                const hasSameStyle = (list) => Boolean(list &&
+                    list.type === activeList.type &&
+                    (list.attrs.listStyle || null) === (activeList.attrs.listStyle || null));
+                if (hasSameStyle(before)) {
+                    dispatch(state.tr.join($from.before(depth)));
+                    joined = true;
+                }
+                else if (hasSameStyle(after)) {
+                    dispatch(state.tr.join($from.after(depth)));
+                    joined = true;
+                }
+                break;
+            }
+            if (!joined) {
+                return;
+            }
+        }
+    }
+    listType(listStyle) {
+        if (listStyle === 'bullet_list') {
+            return 'bullet_list';
+        }
+        return listStyle ? 'ordered_list' : '';
+    }
+    orderedListStyle(listStyle) {
+        if (listStyle === 'ordered_alpha') {
+            return 'lower-alpha';
+        }
+        if (listStyle === 'ordered_roman') {
+            return 'lower-roman';
+        }
+        return 'decimal';
+    }
+    activeListNode() {
+        const { $from } = this.editor.view.state.selection;
+        for (let depth = $from.depth; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name !== 'list_item') {
+                continue;
+            }
+            const list = $from.node(depth - 1);
+            if (!this.isList(list)) {
+                return null;
+            }
+            // A lifted nested item remains inside its parent list item to retain its
+            // indentation, but only the first block owns that parent's list marker.
+            return depth < $from.depth && node.firstChild === $from.node(depth + 1) ? list : null;
+        }
+        return null;
+    }
+    applyOrderedListStyle(listStyle) {
+        const { state, dispatch } = this.editor.view;
+        const { $from } = state.selection;
+        for (let depth = $from.depth; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name !== 'ordered_list') {
+                continue;
+            }
+            dispatch(state.tr.setNodeMarkup($from.before(depth), node.type, {
+                ...node.attrs,
+                listStyle: listStyle === 'decimal' ? null : listStyle
+            }));
+            return;
+        }
+    }
     onPaste(event) {
         if (event.defaultPrevented) {
             return;
@@ -26225,11 +26739,14 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     normalisePastedHtml(html) {
         const documentElement = new DOMParser().parseFromString(html, 'text/html');
         removeUnsafeRichTextElements(documentElement);
+        this.normaliseWordStylesheetFormatting(documentElement);
+        this.normaliseOrderedListStyles(documentElement);
         this.removeWordNoise(documentElement);
         this.normaliseWordSpacing(documentElement);
         this.normaliseWordTables(documentElement);
         this.normaliseWordSemanticBlocks(documentElement);
         this.convertWordLists(documentElement);
+        this.normaliseNestedListStructure(documentElement);
         this.normaliseSupportedInlineFormatting(documentElement);
         this.normaliseBlockFormatting(documentElement);
         this.normalisePastedListSpacing(documentElement);
@@ -26244,6 +26761,8 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         }
         const documentElement = new DOMParser().parseFromString(value, 'text/html');
         removeUnsafeRichTextElements(documentElement);
+        this.normaliseWordStylesheetFormatting(documentElement);
+        this.normaliseOrderedListStyles(documentElement);
         this.normaliseWordSpacing(documentElement);
         this.normaliseWordTables(documentElement);
         this.normaliseWordSemanticBlocks(documentElement);
@@ -26310,15 +26829,26 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             Italic: 'Control+I',
             Underline: 'Control+U'
         };
-        const toggleLabels = new Set(['Bold', 'Italic', 'Underline', 'Paragraph', 'Ordered List', 'Bullet List']);
+        const toggleCommands = {
+            Bold: 'bold',
+            Italic: 'italic',
+            Underline: 'underline',
+            Paragraph: 'paragraph',
+            'Heading level 1': 'heading',
+            'Bullet List': 'bullet_list',
+            'Numbered List': 'ordered_list'
+        };
         const buttons = this.editorHost.nativeElement.querySelectorAll('button');
         buttons.forEach((button) => {
             const label = button.getAttribute('aria-label') || button.title;
             if (shortcutLabels[label]) {
                 button.setAttribute('aria-keyshortcuts', shortcutLabels[label]);
             }
-            if (toggleLabels.has(label)) {
-                button.setAttribute('aria-pressed', `${button.classList.contains('ccd-rich-text-area__toolbar-button--active')}`);
+            if (toggleCommands[label]) {
+                const isActive = label === 'Numbered List'
+                    ? this.isOrderedListActive()
+                    : this.isToolbarCommandActive(toggleCommands[label]);
+                button.setAttribute('aria-pressed', `${isActive}`);
             }
         });
     }
@@ -26371,6 +26901,82 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         const officeParagraphs = Array.prototype.slice.call(documentElement.getElementsByTagName('o:p'));
         officeParagraphs.forEach((element) => element.remove());
     }
+    normaliseWordStylesheetFormatting(documentElement) {
+        const styleElements = Array.prototype.slice.call(documentElement.querySelectorAll('style'));
+        styleElements.forEach((styleElement) => {
+            const stylesheet = (styleElement.textContent || '').replace(/<!--|-->/g, '');
+            const rules = this.stylesheetRules(stylesheet);
+            rules.forEach(([selectors, declarations]) => {
+                const hasBoldStyle = this.hasBoldStyle(declarations);
+                const headingLevel = this.wordOutlineLevel(declarations);
+                const orderedListType = this.orderedListTypeFromStyle(declarations);
+                if (!hasBoldStyle && !headingLevel && !orderedListType) {
+                    return;
+                }
+                selectors.split(',').forEach((selector) => {
+                    const normalisedSelector = selector.trim();
+                    if (!normalisedSelector || normalisedSelector.startsWith('@')) {
+                        return;
+                    }
+                    try {
+                        const matchingElements = documentElement.body.querySelectorAll(normalisedSelector);
+                        matchingElements.forEach((element) => {
+                            if (orderedListType && element.tagName.toLowerCase() === 'ol') {
+                                element.setAttribute('type', orderedListType);
+                            }
+                            if (headingLevel) {
+                                element.dataset.wordHeadingLevel = headingLevel.toString();
+                            }
+                            if (hasBoldStyle) {
+                                this.wrapBoldInlineContents(documentElement, element);
+                            }
+                        });
+                    }
+                    catch {
+                        // Ignore Microsoft Office selectors that are not valid browser CSS selectors.
+                    }
+                });
+            });
+        });
+    }
+    normaliseOrderedListStyles(documentElement) {
+        const orderedLists = documentElement.body.querySelectorAll('ol');
+        orderedLists.forEach((list) => {
+            const listType = this.orderedListTypeFromStyle(list.getAttribute('style') || '');
+            if (listType) {
+                list.setAttribute('type', listType);
+            }
+        });
+    }
+    orderedListTypeFromStyle(style) {
+        const listStyle = (this.cssStyleValue(style, 'list-style-type') || '').toLowerCase();
+        const wordListStyle = (this.cssStyleValue(style, 'mso-level-number-format') || '').toLowerCase();
+        if (listStyle === 'lower-alpha' || listStyle === 'lower-latin' || wordListStyle === 'alpha-lower') {
+            return 'a';
+        }
+        if (listStyle === 'lower-roman' || wordListStyle === 'roman-lower') {
+            return 'i';
+        }
+        return null;
+    }
+    stylesheetRules(stylesheet) {
+        const rules = [];
+        let searchFrom = 0;
+        let openingBrace = stylesheet.indexOf('{', searchFrom);
+        while (openingBrace !== -1) {
+            const closingBrace = stylesheet.indexOf('}', openingBrace + 1);
+            if (closingBrace === -1) {
+                break;
+            }
+            rules.push([
+                stylesheet.slice(searchFrom, openingBrace),
+                stylesheet.slice(openingBrace + 1, closingBrace)
+            ]);
+            searchFrom = closingBrace + 1;
+            openingBrace = stylesheet.indexOf('{', searchFrom);
+        }
+        return rules;
+    }
     normaliseWordSpacing(documentElement) {
         const spacerElements = Array.prototype.slice.call(documentElement.body.querySelectorAll('[style*="mso-spacerun"]'));
         spacerElements.forEach((spacerElement) => {
@@ -26432,18 +27038,36 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         });
     }
     normaliseWordSemanticBlocks(documentElement) {
-        const paragraphs = Array.prototype.slice.call(documentElement.body.querySelectorAll('p'));
-        paragraphs.forEach((paragraph) => {
-            const headingLevel = this.wordHeadingLevel(paragraph);
+        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);
+                }
+                return;
+            }
+            const headingLevel = this.wordHeadingLevel(block);
             if (headingLevel) {
-                this.replaceElementTag(documentElement, paragraph, `h${headingLevel}`);
+                const heading = this.replaceElementTag(documentElement, block, 'h1');
+                if (namedHeadingLevel) {
+                    this.removeRedundantHeadingBold(heading);
+                }
             }
         });
     }
+    removeRedundantHeadingBold(heading) {
+        const boldElements = Array.prototype.slice.call(heading.querySelectorAll('strong, b'));
+        boldElements.reverse().forEach((element) => this.unwrapElement(element));
+    }
     wordHeadingLevel(element) {
-        const headingClass = /MsoHeading([1-6])/i.exec(element.className || '');
-        if (headingClass) {
-            return Number(headingClass[1]);
+        const namedHeadingLevel = this.namedWordHeadingLevel(element);
+        if (namedHeadingLevel) {
+            return namedHeadingLevel;
         }
         if (/MsoTitle/i.test(element.className || '')) {
             return 1;
@@ -26455,6 +27079,34 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         }, 0);
         return largestFontSize >= 24 ? 1 : null;
     }
+    namedWordHeadingLevel(element) {
+        const styledElements = [element].concat(Array.prototype.slice.call(element.querySelectorAll('*')));
+        for (const styledElement of styledElements) {
+            const storedHeadingLevel = Number(styledElement.dataset.wordHeadingLevel);
+            if (storedHeadingLevel >= 1 && storedHeadingLevel <= 6) {
+                return storedHeadingLevel;
+            }
+            const className = styledElement.className || '';
+            const style = styledElement.getAttribute('style') || '';
+            const headingDescription = `${className} ${style}`;
+            const namedHeadingLevel = /(?:Mso)?Heading\s*([1-6])(?:Char)?/i.exec(headingDescription);
+            if (namedHeadingLevel) {
+                return Number(namedHeadingLevel[1]);
+            }
+            if (/heading/i.test(headingDescription)) {
+                return 1;
+            }
+            const outlineLevel = this.wordOutlineLevel(style);
+            if (outlineLevel) {
+                return outlineLevel;
+            }
+        }
+        return null;
+    }
+    wordOutlineLevel(style) {
+        const outlineLevel = /mso-outline-level\s*:\s*([1-6])/i.exec(style || '');
+        return outlineLevel ? Number(outlineLevel[1]) : null;
+    }
     replaceElementTag(documentElement, element, tagName) {
         const replacement = documentElement.createElement(tagName);
         Array.prototype.slice.call(element.attributes).forEach((attribute) => {
@@ -26507,6 +27159,9 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             const listStart = element.tagName.toLowerCase() === 'ol'
                 ? this.normaliseListStart(element.getAttribute('start'))
                 : null;
+            const listType = element.tagName.toLowerCase() === 'ol' && /^[ai]$/.test(element.getAttribute('type') || '')
+                ? element.getAttribute('type')
+                : null;
             while (element.attributes.length > 0) {
                 element.removeAttribute(element.attributes[0].name);
             }
@@ -26519,6 +27174,9 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             if (listStart) {
                 element.setAttribute('start', listStart);
             }
+            if (listType) {
+                element.setAttribute('type', listType);
+            }
         });
     }
     normaliseListStart(value) {
@@ -26619,7 +27277,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     hasBoldStyle(style) {
         const fontWeightMatch = /(?:mso-bidi-)?font-weight\s*:\s*([^;]+)/i.exec(style);
         if (!fontWeightMatch) {
-            return false;
+            return /(?:^|;)\s*font\s*:[^;]*\bbold\b/i.test(style);
         }
         const fontWeight = fontWeightMatch[1].trim().toLowerCase();
         return fontWeight === 'bold' || fontWeight === 'bolder' || Number(fontWeight) >= 600;
@@ -26886,61 +27544,96 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     convertWordLists(documentElement) {
         const childNodes = Array.prototype.slice.call(documentElement.body.querySelectorAll('p'));
         const wordListIndents = this.wordListIndents(childNodes);
-        const listStack = [];
-        const listParents = [];
-        const resetListLevels = new Map();
-        let previousListId = null;
+        const orderedListTypes = this.wordOrderedListTypes(childNodes);
+        const state = {
+            listStack: [],
+            listParents: [],
+            resetListLevels: new Map(),
+            previousListId: null
+        };
         childNodes.forEach((node) => {
-            if (!this.isWordListParagraph(node)) {
-                listStack.length = 0;
-                listParents.length = 0;
-                resetListLevels.clear();
-                previousListId = null;
-                return;
-            }
-            const paragraph = node;
-            const listType = this.wordListType(paragraph);
-            const listId = this.wordListId(paragraph);
-            const declaredLevel = this.wordListDeclaredLevel(paragraph);
-            let requestedLevel = this.wordListLevel(paragraph, wordListIndents);
-            const rememberedResetLevel = declaredLevel === 1 ? resetListLevels.get(listId) : null;
-            if (rememberedResetLevel) {
-                requestedLevel = Math.max(requestedLevel, rememberedResetLevel);
-            }
-            else if (declaredLevel === 1 && listId !== previousListId && listStack.length > 1 && requestedLevel === listStack.length) {
-                requestedLevel++;
-                resetListLevels.set(listId, requestedLevel);
-            }
-            else if (declaredLevel === 1 && listId) {
-                resetListLevels.set(listId, requestedLevel);
-            }
-            const level = Math.min(requestedLevel, listStack.length + 1);
-            const stackIndex = level - 1;
-            const parentListItem = stackIndex > 0 ? listStack[stackIndex - 1]?.lastElementChild : null;
-            const listParent = parentListItem || paragraph.parentNode;
-            const listItem = documentElement.createElement('li');
-            this.copyListItemContents(documentElement, paragraph, listItem);
-            let currentList = listStack[stackIndex];
-            if (currentList?.tagName.toLowerCase() !== listType || listParents[stackIndex] !== listParent) {
-                currentList = documentElement.createElement(listType);
-                const listStart = this.wordListStart(paragraph);
-                if (listType === 'ol' && listStart > 1) {
-                    currentList.setAttribute('start', listStart.toString());
-                }
-                if (parentListItem) {
-                    parentListItem.appendChild(currentList);
-                }
-                else {
-                    paragraph.parentNode.insertBefore(currentList, paragraph);
-                }
-                listStack[stackIndex] = currentList;
-                listParents[stackIndex] = listParent;
+            this.convertWordListParagraph(documentElement, node, wordListIndents, orderedListTypes, state);
+        });
+    }
+    convertWordListParagraph(documentElement, node, wordListIndents, orderedListTypes, state) {
+        if (!this.isWordListParagraph(node)) {
+            this.resetWordListConversionState(state);
+            return;
+        }
+        const paragraph = node;
+        const listType = this.wordListType(paragraph);
+        const orderedListType = listType === 'ol' ? orderedListTypes.get(this.wordListLevelKey(paragraph)) || null : null;
+        const listId = this.wordListId(paragraph);
+        const requestedLevel = this.wordListRequestedLevel(paragraph, listId, wordListIndents, state);
+        const level = Math.min(requestedLevel, state.listStack.length + 1);
+        const currentList = this.wordListForParagraph(documentElement, paragraph, listType, orderedListType, level, state);
+        const listItem = documentElement.createElement('li');
+        this.copyListItemContents(documentElement, paragraph, listItem);
+        currentList.appendChild(listItem);
+        paragraph.remove();
+        state.previousListId = listId;
+    }
+    resetWordListConversionState(state) {
+        state.listStack.length = 0;
+        state.listParents.length = 0;
+        state.resetListLevels.clear();
+        state.previousListId = null;
+    }
+    wordListRequestedLevel(paragraph, listId, wordListIndents, state) {
+        const declaredLevel = this.wordListDeclaredLevel(paragraph);
+        let requestedLevel = this.wordListLevel(paragraph, wordListIndents);
+        const rememberedResetLevel = declaredLevel === 1 ? state.resetListLevels.get(listId) : null;
+        if (rememberedResetLevel) {
+            return Math.max(requestedLevel, rememberedResetLevel);
+        }
+        if (declaredLevel === 1 && listId !== state.previousListId && state.listStack.length > 1 && requestedLevel === state.listStack.length) {
+            requestedLevel++;
+            state.resetListLevels.set(listId, requestedLevel);
+        }
+        else if (declaredLevel === 1 && listId) {
+            state.resetListLevels.set(listId, requestedLevel);
+        }
+        return requestedLevel;
+    }
+    wordListForParagraph(documentElement, paragraph, listType, orderedListType, level, state) {
+        const stackIndex = level - 1;
+        const parentListItem = stackIndex > 0 ? state.listStack[stackIndex - 1]?.lastElementChild : null;
+        const listParent = parentListItem || paragraph.parentNode;
+        let currentList = state.listStack[stackIndex];
+        if (currentList?.tagName.toLowerCase() !== listType || currentList?.getAttribute('type') !== orderedListType ||
+            state.listParents[stackIndex] !== listParent) {
+            currentList = this.createWordList(documentElement, paragraph, listType, orderedListType, parentListItem);
+            state.listStack[stackIndex] = currentList;
+            state.listParents[stackIndex] = listParent;
+        }
+        state.listStack.length = level;
+        state.listParents.length = level;
+        return currentList;
+    }
+    createWordList(documentElement, paragraph, listType, orderedListType, parentListItem) {
+        const list = documentElement.createElement(listType);
+        const listStart = this.wordListStart(paragraph);
+        if (listType === 'ol' && listStart > 1) {
+            list.setAttribute('start', listStart.toString());
+        }
+        if (orderedListType) {
+            list.setAttribute('type', orderedListType);
+        }
+        if (parentListItem) {
+            parentListItem.appendChild(list);
+        }
+        else {
+            paragraph.parentNode.insertBefore(list, paragraph);
+        }
+        return list;
+    }
+    normaliseNestedListStructure(documentElement) {
+        const orphanedNestedLists = Array.prototype.slice.call(documentElement.body.querySelectorAll('ol > ol, ol > ul, ul > ol, ul > ul'));
+        orphanedNestedLists.forEach((nestedList) => {
+            const previousListItem = nestedList.previousElementSibling;
+            if (previousListItem?.tagName.toLowerCase() === 'li') {
+                previousListItem.appendChild(nestedList);
             }
-            listStack.length = level;
-            listParents.length = level;
-            currentList.appendChild(listItem);
-            paragraph.remove();
-            previousListId = listId;
         });
     }
     isWordListParagraph(node) {
@@ -26950,8 +27643,39 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         return /MsoListParagraph/i.test(node.className) || /mso-list/i.test(node.getAttribute('style') || '');
     }
     wordListType(paragraph) {
-        const marker = paragraph.textContent.trim();
-        return /^(\d+|[a-z]|[ivxlcdm]+)[.)]/i.test(marker) ? 'ol' : 'ul';
+        return /^\(?(?:\d+|[a-z]+)[.)]/i.test(this.wordListMarker(paragraph)) ? 'ol' : 'ul';
+    }
+    wordOrderedListTypes(nodes) {
+        const markersByLevel = new Map();
+        nodes.filter((node) => this.isWordListParagraph(node)).forEach((node) => {
+            const marker = this.wordListMarker(node);
+            if (!/^\(?(?:\d+|[a-z]+)[.)]/i.test(marker)) {
+                return;
+            }
+            const key = this.wordListLevelKey(node);
+            markersByLevel.set(key, [...(markersByLevel.get(key) || []), marker]);
+        });
+        const listTypes = new Map();
+        markersByLevel.forEach((markers, key) => {
+            const markerPattern = /^\(?([a-z]+|\d+)[.)]/i;
+            const markerTokens = markers.map((marker) => markerPattern.exec(marker)?.[1]?.toLowerCase());
+            if (markers.some((marker) => /^\([ivxlcdm]+\)/i.test(marker)) ||
+                markerTokens.some((token) => token?.length > 1 && /^[ivxlcdm]+$/.test(token))) {
+                listTypes.set(key, 'i');
+            }
+            else if (markerTokens.every((token) => /^[a-z]$/.test(token || ''))) {
+                listTypes.set(key, 'a');
+            }
+        });
+        return listTypes;
+    }
+    wordListLevelKey(paragraph) {
+        return `${this.wordListId(paragraph) || ''}:${this.wordListDeclaredLevel(paragraph)}`;
+    }
+    wordListMarker(paragraph) {
+        const markerElement = Array.prototype.slice.call(paragraph.querySelectorAll('[style]'))
+            .find((element) => /mso-list:\s*Ignore/i.test(element.getAttribute('style') || ''));
+        return (markerElement ? markerElement.textContent : paragraph.textContent).trim();
     }
     wordListLevel(paragraph, wordListIndents) {
         const declaredLevel = this.wordListDeclaredLevel(paragraph);
@@ -26970,8 +27694,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     wordListIndents(nodes) {
         const indents = nodes
             .filter((node) => this.isWordListParagraph(node))
-            .map((node) => this.wordListIndent(node))
-            .filter((indent) => indent > 0);
+            .map((node) => this.wordListIndent(node));
         return Array.from(new Set(indents)).sort((left, right) => left - right);
     }
     wordListIndent(paragraph) {
@@ -26980,10 +27703,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         return Math.round(indent);
     }
     wordListStart(paragraph) {
-        const markerElement = Array.prototype.slice.call(paragraph.querySelectorAll('[style]'))
-            .find((element) => /mso-list:\s*Ignore/i.test(element.getAttribute('style') || ''));
-        const marker = (markerElement ? markerElement.textContent : paragraph.textContent).trim();
-        const match = marker.match(/^(\d+)[.)]/);
+        const match = /^(\d+)[.)]/.exec(this.wordListMarker(paragraph));
         return match ? Number(match[1]) : 1;
     }
     copyListItemContents(documentElement, paragraph, listItem) {
@@ -26991,7 +27711,12 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             if (this.isWordListMarker(childNode)) {
                 return;
             }
-            listItem.appendChild(childNode.cloneNode(true));
+            const clonedNode = childNode.cloneNode(true);
+            this.removeNestedWordListMarkers(clonedNode);
+            if (clonedNode instanceof HTMLElement && !clonedNode.textContent?.trim() && !clonedNode.querySelector('br')) {
+                return;
+            }
+            listItem.appendChild(clonedNode);
         });
         this.removeLeadingListMarker(listItem);
         this.trimListItemWhitespace(listItem);
@@ -27003,11 +27728,15 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         if (!(node instanceof HTMLElement)) {
             return false;
         }
-        if (/mso-list:\s*Ignore/i.test(node.getAttribute('style') || '')) {
-            return true;
+        return /mso-list:\s*Ignore/i.test(node.getAttribute('style') || '');
+    }
+    removeNestedWordListMarkers(node) {
+        if (!(node instanceof HTMLElement)) {
+            return;
         }
-        return Array.prototype.slice.call(node.querySelectorAll('[style]'))
-            .some((element) => /mso-list:\s*Ignore/i.test(element.getAttribute('style') || ''));
+        Array.prototype.slice.call(node.querySelectorAll('[style]'))
+            .filter((element) => /mso-list:\s*Ignore/i.test(element.getAttribute('style') || ''))
+            .forEach((element) => element.remove());
     }
     removeLeadingListMarker(listItem) {
         const textNode = this.firstTextNode(listItem);
@@ -27032,13 +27761,15 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         if (!this.editor?.view) {
             return;
         }
+        const activeListType = this.activeListNode()?.type.name;
         this.activeToolbarCommands = {
             bold: this.isMarkActive('strong'),
             italic: this.isMarkActive('em'),
             underline: this.isMarkActive('u'),
             paragraph: this.paragraphCommandApplied && this.isPlainParagraphActive(),
-            ordered_list: this.isNodeActive('ordered_list'),
-            bullet_list: this.isNodeActive('bullet_list')
+            heading: this.isHeadingOneActive(),
+            ordered_list: activeListType === 'ordered_list',
+            bullet_list: activeListType === 'bullet_list'
         };
     }
     updateToolbarStateLater() {
@@ -27063,11 +27794,272 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         if (!paragraphType) {
             return;
         }
+        if (this.flattenSelectedNestedListItems()) {
+            return;
+        }
+        if (this.flattenFullySelectedList()) {
+            return;
+        }
         if (listItemType && this.isNodeActive('list_item')) {
             liftListItem(listItemType)(state, dispatch);
         }
         setBlockType(paragraphType)(this.editor.view.state, this.editor.view.dispatch);
     }
+    flattenSelectedNestedListItems() {
+        const { state, dispatch } = this.editor.view;
+        const { $from, $to } = state.selection;
+        const paragraphType = state.schema.nodes.paragraph;
+        if (!paragraphType) {
+            return false;
+        }
+        for (let depth = $from.depth; depth > 1; depth--) {
+            const list = $from.node(depth);
+            if (!this.isListNode(list) || $from.node(depth - 1).type.name !== 'list_item' ||
+                $to.depth < depth || $to.node(depth) !== list) {
+                continue;
+            }
+            const fromIndex = $from.index(depth);
+            const toIndex = $to.indexAfter(depth);
+            const replacement = [];
+            const beforeItems = this.listItemsBetween(list, 0, fromIndex);
+            const afterItems = this.listItemsBetween(list, toIndex, list.childCount);
+            const sourceTextBlock = state.selection.empty && $from.parent.isTextblock ? $from.parent : null;
+            const sourceCaretOffset = $from.parentOffset;
+            const replacementStart = $from.before(depth);
+            let caretPosition = null;
+            if (beforeItems.length) {
+                replacement.push(list.copy(Fragment.fromArray(beforeItems)));
+            }
+            const paragraphIndent = Number(list.attrs.indent) || 0;
+            this.listItemsBetween(list, fromIndex, toIndex).forEach((listItem) => {
+                listItem.forEach((child) => {
+                    if (child.isTextblock) {
+                        const indent = Math.min(MAX_INDENT, paragraphIndent + (Number(child.attrs.indent) || 0));
+                        const paragraph = paragraphType.create({
+                            ...child.attrs,
+                            indent: indent || null
+                        }, child.content);
+                        if (child === sourceTextBlock) {
+                            const precedingSize = replacement.reduce((size, node) => size + node.nodeSize, 0);
+                            caretPosition = replacementStart + precedingSize + 1 +
+                                Math.min(sourceCaretOffset, paragraph.content.size);
+                        }
+                        replacement.push(paragraph);
+                    }
+                    else if (this.isListNode(child)) {
+                        replacement.push(child);
+                    }
+                });
+            });
+            if (afterItems.length) {
+                const afterListAttrs = list.type.name === 'ordered_list'
+                    ? { ...list.attrs, order: (Number(list.attrs.order) || 1) + toIndex }
+                    : { ...list.attrs };
+                replacement.push(list.type.create(afterListAttrs, Fragment.fromArray(afterItems)));
+            }
+            const transaction = state.tr.replaceWith(replacementStart, $from.after(depth), Fragment.fromArray(replacement));
+            if (caretPosition !== null) {
+                transaction.setSelection(TextSelection.create(transaction.doc, caretPosition));
+            }
+            dispatch(transaction.scrollIntoView());
+            return true;
+        }
+        return false;
+    }
+    listItemsBetween(list, fromIndex, toIndex) {
+        const items = [];
+        for (let index = fromIndex; index < toIndex; index++) {
+            items.push(list.child(index));
+        }
+        return items;
+    }
+    flattenFullySelectedList() {
+        const { state, dispatch } = this.editor.view;
+        const { $from, $to, empty } = state.selection;
+        const paragraphType = state.schema.nodes.paragraph;
+        if (empty || !paragraphType) {
+            return false;
+        }
+        for (let depth = 1; depth <= $from.depth; depth++) {
+            const list = $from.node(depth);
+            if (!this.isListNode(list) || $to.depth < depth || $to.node(depth) !== list) {
+                continue;
+            }
+            const selectionStartsInFirstItem = $from.index(depth) === 0;
+            const selectionEndsInLastItem = $to.indexAfter(depth) === list.childCount;
+            const selectionCoversListContent = this.selectionCoversListContent(list, $from.before(depth), state.selection.from, state.selection.to);
+            if (!selectionStartsInFirstItem || !selectionEndsInLastItem ||
+                !selectionCoversListContent) {
+                continue;
+            }
+            const paragraphs = this.flattenListToParagraphs(list, 0);
+            const transaction = state.tr.replaceWith($from.before(depth), $from.after(depth), Fragment.fromArray(paragraphs));
+            dispatch(transaction.scrollIntoView());
+            return true;
+        }
+        return false;
+    }
+    selectionCoversListContent(list, listPosition, from, to) {
+        let firstTextBlockStart = null;
+        let lastTextBlockEnd = null;
+        list.descendants((node, position) => {
+            if (!node.isTextblock) {
+                return true;
+            }
+            const textBlockStart = listPosition + position + 2;
+            firstTextBlockStart ??= textBlockStart;
+            lastTextBlockEnd = textBlockStart + node.content.size;
+            return false;
+        });
+        return firstTextBlockStart !== null && lastTextBlockEnd !== null &&
+            from <= firstTextBlockStart && to >= lastTextBlockEnd;
+    }
+    flattenListToParagraphs(list, nestingIndent) {
+        const paragraphType = this.editor.view.state.schema.nodes.paragraph;
+        const listIndent = Number(list.attrs.indent) || 0;
+        const itemIndent = Math.min(MAX_INDENT, nestingIndent + listIndent);
+        const paragraphs = [];
+        list.forEach((listItem) => {
+            listItem.forEach((child) => {
+                if (this.isListNode(child)) {
+                    paragraphs.push(...this.flattenListToParagraphs(child, itemIndent + 1));
+                    return;
+                }
+                if (child.isTextblock) {
+                    const existingIndent = Number(child.attrs.indent) || 0;
+                    const indent = Math.min(MAX_INDENT, itemIndent + existingIndent);
+                    paragraphs.push(paragraphType.create({
+                        ...child.attrs,
+                        indent: indent || null
+                    }, child.content));
+                }
+            });
+        });
+        return paragraphs;
+    }
+    rebuildSelectedIndentedBlocksAsList(listType, orderedListStyle) {
+        const { state, dispatch } = this.editor.view;
+        const { from, to } = state.selection;
+        const selectedBlocks = [];
+        state.doc.forEach((node, position, index) => {
+            if (!node.isTextblock) {
+                return;
+            }
+            const contentStart = position + 1;
+            const contentEnd = contentStart + node.content.size;
+            if (from <= contentEnd && to >= contentStart) {
+                selectedBlocks.push({
+                    node,
+                    position,
+                    index,
+                    indent: Number(node.attrs.indent) || 0
+                });
+            }
+        });
+        if (selectedBlocks.length === 1 && selectedBlocks[0].indent > 0) {
+            const block = selectedBlocks[0];
+            const { schema } = state;
+            const listItemType = schema.nodes.list_item;
+            const listNodeType = schema.nodes[listType];
+            const textBlock = block.node.type.create({
+                ...block.node.attrs,
+                indent: null
+            }, block.node.content, block.node.marks);
+            const orderedStyle = this.orderedListStyleAtDepth(orderedListStyle, 0);
+            const attrs = listType === 'ordered_list'
+                ? {
+                    order: 1,
+                    indent: block.indent,
+                    listStyle: orderedStyle === 'decimal' ? null : orderedStyle
+                }
+                : {
+                    indent: block.indent,
+                    continuationOrder: null
+                };
+            const list = listNodeType.create(attrs, listItemType.create(null, textBlock));
+            const transaction = state.tr.replaceWith(block.position, block.position + block.node.nodeSize, list);
+            transaction.setSelection(TextSelection.create(transaction.doc, from + 2, to + 2));
+            dispatch(transaction.scrollIntoView());
+            return true;
+        }
+        if (selectedBlocks.length < 2 ||
+            selectedBlocks[selectedBlocks.length - 1].index - selectedBlocks[0].index + 1 !== selectedBlocks.length) {
+            return false;
+        }
+        const firstBlock = selectedBlocks[0];
+        const lastBlock = selectedBlocks[selectedBlocks.length - 1];
+        const selectionCoversBlocks = from <= firstBlock.position + 1 &&
+            to >= lastBlock.position + 1 + lastBlock.node.content.size;
+        const baseIndent = Math.min(...selectedBlocks.map((block) => block.indent));
+        const normalisedBlocks = selectedBlocks.map((block) => ({
+            ...block,
+            indent: Math.max(0, block.indent - baseIndent)
+        }));
+        if (!selectionCoversBlocks || (baseIndent === 0 && !normalisedBlocks.some((block) => block.indent > 0))) {
+            return false;
+        }
+        const rebuilt = this.buildNestedList(normalisedBlocks, 0, 0, listType, orderedListStyle);
+        if (rebuilt.nextIndex !== normalisedBlocks.length) {
+            return false;
+        }
+        const rootList = baseIndent > 0
+            ? rebuilt.list.type.create({ ...rebuilt.list.attrs, indent: baseIndent }, rebuilt.list.content)
+            : rebuilt.list;
+        const transaction = state.tr.replaceWith(firstBlock.position, lastBlock.position + lastBlock.node.nodeSize, rootList);
+        dispatch(transaction.scrollIntoView());
+        return true;
+    }
+    buildNestedList(blocks, startIndex, depth, listType, rootOrderedListStyle) {
+        const { schema } = this.editor.view.state;
+        const listItemType = schema.nodes.list_item;
+        const listNodeType = schema.nodes[listType];
+        const listItems = [];
+        let index = startIndex;
+        while (index < blocks.length) {
+            const block = blocks[index];
+            if (block.indent < depth) {
+                break;
+            }
+            if (block.indent > depth && listItems.length) {
+                const nested = this.buildNestedList(blocks, index, depth + 1, listType, rootOrderedListStyle);
+                const parentItem = listItems[listItems.length - 1];
+                listItems[listItems.length - 1] = parentItem.copy(parentItem.content.append(Fragment.from(nested.list)));
+                index = nested.nextIndex;
+                continue;
+            }
+            const textBlock = block.node.type.create({
+                ...block.node.attrs,
+                indent: null
+            }, block.node.content, block.node.marks);
+            listItems.push(listItemType.create(null, textBlock));
+            index++;
+        }
+        const orderedStyle = this.orderedListStyleAtDepth(rootOrderedListStyle, depth);
+        const attrs = listType === 'ordered_list'
+            ? {
+                order: 1,
+                indent: null,
+                listStyle: orderedStyle === 'decimal' ? null : orderedStyle
+            }
+            : {
+                indent: null,
+                continuationOrder: null
+            };
+        return {
+            list: listNodeType.create(attrs, Fragment.fromArray(listItems)),
+            nextIndex: index
+        };
+    }
+    orderedListStyleAtDepth(rootStyle, depth) {
+        let listStyle = rootStyle;
+        for (let currentDepth = 0; currentDepth < depth; currentDepth++) {
+            listStyle = this.nextNestedOrderedListStyle(listStyle);
+        }
+        return listStyle;
+    }
+    isListNode(node) {
+        return node.type.name === 'ordered_list' || node.type.name === 'bullet_list';
+    }
     changeIndent(increase) {
         const { state, dispatch } = this.editor.view;
         const listItemType = state.schema.nodes.list_item;
@@ -27077,6 +28069,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             }
             const listCommand = increase ? sinkListItem(listItemType) : liftListItem(listItemType);
             if (listCommand(state, dispatch)) {
+                this.applyOrderedListStyleForCurrentDepth();
                 return;
             }
             if (increase && this.changeListIndent(true, state, dispatch)) {
@@ -27090,6 +28083,35 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             this.editor.commands.outdent().exec();
         }
     }
+    applyOrderedListStyleForCurrentDepth() {
+        const { state, dispatch } = this.editor.view;
+        const { $from } = state.selection;
+        const orderedListDepths = [];
+        let activeOrderedListDepth = null;
+        for (let depth = 1; depth <= $from.depth; depth++) {
+            if ($from.node(depth).type.name === 'ordered_list') {
+                orderedListDepths.push(depth);
+                activeOrderedListDepth = depth;
+            }
+        }
+        if (activeOrderedListDepth === null || orderedListDepths.length < 2) {
+            return;
+        }
+        const activeList = $from.node(activeOrderedListDepth);
+        const parentListDepth = orderedListDepths[orderedListDepths.length - 2];
+        const parentListStyle = $from.node(parentListDepth).attrs.listStyle || 'decimal';
+        const listStyle = this.nextNestedOrderedListStyle(parentListStyle);
+        dispatch(state.tr.setNodeMarkup($from.before(activeOrderedListDepth), activeList.type, {
+            ...activeList.attrs,
+            listStyle: listStyle === 'decimal' ? null : listStyle
+        }));
+    }
+    nextNestedOrderedListStyle(parentListStyle) {
+        if (parentListStyle === 'decimal') {
+            return 'lower-alpha';
+        }
+        return 'lower-roman';
+    }
     changeListIndent(increase, state, dispatch) {
         const { $from } = state.selection;
         for (let depth = $from.depth; depth > 0; depth--) {
@@ -27118,6 +28140,44 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         this.applyParagraph();
         this.paragraphCommandApplied = true;
     }
+    toggleHeading() {
+        if (this.isHeadingOneActive()) {
+            const paragraphType = this.editor.view.state.schema.nodes.paragraph;
+            if (paragraphType) {
+                setBlockType(paragraphType)(this.editor.view.state, this.editor.view.dispatch);
+            }
+            this.paragraphCommandApplied = false;
+            return;
+        }
+        const headingType = this.editor.view.state.schema.nodes.heading;
+        if (headingType) {
+            setBlockType(headingType, { level: 1 })(this.editor.view.state, this.editor.view.dispatch);
+        }
+        this.paragraphCommandApplied = false;
+    }
+    isHeadingOneActive() {
+        const state = this.editor.view.state;
+        const headingType = state.schema.nodes.heading;
+        if (!headingType) {
+            return false;
+        }
+        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;
+            }
+        }
+        let isActive = false;
+        state.doc.nodesBetween(from, to, (node) => {
+            if (node.type === headingType && node.attrs.level === 1) {
+                isActive = true;
+                return false;
+            }
+            return true;
+        });
+        return isActive;
+    }
     isPlainParagraphActive() {
         return this.isNodeActive('paragraph') &&
             !this.isNodeActive('list_item') &&
@@ -27191,7 +28251,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorHost = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 63, vars: 37, 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"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--undo"], ["type", "button", "aria-label", "Redo", "title", "Redo", "aria-keyshortcuts", "Control+Y", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--redo"], ["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"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--bold"], ["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"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--italic"], ["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"], ["aria-hidden", "true", 1, "ccd-rich-text-area__toolbar-icon", "ccd-rich-text-area__toolbar-icon--underline"], ["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", "Ordered List", "title", "Ordered List", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click", "ngClass"], ["aria-hidden", "true", 1, "ccd-rich-text-area__list-icon", "ccd-rich-text-area__list-icon--ordered"], [1, "ccd-rich-text-area__list-marker"], [1, "ccd-rich-text-area__list-line"], ["type", "button", "aria-label", "Bullet List", "title", "Bullet List", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click", "ngClass"], ["aria-hidden", "true", 1, "ccd-rich-text-area__list-icon", "ccd-rich-text-area__list-icon--bullet"], ["type", "button", "aria-label", "Decrease Indent", "title", "Decrease Indent", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["aria-hidden", "true", 1, "ccd-rich-text-area__indent-icon", "ccd-rich-text-area__indent-icon--outdent"], [1, "ccd-rich-text-area__indent-line", "ccd-rich-text-area__indent-line--top"], [1, "ccd-rich-text-area__indent-line", "ccd-rich-text-area__indent-line--middle"], [1, "ccd-rich-text-area__indent-line", "ccd-rich-text-area__indent-line--bottom"], [1, "ccd-rich-text-area__indent-arrow"], ["type", "button", "aria-label", "Increase Indent", "title", "Increase Indent", 1, "ccd-rich-text-area__toolbar-button", 3, "mousedown", "click"], ["aria-hidden", "true", 1, "ccd-rich-text-area__indent-icon", "ccd-rich-text-area__indent-icon--indent"], [1, "NgxEditor__Wrapper"], ["outputFormat", "html", 3, "focusIn", "focusOut", "editor", "formControl"], [1, "form-label"], [1, "form-hint", 3, "id"], [1, "error-message", 3, "id"]], template: function WriteRichTextAreaFieldComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
             i0.ɵɵtemplate(2, WriteRichTextAreaFieldComponent_span_2_Template, 3, 3, "span", 3);
@@ -27201,80 +28261,100 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             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.ɵɵelementStart(9, "span", 9);
-            i0.ɵɵtext(10, "\u21B6");
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(9, "svg", 9);
+            i0.ɵɵelement(10, "path", 10);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "button", 10);
+            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(12, "span", 11);
-            i0.ɵɵtext(13, "\u21B7");
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(12, "svg", 9);
+            i0.ɵɵelement(13, "path", 12);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(14, "span", 12);
-            i0.ɵɵelementStart(15, "button", 13);
+            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.ɵɵelementStart(16, "span", 14);
-            i0.ɵɵtext(17, "B");
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(16, "svg", 9);
+            i0.ɵɵelement(17, "path", 15);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(18, "button", 15);
+            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(19, "span", 16);
-            i0.ɵɵtext(20, "I");
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(19, "svg", 9);
+            i0.ɵɵelement(20, "path", 17);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "button", 17);
+            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(22, "span", 18);
-            i0.ɵɵtext(23, "U");
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(22, "svg", 9);
+            i0.ɵɵelement(23, "path", 19);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(24, "button", 19);
+            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", 20);
+            i0.ɵɵelementStart(25, "span", 21);
             i0.ɵɵtext(26, "P");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(27, "button", 21);
-            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, "ordered_list")); });
-            i0.ɵɵelementStart(28, "span", 22)(29, "span", 23);
-            i0.ɵɵtext(30, "1");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(31, "span", 24);
-            i0.ɵɵelementStart(32, "span", 23);
-            i0.ɵɵtext(33, "2");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(34, "span", 24);
-            i0.ɵɵelementStart(35, "span", 23);
-            i0.ɵɵtext(36, "3");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(37, "span", 24);
+            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.ɵɵ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.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(32, "svg", 9);
+            i0.ɵɵelement(33, "path", 25);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(38, "button", 25);
-            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.ɵɵelementStart(39, "span", 26)(40, "span", 23);
-            i0.ɵɵtext(41, "\u2022");
+            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.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(35, "svg", 9);
+            i0.ɵɵelement(36, "path", 27);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(37, "div", 28)(38, "label", 29);
+            i0.ɵɵtext(39, "List style");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(42, "span", 24);
-            i0.ɵɵelementStart(43, "span", 23);
-            i0.ɵɵtext(44, "\u2022");
+            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.ɵɵelementEnd();
-            i0.ɵɵelement(45, "span", 24);
-            i0.ɵɵelementStart(46, "span", 23);
-            i0.ɵɵtext(47, "\u2022");
+            i0.ɵɵelementStart(44, "option", 33);
+            i0.ɵɵtext(45, "Letters (a, b, c)");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(48, "span", 24);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(49, "button", 27);
+            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(50, "span", 28);
-            i0.ɵɵelement(51, "span", 29)(52, "span", 30)(53, "span", 31)(54, "span", 32);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(50, "svg", 9);
+            i0.ɵɵelement(51, "path", 36);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(55, "button", 33);
-            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_55_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_55_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "indent")); });
-            i0.ɵɵelementStart(56, "span", 34);
-            i0.ɵɵelement(57, "span", 29)(58, "span", 30)(59, "span", 31)(60, "span", 32);
+            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.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(53, "svg", 9);
+            i0.ɵɵelement(54, "path", 38);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(61, "div", 35)(62, "ngx-editor", 36);
-            i0.ɵɵlistener("focusIn", function WriteRichTextAreaFieldComponent_Template_ngx_editor_focusIn_62_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.syncAccessibilityLater()); })("focusOut", function WriteRichTextAreaFieldComponent_Template_ngx_editor_focusOut_62_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEditorFocusOut()); });
+            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.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c1$e, !ctx.richTextAreaControl.valid && ctx.richTextAreaControl.dirty));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c1$e, !ctx.richTextAreaControl.valid && ctx.richTextAreaControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.labelId());
             i0.ɵɵadvance();
@@ -27284,39 +28364,48 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isInvalid());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c2$3, ctx.isInvalid()));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(29, _c2$3, ctx.isInvalid()));
             i0.ɵɵadvance(2);
             i0.ɵɵattribute("aria-label", ctx.toolbarLabel());
             i0.ɵɵadvance(8);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c3, ctx.isToolbarCommandActive("bold")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(31, _c3, ctx.isToolbarCommandActive("bold")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("bold"));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c3, ctx.isToolbarCommandActive("italic")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(33, _c3, ctx.isToolbarCommandActive("italic")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("italic"));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(29, _c3, ctx.isToolbarCommandActive("underline")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(35, _c3, ctx.isToolbarCommandActive("underline")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("underline"));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(31, _c3, ctx.isToolbarCommandActive("paragraph")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(37, _c3, ctx.isToolbarCommandActive("paragraph")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("paragraph"));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(33, _c3, ctx.isToolbarCommandActive("ordered_list")));
-            i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("ordered_list"));
-            i0.ɵɵadvance(11);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(35, _c3, ctx.isToolbarCommandActive("bullet_list")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(39, _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.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("bullet_list"));
-            i0.ɵɵadvance(24);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c3, ctx.isOrderedListActive()));
+            i0.ɵɵattribute("aria-pressed", ctx.isOrderedListActive());
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("for", ctx.listStyleId());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("id", ctx.listStyleId())("value", ctx.currentListSelectValue());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isOrderedListActive());
+            i0.ɵɵadvance(15);
             i0.ɵɵproperty("editor", ctx.editor)("formControl", ctx.richTextAreaControl);
-        } }, dependencies: [i5.NgClass, i5.NgIf, 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;display:flex;flex-wrap:wrap;gap:0 4px;margin-bottom:6px}.ccd-rich-text-area .NgxEditor__Wrapper{border:1px solid #000;border-radius:0;max-width:100%;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:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;display:inline-flex;font-family:inherit;font-size:18px;font-weight:700;height:36px;justify-content:center;min-width:36px;padding:4px;width:36px}.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:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button--active{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:36px;margin:0 8px 0 6px}.ccd-rich-text-area__toolbar-icon{display:inline-flex;line-height:1}.ccd-rich-text-area__toolbar-icon--undo,.ccd-rich-text-area__toolbar-icon--redo{font-size:23px;font-weight:400;transform:translateY(-1px)}.ccd-rich-text-area__toolbar-icon--bold{font-size:18px}.ccd-rich-text-area__toolbar-icon--italic{color:inherit;font-size:18px;font-style:italic}.ccd-rich-text-area__toolbar-icon--underline{font-size:18px;text-decoration:underline;text-underline-offset:3px}.ccd-rich-text-area__toolbar-icon--paragraph{font-size:18px}.ccd-rich-text-area__list-icon{column-gap:2px;display:grid;grid-template-columns:8px 13px;grid-template-rows:repeat(3,5px);height:17px;width:23px}.ccd-rich-text-area__list-marker{align-self:center;font-size:9px;font-weight:700;line-height:1;text-align:right}.ccd-rich-text-area__list-icon--ordered .ccd-rich-text-area__list-marker:after{content:\".\"}.ccd-rich-text-area__list-icon--bullet .ccd-rich-text-area__list-marker{font-size:14px;line-height:.5}.ccd-rich-text-area__list-line{align-self:center;border-top:2px solid currentColor;display:block;width:12px}.ccd-rich-text-area__indent-icon{display:block;height:18px;position:relative;width:23px}.ccd-rich-text-area__indent-line{background:currentColor;display:block;height:2px;position:absolute;right:0}.ccd-rich-text-area__indent-line--top{top:3px;width:18px}.ccd-rich-text-area__indent-line--middle{top:8px;width:13px}.ccd-rich-text-area__indent-line--bottom{top:13px;width:18px}.ccd-rich-text-area__indent-arrow{background:currentColor;display:block;height:2px;left:1px;position:absolute;top:8px;width:9px}.ccd-rich-text-area__indent-arrow:before,.ccd-rich-text-area__indent-arrow:after{background:currentColor;content:\"\";display:block;height:2px;position:absolute;top:0;width:6px}.ccd-rich-text-area__indent-icon--outdent .ccd-rich-text-area__indent-arrow:before{left:-1px;transform:rotate(45deg);transform-origin:left center}.ccd-rich-text-area__indent-icon--outdent .ccd-rich-text-area__indent-arrow:after{left:-1px;transform:rotate(-45deg);transform-origin:left center}.ccd-rich-text-area__indent-icon--indent .ccd-rich-text-area__indent-arrow:before{right:-1px;transform:rotate(45deg);transform-origin:right center}.ccd-rich-text-area__indent-icon--indent .ccd-rich-text-area__indent-arrow:after{right:-1px;transform:rotate(-45deg);transform-origin:right center}.ccd-rich-text-area .NgxEditor__Wrapper .NgxEditor{border:0;border-radius:0;height:255px;min-height:255px;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:255px;min-height:255px;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 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 li{display:list-item;margin-bottom:5px}.ccd-rich-text-area .ProseMirror li>p{margin:0}\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__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 });
 }
 (() => { (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        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--undo\" aria-hidden=\"true\">&#8630;</span>\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        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--redo\" aria-hidden=\"true\">&#8631;</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 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        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--bold\" aria-hidden=\"true\">B</span>\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        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--italic\" aria-hidden=\"true\">I</span>\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        <span class=\"ccd-rich-text-area__toolbar-icon ccd-rich-text-area__toolbar-icon--underline\" aria-hidden=\"true\">U</span>\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\"\n        [ngClass]=\"{'ccd-rich-text-area__toolbar-button--active': isToolbarCommandActive('ordered_list')}\"\n        [attr.aria-pressed]=\"isToolbarCommandActive('ordered_list')\"\n        aria-label=\"Ordered List\"\n        title=\"Ordered List\"\n        (mousedown)=\"onToolbarButtonMouseDown($event)\"\n        (click)=\"executeToolbarCommand($event, 'ordered_list')\">\n        <span class=\"ccd-rich-text-area__list-icon ccd-rich-text-area__list-icon--ordered\" aria-hidden=\"true\">\n          <span class=\"ccd-rich-text-area__list-marker\">1</span>\n          <span class=\"ccd-rich-text-area__list-line\"></span>\n          <span class=\"ccd-rich-text-area__list-marker\">2</span>\n          <span class=\"ccd-rich-text-area__list-line\"></span>\n          <span class=\"ccd-rich-text-area__list-marker\">3</span>\n          <span class=\"ccd-rich-text-area__list-line\"></span>\n        </span>\n      </button>\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        <span class=\"ccd-rich-text-area__list-icon ccd-rich-text-area__list-icon--bullet\" aria-hidden=\"true\">\n          <span class=\"ccd-rich-text-area__list-marker\">&#8226;</span>\n          <span class=\"ccd-rich-text-area__list-line\"></span>\n          <span class=\"ccd-rich-text-area__list-marker\">&#8226;</span>\n          <span class=\"ccd-rich-text-area__list-line\"></span>\n          <span class=\"ccd-rich-text-area__list-marker\">&#8226;</span>\n          <span class=\"ccd-rich-text-area__list-line\"></span>\n        </span>\n      </button>\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        <span class=\"ccd-rich-text-area__indent-icon ccd-rich-text-area__indent-icon--outdent\" aria-hidden=\"true\">\n          <span class=\"ccd-rich-text-area__indent-line ccd-rich-text-area__indent-line--top\"></span>\n          <span class=\"ccd-rich-text-area__indent-line ccd-rich-text-area__indent-line--middle\"></span>\n          <span class=\"ccd-rich-text-area__indent-line ccd-rich-text-area__indent-line--bottom\"></span>\n          <span class=\"ccd-rich-text-area__indent-arrow\"></span>\n        </span>\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        <span class=\"ccd-rich-text-area__indent-icon ccd-rich-text-area__indent-icon--indent\" aria-hidden=\"true\">\n          <span class=\"ccd-rich-text-area__indent-line ccd-rich-text-area__indent-line--top\"></span>\n          <span class=\"ccd-rich-text-area__indent-line ccd-rich-text-area__indent-line--middle\"></span>\n          <span class=\"ccd-rich-text-area__indent-line ccd-rich-text-area__indent-line--bottom\"></span>\n          <span class=\"ccd-rich-text-area__indent-arrow\"></span>\n        </span>\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;display:flex;flex-wrap:wrap;gap:0 4px;margin-bottom:6px}.ccd-rich-text-area .NgxEditor__Wrapper{border:1px solid #000;border-radius:0;max-width:100%;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:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;display:inline-flex;font-family:inherit;font-size:18px;font-weight:700;height:36px;justify-content:center;min-width:36px;padding:4px;width:36px}.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:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button--active{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:36px;margin:0 8px 0 6px}.ccd-rich-text-area__toolbar-icon{display:inline-flex;line-height:1}.ccd-rich-text-area__toolbar-icon--undo,.ccd-rich-text-area__toolbar-icon--redo{font-size:23px;font-weight:400;transform:translateY(-1px)}.ccd-rich-text-area__toolbar-icon--bold{font-size:18px}.ccd-rich-text-area__toolbar-icon--italic{color:inherit;font-size:18px;font-style:italic}.ccd-rich-text-area__toolbar-icon--underline{font-size:18px;text-decoration:underline;text-underline-offset:3px}.ccd-rich-text-area__toolbar-icon--paragraph{font-size:18px}.ccd-rich-text-area__list-icon{column-gap:2px;display:grid;grid-template-columns:8px 13px;grid-template-rows:repeat(3,5px);height:17px;width:23px}.ccd-rich-text-area__list-marker{align-self:center;font-size:9px;font-weight:700;line-height:1;text-align:right}.ccd-rich-text-area__list-icon--ordered .ccd-rich-text-area__list-marker:after{content:\".\"}.ccd-rich-text-area__list-icon--bullet .ccd-rich-text-area__list-marker{font-size:14px;line-height:.5}.ccd-rich-text-area__list-line{align-self:center;border-top:2px solid currentColor;display:block;width:12px}.ccd-rich-text-area__indent-icon{display:block;height:18px;position:relative;width:23px}.ccd-rich-text-area__indent-line{background:currentColor;display:block;height:2px;position:absolute;right:0}.ccd-rich-text-area__indent-line--top{top:3px;width:18px}.ccd-rich-text-area__indent-line--middle{top:8px;width:13px}.ccd-rich-text-area__indent-line--bottom{top:13px;width:18px}.ccd-rich-text-area__indent-arrow{background:currentColor;display:block;height:2px;left:1px;position:absolute;top:8px;width:9px}.ccd-rich-text-area__indent-arrow:before,.ccd-rich-text-area__indent-arrow:after{background:currentColor;content:\"\";display:block;height:2px;position:absolute;top:0;width:6px}.ccd-rich-text-area__indent-icon--outdent .ccd-rich-text-area__indent-arrow:before{left:-1px;transform:rotate(45deg);transform-origin:left center}.ccd-rich-text-area__indent-icon--outdent .ccd-rich-text-area__indent-arrow:after{left:-1px;transform:rotate(-45deg);transform-origin:left center}.ccd-rich-text-area__indent-icon--indent .ccd-rich-text-area__indent-arrow:before{right:-1px;transform:rotate(45deg);transform-origin:right center}.ccd-rich-text-area__indent-icon--indent .ccd-rich-text-area__indent-arrow:after{right:-1px;transform:rotate(-45deg);transform-origin:right center}.ccd-rich-text-area .NgxEditor__Wrapper .NgxEditor{border:0;border-radius:0;height:255px;min-height:255px;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:255px;min-height:255px;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 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 li{display:list-item;margin-bottom:5px}.ccd-rich-text-area .ProseMirror li>p{margin:0}\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]=\"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"] }]
     }], 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: 75 }); })();
+(() => { (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 }); })();
 
 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); }; })();