@optionfactory/ful 0.49.0 → 0.51.0

package/dist/ful.iife.js

@@ -565,7 +565,7 @@ var ful = (function (exports) {
     class SyncEvent extends CustomEvent {
         #results;
         constructor(type, options) {
-            super(type, options);
+            super(type, {...options, cancelable: true});
             this.#results = [];
         }
 
@@ -574,9 +574,11 @@ var ful = (function (exports) {
             // 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);
+            el.dispatchEvent(this);
+            //we ignore the result of dispatchEvent and use defaultPrevented instead
+            //because handlers can be async
             const results = await Promise.all(this.#results);
-            return [success, results];
+            return [!this.defaultPrevented, results];
         }
 
         static on(el, type, h, useCapture) {
@@ -588,6 +590,11 @@ var ful = (function (exports) {
     }
 
     class Fragments {
+        /**
+         * 
+         * @param  {...string} html 
+         * @returns 
+         */
         static fromHtml(...html) {
             const el = document.createElement("div");
             el.innerHTML = html.join("");
@@ -595,16 +602,31 @@ var ful = (function (exports) {
             fragment.append(...el.childNodes);
             return fragment;
         }
+        /**
+         * 
+         * @param {DocumentFragment} fragment 
+         * @returns 
+         */
         static toHtml(fragment) {
             var r = document.createElement("div");
             r.appendChild(fragment);
             return r.innerHTML;
         }
+        /**
+         * 
+         * @param  {...Node} nodes 
+         * @returns 
+         */
         static from(...nodes) {
             const fragment = new DocumentFragment();
             fragment.append(...nodes);
             return fragment;
         }
+        /**
+         * 
+         * @param {HTMLElement} el 
+         * @returns 
+         */
         static fromChildNodes(el) {
             const fragment = new DocumentFragment();
             fragment.append(...el.childNodes);
@@ -614,18 +636,41 @@ var ful = (function (exports) {
 
     class Attributes {
         static id = 0;
+        /**
+         * 
+         * @param {string} prefix 
+         * @returns 
+         */
         static uid(prefix) {
             return `${prefix}-${++Attributes.id}`;
         }
+        /**
+         * 
+         * @param {any} value 
+         * @returns 
+         */
         static asBoolean(value) {
             return value !== null && value !== undefined && value !== false;
         }
+        /**
+         * 
+         * @param {HTMLElement} el 
+         * @param {string} k 
+         * @param {string} v 
+         * @returns 
+         */
         static defaultValue(el, k, v) {
             if (!el.hasAttribute(k)) {
                 el.setAttribute(k, v);
             }
             return el.getAttribute(k);
         }
+        /**
+         * 
+         * @param {string} prefix 
+         * @param {HTMLElement} from 
+         * @param {HTMLElement} to 
+         */
         static forward(prefix, from, to) {
             from.getAttributeNames()
                 .filter(a => a.startsWith(prefix))
@@ -640,7 +685,12 @@ var ful = (function (exports) {
         }
     }
 
-    class Slots {
+    class LightSlots {
+        /**
+         * 
+         * @param {HTMLElement} el 
+         * @returns the slots
+         */
         static from(el) {
             const namedSlots = Array.from(el.childNodes)
                 .filter(el => el.matches && el.matches('[slot]'))
@@ -650,10 +700,10 @@ var ful = (function (exports) {
                     el.removeAttribute("slot");
                     return [slot, el];
                 });
-            const slotted = Object.fromEntries(namedSlots);
-            slotted.default = new DocumentFragment();
-            slotted.default.append(...el.childNodes);
-            return slotted;
+            const slots = Object.fromEntries(namedSlots);
+            slots.default = new DocumentFragment();
+            slots.default.append(...el.childNodes);
+            return slots;
         }
     }
 
@@ -668,20 +718,20 @@ var ful = (function (exports) {
         }
     }
 
-    class TemplateRegistry {
+    class TemplatesRegistry {
         #idToFragment = {};
         #idToTemplate = {};
         #ec;
         put(k, fragment) {
             if (this.#ec) {
-                this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec);
+                this.#idToTemplate[k] = Template.fromFragment(fragment, ec);
                 return;
             }
             this.#idToFragment[k] = fragment;
         }
         get(k) {
             if (!this.#ec) {
-                throw new Error("evaluationContext is not configured");
+                throw new Error("TemplatesRegistry is not configured");
             }
             const tpl = this.#idToTemplate[k];
             if (!tpl) {
@@ -698,7 +748,50 @@ var ful = (function (exports) {
         }
     }
 
-    const templates = new TemplateRegistry();
+
+    class ElementsRegistry {
+        #templates;
+        #tagToclass;
+        #configured;
+        #id = 0;
+        constructor(){
+            this.#templates = new TemplatesRegistry();
+            this.#tagToclass = {};
+        }
+        defineTemplate(html){
+            if(html === null || html === undefined){
+                return undefined;
+            }
+            const name = `unnamed-${++this.#id}`;
+            this.#templates.put(name, Fragments.fromHtml(html));
+            return name;
+        }
+        template(k){
+            if(k === null || k === undefined){
+                return undefined;
+            }
+            return this.#templates.get(k);
+        }
+        define(tag, klass){
+            if(!this.#configured){
+                this.#tagToclass[tag] = klass;
+                return this;
+            }
+            customElements.define(tag, klass);        
+            return this;
+        }
+        configure(ec) {
+            this.#templates.configure(ec);
+            for(const [tag, klass] of Object.entries(this.#tagToclass)) {
+                customElements.define(tag, klass);            
+                delete this.#tagToclass[tag];
+            }
+            this.#configured = true;
+        }
+    }
+
+    const elements = new ElementsRegistry();
+
 
     class UpgradeQueue {
         #q = [];
@@ -718,22 +811,29 @@ var ful = (function (exports) {
 
     const upgradeQueue = new UpgradeQueue();
 
-    const ParsedElement = (flags, others) => {
+    const ParsedElement = (conf) => {
+        const {flags, attrs, template, slots} = conf || {};
 
         const observed_flags = flags || [];
-        const observed_others = others || [];    
+        const observed_others = attrs || [];
         const observed = [].concat(observed_flags).concat(observed_others);
 
+        const templateId = elements.defineTemplate(template);
+
         const k = class extends HTMLElement {
             static get observedAttributes() {
                 return observed;
             }
             #parsed;
+            #initialized;
             #internals;
             constructor(...args) {
                 super(...args);
                 this.#internals = this.attachInternals();
             }
+            get initialized(){
+                return this.#initialized;
+            }
             get internals() {
                 return this.#internals;
             }
@@ -769,34 +869,50 @@ var ful = (function (exports) {
                     return;
                 }
                 this.#parsed = true;
-                await this.render();
+                await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
                 for (const flag of observed_flags) {
-                    if(this.hasAttribute(flag)){
+                    if (this.hasAttribute(flag)) {
                         this[flag] = true;
                     }
                 }
                 for (const other of observed_others) {
-                    if(this.hasAttribute(other)){
+                    if (this.hasAttribute(other)) {
                         this[other] = this.getAttribute(other);
                     }
                 }
-            }        
+                this.#initialized = true;
+            }
         };
 
         for (const flag of observed_flags) {
+            const state = `--${flag};`;
             Object.defineProperty(k.prototype, flag, {
                 enumerable: true,
                 configurable: true,
                 get() {
-                    return this.internals.states.has(`--${flag}`);
+                    return this.internals.states.has(state);
                 },
                 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}`);
+                    const v = Attributes.asBoolean(value);
+                    const et = this.initialized ? 'changed' : 'init';
+                    const event = new SyncEvent(`${flag}:${et}`, {
+                        detail: { 
+                            target: this,
+                            value: v 
+                        }
+                    });
+                    (async () => {
+                        const [success, results] = await event.dispatchTo(this);
+                        if (!success) {
+                            return;
+                        }
+                        if (v) {
+                            //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
+                            this.internals.states.add(state);
+                            return;
+                        }
+                        this.internals.states.delete(state);
+                    })();
                 }
             });
         }
@@ -953,21 +1069,20 @@ var ful = (function (exports) {
         }
     }
 
-    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>
-        <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
-        {{{{ slotted.input }}}} 
-        <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
-        <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>
-`));
-
-
-    const makeInputFragment = (el, slotted) => {
-        const input = el.input = slotted.input = slotted.input || (() => {
+    const INPUT_TEMPLATE = `
+<label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+<div class="input-group">
+    <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+    <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
+    {{{{ slots.input }}}} 
+    <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
+    <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+</div>
+<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+`;
+
+    const makeInputFragment = (el, template, slots) => {
+        const input = el.input = slots.input = slots.input || (() => {
             const el = document.createElement("input");
             el.classList.add("form-control");
             return el;
@@ -975,18 +1090,22 @@ var ful = (function (exports) {
         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", " ");
+        Attributes.forward('input-', el, slots.input);
+        Attributes.defaultValue(slots.input, "id", id);
+        Attributes.defaultValue(slots.input, "type", "text");
+        Attributes.defaultValue(slots.input, "placeholder", " ");
         const name = el.getAttribute('name');
-        return templates.get('ful-input').render(el, { id, name, slotted });
+        return template.render(el, { id, name, slots });
     };
 
-    class Input extends ParsedElement([], ['value']) {
-        render() {
-            const slotted = Slots.from(this);
-            const fragment = makeInputFragment(this, slotted);
+    class Input extends ParsedElement({
+        flags: [], 
+        attrs: ['value'],
+        slots: true,
+        template: INPUT_TEMPLATE
+    }){
+        render(template, slots) {
+            const fragment = makeInputFragment(this, template, slots);
             this.replaceChildren(fragment);
         }
         get value() {
@@ -1002,33 +1121,33 @@ var ful = (function (exports) {
      * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
      */
 
-    templates.put('ful-select', Fragments.fromHtml(`
-    <label data-tpl-for="tsId" class="form-label">{{{{ slotted.default }}}}</label>
-    {{{{ input }}}}
-    <div class="input-group">
-        <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
-        <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
-        {{{{ slotted.input }}}} 
-        <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
-        <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>            
-`));
-
-
-    class Select extends ParsedElement([], ["value"]) {
+    class Select extends ParsedElement({
+        flags: [], 
+        attrs: ["value"],
+        slots: true,
+        template: `
+        <label data-tpl-for="tsId" class="form-label">{{{{ slots.default }}}}</label>
+        {{{{ input }}}}
+        <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
+            {{{{ slots.input }}}} 
+            <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
+    `
+    }) {
         constructor(tsConfig) {
             super();
             this.tsConfig = tsConfig;
         }
-        render() {
-            const slotted = Slots.from(this);
-
+        render(template, slots) {
             const type = this.getAttribute("type") || 'local';
             const remote = type != 'local';
             const loadOnce = this.getAttribute('load') != 'always';
             const name = this.getAttribute('name');
-            const input = slotted.input = slotted.input || (() => {
+            const input = slots.input = slots.input || (() => {
                 return document.createElement("select");
             })();
             input.setAttribute('ful-validation-target', '');
@@ -1041,7 +1160,7 @@ var ful = (function (exports) {
 
             //tomselect needs the input to have a parent.
             //se we move the input to a fragment
-            slotted.input = Fragments.from(input);
+            slots.input = Fragments.from(input);
 
             this.loaded = !remote;
 
@@ -1064,7 +1183,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) : []);
+                const data = await (this.#loader ? this.#loader(qvalue, type) : []);
                 if (type !== 'id') {
                     this.loaded = true;
                 }
@@ -1079,7 +1198,15 @@ var ful = (function (exports) {
             } : {}, tsDefaultConfig, this.tsConfig));
             //we remove the input to move it
             input.remove();
-            templates.get('ful-select').renderTo(this, { id, tsId, name, input, slotted });
+            template.renderTo(this, { id, tsId, name, input, slots });
+        }
+        #loader;
+        set loader(l){
+            this.#loader = l;
+            // loader can be configured later so we load now
+            if(this.hasAttribute('value')){
+                this.value = this.getAttribute("value");
+            }
         }
         set value(v) {
             (async () => {
@@ -1095,33 +1222,34 @@ var ful = (function (exports) {
         }
     }
 
-    templates.put('ful-radio-group', Fragments.fromHtml(`
-    <fieldset>
-        <legend class="form-label">
-            {{{{ slotted.default }}}}
-        </legend>
-        <header data-tpl-if="slotted.header">
-            {{{{ slotted.header }}}}
-        </header>
-        <section>
-            <label data-tpl-each="inputsAndLabels" data-tpl-var="ial">
-                {{{{ ial[0] }}}}
-                {{{{ ial[1] }}}}
-            </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>
-`));
-
-
-    class RadioGroup extends ParsedElement(['disabled'], ['value']) {
-        render() {
-            const slotted = Slots.from(this);
+    class RadioGroup extends ParsedElement({
+        flags: ['disabled'], 
+        attrs: ['value'],
+        slots: true,
+        template: `
+        <fieldset>
+            <legend class="form-label">
+                {{{{ slots.default }}}}
+            </legend>
+            <header data-tpl-if="slots.header">
+                {{{{ slots.header }}}}
+            </header>
+            <section>
+                <label data-tpl-each="inputsAndLabels" data-tpl-var="ial">
+                    {{{{ ial[0] }}}}
+                    {{{{ ial[1] }}}}
+                </label>
+            </section>
+            <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+            <footer data-tpl-if="slots.footer">
+                {{{{ slots.footer }}}}
+            </footer>
+        </fieldset>
+    `
+    }) {
+        render(template, slots) {
             const name = this.getAttribute('name') || Attributes.uid('ful-radiogroup');
-            const radioEls = Array.from(slotted.default.querySelectorAll('ful-radio'));
+            const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
             const inputsAndLabels = radioEls.map(el => {
                 const input = document.createElement('input');
                 input.setAttribute('type', 'radio');
@@ -1134,11 +1262,7 @@ var ful = (function (exports) {
                 return [input, label];
             });
             radioEls.forEach(el => el.remove());
-            templates.get('ful-radio-group').renderTo(this, {
-                name: name,
-                slotted: slotted,
-                inputsAndLabels: inputsAndLabels
-            });
+            template.renderTo(this, {name, slots, inputsAndLabels});
         }
         get value() {
             const checked = this.querySelector('input[type=radio]:checked');
@@ -1149,17 +1273,17 @@ var ful = (function (exports) {
         }
     }
 
-    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>
-`));
-
-    class Spinner extends ParsedElement() {
-        render() {
-            const slotted = Slots.from(this);
-            templates.get('ful-spinner').renderTo(this, { slotted });
+    class Spinner extends ParsedElement({
+        slots: true,
+        template: `
+        <div class="ful-spinner-wrapper">
+            <div class="ful-spinner-text">{{{{ slots.default }}}}</div>
+            <div class="ful-spinner-icon"></div>
+        </div>
+    `
+    }) {
+        render(template, slots) {
+            template.renderTo(this, { slots });
         }
     }
 
@@ -1235,47 +1359,37 @@ var ful = (function (exports) {
         }
     }
 
-    class CustomElements {
-        static configure(ec) {
-            templates.configure(ec);
-            customElements.define('ful-spinner', Spinner);
-            customElements.define('ful-input', Input);
-            customElements.define('ful-radio-group', RadioGroup);
-            customElements.define('ful-select', Select);
-            customElements.define('ful-form', Form);
-        }
-    }
-
     exports.Attributes = Attributes;
     exports.AuthorizationCodeFlow = AuthorizationCodeFlow;
     exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
     exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;
     exports.Base64 = Base64;
-    exports.CustomElements = CustomElements;
+    exports.ElementsRegistry = ElementsRegistry;
     exports.Failure = Failure;
     exports.Form = Form;
     exports.Fragments = Fragments;
     exports.Hex = Hex;
     exports.HttpClient = HttpClient;
+    exports.INPUT_TEMPLATE = INPUT_TEMPLATE;
     exports.Input = Input;
+    exports.LightSlots = LightSlots;
     exports.LocalStorage = LocalStorage;
     exports.Nodes = Nodes;
     exports.ParsedElement = ParsedElement;
     exports.RadioGroup = RadioGroup;
     exports.Select = Select;
     exports.SessionStorage = SessionStorage;
-    exports.Slots = Slots;
     exports.Spinner = Spinner;
     exports.SyncEvent = SyncEvent;
-    exports.TemplateRegistry = TemplateRegistry;
+    exports.TemplatesRegistry = TemplatesRegistry;
     exports.VersionedStorage = VersionedStorage;
     exports.Wizard = Wizard;
+    exports.elements = elements;
     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 });