@optionfactory/ful 0.42.0 → 0.44.0

package/dist/ful.mjs

@@ -557,16 +557,41 @@ const timing = {
     }
 };
 
+// SyncEvent.on($0, 'asd', async e => { await ful.timing.sleep(10_000); return 3; })
+// const [success, results] = await new SyncEvent("asd").dispatchTo($0);
+class SyncEvent extends CustomEvent {
+    #results;
+    constructor(type, options) {
+        super(type, options);
+        this.#results = [];
+    }
+
+    async dispatchTo(el) {
+        // unlike "native" events, which are fired by the browser and invoke 
+        // event handlers asynchronously via the event loop, dispatchEvent() 
+        // invokes event handlers synchronously. 
+        // see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
+        const success = el.dispatchEvent(this);
+        const results = await Promise.all(this.#results);
+        return [success, results];
+    }
+
+    static on(el, type, h, useCapture) {
+        el.addEventListener(type, e => {
+            //e *must* be an async event
+            e.#results.push(h(e));
+        }, useCapture);
+    }
+}
+
 class Fragments {
     static fromHtml(...html) {
         const el = document.createElement('div');
         el.innerHTML = html.join("");
         const fragment = new DocumentFragment();
-        Array.from(el.childNodes).forEach(node => {
-            fragment.appendChild(node);
-        });
+        fragment.append(...el.childNodes);
         return fragment;
-    }    
+    }
     static toHtml(fragment) {
         var r = document.createElement("root");
         r.appendChild(fragment);
@@ -574,17 +599,12 @@ class Fragments {
     }
     static from(...nodes) {
         const fragment = new DocumentFragment();
-        for (let i = 0; i !== nodes.length; ++i) {
-            fragment.appendChild(nodes[i]);
-        }
+        fragment.append(...nodes);
         return fragment;
     }
     static fromChildNodes(el) {
-        const nodes = Array.from(el.childNodes);
         const fragment = new DocumentFragment();
-        for (let i = 0; i !== nodes.length; ++i) {
-            fragment.appendChild(nodes[i]);
-        }
+        fragment.append(...el.childNodes);
         return fragment;
     }
 }
@@ -634,20 +654,85 @@ class Slots {
     }
 }
 
