@optionfactory/ful 0.102.0 → 0.103.0

package/dist/ful.mjs

@@ -1,3 +1,6 @@
+import { ParsedElement, Attributes, Fragments } from '@optionfactory/ftl';
+import TomSelect from 'tom-select';
+
 class Base64 {
     static encode(arrayBuffer, dialect) {
         const d = dialect || Base64.URL_SAFE;
@@ -1040,454 +1043,148 @@ class Deferred {
     }
 }
 
-class Fragments {
-    /**
-     * 
-     * @param  {...string} html 
-     * @returns 
-     */
-    static fromHtml(...html) {
-        const el = document.createElement("template");
-        el.innerHTML = html.join("");
-        return document.adoptNode(el.content);
-    }
-    /**
-     * 
-     * @param {DocumentFragment} fragment 
-     * @returns 
-     */
-    static toHtml(fragment) {
-        var el = document.createElement("template");
-        el.content.appendChild(fragment);
-        return el.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);
-        return fragment;
-    }
-}
+class Bindings {
 
-class Attributes {
-    static id = 0;
     /**
-     * 
-     * @param {string} prefix 
-     * @returns 
+     * @param {{ [x: string]: any; }} obj
+     * @param {string} prefix
+     * @return {{ [x: string]: any; }}
      */
-    static uid(prefix) {
-        return `${prefix}-${++Attributes.id}`;
-    }
-    /**
-     * 
-     * @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);
+    static flatten(obj, prefix) {
+        return Object.keys(obj).reduce((acc, k) => {
+            const pre = prefix.length ? prefix + '.' : '';
+            if (typeof obj[k] === 'object' && obj[k] !== null) {
+                Object.assign(acc, Bindings.flatten(obj[k], pre + k));
+            } else {
+                acc[pre + k] = obj[k];
+            }
+            return acc;
+        }, {});
     }
+    
     /**
-     * 
-     * @param {string} prefix 
-     * @param {HTMLElement} from 
-     * @param {HTMLElement} to 
+     * @param {any} result
+     * @param {string} path
+     * @param {any} value
      */
-    static forward(prefix, from, to) {
-        from.getAttributeNames()
-            .filter(a => a.startsWith(prefix))
-            .forEach(a => {
-                const target = a.substring(prefix.length);
-                if (target === 'class') {
-                    const classes = from.getAttribute(prefix + "class")?.split(" ").filter(a => a.length) ?? [];
-                    to.classList.add(...classes);
-                    return;
+    static providePath(result, path, value) {
+        const keys = path.split(".").map((k) => /^[0-9]+$/.test(k) ? +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 = [];
                 }
-                // @ts-ignore
-                to.setAttribute(target, from.getAttribute(a));
-            });
-    }
-    /**
-     * 
-     * @param {HTMLElement} el 
-     * @param {string} attr 
-     * @param {boolean} value 
-     */
-    static toggle(el, attr, value) {
-        if (value) {
-            el.setAttribute(attr, '');
-        } else {
-            el.removeAttribute(attr);
-        }
-    }
-    static flip(el, attr) {
-        if (el.hasAttribute(attr)) {
-            el.removeAttribute(attr);
-        } else {
-            el.setAttribute(attr, '');
-        }
-    }
-
-}
-
-class LightSlots {
-    /**
-     * 
-     * @param {HTMLElement} el 
-     * @returns the slots
-     */
-    static from(el) {
-        /** @type [string, Element][] */
-        const namedSlots = Array.from(el.children)
-            .filter(el => el.matches('[slot]'))
-            .map(el => {
-                el.remove();
-                const slot = el.getAttribute("slot");
-                el.removeAttribute("slot");
-                return [slot ?? 'unnamed', el];
-            });
-        const slots = {};
-        slots.default = new DocumentFragment();
-        slots.default.append(...el.childNodes);
-        for (const [name, el] of namedSlots) {
-            if (!(name in slots)) {
-                slots[name] = new DocumentFragment();
             }
-            slots[name].append(el);
-        }
-        return slots;
-    }
-}
-
-class Nodes {
-    static isParsed(el) {
-        for (let c = el; c; c = c.parentNode) {
-            if (c.nextSibling) {
-                return true;
+            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;
             }
-        }
-        return false;
-    }
-    static queryChildren(node, selector) {
-        for (const c of node.children) {
-            if (c.matches(selector)) {
-                return c;
+            if (current[ckey] === undefined) {
+                current[ckey] = {};
             }
+            previous = current;
+            current = current[ckey];
         }
-        return null;
     }
-    static queryChildrenAll(node, selector) {
-        const r = [];
-        for (const c of node.children) {
-            if (c.matches(selector)) {
-                r.push(c);
+    /**
+     * 
+     * @param {Element & {dataset?: any} & {checked?: boolean} & {value?: any}} el 
+     * @returns 
+     */
+    static extract(el) {
+        if (el.getAttribute('type') === 'radio') {
+            if (!el.checked) {
+                return undefined;
             }
+            return el.dataset['fulBindType'] === 'boolean' ? el.value === 'true' : el.value;
         }
-        return r;
-    }
-}
-
-class TemplatesRegistry {
-    #idToFragment = {};
-    #idToTemplate = {};
-    #ec;
-    put(k, fragment) {
-        if (this.#ec) {
-            // @ts-ignore
-            this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, this.#ec);
-            return;
-        }
-        this.#idToFragment[k] = fragment;
-    }
-    get(k) {
-        if (!this.#ec) {
-            throw new Error("TemplatesRegistry is not configured");
+        if (el.getAttribute('type') === 'checkbox') {
+            return el.checked;
         }
-        const tpl = this.#idToTemplate[k];
-        if (!tpl) {
-            throw new Error(`missing template: '${k}'`);
+        if (el.dataset['fulBindType'] === 'boolean') {
+            return !el.value ? null : el.value === 'true';
         }
-        return tpl;
-    }
-    configure(ec, ...data) {
-        this.#ec = ec;
-        for (const [k, fragment] of Object.entries(this.#idToFragment)) {
-            delete this.#idToFragment[k];
-            // @ts-ignore
-            this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec, ...data);
+        if (el.tagName === 'INPUT' || el.tagName === 'SELECT') {
+            return el.value === '' || el.value === undefined ? null : el.value;
         }
+        return el.value;
     }
-}
-
 
-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;
-    }
-    define(tag, klass) {
-        if (!this.#configured) {
-            this.#tagToclass[tag] = klass;
-            return this;
+    static extractFrom(root, ignoredChildrenSelector){
+        let result = {};
+        for(const el of /** @type {NodeListOf<HTMLElement>} */(root.querySelectorAll('[name]'))){
+            if (el.dataset['fulBindInclude'] === 'never') {
+                continue;
+            }
+            if(ignoredChildrenSelector && el.dataset['fulBindInclude'] !== 'always' && el.closest(ignoredChildrenSelector) !== null){
+                continue;
+            }
+            result = Bindings.providePath(result, /** @type {string} */(el.getAttribute('name')), Bindings.extract(el));
         }
-        customElements.define(tag, klass);
-        return this;
+        return result;
     }
-    configure(ec, ...data) {
-        this.#templates.configure(ec, ...data);
-        for (const [tag, klass] of Object.entries(this.#tagToclass)) {
-            customElements.define(tag, klass);
-            delete this.#tagToclass[tag];
+   
+    /**
+     * 
+     * @param {Element  & {checked?: boolean} & {value?: any}} el 
+     * @returns 
+     */    
+    static mutate(el, raw) {
+        if (el.getAttribute('type') === 'radio') {
+            el.checked = el.getAttribute('value') === raw;
+            return;
         }
-        this.#configured = true;
-    }
-    template(k) {
-        if (k === null || k === undefined) {
-            return undefined;
+        if (el.getAttribute('type') === 'checkbox') {
+            el.checked = raw;
+            return;
         }
-        return this.#templates.get(k);
+        el.value = raw;
     }
-}
 
-const elements = new ElementsRegistry();
-
-
-class UpgradeQueue {
-    #q = [];
-    constructor() {
-        document.addEventListener('DOMContentLoaded', this.dequeue.bind(this));
-    }
-    enqueue(el) {
-        if (!this.#q.length) {
-            requestAnimationFrame(this.dequeue.bind(this));
+    static mutateIn(root, values){
+        for (const [flattenedKey, value] of Object.entries(Bindings.flatten(values, ''))) {
+            for(const el of root.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)){
+                Bindings.mutate(el, value);
+            }
         }
-        this.#q.push(el);
-    }
-    dequeue() {
-        this.#q.splice(0).forEach(el => el.upgrade());
     }
-}
-
-const upgradeQueue = new UpgradeQueue();
 
-const mappers = {
-    'string': attr => attr,
-    'number': attr => attr === null ? null : Number(attr),
-    'presence': attr => attr !== null,
-    'state': attr => attr !== null,
-    'bool': attr => attr === 'true',
-    'json': attr => JSON.parse(attr)
-};
 
-const ParsedElement = (conf) => {
-    const { observed, template, slots } = conf ?? {};
-
-    const attrsAndTypes = (observed ?? []).map(a => {
-        const [attr, maybeType] = a.split(":");
-        const type = maybeType?.trim() ?? 'string';
-        if (!(type in mappers)) {
-            throw new Error(`unsupported attribute type: ${type}`);
-        }
-        return [attr.trim(), type];
-    });
-
-    const attrsAndMappers = attrsAndTypes.map(([attr, type]) => [attr, mappers[type]]);
-
-    const attrToMapper = Object.fromEntries(attrsAndMappers);
-
-    const templateId = elements.defineTemplate(template);
-
-    const k = class extends HTMLElement {
-        static get observedAttributes() {
-            return Object.keys(attrToMapper);
-        }
-        #parsed;
-        #initialized;
-        #reflecting;
-        #internals;
-        constructor() {
-            super();
-            this.#internals = this.attachInternals();
-        }
-        get initialized() {
-            return this.#initialized;
-        }
-        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);
+    static errors(root, es, invalidClass){
+        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');
+        root.querySelectorAll(`.${CSS.escape(invalidClass)}`).forEach(el => el.classList.remove(invalidClass));
+        root.querySelectorAll("ful-errors").forEach(el => {
+            el.replaceChildren();
+            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]))`;
+            root.querySelectorAll(validationTargetsSelector).forEach(input => input.classList.add(invalidClass));
+            const fieldErrorsSelector = `ful-field-error[field='${CSS.escape(name)}']`;
+            root.querySelectorAll(fieldErrorsSelector).forEach(el => {
+                const hel = /** @type HTMLElement} */ (el);
+                hel.innerText = e.reason;
             });
-            // @ts-ignore
-            observer.observe(this.parentNode, { childList: true, subtree: true });
-        }
-        attributeChangedCallback(attr, oldValue, newValue) {
-            if (!this.#parsed || oldValue === newValue) {
-                return;
-            }
-            if (this.#reflecting) {
-                return;
-            }
-            const mapper = attrToMapper[attr];
-            this[attr] = mapper(newValue);
-        }
-        reflect(fn) {
-            this.#reflecting = true;
-            try {
-                fn();
-            } finally {
-                this.#reflecting = false;
-            }
-        }
-        async upgrade() {
-            if (this.#parsed) {
-                return;
-            }
-            this.#parsed = true;
-            // @ts-ignore
-            await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
-
-            for (const [attr, mapper] of attrsAndMappers) {
-                if (this.hasAttribute(attr)) {
-                    this[attr] = mapper(this.getAttribute(attr));
-                }
-            }
-            this.#initialized = true;
-        }
-    };
-
-    for (const [attr, type] of attrsAndTypes.filter(([a, t]) => t === 'state')) {
-        Object.defineProperty(k.prototype, attr, {
-            enumerable: true,
-            configurable: true,
-            get() {
-                return this.internals.states ? this.internals.states.has(`--${attr}`) : this.hasAttribute(attr);
-            },
-            set(value) {
-                this.internals.states?.[value ? 'add' : 'delete'](`--${attr}`);
-                this.reflect(() => Attributes.toggle(this, attr, value));
-            }
         });
-    }
-
-    return k;
-};
-
-function flatten(obj, prefix) {
-    return Object.keys(obj).reduce((acc, k) => {
-        const pre = prefix.length ? prefix + '.' : '';
-        if (typeof obj[k] === 'object' && obj[k] !== null) {
-            Object.assign(acc, flatten(obj[k], pre + k));
-        } else {
-            acc[pre + k] = obj[k];
-        }
-        return acc;
-    }, {});
-}
-
-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 = [];
+        root.querySelectorAll("ful-errors").forEach(el => {
+            const hel = /** @type HTMLElement} */ (el);
+            hel.innerText = globalErrors.map(e => e.reason).join("\n");
+            if (globalErrors.length !== 0) {
+                el.removeAttribute('hidden');
             }
-        }
-        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];
-    }
-}
+        });
 
-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';
-    }
-    if (el.tagName === 'INPUT' || el.tagName === 'SELECT'){
-        return el.value === '' || el.value === undefined ? null : el.value;    
-    }
-    return el.value;
-}
 
-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 ParsedElement() {
@@ -1505,12 +1202,12 @@ class Form extends ParsedElement() {
                 await this.submitter?.(this.values, this);
             });
         });
-        if(this.hasAttribute("clear-invalid-on-change")){
+        if (this.hasAttribute("clear-invalid-on-change")) {
             this.addEventListener('change', evt => {
                 const target = /** @type HTMLElement */ (evt.target);
                 target?.querySelectorAll(`.${CSS.escape(Form.INVALID_CLASS)}`).forEach(el => {
                     el.classList.remove(Form.INVALID_CLASS);
-                });        
+                });
             });
         }
         this.replaceChildren(form);
@@ -1539,7 +1236,7 @@ class Form extends ParsedElement() {
         this.spinner(true);
         try {
             await this.remoting(fn);
-        } catch(e) {
+        } catch (e) {
             this.spinner(false);
             throw e;
         }
@@ -1553,48 +1250,14 @@ class Form extends ParsedElement() {
         }
     }
     set values(vs) {
-        for (const [flattenedKey, value] of Object.entries(flatten(vs, ''))) {
-            this.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`).forEach(el => mutate(el, value));
-        }
+        Bindings.mutateIn(this, vs);
     }
     get values() {
-        return Array.from(/** @type {NodeListOf<HTMLElement>} */ (this.querySelectorAll('[name]')))
-            .filter(el => {
-                if (el.dataset['fulBindInclude'] === 'never') {
-                    return false;
-                }
-                return el.dataset['fulBindInclude'] === 'always' || el.closest(Form.IGNORED_CHILDREN_SELECTOR) === null;
-            })
-            .reduce((result, el) => {
-                return providePath(result, el.getAttribute('name'), extract(el));
-            }, {});
+        return Bindings.extractFrom(this, Form.IGNORED_CHILDREN_SELECTOR);
     }
     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(`.${Form.INVALID_CLASS}`).forEach(el => el.classList.remove(Form.INVALID_CLASS));
-        this.querySelectorAll("ful-errors").forEach(el => {
-            el.replaceChildren();
-            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(Form.INVALID_CLASS));
-            const fieldErrorsSelector = `ful-field-error[field='${CSS.escape(name)}']`;
-            this.querySelectorAll(fieldErrorsSelector).forEach(el => {
-                const hel = /** @type HTMLElement} */ (el);
-                hel.innerText = e.reason;
-            });
-        });
-        this.querySelectorAll("ful-errors").forEach(el => {
-            const hel = /** @type HTMLElement} */ (el);
-            hel.innerText = globalErrors.map(e => e.reason).join("\n");
-            if (globalErrors.length !== 0) {
-                el.removeAttribute('hidden');
-            }
-        });
-        if (!this.hasAttribute('scroll-on-error')) {
+        Bindings.errors(this, es, Form.INVALID_CLASS);
+        if (es.length == 0 || !this.hasAttribute('scroll-on-error')) {
             return;
         }
         const ys = Array.from(this.querySelectorAll(`ful-errors:not([hidden]), [ful-validated-field]:has(.${Form.INVALID_CLASS}) ful-field-error`))
@@ -1644,7 +1307,7 @@ const makeInputFragment = (el, template, slots) => {
     Attributes.defaultValue(slots.input, "type", "text");
     Attributes.defaultValue(slots.input, "placeholder", " ");
     const name = el.getAttribute('name');
-    return template.render(el, { id, name, slots });
+    return template.withOverlay(el, { id, name, slots }).render();
 };
 
 class Input extends ParsedElement({
@@ -1653,8 +1316,8 @@ class Input extends ParsedElement({
     template: INPUT_TEMPLATE
 }){
     input;
-    render(template, slots) {
-        const fragment = makeInputFragment(this, template, slots);
+    render({slots}) {
+        const fragment = makeInputFragment(this, this.template(), slots);
         this.replaceChildren(fragment);
     }
     get value() {
@@ -1690,11 +1353,12 @@ class Select extends ParsedElement({
 }) {
     shouldLoad;
     _unwrappedRemoteLoad;
+    ts;
     constructor(tsConfig) {
         super();
         this.tsConfig = tsConfig;
     }
-    render(template, slots) {
+    render({slots}) {
         const type = this.getAttribute("type") ?? 'local';
         const remote = type != 'local';
         const loadOnce = this.getAttribute('load') != 'always';
@@ -1741,7 +1405,6 @@ class Select extends ParsedElement({
             }
             callback(data);
         };
-        // @ts-ignore
         this.ts = new TomSelect(input, Object.assign(remote ? {
             preload: 'focus',
             load: this._unwrappedRemoteLoad,
@@ -1761,7 +1424,7 @@ class Select extends ParsedElement({
             evt.stopPropagation();
         });
         input.remove();
-        template.renderTo(this, { id, tsId, name, input, slots });
+        this.template().withOverlay({ id, tsId, name, input, slots }).renderTo(this);
     }
     #loader;
     set loader(l) {
@@ -1787,7 +1450,7 @@ class Select extends ParsedElement({
 }
 
 class RadioGroup extends ParsedElement({
-    observed: ['value', 'disabled:state'],
+    observed: ['value', 'disabled:presence'],
     slots: true,
     template: `
         <fieldset ful-validated-field>
@@ -1812,7 +1475,7 @@ class RadioGroup extends ParsedElement({
         </fieldset>
     `
 }) {
-    render(template, slots) {
+    render({slots}) {
         const name = this.getAttribute('name') ?? Attributes.uid('ful-radiogroup');
         const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
         const inputsAndLabels = radioEls.map(el => {
@@ -1839,8 +1502,14 @@ class RadioGroup extends ParsedElement({
         });
 
         radioEls.forEach(el => el.remove());
-        template.renderTo(this, { name, slots, inputsAndLabels });
+        this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
     }
+    set disabled(value) {
+        this.reflect(() => Attributes.toggle(this, 'disabled', value));
+    }    
     get value() {
         /** @type {HTMLInputElement|null} */
         const checked = this.querySelector('input[type=radio]:checked');
@@ -1848,10 +1517,8 @@ class RadioGroup extends ParsedElement({
     }
     set value(value) {
         if (value === null) {
-            /** @type {HTMLInputElement[]} */
             this.querySelectorAll(`input[type=radio]`).forEach(el => {
-                // @ts-ignore
-                el.checked = false;
+                (/** @type {HTMLInputElement} */(el)).checked = false;
             });
             return;
         }
@@ -1872,10 +1539,10 @@ class Spinner extends ParsedElement({
         </div>
     `
 }) {
-    render(template, slots) {
-        template.renderTo(this, { slots });
+    render({slots}) {
+        this.template().withOverlay({ slots }).renderTo(this);
     }
 }
 
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Deferred, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, HttpClientError, INPUT_TEMPLATE, Input, LightSlots, LocalStorage, MediaType, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, TemplatesRegistry, VersionedStorage, elements, makeInputFragment, timing };
+export { AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Deferred, Failure, Form, Hex, HttpClient, HttpClientError, INPUT_TEMPLATE, Input, LocalStorage, MediaType, RadioGroup, Select, SessionStorage, Spinner, VersionedStorage, makeInputFragment, timing };
 //# sourceMappingURL=ful.mjs.map