@optionfactory/ful 0.42.0 → 0.44.0

package/dist/ful.iife.js

@@ -560,16 +560,41 @@ var ful = (function (exports) {
         }
     };
 
+    // 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);
@@ -577,17 +602,12 @@ var ful = (function (exports) {
         }
         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;
         }
     }
@@ -637,20 +657,85 @@ var ful = (function (exports) {
         }
     }
 
-    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;
             }
         };
     };
@@ -659,40 +744,35 @@ var ful = (function (exports) {
 
         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 */
@@ -709,10 +789,65 @@ var ful = (function (exports) {
         }, {});
     }
 
-    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) => {
@@ -720,11 +855,11 @@ var ful = (function (exports) {
                 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;
@@ -735,21 +870,15 @@ var ful = (function (exports) {
             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') {
@@ -758,29 +887,30 @@ var ful = (function (exports) {
                     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;
             }
@@ -789,69 +919,7 @@ var ful = (function (exports) {
                 .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() {
@@ -875,7 +943,7 @@ 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(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");
@@ -902,16 +970,9 @@ var ful = (function (exports) {
             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() {
@@ -941,7 +1002,7 @@ var ful = (function (exports) {
 `, 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;
@@ -1049,11 +1110,14 @@ var ful = (function (exports) {
             </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'));
@@ -1101,7 +1165,7 @@ var ful = (function (exports) {
 `, 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 });
         }
@@ -1161,7 +1225,7 @@ var ful = (function (exports) {
                 cancelable: true
             }));
         }
-        moveTo = function (n) {
+        moveTo(n) {
             this.progress.forEach(p => {
                 const children = [...p.children];
                 const current = children.filter(e => e.matches(".active"))[0];
@@ -1177,13 +1241,6 @@ var ful = (function (exports) {
                 cancelable: true
             }));
         }
-        static custom(tagName, configuration) {
-            customElements.define(tagName, class extends Wizard {
-                constructor() {
-                    super(configuration);
-                }
-            });
-        }
         static configure() {
             return Wizard.custom('ful-wizard');
         }
@@ -1201,6 +1258,8 @@ var ful = (function (exports) {
     exports.HttpClient = HttpClient;
     exports.Input = Input;
     exports.LocalStorage = LocalStorage;
+    exports.Nodes = Nodes;
+    exports.ParsedElement = ParsedElement;
     exports.RadioGroup = RadioGroup;
     exports.Select = Select;
     exports.SessionStorage = SessionStorage;
@@ -1208,6 +1267,7 @@ var ful = (function (exports) {
     exports.Spinner = Spinner;
     exports.Stateful = Stateful;
     exports.StatelessInput = StatelessInput;
+    exports.SyncEvent = SyncEvent;
     exports.Templated = Templated;
     exports.VersionedStorage = VersionedStorage;
     exports.Wizard = Wizard;