@optionfactory/ful 0.24.0 → 0.26.0

package/dist/ful.mjs

@@ -70,8 +70,9 @@ class Hex {
     }
 }
 
-class Observable {
-    constructor() {
+const Observable = (SuperClass) => class extends SuperClass {
+    constructor(...args) {
+        super(...args);
         this.listeners = {};
     }
     fireSync(event, data, initialAcc) {
@@ -98,16 +99,8 @@ class Observable {
         const listeners = this.listeners[event] || [];
         const idx = listeners.indexOf(listener);
         return idx === -1 ? [] : listeners.splice(idx, 1);
-    }
-    static mixin(self) {
-        self.listeners = {};
-        self.fireSync = Observable.prototype.fireSync;
-        self.fire = Observable.prototype.fire;
-        self.on = Observable.prototype.on;
-        self.un = Observable.prototype.un;
-    }
-
-}
+    }    
+};
 
 class ContextInterceptor {
     constructor() {
@@ -276,775 +269,813 @@ function jsonPatch(body, headers){
     return jsonRequest('PATCH', body, headers);
 }
 
-/* global Infinity, CSS */
-
-class CustomElements {
-    static id = 0;
-    static uid(prefix) {
-        return `${prefix}-${++CustomElements.id}`;
-    }
-    static forwardAttributes(from, to, except) {
-        from.getAttributeNames().filter(a => except.indexOf(a) === -1)
-            .filter(a => a[0] === '@')
-            .forEach(a => {
-                if (a === '@class') {
-                    to.classList.add(...from.getAttribute("@class").split(" ").filter(a => a.length));
-                    return;
-                }
-                to.setAttribute(a.substring(1), from.getAttribute(a));
-            });
-    }
-    static extractSlots(el) {
-        const slotted = Object.fromEntries([...el.querySelectorAll("[slot]")].map(el => {
-            el.parentElement.removeChild(el);
-            const slot = el.getAttribute("slot");
-            el.removeAttribute("slot");
-            return [slot, el];
-        }));
-        slotted.default = new DocumentFragment();
-        slotted.default.append(...el.childNodes);
-        return slotted;
+class Storage {
+    constructor(prefix, storage) {
+        this.prefix = prefix;
+        this.storage = storage;
     }
-    static labelAndInputGroup(id, name, isFloating, slotted) {
-        if (isFloating) {
-            /**
-             * <div class="input-group has-validation">
-             *   <span data-tpl-if="slotted.before" class="input-group-text">{{{{ slotted.before }}}}</span>
-             *   <div class="form-floating">
-             *       {{{{ slotted.input }}}} 
-             *       <label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
-             *   </div>
-             *   <span data-tpl-if="slotted.after" class="input-group-text">{{{{ slotted.after }}}}</span>
-             *   <ful-field-error data-tpl-field="name"></ful-field-error>                                 
-             * </div>    
-             */
-            const label = document.createElement("label");
-            label.setAttribute("for", id);
-            label.classList.add('form-label');
-            label.append(slotted.default);
-
-            const ff = document.createElement('div');
-            ff.classList.add("form-floating");
-            ff.append(slotted.input, label);
-
-            const ffe = document.createElement('ful-field-error');
-            ffe.setAttribute("field", name);
-
-            const ig = document.createElement("div");
-            ig.classList.add('input-group', 'has-validtion');
-
-            if (slotted.before) {
-                ig.append(slotted.before);
-            } else if (slotted.ibefore) {
-                const igt = document.createElement('div');
-                igt.classList.add('input-group-text');
-                igt.append(slotted.ibefore);
-                ig.append(igt);
-            }
-            ig.append(ff);
-            if (slotted.after) {
-                ig.append(slotted.after);
-            } else if (slotted.iafter) {
-                const igt = document.createElement('div');
-                igt.classList.add('input-group-text');
-                igt.append(slotted.iafter);
-                ig.append(igt);
-            }
-            ig.append(ffe);
-            return ig;
-        }
-        /**
-                <label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
-                <div class="input-group has-validation">
-                    <span data-tpl-if="slotted.before" class="input-group-text">{{{{ slotted.before }}}}</span>
-                    {{{{ slotted.input }}}} 
-                    <span data-tpl-if="slotted.after" class="input-group-text">{{{{ slotted.after }}}}</span>
-                    <ful-field-error data-tpl-field="name"></ful-field-error>            
-                </div>     
-         */
-
-        const label = document.createElement("label");
-        label.setAttribute("for", name);
-        label.classList.add('form-label');
-        label.append(slotted.default);
-
-        const ffe = document.createElement('ful-field-error');
-        ffe.setAttribute("field", name);
-
-        const ig = document.createElement("div");
-        ig.classList.add('input-group', 'has-validation');
-
-        if (slotted.before) {
-            ig.append(slotted.before);
-        } else if (slotted.ibefore) {
-            const igt = document.createElement('div');
-            igt.classList.add('input-group-text');
-            igt.append(slotted.ibefore);
-            ig.append(igt);
-        }
-        ig.append(slotted.input);
-        if (slotted.after) {
-            ig.append(slotted.after);
-        } else if (slotted.iafter) {
-            const igt = document.createElement('div');
-            igt.classList.add('input-group-text');
-            igt.append(slotted.iafter);
-            ig.append(igt);
-        }
-        ig.append(ffe);
-
-        const fragment = new DocumentFragment();
-        fragment.append(label, ig);
-        return fragment;
+    save(k, v) {
+        this.storage.setItem(`${this.prefix}-${k}`, JSON.stringify(v));
     }
-
-}
-
-
-class FieldError extends HTMLElement {
-    constructor() {
-        super();
+    load(k) {
+        const got = this.storage.getItem(`${this.prefix}-${k}`);
+        return got === undefined ? undefined : JSON.parse(got);
     }
-    connectedCallback() {
-        this.classList.add('invalid-feedback');
+    remove(k) {
+        this.storage.removeItem(`${this.prefix}-${k}`);
     }
-    static configure() {
-        customElements.define('ful-field-error', FieldError);
+    pop(k) {
+        const decoded = this.load(k);
+        this.remove(k);
+        return decoded;
     }
 }
 
-class Errors extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        this.classList.add('alert', 'alert-danger', 'd-none');
-    }
-    static configure() {
-        customElements.define('ful-errors', Errors);
+class LocalStorage extends Storage {
+    constructor(prefix) {
+        super(prefix, localStorage);
     }
-
 }
 
-class Spinner extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        this.classList.add('spinner-border', 'spinner-border-sm', 'd-none');
-        this.setAttribute("aria-hidden", "true");
-    }
-    show() {
-        this.classList.remove("d-none");
-    }
-    hide() {
-        this.classList.add("d-none");
-    }
-    static configure() {
-        customElements.define('ful-spinner', Spinner);
+class SessionStorage extends Storage {
+    constructor(prefix) {
+        super(prefix, sessionStorage);
     }
 }
 
-
-
-class Input extends HTMLElement {
-    constructor() {
-        super();
-        const id = CustomElements.uid('ful-input');
-        const name = this.getAttribute('@name');
-        const floating = this.hasAttribute('@floating');
-        const slotted = CustomElements.extractSlots(this);
-        slotted.input = slotted.input || (() => {
-            const el = document.createElement("input");
-            el.classList.add("form-control");
-            return el;
-        })();
-        CustomElements.forwardAttributes(this, slotted.input, ['@floating']);
-        const attrIfMissing = (el, k, v) => !el.hasAttribute(k) && el.setAttribute(k, v);
-        attrIfMissing(slotted.input, "name", id);
-        attrIfMissing(slotted.input, "id", id);
-        attrIfMissing(slotted.input, "type", "text");
-        attrIfMissing(slotted.input, "placeholder", " ");
-        this.innerHTML = '';
-        this.append(CustomElements.labelAndInputGroup(id, name || id, floating, slotted));
+class VersionedStorage {
+    constructor(storage, key, dataSupplier){
+        this.storage = storage;
+        this.key = key;
+        this.dataSupplier = dataSupplier;
+        this.cache = null;
+        
     }
-    static configure() {
-        customElements.define('ful-input', Input);
+    async load(revision){
+        const saved = this.storage.load(this.key);
+        if (!!saved && saved.revision === revision) {
+            this.cache = saved.value;
+            return;
+        }
+        const freshData = await this.dataSupplier(revision, this.key);
+        this.storage.save(this.key, {
+            revision: revision,
+            value: freshData
+        });
+        this.cache = freshData;
+    }
+    data(){
+        return this.cache;
     }
 }
 
-
-
-/**
- * <script src="tom-select.complete.js"></script>
- * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
- */
-class Select extends HTMLElement {
-    constructor(tsConfig) {
-        super();
-        Observable.mixin(this);
-        const id = CustomElements.uid('ful-select');
-        const name = this.getAttribute('@name');
-        const floating = this.hasAttribute('@floating');
-        const remote = this.hasAttribute('@remote');
-        const slotted = CustomElements.extractSlots(this);
-        slotted.input = slotted.input || (() => {
-            return document.createElement("select");
-        })();
-        CustomElements.forwardAttributes(this, slotted.input, ['@floating', '@remote']);
-        const attrIfMissing = (el, k, v) => !el.hasAttribute(k) && el.setAttribute(k, v);
-        attrIfMissing(slotted.input, "name", id);
-        attrIfMissing(slotted.input, "id", id);
-        attrIfMissing(slotted.input, "placeholder", " ");
-        this.innerHTML = '';
-        this.append(CustomElements.labelAndInputGroup(id, name || id, floating, slotted));
-        this.loaded = !remote;
-        this.ts = new TomSelect(slotted.input, Object.assign(remote ? {
-            preload: 'focus',
-            load: async (query, callback) => {
-                if (this.loaded) {
-                    callback();
-                    return;
-                }
-                const data = await this.fire('load', query, []);
-                this.loaded = true;
-                callback(data);        
-            } 
-        } : {}, tsConfig));
-        slotted.input.setValue = this.setValue.bind(this);
-        slotted.input.getValue = this.getValue.bind(this);
-    }
-    async setValue(v){
-        if(!this.loaded){
-            await this.ts.load();
-        }
-        this.ts.setValue(v);
+class AuthorizationCodeFlow {
+    static forKeycloak(clientId, realmBaseUrl, redirectUri){
+        const scope = "openid profile";
+        return new AuthorizationCodeFlow(clientId, scope, {
+            auth: new URL("protocol/openid-connect/auth", realmBaseUrl),
+            token: new URL("protocol/openid-connect/token", realmBaseUrl),
+            logout: new URL("protocol/openid-connect/logout", realmBaseUrl),
+            registration: new URL("protocol/openid-connect/registrations", realmBaseUrl),
+            redirect: redirectUri
+        });        
     }
-    getValue(){
-        const v = this.ts.getValue();
-        return v === '' ? null : v;
+    constructor(clientId, scope, {auth, token, registration, logout, redirect}) {
+        this.storage = new SessionStorage(clientId);
+        this.clientId = clientId;
+        this.scope = scope;
+        this.uri = {auth, token, registration, logout, redirect};
     }
-    static custom(tagName, configuration) {
-        customElements.define(tagName, class extends Select {
-            constructor() {
-                super(configuration);
-            }
+    async action(uri, additionalParams){
+        const pkceVerifier = Base64.encode(crypto.getRandomValues(new Uint8Array(32)).buffer);
+        const pkceChallenge = Base64.encode(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(pkceVerifier)));
+        const state = this.clientId + Base64.encode(crypto.getRandomValues(new Uint8Array(16)).buffer);
+        this.storage.save(AuthorizationCodeFlow.PKCE_AND_STATE_KEY, {
+            state: state,
+            verifier: pkceVerifier
+        });
+        const url = new URL(uri);
+        url.searchParams.set("client_id", this.clientId);
+        url.searchParams.set("redirect_uri", this.uri.redirect);
+        url.searchParams.set("response_type", 'code');
+        url.searchParams.set("scope", this.scope);
+        url.searchParams.set("state", state);
+        url.searchParams.set("code_challenge", pkceChallenge);
+        url.searchParams.set("code_challenge_method", 'S256');
+        Object.entries(additionalParams || {}).forEach(kv => {
+            url.searchParams.set(kv[0], kv[1]);
         });
+        window.location = url;
     }
-    static configure() {
-        return Select.custom('ful-select');
+    async registration(additionalParams){
+        await this.action(this.uri.registration, additionalParams);
     }
-
-}
-
-class Form extends HTMLElement {
-    constructor({ mutators, extractors, valueHoldersSelector, ignoredChildrenSelector }) {
-        super();
-        Observable.mixin(this);
-        this.mutators = mutators || {};
-        this.extractors = extractors || {};
-        this.valueHoldersSelector = valueHoldersSelector || '[name]';
-        this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none';
-
-        const form = document.createElement('form');
-        form.append(...this.childNodes);
-        this.appendChild(form);
-
-        form.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            this.spinner(true);
-            try {
-                await this.fire('submit', this.getValues(), this);
-            } catch (e) {
-                if (e instanceof Failure) {
-                    this.setErrors(e.problems);
-                    return;
-                }
-                throw e;
-            } finally {
-                this.spinner(false);
-            }
+    async applicationInitiatedAction(kcAction){
+        await this.action(this.uri.auth, {
+            kc_action: kcAction
         });
     }
-    spinner(spin) {
-        this.querySelectorAll('ful-spinner').forEach(el => {
-            el[spin ? 'show' : 'hide']();
-        });
-        this.querySelectorAll('[type=submit],[type=reset]').forEach(el => {
-            el.disabled = spin;
+    async _tokenExchange(code, state) {
+        window.history.replaceState('', "", this.uri.redirect);
+        const stateAndVerifier = this.storage.pop(AuthorizationCodeFlow.PKCE_AND_STATE_KEY);
+        if (stateAndVerifier.state !== state) {
+            throw new Error("State mismatch");
+        }
+        const response = await fetch(this.uri.token, {
+            method: "POST",
+            headers: {
+                "Content-Type": 'application/x-www-form-urlencoded'
+            },
+            body: new URLSearchParams([
+                ["client_id", this.clientId],
+                ["code", code],
+                ["grant_type", "authorization_code"],
+                ["code_verifier", stateAndVerifier.verifier],
+                ["state", stateAndVerifier.state],
+                ["redirect_uri", this.uri.redirect]
+            ])
         });
+        if (!response.ok) {
+            const text = await response.text();
+            throw new Error("Error:" + response.status + ": " + text);
+        }
+        const token = await response.json();
+        return new AuthorizationCodeFlowSession(this.clientId, token, this.uri);
     }
-    setValues(values) {
-        for (let k in values) {
-            if (!values.hasOwnProperty(k)) {
-                continue;
-            }
-            Array.from(this.querySelectorAll(`[name='${CSS.escape(k)}']`)).forEach((el) => {
-                Form.mutate(this.mutators, el, values[k], k, values);
-            });
+    async ensureLoggedIn() {
+        const url = new URL(window.location.href);
+        const code = url.searchParams.get("code");
+        if (code && this.storage.load(AuthorizationCodeFlow.PKCE_AND_STATE_KEY)) {
+            //if callback from keycloak and we have our state still stored
+            const state = url.searchParams.get("state");
+            return await this._tokenExchange(code, state);
         }
+        //if not authorized
+        await this.action(this.uri.auth, {});
+        return null;
     }
-    getValues() {
-        return Array.from(this.querySelectorAll(this.valueHoldersSelector))
-            .filter((el) => {
-                if (el.dataset['fulBindInclude'] === 'never') {
-                    return false;
-                }
-                return el.dataset['fulBindInclude'] === 'always' || el.closest(this.ignoredChildrenSelector) === null;
-            })
-            .reduce((result, el) => {
-                return Form.providePath(result, el.getAttribute('name'), Form.extract(this.extractors, el));
-            }, {});
-    }
-    setErrors(errors, scroll) {
-        this.clearErrors();
-        errors
-            .filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
-            .forEach((e) => {
-                const name = e.context.replace("[", ".").replace("].", ".");
-                this.querySelectorAll(`[name='${CSS.escape(name)}']`)
-                    .forEach(input => {
-                        input.classList.add('is-invalid');
-                        if (input.parentElement.classList.contains("form-floating")) {
-                            input.parentElement.classList.add('is-invalid');
-                        }
-                    });
-                this.querySelectorAll(`ful-field-error[field='${CSS.escape(name)}']`)
-                    .forEach(el => el.innerText = e.reason);
-            });
-        this.querySelectorAll("ful-errors")
-            .forEach(el => {
-                const globalErrors = errors.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
-                el.innerHTML = globalErrors.map(e => e.reason).join("\n");
-                if (globalErrors.length !== 0) {
-                    el.classList.remove('d-none');
-                }
-            });
+}
+AuthorizationCodeFlow.PKCE_AND_STATE_KEY = "state-and-verifier";
 
-        if (!scroll) {
-            return;
-        }
-        const ys = Array.from(this.querySelectorAll('ful-field-error:not(.d-none)'))
-            .map(el => el.getBoundingClientRect().y + window.scrollY);
-        const miny = Math.min(...ys);
-        if (miny !== Infinity) {
-            window.scroll(window.scrollX, miny > 100 ? miny - 100 : 0);
-        }
+class AuthorizationCodeFlowSession {
+    static parseToken(token) {
+        const [rawHeader, rawPayload, signature] = token.split(".");
+        const ut8decoder = new TextDecoder("utf-8");
+        return {
+            header: JSON.parse(ut8decoder.decode(Base64.decode(rawHeader, Base64.STANDARD))),
+            payload: JSON.parse(ut8decoder.decode(Base64.decode(rawPayload, Base64.STANDARD))),
+            signature: signature
+        };
+    }    
+    constructor(clientId, t, {token, logout, redirect}) {
+        this.clientId = clientId;
+        this.token = t;
+        this.accessToken = AuthorizationCodeFlowSession.parseToken(t.access_token);
+        this.refreshToken = AuthorizationCodeFlowSession.parseToken(t.refresh_token);
+        this.uri = { token, logout, redirect };
+        this.refreshCallback = null;
     }
-    clearErrors() {
-        this.querySelectorAll('[name].is-invalid, .form-floating.is-invalid')
-            .forEach(el => el.classList.remove('is-invalid'));
-        this.querySelectorAll("ful-errors")
-            .forEach(el => {
-                el.innerHTML = '';
-                el.classList.add('d-none');
-            });
+    onRefresh(callback) {
+        this.refreshCallback = callback;
     }
-    static extract(extractors, el) {
-        const maybeExtractor = extractors[el.dataset['fulBindExtractor']] || extractors[el.dataset['fulBindProvide']];
-        if (maybeExtractor) {
-            return maybeExtractor(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';
+    async refresh() {
+        const response = await fetch(this.uri.token, {
+            method: "POST",
+            headers: {
+                "Content-Type": 'application/x-www-form-urlencoded'
+            },
+            body: new URLSearchParams([
+                ["client_id", this.clientId],
+                ["grant_type", "refresh_token"],
+                ["refresh_token", this.token.refresh_token]
+            ])
+        });
+        if (!response.ok) {
+            throw new Error("Error:" + response.status + ": " + response.text());
         }
-        if (el.getValue) {
-            return el.getValue();
+        const token = await response.json();
+        this.token = token;
+        this.accessToken = AuthorizationCodeFlowSession.parseToken(token.access_token);
+        this.refreshToken = AuthorizationCodeFlowSession.parseToken(token.refresh_token);
+        if (this.refreshCallback) {
+            this.refreshCallback(this.token, this.accessToken, this.refreshToken);
         }
-        return el.value || null;
     }
-    static mutate(mutators, el, raw, key, values) {
-        const maybeMutator = mutators[el.dataset['fulBindMutator']] || mutators[el.dataset['fulBindProvide']];
-        if (maybeMutator) {
-            maybeMutator(el, raw, key, values);
-            return;
-        }
-        if (el.getAttribute('type') === 'radio') {
-            el.checked = el.getAttribute('value') === raw;
-            return;
-        }
-        if (el.getAttribute('type') === 'checkbox') {
-            el.checked = raw;
-            return;
-        }
-        if (el.setValue) {
-            el.setValue(raw);
+    shouldBeRefreshed(gracePeriod) {
+        const now = new Date().getTime();
+        const refreshTokenExpiresAt = this.refreshToken.payload.exp * 1000;
+        const expired = now > refreshTokenExpiresAt;
+        const shouldRefresh = now - gracePeriod > refreshTokenExpiresAt;
+        return !expired && shouldRefresh;
+    }
+    async refreshIf(gracePeriod) {
+        if (!this.shouldBeRefreshed(gracePeriod)) {
             return;
         }
-        el.value = raw;
+        await this.refresh();
+    }
+    logout() {
+        const url = new URL(this.uri.logout);
+        url.searchParams.set("post_logout_redirect_uri", this.uri.redirect);
+        url.searchParams.set("id_token_hint", this.token.id_token);
+        window.location = url;
     }
 
-    static providePath(result, path, value) {
-        const keys = path.split(".").map((k) => k.match(/^[0-9]+$/) ? +k : k);
-        let current = result;
-        let previous = null;
-        for (let i = 0; ; ++i) {
-            const ckey = keys[i];
-            const pkey = keys[i - 1];
-            if (Number.isInteger(ckey) && !Array.isArray(current)) {
-                if (previous !== null) {
-                    previous[pkey] = current = [];
-                } else {
-                    result = current = [];
+    bearerToken() {
+        return `Bearer ${this.token.access_token}`;
+    }
+    
+    interceptor(gracePeriodBefore, gracePeriodAfter){
+        return new AuthorizationCodeFlowInterceptor(this, gracePeriodBefore, gracePeriodAfter);        
+    }
+}
+
+class AuthorizationCodeFlowInterceptor {
+    constructor(session, gracePeriodBefore, gracePeriodAfter) {
+        this.session = session;
+        this.gracePeriodBefore = gracePeriodBefore || 2000;
+        this.gracePeriodAfter = gracePeriodAfter || 30000;
+    }
+    async intercept(request, chain) {
+        await this.session.refreshIf(this.gracePeriodBefore);
+        const headers = new Headers(request.options.headers);
+        headers.set("Authorization", this.session.bearerToken());
+        request.options.headers = headers;
+        const response = await chain.proceed(request);
+        await this.session.refreshIf(this.gracePeriodAfter);
+        return response;
+    }
+}
+
+const timing = {
+    sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    },
+    DEBOUNCE_DEFAULT: 0,
+    DEBOUNCE_IMMEDIATE: 1,
+    debounce(timeoutMs, func, options) {
+        let tid = null;
+        let args = [];
+        let previousTimestamp = 0;
+        let opts = options || timing.DEBOUNCE_DEFAULT;
+
+        const later = () => {
+            const elapsed = new Date().getTime() - 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 = [];
+            }
+        };
+
+        return function () {
+            args = arguments;
+            previousTimestamp = new Date().getTime();
+            if (tid === null) {
+                tid = setTimeout(later, timeoutMs);
+                if (opts === timing.DEBOUNCE_IMMEDIATE) {
+                    func(...args);
                 }
             }
-            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;
+        };
+    },
+    THROTTLE_DEFAULT: 0,
+    THROTTLE_NO_LEADING: 1,
+    THROTTLE_NO_TRAILING: 2,
+    throttle(timeoutMs, func, options) {
+        let tid = null;
+        let args = [];
+        let previousTimestamp = 0;
+        let opts = options || timing.THROTTLE_DEFAULT;
+
+        const later = () => {
+            previousTimestamp = (opts & timing.THROTTLE_NO_LEADING) ? 0 : new Date().getTime();
+            tid = null;
+            func(...args);
+            if (tid === null) {
+                args = [];
             }
-            if (current[ckey] === undefined) {
-                current[ckey] = {};
+        };
+
+        return function () {
+            const now = new Date().getTime();
+            if (!previousTimestamp && (opts & timing.THROTTLE_NO_LEADING)) {
+                previousTimestamp = now;
             }
-            previous = current;
-            current = current[ckey];
-        }
-    }
-    static custom(tagName, configuration) {
-        customElements.define(tagName, class extends Form {
-            constructor() {
-                super(configuration);
+            const remaining = 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);
             }
+        };
+
+    }
+};
+
+class Fragments {
+    static fromHtml(...html) {
+        const el = document.createElement('div');
+        el.innerHTML = html.join("");
+        const fragment = new DocumentFragment();
+        Array.from(el.childNodes).forEach(node => {
+            fragment.appendChild(node);
         });
+        return fragment;
+    }    
+    static toHtml(fragment) {
+        var r = document.createElement("root");
+        r.appendChild(fragment);
+        return r.innerHTML;
+    }
+    static from(...nodes) {
+        const fragment = new DocumentFragment();
+        for (let i = 0; i !== nodes.length; ++i) {
+            fragment.appendChild(nodes[i]);
+        }
+        return fragment;
     }
-    static configure(configuration) {
-        FieldError.configure();
-        Errors.configure();
-        Spinner.configure();
-        Input.configure();
-        Select.configure();
-        Form.custom('ful-form', configuration || {});
+    static fromChildNodes(el) {
+        const nodes = Array.from(el.childNodes);
+        const fragment = new DocumentFragment();
+        for (let i = 0; i !== nodes.length; ++i) {
+            fragment.appendChild(nodes[i]);
+        }
+        return fragment;
     }
 }
 
-class Storage {
-    constructor(prefix, storage) {
-        this.prefix = prefix;
-        this.storage = storage;
-    }
-    save(k, v) {
-        this.storage.setItem(`${this.prefix}-${k}`, JSON.stringify(v));
+class Attributes {
+    static id = 0;
+    static uid(prefix) {
+        return `${prefix}-${++Attributes.id}`;
     }
-    load(k) {
-        const got = this.storage.getItem(`${this.prefix}-${k}`);
-        return got === undefined ? undefined : JSON.parse(got);
+    static asBoolean(value) {
+        return value !== null && value !== undefined && value !== false;
     }
-    remove(k) {
-        this.storage.removeItem(`${this.prefix}-${k}`);
+    static defaultValue(el, k, v) {
+        if (!el.hasAttribute(k)) {
+            el.setAttribute(k, v);
+        }
+        return el.getAttribute(k);
     }
-    pop(k) {
-        const decoded = this.load(k);
-        this.remove(k);
-        return decoded;
+    static forward(prefix, from, to) {
+        from.getAttributeNames()
+            .filter(a => a.startsWith(prefix))
+            .forEach(a => {
+                const target = a.substring(prefix.length);
+                if (target === 'class') {
+                    to.classList.add(...from.getAttribute(prefix + "class").split(" ").filter(a => a.length));
+                    return;
+                }
+                to.setAttribute(target, from.getAttribute(a));
+            });
     }
 }
 
-class LocalStorage extends Storage {
-    constructor(prefix) {
-        super(prefix, localStorage);
+class Slots {
+    static from(el) {
+        const slotted = Object.fromEntries(Array.from(el.querySelectorAll("[slot]")).map(el => {
+            el.parentElement.removeChild(el);
+            const slot = el.getAttribute("slot");
+            el.removeAttribute("slot");
+            return [slot, el];
+        }));
+        slotted.default = new DocumentFragment();
+        slotted.default.append(...el.childNodes);
+        return slotted;
     }
-}
 
-class SessionStorage extends Storage {
-    constructor(prefix) {
-        super(prefix, sessionStorage);
-    }
 }
 
-class VersionedStorage {
-    constructor(storage, key, dataSupplier){
-        this.storage = storage;
-        this.key = key;
-        this.dataSupplier = dataSupplier;
-        this.cache = null;
-        
-    }
-    async load(revision){
-        const saved = this.storage.load(this.key);
-        if (!!saved && saved.revision === revision) {
-            this.cache = saved.value;
-            return;
+const Templated = (SuperClass, template) => {
+    return class extends SuperClass {
+        #rendered;
+        async connectedCallback() {
+            if (this.#rendered) {
+                return;
+            }
+            const slotted = Slots.from(this);
+            const fragment = await Promise.resolve(this.render(slotted, template));
+            this.innerHTML = '';
+            if (fragment) {
+                this.appendChild(fragment);
+            }
+            this.#rendered = true;
         }
-        const freshData = await this.dataSupplier(revision, this.key);
-        this.storage.save(this.key, {
-            revision: revision,
-            value: freshData
-        });
-        this.cache = freshData;
+    };
+};
+
+const Stateful = (SuperClass, flags, others) => {
+
+    const all = [].concat(flags).concat(others || []);
+
+    return class extends SuperClass {
+        static get observedAttributes() {
+            return all;
+        }
+        constructor(...args) {
+            super(...args);
+            this.internals_ = this.internals_ || this.attachInternals();
+            for (const flag of flags) {
+                Object.defineProperty(this, flag, {
+                    get() {
+                        return this.hasAttribute(flag);
+                    },
+                    set(value) {
+                        if (Attributes.asBoolean(value)) {
+                            this.internals_.states.add(`--${flag}`);
+                            this.setAttribute(flag, '');
+                            return;
+                        }
+                        this.internals_.states.delete(`--${flag}`);
+                        this.removeAttribute(flag);
+                    }
+                });
+            }
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (oldValue === newValue) {
+                return;
+            }
+            this[name] = newValue;
+            const method = this[`on${name.charAt(0).toUpperCase()}${name.substr(1).toLowerCase()}Changed`];
+            method?.call(this, newValue, oldValue);
+        }
+    };
+};
+
+class FieldError extends Templated(HTMLElement) {
+    render(slotted, template) {
+        this.classList.add('invalid-feedback');
     }
-    data(){
-        return this.cache;
+    static configure() {
+        customElements.define('ful-field-error', FieldError);
     }
 }
 
-class AuthorizationCodeFlow {
-    static forKeycloak(clientId, realmBaseUrl, redirectUri){
-        const scope = "openid profile";
-        return new AuthorizationCodeFlow(clientId, scope, {
-            auth: new URL("protocol/openid-connect/auth", realmBaseUrl),
-            token: new URL("protocol/openid-connect/token", realmBaseUrl),
-            logout: new URL("protocol/openid-connect/logout", realmBaseUrl),
-            registration: new URL("protocol/openid-connect/registrations", realmBaseUrl),
-            redirect: redirectUri
-        });        
-    }
-    constructor(clientId, scope, {auth, token, registration, logout, redirect}) {
-        this.storage = new SessionStorage(clientId);
-        this.clientId = clientId;
-        this.scope = scope;
-        this.uri = {auth, token, registration, logout, redirect};
+class Errors extends Templated(HTMLElement) {
+    render(slotted, template) {
+        this.classList.add('alert', 'alert-danger', 'd-none');
     }
-    async action(uri, additionalParams){
-        const pkceVerifier = Base64.encode(crypto.getRandomValues(new Uint8Array(32)).buffer);
-        const pkceChallenge = Base64.encode(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(pkceVerifier)));
-        const state = this.clientId + Base64.encode(crypto.getRandomValues(new Uint8Array(16)).buffer);
-        this.storage.save(AuthorizationCodeFlow.PKCE_AND_STATE_KEY, {
-            state: state,
-            verifier: pkceVerifier
-        });
-        const url = new URL(uri);
-        url.searchParams.set("client_id", this.clientId);
-        url.searchParams.set("redirect_uri", this.uri.redirect);
-        url.searchParams.set("response_type", 'code');
-        url.searchParams.set("scope", this.scope);
-        url.searchParams.set("state", state);
-        url.searchParams.set("code_challenge", pkceChallenge);
-        url.searchParams.set("code_challenge_method", 'S256');
-        Object.entries(additionalParams || {}).forEach(kv => {
-            url.searchParams.set(kv[0], kv[1]);
-        });
-        window.location = url;
+    static configure() {
+        customElements.define('ful-errors', Errors);
     }
-    async registration(additionalParams){
-        await this.action(this.uri.registration, additionalParams);
+
+}
+
+/* global Infinity, CSS */
+
+class Form extends Templated(Observable(HTMLElement)) {
+    constructor({ mutators, extractors, valueHoldersSelector, ignoredChildrenSelector }) {
+        super();
+        this.mutators = mutators || {};
+        this.extractors = extractors || {};
+        this.valueHoldersSelector = valueHoldersSelector || '[name]';
+        this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none';
     }
-    async applicationInitiatedAction(kcAction){
-        await this.action(this.uri.auth, {
-            kc_action: kcAction
+    render(slotted, template) {
+        const form = document.createElement('form');
+        form.append(slotted.default);
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            this.spinner(true);
+            try {
+                await this.fire('submit', this.getValues(), this);
+            } catch (e) {
+                if (e instanceof Failure) {
+                    this.setErrors(e.problems);
+                    return;
+                }
+                throw e;
+            } finally {
+                this.spinner(false);
+            }
         });
+        return form;
     }
-    async _tokenExchange(code, state) {
-        window.history.replaceState('', "", this.uri.redirect);
-        const stateAndVerifier = this.storage.pop(AuthorizationCodeFlow.PKCE_AND_STATE_KEY);
-        if (stateAndVerifier.state !== state) {
-            throw new Error("State mismatch");
-        }
-        const response = await fetch(this.uri.token, {
-            method: "POST",
-            headers: {
-                "Content-Type": 'application/x-www-form-urlencoded'
-            },
-            body: new URLSearchParams([
-                ["client_id", this.clientId],
-                ["code", code],
-                ["grant_type", "authorization_code"],
-                ["code_verifier", stateAndVerifier.verifier],
-                ["state", stateAndVerifier.state],
-                ["redirect_uri", this.uri.redirect]
-            ])
+    spinner(spin) {
+        this.querySelectorAll('ful-spinner').forEach(el => {
+            el.hidden = !spin;
+        });
+        this.querySelectorAll('[type=submit],[type=reset]').forEach(el => {
+            el.disabled = spin;
         });
-        if (!response.ok) {
-            const text = await response.text();
-            throw new Error("Error:" + response.status + ": " + text);
-        }
-        const token = await response.json();
-        return new AuthorizationCodeFlowSession(this.clientId, token, this.uri);
     }
-    async ensureLoggedIn() {
-        const url = new URL(window.location.href);
-        const code = url.searchParams.get("code");
-        if (code && this.storage.load(AuthorizationCodeFlow.PKCE_AND_STATE_KEY)) {
-            //if callback from keycloak and we have our state still stored
-            const state = url.searchParams.get("state");
-            return await this._tokenExchange(code, state);
+    setValues(values) {
+        for (let k in values) {
+            if (!values.hasOwnProperty(k)) {
+                continue;
+            }
+            Array.from(this.querySelectorAll(`[name='${CSS.escape(k)}']`)).forEach((el) => {
+                Form.mutate(this.mutators, el, values[k], k, values);
+            });
         }
-        //if not authorized
-        await this.action(this.uri.auth, {});
-        return null;
     }
-}
-AuthorizationCodeFlow.PKCE_AND_STATE_KEY = "state-and-verifier";
+    getValues() {
+        return Array.from(this.querySelectorAll(this.valueHoldersSelector))
+            .filter((el) => {
+                if (el.dataset['fulBindInclude'] === 'never') {
+                    return false;
+                }
+                return el.dataset['fulBindInclude'] === 'always' || el.closest(this.ignoredChildrenSelector) === null;
+            })
+            .reduce((result, el) => {
+                return Form.providePath(result, el.getAttribute('name'), Form.extract(this.extractors, el));
+            }, {});
+    }
+    setErrors(errors, scroll) {
+        this.clearErrors();
+        errors
+            .filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
+            .forEach((e) => {
+                const name = e.context.replace("[", ".").replace("].", ".");
+                this.querySelectorAll(`[name='${CSS.escape(name)}']`)
+                    .forEach(input => {
+                        input.classList.add('is-invalid');
+                        if (input.parentElement.classList.contains("form-floating")) {
+                            input.parentElement.classList.add('is-invalid');
+                        }
+                    });
+                this.querySelectorAll(`ful-field-error[field='${CSS.escape(name)}']`)
+                    .forEach(el => el.innerText = e.reason);
+            });
+        this.querySelectorAll("ful-errors")
+            .forEach(el => {
+                const globalErrors = errors.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
+                el.innerHTML = globalErrors.map(e => e.reason).join("\n");
+                if (globalErrors.length !== 0) {
+                    el.classList.remove('d-none');
+                }
+            });
 
-class AuthorizationCodeFlowSession {
-    static parseToken(token) {
-        const [rawHeader, rawPayload, signature] = token.split(".");
-        const ut8decoder = new TextDecoder("utf-8");
-        return {
-            header: JSON.parse(ut8decoder.decode(Base64.decode(rawHeader, Base64.STANDARD))),
-            payload: JSON.parse(ut8decoder.decode(Base64.decode(rawPayload, Base64.STANDARD))),
-            signature: signature
-        };
-    }    
-    constructor(clientId, t, {token, logout, redirect}) {
-        this.clientId = clientId;
-        this.token = t;
-        this.accessToken = AuthorizationCodeFlowSession.parseToken(t.access_token);
-        this.refreshToken = AuthorizationCodeFlowSession.parseToken(t.refresh_token);
-        this.uri = { token, logout, redirect };
-        this.refreshCallback = null;
+        if (!scroll) {
+            return;
+        }
+        const ys = Array.from(this.querySelectorAll('ful-field-error:not(.d-none)'))
+            .map(el => el.getBoundingClientRect().y + window.scrollY);
+        const miny = Math.min(...ys);
+        if (miny !== Infinity) {
+            window.scroll(window.scrollX, miny > 100 ? miny - 100 : 0);
+        }
     }
-    onRefresh(callback) {
-        this.refreshCallback = callback;
+    clearErrors() {
+        this.querySelectorAll('[name].is-invalid, .form-floating.is-invalid')
+            .forEach(el => el.classList.remove('is-invalid'));
+        this.querySelectorAll("ful-errors")
+            .forEach(el => {
+                el.innerHTML = '';
+                el.classList.add('d-none');
+            });
     }
-    async refresh() {
-        const response = await fetch(this.uri.token, {
-            method: "POST",
-            headers: {
-                "Content-Type": 'application/x-www-form-urlencoded'
-            },
-            body: new URLSearchParams([
-                ["client_id", this.clientId],
-                ["grant_type", "refresh_token"],
-                ["refresh_token", this.token.refresh_token]
-            ])
-        });
-        if (!response.ok) {
-            throw new Error("Error:" + response.status + ": " + response.text());
+    static extract(extractors, el) {
+        const maybeExtractor = extractors[el.dataset['fulBindExtractor']] || extractors[el.dataset['fulBindProvide']];
+        if (maybeExtractor) {
+            return maybeExtractor(el);
         }
-        const token = await response.json();
-        this.token = token;
-        this.accessToken = this._parseToken(token.access_token);
-        this.refreshToken = this._parseToken(token.refresh_token);
-        if (this.refreshCallback) {
-            this.refreshCallback(this.token, this.accessToken, this.refreshToken);
+        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.getValue) {
+            return el.getValue();
+        }
+        return el.value || null;
     }
-    shouldBeRefreshed(gracePeriod) {
-        const now = new Date().getTime();
-        const refreshTokenExpiresAt = this.refreshToken.payload.exp * 1000;
-        const expired = now > refreshTokenExpiresAt;
-        const shouldRefresh = now - gracePeriod > refreshTokenExpiresAt;
-        return !expired && shouldRefresh;
-    }
-    async refreshIf(gracePeriod) {
-        if (!this.shouldBeRefreshed(gracePeriod)) {
+    static mutate(mutators, el, raw, key, values) {
+        const maybeMutator = mutators[el.dataset['fulBindMutator']] || mutators[el.dataset['fulBindProvide']];
+        if (maybeMutator) {
+            maybeMutator(el, raw, key, values);
             return;
         }
-        await this.refresh();
-    }
-    logout() {
-        const url = new URL(this.uri.logout);
-        url.searchParams.set("post_logout_redirect_uri", this.uri.redirect);
-        url.searchParams.set("id_token_hint", this.token.id_token);
-        window.location = url;
+        if (el.getAttribute('type') === 'radio') {
+            el.checked = el.getAttribute('value') === raw;
+            return;
+        }
+        if (el.getAttribute('type') === 'checkbox') {
+            el.checked = raw;
+            return;
+        }
+        if (el.setValue) {
+            el.setValue(raw);
+            return;
+        }
+        el.value = raw;
     }
 
-    bearerToken() {
-        return `Bearer ${this.token.access_token}`;
+    static providePath(result, path, value) {
+        const keys = path.split(".").map((k) => k.match(/^[0-9]+$/) ? +k : k);
+        let current = result;
+        let previous = null;
+        for (let i = 0; ; ++i) {
+            const ckey = keys[i];
+            const pkey = keys[i - 1];
+            if (Number.isInteger(ckey) && !Array.isArray(current)) {
+                if (previous !== null) {
+                    previous[pkey] = current = [];
+                } else {
+                    result = current = [];
+                }
+            }
+            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];
+        }
     }
-    
-    interceptor(gracePeriodBefore, gracePeriodAfter){
-        return new AuthorizationCodeFlowInterceptor(this, gracePeriodBefore, gracePeriodAfter);        
+    static custom(tagName, configuration) {
+        customElements.define(tagName, class extends Form {
+            constructor() {
+                super(configuration);
+            }
+        });
     }
 }
 
-class AuthorizationCodeFlowInterceptor {
-    constructor(session, gracePeriodBefore, gracePeriodAfter) {
-        this.session = session;
-        this.gracePeriodBefore = gracePeriodBefore || 2000;
-        this.gracePeriodAfter = gracePeriodAfter || 30000;
+const ful_input_ec = globalThis.ec || ftl.EvaluationContext.configure({});
+
+const ful_input_template = globalThis.template || ftl.Template.fromHtml(`
+    <div data-tpl-if="floating" class="input-group has-validation">
+        <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
+        <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
+        <div class="form-floating">
+            {{{{ slotted.input }}}} 
+            <label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
+        </div>
+        <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
+        <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
+        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+    </div>
+    <div data-tpl-if="!floating" data-tpl-remove="tag">
+        <label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
+        <div class="input-group has-validation">
+            <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
+            <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
+            {{{{ slotted.input }}}} 
+            <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
+            <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
+            <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+        </div>
+    </div>
+`, ful_input_ec);
+
+
+
+class Input extends Templated(HTMLElement, ful_input_template) {
+    render(slotted, template) {
+        const floating = this.hasAttribute('floating');
+        const input = slotted.input = slotted.input || (() => {
+            const el = document.createElement("input");
+            el.classList.add("form-control");
+            return el;
+        })();
+        const id = input.getAttribute('id') || this.getAttribute('input-id') || Attributes.uid('ful-input');
+        Attributes.forward('input-', this, slotted.input);
+        Attributes.defaultValue(slotted.input, "id", id);
+        Attributes.defaultValue(slotted.input, "type", "text");
+        Attributes.defaultValue(slotted.input, "placeholder", " ");
+        const name = input.getAttribute('name');
+        return template.render({ id, name, floating, slotted });
     }
-    async intercept(request, chain) {
-        await this.session.refreshIf(this.gracePeriodBefore);
-        const headers = new Headers(request.options.headers);
-        headers.set("Authorization", this.session.bearerToken());
-        request.options.headers = headers;
-        const response = await chain.proceed(request);
-        await this.session.refreshIf(this.gracePeriodAfter);
-        return response;
+    static configure() {
+        customElements.define('ful-input', Input);
     }
 }
 
-const timing = {
-    sleep(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    },
-    DEBOUNCE_DEFAULT: 0,
-    DEBOUNCE_IMMEDIATE: 1,
-    debounce(timeoutMs, func, options) {
-        let tid = null;
-        let args = [];
-        let previousTimestamp = 0;
-        let opts = options || timing.DEBOUNCE_DEFAULT;
-
-        const later = () => {
-            const elapsed = new Date().getTime() - 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 = [];
-            }
-        };
+/**
+ * <script src="tom-select.complete.js"></script>
+ * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
+ */
+const ful_select_ec = globalThis.ec || ftl.EvaluationContext.configure({});
+
+const ful_select_template = globalThis.template || ftl.Template.fromHtml(`
+    <div data-tpl-if="floating" class="input-group has-validation">
+        <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
+        <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
+        <div class="form-floating">
+            {{{{ slotted.input }}}} 
+            <label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
+        </div>
+        <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
+        <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
+        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+    </div>
+    <div data-tpl-if="!floating" data-tpl-remove="tag">
+        <label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
+        <div class="input-group has-validation">
+            <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
+            <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
+            {{{{ slotted.input }}}} 
+            <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
+            <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
+            <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
+        </div>
+    </div>
+`, ful_select_ec);
+
+
+class Select extends Templated(Observable(HTMLElement), ful_select_template) {
+    constructor(tsConfig) {
+        super();
+        this.tsConfig = tsConfig;
+    }
+    render(slotted, template) {
+        const floating = this.hasAttribute('floating');
+        const remote = this.hasAttribute('remote');
+        const input = slotted.input = slotted.input || (() => {
+            return document.createElement("select");
+        })();
+        const id = input.getAttribute('id') || this.getAttribute('input-id') || Attributes.uid('ful-select');
+        Attributes.forward('input-', this, input);
+        Attributes.defaultValue(input, "id", id);
+        Attributes.defaultValue(input, "placeholder", " ");
+        const name = input.getAttribute('name');
+        input.setValue = this.setValue.bind(this);
+        input.getValue = this.getValue.bind(this);
+
+        //tomselect needs the input to have a parent.
+        //se we move the input to a fragment
+        slotted.input = Fragments.from(input);
 
-        return function () {
-            args = arguments;
-            previousTimestamp = new Date().getTime();
-            if (tid === null) {
-                tid = setTimeout(later, timeoutMs);
-                if (opts === timing.DEBOUNCE_IMMEDIATE) {
-                    func(...args);
+        this.loaded = !remote;
+        this.ts = new TomSelect(input, Object.assign(remote ? {
+            preload: 'focus',
+            load: async (query, callback) => {
+                if (this.loaded) {
+                    callback();
+                    return;
                 }
+                const data = await this.fire('load', query, []);
+                this.loaded = true;
+                callback(data);
             }
-        };
-    },
-    THROTTLE_DEFAULT: 0,
-    THROTTLE_NO_LEADING: 1,
-    THROTTLE_NO_TRAILING: 2,
-    throttle(timeoutMs, func, options) {
-        let tid = null;
-        let args = [];
-        let previousTimestamp = 0;
-        let opts = options || timing.THROTTLE_DEFAULT;
+        } : {}, this.tsConfig));
 
-        const later = () => {
-            previousTimestamp = (opts & timing.THROTTLE_NO_LEADING) ? 0 : new Date().getTime();
-            tid = null;
-            func(...args);
-            if (tid === null) {
-                args = [];
+        return template.render({ id, name, floating, slotted });
+    }
+    async setValue(v) {
+        if (!this.loaded) {
+            await this.ts.load();
+        }
+        this.ts.setValue(v);
+    }
+    getValue() {
+        const v = this.ts.getValue();
+        return v === '' ? null : v;
+    }
+    static custom(tagName, configuration) {
+        customElements.define(tagName, class extends Select {
+            constructor() {
+                super(configuration);
             }
-        };
+        });
+    }
+    static configure() {
+        return Select.custom('ful-select');
+    }
 
-        return function () {
-            const now = new Date().getTime();
-            if (!previousTimestamp && (opts & timing.THROTTLE_NO_LEADING)) {
-                previousTimestamp = now;
-            }
-            const remaining = 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);
-            }
-        };
+}
 
+class Spinner extends Templated(HTMLElement) {
+    render(slotted, template) {
+        return Fragments.fromHtml(`
+            <div class="spinner-border spinner-border-sm" aria-hidden="true"></div>
+        `);
     }
-};
+    static configure() {
+        customElements.define('ful-spinner', Spinner);
+    }
+}
 
 class Wizard extends HTMLElement {
     constructor() {
@@ -1151,5 +1182,5 @@ class App {
     }
 }
 
-export { App, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, CustomElements, Errors, Failure, FieldError, Form, Hex, HttpClient, Input, LocalStorage, Observable, Select, SessionStorage, Spinner, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, timing };
+export { App, Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Errors, Failure, FieldError, Form, Fragments, Hex, HttpClient, Input, LocalStorage, Observable, Select, SessionStorage, Slots, Spinner, Stateful, Templated, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, timing };
 //# sourceMappingURL=ful.mjs.map