@fw-components/formula-editor 2.0.3-formula-editor.2 → 2.0.7-cline-formulaeditor.0

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

@@ -0,0 +1,142 @@
+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 _getComposedRange(shadowRoot) {
+        // `getSelection` is not defined for the type ShadowRoot in TS,
+        // but it does exist.
+        const sr = shadowRoot;
+        if (sr.getSelection && typeof sr.getSelection === 'function') {
+            const selection = sr.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                return selection.getRangeAt(0);
+            }
+        }
+        // Fallback for browsers like Firefox/Safari.
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            if (shadowRoot.contains(range.startContainer)) {
+                return range;
+            }
+        }
+        return null;
+    }
+    static getCaretPosition(shadowRoot, element) {
+        const range = Cursor._getComposedRange(shadowRoot);
+        if (!range) {
+            return 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) {
+        const range = Cursor._getComposedRange(shadowRoot);
+        return range ? range.getClientRects()[0] : undefined;
+    }
+}

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);