@fw-components/formula-editor 2.3.4 → 2.4.0

package/dist/{formula-editor/src/formula-editor.js → formula-editor.js}

@@ -5,16 +5,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 "./suggestion-menu.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { getFormulaTokens } from "./utils/get-formula-tokens.js";
 import { Parser } from "./utils/parser.js";
 import { FormulaEditorStyles } from "./styles/editor.js";
-import { getFormulaTokens } from "./utils/get-formula-tokens.js";
 let FormulaEditor = class FormulaEditor extends LitElement {
     constructor() {
         super(...arguments);
         this.recommendations = [];
         this.currentCursorPosition = 0;
+        /**
+         * user input event type
+         */
+        this.lastInputType = "";
+        this._selectedRecommendation = "";
         this.isFocused = false;
         /**
          * Text area input value
@@ -22,10 +26,14 @@ let FormulaEditor = class FormulaEditor extends LitElement {
         this.formulaString = "";
         this.placeholder = "Type your formula...";
         this.recommendationLabels = new Map();
+        this.label = "";
         this.variables = new Map();
+        this.variableType = "";
         this.minSuggestionLen = 2;
         this.errorString = "";
+        this.formulaRegex = /.*/;
         this.allowedNumbers = true;
+        this.allowedOperators = new Set();
     }
     updated(_changedProperties) {
         if (_changedProperties.has("formulaString")) {
@@ -66,7 +74,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
         this.currentCursorPosition = this.editor.selectionStart;
         const { recommendations, errorString, formattedString, newCursorPosition } = this._parser.parseInput(this.formulaString, this.currentCursorPosition, recommendation);
         this.recommendations = recommendations;
-        this.errorString = errorString;
+        this.errorString = 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 recommendation.
@@ -92,7 +100,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
                 recommendations: this.recommendations,
                 formulaTokens: getFormulaTokens(this.formulaString || "", this.formulaRegex)
             },
-            bubbles: true,
+            bubbles: true
         }));
     }
     formatFormula() {
@@ -131,7 +139,9 @@ let FormulaEditor = class FormulaEditor extends LitElement {
     }
     render() {
         return html `
-      <style>${FormulaEditorStyles}</style>
+      <style>
+        ${FormulaEditorStyles}
+      </style>
 
       ${this.label ? html `<label for="fw-formula-editor" class="editor-label">${this.label}</label>` : ""}
 
@@ -155,7 +165,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
             .onRecommendationClick=${this.onRecommendationClick.bind(this)}
             .recommendationLabels=${this.recommendationLabels}
           ></suggestion-menu>`
-            : ''}
+            : ""}
     `;
     }
 };
@@ -181,31 +191,31 @@ __decorate([
     property()
 ], FormulaEditor.prototype, "placeholder", void 0);
 __decorate([
-    property()
+    property({ type: Object })
 ], FormulaEditor.prototype, "recommendationLabels", void 0);
 __decorate([
-    property()
+    property({ type: String })
 ], FormulaEditor.prototype, "label", void 0);
 __decorate([
-    property()
+    property({ type: Object })
 ], FormulaEditor.prototype, "variables", void 0);
 __decorate([
-    property()
+    property({ type: String })
 ], FormulaEditor.prototype, "variableType", void 0);
 __decorate([
-    property()
+    property({ type: Number })
 ], FormulaEditor.prototype, "minSuggestionLen", void 0);
 __decorate([
-    property()
+    property({ type: String })
 ], FormulaEditor.prototype, "errorString", void 0);
 __decorate([
-    property()
+    property({ type: Object })
 ], FormulaEditor.prototype, "formulaRegex", void 0);
 __decorate([
-    property()
+    property({ type: Boolean })
 ], FormulaEditor.prototype, "allowedNumbers", void 0);
 __decorate([
-    property()
+    property({ type: Object })
 ], FormulaEditor.prototype, "allowedOperators", void 0);
 __decorate([
     query("#fw-formula-editor")

package/dist/{formula-editor/src/styles → styles}/suggestion-menu.js

@@ -27,12 +27,13 @@ export const SuggestionMenuStyles = css `
     color: var(--secondary-color, #bab6c0);
   }
 
