@unicef-polymer/etools-form-builder 3.1.6 → 3.1.8

package/dist/assets/translations.js

@@ -31,7 +31,7 @@ const translations = {
         DOCUMENT_TYPE: 'Document type',
         SELECT_DOCUMENT_TYPE: 'Select Document Type',
         PLEASE_ANSWER: 'Important: Please provide the answer if available',
-        NORMAL_TEXT: 'Normal Text',
+        NORMAL_TEXT: 'Text',
         HEADING1: 'Heading 1',
         HEADING2: 'Heading 2',
         HEADING3: 'Heading 3',
@@ -81,7 +81,7 @@ const translations = {
         DOCUMENT_TYPE: 'Type de document',
         SELECT_DOCUMENT_TYPE: 'Sélectionnez le type de document',
         PLEASE_ANSWER: 'Important : veuillez fournir la réponse si disponible',
-        NORMAL_TEXT: 'Texte normal',
+        NORMAL_TEXT: 'Texte',
         HEADING1: 'Titre 1',
         HEADING2: 'Titre 2',
         HEADING3: 'Titre 3',
@@ -131,7 +131,7 @@ const translations = {
         DOCUMENT_TYPE: 'نوع الوثيقة',
         SELECT_DOCUMENT_TYPE: 'حدد نوع المستند',
         PLEASE_ANSWER: 'هام: يرجى تقديم الإجابة إذا كانت متوفرة',
-        NORMAL_TEXT: 'نص عادي',
+        NORMAL_TEXT: 'نص',
         HEADING1: 'العنوان 1',
         HEADING2: 'العنوان 2',
         HEADING3: 'العنوان 3',
@@ -181,7 +181,7 @@ const translations = {
         DOCUMENT_TYPE: 'Tipo de Documento',
         SELECT_DOCUMENT_TYPE: 'Seleccionar tipo de documento',
         PLEASE_ANSWER: 'Importante: proporcione la respuesta si está disponible.',
-        NORMAL_TEXT: 'Texto normal',
+        NORMAL_TEXT: 'Texto',
         HEADING1: 'Título 1',
         HEADING2: 'Título 2',
         HEADING3: 'Título 3',

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

@@ -224,7 +224,6 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         .additional-field {
           padding-top: 15px;
           padding-bottom: 20px;
-          background-color: var(--secondary-background-color);
         }
         .wide-field-container {
           padding-bottom: 10px;
@@ -235,7 +234,7 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         }
         .wide-field-container .question-text {
           color: var(--secondary-text-color);
-          font-weight: 400;
+          font-weight: 600;
         }
         .mandatory_warning etools-icon {
           --etools-icon-fill-color: #f59e0b !important;

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

@@ -5,6 +5,7 @@ export declare class RichAction extends LitElement {
     static styles: import("lit").CSSResult;
     command: string;
     value?: string;
+    selectedValue?: string;
     icon: string;
     active: boolean;
     color: string;

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

@@ -20,7 +20,7 @@ let RichAction = class RichAction extends LitElement {
             option-label="name"
             option-value="value"
             .options="${this.values}"
-            .selected="${this.values[0].value}"
+            .selected="${this.selectedValue || this.values[0].value}"
             dynamic-align
             hide-search
             trigger-value-change-event
@@ -28,12 +28,12 @@ let RichAction = class RichAction extends LitElement {
                 if (detail === undefined || detail.selectedItem === null) {
                     return;
                 }
-                const selectedValue = detail.selectedItem.value;
-                if (selectedValue === '--') {
+                this.selectedValue = detail.selectedItem.value;
+                if (this.selectedValue === '--') {
                     editorCommand('removeFormat', undefined);
                 }
                 else {
-                    editorCommand(this.command, selectedValue);
+                    editorCommand(this.command, this.selectedValue);
                 }
             }}"
           >
@@ -64,15 +64,11 @@ RichAction.styles = css `
       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;
+      padding: 0px 8px;
     }
     etools-dropdown {
       min-width: 140px;
@@ -85,6 +81,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], RichAction.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], RichAction.prototype, "selectedValue", void 0);
 __decorate([
     property({ type: String })
 ], RichAction.prototype, "icon", void 0);

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

@@ -9,8 +9,12 @@ export declare class RichToolbar extends LitElement {
     node: Element;
     formatColor: string;
     backgroundColor: string;
+    selectedFormatBlock?: string;
+    selectedFontSize?: string;
     selection: Selection | null;
     language: string;
+    formatBlocks: string[];
+    fontSizes: string[];
     render(): import("lit-html").TemplateResult<1>;
     constructor();
     connectedCallback(): void;

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

@@ -12,9 +12,21 @@ let RichToolbar = class RichToolbar extends LitElement {
       <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-align-left"
+        command="justifyleft"
+        ?active=${tags.includes('text-align-left')}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-align-center"
+        command="justifycenter"
+        ?active=${tags.includes('text-align-center')}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-align-right"
+        command="justifyright"
+        ?active=${tags.includes('text-align-right')}
+      ></rich-action>
       <rich-action
         icon="editor:format-list-numbered"
         command="insertorderedlist"
@@ -25,7 +37,12 @@ let RichToolbar = class RichToolbar extends LitElement {
         command="insertunorderedlist"
         ?active=${tags.includes('ul')}
       ></rich-action>
-      <rich-action icon="format_quote" command="formatblock" value="blockquote"></rich-action>
+      <rich-action
+        icon="format_quote"
+        command="formatblock"
+        value="blockquote"
+        ?active=${tags.includes('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
@@ -40,13 +57,17 @@ let RichToolbar = class RichToolbar extends LitElement {
         }}
       >
       </rich-action>
-      <rich-action icon="editor:unlink" ?active=${tags.includes('a')} command="unlink"></rich-action>
+      <rich-action icon="editor:unlink" command="unlink"></rich-action>
       <rich-action
         icon="editor:format-color-text"
         .color="${this.formatColor}"
         @action=${() => editorCommand('forecolor', this.formatColor)}
       >
-        <etools-icon-button name="arrow-drop-down" @click="${() => this.fgColorInput.click()}"></etools-icon-button>
+        <etools-icon-button
+          class="arrow-icon"
+          name="arrow-drop-down"
+          @click="${() => this.fgColorInput.click()}"
+        ></etools-icon-button>
         <input
           type="color"
           id="fg-color"
@@ -62,7 +83,11 @@ let RichToolbar = class RichToolbar extends LitElement {
         .color="${this.backgroundColor}"
         @action=${() => editorCommand('backcolor', this.backgroundColor)}
       >
-        <etools-icon-button name="arrow-drop-down" @click="${() => this.bdColorInput.click()}"></etools-icon-button>
+        <etools-icon-button
+          class="arrow-icon"
+          name="arrow-drop-down"
+          @click="${() => this.bdColorInput.click()}"
+        ></etools-icon-button>
         <input
           type="color"
           id="bd-color"
@@ -76,6 +101,7 @@ let RichToolbar = class RichToolbar extends LitElement {
       <rich-action
         icon="title"
         command="formatblock"
+        .selectedValue="${this.selectedFormatBlock}"
         .values=${[
             { name: getTranslation(this.language, 'NORMAL_TEXT'), value: '--' },
             { name: getTranslation(this.language, 'HEADING1'), value: 'h1' },
@@ -91,6 +117,7 @@ let RichToolbar = class RichToolbar extends LitElement {
       <rich-action
         icon="editor:format-size"
         command="fontsize"
+        .selectedValue="${this.selectedFontSize}"
         .values=${[
             { name: getTranslation(this.language, 'FONT_SIZE'), value: '--' },
             { name: getTranslation(this.language, 'VERY_SMALL'), value: '1' },
@@ -115,6 +142,8 @@ let RichToolbar = class RichToolbar extends LitElement {
         this.formatColor = '#000000';
         this.backgroundColor = '#000000';
         this.selection = null;
+        this.formatBlocks = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre'];
+        this.fontSizes = ['1', '2', '3', '4', '5', '6', '7'];
         if (!this.language) {
             this.language = window.EtoolsLanguage || 'en';
         }
@@ -135,15 +164,38 @@ let RichToolbar = class RichToolbar extends LitElement {
         var _a;
         let tags = [];
         if (this.selection) {
-            if (this.selection.type === 'Range') {
+            this.selectedFontSize = this.selectedFormatBlock = '';
+            if (this.selection.type === 'Range' || this.selection.type === 'Caret') {
                 // @ts-ignore
                 let parentNode = this.selection.baseNode;
                 if (parentNode) {
                     const checkNode = () => {
-                        var _a, _b;
+                        var _a, _b, _c, _d, _e, _f, _g, _h;
                         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)
+                        if (tag) {
                             tags.push(tag);
+                            const textAlign = (_c = parentNode.style) === null || _c === void 0 ? void 0 : _c.textAlign;
+                            if (textAlign) {
+                                tags.push(`text-align-${textAlign}`);
+                            }
+                            const backgroundColor = (_d = parentNode.style) === null || _d === void 0 ? void 0 : _d.backgroundColor;
+                            if (backgroundColor) {
+                                tags.push(`background-color`);
+                                this.backgroundColor = backgroundColor;
+                            }
+                            const fontColor = ((_e = parentNode.style) === null || _e === void 0 ? void 0 : _e.fontColor) || ((_f = parentNode.attributes.getNamedItem('color')) === null || _f === void 0 ? void 0 : _f.value);
+                            if (fontColor) {
+                                tags.push(`font-color`);
+                                this.formatColor = fontColor;
+                            }
+                            const fontSize = ((_g = parentNode.style) === null || _g === void 0 ? void 0 : _g.fontSize) || ((_h = parentNode.attributes.getNamedItem('size')) === null || _h === void 0 ? void 0 : _h.value);
+                            if (fontSize && this.fontSizes.includes(fontSize)) {
+                                this.selectedFontSize = fontSize;
+                            }
+                            if (this.formatBlocks.includes(tag)) {
+                                this.selectedFormatBlock = tag;
+                            }
+                        }
                     };
                     while (parentNode != null) {
                         checkNode();
@@ -160,6 +212,12 @@ let RichToolbar = class RichToolbar extends LitElement {
                     .map((tag) => tag.replace(/<|>/g, ''));
             }
         }
+        if (!tags.includes('background-color')) {
+            this.backgroundColor = '#000000';
+        }
+        if (!tags.includes('font-color')) {
+            this.formatColor = '#000000';
+        }
         return tags;
     }
 };
@@ -185,6 +243,15 @@ RichToolbar.styles = css `
     input[type='color']::-webkit-color-swatch {
       border: none;
     }
+    rich-action {
+      margin: 2px 4px 2px 2px;
+    }
+    rich-action[active] {
+      background-color: #e8e8e8;
+    }
+    .arrow-icon {
+      margin-left: -6px;
+    }
   `;
 __decorate([
     query('#fg-color')
@@ -204,6 +271,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], RichToolbar.prototype, "backgroundColor", void 0);
+__decorate([
+    property({ type: String })
+], RichToolbar.prototype, "selectedFormatBlock", void 0);
+__decorate([
+    property({ type: String })
+], RichToolbar.prototype, "selectedFontSize", void 0);
 __decorate([
     property({ type: Object, hasChanged: () => true })
 ], RichToolbar.prototype, "selection", void 0);

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

@@ -55,7 +55,7 @@ RichViewer.styles = css `
       outline: none;
     }
     article[contenteditable='false'] {
-      background-color: var(--secondary-background-color);
+      background-color: #ffffff;
     }
     blockquote {
       margin-inline-start: 8px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "3.1.6",
+  "version": "3.1.8",
   "type": "module",
   "contributors": [
     "eTools Team"