@optionfactory/ful 0.45.0 → 0.47.0

package/dist/ful.mjs

@@ -586,14 +586,14 @@ class SyncEvent extends CustomEvent {
 
 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;
     }
@@ -683,86 +683,85 @@ class UpgradeQueue {
 
 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}`);
             }
         });
     }
@@ -839,12 +838,12 @@ function mutate(el, raw) {
     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);
@@ -862,7 +861,7 @@ class Form extends Templated(ParsedElement) {
                 this.spinner(false);
             }
         });
-        return form;
+        this.replaceChildren(form);
     }
     spinner(spin) {
         this.querySelectorAll('ful-spinner').forEach(el => el.hidden = !spin);
@@ -890,7 +889,7 @@ class Form extends Templated(ParsedElement) {
         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) => {
@@ -923,7 +922,7 @@ const ful_input_ec = globalThis.ec || ftl.EvaluationContext.configure({
 
 });
 
-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>
@@ -935,31 +934,34 @@ 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(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;
@@ -991,12 +993,14 @@ const ful_select_template_ = globalThis.ful_select_template || ftl.Template.from
 `, 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';
@@ -1024,7 +1028,6 @@ class Select extends Stateful(Templated(ParsedElement, ful_select_template_), []
             }
         };
 
-
         this._remote = remote;
         // we need to await this load in setValue when remote is configured and the option
         // is not loaded yet.
@@ -1039,7 +1042,7 @@ class Select extends Stateful(Templated(ParsedElement, ful_select_template_), []
             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);
@@ -1053,12 +1056,12 @@ class Select extends Stateful(Templated(ParsedElement, ful_select_template_), []
         } : {}, 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);
         })();
@@ -1095,8 +1098,9 @@ const ful_radiougroup_template_ = globalThis.ful_radiogroup_template || ftl.Temp
 `, 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 => {
@@ -1111,19 +1115,18 @@ class RadioGroup extends Stateful(Templated(ParsedElement, ful_radiougroup_templ
             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;
     }
 }
@@ -1132,7 +1135,7 @@ const ful_spinner_ec = globalThis.ec || ftl.EvaluationContext.configure({
 
 });
 
-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>
@@ -1140,9 +1143,10 @@ const ful_spinner_template_ = globalThis.ful_spinner_template || ftl.Template.fr
 `, 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 });
     }
 }
 
@@ -1228,5 +1232,5 @@ class CustomElements {
     }
 }
 
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, CustomElements, 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 };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, CustomElements, Failure, Form, Fragments, Hex, HttpClient, Input, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Slots, Spinner, StatelessInput, SyncEvent, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, timing };
 //# sourceMappingURL=ful.mjs.map