@optionfactory/fml 8.0.0

package/dist/ful.mjs

@@ -0,0 +1,2780 @@
+import { ParsedElement, Attributes, registry, Fragments, Templates, Nodes, Rendering } from './ftl.mjs';
+import { Failure, HttpClient } from './httpc.mjs';
+
+class LocalStorage extends Storage {
+    static save(k, v) {
+        localStorage.setItem(k, JSON.stringify(v));
+    }
+    static load(k) {
+        const got = localStorage.getItem(k);
+        return got === null ? undefined : JSON.parse(got);
+    }
+    static remove(k) {
+        localStorage.removeItem(k);
+    }
+    static pop(k) {
+        const decoded = LocalStorage.load(k);
+        LocalStorage.remove(k);
+        return decoded;
+    }
+}
+
+class SessionStorage extends Storage {
+    static save(k, v) {
+        sessionStorage.setItem(k, JSON.stringify(v));
+    }
+    static load(k) {
+        const got = sessionStorage.getItem(k);
+        return got === null ? undefined : JSON.parse(got);
+    }
+    static remove(k) {
+        sessionStorage.removeItem(k);
+    }
+    static pop(k) {
+        const decoded = SessionStorage.load(k);
+        SessionStorage.remove(k);
+        return decoded;
+    }
+}
+
+class VersionedLocalStorage {
+    static save(key, revision, data) {
+        LocalStorage.save(key, { revision, data });
+    }
+    static load(key, revision) {
+        const stored = LocalStorage.load(key);
+        if (stored === undefined) {
+            return undefined;
+        }
+        if (stored.revision !== revision) {
+            localStorage.removeItem(key);
+            return undefined;
+        }
+        return stored.data;
+    }
+}
+
+class VersionedSessionStorage {
+    static save(key, revision, data) {
+        SessionStorage.save(key, { revision, data });
+    }
+    static load(key, revision) {
+        const stored = SessionStorage.load(key);
+        if (stored === undefined) {
+            return undefined;
+        }
+        if (stored.revision !== revision) {
+            localStorage.removeItem(key);
+            return undefined;
+        }
+        return stored.data;
+    }
+}
+
+/**
+ * @typedef {Object} AsyncExtension
+ * @property {Promise<any>[]} promises
+ * @typedef {Event & { async?: AsyncExtension }} AsyncEvent
+ */
+class AsyncEvents {
+    /**
+     * Dispatches an event and handles asynchronous resolution based on the execution mode.
+     * @param {HTMLElement} el - The target element dispatching the event.
+     * @param {AsyncEvent} evt - The event instance.
+     * @param {{mode?: 'broadcast' | 'pipeline' | 'delegate'}} [options] - Configuration options (defaults to 'broadcast').
+     * @returns {Promise<any>} Resolves with an array of values for broadcasts, a single value for pipelines/delegates, or undefined.
+     */
+    static async fireAsync(el, evt, options) {
+        el.dispatchEvent(evt);
+        const promises = evt.async?.promises ?? [];
+        const mode = options?.mode ?? 'broadcast';
+        if (mode === 'pipeline' && promises.length > 1) {
+            throw new Error(
+                `[AsyncEvents] Event "${evt.type}" is configured in 'pipeline' mode and expects at most one async listener, but ${promises.length} listeners were triggered on this element.`,
+            );
+        }
+        if (mode === 'delegate' && promises.length !== 1) {
+            throw new Error(
+                `[AsyncEvents] Event "${evt.type}" is configured in 'delegate' mode and requires exactly one async listener, but ${promises.length} were registered.`,
+            );
+        }
+        return mode === 'broadcast' ? Promise.all(promises) : Promise.resolve(promises[0]);
+    }
+
+    /**
+     * Registers an asynchronous event listener wrapper.
+     * @param {HTMLElement} el - The target element.
+     * @param {string} type - The event name/type.
+     * @param {Function} fn - The async listener middleware function returning the execution result.
+     * @param {AddEventListenerOptions} [options] - Native addEventListener options.
+     * @returns {EventListener} The underlying proxy listener function needed for cleanup via asyncOff.
+     */
+    static asyncOn(el, type, fn, options) {
+        /** @type {(evt: Event) => Promise<void>} */
+        const listener = async (event) => {
+            const ae = /** @type {AsyncEvent} */ (event);
+            if (!ae.async) {
+                ae.async = { promises: [] };
+            }
+            const { promise, resolve, reject } = Promise.withResolvers();
+            ae.async.promises.push(promise);
+            try {
+                resolve(await fn(ae));
+            } catch (e) {
+                reject(e);
+            }
+        };
+
+        el.addEventListener(type, listener, options);
+        return listener;
+    }
+
+    /**
+     * Unregisters an asynchronous event listener proxy.
+     * @param {HTMLElement} el - The target element.
+     * @param {string} type - The event name/type.
+     * @param {EventListener} listener - The proxy listener instance previously returned by asyncOn.
+     * @param {EventListenerOptions} [options] - Native removeEventListener options.
+     */
+    static asyncOff(el, type, listener, options) {
+        el.removeEventListener(type, listener, options);
+    }
+
+    /**
+     * Mixes the asynchronous execution engine extensions into target class prototypes.
+     * @param {...Function} classes - The target class constructors to decorate.
+     */
+    static mixInto(...classes) {
+        for (const k of classes) {
+            Object.assign(k.prototype, {
+                /**
+                 * @this {HTMLElement}
+                 * @param {AsyncEvent} evt
+                 * @param {{mode?: 'broadcast' | 'pipeline' | 'delegate'}} [options]
+                 * @returns {Promise<any>}
+                 */
+                async fireAsync(evt, options) {
+                    return await AsyncEvents.fireAsync(this, evt, options);
+                },
+
+                /**
+                 * @this {HTMLElement}
+                 * @param {string} type
+                 * @param {Function} fn
+                 * @param {AddEventListenerOptions} [options]
+                 * @returns {EventListener}
+                 */
+                asyncOn(type, fn, options) {
+                    return AsyncEvents.asyncOn(this, type, fn, options);
+                },
+
+                /**
+                 * @this {HTMLElement}
+                 * @param {string} type
+                 * @param {EventListener} listener
+                 * @param {EventListenerOptions} [options]
+                 * @returns {void}
+                 */
+                asyncOff(type, listener, options) {
+                    AsyncEvents.asyncOff(this, type, listener, options);
+                },
+            });
+        }
+    }
+}
+
+class Timing {
+    static sleep(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    static DEBOUNCE_DEFAULT = 0;
+    static DEBOUNCE_IMMEDIATE = 1;
+    /**
+     * Executes only after a period of inactivity (pause in events).
+     * Respond to the "end" of a series of events.
+     * @param {*} timeoutMs
+     * @param {*} func
+     * @param {*} [options]
+     * @returns {[function, function]}
+     */
+    static debounce(timeoutMs, func, options) {
+        const opts = options ?? Timing.DEBOUNCE_DEFAULT;
+        let tid = null;
+        let args = [];
+        let previousTimestamp = 0;
+
+        const later = () => {
+            const elapsed = performance.now() - previousTimestamp;
+            if (timeoutMs > elapsed) {
+                tid = setTimeout(later, timeoutMs - elapsed);
+                return;
+            }
+            tid = null;
+            if (opts !== Timing.DEBOUNCE_IMMEDIATE) {
+                func(...args);
+            }
+            // This check is needed because `func` can recursively invoke `debounced`.
+            if (tid === null) {
+                args = [];
+            }
+        };
+
+        const debounced = function () {
+            args = [...arguments];
+            previousTimestamp = performance.now();
+            if (tid === null) {
+                tid = setTimeout(later, timeoutMs);
+                if (opts === Timing.DEBOUNCE_IMMEDIATE) {
+                    func(...args);
+                }
+            }
+        };
+        const abort = () => clearTimeout(tid);
+        return [debounced, abort];
+    }
+    static THROTTLE_DEFAULT = 0;
+    static THROTTLE_NO_LEADING = 1;
+    static THROTTLE_NO_TRAILING = 2;
+    /**
+     * Executes at most once per specified time interval, regardless of ongoing events.
+     * @param {*} timeoutMs
+     * @param {*} func
+     * @param {*} [options]
+     * @returns {[function, function]}
+     */
+    static throttle(timeoutMs, func, options) {
+        const opts = options ?? Timing.THROTTLE_DEFAULT;
+        let tid = null;
+        let args = [];
+        let previousTimestamp = 0;
+
+        const later = () => {
+            previousTimestamp = opts & Timing.THROTTLE_NO_LEADING ? 0 : performance.now();
+            tid = null;
+            func(...args);
+            if (tid === null) {
+                args = [];
+            }
+        };
+        const throttled = function () {
+            const now = performance.now();
+            if (!previousTimestamp && opts & Timing.THROTTLE_NO_LEADING) {
+                previousTimestamp = now;
+            }
+            const remaining = previousTimestamp === 0 ? 0 : timeoutMs - (now - previousTimestamp);
+            args = [...arguments];
+            if (remaining <= 0 || remaining > timeoutMs) {
+                if (tid !== null) {
+                    clearTimeout(tid);
+                    tid = null;
+                }
+                previousTimestamp = now;
+                func(...args);
+                if (tid === null) {
+                    args = [];
+                }
+            } else if (tid === null && !(opts & Timing.THROTTLE_NO_TRAILING)) {
+                tid = setTimeout(later, remaining);
+            }
+        };
+        const abort = () => clearTimeout(tid);
+        return [throttled, abort];
+    }
+}
+
+class Bindings {
+    /**
+     * @param {{ [x: string]: any; }} obj
+     * @param {string} prefix
+     * @param {Set<String>} stops
+     * @return {{ [x: string]: any; }}
+     */
+    static flatten(obj, prefix, stops) {
+        return Object.keys(obj).reduce((acc, k) => {
+            const pre = prefix.length ? prefix + '.' + k : k;
+            if (!stops.has(pre) && typeof obj[k] === 'object' && obj[k] !== null) {
+                Object.assign(acc, Bindings.flatten(obj[k], pre, stops));
+            } else {
+                acc[pre] = obj[k];
+            }
+            return acc;
+        }, {});
+    }
+
+    /**
+     * @param {any} result
+     * @param {string} path
+     * @param {any} value
+     */
+    static providePath(result, path, value) {
+        const keys = path.split('.').map((k) => (/^[0-9]+$/.test(k) ? +k : k));
+        let current = result ?? {};
+        let previous = null;
+        for (let i = 0; ; ++i) {
+            const ckey = keys[i];
+            const pkey = keys[i - 1];
+            if (Number.isInteger(ckey) && !Array.isArray(current)) {
+                if (previous !== null) {
+                    previous[pkey] = current = [];
+                } else {
+                    result = current = [];
+                }
+            }
+            if (i === keys.length - 1) {
+                //when value is undefined we only want to define the property if it's not defined
+                current[ckey] = value !== undefined ? value : ckey in current ? current[ckey] : null;
+                return result;
+            }
+            if (current[ckey] === undefined) {
+                current[ckey] = {};
+            }
+            previous = current;
+            current = current[ckey];
+        }
+    }
+    /**
+     *
+     * @param {Element & {dataset?: any} & {checked?: boolean} & {value?: any}} el
+     * @returns
+     */
+    static extract(el) {
+        if (el.getAttribute('type') === 'radio') {
+            if (!el.checked) {
+                return undefined;
+            }
+            return el.dataset['fulBindType'] === 'boolean' ? el.value === 'true' : el.value;
+        }
+        if (el.getAttribute('type') === 'checkbox') {
+            return el.checked;
+        }
+        if (el.dataset['fulBindType'] === 'boolean') {
+            return !el.value ? null : el.value === 'true';
+        }
+        if (el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA') {
+            return el.value === '' || el.value === undefined ? null : el.value;
+        }
+        return el.value;
+    }
+
+    /**
+     *
+     * @param {HTMLFormElement} form
+     * @param {HTMLElement} [submitter]
+     * @returns
+     */
+    static extractFrom(form, submitter) {
+        let result = {};
+        for (const el of form.elements) {
+            // we are assuming submitters are disabled during submit.
+            if (!el.hasAttribute('name') || (el.matches(':disabled') && el !== submitter)) {
+                continue;
+            }
+            result = Bindings.providePath(
+                result,
+                /** @type {string} */ (el.getAttribute('name')),
+                Bindings.extract(el),
+            );
+        }
+        return result;
+    }
+
+    /**
+     *
+     * @param {Element  & {checked?: boolean} & {value?: any}} el
+     * @returns
+     */
+    static mutate(el, raw) {
+        if (el.getAttribute('type') === 'radio') {
+            el.checked = el.getAttribute('value') === raw;
+            return;
+        }
+        if (el.getAttribute('type') === 'checkbox') {
+            el.checked = raw;
+            return;
+        }
+        el.value = raw;
+    }
+
+    static mutateIn(form, values) {
+        const names = Array.from(form.elements)
+            .map((el) => el.getAttribute('name'))
+            .filter((n) => n);
+        for (const [flattenedKey, value] of Object.entries(Bindings.flatten(values, '', new Set(names)))) {
+            for (const el of form.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)) {
+                Bindings.mutate(el, value);
+            }
+        }
+    }
+
+    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');
+        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(/\[/g, '.').replace(/\]\./g, '.').replace(/\]/g, '');
+            const parts = name.split('.');
+            for (let i = parts.length; i != 0; --i) {
+                const prefix = parts.slice(0, i).join('.');
+                const suffix = parts.slice(i, parts.length).join('.');
+                form.querySelectorAll(`[name='${CSS.escape(prefix)}']`).forEach((input) =>
+                    input.setCustomValidity?.(e.reason, suffix),
+                );
+            }
+        });
+        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, response) {
+        return response;
+    }
+    async transform(response, form) {
+        return await this.#responseMapper(response, form);
+    }
+}
+
+class FormLoader {
+    static create(el, conf) {
+        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 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 = (this.form = document.createElement('form'));
+        form.setAttribute('novalidate', '');
+        Attributes.forward('form-', this, form);
+        form.replaceChildren(...this.childNodes);
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            await this.submit(e.submitter ?? undefined);
+        });
+        if (this.hasAttribute('clear-invalid-on-change')) {
+            this.addEventListener('change', (/** @type any */ evt) => {
+                evt.target.setCustomValidity?.('');
+            });
+        }
+        this.replaceChildren(form);
+    }
+    /**
+     *
+     * @param {HTMLElement} [submitter]
+     * @returns
+     */
+    async submit(submitter) {
+        this.spinner(true);
+        try {
+            const loader = registry.component(this.getAttribute('loader') ?? 'loaders:form').create(this);
+            const values = Bindings.extractFrom(this.form, submitter);
+            let request = await loader.prepare(values, this);
+            try {
+                const se = new CustomEvent('submit', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: { submitter, values, request },
+                });
+                if (!this.dispatchEvent(se)) {
+                    return;
+                }
+                this.errors = [];
+                const sre = new CustomEvent('submit:requested', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: { submitter, values: se.detail.values, request: se.detail.request },
+                });
+                let response = await AsyncEvents.fireAsync(this, sre, { mode: 'pipeline' });
+                request = sre.detail.request;
+
+                response = await loader.submit(request, this, response);
+                const mapped = await loader.transform(response, this);
+                this.dispatchEvent(
+                    new CustomEvent('submit:success', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { submitter, values, request, response: mapped },
+                    }),
+                );
+            } catch (e) {
+                this.dispatchEvent(
+                    new CustomEvent('submit:failure', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { submitter, values, request, exception: e },
+                    }),
+                );
+                if (e instanceof Failure) {
+                    this.errors = e.problems;
+                }
+                console.warn('failed to submit form', this, 'reason:', e);
+            }
+        } finally {
+            this.spinner(false);
+        }
+    }
+    reset() {
+        this.form.reset();
+    }
+    spinner(spin) {
+        this.querySelectorAll('ful-spinner').forEach((el) => {
+            const hel = /** @type HTMLElement */ (el);
+            hel.hidden = !spin;
+        });
+        this.querySelectorAll('input,button').forEach((el) => {
+            const hel = /** @type HTMLButtonElement|HTMLInputElement */ (el);
+            if (hel.type !== 'submit' && hel.type !== 'reset') {
+                return;
+            }
+            if (spin) {
+                hel.dataset.wd = String(hel.disabled);
+                hel.disabled = true;
+            } else {
+                hel.disabled = hel.dataset.wd === 'true';
+                delete hel.dataset.wd;
+            }
+        });
+    }
+    set values(vs) {
+        Bindings.mutateIn(this.form, vs);
+    }
+    get values() {
+        return Bindings.extractFrom(this.form);
+    }
+    set errors(es) {
+        Bindings.errors(this.form, es, this.hasAttribute('scroll-on-error'));
+    }
+}
+
+class Input extends ParsedElement {
+    static observed = ['value', 'readonly:presence', 'required:presence'];
+    static slots = true;
+    static template = `
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
+            {{{{ slots.info }}}}
+        </div>
+        <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
+            <input data-tpl-if="type != 'textarea'" class="form-control" data-tpl-type="type" placeholder=" " form="">
+            <textarea data-tpl-if="type == 'textarea'" class="form-control" placeholder=" " form=""></textarea>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-field-error></ful-field-error>
+    `;
+    static formAssociated = true;
+    _input;
+    _fieldError;
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+        this.internals.role = 'presentation';
+    }
+    _type() {
+        return this.getAttribute('type') ?? 'text';
+    }
+    _fragment(type, slots) {
+        return this.template().withOverlay({ type, slots }).render();
+    }
+    render({ slots, observed, disabled, skipObservedSetup }) {
+        const type = this._type();
+        const fragment = this._fragment(type, slots);
+        this._input = fragment.querySelector('input,textarea');
+
+        Attributes.forward('input-', this, this._input);
+        if (!skipObservedSetup) {
+            this.disabled = disabled;
+            this.readonly = observed.readonly;
+            this.required = observed.required;
+            this.value = observed.value;
+        }
+        this._input.addEventListener('keydown', (evt) => {
+            if (evt.key !== 'Enter' || this._type() === 'textarea') {
+                return;
+            }
+            const form = this.internals.form;
+            if (!form) {
+                return;
+            }
+            const candidates = /** @type [HTMLButtonElement|HTMLInputElement] */ (
+                Array.from(form.querySelectorAll('button:not(:disabled), input:not(:disabled)'))
+            );
+            const submitter = candidates.find((el) => el.type === 'submit');
+            form.requestSubmit(submitter);
+        });
+        this._input.addEventListener('input', (evt) => {
+            const re = this.getAttribute('mask');
+            if (!re) {
+                return;
+            }
+            const before = evt.target.value;
+            const after = before.replace(new RegExp(re, 'g'), '');
+            if (before === after) {
+                return;
+            }
+            const start = evt.target.selectionStart;
+            const offset = before.length - after.length;
+            evt.target.value = after;
+            evt.target.setSelectionRange(start - offset, start - offset);
+        });
+        this._input.addEventListener('change', (evt) => {
+            evt.stopPropagation();
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: {
+                        value: this.value,
+                    },
+                }),
+            );
+        });
+        const label = fragment.querySelector('label');
+        label.addEventListener('click', () => this.focus());
+        this._fieldError = fragment.querySelector('ful-field-error');
+        this._input.ariaDescribedByElements = [this._fieldError];
+        this._input.ariaLabelledByElements = [label];
+        this.replaceChildren(fragment);
+    }
+    get value() {
+        const uppercase = this.hasAttribute('uppercase');
+        const trim = this.hasAttribute('trim');
+        const v = this._input.value;
+        const uppercased = uppercase ? v.toUpperCase() : v;
+        const trimmed = trim ? uppercased.trim() : uppercased;
+        return trimmed === '' ? null : trimmed;
+    }
+    set value(value) {
+        this._input.value = value === '' ? null : value;
+    }
+    get readonly() {
+        return this._input.readOnly;
+    }
+    set readonly(v) {
+        this._input.readOnly = v;
+        this.reflect(() => {
+            Attributes.toggle(this, 'readonly', v);
+        });
+    }
+    get disabled() {
+        return this._input.hasAttribute('disabled');
+    }
+    set disabled(d) {
+        Attributes.toggle(this._input, 'disabled', d);
+    }
+    get required() {
+        return this._input.getAttribute('aria-required') === 'true';
+    }
+    set required(d) {
+        Attributes.set(this._input, 'aria-required', d ? 'true' : null);
+        this.reflect(() => {
+            Attributes.toggle(this, 'required', d);
+        });
+    }
+    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;
+    }
+    formResetCallback() {
+        this.value = this.unmarshal('value', this.getAttribute('value'));
+    }
+}
+
+class LocalDate extends ParsedElement {
+    render() {
+        const content = this.innerHTML.trim();
+        if (content === '') {
+            this.innerHTML = this.getAttribute('default') ?? '';
+            return;
+        }
+        const locale = this.getAttribute('locale') ?? Intl.DateTimeFormat().resolvedOptions().locale;
+        const formatter = new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'numeric', day: 'numeric' });
+        const [y, m, d] = content.split('-').map(Number);
+        this.innerHTML = formatter.format(new Date(y, m - 1, d));
+    }
+}
+
+class Instant extends ParsedElement {
+    render() {
+        const content = this.innerHTML.trim();
+        if (content === '') {
+            this.innerHTML = this.getAttribute('default') ?? '';
+            return;
+        }
+        const locale = this.getAttribute('locale') ?? Intl.DateTimeFormat().resolvedOptions().locale;
+        const format = new Intl.DateTimeFormat(locale, {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+            hour12: false,
+        });
+        this.innerHTML = format.format(new Date(Instant.isoToLocal(content)));
+    }
+    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}`;
+    }
+}
+
+class InputLocalDate extends Input {
+    static observed = ['value', 'readonly:presence', 'required:presence', 'min', 'max', 'step'];
+    _type() {
+        return 'date';
+    }
+    render(conf) {
+        const { observed } = conf;
+        super.render(conf);
+        this.min = observed.min;
+        this.max = observed.max;
+        this.step = observed.step;
+    }
+    get min() {
+        const v = this._input.min;
+        return v === '' ? null : v;
+    }
+    set min(v) {
+        this._input.min = InputLocalDate.#fromIsoOrOffset(v);
+    }
+    get max() {
+        const v = this._input.max;
+        return v === '' ? null : v;
+    }
+    set max(v) {
+        this._input.max = InputLocalDate.#fromIsoOrOffset(v);
+    }
+    get step() {
+        const v = this._input.step;
+        return v === '' ? null : v;
+    }
+    set step(v) {
+        this._input.step = v ?? '';
+    }
+    static #fromIsoOrOffset(v) {
+        if (!v) {
+            return '';
+        }
+        //this could be date.toLocaleDateString('en-CA')
+        const formatLocalDate = (date) =>
+            new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().split('T')[0];
+        if (v === 'now') {
+            return formatLocalDate(new Date());
+        }
+        const re = /^([+-])(\d+)([dmy])$/;
+        const match = re.exec(v);
+        if (!match) {
+            return v;
+        }
+        const sign = match[1] === '-' ? -1 : 1;
+        const offset = +match[2];
+        const r = new Date();
+        r.setHours(0, 0, 0, 0);
+        switch (match[3]) {
+            case 'd':
+                r.setDate(r.getDate() + offset * sign);
+                break;
+            case 'm':
+                const originalDay = r.getDate();
+                r.setMonth(r.getMonth() + offset * sign);
+                if (r.getDate() !== originalDay) {
+                    r.setDate(0);
+                }
+                break;
+            case 'y':
+                r.setFullYear(r.getFullYear() + offset * sign);
+                break;
+        }
+        return formatLocalDate(r);
+    }
+}
+
+class InputLocalTime extends InputLocalDate {
+    _type() {
+        return 'time';
+    }
+}
+
+class InputInstant extends Input {
+    static observed = ['value', 'readonly:presence', 'required:presence', 'min', 'max', 'step'];
+    _type() {
+        return 'datetime-local';
+    }
+    render(conf) {
+        const { observed } = conf;
+        super.render(conf);
+        this.min = observed.min;
+        this.max = observed.max;
+        this.step = observed.step;
+    }
+    get value() {
+        const v = this._input.value;
+        return v === '' ? null : new Date(v).toISOString();
+    }
+    set value(v) {
+        this._input.value = v ? Instant.isoToLocal(v) : '';
+    }
+    get min() {
+        const v = this._input.min;
+        return v === '' ? null : new Date(v).toISOString();
+    }
+    set min(v) {
+        this._input.min = v ? Instant.isoToLocal(v) : '';
+    }
+    get max() {
+        const v = this._input.max;
+        return v === '' ? null : new Date(v).toISOString();
+    }
+    set max(v) {
+        this._input.max = v ? Instant.isoToLocal(v) : '';
+    }
+    get step() {
+        const v = this._input.step;
+        return v === '' ? null : v;
+    }
+    set step(v) {
+        this._input.step = v ?? '';
+    }
+}
+
+class InputFile extends Input {
+    static l10n = {
+        en: {
+            dropzonelabel: 'Click or drop your files here',
+            unaccepptablefiletype: 'Only files of type {0} are supported',
+            maxfilesizeexceeded: 'Maximum supported file size is {0}',
+            maxtotalsizeexceeded: 'Maximum supported total file size is {0}',
+            maxfilesexceeded: 'Maximum files count exceeded',
+        },
+        it: {
+            dropzonelabel: 'Clicca o trascina i file qui',
+            unaccepptablefiletype: 'Solo i file di tipo {0} sono supportati',
+            maxfilesizeexceeded: 'La dimensione massima di un file è di {0}',
+            maxtotalsizeexceeded: 'La dimensione massima complessiva dei file è di {0}',
+            maxfilesexceeded: 'Numero massimo di file superato',
+        },
+        es: {
+            dropzonelabel: 'Haz clic o arrastra tus archivos aquí',
+            unaccepptablefiletype: 'Solo se admiten archivos de tipo {0}',
+            maxfilesizeexceeded: 'El tamaño máximo de archivo admitido es {0}',
+            maxtotalsizeexceeded: 'El tamaño total máximo admitido es {0}',
+            maxfilesexceeded: 'Se ha superado el número máximo de archivos',
+        },
+        fr: {
+            dropzonelabel: 'Cliquez ou déposez vos fichiers ici',
+            unaccepptablefiletype: 'Seuls les fichiers de type {0} sont pris en charge',
+            maxfilesizeexceeded: 'La taille maximale de fichier prise en charge est {0}',
+            maxtotalsizeexceeded: 'La taille totale maximale prise en charge est {0}',
+            maxfilesexceeded: 'Nombre maximal de fichiers dépassé',
+        },
+    };
+    static observed = [
+        'value',
+        'readonly:presence',
+        'required:presence',
+        'accept:csv',
+        'multiple:presence',
+        'itemlist:presence',
+        'dropzone:presence',
+        'maxfiles:number',
+        'maxfilesize:number',
+        'maxtotalsize:number',
+    ];
+    #accept;
+    #items;
+    #dropzone;
+    #warnings;
+    _type() {
+        return 'file';
+    }
+    static template = `
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
+            {{{{ slots.info }}}}
+        </div>
+        <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-type="type" placeholder=" " form="">
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <div data-ref="dropzone" class="dropzone" data-tpl-if="slots.dropzone">
+            {{{{ slots.dropzone }}}}
+        </div>
+        <div data-ref="dropzone" class="default-dropzone" data-tpl-if="!slots.dropzone">
+            {{ #l10n:t('dropzonelabel') }}
+        </div>
+        <ful-item-list></ful-item-list>
+        <ful-field-warnings></ful-field-warnings>
+        <ful-field-error></ful-field-error>
+    `;
+    static templates = {
+        items: `
+            <ful-item data-tpl-each="files" data-tpl-var="file" data-tpl-data-name="file.name">
+                <div>{{ file.name }}</div>
+                <div>{{ #bytes:format(file.size) }}</div>
+                <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg" alt="Rimuovi"></button>
+            </ful-item>
+        `,
+        warning: `<ful-field-warning>{{ #l10n:t(key, args) }}</ful-field-warning>`,
+    };
+    render(conf) {
+        const { observed } = conf;
+        super.render(conf);
+        this.#items = this.querySelector('ful-item-list');
+        this.#dropzone = this.querySelector('[data-ref=dropzone]');
+        this.#warnings = this.querySelector('ful-field-warnings');
+        this.accept = observed.accept;
+        this.multiple = observed.multiple;
+        this.itemlist = observed.itemlist;
+        this.dropzone = observed.dropzone;
+        this.maxfiles = observed.maxfiles;
+        this.maxfilesize = observed.maxfilesize;
+        this.maxtotalsize = observed.maxtotalsize;
+        this.#warnings.addEventListener('animationend', (e) => {
+            e.target.remove();
+        });
+        this.#items.addEventListener('click', (e) => {
+            if (!e.target.closest('button')) {
+                return;
+            }
+            const fileName = e.target.closest('ful-item').dataset.name;
+            const dt = new DataTransfer();
+            [...this.files].filter((f) => f.name !== fileName).forEach((f) => dt.items.add(f));
+            this.files = dt.files;
+            this.#update();
+        });
+        this.#dropzone.addEventListener('click', (e) => {
+            this.querySelector('input')?.click();
+        });
+
+        this.#dropzone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+        });
+        this.#dropzone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            const dt = new DataTransfer();
+            [...e.dataTransfer.items].filter((i) => i.kind === 'file').forEach((i) => dt.items.add(i.getAsFile()));
+            this.files = dt.files;
+            this.#update();
+        });
+        this._input.addEventListener('change', (e) => {
+            this.#update();
+        });
+    }
+    #formatByteSize(v) {
+        return v > 1024 * 1024
+            ? `${Math.round((v / 1024 / 1024) * 100) / 100}MiB`
+            : v > 1024
+              ? `${Math.round((v / 1024) * 100) / 100}KiB`
+              : `${v}B`;
+    }
+    #update() {
+        this.setCustomValidity();
+        this.#ensureAcceptable();
+        this.#ensureFileSizes();
+        this.#ensureTotalSize();
+        this.#ensureFilesCount();
+        this.template('items')
+            .withOverlay({ files: this.files })
+            .withModule('bytes', { format: this.#formatByteSize })
+            .renderTo(this.#items);
+    }
+    warning(key, args) {
+        this.template('warning').withOverlay({ key, args }).renderTo(this.#warnings);
+    }
+    #ensureAcceptable() {
+        if (!this.#accept.length) {
+            return;
+        }
+        const unacceptable = [...this.files].filter(
+            (file) => !this.#accept.some((type) => file.name.toLowerCase().endsWith(type.toLowerCase())),
+        );
+
+        if (unacceptable.length === 0) {
+            return;
+        }
+        this.warning('unaccepptablefiletype', this.#accept.join(', '));
+        const dt = new DataTransfer();
+        [...this.files].filter((f) => !unacceptable.includes(f)).forEach((f) => dt.items.add(f));
+        this.files = dt.files;
+    }
+    #ensureFilesCount() {
+        if (this.#maxfiles === null) {
+            return;
+        }
+        if (this.files.length <= this.#maxfiles) {
+            return;
+        }
+        this.warning('maxfilesexceeded');
+        const dt = new DataTransfer();
+        this.files = dt.files;
+    }
+
+    #ensureFileSizes() {
+        if (this.#maxfilesize === null) {
+            return;
+        }
+        const oversized = [...this.files].filter((file) => file.size > this.#maxfilesize);
+        if (oversized.length === 0) {
+            return;
+        }
+        this.warning('maxfilesizeexceeded', this.#formatByteSize(this.#maxfilesize));
+        const dt = new DataTransfer();
+        [...this.files].filter((f) => !oversized.includes(f)).forEach((f) => dt.items.add(f));
+        this.files = dt.files;
+    }
+    #ensureTotalSize() {
+        if (this.#maxtotalsize === null) {
+            return;
+        }
+        const totalSize = [...this.files].reduce((acc, file) => acc + file.size, 0);
+        if (totalSize <= this.#maxtotalsize) {
+            return;
+        }
+        this.warning('maxtotalsizeexceeded', this.#formatByteSize(this.#maxtotalsize));
+        this.files = new DataTransfer().files;
+    }
+    get accept() {
+        return this.#accept;
+    }
+    set accept(vs) {
+        this._input.accept = vs.join(',');
+        this.#accept = vs;
+        this.reflect(() => {
+            this.setAttribute('accept', this._input.accept);
+        });
+    }
+    get multiple() {
+        return this._input.multiple;
+    }
+    set multiple(v) {
+        this._input.multiple = v;
+        this.reflect(() => {
+            Attributes.toggle(this, 'multiple', v);
+        });
+    }
+    get files() {
+        return this._input.files;
+    }
+    set files(vs) {
+        this._input.files = vs;
+    }
+    get file() {
+        return this.files[0] ?? null;
+    }
+    set file(v) {
+        const dt = new DataTransfer();
+        if (v) {
+            dt.items.add(v);
+        }
+        this.files = dt.files;
+    }
+    get value() {
+        const names = Array.from(this._input.files).map((f) => f.name);
+        return this.multiple ? names : (names[0] ?? null);
+    }
+    set value(v) {
+        if (v) {
+            return;
+        }
+        this.files = new DataTransfer().files;
+        this.#update();
+    }
+    get totalsize() {
+        return Array.from(this.files).reduce((a, f) => a + f.size, 0);
+    }
+    #maxfiles;
+    get maxfiles() {
+        return this.#maxfiles;
+    }
+    set maxfiles(v) {
+        this.#maxfiles = v;
+        this.reflect(() => {
+            Attributes.set(this, 'maxfiles', v);
+        });
+    }
+    #maxfilesize;
+    get maxfilesize() {
+        return this.#maxfilesize;
+    }
+    set maxfilesize(v) {
+        this.#maxfilesize = v;
+        this.reflect(() => {
+            Attributes.set(this, 'maxfilesize', v);
+        });
+    }
+    #maxtotalsize;
+    get maxtotalsize() {
+        return this.#maxtotalsize;
+    }
+    set maxtotalsize(v) {
+        this.#maxtotalsize = v;
+        this.reflect(() => {
+            Attributes.set(this, 'maxtotalsize', v);
+        });
+    }
+    #useItemlist;
+    get itemlist() {
+        return this.#useItemlist;
+    }
+    set itemlist(v) {
+        this.#useItemlist = v;
+        this.reflect(() => {
+            Attributes.toggle(this, 'itemlist', v);
+        });
+    }
+    #useDropzone;
+    get dropzone() {
+        return this.#useDropzone;
+    }
+    set dropzone(v) {
+        this.#useDropzone = v;
+        this.reflect(() => {
+            Attributes.toggle(this, 'dropzone', v);
+        });
+    }
+}
+
+class RemoteLoader {
+    #http;
+    #url;
+    #method;
+    #responseMapper;
+    #prefetch;
+    #revision;
+    #data;
+    constructor({ http, url, method, responseMapper, prefetch, revision }) {
+        this.#http = http;
+        this.#url = url;
+        this.#method = method;
+        this.#responseMapper = responseMapper;
+        this.#prefetch = prefetch;
+        this.#revision = revision;
+        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.some((r) => r == k));
+    }
+    async load(needle) {
+        await this.#ensureFetched();
+        return this.#data.filter(([k, v]) => (v ?? '').toLowerCase().includes(needle?.toLowerCase()));
+    }
+    async reconfigureUrl(url) {
+        this.#data = null;
+        this.#url = url;
+    }
+    async #ensureFetched() {
+        if (this.#data !== null) {
+            return;
+        }
+        const raw = await RemoteLoader.#revisionedData(this.#http, this.#method, this.#url, this.#revision);
+        this.#data = this.#responseMapper(raw);
+    }
+    static async #revisionedData(http, method, url, revision) {
+        const storageKey = `${method}@${url}`;
+        if (revision !== null) {
+            const data = VersionedLocalStorage.load(storageKey, revision);
+            if (data !== undefined) {
+                return data;
+            }
+        }
+        const data = await http.request(method, url).fetchJson();
+        if (revision !== null) {
+            VersionedLocalStorage.save(storageKey, revision, data);
+        }
+        return data;
+    }
+}
+
+class PartialRemoteLoader {
+    #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 response = await this.#http
+            .request(this.#method, this.#url)
+            .param('k', ...keys)
+            .fetchJson();
+        return this.#responseMapper(response);
+    }
+    async load(needle) {
+        const response = await this.#http.request(this.#method, this.#url).param('s', needle).fetchJson();
+        return this.#responseMapper(response);
+    }
+}
+
+class InMemoryLoader {
+    #data;
+    constructor(data) {
+        this.#data = data;
+    }
+    update(data) {
+        this.#data = data;
+    }
+    exact(...keys) {
+        return this.#data.filter(([k, v]) => keys.some((r) => r == k));
+    }
+    load(needle) {
+        return this.#data.filter(([k, v]) => (v ?? '').toLowerCase().includes(needle?.toLowerCase()));
+    }
+}
+
+class SelectLoader {
+    static create(el, conf) {
+        if (!el.hasAttribute('src')) {
+            const els = Array.from(conf.options?.querySelectorAll('option') ?? []);
+            const data = els.map((e) => {
+                return [e.getAttribute('value') ?? e.innerText.trim(), e.innerText.trim()];
+            });
+            return new InMemoryLoader(data);
+        }
+        const http = registry.component('http-client');
+        const responseMapper = SelectLoader.#responseMapperFrom(el);
+
+        if ('chunked' == el.getAttribute('mode')) {
+            return new PartialRemoteLoader({
+                http,
+                url: el.getAttribute('src'),
+                method: el.getAttribute('method') ?? 'POST',
+                responseMapper,
+            });
+        }
+        return new RemoteLoader({
+            http,
+            url: el.getAttribute('src'),
+            method: el.getAttribute('method') ?? 'POST',
+            responseMapper,
+            prefetch: el.hasAttribute('preload'),
+            revision: el.getAttribute('revision'),
+        });
+    }
+    static #responseMapperFrom(el) {
+        if (el.hasAttribute('k-expr') && el.hasAttribute('l-expr')) {
+            return (response) => {
+                const rows = registry
+                    .evaluator()
+                    .withOverlay(response)
+                    .evaluateExpression(el.getAttribute('d-expr') ?? 'self');
+                return rows.map((row) => {
+                    const evaluator = registry.evaluator().withOverlay(row);
+                    return [
+                        evaluator.evaluateExpression(el.getAttribute('k-expr')),
+                        evaluator.evaluateExpression(el.getAttribute('l-expr')),
+                        evaluator.evaluateExpression(el.getAttribute('m-expr') ?? 'self'),
+                    ];
+                });
+            };
+        }
+        if (el.hasAttribute('response-mapper')) {
+            return registry.component(el.getAttribute('response-mapper'));
+        }
+        return (response) => response;
+    }
+}
+
+class Dropdown extends ParsedElement {
+    static slots = true;
+    static template = `
+        <ful-spinner class="centered" hidden></ful-spinner>
+        <menu tabindex="-1" role="listbox" hidden></menu>
+    `;
+    static templates = {
+        options: `
+            <li data-tpl-each="self" data-tpl-selected="index == 0" data-tpl-value="index" role="option" data-tpl-aria-selected="index == 0 ? 'true' : 'false'">
+                {{ label }}
+            </li>
+        `,
+    };
+    #spinner;
+    #menu;
+    #optionstemplate;
+    #options = new Map();
+    render({ slots }) {
+        const fragment = this.template().render();
+        this.#optionstemplate = Fragments.isBlank(slots.default)
+            ? this.template('options')
+            : Templates.fromFragment(slots.default);
+        this.#spinner = fragment.querySelector('ful-spinner');
+        this.#menu = fragment.querySelector('menu');
+        this.#menu.addEventListener('click', (evt) => {
+            evt.stopPropagation();
+            const li = evt.target.closest('li');
+            if (!li) {
+                this.hide();
+                return;
+            }
+            this.#change(li);
+        });
+        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');
+        }
+        this.#options = new Map(values.map((v, i) => [String(i), v]));
+        const data = values.map(([key, label, metadata], index) => ({ index, key, label, metadata }));
+        this.#optionstemplate.withOverlay(data).renderTo(this.#menu);
+    }
+    #change(target) {
+        const index = target.getAttribute('value');
+        const data = this.#options.get(index);
+        this.hide();
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                bubbles: true,
+                cancelable: false,
+                detail: { index, data },
+            }),
+        );
+    }
+    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.shown) {
+            const selected = this.#menu.querySelector('[selected]') ?? this.#menu.firstElementChild;
+            const candidate = selected[`${forward ? 'next' : 'previous'}ElementSibling`];
+            if (candidate) {
+                selected.removeAttribute('selected');
+                candidate.setAttribute('selected', '');
+                candidate.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+            return;
+        }
+        await this.show(loader);
+    }
+}
+
+class Select extends ParsedElement {
+    static observed = ['value:csvm', 'readonly:presence', 'required:presence', 'itemlist:presence'];
+    static slots = true;
+    static template = `
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
+            {{{{ slots.info }}}}
+        </div>
+        <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-container">
+                <div class="ful-select-input">
+                    <badges></badges>
+                    <input type="text" form="" role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false">
+                </div>
+                <ful-dropdown hidden popover="manual">{{{{ slots.dropdown }}}}</ful-dropdown>
+            </div>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-item-list></ful-item-list>
+        <ful-field-error></ful-field-error>
+    `;
+    static templates = {
+        items: `
+            <ful-item data-tpl-each="entries" data-tpl-var="entry" data-tpl-data-key="entry[0]">
+                <div>{{ entry[1][0] }}</div>
+                <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
+            </ful-item>
+        `,
+    };
+    static formAssociated = true;
+    internals;
+    #loader;
+    #badges;
+    #ddmenu;
+    #input;
+    #items;
+    #multiple;
+    #fieldError;
+    #values = new Map();
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+        this.internals.role = 'presentation';
+    }
+    async render({ slots, observed, disabled }) {
+        const name = this.getAttribute('name');
+        this.#loader = registry
+            .component(this.getAttribute('loader') ?? 'loaders:select')
+            .create(this, { options: slots.options });
+
+        this.#multiple = this.hasAttribute('multiple');
+        await this.#loader.prefetch?.();
+        const fragment = this.template().withOverlay({ slots, name }).render();
+        this.#input = fragment.querySelector('input');
+        this.#items = fragment.querySelector('ful-item-list');
+        Attributes.forward('input-', this, this.#input);
+        this.#badges = fragment.querySelector('badges');
+
+        this.value = observed.value;
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.required = observed.required;
+        this.itemlist = observed.itemlist;
+
+        this.#ddmenu = fragment.querySelector('ful-dropdown');
+        const label = fragment.querySelector('label');
+        label.addEventListener('click', () => this.focus());
+        this.#fieldError = fragment.querySelector('ful-field-error');
+        this.#input.ariaDescribedByElements = [this.#fieldError];
+        this.#input.ariaLabelledByElements = [label];
+
+        const self = this;
+        const [dload, abortdload] = Timing.throttle(400, () => {
+            self.#input.setAttribute('aria-expanded', 'true');
+            self.#ddmenu.show(() => self.#loader.load(self.#input.value));
+        });
+        this.addEventListener('click', (/** @type any */ e) => {
+            if (e.target.matches('input')) {
+                return;
+            }
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (this.#ddmenu.shown) {
+                this.#input.setAttribute('aria-expanded', 'false');
+                this.#ddmenu.hide();
+                return;
+            }
+            this.#input.focus();
+            dload();
+        });
+        this.#items.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (!e.target.closest('button')) {
+                return;
+            }
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));
+            if (idx === -1) {
+                return;
+            }
+            this.#values.delete(Array.from(this.#values.keys())[idx]);
+            this.#changed();
+            this.#syncBadges();
+        });
+        this.#badges.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const idx = [...this.#badges.children].indexOf(e.target);
+            if (idx === -1) {
+                return;
+            }
+            this.#values.delete(Array.from(this.#values.keys())[idx]);
+            this.#changed();
+            this.#syncBadges();
+        });
+        this.#input.addEventListener('change', (e) => {
+            e.stopPropagation();
+        });
+        this.#input.addEventListener('blur', (e) => {
+            e.stopPropagation();
+            if (e.relatedTarget && this.contains(e.relatedTarget)) {
+                return;
+            }
+            abortdload();
+            this.#input.setAttribute('aria-expanded', 'false');
+            this.#ddmenu.hide();
+            this.#input.value = '';
+        });
+        this.#input.addEventListener('keydown', (e) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            switch (e.code) {
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    this.#input.setAttribute('aria-expanded', 'true');
+                    this.#ddmenu.moveOrShow(false, () => self.#loader.load(self.#input.value));
+                    break;
+                }
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    this.#input.setAttribute('aria-expanded', 'true');
+                    this.#ddmenu.moveOrShow(true, () => self.#loader.load(self.#input.value));
+                    break;
+                }
+                case 'Escape': {
+                    this.#input.setAttribute('aria-expanded', 'false');                    
+                    this.#ddmenu.hide();
+                    break;
+                }
+                case 'Enter': {
+                    e.preventDefault();
+                    this.#input.setAttribute('aria-expanded', 'false');
+                    this.#ddmenu.acceptSelection();
+                    this.#input.value = '';
+                    break;
+                }
+                case 'Backspace': {
+                    //remove last if caret at position 0
+                    if (this.#values.size && this.#input.selectionStart === 0 && this.#input.selectionEnd === 0) {
+                        this.#values.delete(Array.from(this.#values.keys()).pop());
+                        this.#changed();
+                        this.#syncBadges();
+                    }
+                    break;
+                }
+                case 'Tab': {
+                    this.#input.setAttribute('aria-expanded', 'false');
+                    this.#ddmenu.hide();
+                    abortdload();
+                    break;
+                }
+            }
+        });
+        this.#input.addEventListener('input', (e) => {
+            e.stopPropagation();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            dload();
+        });
+        this.#ddmenu.addEventListener('change', (e) => {
+            e.stopPropagation();
+            if (!this.#multiple) {
+                this.#values.clear();
+            }
+            this.#values.set(e.detail.data[0], e.detail.data.slice(1));
+            this.#changed();
+            this.#syncBadges();
+            this.#input.focus();
+            this.#input.setAttribute('aria-expanded', 'false');
+            this.#ddmenu.hide();
+            this.#input.value = '';
+        });
+        this.replaceChildren(fragment);
+    }
+    async withLoader(fn) {
+        return await fn(this.#loader);
+    }
+    #changed() {
+        const selection = [...this.#values.entries()].map((e) => ({
+            key: e[0],
+            label: e[1][0],
+            metadata: e[1].slice(1),
+        }));
+        const value = this.#multiple ? selection : (selection[0] ?? null);
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                bubbles: true,
+                cancelable: false,
+                detail: { value },
+            }),
+        );
+    }
+    #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[0];
+            return b;
+        });
+        this.#badges.replaceChildren();
+        this.#badges.append(...badges);
+        this.#items.replaceChildren();
+        this.template('items').withOverlay({ entries: this.#values.entries() }).renderTo(this.#items);
+    }
+    set value(vs) {
+        if (vs === null) {
+            this.#values = new Map();
+            this.#syncBadges();
+            return;
+        }
+        (async () => {
+            const entries = await (this.#multiple ? this.#loader.exact(...vs) : this.#loader.exact(vs));
+            this.#values = new Map(entries.map((e) => [e[0], e.slice(1)]));
+            this.#syncBadges();
+        })();
+    }
+    get value() {
+        if (this.#multiple) {
+            return [...this.#values.keys()];
+        }
+        return [...this.#values.keys()][0] ?? null;
+    }
+    get entry() {
+        if (this.#multiple) {
+            return [...this.#values.entries()];
+        }
+        return [...this.#values.entries()][0] ?? null;
+    }
+    get disabled() {
+        return this.#input.hasAttribute('disabled');
+    }
+    set disabled(d) {
+        Attributes.toggle(this.#input, 'disabled', d);
+    }
+    get readonly() {
+        return this.#input.readOnly;
+    }
+    set readonly(v) {
+        this.#input.readOnly = v;
+        this.reflect(() => {
+            Attributes.toggle(this, 'readonly', v);
+        });
+    }
+    get required() {
+        return this.#input.getAttribute('aria-required') === 'true';
+    }
+    set required(d) {
+        Attributes.set(this.#input, 'aria-required', d ? 'true' : null);
+        this.reflect(() => {
+            Attributes.toggle(this, 'required', d);
+        });
+    }
+    #useItemlist;
+    get itemlist() {
+        return this.#useItemlist;
+    }
+    set itemlist(v) {
+        this.#useItemlist = v;
+        this.reflect(() => {
+            Attributes.toggle(this, 'itemlist', v);
+        });
+    }
+    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 {
+    static observed = ['value', 'readonly:presence', 'required:presence'];
+    static slots = true;
+    static template = `
+        <fieldset>
+            <legend class="form-label">
+                {{{{ slots.default }}}}
+            </legend>
+            <header data-tpl-if="slots.header">
+                {{{{ slots.header }}}}
+            </header>
+            <section>
+                <div class="label-wrapper" data-tpl-each="inputsAndLabels" data-tpl-var="ial">
+                    <label>
+                        {{{{ ial[0] }}}}
+                        <div>{{{{ ial[1] }}}}</div>
+                    </label>
+                </div>
+            </section>
+            <ful-field-error></ful-field-error>
+            <footer data-tpl-if="slots.footer">
+                {{{{ slots.footer }}}}
+            </footer>
+        </fieldset>
+    `;
+    static formAssociated = true;
+    #fieldset;
+    #fieldError;
+    #firstRadio;
+    #booleanType;
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+        this.internals.role = 'radiogroup';
+    }
+    render({ slots, observed, disabled }) {
+        const name = this.getAttribute('name') ?? Attributes.uid('ful-radiogroup');
+        const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
+        const inputsAndLabels = radioEls.map((el) => {
+            const input = document.createElement('input');
+            input.setAttribute('type', 'radio');
+            Attributes.forward('input-', this, input);
+            Attributes.forward('', el, input);
+            input.setAttribute('name', `${name}-ignore`);
+            input.setAttribute('form', ``);
+            input.addEventListener('change', (evt) => {
+                evt.stopPropagation();
+                //change is not cancelable
+                this.dispatchEvent(
+                    new CustomEvent('change', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: {
+                            value: this.value,
+                        },
+                    }),
+                );
+            });
+            const label = Fragments.fromChildNodes(el);
+            return [input, label];
+        });
+
+        radioEls.forEach((el) => el.remove());
+        this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
+        this.#fieldset = this.firstElementChild;
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.required = observed.required;
+        this.value = observed.value;
+        this.#fieldError = this.querySelector('ful-field-error');
+        this.ariaDescribedByElements = [this.#fieldError];
+        this.#firstRadio = this.querySelector('input[type=radio]');
+        this.#booleanType = this.getAttribute('type') === 'boolean';
+    }
+    get value() {
+        /** @type {HTMLInputElement|null} */
+        const checked = this.querySelector('input[type=radio]:checked');
+        return checked ? (this.#booleanType ? checked.value === 'true' : checked.value) : null;
+    }
+    set value(value) {
+        if (value === null) {
+            this.querySelectorAll(`input[type=radio]`).forEach((el) => {
+                /** @type {HTMLInputElement} */ (el).checked = false;
+            });
+            return;
+        }
+        /** @type {HTMLInputElement|null} */
+        const el = this.querySelector(`input[type=radio][value=${CSS.escape(String(value))}]`);
+        if (el) {
+            el.checked = true;
+        }
+    }
+    get readonly() {
+        return this.#fieldset.inert;
+    }
+    set readonly(v) {
+        this.#fieldset.inert = v;
+        this.reflect(() => {
+            Attributes.toggle(this, 'readonly', v);
+        });
+    }
+    get disabled() {
+        return this.#fieldset.hasAttribute('disabled');
+    }
+    set disabled(d) {
+        Attributes.toggle(this.#fieldset, 'disabled', d);
+    }
+    get required() {
+        return this.#fieldset.getAttribute('aria-required') === 'true';
+    }
+    set required(d) {
+        Attributes.set(this.#fieldset, 'aria-required', d ? 'true' : null);
+        this.reflect(() => {
+            Attributes.toggle(this, 'required', d);
+        });
+    }
+    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', 'readonly:presence', 'required:presence'];
+    static slots = true;
+    static template = `
+        <div data-tpl-class="klass">
+            <div class="input-container">
+                <input class="form-check-input" type="checkbox" data-tpl-role="isSwitch ? 'switch' : false" form="" placeholder=" ">
+            </div>
+            <div class="form-check-label">
+                <label>{{{{ slots.default }}}}</label>
+                {{{{ slots.info }}}}
+            </div>
+        </div>
+        <ful-field-error></ful-field-error>
+    `;
+    #container;
+    #input;
+    #fieldError;
+    static formAssociated = true;
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+        this.internals.role = 'presentation';
+    }
+    render({ slots, observed, disabled }) {
+        const isSwitch = this.getAttribute('type') == 'switch';
+        const klass = isSwitch ? 'form-check form-switch' : 'form-check';
+        const fragment = this.template().withOverlay({ slots, klass, isSwitch }).render();
+        this.#container = fragment.firstElementChild;
+        this.#input = fragment.querySelector('input');
+        Attributes.forward('input-', this, this.#input);
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.required = observed.required;
+        this.value = observed.value;
+        this.#input.addEventListener('change', (evt) => {
+            evt.stopPropagation();
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: {
+                        value: this.value,
+                    },
+                }),
+            );
+        });
+        const label = fragment.querySelector('label');
+        label.addEventListener('click', () => {
+            this.focus();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.value = !this.value;
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: {
+                        value: this.value,
+                    },
+                }),
+            );
+        });
+        this.#fieldError = fragment.querySelector('ful-field-error');
+        this.#input.ariaDescribedByElements = [this.#fieldError];
+        this.#input.ariaLabelledByElements = [label];
+        this.replaceChildren(fragment);
+    }
+    get value() {
+        return this.#input.checked;
+    }
+    set value(value) {
+        this.#input.checked = value;
+    }
+    get readonly() {
+        return this.#container.inert;
+    }
+    set readonly(v) {
+        this.#container.inert = v;
+        this.reflect(() => {
+            Attributes.toggle(this, 'readonly', v);
+        });
+    }
+    get disabled() {
+        return this.#input.hasAttribute('disabled');
+    }
+    set disabled(d) {
+        Attributes.toggle(this.#input, 'disabled', d);
+    }
+    get required() {
+        return this.#input.getAttribute('aria-required') === 'true';
+    }
+    set required(d) {
+        Attributes.set(this.#input, 'aria-required', d ? 'true' : null);
+        this.reflect(() => {
+            Attributes.toggle(this, 'required', d);
+        });
+    }
+    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 {
+    static slots = true;
+    static template = `
+        <div class="ful-spinner-wrapper" role="status">
+            <div class="ful-spinner-text">{{{{ slots.default }}}}</div>
+            <div class="ful-spinner-icon"></div>
+        </div>
+    `;
+    render({ slots }) {
+        this.template().withOverlay({ slots }).renderTo(this);
+    }
+}
+
+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 l10n = {
+        en: {
+            showing: 'Page {0} of {1}',
+            navigation: 'Page navigation',
+            previous: 'Previous',
+            next: 'Next',
+        },
+        it: {
+            showing: 'Pagina {0} di {1}',
+            navigation: 'Navigazione pagine',
+            previous: 'Precedente',
+            next: 'Successivo',
+        },
+        es: {
+            showing: 'Página {0} de {1}',
+            navigation: 'Navegación de páginas',
+            previous: 'Anterior',
+            next: 'Siguiente',
+        },
+        fr: {
+            showing: 'Page {0} sur {1}',
+            navigation: 'Navigation des pages',
+            previous: 'Précédent',
+            next: 'Suivant',
+        },
+    };
+    static config = {
+        prevIcon: 'bi bi-chevron-left',
+        nextIcon: 'bi bi-chevron-right',
+        reloadIcon: 'bi bi-arrow-clockwise',
+    };
+    static template = `
+        <nav data-tpl-aria-label="#l10n:t('navigation')" class="user-select-none">
+            <ul class="pagination">
+                <li class="page-item ms-auto me-2 pagination-index"> {{ #l10n:t('showing', curr.label, total) }}</li>
+                <li class="page-item me-2 reload"><a role="button"><i data-tpl-class="config.reloadIcon"></i></a></li>
+                <li class="page-item prev">
+                    <a data-tpl-class="prev.enabled?'page-link':'page-link disabled'" data-tpl-aria-label="#l10n:t('previous')" role="button" data-tpl-data-page="prev.index">
+                        <i aria-hidden="true" data-tpl-class="config.prevIcon"></i>
+                    </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 next">
+                    <a data-tpl-class="next.enabled?'page-link':'page-link disabled'" data-tpl-aria-label="#l10n:t('next')" role="button" data-tpl-data-page="next.index">
+                        <i aria-hidden="true" data-tpl-class="config.nextIcon"></i>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    `;
+    #total = 0;
+    #current = 0;
+    render({ observed }) {
+        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 ?? this.#current),
+                    },
+                }),
+            );
+        });
+    }
+    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 });
+            }
+        }
+        this.template().withOverlay({ total, prev, curr, next, pages }).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}`);
+        }
+        const headersTr = document.createElement('tr');
+        const rowsTr = document.createElement('tr');
+        rowsTr.setAttribute('data-tpl-each', 'rows');
+        for (const attr of schema.getAttributeNames()) {
+            const value = schema.getAttribute(attr);
+            headersTr.setAttribute(attr, value ?? '');
+            rowsTr.setAttribute(attr, value ?? '');
+        }
+        const columns = Nodes.queryChildrenAll(schema, 'column');
+        const sort =
+            columns
+                .filter((v) => v.hasAttribute('order'))
+                .map((v) => ({ sorter: v.getAttribute('sorter'), order: v.getAttribute('order') }))[0] ?? null;
+        for (var column of columns) {
+            const maybeTitleTag = Nodes.queryChildren(column, 'title');
+            const sorter = column.getAttribute('sorter');
+            const order = column.getAttribute('order');
+            const titleNode = maybeTitleTag ?? document.createTextNode(column.getAttribute('title') ?? '');
+            maybeTitleTag?.remove();
+            column.removeAttribute('sorter');
+            column.removeAttribute('order');
+            column.removeAttribute('title');
+            const wrappedTitleNode =
+                !sorter && !order
+                    ? titleNode
+                    : (() => {
+                          const fulSorter = document.createElement('ful-sorter');
+                          if (sorter) {
+                              fulSorter.setAttribute('sorter', sorter);
+                          }
+                          if (order) {
+                              fulSorter.setAttribute('order', order);
+                          }
+                          fulSorter.append(titleNode);
+                          return fulSorter;
+                      })();
+            const th = document.createElement('th');
+            const td = document.createElement('td');
+            for (const attr of column.getAttributeNames()) {
+                const value = column.getAttribute(attr);
+                th.setAttribute(attr, value ?? '');
+                td.setAttribute(attr, value ?? '');
+            }
+            th.append(wrappedTitleNode);
+            td.append(...column.childNodes);
+            headersTr.append(th);
+            rowsTr.append(td);
+        }
+
+        return {
+            headersTemplate: template
+                .withOverlay({ inHeaders: true, inRows: false })
+                .withFragment(Fragments.from(headersTr)),
+            rowsTemplate: template.withOverlay({ inHeaders: false, inRows: true }).withFragment(Fragments.from(rowsTr)),
+            sort: sort,
+            length: columns.length,
+        };
+    }
+}
+
+class InMemoryTableLoader {
+    #data;
+    constructor(data) {
+        this.#data = data;
+    }
+    async load(pageRequest, sortRequest, filterRequest) {
+        const begin = pageRequest.page * pageRequest.size;
+        const end = begin + pageRequest.size;
+        const page = this.#data.slice(begin, end);
+        const totalElements = this.#data.length;
+        return {
+            data: page,
+            size: totalElements
+        };
+    }
+    update(data) {
+        this.#data = data;
+    }
+}
+
+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 ? `${sortRequest.sorter},${sortRequest.order}` : null)
+            .param('filters', filters.length > 0 ? JSON.stringify(Object.fromEntries(filters)) : null)
+            .fetchJson();
+    }
+}
+
+class TableLoader {
+    static create(el, conf) {
+        const url = el.getAttribute('src');
+        if (url) {
+            const http = registry.component('http-client');
+            const method = el.getAttribute('method') ?? 'GET';
+            return new RemoteTableLoader(http, url, method);
+        }
+        return new InMemoryTableLoader([]);
+    }
+}
+
+class Table extends ParsedElement {
+    static slots = true;
+    static l10n = {
+        en: {
+            initial: 'Start searching to see results.',
+            error: 'Error while loading data:',
+            nodata: 'No elements found.',
+        },
+        it: {
+            initial: 'Avvia la ricerca per visualizzare i risultati.',
+            error: 'Errore nel caricamento dei dati:',
+            nodata: 'Nessun elemento trovato.',
+        },
+        es: {
+            initial: 'Inicia la búsqueda para ver los resultados.',
+            error: 'Error al cargar los datos:',
+            nodata: 'No se encontraron elementos.',
+        },
+        fr: {
+            initial: 'Lancez la recherche pour voir les résultats.',
+            error: 'Erreur lors du chargement des données :',
+            nodata: 'Aucun élément trouvé.',
+        },
+    };
+    static config = {
+        searchIcon: 'bi bi-search',
+    };
+    static template = `
+        <ful-form data-tpl-if="slots.filters">
+            {{{{ slots.filters }}}}
+        </ful-form>
+        <div class="table-wrapper">
+            <table class="table">
+                <caption data-tpl-if="slots.caption">{{{{ slots.caption }}}}</caption>
+                <thead></thead>
+                <tbody></tbody>
+                <tbody data-ref="initial">
+                    <tr>
+                        <td data-tpl-colspan="schema.length">
+                            <div>
+                                <p data-tpl-if="config.searchIcon"><i data-tpl-class="config.searchIcon"></i></p>
+                                {{{ #l10n:t('initial') }}}
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody data-ref="loading" hidden>
+                    <tr>
+                        <td data-tpl-colspan="schema.length">
+                            <ful-spinner class="big"></ful-spinner>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody data-ref="feedback" hidden>
+                    <tr>
+                        <td data-tpl-colspan="schema.length">
+                            <div class="alert alert-danger">
+                                <p>{{ #l10n:t('error') }}</p>
+                                <div data-ref="feedback-error"></div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot data-tpl-if="slots.footer">
+                    {{{{ slots.footer }}}}
+                </tfoot>
+            </table>
+        </div>
+        <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">
+                    {{ #l10n:t('nodata') }}
+                </td>
+            </tr>
+            {{{{ schema.rowsTemplate.withOverlay({'rows': pageResponse.data}).render() }}}}
+        `,
+    };
+    #loader;
+    #schema;
+    #body;
+    #loading;
+    #noAutoload;
+    #feedback;
+    #paginator;
+    #sorters;
+    #latestRequest;
+    async render({ slots, observed }) {
+        const template = this.template();
+        const schema = TableSchemaParser.parse(slots.schema, template);
+        const fragment = template.withOverlay({ slots, schema }).render();
+        const tableWrapper = /** @type HTMLTableElement */ (Nodes.queryChildren(fragment, '.table-wrapper'));
+        const table = /** @type HTMLTableElement */ (tableWrapper.querySelector('table'));
+        Attributes.forward('table-', this, table);
+        this.#loader = registry.component(this.getAttribute('loader') ?? 'loaders:table').create(this);
+
+        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=initial]');
+        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);
+        schema.headersTemplate.renderTo(this.querySelector('thead'));
+        await Rendering.waitForChildren(this);
+
+        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: schema.sort,
+            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,
+            );
+        });
+        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) => {
+            const sortRequest = e.detail.value.order ? e.detail.value : null;
+            await this.load(this.#latestRequest.pageRequest, sortRequest, 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.replaceChildren();
+        this.#loading.removeAttribute('hidden', '');
+        this.#feedback.setAttribute('hidden', '');
+        this.#noAutoload.setAttribute('hidden', '');
+        try {
+            const pageResponse = await this.#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 withLoader(fn) {
+        return await fn(this.#loader);
+    }
+    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 Input {
+    static observed = ['value:json', 'readonly:presence', 'required:presence'];
+    static template = `
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
+            {{{{ slots.info }}}}
+        </div>
+        <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
+            <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-ref="value1" type="datetime-local" class="form-control" form="">
+            <input data-ref="value2" type="datetime-local" class="form-control" form="" hidden>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-field-error></ful-field-error>
+    `;
+    #operator;
+    #value1;
+    #value2;
+    render(conf) {
+        super.render({ ...conf, skipObservedSetup: true });
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value1 = this.querySelector('[data-ref=value1]');
+        this.#value2 = this.querySelector('[data-ref=value2]');
+
+        this.disabled = conf.disabled;
+        this.readonly = conf.observed.readonly;
+        this.required = conf.observed.required;
+        this.value = conf.observed.value;
+
+        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) {
+            this.#value1.value = '';
+            this.#value2.value = '';
+            return;
+        }
+        const [operator, ...values] = v;
+        this.#operator.setAttribute('value', operator);
+        this.#value1.value = values[0] ? Instant.isoToLocal(values[0]) : values[0];
+        this.#value2.value = values[1] ? Instant.isoToLocal(values[1]) : values[1];
+    }
+    set readonly(v) {
+        this.#value2.readOnly = v;
+        super.readonly = v;
+    }
+    set disabled(d) {
+        Attributes.toggle(this.#value2, 'disabled', d);
+        super.disabled = d;
+    }
+}
+
+class LocalDateFilter extends Input {
+    static observed = ['value:json', 'readonly:presence', 'required:presence'];
+    static template = `
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
+            {{{{ slots.info }}}}
+        </div>
+        <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
+            <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-ref="value1" type="date" class="form-control" form="">
+            <input data-ref="value2" type="date" class="form-control" form="" hidden>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-field-error></ful-field-error>
+    `;
+    #operator;
+    #value1;
+    #value2;
+    render(conf) {
+        super.render({ ...conf, skipObservedSetup: true });
+
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value1 = this.querySelector('[data-ref=value1]');
+        this.#value2 = this.querySelector('[data-ref=value2]');
+
+        this.disabled = conf.disabled;
+        this.readonly = conf.observed.readonly;
+        this.required = conf.observed.required;
+        this.value = conf.observed.value;
+
+        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];
+    }
+    set value(v) {
+        if (v == null) {
+            this.#value1.value = '';
+            this.#value2.value = '';
+            return;
+        }
+        const [operator, ...values] = v;
+        this.#operator.setAttribute('value', operator);
+        this.#value1.value = values[0];
+        this.#value2.value = values[1];
+    }
+    set readonly(v) {
+        this.#value2.readOnly = v;
+        super.readonly = v;
+    }
+    set disabled(d) {
+        Attributes.toggle(this.#value2, 'disabled', d);
+        super.disabled = d;
+    }
+}
+
+class TextFilter extends Input {
+    static observed = ['value:json', 'readonly:presence', 'required:presence'];
+    static template = `
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
+            {{{{ slots.info }}}}
+        </div>
+        <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
+            <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-ref="value" type="text" class="form-control" form="">
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-field-error></ful-field-error>
+    `;
+    #operator;
+    #value;
+    render(conf) {
+        super.render({ ...conf, skipObservedSetup: true });
+
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value = this.querySelector('[data-ref=value]');
+
+        this.disabled = conf.disabled;
+        this.readonly = conf.observed.readonly;
+        this.required = conf.observed.required;
+        this.value = conf.observed.value;
+
+        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) {
+            this.#value.value = '';
+            return;
+        }
+        const [operator, sensitivity, value] = v;
+        this.#operator.setAttribute('value', operator);
+        this.#value.value = value;
+    }
+}
+
+class LocalizationModule {
+    static t(k, ...args) {
+        //@ts-ignore
+        const format = this.l10n?.[this.language]?.[k] ?? this.l10n?.['en']?.[k] ?? k;
+        if (args.length === 0) {
+            return format;
+        }
+        return format.replace(/{(\d+)}/g, (m, is) => {
+            return args[Number(is)];
+        });
+    }
+    static tl(k, args = []) {
+        return LocalizationModule.t.apply(this, [k, ...args]);
+    }
+}
+
+class Plugin {
+    configure(registry) {
+        const httpClient = HttpClient.builder().withCsrfToken().withRedirectOnUnauthorized('/').build();
+        registry
+            .defineModule('l10n', LocalizationModule)
+            .defineComponent('http-client', httpClient)
+            .defineElement('ful-spinner', Spinner)
+            .defineElement('ful-form', Form)
+            .defineElement('ful-checkbox', Checkbox)
+            .defineElement('ful-input', Input)
+            .defineElement('ful-input-file', InputFile)
+            .defineElement('ful-local-date', LocalDate)
+            .defineElement('ful-instant', Instant)
+            .defineElement('ful-input-local-date', InputLocalDate)
+            .defineElement('ful-input-local-time', InputLocalTime)
+            .defineElement('ful-input-instant', InputInstant)
+            .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)
+            .defineOverlay({
+                language: navigator?.language?.split('-')?.[0] ?? 'en',
+            });
+    }
+}
+
+export { AsyncEvents, Bindings, Checkbox, Dropdown, Form, FormLoader, Input, InputFile, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, LocalDate, LocalDateFilter, LocalStorage, LocalizationModule, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, TextFilter, Timing, VersionedLocalStorage, VersionedSessionStorage };
+//# sourceMappingURL=ful.mjs.map