@optionfactory/ful 0.19.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,69 +73,44 @@ 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() {
@@ -376,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 {
@@ -584,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;
@@ -722,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];
@@ -734,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');
                 }
@@ -748,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
             }));
@@ -765,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
             }));
@@ -780,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 {
@@ -822,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;