Improved workbench's formulas' MVC, Added utils, Fixed missing file

Update strings.json, compile.bat, and 6 more files...

compile.bat

@@ -69,8 +69,8 @@ echo -----------------------------
 echo Cleaning...
 pushd %CD%
 cd %~dp0\tools\items\formula-wizard\src\
-del *.js
+del *.js 2>nul
-del *.map
+del *.map 2>nul
 popd
 
 :formula-wizard-compile
@@ -84,14 +84,15 @@ popd
 echo Fixing imports...
 pushd %CD%
 cd %~dp0\tools\items\formula-wizard\src\
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js" "decimal" "decimal.min.mjs"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "decimal" "decimal.min.mjs"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js" "lang" "lang.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "lang" "lang.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js" "formulas" "formulas.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "formulas" "formulas.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js" "units" "units.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "units" "units.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js" "ui_catalog" "ui_catalog.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "ui_catalog" "ui_catalog.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js" "mvc_context" "mvc_context.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "mvc_context" "mvc_context.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js" "sets" "sets.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "sets" "sets.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js" "mvc_formula" "mvc_formula.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "mvc_formula" "mvc_formula.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "utils_templates" "utils_templates.js"
 popd
 
 :formula-wizard-bundle
@@ -113,6 +114,7 @@ call "%~dp0node_modules\.bin\terser" ui_catalog.js -c -m --toplevel -o ui_catalo
 call "%~dp0node_modules\.bin\terser" mvc_context.js -c -m --toplevel -o mvc_context.min.js
 call "%~dp0node_modules\.bin\terser" sets.js -c -m --toplevel -o sets.min.js
 call "%~dp0node_modules\.bin\terser" mvc_formula.js -c -m --toplevel -o mvc_formula.min.js
+call "%~dp0node_modules\.bin\terser" utils_templates.js -c -m --toplevel -o utils_templates.min.js
 call "%~dp0node_modules\.bin\terser" formula-wizard.js -c -m --toplevel -o formula-wizard.min.js
 popd
 

tools/items/formula-wizard/page.php

@@ -212,7 +212,6 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
 	</div>
 </template>
 
-
 <div class="m-s mt-xs">
 	<div class=" border r-s bkgd-grid w-full">
 		<div class="border border-t-0 border-l-0 border-r-0">

tools/items/formula-wizard/src/lang.ts

@@ -1,4 +1,4 @@
-// TODO: Move into a common lib with parameter support !
+// TODO: Move into a common lib with parameter support!
 
 export const langKey= document.documentElement.lang.match("(en|fr)") ? document.documentElement.lang : "en";
 

tools/items/formula-wizard/src/main.ts

@@ -1,5 +1,5 @@
 /*!
- *  Formula Wizard v0.0.3
+ *  NibblePoker - Formula Wizard
  *  [Short desc here]
  *  https://github.com/aziascreations/Web-NibblePoker
  *  Copyright (c) 2023 Herwin Bozet <herwin.bozet@gmail.com>
@@ -7,7 +7,7 @@
  */
 
 // Preparing some things before the import statements.
-const version = [0, 0, 2];
+const version = [0, 0, 3];
 console.log("Initializing 'Formula Wizard v" + version.join(".") + "'...");
 const startTime = new Date().getMilliseconds();
 
@@ -27,7 +27,7 @@ Decimal.set({ precision: 25, rounding: 8 });
 initUnits();
 initFormulas();
 
-// Preparing the UI
+// Preparing the UI & MVC stuff
 initCatalog();
 setupWorkbenchContext();
 setupWorkbenchFormula();
@@ -35,6 +35,8 @@ setupWorkbenchFormula();
 // ???
 
 // Tests
-console.log(localize("joe.mama"));
 console.log(units);
 console.log(formulas);
+
+const endTime = new Date().getMilliseconds();
+console.log("Done, took " + (endTime - startTime) + "ms !");

tools/items/formula-wizard/src/mvc_formula.ts

