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

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

@@ -0,0 +1,105 @@
+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;
+      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: 24px;
+    }
+  `;
+__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,14 @@
+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;
+    render(): import("lit-html").TemplateResult<1>;
+    getTags(): string[];
+}

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

@@ -0,0 +1,194 @@
+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';
+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>
+      <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: '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' }
+        ]}
+      ></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' }
+        ]}
+      ></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>`;
+    }
+    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: center;
+      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);
+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,78 @@
+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% - var(--rich-padding) * 2);
+      height: calc(100% - var(--rich-padding) * 2);
+    }
+
+    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,52 +1,51 @@
-{
-  "name": "@unicef-polymer/etools-form-builder",
-  "description": "Etools FM Form Builder components",
-  "version": "3.1.1",
-  "type": "module",
-  "contributors": [
-    "eTools Team"
-  ],
-  "license": "BSD-3-Clause",
-  "repository": "https://github.com/unicef-polymer/fm-form-builder",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "tsToJs": "rm -rf dist && tsc --skipLibCheck",
-    "watch": "tsc --watch",
-    "lint": "eslint",
-    "format": "eslint --ext .ts ./src/**/*.ts --fix --ignore-path .gitignore",
-    "rd:init": "relative-deps init",
-    "rd:add": "relative-deps add",
-    "rd:reload": "relative-deps",
-    "prepublishOnly": "npm run tsToJs"
-  },
-  "dependencies": {
-    "@shoelace-style/shoelace": "2.18.0",
-    "@types/ramda": "0.30.2",
-    "lit": "^3.2.1",
-    "ramda": "0.30.1",
-    "relative-deps": "^1.0.7",
-    "typescript": "^4.9.5"
-  },
-  "peerDependencies": {
-    "@unicef-polymer/etools-unicef": ">=1.1.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.1.1",
-    "eslint": "^9.16.0",
-    "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-html": "^8.1.2",
-    "eslint-plugin-lit": "^1.15.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "globals": "^15.13.0",
-    "prettier": "^3.4.2"
-  }
-}
+{
+  "name": "@unicef-polymer/etools-form-builder",
+  "description": "Etools FM Form Builder components",
+  "version": "3.1.3",
+  "type": "module",
+  "contributors": [
+    "eTools Team"
+  ],
+  "license": "BSD-3-Clause",
+  "repository": "https://github.com/unicef-polymer/fm-form-builder",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "tsToJs": "rm -rf dist && tsc --skipLibCheck",
+    "watch": "tsc --watch",
+    "lint": "eslint",
+    "format": "eslint --ext .ts ./src/**/*.ts --fix --ignore-path .gitignore",
+    "rd:init": "relative-deps init",
+    "rd:add": "relative-deps add",
+    "rd:reload": "relative-deps",
+    "prepublishOnly": "npm run tsToJs"
+  },
+  "dependencies": {
+    "@shoelace-style/shoelace": "2.18.0",
+    "@types/ramda": "0.30.2",
+    "lit": "^3.2.1",
+    "ramda": "0.30.1",
+    "relative-deps": "^1.0.7",
+    "typescript": "^4.9.5"
+  },
+  "peerDependencies": {
+    "@unicef-polymer/etools-unicef": ">=1.2.0"
+  },
+  "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",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-html": "^8.1.2",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2"
+  }
+}