@optionfactory/ful 0.18.0 → 0.20.0

package/dist/ful.iife.js

@@ -1,105 +1,6 @@
 var ful = (function (exports) {
     'use strict';
 
-    /* global CSS */
-
-    function extract(extractors, el) {
-        const maybeExtractor = extractors[el.dataset['bindExtractor']] || extractors[el.dataset['bindProvide']];
-        if (maybeExtractor) {
-            return maybeExtractor(el);
-        }
-        if (el.getAttribute('type') === 'radio') {
-            if (!el.checked) {
-                return undefined;
-            }
-            return el.dataset['bindType'] === 'boolean' ? el.value === 'true' : el.value;
-        }
-        if (el.getAttribute('type') === 'checkbox') {
-            return el.checked;
-        }
-        if (el.dataset['bindType'] === 'boolean') {
-            return !el.value ? null : el.value === 'true';
-        }
-        return el.value || null;
-    }
-
-    function mutate(mutators, el, raw, key, values) {
-        const maybeMutator = mutators[el.dataset['bindMutator']] || mutators[el.dataset['bindProvide']];
-        if (maybeMutator) {
-            maybeMutator(el, raw, key, values);
-            return;
-        }
-        if (el.getAttribute('type') === 'radio') {
-            el.checked = el.getAttribute('value') === raw;
-            return;
-        }
-        if (el.getAttribute('type') === 'checkbox') {
-            el.checked = raw;
-            return;
-        }
-        el.value = raw;
-    }
-
-
-    function providePath(result, path, value) {
-        const keys = path.split(".").map((k) => k.match(/^[0-9]+$/) ? +k : k);
-        let current = result;
-        let previous = null;
-        for (let i = 0; ; ++i) {
-            const ckey = keys[i];
-            const pkey = keys[i - 1];
-            if (Number.isInteger(ckey) && !Array.isArray(current)) {
-                if (previous !== null) {
-                    previous[pkey] = current = [];
-                } else {
-                    result = current = [];
-                }
-            }
-            if (i === keys.length - 1) {
-                //when value is undefined we only want to define the property if it's not defined 
-                current[ckey] = value !== undefined ? value : (ckey in current ? current[ckey] : null);
-                return result;
-            }
-            if (current[ckey] === undefined) {
-                current[ckey] = {};
-            }
-            previous = current;
-            current = current[ckey];
-        }
-    }
-
-    class Bindings {
-
-        constructor( {extractors, mutators, ignoredChildrenSelector, valueHoldersSelector}) {
-            this.extractors = extractors || {};
-            this.mutators = mutators || {};
-            this.valueHoldersSelector = valueHoldersSelector || 'input[name], select[name], textarea[name]';
-            this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none';
-        }
-        setValues(el, values) {
-            for (let k in values) {
-                if (!values.hasOwnProperty(k)) {
-                    continue;
-                }
-                Array.from(el.querySelectorAll(`[name='${CSS.escape(k)}']`)).forEach((el) => {
-                    mutate(this.mutators, el, values[k], k, values);
-                });
-            }
-        }
-        getValues(el) {
-            return Array.from(el.querySelectorAll(this.valueHoldersSelector))
-                    .filter((el) => {
-                        if (el.dataset['bindInclude'] === 'never') {
-                            return false;
-                        }
-                        return el.dataset['bindInclude'] === 'always' || el.closest(this.ignoredChildrenSelector) === null;
-                    })
-                    .reduce((result, el) => {
-                        return providePath(result, el.getAttribute('name'), extract(this.extractors, el));
-                    }, {});
-        }
-    }
-
     class Base64 {
         static encode(arrayBuffer, dialect) {
             const d = dialect || Base64.URL_SAFE;
@@ -172,78 +73,54 @@ var ful = (function (exports) {
         }
     }
 
-    /* global Infinity, CSS */
-
-
-    class Form {
-        constructor(el, bindings, {globalErrorsEl, fieldContainerSelector, errorClass, hideClass}) {
-            this.el = el;
-            this.bindings = bindings;
-            this.globalErrorsEl = globalErrorsEl;
-            this.fieldContainerSelector = fieldContainerSelector !== undefined ? fieldContainerSelector : Form.DEFAULT_FIELD_CONTAINER_SELECTOR;
-            this.errorClass = errorClass || Form.DEFAULT_ERROR_CLASS;
-            this.hideClass = hideClass || Form.DEFAULT_HIDE_CLASS;
-        }
-        setValues(values) {
-            return this.bindings.setValues(this.el, values);
-        }
-        getValues() {
-            return this.bindings.getValues(this.el);
+    class Observable {
+        constructor() {
+            this.listeners = {};
         }
-        setErrors(errors, scrollFirstErrorIntoView, context) {
-
-            this.clearErrors();
-            errors
-                    .map(this.mapError ? this.mapError : (e) => e)
-                    .filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
-                    .forEach((e) => {
-                        const name = e.context.replace("[", ".").replace("].", ".");
-                        Array.from(this.el.querySelectorAll(`[name='${CSS.escape(name)}']`))
-                                .map(el => this.fieldContainerSelector ? el.closest(this.fieldContainerSelector) : el)
-                                .filter(el => el !== null)
-                                .forEach(label => {
-                                    label.classList.add(this.errorClass);
-                                    label.dataset['error'] = e.reason;
-                                });
-                    });
-            if (this.globalErrorsEl) {
-                const globalErrors = errors.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
-                this.globalErrorsEl.innerHTML = globalErrors.map(e => e.reason).join("\n");
-                if (globalErrors.length !== 0) {
-                    this.globalErrorsEl.classList.remove(this.hideClass);
-                }
-            }
-            if (!scrollFirstErrorIntoView) {
-                return;
-            }
-            const yOffsets = Array.from(this.el.querySelectorAll('.${CSS.escape(this.errorClass)}'))
-                    .map((label) => label.getBoundingClientRect().y + window.scrollY);
-            const firstErrorScrollY = Math.min(...yOffsets);
-            if (firstErrorScrollY !== Infinity) {
-                window.scroll(window.scrollX, firstErrorScrollY > 100 ? firstErrorScrollY - 100 : 0);
+        fireSync(event, data, initialAcc) {
+            const listeners = this.listeners[event] || [];
+            let acc = initialAcc;
+            for (const l of listeners) {
+                acc = l(data, this, acc);
             }
+            return acc;
         }
-        clearErrors() {
-            this.el.querySelectorAll(`.${CSS.escape(this.errorClass)}`).forEach(l => l.classList.remove(this.errorClass));
-            if (this.globalErrorsEl) {
-                this.globalErrorsEl.innerHTML = '';
-                this.globalErrorsEl.classList.add(this.hideClass);
+        async fire(event, data, initialAcc) {
+            const listeners = this.listeners[event] || [];
+            let acc = initialAcc;
+            for (const l of listeners) {
+                acc = await l(data, this, acc);
             }
+            return acc;
+        }
+        on(event, listener) {
+            this.listeners[event] = this.listeners[event] || [];
+            this.listeners[event].push(listener);
+        }
+        un(event, listener) {
+            const listeners = this.listeners[event] || [];
+            const idx = listeners.indexOf(listener);
+            return idx === -1 ? [] : listeners.splice(idx, 1);
+        }
+        static mixin(self) {
+            self.listeners = {};
+            self.fireSync = Observable.prototype.fireSync;
+            self.fire = Observable.prototype.fire;
+            self.on = Observable.prototype.on;
+            self.un = Observable.prototype.un;
         }
-    }
 
-    Form.DEFAULT_FIELD_CONTAINER_SELECTOR = 'label';
-    Form.DEFAULT_ERROR_CLASS = 'has-error';
-    Form.DEFAULT_HIDE_CLASS = 'd-none';
+    }
 
     class ContextInterceptor {
         constructor() {
             const context = document.querySelector("meta[name='context']").getAttribute("content");
             this.context = context.endsWith("/") ? context.substring(0, context.length - 1) : context;
         }
-        before(request) {
+        async intercept(request, chain){
             const separator = request.resource.startsWith("/") ? "" : "/";
             request.resource = this.context + separator + request.resource;
+            return await chain.proceed(request);
         }
     }
 
@@ -252,10 +129,11 @@ var ful = (function (exports) {
             this.k = document.querySelector("meta[name='_csrf_header']").getAttribute("content");
             this.v = document.querySelector("meta[name='_csrf']").getAttribute("content");
         }
-        before(request) {
+        async intercept(request, chain){
             const headers = new Headers(request.options.headers);
             headers.set(this.k, this.v);
             request.options.headers = headers;
+            return await chain.proceed(request);
         }
     }
 
@@ -263,9 +141,10 @@ var ful = (function (exports) {
         constructor(redirectUri) {
             this.redirectUri = redirectUri;
         }
-        after(request, response) {
+        async intercept(request, chain){
+            const response =  await chain.proceed(request);
             if (response.status !== 401) {
-                return;
+                return response;
             }
             window.location.href = redirectUri;
         }
@@ -322,31 +201,35 @@ var ful = (function (exports) {
         }
     }
 
+    class HttpCall {
+        async intercept(request, chain){
+            return await fetch(request.resource, request.options);
+        }    
+    }
+
+    class HttpInterceptorChain {
+        constructor(interceptors, current){
+            this.interceptors = interceptors;
+            this.current = current;
+        }
+        async proceed(request){
+            const interceptor = this.interceptors[this.current];
+            return await interceptor.intercept(request, new HttpInterceptorChain(this.interceptors, this.current + 1));
+        }
+    }
+
+
     class HttpClient {
         static builder() {
             return new HttpClientBuilder();
         }
-        constructor( {interceptors}){
+        constructor({interceptors}){
             this.interceptors = interceptors || [];
         }
         async fetch(resource, options) {
-            const is = this.interceptors.concat(options.interceptors || []);
-            const request = {resource, options};
-            await is.forEach(async (i) => {
-                if (!i.before) {
-                    return;
-                }
-                await i.before(request);
-            });
-            const response = await fetch(request.resource, request.options);
-            await is.forEach(async (i) => {
-                if (!i.after) {
-                    return;
-                }
-                await i.after(request, response);
-            });
-
-            return response;
+            const interceptors = [...this.interceptors, ...options.interceptors || [], new HttpCall()];
+            const chain = new HttpInterceptorChain(interceptors, 0);
+            return await chain.proceed({resource, options});
         }
         async json(resource, options) {
             try {
@@ -369,30 +252,456 @@ var ful = (function (exports) {
                     }]);
             }
         }
-        async form(resource, options, uiOptions) {
-            const ui = uiOptions || {};
-            ui.buttons?.forEach(el => {
-                el.setAttribute("disabled", "disabled");
-                if (ui.loader) {
-                    el.dataset['oldContent'] = el.innerHTML;
-                    el.innerHTML = ui.loader;
+    }
+
+    /* global Infinity, CSS */
+
+    class CustomElements {
+        static id = 0;
+        static uid(prefix) {
+            return `${prefix}-${++CustomElements.id}`;
+        }
+        static forwardAttributes(from, to, except) {
+            from.getAttributeNames().filter(a => except.indexOf(a) === -1)
+                .filter(a => a[0] === '@')
+                .forEach(a => {
+                    if (a === '@class') {
+                        to.classList.add(...from.getAttribute("@class").split(" ").filter(a => a.length));
+                        return;
+                    }
+                    to.setAttribute(a.substring(1), from.getAttribute(a));
+                });
+        }
+        static extractSlots(el) {
+            const slotted = Object.fromEntries([...el.querySelectorAll("[slot]")].map(el => {
+                el.parentElement.removeChild(el);
+                const slot = el.getAttribute("slot");
+                el.removeAttribute("slot");
+                return [slot, el];
+            }));
+            slotted.default = new DocumentFragment();
+            slotted.default.append(...el.childNodes);
+            return slotted;
+        }
+        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;
+        }
+
+    }
+
+
+    class FieldError extends HTMLElement {
+        constructor() {
+            super();
+        }
+        connectedCallback() {
+            this.classList.add('invalid-feedback');
+        }
+        static configure() {
+            customElements.define('ful-field-error', FieldError);
+        }
+    }
+
+    class Errors extends HTMLElement {
+        constructor() {
+            super();
+        }
+        connectedCallback() {
+            this.classList.add('alert', 'alert-danger', 'd-none');
+        }
+        static configure() {
+            customElements.define('ful-errors', Errors);
+        }
+
+    }
+
+    class Spinner extends HTMLElement {
+        constructor() {
+            super();
+        }
+        connectedCallback() {
+            this.classList.add('spinner-border', 'spinner-border-sm', 'd-none');
+            this.setAttribute("aria-hidden", "true");
+        }
+        show() {
+            this.classList.remove("d-none");
+        }
+        hide() {
+            this.classList.add("d-none");
+        }
+        static configure() {
+            customElements.define('ful-spinner', Spinner);
+        }
+    }
+
+
+
+    class 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));
+        }
+        static configure() {
+            customElements.define('ful-input', Input);
+        }
+    }
+
+
+
+    /**
+     * <script src="tom-select.complete.js"></script>
+     * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
+     */
+    class Select extends HTMLElement {
+        constructor(tsConfig) {
+            super();
+            Observable.mixin(this);
+            const id = CustomElements.uid('ful-select');
+            const name = this.getAttribute('@name');
+            const floating = this.hasAttribute('@floating');
+            const remote = this.hasAttribute('@remote');
+            const slotted = CustomElements.extractSlots(this);
+            slotted.input = slotted.input || (() => {
+                return document.createElement("select");
+            })();
+            CustomElements.forwardAttributes(this, slotted.input, ['@floating', '@remote']);
+            const attrIfMissing = (el, k, v) => !el.hasAttribute(k) && el.setAttribute(k, v);
+            attrIfMissing(slotted.input, "name", id);
+            attrIfMissing(slotted.input, "id", id);
+            attrIfMissing(slotted.input, "placeholder", " ");
+            this.innerHTML = '';
+            this.append(CustomElements.labelAndInputGroup(id, name || id, floating, slotted));
+            this.loaded = !remote;
+            this.ts = new TomSelect(slotted.input, Object.assign(remote ? {
+                preload: 'focus',
+                load: async (query, callback) => {
+                    if (this.loaded) {
+                        callback();
+                        return;
+                    }
+                    const data = await this.fire('load', query, []);
+                    this.loaded = true;
+                    callback(data);        
+                } 
+            } : {}, tsConfig));
+            slotted.input.setValue = this.setValue.bind(this);
+            slotted.input.getValue = this.getValue.bind(this);
+        }
+        async setValue(v){
+            if(!this.loaded){
+                await this.ts.load();
+            }
+            this.ts.setValue(v);
+        }
+        getValue(){
+            const v = this.ts.getValue();
+            return v === '' ? null : v;
+        }
+        static custom(tagName, configuration) {
+            customElements.define(tagName, class extends Select {
+                constructor() {
+                    super(configuration);
                 }
             });
-            try {
-                const r = await this.json(resource, options);
-                ui.form?.clearErrors();
-                return r;
-            } catch (e) {
-                ui.form?.setErrors(e.problems);
-                throw e;
-            } finally {
-                ui.buttons?.forEach(el => {
-                    el.removeAttribute("disabled");
-                    el.innerHTML = el.dataset['oldContent'];
-                    delete el.dataset['oldContent'];
+        }
+        static configure() {
+            return Select.custom('ful-select');
+        }
+
+    }
+
+    class Form extends HTMLElement {
+        constructor({ mutators, extractors, valueHoldersSelector, ignoredChildrenSelector }) {
+            super();
+            Observable.mixin(this);
+            this.mutators = mutators || {};
+            this.extractors = extractors || {};
+            this.valueHoldersSelector = valueHoldersSelector || '[name]';
+            this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none';
+
+            const form = document.createElement('form');
+            form.append(...this.childNodes);
+            this.appendChild(form);
+
+            form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                this.spinner(true);
+                try {
+                    await this.fire('submit', this.getValues(), this);
+                } catch (e) {
+                    if (e instanceof Failure) {
+                        this.setErrors(e.problems);
+                        return;
+                    }
+                    throw e;
+                } finally {
+                    this.spinner(false);
+                }
+            });
+        }
+        spinner(spin) {
+            this.querySelectorAll('ful-spinner').forEach(el => {
+                el[spin ? 'show' : 'hide']();
+            });
+            this.querySelectorAll('[type=submit],[type=reset]').forEach(el => {
+                el.disabled = spin;
+            });
+        }
+        setValues(values) {
+            for (let k in values) {
+                if (!values.hasOwnProperty(k)) {
+                    continue;
+                }
+                Array.from(this.querySelectorAll(`[name='${CSS.escape(k)}']`)).forEach((el) => {
+                    Form.mutate(this.mutators, el, values[k], k, values);
                 });
             }
         }
+        getValues() {
+            return Array.from(this.querySelectorAll(this.valueHoldersSelector))
+                .filter((el) => {
+                    if (el.dataset['fulBindInclude'] === 'never') {
+                        return false;
+                    }
+                    return el.dataset['fulBindInclude'] === 'always' || el.closest(this.ignoredChildrenSelector) === null;
+                })
+                .reduce((result, el) => {
+                    return Form.providePath(result, el.getAttribute('name'), Form.extract(this.extractors, el));
+                }, {});
+        }
+        setErrors(errors, scroll) {
+            this.clearErrors();
+            errors
+                .filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
+                .forEach((e) => {
+                    const name = e.context.replace("[", ".").replace("].", ".");
+                    this.querySelectorAll(`[name='${CSS.escape(name)}']`)
+                        .forEach(input => {
+                            input.classList.add('is-invalid');
+                            if (input.parentElement.classList.contains("form-floating")) {
+                                input.parentElement.classList.add('is-invalid');
+                            }
+                        });
+                    this.querySelectorAll(`ful-field-error[field='${CSS.escape(name)}']`)
+                        .forEach(el => el.innerText = e.reason);
+                });
+            this.querySelectorAll("ful-errors")
+                .forEach(el => {
+                    const globalErrors = errors.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
+                    el.innerHTML = globalErrors.map(e => e.reason).join("\n");
+                    if (globalErrors.length !== 0) {
+                        el.classList.remove('d-none');
+                    }
+                });
+
+            if (!scroll) {
+                return;
+            }
+            const ys = Array.from(this.querySelectorAll('ful-field-error:not(.d-none)'))
+                .map(el => el.getBoundingClientRect().y + window.scrollY);
+            const miny = Math.min(...ys);
+            if (miny !== Infinity) {
+                window.scroll(window.scrollX, miny > 100 ? miny - 100 : 0);
+            }
+        }
+        clearErrors() {
+            this.querySelectorAll('[name].is-invalid, .form-floating.is-invalid')
+                .forEach(el => el.classList.remove('is-invalid'));
+            this.querySelectorAll("ful-errors")
+                .forEach(el => {
+                    el.innerHTML = '';
+                    el.classList.add('d-none');
+                });
+        }
+        static extract(extractors, el) {
+            const maybeExtractor = extractors[el.dataset['fulBindExtractor']] || extractors[el.dataset['fulBindProvide']];
+            if (maybeExtractor) {
+                return maybeExtractor(el);
+            }
+            if (el.getAttribute('type') === 'radio') {
+                if (!el.checked) {
+                    return undefined;
+                }
+                return el.dataset['fulBindType'] === 'boolean' ? el.value === 'true' : el.value;
+            }
+            if (el.getAttribute('type') === 'checkbox') {
+                return el.checked;
+            }
+            if (el.dataset['fulBindType'] === 'boolean') {
+                return !el.value ? null : el.value === 'true';
+            }
+            if (el.getValue) {
+                return el.getValue();
+            }
+            return el.value || null;
+        }
+        static mutate(mutators, el, raw, key, values) {
+            const maybeMutator = mutators[el.dataset['fulBindMutator']] || mutators[el.dataset['fulBindProvide']];
+            if (maybeMutator) {
+                maybeMutator(el, raw, key, values);
+                return;
+            }
+            if (el.getAttribute('type') === 'radio') {
+                el.checked = el.getAttribute('value') === raw;
+                return;
+            }
+            if (el.getAttribute('type') === 'checkbox') {
+                el.checked = raw;
+                return;
+            }
+            if (el.setValue) {
+                el.setValue(raw);
+                return;
+            }
+            el.value = raw;
+        }
+
+        static providePath(result, path, value) {
+            const keys = path.split(".").map((k) => k.match(/^[0-9]+$/) ? +k : k);
+            let current = result;
+            let previous = null;
+            for (let i = 0; ; ++i) {
+                const ckey = keys[i];
+                const pkey = keys[i - 1];
+                if (Number.isInteger(ckey) && !Array.isArray(current)) {
+                    if (previous !== null) {
+                        previous[pkey] = current = [];
+                    } else {
+                        result = current = [];
+                    }
+                }
+                if (i === keys.length - 1) {
+                    //when value is undefined we only want to define the property if it's not defined 
+                    current[ckey] = value !== undefined ? value : (ckey in current ? current[ckey] : null);
+                    return result;
+                }
+                if (current[ckey] === undefined) {
+                    current[ckey] = {};
+                }
+                previous = current;
+                current = current[ckey];
+            }
+        }
+        static custom(tagName, configuration) {
+            customElements.define(tagName, class extends Form {
+                constructor() {
+                    super(configuration);
+                }
+            });
+        }
+        static configure(configuration) {
+            FieldError.configure();
+            Errors.configure();
+            Spinner.configure();
+            Input.configure();
+            Select.configure();
+            Form.custom('ful-form', configuration || {});
+        }
     }
 
     class Storage {
@@ -457,22 +766,22 @@ var ful = (function (exports) {
 
     class AuthorizationCodeFlow {
         static forKeycloak(clientId, realmBaseUrl, redirectUri){
-            const authUri = new URL("protocol/openid-connect/auth", realmBaseUrl);
-            const tokenUri = new URL("protocol/openid-connect/token", realmBaseUrl);
-            const logoutUri = new URL("protocol/openid-connect/logout", realmBaseUrl);
             const scope = "openid profile";
-            return new AuthorizationCodeFlow(clientId, scope, authUri, tokenUri, logoutUri, redirectUri);        
-        }
-        constructor(clientId, scope, authUri, tokenUri, logoutUri, redirectUri) {
+            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.authUri = authUri;
-            this.tokenUri = tokenUri;
-            this.logoutUri = logoutUri;
-            this.redirectUri = redirectUri;
-            this.storage = new SessionStorage(clientId);
+            this.uri = {auth, token, registration, logout, redirect};
         }
-        async _auth() {
+        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);
@@ -480,23 +789,34 @@ var ful = (function (exports) {
                 state: state,
                 verifier: pkceVerifier
             });
-            const url = new URL(this.authUri);
+            const url = new URL(uri);
             url.searchParams.set("client_id", this.clientId);
-            url.searchParams.set("redirect_uri", this.redirectUri);
+            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.redirectUri);
+            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.tokenUri, {
+            const response = await fetch(this.uri.token, {
                 method: "POST",
                 headers: {
                     "Content-Type": 'application/x-www-form-urlencoded'
@@ -507,7 +827,7 @@ var ful = (function (exports) {
                     ["grant_type", "authorization_code"],
                     ["code_verifier", stateAndVerifier.verifier],
                     ["state", stateAndVerifier.state],
-                    ["redirect_uri", this.redirectUri]
+                    ["redirect_uri", this.uri.redirect]
                 ])
             });
             if (!response.ok) {
@@ -515,7 +835,7 @@ var ful = (function (exports) {
                 throw new Error("Error:" + response.status + ": " + text);
             }
             const token = await response.json();
-            return new AuthorizationCodeFlowSession(this.clientId, token, this.tokenUri, this.logoutUri, this.redirectUri);
+            return new AuthorizationCodeFlowSession(this.clientId, token, this.uri);
         }
         async ensureLoggedIn() {
             const url = new URL(window.location.href);
@@ -526,7 +846,7 @@ var ful = (function (exports) {
                 return await this._tokenExchange(code, state);
             }
             //if not authorized
-            await this._auth();
+            await this.action(this.uri.auth, {});
             return null;
         }
     }
@@ -535,27 +855,26 @@ var ful = (function (exports) {
     class AuthorizationCodeFlowSession {
         static parseToken(token) {
             const [rawHeader, rawPayload, signature] = token.split(".");
+            const ut8decoder = new TextDecoder("utf-8");
             return {
-                header: JSON.parse(atob(rawHeader)),
-                payload: JSON.parse(atob(rawPayload)),
+                header: JSON.parse(ut8decoder.decode(Base64.decode(rawHeader, Base64.STANDARD))),
+                payload: JSON.parse(ut8decoder.decode(Base64.decode(rawPayload, Base64.STANDARD))),
                 signature: signature
             };
         }    
-        constructor(clientId, token, tokenUri, logoutUri, redirectUri) {
+        constructor(clientId, t, {token, logout, redirect}) {
             this.clientId = clientId;
-            this.token = token;
-            this.tokenUri = tokenUri;
-            this.logoutUri = logoutUri;
-            this.redirectUri = redirectUri;
-            this.accessToken = AuthorizationCodeFlowSession.parseToken(token.access_token);
-            this.refreshToken = AuthorizationCodeFlowSession.parseToken(token.refresh_token);
+            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;
         }
         onRefresh(callback) {
             this.refreshCallback = callback;
         }
         async refresh() {
-            const response = await fetch(this.tokenUri, {
+            const response = await fetch(this.uri.token, {
                 method: "POST",
                 headers: {
                     "Content-Type": 'application/x-www-form-urlencoded'
@@ -567,7 +886,7 @@ var ful = (function (exports) {
                 ])
             });
             if (!response.ok) {
-                throw new Error("Error:" + response.code + ": " + response.text());
+                throw new Error("Error:" + response.status + ": " + response.text());
             }
             const token = await response.json();
             this.token = token;
@@ -591,8 +910,8 @@ var ful = (function (exports) {
             await this.refresh();
         }
         logout() {
-            const url = new URL(this.logoutUri);
-            url.searchParams.set("post_logout_redirect_uri", this.redirectUri);
+            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;
         }
@@ -612,13 +931,12 @@ var ful = (function (exports) {
             this.gracePeriodBefore = gracePeriodBefore || 2000;
             this.gracePeriodAfter = gracePeriodAfter || 30000;
         }
-        async before(request) {
+        async intercept(request, chain) {
             await this.session.refreshIf(this.gracePeriodBefore);
             const headers = new Headers(request.options.headers);
             headers.set("Authorization", this.session.bearerToken());
-            return request;
-        }
-        async after(request, response) {
+            request.options.headers = headers;
+            const response = await chain.proceed(request);
             await this.session.refreshIf(this.gracePeriodAfter);
             return response;
         }
@@ -706,10 +1024,10 @@ var ful = (function (exports) {
         }
     };
 
-    class Wizard {
-        constructor(el) {
-            this.el = el;
-            this.progress = [...el.children].filter(e => e.matches("header,ol,ul"));
+    class Wizard extends HTMLElement {
+        constructor() {
+            super();
+            this.progress = [...this.children].filter(e => e.matches("header,ol,ul"));
 
             this.progress.forEach(p => {
                 const children = [...p.children];
@@ -718,8 +1036,8 @@ var ful = (function (exports) {
                     children[0].classList.add('active');
                 }
             });
-            if (this.el.querySelector('section.current') === null) {
-                const firstSection = this.el.querySelector('section:first-of-type');
+            if (this.querySelector('section.current') === null) {
+                const firstSection = this.querySelector('section:first-of-type');
                 if (firstSection !== null) {
                     firstSection.classList.add('current');
                 }
@@ -732,11 +1050,11 @@ var ful = (function (exports) {
                 current?.classList.remove('active');
                 current?.nextElementSibling?.classList.add('active');
             });
-            const currentSection = this.el.querySelector('section.current');
+            const currentSection = this.querySelector('section.current');
             currentSection.classList.remove("current");
             currentSection.nextElementSibling.classList.add('current');
 
-            this.el.dispatchEvent(new CustomEvent('wizard:activate', {
+            this.dispatchEvent(new CustomEvent('wizard:activate', {
                 bubbles: true,
                 cancelable: true
             }));
@@ -749,10 +1067,10 @@ var ful = (function (exports) {
                 current?.classList.remove('active');
                 current?.previousElementSibling?.classList.add('active');
             });
-            const currentSection = this.el.querySelector('section.current');
+            const currentSection = this.querySelector('section.current');
             currentSection.classList.remove("current");
             currentSection.previousElementSibling.classList.add('current');
-            this.el.dispatchEvent(new CustomEvent('wizard:activate', {
+            this.dispatchEvent(new CustomEvent('wizard:activate', {
                 bubbles: true,
                 cancelable: true
             }));
@@ -764,15 +1082,25 @@ var ful = (function (exports) {
                 current?.classList.remove('active');
                 p.children[+n]?.classList.add('active');
             });
-            const currentSection = this.el.querySelector('section.current');
+            const currentSection = this.querySelector('section.current');
             currentSection?.classList.remove("current");
-            const nthSection = this.el.querySelector(`section:nth-child(${+n})`);
+            const nthSection = this.querySelector(`section:nth-child(${+n})`);
             nthSection.classList.add('current');
-            this.el.dispatchEvent(new CustomEvent('wizard:activate', {
+            this.dispatchEvent(new CustomEvent('wizard:activate', {
                 bubbles: true,
                 cancelable: true
             }));
         }
+        static custom(tagName, configuration) {
+            customElements.define(tagName, class extends Wizard {
+                constructor() {
+                    super(configuration);
+                }
+            });
+        }
+        static configure() {
+            return Wizard.custom('ful-wizard');
+        }
     }
 
     class App {
@@ -806,13 +1134,19 @@ var ful = (function (exports) {
     exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
     exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;
     exports.Base64 = Base64;
-    exports.Bindings = Bindings;
+    exports.CustomElements = CustomElements;
+    exports.Errors = Errors;
     exports.Failure = Failure;
+    exports.FieldError = FieldError;
     exports.Form = Form;
     exports.Hex = Hex;
     exports.HttpClient = HttpClient;
+    exports.Input = Input;
     exports.LocalStorage = LocalStorage;
+    exports.Observable = Observable;
+    exports.Select = Select;
     exports.SessionStorage = SessionStorage;
+    exports.Spinner = Spinner;
     exports.VersionedStorage = VersionedStorage;
     exports.Wizard = Wizard;
     exports.timing = timing;