-const Templated = (SuperClass, template) => {
-    return class extends SuperClass {
-        #rendered;
-        async connectedCallback() {
-            if (this.#rendered) {
+class Nodes {
+    static isParsed(el) {
+        for (var c = el; c; c = c.parentNode) {
+            if (c.nextSibling) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+
+class UpgradeQueue {
+    #q = [];
+    constructor() {
+        document.addEventListener('DOMContentLoaded', this.dequeue.bind(this));
+    }
+    enqueue(el) {
+        if (!this.#q.length) {
+            requestAnimationFrame(this.dequeue.bind(this));
+        }
+        this.#q.push(el);
+    }
+    dequeue() {
+        this.#q.splice(0).forEach(el => el.upgrade());
+    }
+}
+
+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;
+        const method = this[`on${name.charAt(0).toUpperCase()}${name.substr(1).toLowerCase()}Changed`];
+        method?.call(this, newValue, oldValue);
+    }
+    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);
             }
-            this.#rendered = true;
         }
     };
 };
@@ -656,40 +741,35 @@ const Stateful = (SuperClass, flags, others) => {
 
     const all = [].concat(flags).concat(others || []);
 
-    return class extends SuperClass {
+    const k = class extends SuperClass {
         static get observedAttributes() {
             return all;
         }
         constructor(...args) {
             super(...args);
             this.internals_ = this.internals_ || this.attachInternals();
-            for (const flag of flags) {
-                Object.defineProperty(this, flag, {
-                    get() {
-                        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.setAttribute(flag, '');
-                            return;
-                        }
-                        this.internals_.states.delete(`--${flag}`);
-                        this.removeAttribute(flag);
-                    }
-                });
-            }
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue === newValue) {
-                return;
-            }
-            this[name] = newValue;
-            const method = this[`on${name.charAt(0).toUpperCase()}${name.substr(1).toLowerCase()}Changed`];
-            method?.call(this, newValue, oldValue);
         }
     };
+
+    for (const flag of flags) {
+        Object.defineProperty(k.prototype, flag, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                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}`);
+                    return;
+                }
+                this.internals_.states.delete(`--${flag}`);
+            }
+        });
+    }
+
+    return k;
 };
 
 /* global Infinity, CSS */
@@ -706,10 +786,65 @@ function flatten(obj, prefix) {
     }, {});
 }
 
-class Form extends Templated(HTMLElement) {
-    static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
+function providePath(result, path, value) {
+    const keys = path.split(".").map((k) => k.match(/^[0-9]+$/) ? +k : k);
+    let current = result;
+    let previous = null;
+    for (let i = 0; ; ++i) {
+        const ckey = keys[i];
+        const pkey = keys[i - 1];
+        if (Number.isInteger(ckey) && !Array.isArray(current)) {
+            if (previous !== null) {
+                previous[pkey] = current = [];
+            } else {
+                result = current = [];
+            }
+        }
+        if (i === keys.length - 1) {
+            //when value is undefined we only want to define the property if it's not defined 
+            current[ckey] = value !== undefined ? value : (ckey in current ? current[ckey] : null);
+            return result;
+        }
+        if (current[ckey] === undefined) {
+            current[ckey] = {};
+        }
+        previous = current;
+        current = current[ckey];
+    }
+}
 
-    render(slotted, template) {
+function extract(el) {
+    if (el.getAttribute('type') === 'radio') {
+        if (!el.checked) {
+            return undefined;
+        }
+        return el.dataset['fulBindType'] === 'boolean' ? el.value === 'true' : el.value;
+    }
+    if (el.getAttribute('type') === 'checkbox') {
+        return el.checked;
+    }
+    if (el.dataset['fulBindType'] === 'boolean') {
+        return !el.value ? null : el.value === 'true';
+    }
+    return el.value || null;
+}
+
+function mutate(el, raw) {
+    if (el.getAttribute('type') === 'radio') {
+        el.checked = el.getAttribute('value') === raw;
+        return;
+    }
+    if (el.getAttribute('type') === 'checkbox') {
+        el.checked = raw;
+        return;
+    }
+    el.value = raw;
+}
+
+class Form extends Templated(ParsedElement) {
+    static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
+    static SCROLL_OFFSET = 50;
+    render(slotted) {
         const form = document.createElement('form');
         form.append(slotted.default);
         form.addEventListener('submit', async (e) => {
@@ -717,11 +852,11 @@ class Form extends Templated(HTMLElement) {
             this.spinner(true);
             try {
                 if (this.submitter) {
-                    await this.submitter(this.getValues(), this);
+                    await this.submitter(this.values, this);
                 }
             } catch (e) {
                 if (e instanceof Failure) {
-                    this.setErrors(e.problems);
+                    this.errors = e.problems;
                     return;
                 }
                 throw e;
@@ -732,21 +867,15 @@ class Form extends Templated(HTMLElement) {
         return form;
     }
     spinner(spin) {
-        this.querySelectorAll('ful-spinner').forEach(el => {
-            el.hidden = !spin;
-        });
-        this.querySelectorAll('[type=submit],[type=reset]').forEach(el => {
-            el.disabled = spin;
-        });
+        this.querySelectorAll('ful-spinner').forEach(el => el.hidden = !spin);
+        this.querySelectorAll('[type=submit],[type=reset]').forEach(el => el.disabled = spin);
     }
-    setValues(values) {
-        for (const [flattenedKey, value] of Object.entries(flatten(values, ''))) {
-            Array.from(this.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)).forEach((el) => {
-                Form.mutate(el, value);
-            });
+    set values(vs) {
+        for (const [flattenedKey, value] of Object.entries(flatten(vs, ''))) {
+            this.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`).forEach(el => mutate(el, value));
         }
     }
