@hmcts/ccd-case-ui-toolkit 7.3.89-4951 → 7.3.89-exui-5101-rc-1

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

@@ -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 .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 .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", 39);
     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", 40);
     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", 41);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "ccdFirstError");
     i0.ɵɵelementEnd();
@@ -25996,6 +26002,24 @@ 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 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'];
@@ -26009,7 +26033,8 @@ const richTextNodes = {
         ...nodes.ordered_list,
         attrs: {
             order: { default: 1 },
-            indent: { default: null }
+            indent: { default: null },
+            listStyle: { default: null }
         },
         parseDOM: [{
                 tag: 'ol',
@@ -26017,13 +26042,15 @@ 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: {
@@ -26064,7 +26091,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 +26141,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 +26157,13 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     onToolbarButtonMouseDown(event) {
         event.preventDefault();
     }
+    handleEditorKeyDown(event) {
+        if (event.key !== 'Tab' || !this.isNodeActive('list_item')) {
+            return false;
+        }
+        this.executeToolbarCommand(event, event.shiftKey ? 'outdent' : 'indent');
+        return true;
+    }
     executeToolbarCommand(event, command) {
         event.preventDefault();
         event.stopPropagation();
@@ -26153,11 +26193,11 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
                 this.changeIndent(false);
                 break;
             case 'ordered_list':
-                this.editor.commands.toggleOrderedList().exec();
+                this.applyListStyleSelection('ordered_list');
                 this.paragraphCommandApplied = false;
                 break;
             case 'bullet_list':
-                this.editor.commands.toggleBulletList().exec();
+                this.toggleBulletList();
                 this.paragraphCommandApplied = false;
                 break;
             default:
@@ -26171,6 +26211,174 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     isToolbarCommandActive(command) {
         return !!this.activeToolbarCommands[command];
     }
+    currentListStyle() {
+        if (this.isToolbarCommandActive('ordered_list')) {
+            const orderedListStyle = this.activeOrderedListStyle();
+            if (orderedListStyle === 'lower-alpha') {
+                return 'ordered_alpha';
+            }
+            if (orderedListStyle === 'lower-roman') {
+                return 'ordered_roman';
+            }
+            return 'ordered_list';
+        }
+        if (this.isToolbarCommandActive('bullet_list')) {
+            return 'bullet_list';
+        }
+        return '';
+    }
+    currentListSelectValue() {
+        const currentListStyle = this.currentListStyle();
+        return currentListStyle === 'bullet_list' ? '' : currentListStyle;
+    }
+    onListStyleChange(event) {
+        const listStyle = event.target.value;
+        this.applyListStyleSelection(listStyle);
+        this.richTextAreaControl.markAsDirty();
+        this.editor.view.focus();
+        this.updateToolbarState();
+        this.syncAccessibilityLater();
+    }
+    applyListStyleSelection(listStyle) {
+        const currentListStyle = this.currentListStyle();
+        if (listStyle === currentListStyle) {
+            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') {
+                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];
+        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;
+            this.contiguousListPositions(depth).forEach(({ position, list }) => {
+                const indent = Number(list.attrs.indent) || null;
+                const attrs = listType === 'ordered_list'
+                    ? {
+                        order: 1,
+                        indent,
+                        listStyle: orderedListStyle === 'decimal' ? null : orderedListStyle
+                    }
+                    : { indent };
+                transaction.setNodeMarkup(position, targetType, attrs);
+            });
+            dispatch(transaction);
+            return;
+        }
+    }
+    contiguousListPositions(depth) {
+        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, includedIndexes);
+        this.collectContiguousListIndexes(parent, activeList, activeIndex, 1, includedIndexes);
+        const positions = [];
+        parent.forEach((child, childOffset, index) => {
+            if (includedIndexes.has(index) && this.hasMatchingListType(child, activeList)) {
+                positions.push({ position: $from.start(parentDepth) + childOffset, list: child });
+            }
+        });
+        return positions;
+    }
+    collectContiguousListIndexes(parent, activeList, activeIndex, direction, includedIndexes) {
+        for (let index = activeIndex + direction; index >= 0 && index < parent.childCount; index += direction) {
+            const child = parent.child(index);
+            if (this.isEmptyParagraph(child)) {
+                continue;
+            }
+            if (!this.hasMatchingListType(child, activeList)) {
+                return;
+            }
+            includedIndexes.add(index);
+        }
+    }
+    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();
+    }
+    toggleBulletList() {
+        const currentListStyle = this.currentListStyle();
+        const currentListType = this.listType(currentListStyle);
+        if (currentListType === 'ordered_list') {
+            this.changeActiveListType('bullet_list', 'decimal');
+        }
+        else {
+            this.editor.commands.toggleBulletList().exec();
+        }
+    }
+    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';
+    }
+    activeOrderedListStyle() {
+        const { $from } = this.editor.view.state.selection;
+        for (let depth = $from.depth; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name === 'ordered_list') {
+                return node.attrs.listStyle || 'decimal';
+            }
+        }
+        return 'decimal';
+    }
+    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 +26433,13 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     normalisePastedHtml(html) {
         const documentElement = new DOMParser().parseFromString(html, 'text/html');
         removeUnsafeRichTextElements(documentElement);
+        this.normaliseWordStylesheetFormatting(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 +26454,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         }
         const documentElement = new DOMParser().parseFromString(value, 'text/html');
         removeUnsafeRichTextElements(documentElement);
+        this.normaliseWordStylesheetFormatting(documentElement);
         this.normaliseWordSpacing(documentElement);
         this.normaliseWordTables(documentElement);
         this.normaliseWordSemanticBlocks(documentElement);
@@ -26310,15 +26521,25 @@ 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',
+            '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.currentListStyle() === 'ordered_list'
+                    : this.isToolbarCommandActive(toggleCommands[label]);
+                button.setAttribute('aria-pressed', `${isActive}`);
             }
         });
     }
