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

package/dist/styles/src/button-styles.js

@@ -0,0 +1,419 @@
+import { html } from 'lit';
+export const UnderlinedButtonStyles = html `
+  <style>
+    .primary-text-underlined {
+      font-family: var(--theme-font);
+      border: none;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--primary-color, #205081);
+      padding: 0;
+      margin: 0;
+      border-radius: 0;
+      min-width: max-content;
+      text-transform: none;
+      border-bottom: 1px solid rgba(var(--secondary-color-rgb), 0.3);
+    }
+
+    .secondary-text-underlined {
+      font-family: var(--theme-font);
+      border: none;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--secondary-color, #515151);
+      margin: 0;
+      padding: 0;
+      border-radius: 0;
+      min-width: max-content;
+      text-transform: none;
+      border-bottom: 1px solid rgba(var(--secondary-color-rgb), 0.3);
+    }
+  </style>
+`;
+export const TextButtonStyles = html `
+  <style>
+    .primary-text-button {
+      font-family: var(--theme-font);
+      border: none;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--primary-color, #205081);
+      padding: 0 8px;
+      min-width: 64px;
+      height: var(--button-height, 36px);
+      margin: 0;
+      text-transform: none;
+    }
+
+    .secondary-text-button {
+      font-family: var(--theme-font);
+      border: none;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--secondary-color, #515151);
+      padding: 0 8px;
+      min-width: 64px;
+      margin: 0;
+      height: var(--button-height, 36px);
+      text-transform: none;
+    }
+
+    .primary-text-button:hover {
+      font-weight: bold;
+    }
+
+    .secondary-text-button:hover {
+      font-weight: bold;
+    }
+
+    .primary-text-button[disabled], .secondary-text-button[disabled] {
+        opacity: 0.5;
+    }
+  </style>
+`;
+export const PrimaryButtonStyles = html `
+  <style>
+    .primary-outlined {
+      font-family: var(--theme-font);
+      border: 1px solid var(--primary-color, #205081);
+      border-radius: 5px;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--secondary-color, #515151);
+      padding: 0 var(--button-padding, 16px);
+      min-width: 64px;
+      margin: 0;
+      height: var(--button-height, 36px);
+      text-transform: none;
+    }
+    .primary-outlined:hover {
+      background-color: var(--primary-color, #205081);
+      color: var(--light-color, #fff);
+    }
+    .primary-colored {
+      font-family: var(--theme-font);
+      background-color: var(--primary-color, #205081);
+      border-radius: 5px;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--light-color, #fff);
+      margin: 0;
+      padding: 0 var(--button-padding, 16px);
+      min-width: 64px;
+      height: var(--button-height, 36px);
+      text-transform: none;
+    }
+    .primary-colored:hover {
+      box-shadow: 0 1px 2px 1px var(--primary-color, #205081);
+    }
+    .primary-outlined[disabled], .primary-colored[disabled] {
+        opacity: 0.5;
+    }
+  </style>
+`;
+export const SecondaryButtonStyles = html `
+  <style>
+    .secondary-outlined {
+      font-family: var(--theme-font);
+      border: 1px solid rgba(var(--secondary-color-rgb), 0.3);
+      border-radius: 5px;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--secondary-color, #515151);
+      padding: 0 var(--button-padding, 16px);
+      margin: 0;
+      min-width: 64px;
+      height: var(--button-height, 36px);
+      text-transform: none;
+    }
+
+    .secondary-outlined:hover {
+      background-color: var(--secondary-color, #515151);
+      color: var(--light-color, #fff);
+    }
+
+    .secondary-colored {
+      font-family: var(--theme-font);
+      background-color: var(--secondary-color, #515151);
+      border-radius: 5px;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--light-color, #fff);
+      padding: 0 var(--button-padding, 16px);
+      margin: 0;
+      min-width: 64px;
+      height: var(--button-height, 36px);
+      text-transform: none;
+    }
+
+    .secondary-colored:hover {
+      box-shadow: 0 1px 2px 1px var(--secondary-color, #515151);
+    }
+
+    .secondary-outlined[disabled], .secondary-colored[disabled] {
+        opacity: 0.5;
+    }
+  </style>
+`;
+export const AlertButtonStyles = html `
+  <style>
+    .alert-outlined {
+      font-family: var(--theme-font);
+      border: 1px solid var(--error-color);
+      border-radius: 5px;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--error-color, #d50000);
+      padding: 0 var(--button-padding, 16px);
+      margin: 0;
+      min-width: 64px;
+      height: var(--button-height, 36px);
+      text-transform: none;
+    }
+
+    .alert-outlined:hover {
+      background-color: var(--error-color-l1, #db4437);
+      color: var(--light-color, #fff);
+    }
+
+    .alert-colored {
+      font-family: var(--theme-font);
+      background-color: var(--error-color, #d50000);
+      border-radius: 5px;
+      font-size: var(--secondary-font-size, 16px);
+      color: var(--light-color, #fff);
+      padding: 0 var(--button-padding, 16px);
+      margin: 0;
+      min-width: 64px;
+      height: var(--button-height, 36px);
+      text-transform: none;
+    }
+
+    .alert-colored:hover {
+      box-shadow: 0 1px 2px 1px var(--error-color, #d50000);
+    }
+
+    .alert-outlined[disabled], .alert-colored[disabled] {
+        opacity: 0.5;
+    }
+  </style>
+`;
+export const ToggleButtonStyles = html `
+  <style>
+    .toggle-group {
+      display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;
+    }
+
+    .toggle-group .toggle:first-child{
+      border-top-left-radius: 5px; border-bottom-left-radius: 5px;
+    }
+    .toggle-group .toggle:last-child{
+      border-top-right-radius: 5px; border-bottom-right-radius: 5px;
+    }
+
+    .toggle {
+      text-transform: none;
+      margin: 0px;
+      border-radius: 0px;
+      background-color: transparent;
+      border: 1px solid var(--secondary-color-l3);
+      color: var(--secondary-color);
+      font-size: var(--secondary-font-size, 16px);
+      font-family: var(--theme-font);
+      display: flex;
+      justify-content: space-around;
+      min-width: 64px;
+      align-items: center;
+    }
+
+    .toggle.small {
+      height: 30px;
+      font-size: var(--tertiary-font-size, 14px);
+    }
+
+    .toggle:hover {
+      box-shadow: 0 1px 2px 1px rgba(var(--secondary-color-rgb), 0.1);
+    }
+
+    .selected-toggle {
+      background-color: var(--secondary-color);
+      color: var(--light-color, #fff);
+    }
+
+    .toggle iron-icon{
+      --iron-icon-height: var(--body-font-size, 16px);
+      margin-right: 5px;
+    }
+
+    .toggle mwc-icon{
+      --mdc-icon-size: var(--body-font-size, 16px);
+      margin-right: 5px;
+    }
+  </style>
+`;
+export const FabStyles = html `
+  <style>
+    paper-fab {
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      bottom: 3%;
+      right: 2%;
+    }
+
+    paper-fab[disabled], .fab[disabled] {
+        opacity: 0.5;
+    }
+
+    .fab {
+      font-size: var(--secondary-font-size, 16px);
+      position: fixed;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      bottom: 3%;
+      right: 2%;
+      box-shadow: var(--paper-material-elevation-2_-_box-shadow);
+      font-family: var(--theme-font);
+    }
+
+    .colored-fab {
+      background-color: var(--secondary-color, #515151);
+      --iron-icon-height: var(--h2-font-size, 26px);
+      --iron-icon-width: var(--h2-font-size, 26px);
+      color: var(--light-color, #fff);
+    }
+
+    .light-colored-fab {
+      background-color: var(--light-color, #fff);
+      --iron-icon-height: var(--h2-font-size, 20px);
+      --iron-icon-width: var(--h2-font-size, 20px);
+      color: var(--secondary-color);
+      /* --iron-icon-stroke-color: var(--secondary-color); */
+    }
+
+    .light-colored-fab:hover,
+    .colored-fab:hover {
+      box-shadow: var(--paper-material-elevation-3_-_box-shadow);
+      font-weight: bold;
+    }
+
+    .rectangular-fab {
+      height:  var(--rectangular-fab-height, 50px);
+      width: var(--rectangular-fab-width, 120px);
+      border-radius:  var(--rectangular-fab-height, 50px);
+      padding: var(--rectangular-fab-padding, 0px);
+      max-height: var(--rectangular-fab-max-height, 50px);
+      z-index:  var(--rectangular-fab-z-index, 1);
+    }
+    .small-fab {
+      height: 50px;
+      width: 50px;
+      padding: 5px;
+    }
+    @media all and (max-width: 767px) {
+      .rectangular-fab {
+        height: var(--rectangular-fab-height, 40px);
+        width: var(--rectangular-fab-width, 120px);
+        border-radius: 50px;
+        padding: 0;
+        --fab-icon-height: 40px;
+      }
+    }
+  </style>
+`;
+export const ButtonSpinnerStyles = html `
+  <style>
+    .colored-bt-spinner {
+      width: 18px;
+      height: 18px;
+      --paper-spinner-color: var(--light-color, #fff);
+      --paper-spinner-stroke-width: 3px;
+      margin-right: 8px;
+    }
+
+    .secondary-outlined-bt-spinner {
+      width: 18px;
+      height: 18px;
+      --paper-spinner-color: var(--secondary-color, #fff);
+      --paper-spinner-stroke-width: 3px;
+      margin-right: 8px;
+    }
+
+    .primary-outlined-bt-spinner {
+      width: 18px;
+      height: 18px;
+      --paper-spinner-color: var(--primary-color, #fff);
+      --paper-spinner-stroke-width: 3px;
+      margin-right: 8px;
+    }
+
+    .button-prefix-icon {
+      --iron-icon-height: var(--body-font-size, 16px);
+      --mdc-icon-size: var(--body-font-size, 16px);
+      margin-right: 5px;
+    }
+  </style>
+`;
+export const SmallButtonStyles = html `
+  <style>
+    .small-button {
+      height: 25px !important;
+      width: auto !important;
+      padding: 0px !important;
+      font-size: var(--tertiary-font-size) !important;
+    }
+    @media all and (max-width: 767px) {
+      .small-button{
+        height: 20px !important;
+      }
+    }
+  </style>
+`;
+export const PaperToggleButtonStyles = html `
+  <custom-style>
+    <style>
+      paper-toggle-button {
+        font-family: var(--theme-font);
+        cursor: pointer;
+        --paper-toggle-button-checked-button: {
+          height: 15px;
+          width: 50%;
+          border-radius: 0;
+          bottom: 2px;
+          box-shadow: none;
+          border-bottom-right-radius : 8px;
+          border-top-right-radius: 8px;
+        }
+        --paper-toggle-button-unchecked-button: {
+          height: 15px;
+          width: 50%;
+          border-radius: 0;
+          bottom: 2px;
+          box-shadow: none;
+          border-bottom-left-radius : 8px;
+          border-top-left-radius: 8px;
+        }
+        --paper-toggle-button-unchecked-bar: {
+          height: 15px;
+          bottom: 2px;
+          box-shadow: none;
+        }
+        --paper-toggle-button-checked-bar: {
+          height: 15px;
+          bottom: 2px;
+          box-shadow: none;
+        }
+        --paper-toggle-button-label-color: var(--secondary-color);
+        align-items: flex-start;
+      }
+
+      paper-toggle-button.primary-colored {
+        --paper-toggle-button-unchecked-bar-color: var(--secondary-color-l1);
+        --paper-toggle-button-unchecked-button-color:  var(--secondary-color-l1);
+        --paper-toggle-button-checked-bar-color:  var(--primary-color-l1);
+        --paper-toggle-button-checked-button-color:  var(--primary-color);
+      }
+
+      paper-toggle-button.secondary-colored {
+        --paper-toggle-button-unchecked-bar-color: var(--secondary-color-l2);
+        --paper-toggle-button-unchecked-button-color:  var(--secondary-color-l2);
+        --paper-toggle-button-checked-bar-color:  var(--secondary-color-l1);
+        --paper-toggle-button-checked-button-color:  var(--secondary-color);
+      }
+    </style>
+  </custom-style>
+`;

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@fw-components/formula-editor",
-  "version": "2.0.3-formula-editor.1",
-  "type": "module",
+  "version": "2.0.7-formula-editor.0",
   "description": "A WYSIWYG type formula editor",
