@optionfactory/ful 0.45.0 → 0.47.0

package/dist/ful.iife.js

@@ -589,14 +589,14 @@ var ful = (function (exports) {
 
     class Fragments {
         static fromHtml(...html) {
-            const el = document.createElement('div');
+            const el = document.createElement("div");
             el.innerHTML = html.join("");
             const fragment = new DocumentFragment();
             fragment.append(...el.childNodes);
             return fragment;
         }
         static toHtml(fragment) {
-            var r = document.createElement("root");
+            var r = document.createElement("div");
             r.appendChild(fragment);
             return r.innerHTML;
         }
@@ -686,86 +686,85 @@ var ful = (function (exports) {
 
     const upgradeQueue = new UpgradeQueue();
 
-    class ParsedElement extends HTMLElement {
-        #parsed;
-        connectedCallback() {
-            if (this.#parsed) {
-                return;
-            }
-            if (this.ownerDocument.readyState === 'complete' || Nodes.isParsed(this)) {
-                upgradeQueue.enqueue(this);
-                return;
-            }
-            this.ownerDocument.addEventListener('DOMContentLoaded', () => {
-                observer.disconnect();
-                upgradeQueue.enqueue(this);
-            });
-            const observer = new MutationObserver(() => {
-                if (!Nodes.isParsed(this)) {
-                    return;
-                }
-                observer.disconnect();
-                upgradeQueue.enqueue(this);
-            });
-            observer.observe(this.parentNode, { childList: true, subtree: true });
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (!this.#parsed || oldValue === newValue) {
-                return;
-            }
-            this[name] = newValue;
-        }
-        upgrade() {
-            if (this.#parsed) {
-                return;
-            }
-            this.#parsed = true;
-            return this.ready();
-        }
-    }
-
-
-    const Templated = (SuperClass, template) => {
-        return class extends SuperClass {
-            async ready() {
-                const slotted = Slots.from(this);
-                const fragment = await Promise.resolve(this.render(slotted, template));
-                this.innerHTML = '';
-                if (fragment) {
-                    this.appendChild(fragment);
-                }
-            }
-        };
-    };
-
-    const Stateful = (SuperClass, flags, others) => {
+    const ParsedElement = (flags, others) => {
 
-        const all = [].concat(flags).concat(others || []);
+        const observed_flags = flags || [];
+        const observed_others = others || [];    
+        const observed = [].concat(observed_flags).concat(observed_others);
 
-        const k = class extends SuperClass {
+        const k = class extends HTMLElement {
             static get observedAttributes() {
-                return all;
+                return observed;
             }
+            #parsed;
+            #internals;
             constructor(...args) {
                 super(...args);
-                this.internals_ = this.internals_ || this.attachInternals();
+                this.#internals = this.attachInternals();
             }
+            get internals() {
+                return this.#internals;
+            }
+            connectedCallback() {
+                if (this.#parsed) {
+                    return;
+                }
+                if (this.ownerDocument.readyState === 'complete' || Nodes.isParsed(this)) {
+                    upgradeQueue.enqueue(this);
+                    return;
+                }
+                this.ownerDocument.addEventListener('DOMContentLoaded', () => {
+                    observer.disconnect();
+                    upgradeQueue.enqueue(this);
+                });
+                const observer = new MutationObserver(() => {
+                    if (!Nodes.isParsed(this)) {
+                        return;
+                    }
+                    observer.disconnect();
+                    upgradeQueue.enqueue(this);
+                });
+                observer.observe(this.parentNode, { childList: true, subtree: true });
+            }
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (!this.#parsed || oldValue === newValue) {
+                    return;
+                }
+                this[name] = newValue;
+            }
+            async upgrade() {
+                if (this.#parsed) {
+                    return;
+                }
+                this.#parsed = true;
+                await this.render();
+                for (const flag of observed_flags) {
+                    if(this.hasAttribute(flag)){
+                        this[flag] = true;
+                    }
+                }
+                for (const other of observed_others) {
+                    if(this.hasAttribute(other)){
+                        this[other] = this.getAttribute(other);
+                    }
+                }
+            }        
         };
 
-        for (const flag of flags) {
+        for (const flag of observed_flags) {
             Object.defineProperty(k.prototype, flag, {
                 enumerable: true,
                 configurable: true,
                 get() {
-                    return this.internals_.states.has(`--${flag}`);
+                    return this.internals.states.has(`--${flag}`);
                 },
                 set(value) {
                     //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
                     if (Attributes.asBoolean(value)) {
-                        this.internals_.states.add(`--${flag}`);
+                        this.internals.states.add(`--${flag}`);
                         return;
                     }
-                    this.internals_.states.delete(`--${flag}`);
+                    this.internals.states.delete(`--${flag}`);
                 }
             });
         }
@@ -842,12 +841,12 @@ var ful = (function (exports) {
         el.value = raw;
     }
 
-    class Form extends Templated(ParsedElement) {
+    class Form extends ParsedElement() {
         static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
         static SCROLL_OFFSET = 50;
-        render(slotted) {
+        render() {
             const form = document.createElement('form');
-            form.append(slotted.default);
+            form.replaceChildren(...this.childNodes);
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 this.spinner(true);
@@ -865,7 +864,7 @@ var ful = (function (exports) {
                     this.spinner(false);
                 }
             });
-            return form;
+            this.replaceChildren(form);
         }
         spinner(spin) {
             this.querySelectorAll('ful-spinner').forEach(el => el.hidden = !spin);
@@ -893,7 +892,7 @@ var ful = (function (exports) {
             const globalErrors = es.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
             this.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
             this.querySelectorAll("ful-errors").forEach(el => {
-                el.innerHTML = '';
+                el.replaceChildren();
                 el.setAttribute('hidden', '');
             });
             fieldErrors.forEach((e) => {
@@ -926,7 +925,7 @@ var ful = (function (exports) {
 
     });
 
-    const ful_input_template_ = globalThis.ful_input_template || ftl.Template.fromHtml(`
+    const template$1 = globalThis.ful_input_template || ftl.Template.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>
@@ -938,31 +937,34 @@ var ful = (function (exports) {
     <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
 `, ful_input_ec);
 
-    class StatelessInput extends Templated(ParsedElement, ful_input_template_) {
-        render(slotted, template) {
-            const input = this.input = slotted.input = slotted.input || (() => {
-                const el = document.createElement("input");
-                el.classList.add("form-control");
-                return el;
-            })();
-            input.setAttribute('ful-validation-target', '');
+    const renderInput = (el) => {
+        const slotted = Slots.from(el);
+
+        const input = el.input = slotted.input = slotted.input || (() => {
+            const el = document.createElement("input");
+            el.classList.add("form-control");
+            return el;
+        })();
+        input.setAttribute('ful-validation-target', '');
+
+        const id = input.getAttribute('id') || el.getAttribute('input-id') || Attributes.uid('ful-input');
+        Attributes.forward('input-', el, slotted.input);
+        Attributes.defaultValue(slotted.input, "id", id);
+        Attributes.defaultValue(slotted.input, "type", "text");
+        Attributes.defaultValue(slotted.input, "placeholder", " ");
+        const name = el.getAttribute('name');
+        template$1.renderTo(el, { id, name, slotted });
+    };
 
-            const id = input.getAttribute('id') || this.getAttribute('input-id') || Attributes.uid('ful-input');
-            Attributes.forward('input-', this, slotted.input);
-            Attributes.defaultValue(slotted.input, "id", id);
-            Attributes.defaultValue(slotted.input, "type", "text");
-            Attributes.defaultValue(slotted.input, "placeholder", " ");
-            const name = this.getAttribute('name');
-            return template.render({ id, name, slotted });
+    class StatelessInput extends ParsedElement() {
+        render() {
+            renderInput(this);
         }
-
     }
 
-    class Input extends Stateful(StatelessInput, [], ['value']) {
-        render(slotted, template) {
-            const fragment = super.render(slotted, template);
-            this.input.value = this.getAttribute('value');
-            return fragment;
+    class Input extends ParsedElement([], ['value']) {
+        render() {
+            renderInput(this);
         }
         get value() {
             return this.input.value;
@@ -994,12 +996,14 @@ var ful = (function (exports) {
 `, ful_select_ec);
 
 
-    class Select extends Stateful(Templated(ParsedElement, ful_select_template_), [], ["value"]) {
+    class Select extends ParsedElement([], ["value"]) {
         constructor(tsConfig) {
             super();
             this.tsConfig = tsConfig;
         }
-        render(slotted, template) {
+        render() {
+            const slotted = Slots.from(this);
+
             const type = this.getAttribute("type") || 'local';
             const remote = type != 'local';
             const loadOnce = this.getAttribute('load') != 'always';
@@ -1027,7 +1031,6 @@ var ful = (function (exports) {
                 }
             };
 
-
             this._remote = remote;
             // we need to await this load in setValue when remote is configured and the option
             // is not loaded yet.
@@ -1042,7 +1045,7 @@ var ful = (function (exports) {
                 const type = query && query.hasOwnProperty('byId') ? 'id' : 'query';
                 const qvalue = type === 'id' ? query.byId : query;
                 const data = await (this.loader ? this.loader(qvalue, type) : []);
-                if(type !== 'id'){
+                if (type !== 'id') {
                     this.loaded = true;
                 }
                 callback(data);
@@ -1056,12 +1059,12 @@ var ful = (function (exports) {
             } : {}, tsDefaultConfig, this.tsConfig));
             //we remove the input to move it
             input.remove();
-            return template.render({ id, tsId, name, input, slotted });
+            ful_select_template_.renderTo(this, { id, tsId, name, input, slotted });
         }
         set value(v) {
             (async () => {
-                if(this._remote){
-                    await this._unwrappedRemoteLoad({byId: v}, this.ts.loadCallback.bind(this.ts));
+                if (this._remote) {
+                    await this._unwrappedRemoteLoad({ byId: v }, this.ts.loadCallback.bind(this.ts));
                 }
                 this.ts.setValue(v);
             })();
@@ -1098,8 +1101,9 @@ var ful = (function (exports) {
 `, ful_radiogroup_ec);
 
 
-    class RadioGroup extends Stateful(Templated(ParsedElement, ful_radiougroup_template_), ['disabled'], ['value']) {
-        render(slotted, template) {        
+    class RadioGroup extends ParsedElement(['disabled'], ['value']) {
+        render() {
+            const slotted = Slots.from(this);
             const name = this.getAttribute('name') || Attributes.uid('ful-radiogroup');
             const radioEls = Array.from(slotted.default.querySelectorAll('ful-radio'));
             const inputsAndLabels = radioEls.map(el => {
@@ -1114,19 +1118,18 @@ var ful = (function (exports) {
                 return [input, label];
             });
             radioEls.forEach(el => el.remove());
-            
-            const fragment = template.render({
+
+            ful_radiougroup_template_.renderTo(this, {
                 name: name,
                 slotted: slotted,
                 inputsAndLabels: inputsAndLabels
             });
-            return fragment;
         }
         get value() {
             const checked = this.querySelector('input[type=radio]:checked');
             return checked ? checked.value : null;
         }
-        set value(value){
+        set value(value) {
             this.querySelector(`input[type=radio][value=${CSS.escape(value)}]`).checked = true;
         }
     }
@@ -1135,7 +1138,7 @@ var ful = (function (exports) {
 
     });
 
-    const ful_spinner_template_ = globalThis.ful_spinner_template || ftl.Template.fromHtml(`
+    const template = globalThis.ful_spinner_template || ftl.Template.fromHtml(`
     <div class="ful-spinner-wrapper">
         <div class="ful-spinner-text">{{{{ slotted.default }}}}</div>
         <div class="ful-spinner-icon"></div>
@@ -1143,9 +1146,10 @@ var ful = (function (exports) {
 `, ful_spinner_ec);
 
 
-    class Spinner extends Templated(ParsedElement, ful_spinner_template_) {
-        render(slotted, template) {
-            return template.render({ slotted });
+    class Spinner extends ParsedElement() {
+        render() {
+            const slotted = Slots.from(this);
+            template.renderTo(this, { slotted });
         }
     }
 
@@ -1251,10 +1255,8 @@ var ful = (function (exports) {
     exports.SessionStorage = SessionStorage;
     exports.Slots = Slots;
     exports.Spinner = Spinner;
-    exports.Stateful = Stateful;
     exports.StatelessInput = StatelessInput;
     exports.SyncEvent = SyncEvent;
-    exports.Templated = Templated;
     exports.VersionedStorage = VersionedStorage;
     exports.Wizard = Wizard;
     exports.jsonPatch = jsonPatch;