@unicef-polymer/etools-form-builder 3.1.2 → 3.1.4

package/dist/assets/translations.js

@@ -30,7 +30,24 @@ const translations = {
         NUMBER_MUST_BE_LOWER_THAN: 'Number must be lower than {0}',
         DOCUMENT_TYPE: 'Document type',
         SELECT_DOCUMENT_TYPE: 'Select Document Type',
-        PLEASE_ANSWER: 'Important: Please provide the answer if available'
+        PLEASE_ANSWER: 'Important: Please provide the answer if available',
+        NORMAL_TEXT: 'Normal Text',
+        HEADING1: 'Heading 1',
+        HEADING2: 'Heading 2',
+        HEADING3: 'Heading 3',
+        HEADING4: 'Heading 4',
+        HEADING5: 'Heading 5',
+        HEADING6: 'Heading 6',
+        PARAGRAPH: 'Paragraph',
+        PRE_FORMATTED: 'Pre-Formatted',
+        FONT_SIZE: 'Font Size',
+        VERY_SMALL: 'Very Small',
+        SMALL: 'Small',
+        NORMAL: 'Normal',
+        MEDIUM_LARGE: 'Medium Large',
+        LARGE: 'Large',
+        VERY_LARGE: 'Very Large',
+        MAXIMUM: 'Maximum'
     },
     fr: {
         SAVE: 'Sauvegarder',
@@ -63,7 +80,24 @@ const translations = {
         NUMBER_MUST_BE_LOWER_THAN: 'Le nombre doit être inférieur à {0}',
         DOCUMENT_TYPE: 'Type de document',
         SELECT_DOCUMENT_TYPE: 'Sélectionnez le type de document',
-        PLEASE_ANSWER: 'Important : veuillez fournir la réponse si disponible'
+        PLEASE_ANSWER: 'Important : veuillez fournir la réponse si disponible',
+        NORMAL_TEXT: 'Texte normal',
+        HEADING1: 'Titre 1',
+        HEADING2: 'Titre 2',
+        HEADING3: 'Titre 3',
+        HEADING4: 'Titre 4',
+        HEADING5: 'Titre 5',
+        HEADING6: 'Titre 6',
+        PARAGRAPH: 'Paragraphe',
+        PRE_FORMATTED: 'Pré-formaté',
+        FONT_SIZE: 'Taille de la police',
+        VERY_SMALL: 'Très petit',
+        SMALL: 'Petit',
+        NORMAL: 'Normale',
+        MEDIUM_LARGE: 'Moyen Grand',
+        LARGE: 'Grand',
+        VERY_LARGE: 'Très grand',
+        MAXIMUM: 'Maximum'
     },
     ar: {
         SAVE: 'يحفظ',
@@ -96,7 +130,24 @@ const translations = {
         NUMBER_MUST_BE_LOWER_THAN: 'يجب أن يكون الرقم أقل من {0}',
         DOCUMENT_TYPE: 'نوع الوثيقة',
         SELECT_DOCUMENT_TYPE: 'حدد نوع المستند',
-        PLEASE_ANSWER: 'هام: يرجى تقديم الإجابة إذا كانت متوفرة'
+        PLEASE_ANSWER: 'هام: يرجى تقديم الإجابة إذا كانت متوفرة',
+        NORMAL_TEXT: 'نص عادي',
+        HEADING1: 'العنوان 1',
+        HEADING2: 'العنوان 2',
+        HEADING3: 'العنوان 3',
+        HEADING4: 'العنوان 4',
+        HEADING5: 'العنوان 5',
+        HEADING6: 'العنوان 6',
+        PARAGRAPH: 'فقرة',
+        PRE_FORMATTED: 'منسقة مسبقًا',
+        FONT_SIZE: 'حجم الخط',
+        VERY_SMALL: 'صغير جدًا',
+        SMALL: 'صغير',
+        NORMAL: 'طبيعي',
+        MEDIUM_LARGE: 'متوسطة كبيرة',
+        LARGE: 'كبير',
+        VERY_LARGE: 'كبير جدًا',
+        MAXIMUM: 'الحد الأقصى'
     },
     es: {
         SAVE: 'Guardar',
@@ -129,7 +180,24 @@ const translations = {
         NUMBER_MUST_BE_LOWER_THAN: 'El número debe ser inferior a {0}',
         DOCUMENT_TYPE: 'Tipo de Documento',
         SELECT_DOCUMENT_TYPE: 'Seleccionar tipo de documento',
-        PLEASE_ANSWER: 'Importante: proporcione la respuesta si está disponible.'
+        PLEASE_ANSWER: 'Importante: proporcione la respuesta si está disponible.',
+        NORMAL_TEXT: 'Texto normal',
+        HEADING1: 'Título 1',
+        HEADING2: 'Título 2',
+        HEADING3: 'Título 3',
+        HEADING4: 'Título 4',
+        HEADING5: 'Título 5',
+        HEADING6: 'Título 6',
+        PARAGRAPH: 'Párrafo',
+        PRE_FORMATTED: 'Preformateado',
+        FONT_SIZE: 'Tamaño de fuente',
+        VERY_SMALL: 'Muy pequeño',
+        SMALL: 'Pequeño',
+        NORMAL: 'Normal',
+        MEDIUM_LARGE: 'Mediano Grande',
+        LARGE: 'Grande',
+        VERY_LARGE: 'Muy Grande',
+        MAXIMUM: 'Máximo'
     }
 };
 export default translations;

package/dist/form-fields/abstract-field-base.class.d.ts

@@ -12,6 +12,7 @@ export declare abstract class AbstractFieldBaseClass<T> extends LitElement {
     placeholder: string;
     name: string;
     value: T | null;
+    showRichEditor: boolean;
     validators: FieldValidator[];
     touched: boolean;
     set defaultValue(value: any);

package/dist/form-fields/abstract-field-base.class.js

@@ -27,6 +27,7 @@ export class AbstractFieldBaseClass extends LitElement {
         this.placeholder = '';
         this.name = '';
         this.value = null;
+        this.showRichEditor = false;
         this.validators = [];
         this.touched = false;
         this._readonly = false;
@@ -97,7 +98,6 @@ export class AbstractFieldBaseClass extends LitElement {
         }
 
         :host(.wide) .question {
-          margin-bottom: -8px;
           min-height: 0;
         }
 
@@ -197,3 +197,6 @@ __decorate([
 __decorate([
     property()
 ], AbstractFieldBaseClass.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], AbstractFieldBaseClass.prototype, "showRichEditor", void 0);

package/dist/form-fields/field-renderer-component.d.ts

@@ -16,7 +16,7 @@ export declare class FieldRendererComponent extends LitElement {
     defaultValue: any;
     render(): TemplateResult;
     renderField(blueprintField: BlueprintField): TemplateResult;
-    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name }: BlueprintField, isMandatory?: boolean): TemplateResult;
+    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name }: BlueprintField, isMandatory?: boolean, isAdditionalField?: boolean): TemplateResult;
     renderTooltip(isMandatory: boolean): "" | TemplateResult<1>;
     renderRepeatableField({ input_type, label, help_text, required, placeholder, styling }: BlueprintField, isMandatory?: boolean): TemplateResult;
     renderFieldLabel(label: string, helperText: string, isMandatory?: boolean): TemplateResult;

package/dist/form-fields/field-renderer-component.js

@@ -23,7 +23,8 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         return this.renderField(this.field);
     }
     renderField(blueprintField) {
-        const additionalClass = blueprintField.styling.includes(StructureTypes.ADDITIONAL)
+        const isAdditionalField = blueprintField.styling.includes(StructureTypes.ADDITIONAL);
+        const additionalClass = isAdditionalField
             ? `additional-field ${blueprintField.name} `
             : `${blueprintField.name} `;
         const wideClass = blueprintField.styling.includes(StructureTypes.WIDE) ? 'wide-field-container ' : '';
@@ -34,11 +35,11 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
       <div class="${`${additionalClass}${wideClass}${mandatoryClass}finding-container`}">
         ${blueprintField.repeatable
             ? this.renderRepeatableField(blueprintField, !!mandatoryClass)
-            : this.renderStandardField(blueprintField, !!mandatoryClass)}
+            : this.renderStandardField(blueprintField, !!mandatoryClass, isAdditionalField)}
       </div>
     `;
     }
-    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name }, isMandatory = false) {
+    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name }, isMandatory = false, isAdditionalField = false) {
         var _a, _b, _c, _d;
         const isWide = styling.includes(StructureTypes.WIDE);
         switch (input_type) {
@@ -54,6 +55,7 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             .validators="${this.validations}"
             .errorMessage="${this.errorMessage}"
             .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
+            .showRichEditor="${isAdditionalField}"
           >
             ${this.renderFieldLabel(label, help_text, isMandatory)}
           </text-field>

package/dist/form-fields/single-fields/text-field.d.ts

@@ -1,8 +1,11 @@
-import { CSSResultArray, TemplateResult } from 'lit';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
 import { BaseField } from './base-field';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
+import '../../rich-editor/rich-text';
 export declare class TextField extends BaseField<string> {
+    protected originalValue: string | null;
     protected controlTemplate(): TemplateResult;
+    updated(changedProperties: PropertyValues): void;
     protected customValidation(): string | null;
     static get styles(): CSSResultArray;
 }

package/dist/form-fields/single-fields/text-field.js

@@ -1,26 +1,51 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { BaseField } from './base-field';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
+import '../../rich-editor/rich-text';
 let TextField = class TextField extends BaseField {
+    constructor() {
+        super(...arguments);
+        this.originalValue = null;
+    }
     controlTemplate() {
-        return html `
-      <etools-textarea
-        id="otherInfo"
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${this.value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
-        @focus="${() => (this.touched = true)}"
-        ?readonly="${this.isReadonly}"
-        ?invalid="${this.errorMessage}"
-        name="${this.name}"
-        error-message="${this.errorMessage}"
-      >
-      </etools-textarea>
-    `;
+        return this.showRichEditor
+            ? html `<div class="finding-container no-padding-left">
+          <rich-text
+            .value="${this.originalValue}"
+            ?readonly="${this.isReadonly}"
+            @editor-changed="${({ detail }) => {
+                if (detail.value !== this.value) {
+                    this.valueChanged(detail.value);
+                }
+            }}"
+          ></rich-text>
+        </div>`
+            : html `
+          <etools-textarea
+            id="otherInfo"
+            class="no-padding-left"
+            no-label-float
+            placeholder="${this.isReadonly ? '—' : this.placeholder}"
+            .value="${this.value}"
+            @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
+            @focus="${() => (this.touched = true)}"
+            ?readonly="${this.isReadonly}"
+            ?invalid="${this.errorMessage}"
+            name="${this.name}"
+            error-message="${this.errorMessage}"
+          >
+          </etools-textarea>
+        `;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // set control value only at the beginning with a proxy param (originalValue),
+        // avoid requestUpdate when .value change because will move carret
+        if (changedProperties.has('value') && this.originalValue === null) {
+            this.originalValue = this.value;
+        }
     }
     customValidation() {
         return null;
@@ -42,6 +67,9 @@ let TextField = class TextField extends BaseField {
         ];
     }
 };
+__decorate([
+    property()
+], TextField.prototype, "originalValue", void 0);
 TextField = __decorate([
     customElement('text-field')
 ], TextField);

package/dist/rich-editor/rich-action.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
+export declare class RichAction extends LitElement {
+    static styles: import("lit").CSSResult;
+    command: string;
+    value?: string;
+    icon: string;
+    active: boolean;
+    color: string;
+    values: Option[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+interface Option {
+    name: string;
+    value: string;
+}
+export declare function editorCommand(command: string, value?: string): void;
+export {};

package/dist/rich-editor/rich-action.js

@@ -0,0 +1,106 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
+let RichAction = class RichAction extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.command = '';
+        this.icon = 'info';
+        this.active = false;
+        this.color = '#000000';
+        this.values = [];
+    }
+    render() {
+        const hasItems = this.values.length > 0;
+        return html `<section style="color:${this.color}">
+      ${hasItems
+            ? html ` <etools-dropdown
+            option-label="name"
+            option-value="value"
+            .options="${this.values}"
+            .selected="${this.values[0].value}"
+            dynamic-align
+            hide-search
+            trigger-value-change-event
+            @etools-selected-item-changed="${({ detail }) => {
+                if (detail === undefined || detail.selectedItem === null) {
+                    return;
+                }
+                const selectedValue = detail.selectedItem.value;
+                if (selectedValue === '--') {
+                    editorCommand('removeFormat', undefined);
+                }
+                else {
+                    editorCommand(this.command, selectedValue);
+                }
+            }}"
+          >
+          </etools-dropdown>`
+            : html `<etools-icon-button
+            ?active="${this.active}"
+            name="${this.icon}"
+            @click=${() => {
+                if (this.command) {
+                    editorCommand(this.command, this.value);
+                }
+                else {
+                    this.dispatchEvent(new Event('action', {
+                        bubbles: true,
+                        composed: true
+                    }));
+                }
+            }}
+          ></etools-icon-button>`}
+      <div><slot></slot></div>
+    </section>`;
+    }
+};
+RichAction.styles = css `
+    section {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-inline-end: 4px;
+    }
+    section * {
+      margin: 2px;
+    }
+    etools-icon-button {
+      cursor: pointer;
+      width: 12px;
+      padding: 2px 4px;
+    }
+    etools-dropdown {
+      min-width: 140px;
+      margin-block-end: 2px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], RichAction.prototype, "command", void 0);
+__decorate([
+    property({ type: String })
+], RichAction.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], RichAction.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], RichAction.prototype, "active", void 0);
+__decorate([
+    property({ type: String })
+], RichAction.prototype, "color", void 0);
+__decorate([
+    property({ type: Array })
+], RichAction.prototype, "values", void 0);
+RichAction = __decorate([
+    customElement('rich-action')
+], RichAction);
+export { RichAction };
+export function editorCommand(command, value) {
+    document.execCommand(command, true, value);
+}