-  "main": "dist/src/formula-builder.js",
+  "main": "dist/formula-editor/src/formula-builder.js",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "start": "es-dev-server --app-index ../../index.html --node-resolve --watch --open"
+    "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.0.3-formula-editor.1",
+    "@fw-components/styles": "^2.0.7-formula-editor.0",
     "big.js": "^6.2.1",
     "lit": "^2.1.2",
     "typescript": "^5.0.4"
@@ -22,5 +24,5 @@
     "@types/big.js": "^6.1.6",
     "es-dev-server": "^2.1.0"
   },
-  "gitHead": "f0c8eaf674cdbc6d104fcedb36ddbb6036af40db"
+  "gitHead": "05f8378db753ed6edfd56b945162795de33ae0fe"
 }

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "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"]
+  }

package/src/cursor.ts

@@ -1,134 +0,0 @@
-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: any): number {
-    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: number, element: any) {
-    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: any, chars: any, range: any) {
-    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: any, parentElement: any) {
-    while (node !== null) {
-      if (node === parentElement) {
-        return true;
-      }
-      node = node.parentNode;
-    }
-
-    return false;
-  }
-
-  static getCaretPosition(shadowRoot: ShadowRoot, element: HTMLElement) {
-    // `getSelection` is not defined for the type ShadowRoot in TS,
-    // but it does exist.
-    const range = (shadowRoot as any).getSelection()!.getRangeAt(0);
-    const prefix = range.cloneRange();
-    prefix.selectNodeContents(element);
-    prefix.setEnd(range.endContainer, range.endOffset);
-    return prefix.toString().length;
-  }
-
-  static setCaretPosition = (pos: any, parent: any) => {
-    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: ShadowRoot) {
-    return (shadowRoot as any)
-      .getSelection()
-      ?.getRangeAt(0)
-      ?.getClientRects()[0];
-  }
-}