@fw-components/formula-editor 2.0.7-formula-editor.37 → 2.0.7-formula-editor.39

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

@@ -19,25 +19,23 @@ let FormulaEditor = class FormulaEditor extends LitElement {
         /**
          * Text area input value
          */
-        this.content = "";
+        this.formulaString = "";
         this.placeholder = "Type your formula...";
         this.recommendationLabels = new Map();
         this.variables = new Map();
         this.minSuggestionLen = 2;
         this.errorString = "";
-        this.formulaRegex = /'[^']*'|[A-Za-z0-9_#@]+|[-+(),*^/\s]/g;
         this.allowedNumbers = true;
-        this.allowedOperators = new Set(["^", "+", "-", "*", "/"]);
     }
     updated(_changedProperties) {
-        if (_changedProperties.has("content")) {
-            if (!this.content?.trim()) {
+        if (_changedProperties.has("formulaString")) {
+            if (!this.formulaString?.trim()) {
                 this.recommendations = Array.from(this.variables.keys());
             }
             this._adjustTextAreaHeight();
         }
         if (_changedProperties.has("variables")) {
-            this._parser = new Parser(this.variables, this.formulaRegex, this.allowedNumbers, this.allowedOperators, this.variableType, this.minSuggestionLen);
+            this._parser = new Parser(this.variables, this.minSuggestionLen, this.formulaRegex, this.allowedNumbers, this.allowedOperators, this.variableType);
             this.recommendations = Array.from(this.variables.keys());
         }
     }
@@ -47,11 +45,11 @@ let FormulaEditor = class FormulaEditor extends LitElement {
     handleContentUpdate(event) {
         event.preventDefault();
         this.lastInputType = event.inputType;
-        this.content = event.target.value;
+        this.formulaString = event.target.value;
         this.parseInput();
     }
     _adjustTextAreaHeight() {
-        if (!this.content)
+        if (!this.formulaString)
             this.editor.style.height = "var(--fe-height, 30px)";
         if (this.editor.scrollHeight > this.editor.clientHeight)
             this.editor.style.height = String(this.editor.scrollHeight + 5).concat("px");
@@ -63,9 +61,9 @@ let FormulaEditor = class FormulaEditor extends LitElement {
      */
     parseInput(recommendation = "") {
         this.currentCursorPosition = this.editor.selectionStart;
-        const parseOutput = this._parser.parseInput(this.content, this.currentCursorPosition, recommendation);
-        this.recommendations = parseOutput.recommendations;
-        this.errorString = parseOutput.errorString;
+        const { recommendations, errorString, formattedString, newCursorPosition } = this._parser.parseInput(this.formulaString, this.currentCursorPosition, recommendation);
+        this.recommendations = recommendations;
+        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.
@@ -74,11 +72,11 @@ let FormulaEditor = class FormulaEditor extends LitElement {
          * @see https://bugs.chromium.org/p/chromium/issues/detail?id=689541
          */
         if (this.lastInputType !== "insertCompositionText" || recommendation) {
-            this.content = parseOutput.formattedString;
+            this.formulaString = formattedString;
         }
         if (Boolean(recommendation)) {
             this.recommendations = [];
-            this.currentCursorPosition = parseOutput.newCursorPosition;
+            this.currentCursorPosition = newCursorPosition;
             /* update cursor position in text area */
             setTimeout(() => {
                 this.editor.setSelectionRange(this.currentCursorPosition, this.currentCursorPosition);
@@ -86,18 +84,19 @@ let FormulaEditor = class FormulaEditor extends LitElement {
         }
         this.dispatchEvent(new CustomEvent("fw-formula-content-changed", {
             detail: {
-                formulaString: this.content,
+                formulaString: this.formulaString,
                 error: this.errorString,
                 recommendations: this.recommendations,
-                formulaTokens: getFormulaTokens(this.content || "", this.formulaRegex)
+                formulaTokens: getFormulaTokens(this.formulaString || "", this.formulaRegex)
             },
             bubbles: true,
         }));
     }
     formatFormula() {
-        if (!this.content)
+        if (!this.formulaString)
             return;
-        this.content = this._parser.addParentheses(this.content) ?? this.content;
+        const newContent = this._parser.addParentheses(this.formulaString);
+        this.formulaString = newContent && newContent.length ? newContent : this.formulaString;
         this.parseInput();
         this.recommendations = [];
     }
@@ -131,12 +130,12 @@ let FormulaEditor = class FormulaEditor extends LitElement {
         return html `
       <style>${FormulaEditorStyles}</style>
 
-      ${this.label ? html `<label for="wysiwyg-editor" class="editor-label">${this.label}</label>` : ""}
+      ${this.label ? html `<label for="fw-formula-editor" class="editor-label">${this.label}</label>` : ""}
 
       <textarea
-        id="wysiwyg-editor"
+        id="fw-formula-editor"
         class=${this.errorString?.length ? "error" : ""}
-        .value=${this.content}
+        .value=${this.formulaString}
         .placeholder=${this.placeholder}
         spellcheck="false"
         autocomplete="off"
@@ -174,7 +173,7 @@ __decorate([
 ], FormulaEditor.prototype, "isFocused", void 0);
 __decorate([
     property()
-], FormulaEditor.prototype, "content", void 0);
+], FormulaEditor.prototype, "formulaString", void 0);
 __decorate([
     property()
 ], FormulaEditor.prototype, "placeholder", void 0);
@@ -187,6 +186,9 @@ __decorate([
 __decorate([
     property()
 ], FormulaEditor.prototype, "variables", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "variableType", void 0);
 __decorate([
     property()
 ], FormulaEditor.prototype, "minSuggestionLen", void 0);
@@ -203,10 +205,7 @@ __decorate([
     property()
 ], FormulaEditor.prototype, "allowedOperators", void 0);
 __decorate([
-    property()
-], FormulaEditor.prototype, "variableType", void 0);
-__decorate([
-    query("#wysiwyg-editor")
+    query("#fw-formula-editor")
 ], FormulaEditor.prototype, "editor", void 0);
 __decorate([
     query("suggestion-menu")

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

@@ -7,7 +7,7 @@ export const FormulaEditorStyles = css `
     margin-bottom: var(--fe-label-margin-bottom, 1px);
   }
 
-  #wysiwyg-editor {
+  #fw-formula-editor {
     display: block;
     resize: none;
     padding: var(--fe-padding, 4px);
@@ -26,13 +26,13 @@ export const FormulaEditorStyles = css `
     line-height: 1.5;
   }
 
-  #wysiwyg-editor:empty:before {
+  #fw-formula-editor:empty:before {
     content: attr(placeholder);
     color: var(--fe-placeholder-color, grey);
     pointer-events: none;
   }
 
-  #wysiwyg-editor.error {
+  #fw-formula-editor.error {
     text-decoration: underline;
     -webkit-text-decoration-style: wavy;
     text-decoration-style: wavy;

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

@@ -35,7 +35,7 @@ export const SuggestionMenuStyles = css `
 
   /* Scrollbar styling */
   ::-webkit-scrollbar {
-    width: 10px;
+    width: 7px;
   }
 
   ::-webkit-scrollbar-track {
@@ -50,9 +50,4 @@ export const SuggestionMenuStyles = css `
   ::-webkit-scrollbar-thumb:hover {
     background: #aaa;
   }
-
-  /* Optional shadow for the dropdown */
-  .content {
-    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
-  }
 `;

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

@@ -13,7 +13,7 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
         this.recommendations = [];
         this.recommendationLabels = new Map();
         this.onRecommendationClick = () => { };
-        this._selectedRecommendationIndex = -1;
+        this._currentFocusedIndex = -1;
     }
     scrollToSelectedRecommendation(index) {
         const listItem = this.suggestionList?.querySelectorAll("li")[index];
@@ -28,27 +28,27 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
     navigate(direction) {
         if (!this.recommendations?.length)
             return;
-        let newIndex = this._selectedRecommendationIndex;
+        let newIndex = this._currentFocusedIndex;
         if (direction === "down")
-            newIndex = (this._selectedRecommendationIndex + 1) % this.recommendations.length;
+            newIndex = (this._currentFocusedIndex + 1) % this.recommendations.length;
         else if (direction === "up")
-            newIndex = (this._selectedRecommendationIndex - 1 + this.recommendations.length) % this.recommendations.length;
-        this._selectedRecommendationIndex = newIndex;
+            newIndex = (this._currentFocusedIndex - 1 + this.recommendations.length) % this.recommendations.length;
+        this._currentFocusedIndex = newIndex;
         this.scrollToSelectedRecommendation(newIndex);
     }
-    handleRecommendationSelect(index = this._selectedRecommendationIndex) {
+    handleRecommendationSelect(index = this._currentFocusedIndex) {
         const recommendation = this.recommendations[index];
         if (!recommendation)
             return;
         this.onRecommendationClick(recommendation);
-        this._selectedRecommendationIndex = -1;
+        this._currentFocusedIndex = -1;
     }
     render() {
         return html `
       <style>${SuggestionMenuStyles}</style>
-      <ul class="wysiwyg-suggestion-menu" @mousedown=${(e) => e.preventDefault()}>
+      <ul class="fw-formula-suggestion-menu" @mousedown=${(e) => e.preventDefault()}>
         ${this.recommendations.map((recommendation, index) => html `<li
-              class="${this._selectedRecommendationIndex === index ? "selected" : ""}"
+              class="${this._currentFocusedIndex === index ? "selected" : ""}"
               @click=${(e) => this.handleRecommendationSelect(index)}
             >${this.recommendationLabels.get(recommendation) ?? recommendation}</li>`)}
       </ul>
@@ -66,9 +66,9 @@ __decorate([
 ], SuggestionMenu.prototype, "onRecommendationClick", void 0);
 __decorate([
     state()
-], SuggestionMenu.prototype, "_selectedRecommendationIndex", void 0);
+], SuggestionMenu.prototype, "_currentFocusedIndex", void 0);
 __decorate([
-    query(".wysiwyg-suggestion-menu")
+    query(".fw-formula-suggestion-menu")
 ], SuggestionMenu.prototype, "suggestionList", void 0);
 SuggestionMenu = __decorate([
     customElement("suggestion-menu")

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

@@ -4,14 +4,6 @@ export var Expectation;
     Expectation[Expectation["OPERATOR"] = 1] = "OPERATOR";
     Expectation[Expectation["UNDEFINED"] = 2] = "UNDEFINED";
 })(Expectation || (Expectation = {}));
-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;

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

@@ -3,10 +3,10 @@ import { Recommender } from "./recommendor.js";
 import { Stack } from "./stack.js";
 import { Queue } from "./queue.js";
 import { Expectation } from "../types";
-import { operatorPrecedence, unaryOperators } from "./constants.js";
+import { operatorPrecedence, unaryOperators, mathematicalOperators } from "./constants.js";
 import { getFormulaTokens } from "./get-formula-tokens.js";
 export class Parser {
-    constructor(variables, formulaRegex, allowedNumbers, allowedOperators, variableType, minSuggestionLen) {
+    constructor(variables, minSuggestionLen, formulaRegex = /[A-Za-z0-9_#@]+|[-+(),*^/\s]/g, allowedNumbers = true, allowedOperators = mathematicalOperators, variableType = "") {
         this.variables = variables;
         this.formulaRegex = formulaRegex;
         this._recommender = new Recommender(Array.from(this.variables.keys()), minSuggestionLen);

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

@@ -18,13 +18,10 @@ export class Queue {
     }
     peek() {
         if (this.isEmpty())
-            throw new Error("Cannot peek an empty queue");
+            return undefined;
         return this._elements[this._head];
     }
     isEmpty() {
         return this._head === this._tail;
     }
-    print() {
-        console.log(this._elements);
-    }
 }

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

@@ -1,14 +1,14 @@
 import { matchSorter } from "match-sorter";
 export class Recommender {
     constructor(variables, minSuggestionLen) {
-        this._minimumSuggestionLength = minSuggestionLen > 0 ? minSuggestionLen : 1;
+        this._wordLimitForSuggestions = minSuggestionLen > 0 ? minSuggestionLen : 1;
         this.variableList = variables;
     }
-    getRecommendations(word) {
-        if (word.length < this._minimumSuggestionLength)
+    getRecommendations(inputString) {
+        if (inputString.length < this._wordLimitForSuggestions)
             return [];
-        const recommendations = matchSorter(this.variableList, word);
-        if (recommendations.length === 0 || (recommendations.length === 1 && recommendations[0] === word))
+        const recommendations = matchSorter(this.variableList, inputString);
+        if (recommendations.length === 0)
             return [];
         return recommendations;
     }

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

@@ -14,7 +14,4 @@ export class Stack {
     isEmpty() {
         return this._elements.length === 0;
     }
-    print() {
-        console.log(this._elements);
-    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fw-components/formula-editor",
-  "version": "2.0.7-formula-editor.37",
+  "version": "2.0.7-formula-editor.39",
   "description": "A WYSIWYG type formula editor",
   "main": "dist/formula-editor/src/formula-editor.js",
   "exports": {
@@ -31,5 +31,5 @@
     "@types/big.js": "^6.1.6",
     "es-dev-server": "^2.1.0"
   },
-  "gitHead": "a9c51fbd40797afbd0fc3b65ee780656edb1114f"
+  "gitHead": "a3fb82b15d40e80873eaefdc8ab5b1d0ae13096c"
 }