@@ -26371,6 +26592,58 @@ 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);
+                if (!hasBoldStyle && !headingLevel) {
+                    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 (headingLevel) {
+                                element.dataset.wordHeadingLevel = headingLevel.toString();
+                            }
+                            if (hasBoldStyle) {
+                                this.wrapBoldInlineContents(documentElement, element);
+                            }
+                        });
+                    }
+                    catch {
+                        // Ignore Microsoft Office selectors that are not valid browser CSS selectors.
+                    }
+                });
+            });
+        });
+    }
+    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 +26705,29 @@ 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) {
+                if (namedHeadingLevel) {
+                    this.wrapBoldInlineContents(documentElement, block);
+                }
+                return;
+            }
+            const headingLevel = this.wordHeadingLevel(block);
             if (headingLevel) {
-                this.replaceElementTag(documentElement, paragraph, `h${headingLevel}`);
+                const heading = this.replaceElementTag(documentElement, block, `h${headingLevel}`);
+                if (namedHeadingLevel) {
+                    this.wrapBoldInlineContents(documentElement, heading);
+                }
             }
         });
     }
     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 +26739,31 @@ 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]);
+            }
+            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 +26816,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 +26831,9 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             if (listStart) {
                 element.setAttribute('start', listStart);
             }
+            if (listType) {
+                element.setAttribute('type', listType);
+            }
         });
     }
     normaliseListStart(value) {
@@ -26619,7 +26934,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 +27201,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 +27300,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 +27351,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 +27360,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) {
@@ -27077,6 +27454,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 +27468,33 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             this.editor.commands.outdent().exec();
         }
     }
