@optionfactory/ful 0.25.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,18 +99,8 @@ class Observable {
         const listeners = this.listeners[event] || [];
         const idx = listeners.indexOf(listener);
         return idx === -1 ? [] : listeners.splice(idx, 1);
-    }
-    static init(self){
-        self.listeners = {};
-    }
-    static mixin(ctor) {
-        ctor.prototype.fireSync = Observable.prototype.fireSync;
-        ctor.prototype.fire = Observable.prototype.fire;
-        ctor.prototype.on = Observable.prototype.on;
-        ctor.prototype.un = Observable.prototype.un;
-    }
-
-}
+    }    
+};
 
 class ContextInterceptor {
     constructor() {
@@ -278,285 +269,490 @@ function jsonPatch(body, headers){
     return jsonRequest('PATCH', body, headers);
 }
 
-/* global Infinity, CSS */
-
-class CustomElements {
-    static id = 0;
-    static uid(prefix) {
-        return `${prefix}-${++CustomElements.id}`;
+class Storage {
+    constructor(prefix, storage) {
+        this.prefix = prefix;
+        this.storage = storage;
     }
-    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));
-            });
+    save(k, v) {
+        this.storage.setItem(`${this.prefix}-${k}`, JSON.stringify(v));
     }
-    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;
+    load(k) {
+        const got = this.storage.getItem(`${this.prefix}-${k}`);
+        return got === undefined ? undefined : JSON.parse(got);
     }
-    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;
+    remove(k) {
+        this.storage.removeItem(`${this.prefix}-${k}`);
+    }
+    pop(k) {
+        const decoded = this.load(k);
+        this.remove(k);
+        return decoded;
     }
-
 }
 
-
-class FieldError extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        this.classList.add('invalid-feedback');
+class LocalStorage extends Storage {
+    constructor(prefix) {
+        super(prefix, localStorage);
     }
-    static configure() {
-        customElements.define('ful-field-error', FieldError);
+}
+
+class SessionStorage extends Storage {
+    constructor(prefix) {
+        super(prefix, sessionStorage);
     }
 }
 
-class Errors extends HTMLElement {
-    constructor() {
-        super();
+class VersionedStorage {
+    constructor(storage, key, dataSupplier){
+        this.storage = storage;
+        this.key = key;
+        this.dataSupplier = dataSupplier;
+        this.cache = null;
+        
     }
-    connectedCallback() {
-        this.classList.add('alert', 'alert-danger', 'd-none');
+    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;
     }
-    static configure() {
-        customElements.define('ful-errors', Errors);
+    data(){
+        return this.cache;
     }
-
 }
 
-class Spinner extends HTMLElement {
-    constructor() {
-        super();
+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
+        });        
     }
-    connectedCallback() {
-        this.classList.add('spinner-border', 'spinner-border-sm', 'd-none');
-        this.setAttribute("aria-hidden", "true");
+    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};
     }
-    show() {
-        this.classList.remove("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;
     }
-    hide() {
-        this.classList.add("d-none");
+    async registration(additionalParams){
+        await this.action(this.uri.registration, additionalParams);
     }
-    static configure() {
-        customElements.define('ful-spinner', Spinner);
+    async applicationInitiatedAction(kcAction){
+        await this.action(this.uri.auth, {
+            kc_action: kcAction
+        });
     }
-}
-
-
-
-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));
+    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);
     }
-    static configure() {
-        customElements.define('ful-input', Input);
+    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;
     }
 }
+AuthorizationCodeFlow.PKCE_AND_STATE_KEY = "state-and-verifier";
 
-
-
-/**
- * <script src="tom-select.complete.js"></script>
- * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
- */
-class Select extends HTMLElement {
-    constructor(tsConfig) {
-        super();
-        Observable.init(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 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;
     }
-    getValue(){
-        const v = this.ts.getValue();
-        return v === '' ? null : v;
+    onRefresh(callback) {
+        this.refreshCallback = callback;
     }
-    static custom(tagName, configuration) {
-        customElements.define(tagName, class extends Select {
-            constructor() {
-                super(configuration);
-            }
+    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());
+        }
+        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);
+        }
     }
-    static configure() {
-        return Select.custom('ful-select');
+    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;
+        }
+        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;
+    }
+
+    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);
+                }
+            }
+        };
+    },
+    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 = [];
+            }
+        };
+
+        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 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 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 Attributes {
+    static id = 0;
+    static uid(prefix) {
+        return `${prefix}-${++Attributes.id}`;
+    }
+    static asBoolean(value) {
+        return value !== null && value !== undefined && value !== false;
+    }
+    static defaultValue(el, k, v) {
+        if (!el.hasAttribute(k)) {
+            el.setAttribute(k, v);
+        }
+        return el.getAttribute(k);
+    }
+    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 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;
     }
 
 }
 
