@optionfactory/ful 0.25.0 → 0.26.0

package/dist/ful.iife.js

@@ -73,8 +73,9 @@ var ful = (function (exports) {
         }
     }
 
-    class Observable {
-        constructor() {
+    const Observable = (SuperClass) => class extends SuperClass {
+        constructor(...args) {
+            super(...args);
             this.listeners = {};
         }
         fireSync(event, data, initialAcc) {
@@ -101,18 +102,8 @@ var ful = (function (exports) {
             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() {
@@ -281,285 +272,490 @@ var ful = (function (exports) {
         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);
@@ -575,10 +771,11 @@ var ful = (function (exports) {
                     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;
@@ -726,338 +923,163 @@ var ful = (function (exports) {
                 }
             });
         }
-        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();
@@ -1164,15 +1186,16 @@ var ful = (function (exports) {
     }
 
     exports.App = App;
+    exports.Attributes = Attributes;
     exports.AuthorizationCodeFlow = AuthorizationCodeFlow;
     exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
     exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;
     exports.Base64 = Base64;
-    exports.CustomElements = CustomElements;
     exports.Errors = Errors;
     exports.Failure = Failure;
     exports.FieldError = FieldError;
     exports.Form = Form;
+    exports.Fragments = Fragments;
     exports.Hex = Hex;
     exports.HttpClient = HttpClient;
     exports.Input = Input;
@@ -1180,7 +1203,10 @@ var ful = (function (exports) {
     exports.Observable = Observable;
     exports.Select = Select;
     exports.SessionStorage = SessionStorage;
+    exports.Slots = Slots;
     exports.Spinner = Spinner;
+    exports.Stateful = Stateful;
+    exports.Templated = Templated;
     exports.VersionedStorage = VersionedStorage;
     exports.Wizard = Wizard;
     exports.jsonPatch = jsonPatch;