@@ -3,11 +3,12 @@
  *  [Short desc here]
  *  https://github.com/aziascreations/Web-NibblePoker
  *  Copyright (c) 2023 Herwin Bozet <herwin.bozet@gmail.com>
- *  Unlicense Licence
  */
 
 import {localize} from "./lang";
 import {isCatalogInitialized, catalogFormulas} from "./ui_catalog";
+import {FormulaValue, FormulaVariant} from "./formulas";
+import {retrieveTemplate, makeElementFromFragment, appendToAllIds} from "./utils_templates";
 
 // -----------
 //  Constants
@@ -18,6 +19,17 @@ const ID_TEMPLATE_FORMULA_VALUE = ID_TEMPLATE_FORMULA + "-value";
 
 const ID_FORMULA_PREFIX = "fw-workbench-formula-";
 const ID_FORMULA_SPAWN_POINT = ID_FORMULA_PREFIX + "spawn";
+const ID_FORMULA_NAME = ID_FORMULA_PREFIX + "name";
+const ID_FORMULA_INPUTS = ID_FORMULA_PREFIX + "inputs";
+const ID_FORMULA_OUTPUTS = ID_FORMULA_PREFIX + "outputs";
+
+const ID_FORMULA_VALUE_PREFIX = ID_FORMULA_PREFIX + "value-";
+const ID_FORMULA_VALUE_ID = ID_FORMULA_VALUE_PREFIX + "id";
+const ID_FORMULA_VALUE_NAME = ID_FORMULA_VALUE_PREFIX + "name";
+const ID_FORMULA_VALUE_LINK = ID_FORMULA_VALUE_PREFIX + "link";
+const ID_FORMULA_VALUE_TEST_VALUE = ID_FORMULA_VALUE_PREFIX + "test-value";
+const ID_FORMULA_VALUE_TEST_SCALE = ID_FORMULA_VALUE_PREFIX + "test-scale";
+const ID_FORMULA_VALUE_TEST_VALUE_SET = ID_FORMULA_VALUE_PREFIX + "test-value-set";
 
 //const idWorkbenchFormulaPrefix = "fw-workbench-formula-";
 //const idWorkbenchFormulaSpawnPoint = idWorkbenchFormulaPrefix + "spawn";
@@ -40,12 +52,14 @@ const ID_FORMULA_SPAWN_POINT = ID_FORMULA_PREFIX + "spawn";
 //const idFormulaValueTestValueSet = idFormulaValuePrefix + "test-value-set";
 
 
+
+
 // ---------
 //  Globals
 // ---------
 
-let eTemplateWorkbenchFormula: HTMLElement | DocumentFragment | null = null;
+let eTemplateWorkbenchFormula: DocumentFragment | null = null;
-let eTemplateWorkbenchFormulaValue: HTMLElement | DocumentFragment | null = null;
+let eTemplateWorkbenchFormulaValue: DocumentFragment | null = null;
 
 export let workbenchFormulas: WorkbenchFormula[] = [];
 
@@ -56,12 +70,30 @@ export let workbenchFormulas: WorkbenchFormula[] = [];
 
 function deleteWorkbenchFormula(deletedFormula: WorkbenchFormula, removeDom: boolean = true) {
     workbenchFormulas = workbenchFormulas.filter(item => item !== deletedFormula);
-    //if(removeDom) {
+    if(removeDom) {
-    //    //deletedFormula.uiElement
+        deletedFormula.uiElement.eRootElement.remove();
-    //}
+    }
-    //if(workbenchContextComponents.length < 1) {
+}
-    //    eContextStatusMessage!.hidden = false;
+
-    //}
+function handleCatalogInsertion(formulaVariant: FormulaVariant, eSpawnPointAnchor: HTMLAnchorElement) {
+    console.group("Adding new formula to workbench...");
+
+    console.debug("Instantiating 'WorkbenchFormula'...");
+    const newWorkbenchFormula = new WorkbenchFormula(
+        eTemplateWorkbenchFormula as DocumentFragment,
+        eTemplateWorkbenchFormulaValue as DocumentFragment,
+        formulaVariant
+    );
+
+    console.debug("Registering controller...");
+    workbenchFormulas.push(newWorkbenchFormula);
+
+    console.debug("Adding to workbench's DOM...");
+    eSpawnPointAnchor!.parentNode!.insertBefore(newWorkbenchFormula.uiElement.eRootElement, eSpawnPointAnchor);
+
+    console.debug(newWorkbenchFormula);
+
+    console.groupEnd();
 }
 
 // --------------------
