@unicef-polymer/etools-form-builder 3.1.3 → 3.1.5

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/rich-editor/rich-action.js

@@ -62,6 +62,7 @@ RichAction.styles = css `
       height: 100%;
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
       align-items: center;
       margin-inline-end: 4px;
     }
@@ -75,7 +76,7 @@ RichAction.styles = css `
     }
     etools-dropdown {
       min-width: 140px;
-      margin-block-end: 24px;
+      margin-block-end: 2px;
     }
   `;
 __decorate([

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 import './rich-action';
 export declare class RichToolbar extends LitElement {
     static styles: import("lit").CSSResult;
@@ -9,6 +10,11 @@ export declare class RichToolbar extends LitElement {
     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

@@ -1,19 +1,14 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { property, customElement, query, state } from 'lit/decorators.js';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 import './rich-action';
 import { editorCommand } from './rich-action';
+import { getTranslation } from '../lib/utils/translate';
 let RichToolbar = class RichToolbar extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.formatColor = '#000000';
-        this.backgroundColor = '#000000';
-        this.selection = null;
-    }
     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>
@@ -49,8 +44,9 @@ let RichToolbar = class RichToolbar extends LitElement {
       <rich-action
         icon="editor:format-color-text"
         .color="${this.formatColor}"
-        @action=${() => this.fgColorInput.click()}
+        @action=${() => editorCommand('forecolor', this.formatColor)}
       >
+        <etools-icon-button name="arrow-drop-down" @click="${() => this.fgColorInput.click()}"></etools-icon-button>
         <input
           type="color"
           id="fg-color"
@@ -62,10 +58,11 @@ let RichToolbar = class RichToolbar extends LitElement {
         />
       </rich-action>
       <rich-action
-        icon="editor:border-color"
+        icon="editor:background-color"
         .color="${this.backgroundColor}"
-        @action=${() => this.bdColorInput.click()}
+        @action=${() => editorCommand('backcolor', this.backgroundColor)}
       >
+        <etools-icon-button name="arrow-drop-down" @click="${() => this.bdColorInput.click()}"></etools-icon-button>
         <input
           type="color"
           id="bd-color"
@@ -80,38 +77,60 @@ let RichToolbar = class RichToolbar extends LitElement {
         icon="title"
         command="formatblock"
         .values=${[
-            { name: 'Normal Text', value: '--' },
-            { name: 'Heading 1', value: 'h1' },
-            { name: 'Heading 2', value: 'h2' },
-            { name: 'Heading 3', value: 'h3' },
-            { name: 'Heading 4', value: 'h4' },
-            { name: 'Heading 5', value: 'h5' },
-            { name: 'Heading 6', value: 'h6' },
-            { name: 'Paragraph', value: 'p' },
-            { name: 'Pre-Formatted', value: 'pre' }
+            { 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: 'Font Size', value: '--' },
-            { name: 'Very Small', value: '1' },
-            { name: 'Small', value: '2' },
-            { name: 'Normal', value: '3' },
-            { name: 'Medium Large', value: '4' },
-            { name: 'Large', value: '5' },
-            { name: 'Very Large', value: '6' },
-            { name: 'Maximum', value: '7' }
+            { 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="editor:format-clear" command="removeFormat"></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 = [];
@@ -149,7 +168,7 @@ RichToolbar.styles = css `
       width: 100%;
       display: flex;
       flex-direction: row;
-      align-items: center;
+      align-items: flex-end;
       justify-content: flex-start;
       padding-inline-start: 12px;
       flex-wrap: wrap;
@@ -188,6 +207,9 @@ __decorate([
 __decorate([
     property({ type: Object, hasChanged: () => true })
 ], RichToolbar.prototype, "selection", void 0);
+__decorate([
+    property()
+], RichToolbar.prototype, "language", void 0);
 RichToolbar = __decorate([
     customElement('rich-toolbar')
 ], RichToolbar);

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

@@ -44,8 +44,10 @@ let RichViewer = class RichViewer extends LitElement {
 };
 RichViewer.styles = css `
     article {
-      width: calc(100% - var(--rich-padding) * 2);
-      height: calc(100% - var(--rich-padding) * 2);
+      width: calc(100% - 24px);
+      padding: 12px;
+      height: auto;
+      min-height: 60px;
     }
 
     article[contenteditable='true'] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "type": "module",
   "contributors": [
     "eTools Team"
@@ -32,14 +32,14 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@unicef-polymer/etools-unicef": ">=1.2.0"
+    "@unicef-polymer/etools-unicef": ">=1.2.1"
   },
   "devDependencies": {
     "@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",
+    "@unicef-polymer/etools-unicef": "^1.2.1",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-html": "^8.1.2",