package/dist/rich-editor/rich-text.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import './rich-toolbar';
+import './rich-viewer';
+export declare class RichText extends LitElement {
+    static styles: import("lit").CSSResult;
+    selection: Selection | null;
+    readonly: boolean;
+    node: Element;
+    value: string | null | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+}

package/dist/rich-editor/rich-text.js

@@ -0,0 +1,125 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { fireEvent } from '../lib/utils/fire-custom-event';
+import './rich-toolbar';
+import './rich-viewer';
+let RichText = class RichText extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selection = null;
+        this.readonly = false;
+        this.node = document.createElement('div');
+    }
+    render() {
+        const { selection, readonly, node } = this;
+        return html `<main>
+      <rich-toolbar
+        ?hidden="${this.readonly}"
+        .selection="${selection}"
+        .node="${node}"
+        @set-content=${(e) => {
+            var _a;
+            const event = e;
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(event.detail, 'text/html');
+            const root = doc.querySelector('body');
+            this.node.innerHTML = (_a = root === null || root === void 0 ? void 0 : root.innerHTML) !== null && _a !== void 0 ? _a : '';
+            this.requestUpdate();
+        }}
+      ></rich-toolbar>
+      <rich-viewer
+        ?readonly="${readonly}"
+        .value="${this.value}"
+        @selection=${(e) => {
+            const event = e;
+            this.selection = event.detail.selection;
+            fireEvent(this, 'editor-changed', { value: event.detail.html });
+        }}
+        .node="${node}"
+      >
+      </rich-viewer>
+    </main>`;
+    }
+    firstUpdated() {
+        const children = this.children;
+        if ((children === null || children === void 0 ? void 0 : children.length) > 0) {
+            // Check if <template> is the first child
+            const template = children[0];
+            if (template.tagName === 'TEMPLATE') {
+                const content = template.innerHTML.trim();
+                if (content.length > 0) {
+                    this.node.innerHTML = content;
+                    this.requestUpdate();
+                }
+            }
+        }
+    }
+};
+RichText.styles = css `
+    :host {
+      --rich-color: black;
+      --rich-background: white;
+      --rich-action-active-color: red;
+      --icon-size: 24px;
+      border: solid 1px var(--rich-border-color, #eeeeee);
+      width: 100%;
+    }
+    main {
+      height: 100%;
+      width: 100%;
+      display: grid;
+      grid-template-rows: 1fr auto;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        'viewer'
+        'toolbar';
+    }
+
+    rich-toolbar {
+      grid-area: toolbar;
+      width: 100%;
+      background-color: var(--rich-toolbar-background, #ffffff);
+      color: var(--rich-color);
+      border-bottom: 1px solid var(--rich-toolbar-border-color, #eeeeee);
+    }
+
+    rich-viewer {
+      grid-area: viewer;
+      flex: 1;
+      width: 100%;
+      min-height: 40px;
+      overflow-y: auto;
+      background-color: var(--rich-background);
+      color: var(--rich-color);
+    }
+    rich-viewer[readonly] {
+      background-color: #eeeeee;
+    }
+    main {
+      grid-template-rows: auto 1fr;
+      grid-template-areas:
+        'toolbar'
+        'viewer';
+    }
+    rich-toolbar {
+      border-top: none;
+      border-bottom: 1px solid var(--rich-color);
+    }
+  `;
+__decorate([
+    property({ type: Object, hasChanged: () => true })
+], RichText.prototype, "selection", void 0);
+__decorate([
+    property({ type: Boolean })
+], RichText.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Object, hasChanged: () => true })
+], RichText.prototype, "node", void 0);
+__decorate([
+    property({ type: String })
+], RichText.prototype, "value", void 0);
+RichText = __decorate([
+    customElement('rich-text')
+], RichText);
+export { RichText };