-    getValues() {
+    get values() {
         return Array.from(this.querySelectorAll('[name]'))
             .filter((el) => {
                 if (el.dataset['fulBindInclude'] === 'never') {
@@ -755,29 +884,30 @@ class Form extends Templated(HTMLElement) {
                 return el.dataset['fulBindInclude'] === 'always' || el.closest(Form.IGNORED_CHILDREN_SELECTOR) === null;
             })
             .reduce((result, el) => {
-                return Form.providePath(result, el.getAttribute('name'), Form.extract(el));
+                return providePath(result, el.getAttribute('name'), extract(el));
             }, {});
     }
-    setErrors(errors) {
-        this.clearErrors();
-        errors
-            .filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
-            .forEach((e) => {
-                const name = e.context.replace("[", ".").replace("].", ".");
-                this.querySelectorAll(`[name='${CSS.escape(name)}'] [ful-validation-target],[name='${CSS.escape(name)}']:not(:has([ful-validation-target]))`)
-                    .forEach(input => input.classList.add('is-invalid'));
-                this.querySelectorAll(`ful-field-error[field='${CSS.escape(name)}']`)
-                    .forEach(el => el.innerText = e.reason);
-            });
-        this.querySelectorAll("ful-errors")
-            .forEach(el => {
-                const globalErrors = errors.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
-                el.innerHTML = globalErrors.map(e => e.reason).join("\n");
-                if (globalErrors.length !== 0) {
-                    el.removeAttribute('hidden');
-                }
-            });
-
+    set errors(es) {
+        const fieldErrors = es.filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT');
+        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.setAttribute('hidden', '');
+        });
+        fieldErrors.forEach((e) => {
+            const name = e.context.replace("[", ".").replace("].", ".");
+            const validationTargetsSelector = `[name='${CSS.escape(name)}'] [ful-validation-target],[name='${CSS.escape(name)}']:not(:has([ful-validation-target]))`;
+            this.querySelectorAll(validationTargetsSelector).forEach(input => input.classList.add('is-invalid'));
+            const fieldErrorsSelector = `ful-field-error[field='${CSS.escape(name)}']`;
+            this.querySelectorAll(fieldErrorsSelector).forEach(el => el.innerText = e.reason);
+        });
+        this.querySelectorAll("ful-errors").forEach(el => {
+            el.innerText = globalErrors.map(e => e.reason).join("\n");
+            if (globalErrors.length !== 0) {
+                el.removeAttribute('hidden');
+            }
+        });
         if (!this.hasAttribute('scroll-on-error')) {
             return;
         }
@@ -786,69 +916,7 @@ class Form extends Templated(HTMLElement) {
             .map(el => el.getBoundingClientRect().y + window.scrollY);
         const miny = Math.min(...ys);
         if (miny !== Infinity) {
-            window.scroll(window.scrollX, miny > 100 ? miny - 100 : 0);
-        }
-    }
-    clearErrors() {
-        this.querySelectorAll('.is-invalid')
-            .forEach(el => el.classList.remove('is-invalid'));
-        this.querySelectorAll("ful-errors")
-            .forEach(el => {
-                el.innerHTML = '';
-                el.setAttribute('hidden', '');
-            });
-    }
-    static extract(el) {
-        if (el.getAttribute('type') === 'radio') {
-            if (!el.checked) {
-                return undefined;
-            }
-            return el.dataset['fulBindType'] === 'boolean' ? el.value === 'true' : el.value;
-        }
-        if (el.getAttribute('type') === 'checkbox') {
-            return el.checked;
-        }
-        if (el.dataset['fulBindType'] === 'boolean') {
-            return !el.value ? null : el.value === 'true';
-        }
-        return el.value || null;
-    }
-    static mutate(el, raw) {
-        if (el.getAttribute('type') === 'radio') {
-            el.checked = el.getAttribute('value') === raw;
-            return;
-        }
-        if (el.getAttribute('type') === 'checkbox') {
-            el.checked = raw;
-            return;
-        }
-        el.value = raw;
-    }
-
-    static providePath(result, path, value) {
-        const keys = path.split(".").map((k) => k.match(/^[0-9]+$/) ? +k : k);
-        let current = result;
-        let previous = null;
-        for (let i = 0; ; ++i) {
-            const ckey = keys[i];
-            const pkey = keys[i - 1];
-            if (Number.isInteger(ckey) && !Array.isArray(current)) {
-                if (previous !== null) {
-                    previous[pkey] = current = [];
-                } else {
-                    result = current = [];
-                }
-            }
-            if (i === keys.length - 1) {
-                //when value is undefined we only want to define the property if it's not defined 
-                current[ckey] = value !== undefined ? value : (ckey in current ? current[ckey] : null);
-                return result;
-            }
-            if (current[ckey] === undefined) {
-                current[ckey] = {};
-            }
-            previous = current;
-            current = current[ckey];
+            window.scroll(window.scrollX, miny > Form.SCROLL_OFFSET ? miny - Form.SCROLL_OFFSET : 0);
         }
     }
     static configure() {
@@ -872,7 +940,7 @@ const ful_input_template_ = globalThis.ful_input_template || ftl.Template.fromHt
     <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
 `, ful_input_ec);
 
-class StatelessInput extends Templated(HTMLElement, ful_input_template_) {
+class StatelessInput extends Templated(ParsedElement, ful_input_template_) {
     render(slotted, template) {
         const input = this.input = slotted.input = slotted.input || (() => {
             const el = document.createElement("input");
@@ -899,16 +967,9 @@ class Input extends Stateful(StatelessInput, [], ['value']) {
         return fragment;
     }
     get value() {
-        if (!this.input) {
-            return this.getAttribute('value');
-        }
         return this.input.value;
     }
     set value(value) {
-        if (!this.input) {
-            //handled during rendering
-            return;
-        }
         this.input.value = value;
     }
     static configure() {
@@ -938,7 +999,7 @@ const ful_select_template_ = globalThis.ful_select_template || ftl.Template.from
 `, ful_select_ec);
 
 
-class Select extends Templated(HTMLElement, ful_select_template_) {
+class Select extends Stateful(Templated(ParsedElement, ful_select_template_), [], ["value"]) {
     constructor(tsConfig) {
         super();
         this.tsConfig = tsConfig;
@@ -1046,11 +1107,14 @@ const ful_radiougroup_template_ = globalThis.ful_radiogroup_template || ftl.Temp
             </label>
         </section>
         <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+        <footer data-tpl-if="slotted.footer">
+            {{{{ slotted.footer }}}}
+        </footer>
     </fieldset>
 `, ful_radiogroup_ec);
 
 
-class RadioGroup extends Stateful(Templated(HTMLElement, ful_radiougroup_template_), ['disabled']) {
+class RadioGroup extends Stateful(Templated(ParsedElement, ful_radiougroup_template_), ['disabled'], ['value']) {
     render(slotted, template) {        
         const name = this.getAttribute('name') || Attributes.uid('ful-radiogroup');
         const radioEls = Array.from(slotted.default.querySelectorAll('ful-radio'));
@@ -1098,7 +1162,7 @@ const ful_spinner_template_ = globalThis.ful_spinner_template || ftl.Template.fr
 `, ful_spinner_ec);
 
 
-class Spinner extends Templated(HTMLElement, ful_spinner_template_) {
+class Spinner extends Templated(ParsedElement, ful_spinner_template_) {
     render(slotted, template) {
         return template.render({ slotted });
     }
@@ -1158,7 +1222,7 @@ class Wizard extends HTMLElement {
             cancelable: true
         }));
     }
-    moveTo = function (n) {
+    moveTo(n) {
         this.progress.forEach(p => {
             const children = [...p.children];
             const current = children.filter(e => e.matches(".active"))[0];
@@ -1174,17 +1238,10 @@ class Wizard extends HTMLElement {
             cancelable: true
         }));
     }
-    static custom(tagName, configuration) {
-        customElements.define(tagName, class extends Wizard {
-            constructor() {
-                super(configuration);
-            }
-        });
-    }
     static configure() {
         return Wizard.custom('ful-wizard');
     }
 }
 
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Failure, Form, Fragments, Hex, HttpClient, Input, LocalStorage, RadioGroup, Select, SessionStorage, Slots, Spinner, Stateful, StatelessInput, Templated, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, timing };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Failure, Form, Fragments, Hex, HttpClient, Input, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Slots, Spinner, Stateful, StatelessInput, SyncEvent, Templated, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, timing };
 //# sourceMappingURL=ful.mjs.map