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

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

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { validate } from '../lib/utils/validations.helper';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
+import { fireEvent } from '../lib/utils/fire-custom-event';
 /**
  * Class that contains common properties and methods for single and repeatable fields
  */
@@ -10,6 +11,7 @@ export class AbstractFieldBaseClass extends LitElement {
     set isReadonly(readonly) {
         this._readonly = readonly;
         this.setDefaultValue(readonly, this._defaultValue);
+        fireEvent(this, 'readonly-changed', { value: readonly });
         this.requestUpdate();
     }
     get isReadonly() {

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

@@ -5,6 +5,9 @@ import '../../rich-editor/rich-text';
 export declare class TextField extends BaseField<string> {
     protected originalValue: string | null;
     protected controlTemplate(): TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleReadonlyChange(_e: CustomEvent): void;
     updated(changedProperties: PropertyValues): void;
     protected customValidation(): string | null;
     static get styles(): CSSResultArray;

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

@@ -39,6 +39,20 @@ let TextField = class TextField extends BaseField {
           </etools-textarea>
         `;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('readonly-changed', this.handleReadonlyChange.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('readonly-changed', this.handleReadonlyChange.bind(this));
+    }
+    handleReadonlyChange(_e) {
+        // for rich editor need to reset the value here because of the logic below
+        if (this.showRichEditor && this.originalValue !== this.value) {
+            this.originalValue = this.value;
+        }
+    }
     updated(changedProperties) {
         super.updated(changedProperties);
         // set control value only at the beginning with a proxy param (originalValue),

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;

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

@@ -1,6 +1,7 @@
 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';
@@ -8,7 +9,6 @@ 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>
@@ -44,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"
@@ -57,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"
@@ -102,6 +104,7 @@ let RichToolbar = class RichToolbar extends LitElement {
       ></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> -->

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "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.3"
   },
   "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.3",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-html": "^8.1.2",