@fw-components/formula-editor 2.0.3-formula-editor.1 → 2.0.7-formula-editor.0

package/dist/formula-editor/src/cursor.js

@@ -0,0 +1,123 @@
+export class Cursor {
+    /**
+     * The functions `getCurrentCursorPosition`, `setCurrentCursorPosition` and their
+     * helpers `_createRange` and `_isChildOf` are not used for caret manipulation,
+     * but are still in the code for future reference, if the functionality breaks
+     * somehow in some obsolete browser.
+     */
+    static getCurrentCursorPosition(parentElement) {
+        let selection = window.getSelection(), charCount = -1, node;
+        if (selection?.focusNode) {
+            if (Cursor._isChildOf(selection.focusNode, parentElement)) {
+                node = selection.focusNode;
+                charCount = selection.focusOffset;
+                while (node) {
+                    if (node === parentElement) {
+                        break;
+                    }
+                    if (node.previousSibling) {
+                        node = node.previousSibling;
+                        charCount += node.textContent?.length ?? 0;
+                    }
+                    else {
+                        node = node.parentNode;
+                        if (node === null) {
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        return charCount;
+    }
+    static setCurrentCursorPosition(chars, element) {
+        if (chars >= 0) {
+            var selection = window.getSelection();
+            let range = Cursor._createRange(element, { count: chars }, undefined);
+            if (range) {
+                range.collapse(false);
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+            }
+        }
+    }
+    static _createRange(node, chars, range) {
+        if (!range) {
+            range = document.createRange();
+            range.selectNode(node);
+            range.setStart(node, 0);
+        }
+        if (chars.count === 0) {
+            range.setEnd(node, chars.count);
+        }
+        else if (node && chars.count > 0) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                if (node.textContent.length < chars.count) {
+                    chars.count -= node.textContent.length;
+                }
+                else {
+                    range.setEnd(node, chars.count);
+                    chars.count = 0;
+                }
+            }
+            else {
+                for (var lp = 0; lp < node.childNodes.length; lp++) {
+                    range = Cursor._createRange(node.childNodes[lp], chars, range);
+                    if (chars.count === 0) {
+                        break;
+                    }
+                }
+            }
+        }
+        return range;
+    }
+    static _isChildOf(node, parentElement) {
+        while (node !== null) {
+            if (node === parentElement) {
+                return true;
+            }
+            node = node.parentNode;
+        }
+        return false;
+    }
+    static getCaretPosition(shadowRoot, element) {
+        // `getSelection` is not defined for the type ShadowRoot in TS,
+        // but it does exist.
+        const range = shadowRoot.getSelection().getRangeAt(0);
+        const prefix = range.cloneRange();
+        prefix.selectNodeContents(element);
+        prefix.setEnd(range.endContainer, range.endOffset);
+        return prefix.toString().length;
+    }
+    static { this.setCaretPosition = (pos, parent) => {
+        for (const node of parent.childNodes) {
+            if (node.nodeType == Node.TEXT_NODE) {
+                if (node.length >= pos) {
+                    const range = document.createRange();
+                    const sel = window.getSelection();
+                    range.setStart(node, pos);
+                    range.collapse(true);
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                    return -1;
+                }
+                else {
+                    pos = pos - node.length;
+                }
+            }
+            else {
+                pos = this.setCaretPosition(pos, node);
+                if (pos < 0) {
+                    return pos;
+                }
+            }
+        }
+        return pos;
+    }; }
+    static getCursorRect(shadowRoot) {
+        return shadowRoot
+            .getSelection()
+            ?.getRangeAt(0)
+            ?.getClientRects()[0];
+    }
+}

package/dist/formula-editor/src/formula-builder.js

@@ -0,0 +1,139 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { Formula } from "./helpers/types.js";
+import { TextButtonStyles } from "../../styles/src/button-styles.js";
+import "./formula-editor";
+let FormulaBuilder = class FormulaBuilder extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variables = new Map([
+            ["sales_expense", 2],
+            ["sales_in_quarter", 3],
+            ["sales_cummulative", 3],
+            ["cummulative_sum", 4],
+            ["mayank", 10],
+        ]);
+        this.formula = new Formula("", "");
+        this.handleCalculate = () => {
+            this.formulaEditor?.requestCalculate();
+        };
+        this.handleFormat = () => {
+            this.formulaEditor?.requestFormat();
+        };
+    }
+    static { this.styles = css `
+    #wysiwyg-err {
+      width: 100%;
+      border-radius: 0px 0px var(--fe-err-border-radius, 4px)
+        var(--fe-err-border-radius, 4px);
+      color: var(--fe-err-text-color, #fc514f);
+      border: var(--fe-err-border-width, 2px) solid black;
+      /* border-top: 0px; */
+      background-color: var(--fe-background-color, #222222);
+      padding: 4px;
+      margin: 0px 0px 8px 0px;
+    }
+
+    .wysiwyg-no-err {
+      color: #098668 !important;
+    }
+  `; }
+    handleChange() {
+        this.dispatchEvent(new CustomEvent("fw-formula-changed", {
+            detail: {
+                name: this.nameInput?.value,
+                rawFormula: this.formula.formulaString,
+                error: this.formula.error,
+                precision: this.formula.precision,
+            },
+            bubbles: true,
+        }));
+        this.requestUpdate();
+    }
+    render() {
+        return html `
+      ${TextButtonStyles}
+
+      <div>
+        <label for="metric-name-input">Metric Name</label>
+        <input
+          id="metric-name-input"
+          .value=${this.formula.name}
+          @input=${(e) => {
+            this.handleChange();
+        }}
+        />
+      </div>
+      <label>Formula</label>
+      <formula-editor
+        class="fe"
+        minSuggestionLen="0"
+        @fw-formula-content-changed=${(e) => {
+            this.formula.formulaString = e.detail.formulaString;
+            this.formula.error = e.detail.error;
+            this.handleChange();
+        }}
+        .variables=${this.variables}
+        .content=${this.formula.formulaString}
+        .errorString=${this.formula.error}
+      >
+      </formula-editor>
+      <div id="wysiwyg-err" class="${this.formula.error ?? "wysiwyg-no-err"}">
+        ${this.formula.error ??
+            `${this.formula.name} = ${this.formula.formulaString}`}
+      </div>
+      <button class="primary-text-button" @click=${this.handleCalculate}>
+        Calculate
+      </button>
+      <button class="primary-text-button" @click=${this.handleFormat}>
+        Format
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({
+        type: (Map),
+        converter: {
+            fromAttribute: (value) => {
+                if (value) {
+                    return new Map(JSON.parse(value));
+                }
+            },
+            toAttribute: (value) => {
+                return JSON.stringify(Array.from(value.entries()));
+            },
+        },
+    })
+], FormulaBuilder.prototype, "variables", void 0);
+__decorate([
+    property({
+        type: Formula,
+        converter: {
+            fromAttribute: (value) => {
+                if (value) {
+                    const formulaJSON = JSON.parse(value);
+                    return new Formula(formulaJSON.name, formulaJSON.formulaString, formulaJSON.precision);
+                }
+            },
+            toAttribute: (value) => {
+                return JSON.stringify(value);
+            },
+        },
+    })
+], FormulaBuilder.prototype, "formula", void 0);
+__decorate([
+    query("#metric-name-input")
+], FormulaBuilder.prototype, "nameInput", void 0);
+__decorate([
+    query("formula-editor")
+], FormulaBuilder.prototype, "formulaEditor", void 0);
+FormulaBuilder = __decorate([
+    customElement("formula-builder")
+], FormulaBuilder);

package/dist/formula-editor/src/formula-creator.js

@@ -0,0 +1,83 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { Operator } from "./helpers/types";
+var FormulaEntityType;
+(function (FormulaEntityType) {
+    FormulaEntityType[FormulaEntityType["Operator"] = 0] = "Operator";
+    FormulaEntityType[FormulaEntityType["Entity"] = 1] = "Entity";
+})(FormulaEntityType || (FormulaEntityType = {}));
+class FormulaEntity {
+    constructor(type, metric, operator = Operator.NONE) {
+        this.type = type;
+        this.metric = metric;
+        this.operator = operator;
+    }
+}
+class FormulaRow {
+    constructor(type, metrices = null, operator = Operator.NONE) {
+        this.operator = Operator.NONE;
+        this.type = type;
+        this.metrices = metrices;
+        this.operator = operator;
+    }
+}
+let FormulaCreator = class FormulaCreator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.formulaState = [
+            new FormulaRow(FormulaEntityType.Entity, [
+                new FormulaEntity(FormulaEntityType.Entity, "Sales Expense"),
+                new FormulaEntity(FormulaEntityType.Operator, null, Operator.MINUS),
+                new FormulaEntity(FormulaEntityType.Entity, "Marketing Expense"),
+            ]),
+            new FormulaRow(FormulaEntityType.Operator, null, Operator.DIV),
+            new FormulaRow(FormulaEntityType.Entity, [
+                new FormulaEntity(FormulaEntityType.Entity, "Sales Expense"),
+                new FormulaEntity(FormulaEntityType.Operator, null, Operator.PLUS),
+                new FormulaEntity(FormulaEntityType.Entity, "Marketing Expense"),
+            ]),
+            new FormulaRow(FormulaEntityType.Operator, null, Operator.DIV),
+            new FormulaRow(FormulaEntityType.Entity, [
+                new FormulaEntity(FormulaEntityType.Entity, "Sales Expense"),
+                new FormulaEntity(FormulaEntityType.Operator, null, Operator.DIV),
+                new FormulaEntity(FormulaEntityType.Entity, "Marketing Expense"),
+            ]),
+        ];
+    }
+    render() {
+        return html `
+      <label>Formula</label>
+      ${repeat(this.formulaState, (_, rowIndex) => `row-${rowIndex}`, (formulaRow, rowIndex) => {
+            return formulaRow.type == FormulaEntityType.Entity
+                ? html ` <div>
+                ${repeat(formulaRow.metrices, (_, columnIndex) => `col-(${rowIndex},${columnIndex})`, (formulaEntity, columnIndex) => {
+                    return formulaEntity.type == FormulaEntityType.Entity
+                        ? html `<input
+                          value=${ifDefined(formulaEntity.metric === null
+                            ? undefined
+                            : formulaEntity.metric)}
+                        />`
+                        : html `<operator-input
+                          .operator=${formulaEntity.operator}
+                        ></operator-input>`;
+                })}
+              </div>`
+                : html `<div>${formulaRow.operator}</div>`;
+        })}
+    `;
+    }
+};
+__decorate([
+    state()
+], FormulaCreator.prototype, "formulaState", void 0);
+FormulaCreator = __decorate([
+    customElement("formula-creator")
+], FormulaCreator);

package/dist/formula-editor/src/formula-editor.js

@@ -0,0 +1,239 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { FormulaEditorStyles } from "./styles/formula-editor-styles.js";
+import { Parser } from "./parser.js";
+import { Cursor } from "./cursor.js";
+import "./suggestion-menu.js";
+let FormulaEditor = class FormulaEditor extends LitElement {
+    constructor() {
+        super();
+        /**
+         * These `states` and `properties` can't be defined as `static get properties`,
+         * because TS doesn't support that.
+         * @see https://github.com/lit/lit-element/issues/414
+         */
+        this._formattedContent = null;
+        this._recommendations = null;
+        this._calculatedResult = undefined;
+        /**
+         * If `parseInput` is called to add a recommendation, say by clicking,
+         * browser removes focus from the input box. In that case, we have no way
+         * of knowing where the cursor previously was, other than storing it somewhere.
+         */
+        this.currentCursorPosition = null;
+        this.currentCursorRect = undefined;
+        this.lastInputType = "undef";
+        this.content = "";
+        this.variables = new Map();
+        this.minSuggestionLen = 2;
+        this.errorString = null;
+        this._parser = new Parser(this.variables, this.minSuggestionLen);
+    }
+    firstUpdated(_changedProperties) {
+        this._parser = new Parser(this.variables, this.minSuggestionLen);
+        this.parseInput(null, false);
+    }
+    handleChange(event) {
+        event.preventDefault();
+        this.lastInputType = event.inputType;
+        this.content = event.target.innerText;
+        this.parseInput();
+        event.target.focus();
+    }
+    navigateRecommendations(direction) {
+        if (!this._recommendations)
+            return;
+        const currentIndex = this._recommendations.indexOf(this._selectedRecommendation);
+        const newIndex = direction === "ArrowDown"
+            ? (currentIndex + 1) % this._recommendations.length
+            : direction === "ArrowUp"
+                ? (currentIndex - 1 + this._recommendations.length) % this._recommendations.length
+                : currentIndex;
+        this._selectedRecommendation = this._recommendations[newIndex];
+    }
+    handleKeyboardEvents(event) {
+        if (event.code == "Tab" && this._recommendations?.length == 1) {
+            this._selectedRecommendation = null;
+            event.preventDefault();
+            this.parseInput(this._recommendations[0]);
+        }
+        else if (event.code === "ArrowDown" || event.code === "ArrowUp") {
+            event.preventDefault();
+            this.navigateRecommendations(event.code);
+            this.requestUpdate();
+        }
+        else if (event.code === "Enter" && this._selectedRecommendation) {
+            event.preventDefault();
+            this.parseInput(this._selectedRecommendation);
+            this._selectedRecommendation = null;
+        }
+    }
+    onClickRecommendation(recommendation) {
+        let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
+        if (!editor)
+            return;
+        this.parseInput(recommendation);
+        this.currentCursorPosition = null;
+    }
+    /**
+     *
+     * @param recommendation The recommendation which needs to be inserted
+     * at the current cursor position
+     * @param manageCursor Whether or not cursor management is needed. Not
+     * needed when manual insertion of text is required (eg: during initialization)
+     * @returns void
+     */
+    parseInput(recommendation = null, manageCursor = true) {
+        let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
+        if (!editor)
+            return;
+        /**
+         * @see https://github.com/WICG/webcomponents/issues/79
+         */
+        if (manageCursor)
+            this.currentCursorPosition = recommendation
+                ? this.currentCursorPosition
+                : Cursor.getCaretPosition(this.shadowRoot, editor);
+        const parseOutput = this._parser.parseInput(this.content, this.currentCursorPosition, recommendation);
+        this._recommendations = parseOutput.recommendations;
+        this._formattedContent = parseOutput.formattedContent;
+        this.errorString = parseOutput.errorString;
+        /**
+         * Don't modify the text stream manually if the text is being composed,
+         * unless the user manually chooses to do so by selecting a suggestion.
+         * @see https://github.com/w3c/input-events/issues/86
+         * @see https://github.com/w3c/input-events/pull/122
+         * @see https://bugs.chromium.org/p/chromium/issues/detail?id=689541
+         * */
+        if (this.lastInputType != "insertCompositionText" || recommendation) {
+            editor.innerHTML = parseOutput.formattedString;
+        }
+        this.content = editor.innerText;
+        if (recommendation) {
+            this._recommendations = null;
+            this.currentCursorPosition = parseOutput.newCursorPosition;
+        }
+        if (manageCursor)
+            Cursor.setCaretPosition(this.currentCursorPosition, editor);
+        editor?.focus();
+        if (manageCursor)
+            this.currentCursorRect = Cursor.getCursorRect(this.shadowRoot);
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent("fw-formula-content-changed", {
+            detail: {
+                formulaString: this.content,
+                error: this.errorString,
+            },
+            bubbles: true,
+        }));
+    }
+    requestCalculate() {
+        if (this._parser.parseInput(this.content).errorString) {
+            return;
+        }
+        const calculatedResult = this._parser.calculate(this.content);
+        this.content = this._parser.addParentheses(this.content) ?? this.content;
+        this.parseInput();
+        this._calculatedResult = calculatedResult.result;
+        this.errorString = calculatedResult.errorString;
+        this._recommendations = null;
+        this.requestUpdate();
+    }
+    requestFormat() {
+        this.content = this._parser.addParentheses(this.content) ?? this.content;
+        this.parseInput();
+        this._recommendations = null;
+        this.requestUpdate();
+    }
+    render() {
+        return html `
+      <style>
+        ${FormulaEditorStyles}
+      </style>
+      <div
+        contenteditable
+        id="wysiwyg-editor"
+        spellcheck="false"
+        autocomplete="off"
+        @input=${this.handleChange}
+        @keydown=${this.handleKeyboardEvents}
+      ></div>
+      ${this._recommendations
+            ? html ` <suggestion-menu
+            style="
+              position: absolute; 
+              left: ${(this.currentCursorRect?.left ?? 0) -
+                (this.editor?.getClientRect()[0]?.left ?? 0) +
+                "px"}; 
+              top: ${(this.currentCursorRect?.top ??
+                0 - (this.editor?.getClientRect()[0]?.top ?? 0)) +
+                window.scrollY +
+                "px"};
+            "
+            .recommendations=${this._recommendations}
+            .currentSelection=${this._selectedRecommendation}
+            .onClickRecommendation=${(e) => this.onClickRecommendation(e)}
+          ></suggestion-menu>`
+            : html ``}
+      <p>${this._calculatedResult}</p>
+    `;
+    }
+};
+__decorate([
+    state()
+], FormulaEditor.prototype, "_formattedContent", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_recommendations", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_calculatedResult", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "currentCursorPosition", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "currentCursorRect", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "lastInputType", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_selectedRecommendation", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "content", void 0);
+__decorate([
+    property({
+        type: (Map),
+        converter: {
+            fromAttribute: (value) => {
+                if (value) {
+                    return new Map(JSON.parse(value));
+                }
+            },
+            toAttribute: (value) => {
+                return JSON.stringify(Array.from(value.entries()));
+            },
+        },
+    })
+], FormulaEditor.prototype, "variables", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "minSuggestionLen", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "errorString", void 0);
+__decorate([
+    query("wysiwyg-editor")
+], FormulaEditor.prototype, "editor", void 0);
+FormulaEditor = __decorate([
+    customElement("formula-editor")
+], FormulaEditor);
+export { FormulaEditor };

package/dist/formula-editor/src/helpers/types.js

@@ -0,0 +1,16 @@
+export var Operator;
+(function (Operator) {
+    Operator["PLUS"] = "+";
+    Operator["MINUS"] = "-";
+    Operator["MUL"] = "*";
+    Operator["DIV"] = "/";
+    Operator["NONE"] = "";
+})(Operator || (Operator = {}));
+export class Formula {
+    constructor(name, formulaString, precision = -1) {
+        this.error = null;
+        this.name = name;
+        this.formulaString = formulaString;
+        this.precision = precision;
+    }
+}

package/dist/formula-editor/src/helpers.js

@@ -0,0 +1,54 @@
+export class Stack {
+    constructor() {
+        this._elements = [];
+    }
+    push(item) {
+        this._elements.push(item);
+    }
+    pop() {
+        return this._elements.pop();
+    }
+    top() {
+        return this._elements.at(-1);
+    }
+    isEmpty() {
+        return this._elements.length == 0;
+    }
+    print() {
+        console.log(this._elements);
+    }
+}
+export class Queue {
+    constructor() {
+        this._elements = {};
+        this._head = 0;
+        this._tail = 0;
+    }
+    enqueue(item) {
+        this._elements[this._tail] = item;
+        this._tail++;
+    }
+    dequeue() {
+        if (this._tail === this._head)
+            return undefined;
+        const element = this._elements[this._head];
+        delete this._elements[this._head];
+        this._head++;
+        return element;
+    }
+    peek() {
+        return this._elements[this._head];
+    }
+    isEmpty() {
+        return this._head == this._tail;
+    }
+    print() {
+        console.log(this._elements);
+    }
+}
+export var Expectation;
+(function (Expectation) {
+    Expectation[Expectation["VARIABLE"] = 0] = "VARIABLE";
+    Expectation[Expectation["OPERATOR"] = 1] = "OPERATOR";
+    Expectation[Expectation["UNDEFINED"] = 2] = "UNDEFINED";
+})(Expectation || (Expectation = {}));