@optionfactory/ful 0.19.0 → 0.21.0

package/dist/ful.mjs

@@ -1,102 +1,3 @@
-/* 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;
@@ -169,69 +70,44 @@ class Hex {
     }
 }
 
-/* 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() {
@@ -348,9 +224,10 @@ class HttpClient {
         this.interceptors = interceptors || [];
     }
     async fetch(resource, options) {
-        const interceptors = [...this.interceptors, ...options.interceptors || [], new HttpCall()];
+        const opts = options || {};
+        const interceptors = [...this.interceptors, ...opts.interceptors || [], new HttpCall()];
         const chain = new HttpInterceptorChain(interceptors, 0);
-        return await chain.proceed({resource, options});
+        return await chain.proceed({resource, opts});
     }
     async json(resource, options) {
         try {
@@ -373,30 +250,467 @@ class HttpClient {
                 }]);
         }
     }
-    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;
+}
+
+function jsonRequest(method, body, headers){
+    return {
+        headers: {
+            "Content-Type": "application/json",
+            ...headers
+        },
+        method: method,
+        body: JSON.stringify(body)        
+    }
+}
+
+/* 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 {
@@ -581,7 +895,7 @@ class AuthorizationCodeFlowSession {
             ])
         });
         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;
@@ -719,10 +1033,10 @@ const timing = {
     }
 };
 
-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];
@@ -731,8 +1045,8 @@ class Wizard {
                 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');
             }
@@ -745,11 +1059,11 @@ class Wizard {
             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
         }));
@@ -762,10 +1076,10 @@ class Wizard {
             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
         }));
@@ -777,15 +1091,25 @@ class Wizard {
             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 {
@@ -814,5 +1138,5 @@ class App {
     }
 }
 
-export { App, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Failure, Form, Hex, HttpClient, LocalStorage, SessionStorage, VersionedStorage, Wizard, timing };
+export { App, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, CustomElements, Errors, Failure, FieldError, Form, Hex, HttpClient, Input, LocalStorage, Observable, Select, SessionStorage, Spinner, VersionedStorage, Wizard, jsonRequest, timing };
 //# sourceMappingURL=ful.mjs.map