@@ -76,29 +108,90 @@ enum EWorkbenchFormulaValueTypes {
 
 class WorkbenchFormulaValueData {
     id: string;
+    valueType: EWorkbenchFormulaValueTypes
+    formulaValue: FormulaValue;
 
-    constructor(controllerId: string) {
+    constructor(controllerId: string, valueType: EWorkbenchFormulaValueTypes, formulaValue: FormulaValue) {
         this.id = controllerId;
+        this.valueType = valueType;
+        this.formulaValue = formulaValue;
     }
 }
 
 class WorkbenchFormulaValueInterface {
+    public eRootElement: HTMLElement;
 
+    private readonly eFormulaValueId: HTMLInputElement;
+    private readonly eFormulaValueName: HTMLParagraphElement;
+    private readonly eFormulaValueLink: HTMLSelectElement;
+    private readonly eFormulaValueTestValue: HTMLInputElement;
+    private readonly eFormulaValueTestScale: HTMLSelectElement;
+    private readonly eFormulaValueTestValueSet: HTMLInputElement;
+
+    constructor(eRootFragment: DocumentFragment, setupValueType: EWorkbenchFormulaValueTypes) {
+        this.eRootElement = makeElementFromFragment(eRootFragment);
+
+        // Grabbing references to all the form's fields.
+        this.eFormulaValueId = this.eRootElement.querySelector(`input#${ID_FORMULA_VALUE_ID}`)!;
+        this.eFormulaValueName = this.eRootElement.querySelector(`p#${ID_FORMULA_VALUE_NAME}`)!;
+        this.eFormulaValueLink = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_LINK}`)!;
+        this.eFormulaValueTestValue = this.eRootElement.querySelector(`input#${ID_FORMULA_VALUE_TEST_VALUE}`)!;
+        this.eFormulaValueTestScale = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_TEST_SCALE}`)!;
+        this.eFormulaValueTestValueSet = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_TEST_VALUE_SET}`)!;
+
+        if([this.eFormulaValueId, this.eFormulaValueName, this.eFormulaValueLink, this.eFormulaValueTestValue,
+            this.eFormulaValueTestScale, this.eFormulaValueTestValueSet].some((item) => item === null)) {
+            alert("error.ui.formula.value.missingElement");
+            throw Error("error.ui.formula.value.missingElement");
+        }
+
+        //// Adding the relevant scale factors.
+        //populateScaleSelectForUnit(this.formulaValue.unit, this.eFormulaValueTestScale, this.formulaValue.scaleFactor);
+
+        //if(setupValueType === EWorkbenchFormulaValueTypes.INPUT) {
+        //    this.setupInput();
+        //} else {
+        //    this.setupOutput();
+        //}
+    }
+
+    toggleField(eFormField: HTMLElement, hidden: boolean) {
+        // We hide the parent "tr" element.
+        (eFormField.parentNode!.parentNode! as HTMLElement).hidden = hidden;
+    }
+
+    private setupInput() {
+        this.toggleField(this.eFormulaValueId, true);
+        this.eFormulaValueTestValue.value = "0";
+        //this.eFormulaValueTestValue.onchange = this.onTestFieldChange.bind(this);
+        //this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
+    }
+
+    private setupOutput() {
+        this.toggleField(this.eFormulaValueLink, true);
+        //this.eFormulaValueTestValue.readOnly = true;
+        //this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
+    }
+
+    setName(newName: string) {
+        this.eFormulaValueName.innerText = newName;
+    }
 }
 
 class WorkbenchFormulaValue {
-    uiElement: WorkbenchFormulaValueInterface;
     data: WorkbenchFormulaValueData;
+    uiElement: WorkbenchFormulaValueInterface;
 
-    constructor(uiElement: WorkbenchFormulaValueInterface, data: WorkbenchFormulaValueData) {
+    constructor(eRootFragment: DocumentFragment, valueType: EWorkbenchFormulaValueTypes,
-        this.uiElement = uiElement;
+                parentAssignedControllerId: string, formulaValue: FormulaValue) {
-        this.data = data;
+        this.data = new WorkbenchFormulaValueData(parentAssignedControllerId, valueType, formulaValue);
+        this.uiElement = new WorkbenchFormulaValueInterface(eRootFragment, valueType);
+
+        this.setName(`${this.data.formulaValue.unit.name} (${this.data.formulaValue.unit.symbol})`);
     }
 
-    public static createNew(eRootElement: HTMLElement): WorkbenchFormulaValue {
+    setName(newName: string) {
-        const id: string = Date.now().toString();
+        this.uiElement.setName(newName);
-
-        return null!;
     }
 }
 
@@ -109,29 +202,88 @@ class WorkbenchFormulaValue {
 
 class WorkbenchFormulaData {
     id: string;
+    formulaVariant: FormulaVariant;
 
-    constructor(controllerId: string) {
+    constructor(controllerId: string, formulaVariant: FormulaVariant) {
         this.id = controllerId;
+        this.formulaVariant = formulaVariant;
     }
 }
 
 class WorkbenchFormulaInterface {
+    public eRootElement: HTMLElement;
 
+    private readonly eTitle: HTMLParagraphElement;
+    public readonly eInputsContainer: HTMLDivElement;
+    public readonly eOutputsContainer: HTMLDivElement;
+
+    constructor(eRootFragment: DocumentFragment) {
+        this.eRootElement = makeElementFromFragment(eRootFragment);
+
+        this.eTitle = this.eRootElement.querySelector(`p#${ID_FORMULA_NAME}`)!;
+        this.eInputsContainer = this.eRootElement.querySelector(`div#${ID_FORMULA_INPUTS}`)!;
+        this.eOutputsContainer = this.eRootElement.querySelector(`div#${ID_FORMULA_OUTPUTS}`)!;
+
+        if([this.eTitle, this.eInputsContainer, this.eOutputsContainer].some((item) => item === null)) {
+            alert(localize("error.ui.formula.missingElement"));
+            throw Error(localize("error.ui.formula.missingElement"));
+        }
+    }
+
+    setTitle(newTitle: string) {
+        this.eTitle.innerText = newTitle;
+    }
 }
 
 class WorkbenchFormula {
     uiElement: WorkbenchFormulaInterface;
     data: WorkbenchFormulaData;
 
-    constructor(uiElement: WorkbenchFormulaInterface, data: WorkbenchFormulaData) {
+    inputControllers: WorkbenchFormulaValue[];
-        this.uiElement = uiElement;
+    outputControllers: WorkbenchFormulaValue[];
-        this.data = data;
-    }
 
-    public static createNew(eRootElement: HTMLElement): WorkbenchFormula {
+    constructor(fragRootElement: DocumentFragment, fragValueElement: DocumentFragment, formulaVariant: FormulaVariant) {
         const id: string = Date.now().toString();
 
-        return null!;
+        // Preparing core MVC components.
+        this.uiElement = new WorkbenchFormulaInterface(fragRootElement);
+        this.data = new WorkbenchFormulaData(id, formulaVariant);
+
+        // Preparing children MVC components.
+        let valueIdSuffix = 0;
+        this.inputControllers = this.data.formulaVariant.getInputValuesDefinition().map(
+            inputFormulaValue => new WorkbenchFormulaValue(
+                fragValueElement,
+                EWorkbenchFormulaValueTypes.INPUT,
+                this.data.id + (valueIdSuffix++).toString(),
+                inputFormulaValue
+            )
+        );
+        this.outputControllers = [this.data.formulaVariant.getOutputValueDefinition()].map(
+            outputFormulaValue => new WorkbenchFormulaValue(
+                fragValueElement,
+                EWorkbenchFormulaValueTypes.OUTPUT,
+                this.data.id + (valueIdSuffix++).toString(),
+                outputFormulaValue
+            )
+        );
+
+        // Preparing the interface...
+        this.setTitle(this.data.formulaVariant.parentFormula.name);
+
+        // Adding the value elements into their proper container.
+        this.inputControllers.every(inputController =>
+            this.uiElement.eInputsContainer.appendChild(inputController.uiElement.eRootElement));
+        this.outputControllers.every(outputController =>
+            this.uiElement.eOutputsContainer.appendChild(outputController.uiElement.eRootElement));
+
+        // Finalizing the interface by making its IDs unique.
+        // This is purely a UX thing to ensure proper input selection via the labels.
+        appendToAllIds(this.uiElement.eRootElement, this.data.id);
+    }
+
+    public setTitle(newTitle: string) {
+        this.uiElement.setTitle(newTitle);
     }
 }
 
@@ -153,16 +305,9 @@ export function setupWorkbenchFormula() {
             throw Error(localize("error.ui.workbench.catalog.no-init"));
         }
 
-        console.debug("Grabbing & processing the templates from the DOM...");
+        console.debug("Grabbing, processing & removing the templates from the DOM...");
-        eTemplateWorkbenchFormula = document.getElementById(ID_TEMPLATE_FORMULA);
+        eTemplateWorkbenchFormula = retrieveTemplate(ID_TEMPLATE_FORMULA, true);
-        eTemplateWorkbenchFormulaValue = document.getElementById(ID_TEMPLATE_FORMULA_VALUE);
+        eTemplateWorkbenchFormulaValue = retrieveTemplate(ID_TEMPLATE_FORMULA_VALUE, true);
-        if(eTemplateWorkbenchFormula === null || eTemplateWorkbenchFormulaValue === null) {
-            console.groupEnd();
-            alert(localize("error.ui.workbench.noTemplate"));
-            throw Error(localize("error.ui.workbench.noTemplate"));
-        }
-        eTemplateWorkbenchFormula = (eTemplateWorkbenchFormula.cloneNode(true) as HTMLTemplateElement).content;
-        eTemplateWorkbenchFormulaValue = (eTemplateWorkbenchFormulaValue.cloneNode(true) as HTMLTemplateElement).content;
 
         console.debug("Grabbing the anchor point for new formulas...");
         const eWorkbenchFormulaSpawnPoint: HTMLAnchorElement | null = document.querySelector(`a#${ID_FORMULA_SPAWN_POINT}`);
@@ -172,10 +317,16 @@ export function setupWorkbenchFormula() {
             throw Error(localize("error.ui.workbench.noAnchor"));
         }
 
-        // catalogFormulas
+        console.debug("Preparing the catalog's buttons actions & inserting them in the DOM");
-
+        catalogFormulas.forEach(catalogFormula => {
-
+            for(let iVariant = 0; iVariant < catalogFormula.formula.variants.length; iVariant++) {
+                catalogFormula.eVariantButtons[iVariant].onclick = function (){
+                    handleCatalogInsertion(catalogFormula.formula.variants[iVariant], eWorkbenchFormulaSpawnPoint);
+                }
+            }
 
+            catalogFormula.insertIntoCategories();
+        });
 
         isWorkbenchFormulaSetup = true;
 

tools/items/formula-wizard/src/tsconfig.json

@@ -0,0 +1,127 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig to read more about this file */
+		
+		/* Projects */
+		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+		
+		/* Language and Environment */
+		"target": "es2019",
+		/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+		// "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		// "jsx": "preserve",                                /* Specify what JSX code is generated. */
+		// "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+		// "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+		// "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+		
+		/* Modules */
+		"module": "ES6",
+		/* Specify what module code is generated. */
+		"rootDir": "./",
+		/* Specify the root folder within your source files. */
+		// "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+		// "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+		// "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+		// "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+		// "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+		// "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+		// "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+		// "resolveJsonModule": true,                        /* Enable importing .json files. */
+		// "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+		// "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+		
+		/* JavaScript Support */
+		// "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+		// "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+		
+		/* Emit */
+		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+		"sourceMap": true,
+		/* Create source map files for emitted JavaScript files. */
+		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+		//"outFile": "./formula-wizard.js",                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+		"removeComments": true,
+		/* Disable emitting comments. */
+		// "noEmit": true,                                   /* Disable emitting files from a compilation. */
+		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+		// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
+		// "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+		// "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+		// "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+		
+		/* Interop Constraints */
+		// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+		// "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+		// "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+		"esModuleInterop": true,
+		/* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+		"forceConsistentCasingInFileNames": true,
+		/* Ensure that casing is correct in imports. */
+		
+		/* Type Checking */
+		"strict": true,
+		/* Enable all strict type-checking options. */
+		"noImplicitAny": true,
+		/* Enable error reporting for expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+		"noImplicitThis": true,
+		/* Enable error reporting when 'this' is given the type 'any'. */
+		// "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+		"alwaysStrict": true,
+		/* Ensure 'use strict' is always emitted. */
+		// "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+		
+		/* Completeness */
+		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+		"skipLibCheck": true
+		/* Skip type checking all .d.ts files. */
+	},
+	"files": [
+		"./main.ts"
+	],
+	"exclude": [
+		"../../../../resources/DecimalJs/10.4.3"
+	]
+}

tools/items/formula-wizard/src/utils_templates.ts

@@ -0,0 +1,63 @@
+// TODO: Move into a common lib at some point !
+
+import {localize} from "./lang";
+
+/**
+ * Retrieves a `template` element from the current document and returns it while optionally removing it from the DOM.
+ * @param templateId
+ * @param removeFromDocument
+ */
+export function retrieveTemplate(templateId: string, removeFromDocument: boolean): DocumentFragment {
+    const retrievedTemplate = document.querySelector(`template#${templateId}`);
+
+    if(retrievedTemplate === null) {
+        alert(localize("error.templatator.template.404"));
+        throw Error(localize("error.templatator.template.404"));
+    }
+
+    const templateFragment = (retrievedTemplate.cloneNode(true) as HTMLTemplateElement).content;
+
+    if(removeFromDocument) {
+        retrievedTemplate.remove();
+    }
+
+    return templateFragment;
+}
+
+/**
+ * Converts a given `DocumentFragment` in a cloned `HTMLElement` that can be manipulated and inserted back into the DOM.
+ * @param fragment
+ */
+export function makeElementFromFragment(fragment: DocumentFragment): HTMLElement {
+    return (fragment.cloneNode(true) as DocumentFragment).firstElementChild as HTMLElement;
+}
+
+export function wipeAllIds(eRootElement: HTMLElement, doLabels: boolean = true): void {
+    eRootElement.querySelectorAll(`*`).forEach(eElement => {
+        if(eElement.hasAttribute("id")) {
+            eElement.removeAttribute("id");
+        }
+    });
+    if(doLabels) {
+        eRootElement.querySelectorAll(`label`).forEach(eLabel => {
+            if (eLabel.hasAttribute("for")) {
+                eLabel.removeAttribute("for");
+            }
+        });
+    }
+}
+
+export function appendToAllIds(eRootElement: HTMLElement, newIdSuffix: string, doLabels: boolean = true): void {
+    eRootElement.querySelectorAll(`input, select, p, div`).forEach(eElement => {
+        if(eElement.hasAttribute("id")) {
+            eElement.setAttribute("id", eElement.getAttribute("id") + newIdSuffix);
+        }
+    });
+    if(doLabels) {
+        eRootElement.querySelectorAll(`label`).forEach(eLabel => {
+            if(eLabel.hasAttribute("for")) {
+                eLabel.setAttribute("for", eLabel.getAttribute("for") + newIdSuffix);
+            }
+        });
+    }
+}