-  li:hover, li:focus-visible, li.selected {
+  li:hover,
+  li:focus-visible,
+  li.selected {
     color: var(--fe-suggestion-focus-color, #69676c);
     background: rgba(var(--fe-suggestion-focus-background, 86, 86, 86), 0.1);
   }
 
-
   /* Scrollbar styling */
   ::-webkit-scrollbar {
     width: 7px;

package/dist/{formula-editor/src/suggestion-menu.js → suggestion-menu.js}

@@ -45,12 +45,13 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
     }
     render() {
         return html `
-      <style>${SuggestionMenuStyles}</style>
-      <ul class="fw-formula-suggestion-menu" @mousedown=${(e) => e.preventDefault()}>
-        ${this.recommendations.map((recommendation, index) => html `<li
-              class="${this._currentFocusedIndex === index ? "selected" : ""}"
-              @click=${(e) => this.handleRecommendationSelect(index)}
-            >${this.recommendationLabels.get(recommendation) ?? recommendation}</li>`)}
+      <style>
+        ${SuggestionMenuStyles}
+      </style>
+      <ul class="fw-formula-suggestion-menu" @mousedown=${(_e) => _e.preventDefault()}>
+        ${this.recommendations.map((recommendation, index) => html `<li class="${this._currentFocusedIndex === index ? "selected" : ""}" @click=${(_e) => this.handleRecommendationSelect(index)}>
+              ${this.recommendationLabels.get(recommendation) ?? recommendation}
+            </li>`)}
       </ul>
     `;
     }

package/dist/{formula-editor/src/utils → utils}/constants.js

@@ -5,5 +5,5 @@ export const operatorPrecedence = {
     "/": 2,
     "*": 2,
     "+": 1,
-    "-": 1,
+    "-": 1
 };

package/dist/{formula-editor/src/utils → utils}/parser.js

@@ -1,10 +1,10 @@
-import Big from "big.js";
+import { mathematicalOperators, operatorPrecedence, unaryOperators } from "./constants.js";
+import { getFormulaTokens } from "./get-formula-tokens.js";
+import { Queue } from "./queue.js";
 import { Recommender } from "./recommendor.js";
 import { Stack } from "./stack.js";
-import { Queue } from "./queue.js";
+import Big from "big.js";
 import { Expectation } from "../types";
-import { operatorPrecedence, unaryOperators, mathematicalOperators } from "./constants.js";
-import { getFormulaTokens } from "./get-formula-tokens.js";
 export class Parser {
     constructor(variables, minSuggestionLen, formulaRegex = /[A-Za-z0-9_#@.]+|[-+(),*^/\s]/g, allowedNumbers = true, allowedOperators = mathematicalOperators, variableType = "") {
         this.variables = variables;
@@ -20,7 +20,7 @@ export class Parser {
         return !Number.isNaN(Number(value));
     }
     formatFormulaToken(token) {
-        for (let existingKey of this.variables.keys()) {
+        for (const existingKey of this.variables.keys()) {
             if (existingKey.toLowerCase() === token.toLowerCase()) {
                 return existingKey;
             }
@@ -38,7 +38,7 @@ export class Parser {
             recommendations: [],
             formattedString: "",
             newCursorPosition: prevCurPos ?? -1,
-            errorString: null,
+            errorString: null
         };
         if (!formula.trim() && recommendation) {
             parseOutput.formattedString = recommendation;
@@ -73,7 +73,6 @@ export class Parser {
                         recommendation = null;
                         return;
                     }
-                    ;
                     const updatedTokenLength = recommendation.length - token.length;
                     parseOutput.newCursorPosition = Math.min(parseOutput.newCursorPosition, formula.length) + updatedTokenLength;
                     token = recommendation;
@@ -84,8 +83,8 @@ export class Parser {
             /**
              * Error checks
              * skip error check if there is one already
-            */
-            if (expectation != Expectation.UNDEFINED) {
+             */
+            if (expectation !== Expectation.UNDEFINED) {
                 /**
                  * Unknown symbol/variable/word
                  */
@@ -101,33 +100,37 @@ export class Parser {
                     parseOutput.errorString = "Unexpected closing bracket. Make sure all opening brackets '(' have matching closing brackets ')'.";
                     expectation = Expectation.UNDEFINED;
                 }
+                else if (
                 /**
                  * Operator or ')' after an operator (Eg: '23 / *' or '23 / )')
                  * No error for Unary `+` and `-` as they might represent a positive or negative number respectively
                  */
-                else if (expectation === Expectation.VARIABLE && !isNumber && !isSpace && token != "("
-                    && !((unaryOperators.includes(token)) && (!parsedString.trim() || previousToken === "(" || this.allowedOperators.has(previousToken)))) {
-                    parseOutput.errorString = `Please use ${this.variableType} ${this.variableType && this.allowedNumbers ? " or " : ''} ${this.allowedNumbers ? "numbers" : ""} after '${previousToken}'.`;
+                expectation === Expectation.VARIABLE &&
+                    !isNumber &&
+                    !isSpace &&
+                    token !== "(" &&
+                    !(unaryOperators.includes(token) && (!parsedString.trim() || previousToken === "(" || this.allowedOperators.has(previousToken)))) {
+                    parseOutput.errorString = `Please use ${this.variableType} ${this.variableType && this.allowedNumbers ? " or " : ""} ${this.allowedNumbers ? "numbers" : ""} after '${previousToken}'.`;
                     expectation = Expectation.UNDEFINED;
                 }
-                /**
-                 * Multiple number/variable together without operator
-                 */
-                else if (expectation === Expectation.OPERATOR && !isOperator && !isSpace && token != ")") {
+                else if (expectation === Expectation.OPERATOR && !isOperator && !isSpace && token !== ")") {
+                    /**
+                     * Multiple number/variable together without operator
+                     */
                     parseOutput.errorString = `Please use mathematical operators (${Array.from(this.allowedOperators).join(" ")}) after '${previousToken}'.`;
                     expectation = Expectation.UNDEFINED;
                 }
-                /**
-                 * division by zero
-                 */
                 else if (isNumber && previousToken === "/" && (this.variables.get(token) === 0 || Number(token) === 0)) {
+                    /**
+                     * division by zero
+                     */
                     parseOutput.errorString = `Division by zero is not possible.`;
                     expectation = Expectation.UNDEFINED;
                 }
-                /**
-                 * Empty brackets
-                 */
                 else if (previousToken === "(" && token === ")") {
+                    /**
+                     * Empty brackets
+                     */
                     parseOutput.errorString = `Please don't use empty brackets ().`;
                     expectation = Expectation.UNDEFINED;
                 }
@@ -135,7 +138,7 @@ export class Parser {
             /**
              * Setting the expectation for the next token, if no error is there till now
              */
-            if (expectation != Expectation.UNDEFINED) {
+            if (expectation !== Expectation.UNDEFINED) {
                 if (token === "(" || isOperator) {
                     expectation = Expectation.VARIABLE;
                 }
@@ -178,7 +181,7 @@ export class Parser {
         let currentTokens = "";
         // Check if variables include unary operators `-` and `+`.
         for (const token of tokens) {
-            if ((unaryOperators.includes(token)) && (!currentTokens.trim() || previousToken === "(" || this.allowedOperators.has(previousToken))) {
+            if (unaryOperators.includes(token) && (!currentTokens.trim() || previousToken === "(" || this.allowedOperators.has(previousToken))) {
                 carriedToken = token;
             }
             else if (carriedToken) {
@@ -201,7 +204,7 @@ export class Parser {
                 operatorStack.push("(");
             }
             else if (token === ")") {
-                while (!operatorStack.isEmpty() && operatorStack.top() != "(") {
+                while (!operatorStack.isEmpty() && operatorStack.top() !== "(") {
                     outputQueue.enqueue(operatorStack.pop());
                 }
                 operatorStack.pop();
@@ -235,7 +238,7 @@ export class Parser {
             let parsedLeftExpression;
             let parsedRightExpression;
             // check if the symbol is a number or variable or unaryOperatorPreceded Variable
-            if (((unaryOperators.includes(symbol[0])) && this.variables.has(symbol.substring(1))) ||
+            if ((unaryOperators.includes(symbol[0]) && this.variables.has(symbol.substring(1))) ||
                 this.variables.has(symbol) ||
                 (!Number.isNaN(parseFloat(symbol)) && Number.isFinite(parseFloat(symbol)))) {
                 resultStack.push(symbol);
@@ -243,21 +246,14 @@ export class Parser {
             }
             // If symbol is an operator, check operatorStack, adds brackets accordingly to the result and add it to operatorStack
             else if (Object.keys(operatorPrecedence).includes(symbol)) {
-                const [rightExpression, leftExpression, operatorA, operatorB] = [
-                    resultStack.pop(),
-                    resultStack.pop(),
-                    operatorStack.pop(),
-                    operatorStack.pop(),
-                ];
-                if ((operatorPrecedence[operatorB] <= operatorPrecedence[symbol]) ||
-                    (operatorPrecedence[operatorB] === operatorPrecedence[symbol] && ["/", "-"].includes(symbol))) {
+                const [rightExpression, leftExpression, operatorA, operatorB] = [resultStack.pop(), resultStack.pop(), operatorStack.pop(), operatorStack.pop()];
+                if (operatorPrecedence[operatorB] <= operatorPrecedence[symbol] || (operatorPrecedence[operatorB] === operatorPrecedence[symbol] && ["/", "-"].includes(symbol))) {
                     parsedLeftExpression = `(${leftExpression})`;
                 }
                 else {
                     parsedLeftExpression = leftExpression;
                 }
-                if (operatorPrecedence[operatorA] <= operatorPrecedence[symbol] ||
-                    (operatorPrecedence[operatorA] === operatorPrecedence[symbol] && ["/", "-"].includes(symbol))) {
+                if (operatorPrecedence[operatorA] <= operatorPrecedence[symbol] || (operatorPrecedence[operatorA] === operatorPrecedence[symbol] && ["/", "-"].includes(symbol))) {
                     parsedRightExpression = `(${rightExpression})`;
                 }
                 else {
@@ -277,7 +273,7 @@ export class Parser {
         const formulaRPN = this.buildRPN(formula);
         const calculationResult = {
             result: undefined,
-            errorString: null,
+            errorString: null
         };
         if (!formulaRPN)
             return calculationResult;
@@ -287,7 +283,7 @@ export class Parser {
             if (!this.allowedOperators.has(frontItem)) {
                 const [sign, variableKey] = /^[+-]/.test(frontItem) ? [frontItem[0], frontItem.slice(1)] : ["", frontItem];
                 const operandValue = Number.parseFloat(this.variables.get(variableKey)?.toString() ?? variableKey);
-                const number = Number.parseFloat(sign + "1") * operandValue;
+                const number = Number.parseFloat(`${sign}1`) * operandValue;
                 calcStack.push(Big(number));
             }
             else {
@@ -321,7 +317,7 @@ export class Parser {
                     }
                 }
                 catch (error) {
-                    calculationResult.errorString = error;
+                    calculationResult.errorString = error instanceof Error ? error.message : "Unknown error during calculation";
                     return calculationResult;
                 }
             }
@@ -330,7 +326,8 @@ export class Parser {
             calculationResult.errorString = "Calculation error: Empty result stack";
             return calculationResult;
         }
-        calculationResult.result = parseFloat(calcStack.top().toString());
+        const topValue = calcStack.top();
+        calculationResult.result = topValue !== undefined ? parseFloat(topValue.toString()) : undefined;
         return calculationResult;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fw-components/formula-editor",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "A WYSIWYG type formula editor",
   "main": "dist/formula-editor/src/formula-editor.js",
   "exports": {
@@ -13,13 +13,12 @@
     "access": "public"
   },
   "scripts": {
-    "start": "es-dev-server --app-index ../../index.html --node-resolve --watch --open",
     "build": "tsc --composite false",
     "dev": "tsc -w --composite false",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@fw-components/styles": "^2.3.4",
+    "@fw-components/styles": "^2.4.0",
     "big.js": "6.2.2",
     "lit": "3.3.3",
     "match-sorter": "8.3.0"
@@ -35,5 +34,5 @@
     "es-dev-server": "2.1.0",
     "typescript": "5.9.3"
   },
-  "gitHead": "d3d4e7e2fbb77bfc5565100ab9487703f45d78cf"
+  "gitHead": "1aabc46174564e7c9f3046218744244a77568b54"
 }

package/tsconfig.json

@@ -1,20 +1,9 @@
 {
-    "compilerOptions": {
-      "experimentalDecorators": true,
-      "useDefineForClassFields":false,
-      "outDir": "./dist",
-      "rootDir": "../",
-      "target": "esnext",
-      "module": "esnext",
-      "moduleResolution": "node",
-      "declaration": true,
-      "declarationDir": "./dist/types",
-      "composite": false,
-      "lib": ["esnext", "dom"],
-      "esModuleInterop": true,
-      "skipLibCheck": true,
-      "noEmitOnError": false
-    },
-    "include": ["src/**/*.ts"],
-    "exclude": ["node_modules", "dist"]
-  }
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "./dist",
+    "allowJs": true
+  },
+  "include": ["src"]
+}