-Observable.mixin(Select);
+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 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');
+    }
+    static configure() {
+        customElements.define('ful-field-error', FieldError);
+    }
+}
+
+class Errors extends Templated(HTMLElement) {
+    render(slotted, template) {
+        this.classList.add('alert', 'alert-danger', 'd-none');
+    }
+    static configure() {
+        customElements.define('ful-errors', Errors);
+    }
 
+}
 
+/* global Infinity, CSS */
 
-class Form extends HTMLElement {
+class Form extends Templated(Observable(HTMLElement)) {
     constructor({ mutators, extractors, valueHoldersSelector, ignoredChildrenSelector }) {
         super();
-        Observable.init(this);
         this.mutators = mutators || {};
         this.extractors = extractors || {};
         this.valueHoldersSelector = valueHoldersSelector || '[name]';
         this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none';
-
+    }
+    render(slotted, template) {
         const form = document.createElement('form');
-        form.append(...this.childNodes);
-        this.appendChild(form);
-
+        form.append(slotted.default);
         form.addEventListener('submit', async (e) => {
             e.preventDefault();
             this.spinner(true);
@@ -572,10 +768,11 @@ class Form extends HTMLElement {
                 this.spinner(false);
             }
         });
+        return form;
     }
     spinner(spin) {
         this.querySelectorAll('ful-spinner').forEach(el => {
-            el[spin ? 'show' : 'hide']();
+            el.hidden = !spin;
         });
         this.querySelectorAll('[type=submit],[type=reset]').forEach(el => {
             el.disabled = spin;
@@ -723,338 +920,163 @@ class Form extends HTMLElement {
             }
         });
     }
-    static configure(configuration) {
-        FieldError.configure();
-        Errors.configure();
-        Spinner.configure();
-        Input.configure();
-        Select.configure();
-        Form.custom('ful-form', configuration || {});
-    }
 }
 
-Observable.mixin(Form);
-
-class Storage {
-    constructor(prefix, storage) {
-        this.prefix = prefix;
-        this.storage = storage;
-    }
-    save(k, v) {
-        this.storage.setItem(`${this.prefix}-${k}`, JSON.stringify(v));
-    }
-    load(k) {
-        const got = this.storage.getItem(`${this.prefix}-${k}`);
-        return got === undefined ? undefined : JSON.parse(got);
-    }
-    remove(k) {
-        this.storage.removeItem(`${this.prefix}-${k}`);
+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 });
     }
-    pop(k) {
-        const decoded = this.load(k);
-        this.remove(k);
-        return decoded;
+    static configure() {
+        customElements.define('ful-input', Input);
     }
 }
 
-class LocalStorage extends Storage {
-    constructor(prefix) {
-        super(prefix, localStorage);
+/**
+ * <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);
 
-class SessionStorage extends Storage {
-    constructor(prefix) {
-        super(prefix, sessionStorage);
-    }
-}
+        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);
+            }
+        } : {}, this.tsConfig));
 
-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 freshData = await this.dataSupplier(revision, this.key);
-        this.storage.save(this.key, {
-            revision: revision,
-            value: freshData
-        });
-        this.cache = freshData;
-    }
-    data(){
-        return this.cache;
-    }
-}
-
-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};
-    }
-    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;
-    }
-    async registration(additionalParams){
-        await this.action(this.uri.registration, additionalParams);
-    }
-    async applicationInitiatedAction(kcAction){
-        await this.action(this.uri.auth, {
-            kc_action: kcAction
-        });
-    }
-    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);
+        return template.render({ id, name, floating, slotted });
     }
-    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);
+    async setValue(v) {
+        if (!this.loaded) {
+            await this.ts.load();
         }
-        //if not authorized
-        await this.action(this.uri.auth, {});
-        return null;
-    }
-}
-AuthorizationCodeFlow.PKCE_AND_STATE_KEY = "state-and-verifier";
-
-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;
+        this.ts.setValue(v);
     }
-    onRefresh(callback) {
-        this.refreshCallback = callback;
+    getValue() {
+        const v = this.ts.getValue();
+        return v === '' ? null : v;
     }
-    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]
-            ])
+    static custom(tagName, configuration) {
+        customElements.define(tagName, class extends Select {
+            constructor() {
+                super(configuration);
+            }
         });
-        if (!response.ok) {
-            throw new Error("Error:" + response.status + ": " + response.text());
-        }
-        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);
-        }
-    }
-    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;
-        }
-        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 configure() {
+        return Select.custom('ful-select');
     }
 
-    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;
+class Spinner extends Templated(HTMLElement) {
+    render(slotted, template) {
+        return Fragments.fromHtml(`
+            <div class="spinner-border spinner-border-sm" aria-hidden="true"></div>
+        `);
     }
-    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-spinner', Spinner);
     }
 }
 
-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);
-                }
-            }
-        };
-    },
-    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 = [];
-            }
-        };
-
-        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 Wizard extends HTMLElement {
     constructor() {
         super();
@@ -1160,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