+    applyOrderedListStyleForCurrentDepth() {
+        const { state, dispatch } = this.editor.view;
+        const { $from } = state.selection;
+        let orderedListDepth = 0;
+        let activeOrderedListDepth = null;
+        for (let depth = 1; depth <= $from.depth; depth++) {
+            if ($from.node(depth).type.name === 'ordered_list') {
+                orderedListDepth++;
+                activeOrderedListDepth = depth;
+            }
+        }
+        if (activeOrderedListDepth === null) {
+            return;
+        }
+        const activeList = $from.node(activeOrderedListDepth);
+        let listStyle = 'lower-roman';
+        if (orderedListDepth === 1) {
+            listStyle = 'decimal';
+        }
+        else if (orderedListDepth === 2) {
+            listStyle = 'lower-alpha';
+        }
+        dispatch(state.tr.setNodeMarkup($from.before(activeOrderedListDepth), activeList.type, {
+            ...activeList.attrs,
+            listStyle: listStyle === 'decimal' ? null : listStyle
+        }));
+    }
     changeListIndent(increase, state, dispatch) {
         const { $from } = state.selection;
         for (let depth = $from.depth; depth > 0; depth--) {
@@ -27191,7 +27596,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: 55, vars: 40, 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", "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", ""], ["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"]], 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 +27606,97 @@ 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.ɵɵelement(27, "span", 13);
+            i0.ɵɵelementStart(28, "button", 22);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_28_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_28_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "bullet_list")); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(29, "svg", 9);
+            i0.ɵɵelement(30, "path", 23);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            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, "ordered_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, "div", 26)(35, "label", 27);
+            i0.ɵɵtext(36, "List style");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(42, "span", 24);
-            i0.ɵɵelementStart(43, "span", 23);
-            i0.ɵɵtext(44, "\u2022");
+            i0.ɵɵelementStart(37, "select", 28);
+            i0.ɵɵlistener("change", function WriteRichTextAreaFieldComponent_Template_select_change_37_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListStyleChange($event)); });
+            i0.ɵɵelementStart(38, "option", 29);
+            i0.ɵɵtext(39, "No list");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(45, "span", 24);
-            i0.ɵɵelementStart(46, "span", 23);
-            i0.ɵɵtext(47, "\u2022");
+            i0.ɵɵelementStart(40, "option", 30);
+            i0.ɵɵtext(41, "Numbers (1, 2, 3)");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(48, "span", 24);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(49, "button", 27);
-            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.ɵɵelementStart(42, "option", 31);
+            i0.ɵɵtext(43, "Letters (a, b, c)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(44, "option", 32);
+            i0.ɵɵtext(45, "Roman numerals (i), (ii), (iii)");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelement(46, "span", 13);
+            i0.ɵɵelementStart(47, "button", 33);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_47_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_47_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "outdent")); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(48, "svg", 9);
+            i0.ɵɵelement(49, "path", 34);
             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(50, "button", 35);
+            i0.ɵɵlistener("mousedown", function WriteRichTextAreaFieldComponent_Template_button_mousedown_50_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToolbarButtonMouseDown($event)); })("click", function WriteRichTextAreaFieldComponent_Template_button_click_50_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.executeToolbarCommand($event, "indent")); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(51, "svg", 9);
+            i0.ɵɵelement(52, "path", 36);
             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(53, "div", 37)(54, "ngx-editor", 38);
+            i0.ɵɵlistener("focusIn", function WriteRichTextAreaFieldComponent_Template_ngx_editor_focusIn_54_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.syncAccessibilityLater()); })("focusOut", function WriteRichTextAreaFieldComponent_Template_ngx_editor_focusOut_54_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(24, _c1$e, !ctx.richTextAreaControl.valid && ctx.richTextAreaControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.labelId());
             i0.ɵɵadvance();
@@ -27284,39 +27706,43 @@ 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(26, _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(28, _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(30, _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(32, _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(34, _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.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(36, _c3, ctx.isToolbarCommandActive("bullet_list")));
             i0.ɵɵattribute("aria-pressed", ctx.isToolbarCommandActive("bullet_list"));
-            i0.ɵɵadvance(24);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(38, _c3, ctx.currentListStyle() === "ordered_list"));
+            i0.ɵɵattribute("aria-pressed", ctx.currentListStyle() === "ordered_list");
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("for", ctx.listStyleId());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("id", ctx.listStyleId())("value", ctx.currentListSelectValue());
+            i0.ɵɵadvance(17);
             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;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: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{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 .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 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}\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      <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': currentListStyle() === 'ordered_list'}\"\n        [attr.aria-pressed]=\"currentListStyle() === 'ordered_list'\"\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 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;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: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{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 .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 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}\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: 107 }); })();
 
 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); }; })();