@optionfactory/ful 0.104.0 → 1.0.0

package/dist/ful.mjs

@@ -1,5 +1,4 @@
-import { ParsedElement, Attributes, Fragments } from '@optionfactory/ftl';
-import TomSelect from 'tom-select';
+import { registry, ParsedElement, Attributes, Fragments, Nodes } from '@optionfactory/ftl';
 
 class Base64 {
     static encode(arrayBuffer, dialect) {
@@ -66,10 +65,10 @@ class Hex {
     }
     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 +120,6 @@ class MediaType {
     }
 }
 
-
 /**
  * @typedef {Int8Array| Uint8Array| Uint8ClampedArray| Int16Array| Uint16Array| Int32Array| Uint32Array| Float32Array| Float64Array| BigInt64Array| BigUint64Array} TypedArray
  */
@@ -390,7 +388,6 @@ const unmarshal = async (response, type) => {
     }
 };
 
-
 class HttpRequestBuilder {
     #client;
     #method;
@@ -451,7 +448,7 @@ class HttpRequestBuilder {
                 this.#headers.delete(k);
             } else {
                 this.#headers.set(k, v);
-            }    
+            }
         }
         return this;
     }
@@ -485,16 +482,17 @@ class HttpRequestBuilder {
         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 +537,6 @@ class HttpRequestBuilder {
      */
     options(kvs) {
         for (const [k, v] of Object.entries(kvs)) {
-            // @ts-ignore
             this.#options[k] = v;
         }
         return this;
@@ -647,7 +644,6 @@ class HttpRequestBuilder {
     }
 }
 
-
 class HttpMultipartRequestCustomizer {
     #formData;
     /**
@@ -744,14 +740,14 @@ class SessionStorage extends Storage {
 }
 
 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 +760,13 @@ class VersionedStorage {
         });
         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 +774,15 @@ class AuthorizationCodeFlow {
             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 +803,10 @@ class AuthorizationCodeFlow {
         });
         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 +863,8 @@ class AuthorizationCodeFlowSession {
             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 +924,9 @@ class AuthorizationCodeFlowSession {
     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 +954,21 @@ const timing = {
     },
     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 +986,7 @@ const timing = {
             }
         };
 
-        return function () {
+        const debounced = function () {
             args = [...arguments];
             previousTimestamp = new Date().getTime();
             if (tid === null) {
@@ -990,15 +996,23 @@ const timing = {
                 }
             }
         };
+        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 +1022,7 @@ const timing = {
                 args = [];
             }
         };
-
-        return function () {
+        const throttled = function () {
             const now = new Date().getTime();
             if (!previousTimestamp && (opts & timing.THROTTLE_NO_LEADING)) {
                 previousTimestamp = now;
@@ -1030,10 +1043,27 @@ const timing = {
                 tid = setTimeout(later, remaining);
             }
         };
-
+        const abort = () => clearTimeout(tid);
+        return [throttled, abort];
     }
 };
 
+class Loaders {
+    static fromAttributes(el, defaultLoader, options) {
+        const http = registry.component("http-client");
+        const requestMapper = el.hasAttribute("request-mapper") ? registry.component(el.getAttribute("request-mapper")) : v => v;
+        const responseMapper = el.hasAttribute("response-mapper") ? registry.component(el.getAttribute("response-mapper")) : v => v;
+        const loaderClass = registry.component(el.getAttribute("loader") ?? defaultLoader);
+        return loaderClass.create({
+            el,
+            http,
+            requestMapper,
+            responseMapper,
+            options: options ?? {}
+        });
+    }
+}
+
 class Bindings {
 
     /**
@@ -1108,13 +1138,15 @@ class Bindings {
         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 +1171,139 @@ class Bindings {
         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 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 ParsedElement {
+    form;
     render() {
-        const form = document.createElement('form');
+        const form = this.form = document.createElement('form');
+        form.setAttribute("novalidate", "");
         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 +1314,452 @@ class Form extends ParsedElement() {
             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') ?? Attributes.uid('ful-input');
-    Attributes.forward('input-', el, slots.input);
-    Attributes.defaultValue(slots.input, "id", id);
-    Attributes.defaultValue(slots.input, "type", "text");
-    Attributes.defaultValue(slots.input, "placeholder", " ");
-    const name = el.getAttribute('name');
-    return template.withOverlay(el, { id, name, slots }).render();
-};
-
-class Input extends ParsedElement({
-    observed: ['value'],
-    slots: true,
-    template: INPUT_TEMPLATE
-}){
-    input;
-    render({slots}) {
-        const fragment = makeInputFragment(this, this.template(), slots);
+class Input extends 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 = Attributes.uid('ful-input');
+        const fieldErrorId = `${id}-error`;
+        
+        const fragment = this.template().withOverlay({ id, fieldErrorId, slots }).render();    
+        this.#input = fragment.querySelector("input");
+        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 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') ?? Attributes.uid('ful-select');
-        const tsId = `${id}-ts-control`;
-        Attributes.forward('input-', this, input);
-        Attributes.defaultValue(input, "id", id);
-        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 = 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 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 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 = 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 ParsedElement({
-    observed: ['value', 'disabled:presence'],
-    slots: true,
-    template: `
-        <fieldset ful-validated-field>
+class RadioGroup extends ParsedElement {
+    static observed = ['value'];
+    static slots = true;
+    static template = `
+        <fieldset data-tpl-aria-describedby="fieldErrorId">
             <legend class="form-label">
                 {{{{ slots.default }}}}
             </legend>
@@ -1459,14 +1774,20 @@ class RadioGroup extends ParsedElement({
                     </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') ?? Attributes.uid('ful-radiogroup');
         const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
         const inputsAndLabels = radioEls.map(el => {
@@ -1475,8 +1796,7 @@ class RadioGroup extends ParsedElement({
             Attributes.forward('input-', this, input);
             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 +1813,11 @@ class RadioGroup extends ParsedElement({
         });
 
         radioEls.forEach(el => el.remove());
-        this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
+        const fieldErrorId = 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(() => Attributes.toggle(this, 'disabled', value));
-    }    
     get value() {
         /** @type {HTMLInputElement|null} */
         const checked = this.querySelector('input[type=radio]:checked');
@@ -1519,21 +1836,745 @@ class RadioGroup extends ParsedElement({
             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 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 = 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");
+        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 ParsedElement({
-    slots: true,
-    template: `
+class Spinner extends 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);
     }
 }
 
-export { AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Failure, Form, Hex, HttpClient, HttpClientError, INPUT_TEMPLATE, Input, LocalStorage, MediaType, RadioGroup, Select, SessionStorage, Spinner, VersionedStorage, makeInputFragment, timing };
+class SortButton extends 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 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 = Nodes.queryChildren(nodeOrFragment, "schema");
+        if (!schema) {
+            throw new Error(`missing expected <schema> in ${nodeOrFragment}`);
+        }
+        return 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 = Nodes.queryChildren(el, 'title');
+        if (maybeTitleTag) {
+            maybeTitleTag.remove();
+        }
+        const fragment = maybeTitleTag ? template.withFragment(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(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 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 */ (Nodes.queryChildren(fragment, 'table'));
+        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 = Nodes.queryChildren(fragment, 'ful-pagination');
+        this.#sorters = table.querySelectorAll(':scope > thead ful-sorter') ?? [];
+        this.replaceChildren(fragment);
+        await Nodes.waitForUpgrades();
+        const orderFromSchema = schema.find(v => v.order);
+
+        const maybeForm = /** @type any */(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 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 = Attributes.uid('instant-filter');
+        const label = 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"));
+            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 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 = Attributes.uid('instant-filter');
+        const label = 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"));
+            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 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 = Attributes.uid('string-filter');
+        const label = 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);
+    }
+}
+
+export { AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Checkbox, Dropdown, Failure, Form, FormLoader, Hex, HttpClient, HttpClientError, Input, InstantFilter, Loaders, LocalDateFilter, LocalStorage, MediaType, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, TextFilter, VersionedStorage, timing };
 //# sourceMappingURL=ful.mjs.map