package/dist/rich-editor/rich-toolbar.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import './rich-action';
+export declare class RichToolbar extends LitElement {
+    static styles: import("lit").CSSResult;
+    fgColorInput: HTMLInputElement;
+    bdColorInput: HTMLInputElement;
+    fileHandle?: any;
+    node: Element;
+    formatColor: string;
+    backgroundColor: string;
+    selection: Selection | null;
+    language: string;
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleLanguageChange(e: CustomEvent): void;
+    getTags(): string[];
+}

package/dist/rich-editor/rich-toolbar.js

@@ -0,0 +1,213 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement, query, state } from 'lit/decorators.js';
+import './rich-action';
+import { editorCommand } from './rich-action';
+import { getTranslation } from '../lib/utils/translate';
+let RichToolbar = class RichToolbar extends LitElement {
+    render() {
+        const tags = this.getTags();
+        return html `<header>
+      <rich-action icon="editor:format-clear" command="removeFormat"></rich-action>
+      <rich-action icon="editor:format-bold" command="bold" ?active=${tags.includes('b')}></rich-action>
+      <rich-action icon="editor:format-italic" command="italic" ?active=${tags.includes('i')}></rich-action>
+      <rich-action icon="editor:format-underlined" command="underline" ?active=${tags.includes('u')}></rich-action>
+      <rich-action icon="editor:format-align-left" command="justifyleft"></rich-action>
+      <rich-action icon="editor:format-align-center" command="justifycenter"></rich-action>
+      <rich-action icon="editor:format-align-right" command="justifyright"></rich-action>
+      <rich-action
+        icon="editor:format-list-numbered"
+        command="insertorderedlist"
+        ?active=${tags.includes('ol')}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-list-bulleted"
+        command="insertunorderedlist"
+        ?active=${tags.includes('ul')}
+      ></rich-action>
+      <rich-action icon="format_quote" command="formatblock" value="blockquote"></rich-action>
+      <!-- <rich-action icon="format_indent_decrease" command="outdent"></rich-action>
+      <rich-action icon="format_indent_increase" command="indent"></rich-action> -->
+      <rich-action
+        icon="editor:add-link"
+        ?active=${tags.includes('a')}
+        @action=${() => {
+            const newLink = prompt('Write the URL here', 'https://');
+            // Check if valid url
+            if (newLink && newLink.match(/^(http|https):\/\/[^ "]+$/)) {
+                editorCommand('createlink', newLink);
+            }
+        }}
+      >
+      </rich-action>
+      <rich-action icon="editor:unlink" ?active=${tags.includes('a')} command="unlink"></rich-action>
+      <rich-action
+        icon="editor:format-color-text"
+        .color="${this.formatColor}"
+        @action=${() => this.fgColorInput.click()}
+      >
+        <input
+          type="color"
+          id="fg-color"
+          @input=${(e) => {
+            const input = e.target;
+            this.formatColor = input.value;
+            editorCommand('forecolor', input.value);
+        }}
+        />
+      </rich-action>
+      <rich-action
+        icon="editor:border-color"
+        .color="${this.backgroundColor}"
+        @action=${() => this.bdColorInput.click()}
+      >
+        <input
+          type="color"
+          id="bd-color"
+          @input=${(e) => {
+            const input = e.target;
+            this.backgroundColor = input.value;
+            editorCommand('backcolor', input.value);
+        }}
+        />
+      </rich-action>
+      <rich-action
+        icon="title"
+        command="formatblock"
+        .values=${[
+            { name: getTranslation(this.language, 'NORMAL_TEXT'), value: '--' },
+            { name: getTranslation(this.language, 'HEADING1'), value: 'h1' },
+            { name: getTranslation(this.language, 'HEADING2'), value: 'h2' },
+            { name: getTranslation(this.language, 'HEADING3'), value: 'h3' },
+            { name: getTranslation(this.language, 'HEADING4'), value: 'h4' },
+            { name: getTranslation(this.language, 'HEADING5'), value: 'h5' },
+            { name: getTranslation(this.language, 'HEADING6'), value: 'h6' },
+            { name: getTranslation(this.language, 'PARAGRAPH'), value: 'p' },
+            { name: getTranslation(this.language, 'PRE_FORMATTED'), value: 'pre' }
+        ]}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-size"
+        command="fontsize"
+        .values=${[
+            { name: getTranslation(this.language, 'FONT_SIZE'), value: '--' },
+            { name: getTranslation(this.language, 'VERY_SMALL'), value: '1' },
+            { name: getTranslation(this.language, 'SMALL'), value: '2' },
+            { name: getTranslation(this.language, 'NORMAL'), value: '3' },
+            { name: getTranslation(this.language, 'MEDIUM_LARGE'), value: '4' },
+            { name: getTranslation(this.language, 'LARGE'), value: '5' },
+            { name: getTranslation(this.language, 'VERY_LARGE'), value: '6' },
+            { name: getTranslation(this.language, 'MAXIMUM'), value: '7' }
+        ]}
+      ></rich-action>
+      <rich-action icon="undo" command="undo"></rich-action>
+      <rich-action icon="redo" command="redo"></rich-action>
+      <!-- <rich-action icon="content_cut" command="cut"></rich-action> -->
+      <!-- <rich-action icon="content_copy" command="copy"></rich-action>
+      <rich-action icon="content_paste" command="paste"></rich-action> -->
+    </header>`;
+    }
+    constructor() {
+        super();
+        this.formatColor = '#000000';
+        this.backgroundColor = '#000000';
+        this.selection = null;
+        if (!this.language) {
+            this.language = window.EtoolsLanguage || 'en';
+        }
+        this.handleLanguageChange = this.handleLanguageChange.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    handleLanguageChange(e) {
+        this.language = e.detail.language;
+    }
+    getTags() {
+        var _a;
+        let tags = [];
+        if (this.selection) {
+            if (this.selection.type === 'Range') {
+                // @ts-ignore
+                let parentNode = this.selection.baseNode;
+                if (parentNode) {
+                    const checkNode = () => {
+                        var _a, _b;
+                        const tag = (_b = (_a = parentNode === null || parentNode === void 0 ? void 0 : parentNode.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim();
+                        if (tag)
+                            tags.push(tag);
+                    };
+                    while (parentNode != null) {
+                        checkNode();
+                        parentNode = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parentNode;
+                    }
+                }
+                // Remove root tag
+                tags.pop();
+            }
+            else {
+                const content = ((_a = this.selection) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+                tags = (content.match(/<[^>]+>/g) || [])
+                    .filter((tag) => !tag.startsWith('</'))
+                    .map((tag) => tag.replace(/<|>/g, ''));
+            }
+        }
+        return tags;
+    }
+};
+RichToolbar.styles = css `
+    header {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      justify-content: flex-start;
+      padding-inline-start: 12px;
+      flex-wrap: wrap;
+    }
+    input[type='color'] {
+      -webkit-appearance: none;
+      border: none;
+      width: 0;
+      height: 0;
+    }
+    input[type='color']::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+    input[type='color']::-webkit-color-swatch {
+      border: none;
+    }
+  `;
+__decorate([
+    query('#fg-color')
+], RichToolbar.prototype, "fgColorInput", void 0);
+__decorate([
+    query('#bd-color')
+], RichToolbar.prototype, "bdColorInput", void 0);
+__decorate([
+    state()
+], RichToolbar.prototype, "fileHandle", void 0);
+__decorate([
+    property({ type: Object, hasChanged: () => true })
+], RichToolbar.prototype, "node", void 0);
+__decorate([
+    property({ type: String })
+], RichToolbar.prototype, "formatColor", void 0);
+__decorate([
+    property({ type: String })
+], RichToolbar.prototype, "backgroundColor", void 0);
+__decorate([
+    property({ type: Object, hasChanged: () => true })
+], RichToolbar.prototype, "selection", void 0);
+__decorate([
+    property()
+], RichToolbar.prototype, "language", void 0);
+RichToolbar = __decorate([
+    customElement('rich-toolbar')
+], RichToolbar);
+export { RichToolbar };

package/dist/rich-editor/rich-viewer.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class RichViewer extends LitElement {
+    static styles: import("lit").CSSResult;
+    content: HTMLDivElement;
+    readonly: boolean;
+    value: string;
+    node: Element;
+    render(): import("lit-html").TemplateResult<1>;
+    updateSelection(): void;
+    firstUpdated(): void;
+}

package/dist/rich-editor/rich-viewer.js

@@ -0,0 +1,80 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { fireEvent } from '../lib/utils/fire-custom-event';
+let RichViewer = class RichViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.readonly = false;
+        this.value = '';
+    }
+    render() {
+        return html `<article
+      id="content"
+      contenteditable="${this.readonly ? 'false' : 'true'}"
+      .innerHTML="${this.value}"
+      @input=${() => this.updateSelection()}
+    ></article>`;
+    }
+    updateSelection() {
+        var _a, _b;
+        if (this.readonly) {
+            return;
+        }
+        // @ts-ignore
+        const shadowSelection = ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getSelection)
+            ? // @ts-ignore
+                this.shadowRoot.getSelection()
+            : null;
+        const selection = shadowSelection || document.getSelection() || window.getSelection();
+        fireEvent(this, 'selection', { selection: selection, html: (_b = this.content) === null || _b === void 0 ? void 0 : _b.innerHTML });
+    }
+    firstUpdated() {
+        document.execCommand('defaultParagraphSeparator', false, 'br');
+        document.addEventListener('selectionchange', () => {
+            this.updateSelection();
+        });
+        window.addEventListener('selectionchange', () => {
+            this.updateSelection();
+        });
+        document.addEventListener('keydown', () => {
+            this.updateSelection();
+        });
+    }
+};
+RichViewer.styles = css `
+    article {
+      width: calc(100% - 24px);
+      padding: 12px;
+      height: auto;
+      min-height: 60px;
+    }
+
+    article[contenteditable='true'] {
+      border: none;
+      outline: none;
+    }
+    article[contenteditable='false'] {
+      background-color: var(--secondary-background-color);
+    }
+    blockquote {
+      margin-inline-start: 8px;
+      margin-inline-end: 8px;
+    }
+  `;
+__decorate([
+    query('#content')
+], RichViewer.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RichViewer.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], RichViewer.prototype, "value", void 0);
+__decorate([
+    property({ type: Object, hasChanged: () => true })
+], RichViewer.prototype, "node", void 0);
+RichViewer = __decorate([
+    customElement('rich-viewer')
+], RichViewer);
+export { RichViewer };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "type": "module",
   "contributors": [
     "eTools Team"
@@ -32,15 +32,15 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@unicef-polymer/etools-unicef": ">=1.1.3"
+    "@unicef-polymer/etools-unicef": ">=1.2.0"
   },
   "devDependencies": {
-    "@unicef-polymer/etools-unicef": "^1.1.3",
-    "eslint": "^9.16.0",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.16.0",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
+    "@unicef-polymer/etools-unicef": "^1.2.0",
+    "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-html": "^8.1.2",
     "eslint-plugin-lit": "^1.15.0",