@optionfactory/ful 0.47.0 → 0.48.0

package/dist/ful.iife.js

@@ -668,6 +668,38 @@ var ful = (function (exports) {
         }
     }
 
+    class TemplateRegistry {
+        #idToFragment = {};
+        #idToTemplate = {};
+        #ec;
+        put(k, fragment) {
+            if (this.#ec) {
+                this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec);
+                return;
+            }
+            this.#idToFragment[k] = fragment;
+        }
+        get(k) {
+            if (!this.#ec) {
+                throw new Error("evaluationContext is not configured");
+            }
+            const tpl = this.#idToTemplate[k];
+            if (!tpl) {
+                throw new Error(`missing template: '${k}'`);
+            }
+            return tpl;
+        }
+        configure(ec) {
+            this.#ec = ec;
+            for (const [k, fragment] of Object.entries(this.#idToFragment)) {
+                delete this.#idToFragment[k];
+                this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec);
+            }
+        }
+    }
+
+    const templates = new TemplateRegistry();
+
     class UpgradeQueue {
         #q = [];
         constructor() {
@@ -921,11 +953,7 @@ var ful = (function (exports) {
         }
     }
 
-    const ful_input_ec = globalThis.ec || ftl.EvaluationContext.configure({
-
-    });
-
-    const template$1 = globalThis.ful_input_template || ftl.Template.fromHtml(`
+    templates.put('ful-input', Fragments.fromHtml(`
     <label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
     <div class="input-group">
         <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
@@ -935,11 +963,10 @@ var ful = (function (exports) {
         <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
     </div>
     <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
-`, ful_input_ec);
+`));
 
-    const renderInput = (el) => {
-        const slotted = Slots.from(el);
 
+    const makeInputFragment = (el, slotted) => {
         const input = el.input = slotted.input = slotted.input || (() => {
             const el = document.createElement("input");
             el.classList.add("form-control");
@@ -953,18 +980,14 @@ var ful = (function (exports) {
         Attributes.defaultValue(slotted.input, "type", "text");
         Attributes.defaultValue(slotted.input, "placeholder", " ");
         const name = el.getAttribute('name');
-        template$1.renderTo(el, { id, name, slotted });
+        return templates.get('ful-input').render(el, { id, name, slotted });
     };
 
-    class StatelessInput extends ParsedElement() {
-        render() {
-            renderInput(this);
-        }
-    }
-
     class Input extends ParsedElement([], ['value']) {
         render() {
-            renderInput(this);
+            const slotted = Slots.from(el);
+            const fragment = makeInputFragment(this, slotted);
+            this.replaceChildren(fragment);
         }
         get value() {
             return this.input.value;
@@ -978,11 +1001,8 @@ var ful = (function (exports) {
      * <script src="tom-select.complete.js"></script>
      * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
      */
-    const ful_select_ec = globalThis.ec || ftl.EvaluationContext.configure({
-
-    });
 
-    const ful_select_template_ = globalThis.ful_select_template || ftl.Template.fromHtml(`
+    templates.put('ful-select', Fragments.fromHtml(`
     <label data-tpl-for="tsId" class="form-label">{{{{ slotted.default }}}}</label>
     {{{{ input }}}}
     <div class="input-group">
@@ -993,7 +1013,7 @@ var ful = (function (exports) {
         <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
     </div>
     <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
-`, ful_select_ec);
+`));
 
 
     class Select extends ParsedElement([], ["value"]) {
@@ -1059,7 +1079,7 @@ var ful = (function (exports) {
             } : {}, tsDefaultConfig, this.tsConfig));
             //we remove the input to move it
             input.remove();
-            ful_select_template_.renderTo(this, { id, tsId, name, input, slotted });
+            templates.get('ful-select').renderTo(this, { id, tsId, name, input, slotted });
         }
         set value(v) {
             (async () => {
@@ -1075,11 +1095,7 @@ var ful = (function (exports) {
         }
     }
 
-    const ful_radiogroup_ec = globalThis.ec || ftl.EvaluationContext.configure({
-
-    });
-
-    const ful_radiougroup_template_ = globalThis.ful_radiogroup_template || ftl.Template.fromHtml(`
+    templates.put('ful-radio-group', Fragments.fromHtml(`
     <fieldset>
         <legend class="form-label">
             {{{{ slotted.default }}}}
@@ -1098,7 +1114,7 @@ var ful = (function (exports) {
             {{{{ slotted.footer }}}}
         </footer>
     </fieldset>
-`, ful_radiogroup_ec);
+`));
 
 
     class RadioGroup extends ParsedElement(['disabled'], ['value']) {
@@ -1118,8 +1134,7 @@ var ful = (function (exports) {
                 return [input, label];
             });
             radioEls.forEach(el => el.remove());
-
-            ful_radiougroup_template_.renderTo(this, {
+            templates.get('ful-radio-group').renderTo(this, {
                 name: name,
                 slotted: slotted,
                 inputsAndLabels: inputsAndLabels
@@ -1134,22 +1149,17 @@ var ful = (function (exports) {
         }
     }
 
-    const ful_spinner_ec = globalThis.ec || ftl.EvaluationContext.configure({
-
-    });
-
-    const template = globalThis.ful_spinner_template || ftl.Template.fromHtml(`
+    templates.put('ful-spinner', Fragments.fromHtml(`
     <div class="ful-spinner-wrapper">
         <div class="ful-spinner-text">{{{{ slotted.default }}}}</div>
         <div class="ful-spinner-icon"></div>
     </div>
-`, ful_spinner_ec);
-
+`));
 
     class Spinner extends ParsedElement() {
         render() {
             const slotted = Slots.from(this);
-            template.renderTo(this, { slotted });
+            templates.get('ful-spinner').renderTo(this, { slotted });
         }
     }
 
@@ -1226,7 +1236,8 @@ var ful = (function (exports) {
     }
 
     class CustomElements {
-        static configure() {
+        static configure(ec) {
+            templates.configure(ec);
             customElements.define('ful-spinner', Spinner);
             customElements.define('ful-input', Input);
             customElements.define('ful-radio-group', RadioGroup);
@@ -1255,14 +1266,16 @@ var ful = (function (exports) {
     exports.SessionStorage = SessionStorage;
     exports.Slots = Slots;
     exports.Spinner = Spinner;
-    exports.StatelessInput = StatelessInput;
     exports.SyncEvent = SyncEvent;
+    exports.TemplateRegistry = TemplateRegistry;
     exports.VersionedStorage = VersionedStorage;
     exports.Wizard = Wizard;
     exports.jsonPatch = jsonPatch;
     exports.jsonPost = jsonPost;
     exports.jsonPut = jsonPut;
     exports.jsonRequest = jsonRequest;
+    exports.makeInputFragment = makeInputFragment;
+    exports.templates = templates;
     exports.timing = timing;
 
     Object.defineProperty(exports, '__esModule', { value: true });