@optionfactory/ful 0.104.0 → 1.0.0

package/dist/ful.iife.js

@@ -1,4 +1,4 @@
-var ful = (function (exports, ftl, TomSelect) {
+var ful = (function (exports, ftl) {
     'use strict';
 
     class Base64 {
@@ -66,10 +66,10 @@ var ful = (function (exports, ftl, TomSelect) {
         }
         static encode(bytes, upper) {
             return Array.from(bytes)
-                    .map(b => b.toString(16))
-                    .map(b => upper ? b.toUpperCase() : b)
-                    .map(o => o.padStart(2, 0))
-                    .join('');
+                .map(b => b.toString(16))
+                .map(b => upper ? b.toUpperCase() : b)
+                .map(o => o.padStart(2, 0))
+                .join('');
         }
     }
 
@@ -121,7 +121,6 @@ var ful = (function (exports, ftl, TomSelect) {
         }
     }
 
-
     /**
      * @typedef {Int8Array| Uint8Array| Uint8ClampedArray| Int16Array| Uint16Array| Int32Array| Uint32Array| Float32Array| Float64Array| BigInt64Array| BigUint64Array} TypedArray
      */
@@ -390,7 +389,6 @@ var ful = (function (exports, ftl, TomSelect) {
         }
     };
 
-
     class HttpRequestBuilder {
         #client;
         #method;
@@ -451,7 +449,7 @@ var ful = (function (exports, ftl, TomSelect) {
                     this.#headers.delete(k);
                 } else {
                     this.#headers.set(k, v);
-                }    
+                }
             }
             return this;
         }
@@ -485,16 +483,17 @@ var ful = (function (exports, ftl, TomSelect) {
             return this;
         }
         /**
-         * Adds a query parameter to the request, overriding it if it already exists. Null and undefined values cause the key to be removed.
+         * Adds a query parameter to the request, overriding it if it already exists. Empty vs, or a single null or undefined value cause the key to be removed.
          * @param {string} k 
-         * @param {string} v 
+         * @param {...string} vs
          * @returns {HttpRequestBuilder} this builder
          */
-        param(k, v) {
-            if (v === null || v === undefined) {
+        param(k, ...vs) {
+            if (vs.length === 0 || vs[0] === null || vs[0] === undefined) {
                 this.#params.delete(k);
-            } else {
-                this.#params.set(k, v);
+            }
+            for (const v of vs) {
+                this.#params.append(k, v);
             }
             return this;
         }
@@ -539,7 +538,6 @@ var ful = (function (exports, ftl, TomSelect) {
          */
         options(kvs) {
             for (const [k, v] of Object.entries(kvs)) {
-                // @ts-ignore
                 this.#options[k] = v;
             }
             return this;
@@ -647,7 +645,6 @@ var ful = (function (exports, ftl, TomSelect) {
         }
     }
 
-
     class HttpMultipartRequestCustomizer {
         #formData;
         /**
@@ -744,14 +741,14 @@ var ful = (function (exports, ftl, TomSelect) {
     }
 
     class VersionedStorage {
-        constructor(storage, key, dataSupplier){
+        constructor(storage, key, dataSupplier) {
             this.storage = storage;
             this.key = key;
             this.dataSupplier = dataSupplier;
             this.cache = null;
-            
+
         }
-        async load(revision){
+        async load(revision) {
             const saved = this.storage.load(this.key);
             if (!!saved && saved.revision === revision) {
                 this.cache = saved.value;
@@ -764,13 +761,13 @@ var ful = (function (exports, ftl, TomSelect) {
             });
             this.cache = freshData;
         }
-        data(){
+        data() {
             return this.cache;
         }
     }
 
     class AuthorizationCodeFlow {
-        static forKeycloak(clientId, realmBaseUrl, redirectUri){
+        static forKeycloak(clientId, realmBaseUrl, redirectUri) {
             const scope = "openid profile";
             return new AuthorizationCodeFlow(clientId, scope, {
                 auth: new URL("protocol/openid-connect/auth", realmBaseUrl),
@@ -778,15 +775,15 @@ var ful = (function (exports, ftl, TomSelect) {
                 logout: new URL("protocol/openid-connect/logout", realmBaseUrl),
                 registration: new URL("protocol/openid-connect/registrations", realmBaseUrl),
                 redirect: redirectUri
-            });        
+            });
         }
-        constructor(clientId, scope, {auth, token, registration, logout, redirect}) {
+        constructor(clientId, scope, { auth, token, registration, logout, redirect }) {
             this.storage = new SessionStorage(clientId);
             this.clientId = clientId;
             this.scope = scope;
-            this.uri = {auth, token, registration, logout, redirect};
+            this.uri = { auth, token, registration, logout, redirect };
         }
-        async action(uri, additionalParams){
+        async action(uri, additionalParams) {
             const pkceVerifier = Base64.encode(crypto.getRandomValues(new Uint8Array(32)).buffer);
             const pkceChallenge = Base64.encode(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(pkceVerifier)));
             const state = this.clientId + Base64.encode(crypto.getRandomValues(new Uint8Array(16)).buffer);
@@ -807,10 +804,10 @@ var ful = (function (exports, ftl, TomSelect) {
             });
             window.location.href = url.toString();
         }
-        async registration(additionalParams){
+        async registration(additionalParams) {
             await this.action(this.uri.registration, additionalParams);
         }
-        async applicationInitiatedAction(kcAction, additionalParams){
+        async applicationInitiatedAction(kcAction, additionalParams) {
             await this.action(this.uri.auth, {
                 ...additionalParams,
                 kc_action: kcAction,
@@ -867,8 +864,8 @@ var ful = (function (exports, ftl, TomSelect) {
                 payload: JSON.parse(utf8decoder.decode(Base64.decode(rawPayload, Base64.STANDARD))),
                 signature: signature
             };
-        }    
-        constructor(clientId, t, {token, logout, redirect}) {
+        }
+        constructor(clientId, t, { token, logout, redirect }) {
             this.clientId = clientId;
             this.token = t;
             this.idToken = AuthorizationCodeFlowSession.parseToken(t.id_token);
@@ -928,9 +925,9 @@ var ful = (function (exports, ftl, TomSelect) {
         bearerToken() {
             return `Bearer ${this.token.access_token}`;
         }
-        
-        interceptor(gracePeriodBefore, gracePeriodAfter){
-            return new AuthorizationCodeFlowInterceptor(this, gracePeriodBefore, gracePeriodAfter);        
+
+        interceptor(gracePeriodBefore, gracePeriodAfter) {
+            return new AuthorizationCodeFlowInterceptor(this, gracePeriodBefore, gracePeriodAfter);
         }
     }
 
@@ -958,11 +955,21 @@ var ful = (function (exports, ftl, TomSelect) {
         },
         DEBOUNCE_DEFAULT: 0,
         DEBOUNCE_IMMEDIATE: 1,
+        /**
+         * Executes only after a period of inactivity (pause in events).
+         * Delays execution until events stop for a set duration.
+         * Consolidates multiple rapid events into a single execution.
+         * Respond to the "end" of a series of events.
+         * @param {*} timeoutMs 
+         * @param {*} func 
+         * @param {*} [options]
+         * @returns {[function, function]}
+         */
         debounce(timeoutMs, func, options) {
+            const opts = options ?? timing.DEBOUNCE_DEFAULT;
             let tid = null;
             let args = [];
             let previousTimestamp = 0;
-            let opts = options || timing.DEBOUNCE_DEFAULT;
 
             const later = () => {
                 const elapsed = new Date().getTime() - previousTimestamp;
@@ -980,7 +987,7 @@ var ful = (function (exports, ftl, TomSelect) {
                 }
             };
 
-            return function () {
+            const debounced = function () {
                 args = [...arguments];
                 previousTimestamp = new Date().getTime();
                 if (tid === null) {
@@ -990,15 +997,23 @@ var ful = (function (exports, ftl, TomSelect) {
                     }
                 }
             };
+            const abort = () => clearTimeout(tid);
+            return [debounced, abort];
         },
         THROTTLE_DEFAULT: 0,
         THROTTLE_NO_LEADING: 1,
         THROTTLE_NO_TRAILING: 2,
+        /**
+         * Executes at most once per specified time interval, regardless of ongoing events.
+         * Executes regularly as long as events are firing, but at a controlled rate.
+         * Allows execution periodically during a burst of events.
+         * Ensure a function doesn't fire too frequently during continuous events.
+         */
         throttle(timeoutMs, func, options) {
+            const opts = options ?? timing.THROTTLE_DEFAULT;
             let tid = null;
             let args = [];
             let previousTimestamp = 0;
-            let opts = options || timing.THROTTLE_DEFAULT;
 
             const later = () => {
                 previousTimestamp = (opts & timing.THROTTLE_NO_LEADING) ? 0 : new Date().getTime();
@@ -1008,8 +1023,7 @@ var ful = (function (exports, ftl, TomSelect) {
                     args = [];
                 }
             };
-
-            return function () {
+            const throttled = function () {
                 const now = new Date().getTime();
                 if (!previousTimestamp && (opts & timing.THROTTLE_NO_LEADING)) {
                     previousTimestamp = now;
@@ -1030,10 +1044,27 @@ var ful = (function (exports, ftl, TomSelect) {
                     tid = setTimeout(later, remaining);
                 }
             };
-
+            const abort = () => clearTimeout(tid);
+            return [throttled, abort];
         }
     };
 
+    class Loaders {
+        static fromAttributes(el, defaultLoader, options) {
+            const http = ftl.registry.component("http-client");
+            const requestMapper = el.hasAttribute("request-mapper") ? ftl.registry.component(el.getAttribute("request-mapper")) : v => v;
+            const responseMapper = el.hasAttribute("response-mapper") ? ftl.registry.component(el.getAttribute("response-mapper")) : v => v;
+            const loaderClass = ftl.registry.component(el.getAttribute("loader") ?? defaultLoader);
+            return loaderClass.create({
+                el,
+                http,
+                requestMapper,
+                responseMapper,
+                options: options ?? {}
+            });
+        }
+    }
+
     class Bindings {
 
         /**
@@ -1108,13 +1139,15 @@ var ful = (function (exports, ftl, TomSelect) {
             return el.value;
         }
 
-        static extractFrom(root, ignoredChildrenSelector){
+        /**
+         * 
+         * @param {HTMLFormElement} form 
+         * @returns 
+         */
+        static extractFrom(form){
             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){
+            for(const el of form.elements){
+                if(!el.hasAttribute("name") || el.matches(":disabled")){
                     continue;
                 }
                 result = Bindings.providePath(result, /** @type {string} */(el.getAttribute('name')), Bindings.extract(el));
@@ -1139,70 +1172,139 @@ var ful = (function (exports, ftl, TomSelect) {
             el.value = raw;
         }
 
-        static mutateIn(root, values){
+        static mutateIn(form, values){
             for (const [flattenedKey, value] of Object.entries(Bindings.flatten(values, ''))) {
-                for(const el of root.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)){
+                for(const el of form.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)){
                     Bindings.mutate(el, value);
                 }
             }
         }
 
 
-        static errors(root, es, invalidClass){
+        static errors(form, es, scrollOnError){
             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 => {
+            form.querySelectorAll(`[name]`).forEach(el => el.setCustomValidity?.(""));
+            form.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;
-                });
+                const name = e.context.replace("[", ".").replace("].", ".").replace("]", "");
+                form.querySelectorAll(`[name='${CSS.escape(name)}']`).forEach(input => input.setCustomValidity?.(e.reason));
             });
-            root.querySelectorAll("ful-errors").forEach(el => {
+            form.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 (es.length == 0 || !scrollOnError) {
+                return;
+            }
+            Array.from(form.querySelectorAll(`:invalid`)).sort((a,b) => a.getBoundingClientRect().y - b.getBoundingClientRect().y)[0]?.focus();
+        }
+    }
 
+    class RemoteJsonFormLoader {
+        #http;
+        #url;
+        #method;
+        #requestMapper;
+        #responseMapper;
+        constructor(http, url, method, requestMapper, responseMapper) {
+            this.#http = http;
+            this.#url = url;
+            this.#method = method;
+            this.#requestMapper = requestMapper;
+            this.#responseMapper = responseMapper;
+        }
+        prepare(values, form) {
+            return this.#requestMapper(values, form);
+        }
+        async submit(values, form) {
+            return await this.#http.request(this.#method, this.#url)
+                .json(values)
+                .fetch()
+        }
+        transform(response, form) {
+            return this.#responseMapper(response, form);
+        }
+    }
 
+    class LocalFormLoader {
+        #requestMapper;
+        #responseMapper;
+        constructor(requestMapper, responseMapper) {
+            this.#requestMapper = requestMapper;
+            this.#responseMapper = responseMapper;
+        }
+        async prepare(values, form) {
+            return await this.#requestMapper(values, form);
+        }
+        async submit(values, form) {
+            return values;
+        }
+        async transform(response, form) {
+            return await this.#responseMapper(response, form);
         }
     }
 
-    class Form extends ftl.ParsedElement() {
-        static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
-        static SCROLL_OFFSET = 50;
-        static INVALID_CLASS = 'is-invalid';
-        submitter;
+    class FormLoader {
+        static create({ el, http, requestMapper, responseMapper }) {
+            const url = el.getAttribute("action");
+            if (!url) {
+                return new LocalFormLoader(requestMapper, responseMapper);
+            }
+            const method = el.getAttribute("method") ?? 'POST';
+            return new RemoteJsonFormLoader(http, url, method, requestMapper, responseMapper);
+        }
+    }
+
+    class Form extends ftl.ParsedElement {
+        form;
         render() {
-            const form = document.createElement('form');
+            const form = this.form = document.createElement('form');
+            form.setAttribute("novalidate", "");
             ftl.Attributes.forward('form-', this, form);
             form.replaceChildren(...this.childNodes);
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
-                this.spinning(async () => {
-                    await this.submitter?.(this.values, this);
-                });
+                await this.submit();
             });
             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.addEventListener('change', (/** @type any */evt) => {
+                    evt.target.setCustomValidity?.("");
                 });
             }
             this.replaceChildren(form);
         }
+        async submit() {
+            this.spinner(true);
+            try {
+                const loader = Loaders.fromAttributes(this, 'loaders:form');
+                const values = this.values;
+                const request = await loader.prepare(values, this);
+                const se = new CustomEvent('submit', { bubbles: true, cancelable: true, detail: { values, request } });
+                if (!this.dispatchEvent(se)) {
+                    return;
+                }
+                try {
+                    const response = await loader.submit(se.detail.request, this);
+                    const mapped = await loader.transform(response, this);
+                    this.dispatchEvent(new CustomEvent('submit:success', { bubbles: true, cancelable: false, detail: { values, request, response: mapped } }));
+                } catch (e) {
+                    this.dispatchEvent(new CustomEvent('submit:failure', { bubbles: true, cancelable: false, detail: { values, request, exception: e } }));
+                    if (e instanceof Failure) {
+                        this.errors = e.problems;
+                    }
+                    throw e;
+                }
+            } finally {
+                this.spinner(false);
+            }
+        }
         spinner(spin) {
             this.querySelectorAll('ful-spinner').forEach(el => {
                 const hel = /** @type HTMLElement */ (el);
@@ -1213,238 +1315,452 @@ var ful = (function (exports, ftl, TomSelect) {
                 hel.disabled = spin;
             });
         }
-        async remoting(fn) {
-            try {
-                await fn();
-            } catch (e) {
-                if (e instanceof Failure) {
-                    this.errors = e.problems;
-                }
-                throw e;
-            }
-        }
-        async spinningUntilError(fn) {
-            this.spinner(true);
-            try {
-                await this.remoting(fn);
-            } catch (e) {
-                this.spinner(false);
-                throw e;
-            }
-        }
-        async spinning(fn) {
-            this.spinner(true);
-            try {
-                await this.remoting(fn);
-            } finally {
-                this.spinner(false);
-            }
-        }
         set values(vs) {
-            Bindings.mutateIn(this, vs);
+            Bindings.mutateIn(this.form, vs);
         }
         get values() {
-            return Bindings.extractFrom(this, Form.IGNORED_CHILDREN_SELECTOR);
+            return Bindings.extractFrom(this.form);
         }
         set errors(es) {
-            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`))
-                .map(el => el.parentElement ? el.parentElement : el)
-                .map(el => el.getBoundingClientRect().y + window.scrollY);
-            const miny = Math.min(...ys);
-            if (miny !== Infinity) {
-                window.scroll(window.scrollX, miny > Form.SCROLL_OFFSET ? miny - Form.SCROLL_OFFSET : 0);
-            }
+            Bindings.errors(this.form, es, this.hasAttribute('scroll-on-error'));
         }
     }
 
-    const INPUT_TEMPLATE = `
-<div ful-validated-field>
-    <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>
-</div>
-`;
-
-    const makeInputFragment = (el, template, slots) => {
-        const input = el.input = slots.input = slots.input?.firstElementChild ?? (() => {
-            const el = document.createElement("input");
-            el.classList.add("form-control");
-            return el;
-        })();
-        input.setAttribute('ful-validation-target', '');
-        input.addEventListener('change', (evt) => {
-            evt.stopPropagation();
-            el.dispatchEvent(new CustomEvent('change', { 
-                bubbles: true, 
-                cancelable: false, 
-                detail: {
-                    value: el.value
-                }
-            }));
-        });
-        const id = input.getAttribute('id') ?? el.getAttribute('input-id') ?? ftl.Attributes.uid('ful-input');
-        ftl.Attributes.forward('input-', el, slots.input);
-        ftl.Attributes.defaultValue(slots.input, "id", id);
-        ftl.Attributes.defaultValue(slots.input, "type", "text");
-        ftl.Attributes.defaultValue(slots.input, "placeholder", " ");
-        const name = el.getAttribute('name');
-        return template.withOverlay(el, { id, name, slots }).render();
-    };
-
-    class Input extends ftl.ParsedElement({
-        observed: ['value'],
-        slots: true,
-        template: INPUT_TEMPLATE
-    }){
-        input;
-        render({slots}) {
-            const fragment = makeInputFragment(this, this.template(), slots);
+    class Input extends ftl.ParsedElement {
+        static observed = ['value'];
+        static slots = true;
+        static 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>
+            {{{{ slots.before }}}}
+            <input class="form-control" data-tpl-id="id" type="text" placeholder=" " data-tpl-aria-describedby="fieldErrorId" form="">
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
+    `;
+        static formAssociated = true;
+        #input;
+        #fieldError;
+        constructor() {
+            super();
+            this.internals = this.attachInternals();
+        }
+        render({ slots }) {
+            const id = ftl.Attributes.uid('ful-input');
+            const fieldErrorId = `${id}-error`;
+            
+            const fragment = this.template().withOverlay({ id, fieldErrorId, slots }).render();    
+            this.#input = fragment.querySelector("input");
+            ftl.Attributes.forward('input-', this, this.#input);
+            this.#input.addEventListener('change', (evt) => {
+                evt.stopPropagation();
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: {
+                        value: this.value
+                    }
+                }));
+            });
+            this.#fieldError = fragment.querySelector('ful-field-error');
             this.replaceChildren(fragment);
         }
         get value() {
-            return this.input.value;
+            return this.#input.value;
         }
         set value(value) {
-            this.input.value = value;
+            this.#input.value = value;
+        }
+        focus(options) {
+            this.#input.focus(options);
+        }
+        setCustomValidity(error) {
+            if (!error) {
+                this.internals.setValidity({});
+                this.#fieldError.innerText = "";
+                return;
+            }
+            this.internals.setValidity({ customError: true }, " ");
+            this.#fieldError.innerText = error;
         }
     }
 
-    /**
-     * <script src="tom-select.complete.js"></script>
-     * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
-     */
+    class CompleteSelectLoader {
+        #http;
+        #url;
+        #method;
+        #responseMapper;
+        #prefetch;
+        #data;
+        constructor(http, url, method, responseMapper, prefetch) {
+            this.#http = http;
+            this.#url = url;
+            this.#method = method;
+            this.#responseMapper = responseMapper;
+            this.#prefetch = prefetch;
+            this.#data = null;
+        }
+        async prefetch() {
+            if (!this.#prefetch) {
+                return;
+            }
+            await this.#ensureFetched();
+        }
+        async exact(...keys) {
+            await this.#ensureFetched();
+            return this.#data.filter(([k, v]) => keys.includes(k));
+        }
+        async load(needle) {
+            await this.#ensureFetched();
+            return this.#data.filter(([k, v]) => v.includes(needle?.toLowerCase()));
+        }
+        async #ensureFetched() {
+            if (this.#data !== null) {
+                return
+            }
+            const data = await this.#http.request(this.#method, this.#url)
+                .fetchJson();
+            this.#data = this.#responseMapper(data);
+        }
+        static create({ el, http, responseMapper }) {
+            return new CompleteSelectLoader(
+                http,
+                el.getAttribute("src"),
+                el.getAttribute("method") ?? 'POST',
+                responseMapper,
+                el.hasAttribute("preload")
+            );
+        }
+    }
 
-    class Select extends ftl.ParsedElement({
-        observed: ["value"],
-        slots: true,
-        template: `
-        <div ful-validated-field>
-            <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>
-        </div>
-    `
-    }) {
-        shouldLoad;
-        _unwrappedRemoteLoad;
-        ts;
-        constructor(tsConfig) {
-            super();
-            this.tsConfig = tsConfig;
-        }
-        render({slots}) {
-            const type = this.getAttribute("type") ?? 'local';
-            const remote = type != 'local';
-            const loadOnce = this.getAttribute('load') != 'always';
-            const name = this.getAttribute('name');
-            const input = slots.input = slots.input?.firstElementChild ?? (() => {
-                return document.createElement("select");
-            })();
-            input.setAttribute('ful-validation-target', '');
+    class ChunkedSelectLoader {
+        #http;
+        #url;
+        #method;
+        #responseMapper;
+        constructor(http, url, method, responseMapper) {
+            this.#http = http;
+            this.#url = url;
+            this.#method = method;
+            this.#responseMapper = responseMapper;
+        }
+        async exact(...keys) {
+            const data = await this.#http.request(this.#method, this.#url)
+                .param("k", ...keys)
+                .fetchJson();
+            return this.#responseMapper(data);
+        }
+        async load(needle) {
+            const data = await this.#http.request(this.#method, this.#url)
+                .param("s", needle)
+                .fetchJson();
+            return this.#responseMapper(data);
+        }
+        static create({ el, http, responseMapper }) {
+            return new ChunkedSelectLoader(
+                http,
+                el.getAttribute("src"),
+                el.getAttribute("method") ?? 'POST',
+                responseMapper
+            );
+        }
+    }
 
-            const id = input.getAttribute('id') ?? this.getAttribute('input-id') ?? ftl.Attributes.uid('ful-select');
-            const tsId = `${id}-ts-control`;
-            ftl.Attributes.forward('input-', this, input);
-            ftl.Attributes.defaultValue(input, "id", id);
-            ftl.Attributes.defaultValue(input, "placeholder", " ");
+    class OptionsSlotSelectLoader {
+        #data
+        constructor(data) {
+            this.#data = data;
+        }
+        async exact(...keys) {
+            await timing.sleep(500);
+            return this.#data.filter(([k, v]) => keys.includes(k));
+        }
+        async load(needle) {
+            await timing.sleep(500);
+            return this.#data.filter(([k, v]) => v.includes(needle?.toLowerCase()));
+        }
+    }
 
-            //tomselect needs the input to have a parent.
-            //se we move the input to a fragment
-            slots.input = ftl.Fragments.from(input);
 
-            this.loaded = !remote;
+    class SelectLoader {
+        static create(conf) {
+            if (!conf.el.hasAttribute("src")) {
+                const els = Array.from(conf.options.options?.querySelectorAll('option') ?? []);
+                const data = els.map(e => {
+                    return [e.getAttribute("value") ?? e.innerText.trim(), e.innerText.trim()];
+                });
+                return new OptionsSlotSelectLoader(data);
+            }
+            const chunked = "chunked" == conf.el.getAttribute("mode");
+            return chunked ? ChunkedSelectLoader.create(conf) : CompleteSelectLoader.create(conf);
+        }
+    }
 
-            const tsDefaultConfig = {
-                render: {
-                    loading: () => '<ful-spinner class="centered p-2"></ful-spinner>'
+    class Dropdown extends ftl.ParsedElement {
+        static slots = true
+        static template = `
+        <ful-spinner class="centered" hidden></ful-spinner>
+        <menu tabindex="-1" hidden></menu>
+    `;
+        #spinner
+        #menu
+        render({ slots }) {
+            const fragment = this.template().render();
+            this.#spinner = fragment.querySelector("ful-spinner");
+            this.#menu = fragment.querySelector("menu");
+            this.#menu.addEventListener('click', evt => {
+                evt.stopPropagation();
+                if (!evt.target.matches('li')) {
+                    this.hide();
+                    return;
                 }
-            };
+                this.#change(evt.target);
+            });
+            this.replaceChildren(fragment);
+        }
+        acceptSelection() {
+            const selected = this.#menu.querySelector('[selected]') ?? this.#menu.firstElementChild;
+            this.#change(selected);
+        }
+        update(values) {
+            if (values === undefined) {
+                throw new Error("null data");
+            }
+            if (values.length === 0) {
+                const el = document.createElement('div');
+                el.classList.add('text-center', 'py-2', 'bi', 'bi-database-slash');
+                this.#menu.replaceChildren(el);
+                return;
+            }
+            this.#menu.replaceChildren(...values.map(([k, v], i) => {
+                const el = document.createElement('li');
+                if (i === 0) {
+                    el.setAttribute("selected", '');
+                }
+                el.setAttribute("value", k);
+                el.innerText = v;
+                return el;
+            }));
+        }
+        #change(target) {
+            const value = target.getAttribute('value');
+            const label = target.innerText;
+            this.hide();
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                cancelable: false,
+                detail: { label, value }
+            }));
+        }
+        hide() {
+            this.setAttribute('hidden', '');
+        }
+        get shown() {
+            return !this.hasAttribute('hidden');
+        }
+        async show(loader) {
+            this.removeAttribute('hidden');
+            this.#menu.setAttribute('hidden', '');
+            this.#spinner.removeAttribute('hidden');
+            try {
+                const data = await loader();
+                this.update(data);
+            } finally {
+                this.#spinner.setAttribute('hidden', '');
+                this.#menu.removeAttribute('hidden');
+            }
+        }
+        async moveOrShow(forward, loader) {
+            if (!this.hasAttribute("hidden")) {
+                const selected = this.#menu.querySelector('[selected]') ?? this.#menu.firstElementChild;
+                const candidate = selected[`${forward ? 'next' : 'previous'}ElementSibling`];
+                if (candidate) {
+                    selected.removeAttribute('selected');
+                    candidate.setAttribute("selected", "");
+                }
+                return;
+            }
+            await this.show(loader);
+        }
+    }
 
-            this._remote = remote;
-            // we need to await this load in setValue when remote is configured and the option
-            // is not loaded yet.
-            // tomselect settings.load does not retun a promise as it wraps the configured load function
-            // with a debouncer
-            this._unwrappedRemoteLoad = async (query, callback) => {
+    class Select extends ftl.ParsedElement {
+        static observed = ['value:csvm']
+        static slots = true
+        static template = `
+        <label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+        <div class="input-group flex-nowrap" tabindex="-1">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
+            <div class="ful-select-input">
+                <badges></badges>
+                <input data-tpl-id="id" data-tpl-ariadesribed-by="fieldErrorId" type="text" form="">
+            </div>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-dropdown hidden></ful-dropdown>
+        <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
+    `;
+        static mappers = {
+            "csvm": (v, name, el) => {
+                if (el.hasAttribute("multiple")) {
+                    return v === null ? [] : v.split(",").map(e => e.trim()).filter(e => e)
+                }
+                return v === null || v === '' ? null : v
+            }
+        };
+        static formAssociated = true
+        internals
+        #loader
+        #badges
+        #ddmenu
+        #input
+        #multiple
+        #fieldError
+        #values = new Map()
+        constructor() {
+            super();
+            this.internals = this.attachInternals();
+        }
+        async render({ slots, observed }) {
+            const name = this.getAttribute("name");
+            const id = ftl.Attributes.uid('ful-select');
+            const fieldErrorId = id + "-error";
+            this.#loader = Loaders.fromAttributes(this, 'loaders:select', { options: slots.options });
+            await this.#loader.prefetch?.();
+            const fragment = this.template().withOverlay({ slots, name, id, fieldErrorId }).render();
+            this.#input = fragment.querySelector('input');
+            this.#badges = fragment.querySelector('badges');
+            this.#ddmenu = fragment.querySelector('ful-dropdown');
+            this.#multiple = this.hasAttribute("multiple");
+            this.#fieldError = fragment.querySelector('ful-field-error');
 
-                if (!remote || remote && loadOnce && this.loaded) {
-                    callback();
+            const self = this;
+            const [dload, abortdload] = timing.debounce(400, () => self.#ddmenu.show(() => self.#loader.load(self.#input.value)));
+            this.addEventListener('click', (/** @type any */e) => {
+                e.stopPropagation();
+                if (e.target.matches('input')) {
+                    return;
+                }
+                if (this.#ddmenu.shown) {
+                    this.#ddmenu.hide();
                     return;
                 }
-                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') {
-                    this.loaded = true;
+                this.#input.focus();
+                dload();
+            });
+            this.#badges.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const idx = [...this.#badges.children].indexOf(e.target);
+                if (idx === -1) {
+                    return;
                 }
-                callback(data);
-            };
-            this.ts = new TomSelect(input, Object.assign(remote ? {
-                preload: 'focus',
-                load: this._unwrappedRemoteLoad,
-                shouldLoad: (query) => this.shouldLoad ? this.shouldLoad(query) : true
-            } : {}, tsDefaultConfig, this.tsConfig));
-            this.ts.on('change', value => {
-                this.dispatchEvent(new CustomEvent('change', { 
-                    bubbles: true, 
-                    cancelable: false, 
-                    detail: {
-                        value: this.value
+                this.#values.delete(Array.from(this.#values.keys()).pop());
+                this.#syncBadges();
+            });
+
+            this.#input.addEventListener('blur', e => {
+                if (e.relatedTarget && this.contains(e.relatedTarget)) {
+                    return;
+                }
+                abortdload();
+                this.#ddmenu.hide();
+                this.#input.value = '';
+            });
+            this.#input.addEventListener('keydown', e => {
+                switch (e.code) {
+                    case 'ArrowUp': {
+                        this.#ddmenu.moveOrShow(false, () => self.#loader.load(self.#input.value));
+                        break;
                     }
-                }));
+                    case 'ArrowDown': {
+                        this.#ddmenu.moveOrShow(true, () => self.#loader.load(self.#input.value));
+                        break;
+                    }
+                    case 'Escape': {
+                        this.#ddmenu.hide();
+                        break;
+                    }
+                    case 'Enter': {
+                        this.#ddmenu.acceptSelection();
+                        this.#input.value = '';
+                        break;
+                    }
+                    case 'Backspace': {
+                        //remove last if caret a position 0
+                        if (this.#values.size && this.#input.selectionStart === 0 && this.#input.selectionEnd === 0) {
+                            this.#values.delete(Array.from(this.#values.keys()).pop());
+                            this.#syncBadges();
+                        }
+                        break;
+                    }
+                    case 'Tab': {
+                        this.#ddmenu.hide();
+                        abortdload();
+                        break;
+                    }
+                }
             });
-            //we remove the input to move it
-            input.addEventListener('change', (evt) => {
-                evt.stopPropagation();
+            this.#input.addEventListener('input', e => {
+                dload();
             });
-            input.remove();
-            this.template().withOverlay({ id, tsId, name, input, slots }).renderTo(this);
-        }
-        #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");
-            }
+            this.#ddmenu.addEventListener('change', (e) => {
+                if (!this.#multiple) {
+                    this.#values.clear();
+                }
+                this.#values.set(e.detail.value, e.detail.label);
+                this.#syncBadges();
+                this.#input.focus();
+                this.#ddmenu.hide();
+            });
+            this.replaceChildren(fragment);
         }
-        get value() {
-            const v = this.ts.getValue();
-            return v === '' ? null : v;
+        #syncBadges() {
+            const badges = Array.from(this.#values.entries()).map(([k, v]) => {
+                const b = document.createElement('badge');
+                b.setAttribute("role", "button");
+                b.setAttribute("value", k);
+                b.innerText = v;
+                return b;
+            });
+            this.#badges.innerHTML = '';
+            this.#badges.append(...badges);
         }
         set value(value) {
             (async () => {
-                if (this._remote) {
-                    await this._unwrappedRemoteLoad({ byId: value }, this.ts.loadCallback.bind(this.ts));
-                }
-                const silent = true;
-                this.ts.setValue(value, silent);
+                const entries = await (this.#multiple ? this.#loader.exact(...value) : this.#loader.exact(value));
+                this.#values = new Map(entries);
+                this.#syncBadges();
             })();
         }
+        get value() {
+            if (this.#multiple) {
+                return [...this.#values.keys()];
+            }
+            return [...this.#values.keys()][0] ?? null;
+        }
+        focus(options) {
+            this.#input.focus(options);
+        }
+        setCustomValidity(error) {
+            if (!error) {
+                this.internals.setValidity({});
+                this.#fieldError.innerText = "";
+                return;
+            }
+            this.internals.setValidity({ customError: true }, " ");
+            this.#fieldError.innerText = error;
+        }
     }
 
-    class RadioGroup extends ftl.ParsedElement({
-        observed: ['value', 'disabled:presence'],
-        slots: true,
-        template: `
-        <fieldset ful-validated-field>
+    class RadioGroup extends ftl.ParsedElement {
+        static observed = ['value'];
+        static slots = true;
+        static template = `
+        <fieldset data-tpl-aria-describedby="fieldErrorId">
             <legend class="form-label">
                 {{{{ slots.default }}}}
             </legend>
@@ -1459,14 +1775,20 @@ var ful = (function (exports, ftl, TomSelect) {
                     </label>
                 </div>
             </section>
-            <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+            <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
             <footer data-tpl-if="slots.footer">
                 {{{{ slots.footer }}}}
             </footer>
         </fieldset>
-    `
-    }) {
-        render({slots}) {
+    `;
+        static formAssociated = true;
+        #fieldError;
+        #firstRadio;
+        constructor() {
+            super();
+            this.internals = this.attachInternals();
+        }
+        render({ slots }) {
             const name = this.getAttribute('name') ?? ftl.Attributes.uid('ful-radiogroup');
             const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
             const inputsAndLabels = radioEls.map(el => {
@@ -1475,8 +1797,7 @@ var ful = (function (exports, ftl, TomSelect) {
                 ftl.Attributes.forward('input-', this, input);
                 ftl.Attributes.forward('', el, input);
                 input.setAttribute('name', `${name}-ignore`);
-                input.setAttribute('ful-validation-target', '');
-                input.dataset['fulBindInclude'] = 'never';
+                input.setAttribute('form', ``);
                 input.addEventListener('change', evt => {
                     evt.stopPropagation();
                     //change is not cancelable
@@ -1493,14 +1814,11 @@ var ful = (function (exports, ftl, TomSelect) {
             });
 
             radioEls.forEach(el => el.remove());
-            this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
-        }
-        get disabled() {
-            return this.hasAttribute('disabled');
+            const fieldErrorId = ftl.Attributes.uid("ful-error");
+            this.template().withOverlay({ name, fieldErrorId, slots, inputsAndLabels }).renderTo(this);
+            this.#fieldError = this.querySelector('ful-field-error');
+            this.#firstRadio = this.querySelector('input[type=radio]');
         }
-        set disabled(value) {
-            this.reflect(() => ftl.Attributes.toggle(this, 'disabled', value));
-        }    
         get value() {
             /** @type {HTMLInputElement|null} */
             const checked = this.querySelector('input[type=radio]:checked');
@@ -1519,45 +1837,780 @@ var ful = (function (exports, ftl, TomSelect) {
                 el.checked = true;
             }
         }
+        focus(options) {
+            this.#firstRadio.focus(options);
+        }
+        setCustomValidity(error) {
+            if (!error) {
+                this.internals.setValidity({});
+                this.#fieldError.innerText = "";
+                return;
+            }
+            this.internals.setValidity({ customError: true }, " ");
+            this.#fieldError.innerText = error;
+        }
+    }
+
+    class Checkbox extends ftl.ParsedElement {
+        static observed = ['value:bool'];
+        static slots = true;
+        static template = `
+        <div data-tpl-class="klass">
+            <input dat-tpl-id="id" class="form-check-input" type="checkbox" role="switch" form="" placeholder=" " data-tpl-aria-describedby="fieldErrorId">
+            <label data-tpl-for="id" class="form-check-label">{{{{ slots.default }}}}</label>
+        </div>
+        <ful-field-error data-tpl-if="fieldErrorId"></ful-field-error>
+    `;
+        #input;
+        #fieldError;
+        static formAssociated = true;
+        constructor() {
+            super();
+            this.internals = this.attachInternals();
+        }
+        render({ slots }) {
+            const id = ftl.Attributes.uid("ful-checkbox");
+            const fieldErrorId = id + "-error";
+            const klass = this.getAttribute('type') == 'switch' ? "form-check form-switch" : "form-check";
+            const fragment = this.template().withOverlay({ slots, klass, id, fieldErrorId }).render();
+            this.#input = fragment.querySelector("input");
+            ftl.Attributes.forward('input-', this, this.#input);
+            this.#fieldError = fragment.querySelector('ful-field-error');
+            this.#input.addEventListener('change', (evt) => {
+                evt.stopPropagation();
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: {
+                        value: this.value
+                    }
+                }));
+            });        
+            this.replaceChildren(fragment);
+        }
+        get value() {
+            return this.#input.checked;
+        }
+        set value(value) {
+            this.#input.checked = value;
+        }
+        focus(options) {
+            this.#input.focus(options);
+        }
+        setCustomValidity(error) {
+            if (!error) {
+                this.internals.setValidity({});
+                this.#fieldError.innerText = "";
+                return;
+            }
+            this.internals.setValidity({ customError: true }, " ");
+            this.#fieldError.innerText = error;
+        }
     }
 
-    class Spinner extends ftl.ParsedElement({
-        slots: true,
-        template: `
+    class Spinner extends ftl.ParsedElement {
+        static slots = true;
+        static template = `
         <div class="ful-spinner-wrapper">
             <div class="ful-spinner-text">{{{{ slots.default }}}}</div>
             <div class="ful-spinner-icon"></div>
         </div>
-    `
-    }) {
-        render({slots}) {
+    `;
+        render({ slots }) {
             this.template().withOverlay({ slots }).renderTo(this);
         }
     }
 
+    class SortButton extends ftl.ParsedElement {
+        static observed = ["order"];
+        #order;
+        render() {
+            const sorter = this.getAttribute("sorter");
+            const orders = ["asc", "desc", null];
+            this.addEventListener('click', () => {
+                const nextOrder = orders[(orders.indexOf(this.order) + 1) % 3];
+                this.dispatchEvent(new CustomEvent('sort-requested', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        value: { sorter, order: nextOrder }
+                    }
+                }));
+            });
+        }
+
+        get order() {
+            return this.#order || null;
+        }
+
+        set order(value) {
+            this.#order = value || null;
+            this.reflect(() => {
+                if (this.#order) {
+                    this.setAttribute("order", value);
+                } else {
+                    this.removeAttribute("order");
+                }
+            });
+        }
+    }
+
+    class Pagination extends ftl.ParsedElement {
+        static observed = ["total:number", "current:number"];
+        static template = `
+        <nav aria-label="Page navigation" class="user-select-none">
+            <ul class="pagination">
+                <li class="page-item ms-auto me-2" data-tpl-if="paginationLabel"> Showing page {{ curr.label }} of {{ total }}</li>
+                <li class="page-item ms-auto me-2" data-tpl-if="!paginationLabel"></li>
+                <li class="page-item">
+                    <a data-tpl-class="prev.enabled?'page-link':'page-link disabled'" aria-label="Previous" role="button" data-tpl-data-page="prev.index">
+                        <span aria-hidden="true">&laquo;</span>
+                    </a>
+                </li>
+                <li class="page-item" data-tpl-each="pages" data-tpl-var="page">
+                    <a data-tpl-class="curr.index != page.index ? 'page-link': 'page-link disabled'" role="button" data-tpl-data-page="page.index" >
+                        {{ page.label }}
+                    </a>
+                </li>
+                <li class="page-item">
+                    <a data-tpl-class="next.enabled?'page-link':'page-link disabled'" aria-label="Next" role="button" data-tpl-data-page="next.index">
+                        <span aria-hidden="true">&raquo;</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    `;
+        #paginationLabel;
+        #total = 0;
+        #current = 0;
+        render({ observed }) {
+            this.#paginationLabel = this.hasAttribute('pagination-label');
+            this.update(observed.current ?? 0, observed.total ?? 0);
+            this.addEventListener('click', (/** @type any */evt) => {
+                const el = evt.target.closest('a');
+                if (!el) {
+                    return;
+                }
+                this.dispatchEvent(new CustomEvent('page-requested', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        value: Number(el.dataset.page)
+                    }
+                }));
+
+            });
+        }
+        update(current, total) {
+            const maxRender = Number(this.getAttribute('pages') ?? "5");
+            const prev = { index: Math.max(0, current - 1), enabled: current > 0 };
+            const curr = { index: current, label: current + 1 };
+            const next = { index: Math.min(total, current + 1), enabled: current + 1 < total };
+            const pages = [{
+                index: current,
+                label: current + 1
+            }];
+            for (let mid = current, offset = 1; offset !== maxRender && pages.length != maxRender; ++offset) {
+                const p = mid - offset;
+                if (p >= 0) {
+                    pages.unshift({ index: p, label: p + 1 });
+                }
+                const n = mid + offset;
+                if (n < total) {
+                    pages.push({ index: n, label: n + 1 });
+                }
+            }
+            const paginationLabel = this.#paginationLabel;
+            this.template().withOverlay({ total, prev, curr, next, pages, paginationLabel }).renderTo(this);
+        }
+        get total() {
+            return this.#total;
+        }
+        set total(value) {
+            this.#total = value;
+            this.reflect(() => {
+                this.setAttribute('total', String(value));
+                this.update(this.#current ?? 0, this.#total);
+            });
+        }
+        get current() {
+            return this.#current;
+        }
+        set current(value) {
+            this.#current = value;
+            this.reflect(() => {
+                this.setAttribute('current', String(value));
+                this.update(this.#current, this.#total ?? 0);
+            });
+        }
+    }
+
+    class TableSchemaParser {
+        static parse(nodeOrFragment, template) {
+            const schema = ftl.Nodes.queryChildren(nodeOrFragment, "schema");
+            if (!schema) {
+                throw new Error(`missing expected <schema> in ${nodeOrFragment}`);
+            }
+            return ftl.Nodes.queryChildrenAll(schema, "column")
+                .map(el => {
+                    return {
+                        sorter: el.getAttribute("sorter"),
+                        order: el.getAttribute("order"),
+                        title: TableSchemaParser.#parseTitle(el, template),
+                        content: TableSchemaParser.#parseContent(el, template)
+                    }
+                });
+        }
+
+        static #parseTitle(el, template) {
+            const maybeTitleTag = ftl.Nodes.queryChildren(el, 'title');
+            if (maybeTitleTag) {
+                maybeTitleTag.remove();
+            }
+            const fragment = maybeTitleTag ? template.withFragment(ftl.Fragments.fromChildNodes(maybeTitleTag)).render() : document.createTextNode(el.getAttribute("title") ?? '');
+            return {
+                classes: el.getAttribute("th-class"),
+                fragment
+            };
+        }
+
+        static #parseContent(el, template) {
+            return {
+                classes: el.getAttribute("td-class"),
+                template: template.withFragment(ftl.Fragments.fromChildNodes(el))
+            }
+        }
+    }
+
+    class RemoteTableLoader{
+        #http;
+        #url;
+        #method;
+        constructor(http, url, method){
+            this.#http = http;
+            this.#url = url;
+            this.#method = method;
+        }
+        async load(pageRequest, sortRequest, filterRequest){
+            const filters = Object.entries(filterRequest).filter(([k, v]) => v);
+            return await this.#http.request(this.#method, this.#url)
+                .param("page", pageRequest.page)
+                .param("size", pageRequest.size)
+                .param("sort", sortRequest.order ? `${sortRequest.sorter},${sortRequest.order}` : null)
+                .param("filters", filters.length > 0 ? JSON.stringify(Object.fromEntries(filters)) : null)
+                .fetchJson();
+        }    
+    }
+
+
+    class TableLoader{
+        static create({el, http}){
+            const url = el.getAttribute("src");
+            const method = el.getAttribute("method") ?? 'GET';
+            return new RemoteTableLoader(http, url, method);
+        }
+    }
+
+    class Table extends ftl.ParsedElement {
+        static slots = true;
+        static template = `
+        <ful-form data-tpl-if="slots.filters">
+            {{{{ slots.filters }}}}
+        </ful-form>
+        <table class="table">
+            <caption data-tpl-if="slots.caption">{{{{ slots.caption }}}}</caption>
+            <thead>
+                <tr>
+                    <th data-tpl-each="schema" scope="col" data-tpl-class="title.classes">
+                        {{{{ title.fragment }}}}
+                        <ful-sorter data-tpl-if="sorter || order" data-tpl-sorter="sorter" data-tpl-order="order"></ful-sorter>
+                    </th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+            <tbody data-ref="no-autoload">
+                <tr>
+                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                        <i class="bi bi-search" style="font-size: 40px; color: #BDC3CA"></i>
+                        <p class="mt-3 mb-0" style="color: #BDC3CA">
+                            Avvia la ricerca per visualizzare i risultati...
+                        </p>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody data-ref="loading" hidden>
+                <tr>
+                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                        <ful-spinner class="big"></ful-spinner>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody data-ref="feedback" hidden>
+                <tr>
+                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                        <div class="alert alert-danger">
+                            <p>Errore nel caricamento della tabella:</p>
+                            <p class="mb-0" data-ref="feedback-error"></p>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+            <tfoot data-tpl-if="slots.footer">
+                {{{{ slots.footer }}}}
+            </tfoot>
+        </table>
+        <ful-pagination current="0" total="1"></ful-pagination>
+    `;
+        static templates = {
+            row: `
+            <tr data-tpl-if="pageResponse.data.length == 0">
+                <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                    Nessun elemento trovato.
+                </td>
+            </tr>
+            <tr data-tpl-each="pageResponse.data" data-tpl-var="row">
+                <td data-tpl-each="schema" data-tpl-class="content.classes">
+                    {{{{ content.template.withOverlay(row).render() }}}}
+                </td>
+            </tr>
+        `
+        };
+        #schema;
+        #body;
+        #loading;
+        #noAutoload;
+        #feedback;
+        #paginator;
+        #sorters;
+        #latestRequest;
+        async render({ slots, observed }) {
+            const template = this.template();
+            const schema = TableSchemaParser.parse(slots.default, template);
+            const fragment = template.withOverlay({ slots, schema }).render();
+            const table = /** @type HTMLTableElement */ (ftl.Nodes.queryChildren(fragment, 'table'));
+            ftl.Attributes.forward('table-', this, table);
+            this.#schema = schema;
+            this.#body = table.querySelector(':scope > tbody');
+            this.#loading = table.querySelector(":scope > tbody[data-ref=loading]");
+            this.#noAutoload = table.querySelector(":scope > tbody[data-ref=no-autoload]");
+            this.#feedback = table.querySelector(":scope > tbody[data-ref=feedback]");
+            this.#paginator = ftl.Nodes.queryChildren(fragment, 'ful-pagination');
+            this.#sorters = table.querySelectorAll(':scope > thead ful-sorter') ?? [];
+            this.replaceChildren(fragment);
+            await ftl.Nodes.waitForUpgrades();
+            const orderFromSchema = schema.find(v => v.order);
+
+            const maybeForm = /** @type any */(ftl.Nodes.queryChildren(this, 'ful-form'));
+            this.#latestRequest = {
+                pageRequest: {
+                    page: 0,
+                    size: this.getAttribute("page-size") ? Number(this.getAttribute("page-size")) : 10
+                },
+                sortRequest: { order: orderFromSchema?.order, sorter: orderFromSchema?.sorter },
+                filterRequest: maybeForm?.values ?? {}
+            };
+            maybeForm?.addEventListener('submit:success', async (evt) => {
+                await this.load({
+                    page: 0,
+                    size: this.#latestRequest.pageRequest.size
+                }, this.#latestRequest.sortRequest, evt.detail.request);
+            });
+            if (maybeForm) {
+                maybeForm.submitter = async (filterRequest, form) => {
+                };
+            }
+            this.addEventListener('page-requested', async (/** @type any */e) => {
+                await this.load({
+                    page: e.detail.value,
+                    size: this.#latestRequest.pageRequest.size
+                }, this.#latestRequest.sortRequest, this.#latestRequest.filterRequest);
+            });
+            this.addEventListener('sort-requested', async (/** @type any */e) => {
+                await this.load(this.#latestRequest.pageRequest, e.detail.value, this.#latestRequest.filterRequest);
+                this.#sorters.forEach(s => s.order = null);
+                e.target.order = e.detail.value.order;
+            });
+            if (this.hasAttribute('autoload')) {
+                await this.reload();
+            }
+        }
+
+        async reload() {
+            return await this.load(this.#latestRequest.pageRequest, this.#latestRequest.sortRequest, this.#latestRequest.filterRequest);
+        }
+        async load(pageRequest, sortRequest, filterRequest) {
+            this.#body.innerHTML = "";
+            this.#loading.removeAttribute("hidden", "");
+            this.#feedback.setAttribute("hidden", "");
+            this.#noAutoload.setAttribute("hidden", "");
+            try {
+                const loader = Loaders.fromAttributes(this, 'loaders:table');
+                const pageResponse =await loader.load(pageRequest, sortRequest, filterRequest);
+                this.#latestRequest = { pageRequest, sortRequest, filterRequest };
+                this.#update(pageRequest, sortRequest, filterRequest, pageResponse);
+            } catch (/** @type any */error) {
+                this.#loading.setAttribute("hidden", "");
+                this.#feedback.removeAttribute("hidden", "");
+                if (!error.problems) {
+                    this.#feedback.querySelector('[data-ref=feedback-error]').textContent = error;
+                } else {
+                    this.#feedback.querySelector('[data-ref=feedback-error]').textContent = error.problems.map(p => `${p.reason}`);
+                }
+                throw error;
+            }
+        }
+
+        async resetWithFilter(filterRequest) {
+            return await this.load({
+                page: 0,
+                size: this.#latestRequest.pageRequest.size
+            }, this.#latestRequest.sortRequest, filterRequest);
+        }
+
+        #update(pageRequest, sortRequest, filterRequest, pageResponse) {
+            this.#loading.setAttribute("hidden", "");
+            this.#body.replaceChildren(this.template('row').withOverlay({
+                schema: this.#schema,
+                pageRequest,
+                filterRequest,
+                pageResponse
+            }).render());
+            this.#paginator.current = pageRequest.page;
+            this.#paginator.total = Math.ceil(pageResponse.size / pageRequest.size);
+        }
+    }
+
+    class InstantFilter extends ftl.ParsedElement {
+        static observed = ["value:json"];
+        static slots = true;
+        static template = `
+        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <div class="input-group">
+            <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="LTE" form="">&PrecedesSlantEqual;</button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
+                <li><a class="dropdown-item" role="button" value="NEQ">&ne;</a></li>
+                <li><a class="dropdown-item" role="button" value="LT">&prec;</a></li>
+                <li><a class="dropdown-item" role="button" value="GT">&succ;</a></li>
+                <li><a class="dropdown-item" role="button" value="LTE">&PrecedesSlantEqual;</a></li>
+                <li><a class="dropdown-item" role="button" value="GTE">&SucceedsSlantEqual;</a></li>
+                <li><a class="dropdown-item" role="button" value="BETWEEN">&LeftRightArrow;</a></li>
+            </ul>
+            <input data-tpl-id="id" data-ref="value1" type="datetime-local" class="form-control" form="">
+            <input data-ref="value2" type="datetime-local" class="form-control" form="" hidden>
+            <span class="input-group-text"><i class="bi bi-search"></i></span>
+        </div>
+        <ful-field-error></ful-field-error>
+    `;
+        static formAssociated = true;
+        #operator;
+        #value1;
+        #value2;
+        #fieldError;
+        constructor() {
+            super();
+            this.internals = this.attachInternals();
+        }
+        render({ slots }) {
+            const id = ftl.Attributes.uid('instant-filter');
+            const label = ftl.Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
+            const name = this.getAttribute("name");
+            const fragment = this.template().withOverlay({ id, label, name }).render(this);
+            this.#operator = fragment.querySelector('[data-ref=operator]');
+            this.#value1 = fragment.querySelector('[data-ref=value1]');
+            this.#value2 = fragment.querySelector('[data-ref=value2]');
+            this.replaceChildren(fragment);
+            this.#fieldError = this.querySelector('ful-field-error');
+            this.addEventListener('click', (evt) => {
+                const target = /** @type HTMLElement */ (evt.target);
+                if (!target.matches('ul > li > a')) {
+                    return;
+                }
+                const btn = /** @type HTMLButtonElement */ (target.closest('ul')?.previousElementSibling);
+                const value = /** @type String */ (target.getAttribute("value"));
+                ftl.Attributes.toggle(this.#value2, 'hidden', value !== 'BETWEEN');
+                btn.setAttribute('value', value);
+                btn.innerHTML = target.innerHTML;
+            });
+        }
+
+        get value() {
+            const operator = this.#operator.getAttribute('value');
+            const values = operator === 'BETWEEN' ? [this.#value1.value, this.#value2.value] : [this.#value1.value];
+            return values.some(v => v === '') ? undefined : [operator, ...values.map(v => new Date(v).toISOString())];
+        }
+        set value(v) {
+            if (v === null || v === undefined) {
+                this.#value1.value = '';
+                this.#value2.value = '';
+                this.reflect(() => {
+                    this.removeAttribute('value');
+                });
+                return;
+            }
+            const [operator, ...values] = v;
+            this.#operator.setAttribute('value', operator);
+            this.#value1.value = values[0] ? InstantFilter.isoToLocal(values[0]) : values[0];
+            this.#value2.value = values[1] ? InstantFilter.isoToLocal(values[1]) : values[1];
+            this.reflect(() => {
+                this.setAttribute('value', JSON.stringify(v));
+            });
+        }
+
+        static isoToLocal(iso) {
+            //this is so sad
+            const d = new Date(iso);
+            const pad = (n, v) => String(v).padStart(n, '0');
+            const date = `${d.getFullYear()}-${pad(2, d.getMonth() + 1)}-${pad(2, d.getDate())}`;
+            const time = `${pad(2, d.getHours())}:${pad(2, d.getMinutes())}:${pad(2, d.getSeconds())}.${pad(3, d.getMilliseconds())}`;
+            return `${date}T${time}`
+        }
+        focus(options) {
+            this.#value1.focus(options);
+        }
+        setCustomValidity(error) {
+            if (!error) {
+                this.internals.setValidity({});
+                this.#fieldError.innerText = "";
+                return;
+            }
+            this.internals.setValidity({ customError: true }, " ");
+            this.#fieldError.innerText = error;
+        }
+    }
+
+    class LocalDateFilter extends ftl.ParsedElement {
+        static observed = ["value:json"];
+        static slots = true;
+        static template = `
+        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <div class="input-group">
+            <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="EQ" form="">=</button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
+                <li><a class="dropdown-item" role="button" value="NEQ">&ne;</a></li>
+                <li><a class="dropdown-item" role="button" value="LT">&prec;</a></li>
+                <li><a class="dropdown-item" role="button" value="GT">&succ;</a></li>
+                <li><a class="dropdown-item" role="button" value="LTE">&PrecedesSlantEqual;</a></li>
+                <li><a class="dropdown-item" role="button" value="GTE">&SucceedsSlantEqual;</a></li>
+                <li><a class="dropdown-item" role="button" value="BETWEEN">&LeftRightArrow;</a></li>
+            </ul>
+            <input data-tpl-id="id" data-ref="value1" type="date" class="form-control" form="">
+            <input data-ref="value2" type="date" class="form-control" form="" hidden>
+            <span class="input-group-text"><i class="bi bi-search"></i></span>
+
+        </div>
+        <ful-field-error></ful-field-error>
+    `;
+        static formAssociated = true;
+        #operator;
+        #value1;
+        #value2;
+        #fieldError;
+        constructor() {
+            super();
+            this.internals = this.attachInternals();
+        }
+        render({ slots }) {
+            const id = ftl.Attributes.uid('instant-filter');
+            const label = ftl.Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
+            const name = this.getAttribute("name");
+            const fragment = this.template().withOverlay({ id, label, name }).render(this);
+            this.#operator = fragment.querySelector('[data-ref=operator]');
+            this.#value1 = fragment.querySelector('[data-ref=value1]');
+            this.#value2 = fragment.querySelector('[data-ref=value2]');
+            this.replaceChildren(fragment);
+            this.#fieldError = this.querySelector('ful-field-error');
+            this.addEventListener('click', (evt) => {
+                const target = /** @type HTMLElement */(evt.target);
+                if (!target.matches('ul > li > a')) {
+                    return;
+                }
+                const btn = /** @type HTMLButtonElement */ (target.closest('ul')?.previousElementSibling);
+                const value = /** @type String */ (target.getAttribute("value"));
+                ftl.Attributes.toggle(this.#value2, 'hidden', value !== 'BETWEEN');
+                btn.setAttribute('value', value);
+                btn.innerHTML = target.innerHTML;
+            });
+        }
+        get value() {
+            const operator = this.#operator.getAttribute('value');
+            const values = operator == 'BETWEEN' ? [this.#value1.value, this.#value2.value] : [this.#value1.value];
+            return values.some(v => v === '') ? undefined : [operator, "ISO_8601", ...values];
+        }
+        set value(v) {
+            if (v === null || v === undefined) {
+                this.#value1.value = '';
+                this.#value2.value = '';
+                this.reflect(() => {
+                    this.removeAttribute('value');
+                });
+                return;
+            }
+            const [operator, ...values] = v;
+            this.#operator.setAttibute('value', operator);
+            this.#value1.value = values[0];
+            this.#value2.value = values[1];
+            this.reflect(() => {
+                this.setAttribute('value', JSON.stringify(v));
+            });
+        }
+        focus(options) {
+            this.#value1.focus(options);
+        }
+        setCustomValidity(error) {
+            if (!error) {
+                this.internals.setValidity({});
+                this.#fieldError.innerText = "";
+                return;
+            }
+            this.internals.setValidity({ customError: true }, " ");
+            this.#fieldError.innerText = error;
+        }
+    }
+
+    class TextFilter extends ftl.ParsedElement {
+        static observed = ["value:json"];
+        static slots = true;
+        static template = `
+        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <div class="input-group">
+            <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="CONTAINS" form="">&mldr;a&mldr;</button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item" role="button" value="CONTAINS">&mldr;a&mldr;</a></li>
+                <li><a class="dropdown-item" role="button" value="STARTS_WITH">a&mldr;</a></li>
+                <li><a class="dropdown-item" role="button" value="ENDS_WITH">&mldr;a</a></li>
+                <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
+            </ul>
+            <input data-tpl-id="id" data-ref="value" type="text" class="form-control" form="">
+            <span class="input-group-text"><i class="bi bi-search"></i></span>
+        </div>
+        <ful-field-error></ful-field-error>
+    `;
+        static formAssociated = true;
+        #operator;
+        #value;
+        #fieldError;
+        constructor() {
+            super();
+            this.internals = this.attachInternals();
+        }
+        render({ slots }) {
+            const id = ftl.Attributes.uid('string-filter');
+            const label = ftl.Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
+            const name = this.getAttribute("name");
+            const fragment = this.template().withOverlay({ id, label, name }).render(this);
+            this.#operator = fragment.querySelector('[data-ref=operator]');
+            this.#value = fragment.querySelector('[data-ref=value]');
+            this.replaceChildren(fragment);
+            this.#fieldError = this.querySelector('ful-field-error');
+            this.addEventListener('click', (evt) => {
+                const target = /** @type HTMLElement */(evt.target);
+                if (!target.matches('ul > li > a')) {
+                    return;
+                }
+                const btn = /** @type HTMLButtonElement */ (target.closest('ul')?.previousElementSibling);
+                const value = /** @type String */ (target.getAttribute("value"));
+                btn.setAttribute('value', value);
+                btn.innerHTML = target.innerHTML;
+            });
+        }
+
+        get value() {
+            const operator = this.#operator.getAttribute('value');
+            return this.#value.value === '' ? undefined : [operator, 'IGNORE_CASE', this.#value.value];
+        }
+
+        set value(v) {
+            if (v === null || v === undefined) {
+                this.#value.value = '';
+                this.reflect(() => {
+                    this.removeAttribute('value');
+                });
+                return;
+            }
+            const [operator, sensitivity, value] = v;
+            this.#operator.setAttribute('value', operator);
+            this.#value.value = value;
+            this.reflect(() => {
+                this.setAttribute('value', JSON.stringify(v));
+            });
+        }
+        focus(options) {
+            this.#value.focus(options);
+        }
+        setCustomValidity(error) {
+            if (!error) {
+                this.internals.setValidity({});
+                this.#fieldError.innerText = "";
+                return;
+            }
+            this.internals.setValidity({ customError: true }, " ");
+            this.#fieldError.innerText = error;
+        }
+    }
+
+    class Plugin {
+        configure(registry) {
+            const httpClient = HttpClient.builder()
+                .withCsrfToken()
+                .withRedirectOnUnauthorized("/")
+                .build();
+            registry
+                .defineComponent('http-client', httpClient)
+                .defineElement('ful-spinner', Spinner)
+                .defineElement('ful-form', Form)
+                .defineElement('ful-checkbox', Checkbox)
+                .defineElement('ful-input', Input)
+                .defineElement('ful-radio-group', RadioGroup)
+                .defineElement('ful-table', Table)
+                .defineElement('ful-pagination', Pagination)
+                .defineElement('ful-sorter', SortButton)
+                .defineElement('ful-filter-instant', InstantFilter)
+                .defineElement('ful-filter-local-date', LocalDateFilter)
+                .defineElement('ful-filter-text', TextFilter)
+                .defineElement('ful-select', Select)
+                .defineElement('ful-dropdown', Dropdown)
+                .defineComponent("loaders:select", SelectLoader)
+                .defineComponent("loaders:form", FormLoader)
+                .defineComponent("loaders:table", TableLoader);
+        }
+    }
+
     exports.AuthorizationCodeFlow = AuthorizationCodeFlow;
     exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
     exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;
     exports.Base64 = Base64;
     exports.Bindings = Bindings;
+    exports.Checkbox = Checkbox;
+    exports.Dropdown = Dropdown;
     exports.Failure = Failure;
     exports.Form = Form;
+    exports.FormLoader = FormLoader;
     exports.Hex = Hex;
     exports.HttpClient = HttpClient;
     exports.HttpClientError = HttpClientError;
-    exports.INPUT_TEMPLATE = INPUT_TEMPLATE;
     exports.Input = Input;
+    exports.InstantFilter = InstantFilter;
+    exports.Loaders = Loaders;
+    exports.LocalDateFilter = LocalDateFilter;
     exports.LocalStorage = LocalStorage;
     exports.MediaType = MediaType;
+    exports.Pagination = Pagination;
+    exports.Plugin = Plugin;
     exports.RadioGroup = RadioGroup;
     exports.Select = Select;
+    exports.SelectLoader = SelectLoader;
     exports.SessionStorage = SessionStorage;
+    exports.SortButton = SortButton;
     exports.Spinner = Spinner;
+    exports.Table = Table;
+    exports.TableSchemaParser = TableSchemaParser;
+    exports.TextFilter = TextFilter;
     exports.VersionedStorage = VersionedStorage;
-    exports.makeInputFragment = makeInputFragment;
     exports.timing = timing;
 
     return exports;
 
-})({}, ftl, window?.TomSelect || {});
+})({}, ftl);
 //# sourceMappingURL=ful.iife.js.map