@optionfactory/ful 0.80.0 → 0.91.0

package/dist/ful.iife.js

@@ -73,171 +73,563 @@ var ful = (function (exports) {
         }
     }
 
-    class ContextInterceptor {
-        constructor() {
-            const context = document.querySelector("meta[name='context']").getAttribute("content");
-            this.context = context.endsWith("/") ? context.substring(0, context.length - 1) : context;
+    /**
+     * @typedef {{ type: string; context: string?; reason: string; details: any?; }} Problem
+     */
+    class Failure extends Error {
+        /**
+         * 
+         * @param {string} message 
+         * @param {Problem[]} problems 
+         * @param {*} cause
+         */
+        constructor(message, problems, cause) {
+            super(message, { cause });
+            this.name = 'Failure';
+            this.problems = problems;
         }
-        async intercept(request, chain){
-            const separator = request.resource.startsWith("/") ? "" : "/";
-            request.resource = this.context + separator + request.resource;
-            return await chain.proceed(request);
+    }
+
+    /**
+     * @typedef {Int8Array| Uint8Array| Uint8ClampedArray| Int16Array| Uint16Array| Int32Array| Uint32Array| Float32Array| Float64Array| BigInt64Array| BigUint64Array} TypedArray
+     */
+    /**
+     * @typedef HttpInterceptor
+     * @property {function(Request,HttpInterceptorChain):Promise<Response>} intercept  
+     */
+
+    class HttpClientError extends Failure {
+        /**
+         * @param {string} message
+         * @param {number} status
+         * @param {{ type: string; context: string?; reason: string; details: any?; }[]} problems
+         * @param {Error|undefined} [cause]
+         */
+        constructor(message, status, problems, cause) {
+            super(message, problems, cause);
+            this.name = 'HttpClientError';
+            this.status = status;
+        }
+        /**
+         * 
+         * @param {string} type 
+         * @param {any} cause 
+         * @returns 
+         */
+        static of(type, cause) {
+            return new HttpClientError(cause.message, 0, [{
+                type,
+                context: null,
+                reason: cause.message,
+                details: null
+            }], cause);
+        }
+        /**
+         * Creates an HttpClientError from a Response.
+         * @param {Response} response 
+         * @returns an HttpClientError
+         */
+        static async fromResponse(response) {
+            const text = await response.text();
+            const message = `${response.status} ${response.statusText}: ${text}`;
+            const fallback = [{
+                type: "GENERIC_PROBLEM",
+                context: null,
+                reason: message,
+                details: null
+            }];
+            try {
+                return new HttpClientError(message, response.status, text ? JSON.parse(text) : fallback);
+            } catch (e) {
+                return new HttpClientError(message, response.status, fallback);
+            }
         }
     }
 
+    /**
+     * @implements {HttpInterceptor}
+     */
     class CsrfTokenInterceptor {
+        #k; #v;
         constructor() {
-            this.k = document.querySelector("meta[name='_csrf_header']").getAttribute("content");
-            this.v = document.querySelector("meta[name='_csrf']").getAttribute("content");
-        }
-        async intercept(request, chain){
-            const headers = new Headers(request.options.headers);
-            headers.set(this.k, this.v);
-            request.options.headers = headers;
+            this.#k = document.querySelector("meta[name='_csrf_header']")?.getAttribute("content");
+            this.#v = document.querySelector("meta[name='_csrf']")?.getAttribute("content");
+        } 
+        async intercept(request, chain) {
+            if(this.#k && this.#v) {
+                request.headers.set(this.#k, this.#v);
+            }
             return await chain.proceed(request);
         }
     }
-
+    /**
+     * @implements {HttpInterceptor}
+     */
     class RedirectOnUnauthorizedInterceptor {
+        #redirectUri;
+        /**
+         * @param {string} redirectUri
+         */
         constructor(redirectUri) {
-            this.redirectUri = redirectUri;
+            this.#redirectUri = redirectUri;
         }
-        async intercept(request, chain){
-            const response =  await chain.proceed(request);
-            if (response.status !== 401) {
-                return response;
-            }
-            window.location.href = this.redirectUri;
-        }
-    }
-
-    class Failure extends Error {
-        static parseProblems(status, text) {
-            const def = [{
-                    type: "GENERIC_PROBLEM",
-                    context: null,
-                    reason: `${status}: ${text}`,
-                    details: null
-                }];
-            try {
-                return text ? JSON.parse(text) : def;
-            } catch (e) {
-                return def;
+        async intercept(request, chain) {
+            const response = await chain.proceed(request);
+            if (response.status === 401) {
+                window.location.href = this.#redirectUri;
             }
-        }
-        static fromResponse(status, text) {
-            return new Failure(status, Failure.parseProblems(status, text));
-        }
-        constructor(status, problems) {
-            super(JSON.stringify(problems));
-            this.name = `Failure:${status}`;
-            this.status = status;
-            this.problems = problems;
+            return response;
         }
     }
 
     class HttpClientBuilder {
+        /**
+         * @type {HttpInterceptor[]}
+         */
+        #interceptors;
         constructor() {
-            this.interceptors = [];
-        }
-        withContext() {
-            this.interceptors.push(new ContextInterceptor());
-            return this;
+            this.#interceptors = [];
         }
         withCsrfToken() {
-            this.interceptors.push(new CsrfTokenInterceptor());
+            this.#interceptors.push(new CsrfTokenInterceptor());
             return this;
         }
         withRedirectOnUnauthorized(redirectUri) {
-            this.interceptors.push(new RedirectOnUnauthorizedInterceptor(redirectUri));
+            this.#interceptors.push(new RedirectOnUnauthorizedInterceptor(redirectUri));
             return this;
         }
+        /**
+         * @param {...HttpInterceptor} interceptors
+         */
         withInterceptors(...interceptors) {
-            this.interceptors.push(...interceptors);
+            this.#interceptors.push(...interceptors);
             return this;
         }
         build() {
-            const interceptors = this.interceptors;
-            return new HttpClient({interceptors});
+            return new HttpClient(this.#interceptors);
         }
     }
 
+    /**
+     * @implements {HttpInterceptor}
+     */
     class HttpCall {
-        async intercept(request, chain){
-            return await fetch(request.resource, request.options);
-        }    
+        async intercept(request, chain) {
+            return await fetch(request);
+        }
     }
 
     class HttpInterceptorChain {
-        constructor(interceptors, current){
-            this.interceptors = interceptors;
-            this.current = current;
+        #interceptors;
+        #current;
+        /**
+         * 
+         * @param {HttpInterceptor[]} interceptors 
+         * @param {number} current 
+         */
+        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));
+        /**
+         * 
+         * @param {Request} request 
+         * @returns {Promise<Response>} the response
+         */
+        async proceed(request) {
+            const interceptor = this.#interceptors[this.#current];
+            return await interceptor.intercept(request, new HttpInterceptorChain(this.#interceptors, this.#current + 1));
         }
     }
 
-
     class HttpClient {
+        #interceptors;
+        /**
+         * Creates a builder for an HttpClient.
+         * @returns {HttpClientBuilder} the client builder
+         */
         static builder() {
             return new HttpClientBuilder();
         }
-        constructor({interceptors}){
-            this.interceptors = interceptors || [];
+        /**
+         * Creates an HttpClient.
+         * @param {HttpInterceptor[]|undefined} interceptors - a list of interceptors to be registered for every request performed by the created client. 
+         */
+        constructor(interceptors) {
+            this.#interceptors = interceptors || [];
         }
-        async exchange(resource, options) {
-            const opts = options || {};
-            const interceptors = [...this.interceptors, ...opts.interceptors || [], new HttpCall()];
-            const chain = new HttpInterceptorChain(interceptors, 0);
-            return await chain.proceed({resource, options: opts});
+        /**
+         * Performs an HTTP exchange.
+         * @async
+         * @param {string} uri - the (possibly relative) request url
+         * @param {RequestInit|undefined} options - fetch options
+         * @param {HttpInterceptor[]|undefined} interceptors - the HttpInterceptors to be registered for this exchange.
+         * @returns {Promise<Response>} the response
+         */
+        async exchange(uri, options, interceptors) {
+            const is = [...this.#interceptors, ...interceptors || [], new HttpCall()];
+            const chain = new HttpInterceptorChain(is, 0);
+            return await chain.proceed(new Request(uri, options));
         }
-        async fetch(resource, options) {
-            const response = await this.exchange(resource, options);
-            if (!response.ok) {
-                const message = await response.text();
-                throw Failure.fromResponse(response.status, message);
-            }        
-            return response;
+        /**
+         * Creates a request builder.
+         * @param {string} method - the HTTP method to be used
+         * @param {string} uri - the (possibly relative) request url
+         * @returns {HttpRequestBuilder} the request builder
+         */
+        request(method, uri) {
+            return HttpRequestBuilder.create(this, method, uri);
+        }
+        /**
+         * Creates a request builder.
+         * @param {string} uri - the (possibly relative) request url 
+         * @returns {HttpRequestBuilder} the request builder
+         */
+        get(uri) {
+            return HttpRequestBuilder.create(this, 'GET', uri);
+        }
+        /**
+         * Creates a request builder.
+         * @param {string} uri - the (possibly relative) request url
+         * @returns {HttpRequestBuilder} the request builder
+         */
+        head(uri) {
+            return HttpRequestBuilder.create(this, 'HEAD', uri);
+        }
+        /**
+         * Creates a request builder.
+         * @param {string} uri - the (possibly relative) request url
+         * @returns {HttpRequestBuilder} the request builder
+         */
+        post(uri) {
+            return HttpRequestBuilder.create(this, 'POST', uri);
+        }
+        /**
+         * Creates a request builder.
+         * @param {string} uri - the (possibly relative) request url
+         * @returns {HttpRequestBuilder} the request builder
+         */
+        put(uri) {
+            return HttpRequestBuilder.create(this, 'PUT', uri);
+        }
+        /**
+         * Creates a request builder.
+         * @param {string} uri - the (possibly relative) request url
+         * @returns {HttpRequestBuilder} the request builder
+         */
+        patch(uri) {
+            return HttpRequestBuilder.create(this, 'PATCH', uri);
+        }
+        /**
+         * Creates a request builder.
+         * @param {string} uri - the (possibly relative) request url
+         * @returns {HttpRequestBuilder} the request builder
+         */
+        delete(uri) {
+            return HttpRequestBuilder.create(this, 'DELETE', uri);
+        }
+    }
+
+    /**
+     * 
+     * @param {Response} response 
+     * @param {'text'|'json'|'blob'|'arrayBuffer'} type 
+     * @returns 
+     */
+    const unmarshal = async (response, type) => {
+        try {
+            return await response[type]();
+        } catch (ex) {
+            throw HttpClientError.of("UNMARSHALING_PROBLEM", ex);
+        }
+    };
+
+
+    class HttpRequestBuilder {
+        #client;
+        #method;
+        #uri;
+        #params;
+        #headers;
+        #body;
+        #options;
+        #interceptors;
+        /**
+         * Creates an HttpRequestBuilder.
+         * @param {HttpClient} client 
+         * @param {string} method - the HTTP method to be used
+         * @param {string} uri - the (possibly relative) request url
+         * @returns {HttpRequestBuilder} the builder
+         */
+        static create(client, method, uri) {
+            return new HttpRequestBuilder(
+                client,
+                method,
+                uri,
+                new URLSearchParams(),
+                new Headers(),
+                undefined,
+                {},
+                []
+            );
+        }
+        /**
+         * Creates an HttpRequestBuilder.
+         * @param {HttpClient} client 
+         * @param {string} method - the HTTP method to be used
+         * @param {string} uri - the (possibly relative) request url
+         * @param {URLSearchParams} params 
+         * @param {Headers} headers 
+         * @param {any} body 
+         * @param {Omit<RequestInit,"headers"|"method"|"body">} options 
+         * @param {HttpInterceptor[]} interceptors 
+         */
+        constructor(client, method, uri, params, headers, body, options, interceptors) {
+            this.#client = client;
+            this.#method = method;
+            this.#uri = uri;
+            this.#params = params;
+            this.#body = body;
+            this.#headers = headers;
+            this.#options = options;
+            this.#interceptors = interceptors;
+        }
+        /**
+         * Add all passed headers to the request, overriding existing ones if that key already exists.
+         * @param {HeadersInit} hs 
+         * @returns {HttpRequestBuilder} this builder
+         */
+        headers(hs) {
+            for (const [k, v] of new Headers(hs).entries()) {
+                this.#headers.set(k, v);
+            }
+            return this;
+        }
+        /**
+         * Adds an header to the request, overriding it if it already exists.
+         * @param {string} k 
+         * @param {string} v 
+         * @returns {HttpRequestBuilder} this builder
+         */
+        header(k, v) {
+            this.#headers.set(k, v);
+            return this;
+        }
+        /**
+         * Add all query parameters to the request, overriding existing ones if that key already exists.
+         * @param {URLSearchParams|Record<string,string>|string[][]|string} ps 
+         * @returns {HttpRequestBuilder} this builder
+         */
+        params(ps) {
+            for (const [k, v] of new URLSearchParams(ps).entries()) {
+                this.#params.set(k, v);
+            }
+            return this;
+        }
+        /**
+         * Adds a query parameter to the request, overriding it if it already exists.
+         * @param {string} k 
+         * @param {string} v 
+         * @returns {HttpRequestBuilder} this builder
+         */
+        param(k, v) {
+            this.#params.set(k, v);
+            return this;
         }
-        async json(resource, options) {
+        /**
+         * Sets the request body. 
+         * `Content-Type: multipart/form-data` header is automatically added by fetch when data is a FormData instance if not explicitly set.
+         * `Content-Type: application/x-www-form-urlencoded` header is automatically added by fetch when data is an URLSearchParams instance if not explicitly set.
+         * `Content-Type: text/plain` header is automatically added by fetch when data is a string instance if not explicitly set.
+         * @param {string|ArrayBuffer|Blob|DataView|File|FormData|TypedArray|URLSearchParams|ReadableStream} data 
+         * @returns {HttpRequestBuilder} this builder
+         */
+        body(data) {
+            this.#body = data;
+            return this;
+        }
+        /**
+         * Sets the request body that will be serialized as json. Calling this method adds the `Content-Type application/json` header for the request.
+         * @param {any} body - the body to be serialized as json
+         * @returns {HttpRequestBuilder} this builder
+         */
+        json(body) {
+            this.#headers.set("Content-Type", "application/json");
+            this.#body = JSON.stringify(body);
+            return this;
+        }
+        /**
+         * Sets the request body as a FormData configured using the callback.
+         * `Content-Type: multipart/form-data` header is automatically added by fetch if not explicitly set.
+         * @param {function(HttpMultipartRequestCustomizer):void} callback
+         */
+        multipart(callback) {
+            const formData = new FormData();
+            const builder = new HttpMultipartRequestCustomizer(formData);
+            callback(builder);
+            this.#body = formData;
+        }
+        /**
+         * Sets a fetch options for the request.
+         * @param {Omit<RequestInit,"headers"|"method"|"body">} kvs
+         * @returns {HttpRequestBuilder} this builder
+         */
+        options(kvs) {
+            for (const [k, v] of Object.entries(kvs)) {
+                // @ts-ignore
+                this.#options[k] = v;
+            }
+            return this;
+        }
+        /**
+         * Sets a fetch option for the request.
+         * @param {keyof Omit<RequestInit,"headers"|"method"|"body">} k 
+         * @param {*} v 
+         * @returns {HttpRequestBuilder} this builder
+         */
+        option(k, v) {
+            this.#options[k] = v;
+            return this;
+        }
+        /**
+         * Adds interceptors to the request.
+         * @param {[HttpInterceptor]} is - the interceptor to be regisered
+         * @returns {HttpRequestBuilder} this builder
+         */
+        interceptors(is) {
+            for (const i of is) {
+                this.#interceptors.push(i);
+            }
+            return this;
+        }
+        /**
+         * Adds an interceptor to the request.
+         * @param {HttpInterceptor} i - the interceptor to be regisered
+         * @returns {HttpRequestBuilder} this builder
+         */
+        interceptor(i) {
+            this.#interceptors.push(i);
+            return this;
+        }
+        /**
+         * Performs an HTTP exchange using the configured client, request and interceptors.
+         * @returns {Promise<Response>} the response
+         */
+        async exchange() {
+            const uri = this.#params.size ? `${this.#uri}?${this.#params}` : this.#uri;
+            const opts = {
+                ...this.#options,
+                headers: this.#headers,
+                method: this.#method,
+                body: this.#body,
+            };
+            return await this.#client.exchange(uri, opts, this.#interceptors);
+        }
+        /**
+         * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+         * @returns {Promise<Response>} the response
+         */
+        async fetch() {
+            const uri = this.#params.size ? `${this.#uri}?${this.#params}` : this.#uri;
+            const opts = {
+                ...this.#options,
+                headers: this.#headers,
+                method: this.#method,
+                body: this.#body,
+            };
             try {
-                const response = await this.fetch(resource, options);
-                const text = await response.text();
-                return text ? JSON.parse(text) : undefined;
-            } catch (e) {
-                if (e instanceof Failure) {
-                    throw e;
+                const response = await this.#client.exchange(uri, opts, this.#interceptors);
+                if (!response.ok) {
+                    throw await HttpClientError.fromResponse(response);
+                }
+                return response;
+            } catch (ex) {
+                if (ex instanceof Failure) {
+                    throw ex;
                 }
-                throw new Failure(0, [{
-                        type: "CONNECTION_PROBLEM",
-                        context: null,
-                        reason: e.message,
-                        details: null
-                    }]);
+                throw HttpClientError.of("CONNECTION_PROBLEM", ex);
             }
         }
+        /**
+         * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+         * @returns {Promise<string>} the response body, as text
+         */
+        async fetchText() {
+            const response = await this.fetch();
+            return await unmarshal(response, 'text');
+        }
+        /**
+         * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+         * @returns {Promise<any>} the response body, deserialized as JSON
+         */
+        async fetchJson() {
+            const response = await this.fetch();
+            return await unmarshal(response, 'json');
+        }
+        /**
+         * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+         * @returns {Promise<Blob>} the response body, as a Blob
+         */
+        async fetchBlob() {
+            const response = await this.fetch();
+            return await unmarshal(response, 'blob');
+        }
+        /**
+         * Performs an HTTP exchange using the configured client request, and interceptos throwing a failure when response status is not in the 200-299 range.
+         * @returns {Promise<ArrayBuffer>} the response body, as an ArrayBuffer
+         */
+        async fetchArrayBuffer() {
+            const response = await this.fetch();
+            return await unmarshal(response, 'arrayBuffer');
+        }
     }
 
-    function jsonRequest(method, body, headers){
-        return {
-            headers: {
-                "Content-Type": "application/json",
-                ...headers
-            },
-            method: method,
-            body: JSON.stringify(body)        
+
+    class HttpMultipartRequestCustomizer {
+        #formData;
+        /**
+         * 
+         * @param {FormData} formData 
+         */
+        constructor(formData){
+            this.#formData = formData;
+        }
+        /**
+         * Appends a value to the FormData.
+         * @param {string} name 
+         * @param {*} value 
+         * @returns this builder
+         */
+        field(name, value){
+            this.#formData.append(name, value);
+            return this;
+        }
+        /**
+         * Appends a Blob to the FormData. 
+         * If `filename` is omitted, FormData defaults are applied:
+         * The default filename for Blob objects is "blob"; 
+         * The default filename for File objects is the file's filename.
+         * @param {string} name 
+         * @param {Blob} value 
+         * @param {string|undefined} filename 
+         * @returns this builder
+         */
+        blob(name, value, filename){
+            this.#formData.append(name, value, filename);
+            return this;
+        }
+        /**
+         * Appends a JSON serialized blob to the FormData.
+         * @param {string} name 
+         * @param {any} value 
+         * @param {string|undefined} filename 
+         * @returns this builder
+         */
+        json(name, value, filename){
+            const blob = new Blob([JSON.stringify(value)], {type: 'application/json'});
+            this.#formData.append(name, blob, filename);
+            return this;
         }
-    }
-    function jsonPost(body, headers){
-        return jsonRequest('POST', body, headers);
-    }
-    function jsonPut(body, headers){
-        return jsonRequest('PUT', body, headers);
-    }
-    function jsonPatch(body, headers){
-        return jsonRequest('PATCH', body, headers);
     }
 
     class Storage {
@@ -336,7 +728,7 @@ var ful = (function (exports) {
             Object.entries(additionalParams || {}).forEach(kv => {
                 url.searchParams.set(kv[0], kv[1]);
             });
-            window.location = url;
+            window.location.href = url.toString();
         }
         async registration(additionalParams){
             await this.action(this.uri.registration, additionalParams);
@@ -346,7 +738,7 @@ var ful = (function (exports) {
                 kc_action: kcAction
             });
         }
-        async _tokenExchange(code, state) {
+        async #tokenExchange(code, state) {
             window.history.replaceState('', "", this.uri.redirect);
             const stateAndVerifier = this.storage.pop(AuthorizationCodeFlow.PKCE_AND_STATE_KEY);
             if (stateAndVerifier.state !== state) {
@@ -379,7 +771,7 @@ var ful = (function (exports) {
             if (code && this.storage.load(AuthorizationCodeFlow.PKCE_AND_STATE_KEY)) {
                 //if callback from keycloak and we have our state still stored
                 const state = url.searchParams.get("state");
-                return await this._tokenExchange(code, state);
+                return await this.#tokenExchange(code, state);
             }
             //if not authorized
             await this.action(this.uri.auth, {});
@@ -391,10 +783,10 @@ var ful = (function (exports) {
     class AuthorizationCodeFlowSession {
         static parseToken(token) {
             const [rawHeader, rawPayload, signature] = token.split(".");
-            const ut8decoder = new TextDecoder("utf-8");
+            const utf8decoder = new TextDecoder("utf-8");
             return {
-                header: JSON.parse(ut8decoder.decode(Base64.decode(rawHeader, Base64.STANDARD))),
-                payload: JSON.parse(ut8decoder.decode(Base64.decode(rawPayload, Base64.STANDARD))),
+                header: JSON.parse(utf8decoder.decode(Base64.decode(rawHeader, Base64.STANDARD))),
+                payload: JSON.parse(utf8decoder.decode(Base64.decode(rawPayload, Base64.STANDARD))),
                 signature: signature
             };
         }    
@@ -422,7 +814,8 @@ var ful = (function (exports) {
                 ])
             });
             if (!response.ok) {
-                throw new Error("Error:" + response.status + ": " + response.text());
+                const text = await response.text();
+                throw new Error("Error:" + response.status + ": " + text);
             }
             const token = await response.json();
             this.token = token;
@@ -449,7 +842,7 @@ var ful = (function (exports) {
             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;
+            window.location.href = url.toString();
         }
 
         bearerToken() {
@@ -462,18 +855,19 @@ var ful = (function (exports) {
     }
 
     class AuthorizationCodeFlowInterceptor {
+        #session;
+        #gracePeriodBefore;
+        #gracePeriodAfter;
         constructor(session, gracePeriodBefore, gracePeriodAfter) {
-            this.session = session;
-            this.gracePeriodBefore = gracePeriodBefore || 2000;
-            this.gracePeriodAfter = gracePeriodAfter || 30000;
+            this.#session = session;
+            this.#gracePeriodBefore = gracePeriodBefore || 2000;
+            this.#gracePeriodAfter = gracePeriodAfter || 30000;
         }
         async intercept(request, chain) {
-            await this.session.refreshIf(this.gracePeriodBefore);
-            const headers = new Headers(request.options.headers);
-            headers.set("Authorization", this.session.bearerToken());
-            request.options.headers = headers;
+            await this.#session.refreshIf(this.#gracePeriodBefore);
+            request.headers.set("Authorization", this.#session.bearerToken());
             const response = await chain.proceed(request);
-            await this.session.refreshIf(this.gracePeriodAfter);
+            await this.#session.refreshIf(this.#gracePeriodAfter);
             return response;
         }
     }
@@ -507,7 +901,7 @@ var ful = (function (exports) {
             };
 
             return function () {
-                args = arguments;
+                args = [...arguments];
                 previousTimestamp = new Date().getTime();
                 if (tid === null) {
                     tid = setTimeout(later, timeoutMs);
@@ -541,7 +935,7 @@ var ful = (function (exports) {
                     previousTimestamp = now;
                 }
                 const remaining = timeoutMs - (now - previousTimestamp);
-                args = arguments;
+                args = [...arguments];
                 if (remaining <= 0 || remaining > timeoutMs) {
                     if (tid !== null) {
                         clearTimeout(tid);
@@ -647,16 +1041,18 @@ var ful = (function (exports) {
                 .forEach(a => {
                     const target = a.substring(prefix.length);
                     if (target === 'class') {
-                        to.classList.add(...from.getAttribute(prefix + "class").split(" ").filter(a => a.length));
+                        const classes = from.getAttribute(prefix + "class")?.split(" ").filter(a => a.length) ?? [];
+                        to.classList.add(...classes);
                         return;
                     }
+                    // @ts-ignore
                     to.setAttribute(target, from.getAttribute(a));
                 });
         }
         /**
          * 
          * @param {HTMLElement} el 
-         * @param {stirng} attr 
+         * @param {string} attr 
          * @param {boolean} value 
          */
         static toggle(el, attr, value) {
@@ -683,19 +1079,21 @@ var ful = (function (exports) {
          * @returns the slots
          */
         static from(el) {
+            /** @type [string, Element][] */
             const namedSlots = Array.from(el.childNodes)
-                .filter(el => el.matches && el.matches('[slot]'))
+                .filter(el => el instanceof Element)
+                .filter(el => el.matches('[slot]'))
                 .map(el => {
                     el.remove();
                     const slot = el.getAttribute("slot");
                     el.removeAttribute("slot");
-                    return [slot, el];
+                    return [slot ?? 'unnamed', el];
                 });
             const slots = {};
             slots.default = new DocumentFragment();
             slots.default.append(...el.childNodes);
-            for(const [name,el] of namedSlots){
-                if(!(name in slots)){
+            for (const [name, el] of namedSlots) {
+                if (!(name in slots)) {
                     slots[name] = new DocumentFragment();
                 }
                 slots[name].append(el);
@@ -721,7 +1119,8 @@ var ful = (function (exports) {
         #ec;
         put(k, fragment) {
             if (this.#ec) {
-                this.#idToTemplate[k] = Template.fromFragment(fragment, ec);
+                // @ts-ignore
+                this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, this.#ec);
                 return;
             }
             this.#idToFragment[k] = fragment;
@@ -740,6 +1139,7 @@ var ful = (function (exports) {
             this.#ec = ec;
             for (const [k, fragment] of Object.entries(this.#idToFragment)) {
                 delete this.#idToFragment[k];
+                // @ts-ignore
                 this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec, ...data);
             }
         }
@@ -843,8 +1243,8 @@ var ful = (function (exports) {
             #initialized;
             #reflecting;
             #internals;
-            constructor(...args) {
-                super(...args);
+            constructor() {
+                super();
                 this.#internals = this.attachInternals();
             }
             get initialized() {
@@ -872,6 +1272,7 @@ var ful = (function (exports) {
                     observer.disconnect();
                     upgradeQueue.enqueue(this);
                 });
+                // @ts-ignore
                 observer.observe(this.parentNode, { childList: true, subtree: true });
             }
             attributeChangedCallback(attr, oldValue, newValue) {
@@ -897,6 +1298,7 @@ var ful = (function (exports) {
                     return;
                 }
                 this.#parsed = true;
+                // @ts-ignore
                 await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
 
                 for (const [attr, mapper] of attrsAndMappers) {
@@ -925,8 +1327,6 @@ var ful = (function (exports) {
         return k;
     };
 
-    /* global Infinity, CSS */
-
     function flatten(obj, prefix) {
         return Object.keys(obj).reduce((acc, k) => {
             const pre = prefix.length ? prefix + '.' : '';
@@ -1050,7 +1450,7 @@ var ful = (function (exports) {
         }
         get values() {
             return Array.from(this.querySelectorAll('[name]'))
-                .filter((el) => {
+                .filter(el => {
                     if (el.dataset['fulBindInclude'] === 'never') {
                         return false;
                     }
@@ -1061,14 +1461,14 @@ var ful = (function (exports) {
                 }, {});
         }
         set errors(es) {
-            const fieldErrors = es.filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT');
-            const globalErrors = es.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
+            const fieldErrors = es.filter(e => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT');
+            const globalErrors = es.filter(e => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
             this.querySelectorAll(`.${Form.INVALID_CLASS}`).forEach(el => el.classList.remove(Form.INVALID_CLASS));
             this.querySelectorAll("ful-errors").forEach(el => {
                 el.replaceChildren();
                 el.setAttribute('hidden', '');
             });
-            fieldErrors.forEach((e) => {
+            fieldErrors.forEach(e => {
                 const name = e.context.replace("[", ".").replace("].", ".");
                 const validationTargetsSelector = `[name='${CSS.escape(name)}'] [ful-validation-target],[name='${CSS.escape(name)}']:not(:has([ful-validation-target]))`;
                 this.querySelectorAll(validationTargetsSelector).forEach(input => input.classList.add(Form.INVALID_CLASS));
@@ -1084,7 +1484,7 @@ var ful = (function (exports) {
             if (!this.hasAttribute('scroll-on-error')) {
                 return;
             }
-            const ys = Array.from(this.querySelectorAll(`[ful-validated-field]:has(.${Form.INVALID_CLASS}) ful-field-error`))
+            const ys = Array.from(this.querySelectorAll(`ful-errors:not([hidden]), [ful-validated-field]:has(.${Form.INVALID_CLASS}) ful-field-error`))
                 .map(el => el.parentElement ? el.parentElement : el)
                 .map(el => el.getBoundingClientRect().y + window.scrollY);
             const miny = Math.min(...ys);
@@ -1139,6 +1539,7 @@ var ful = (function (exports) {
         slots: true,
         template: INPUT_TEMPLATE
     }){
+        input;
         render(template, slots) {
             const fragment = makeInputFragment(this, template, slots);
             this.replaceChildren(fragment);
@@ -1309,27 +1710,40 @@ var ful = (function (exports) {
                 input.addEventListener('change', evt => {
                     evt.stopPropagation();
                     //change is not cancelable
-                    this.dispatchEvent(new CustomEvent('change', { 
-                        bubbles: true, 
-                        cancelable: false, 
+                    this.dispatchEvent(new CustomEvent('change', {
+                        bubbles: true,
+                        cancelable: false,
                         detail: {
                             value: this.value
                         }
-                    }));        
-                });           
+                    }));
+                });
                 const label = Fragments.fromChildNodes(el);
                 return [input, label];
             });
 
             radioEls.forEach(el => el.remove());
-            template.renderTo(this, {name, slots, inputsAndLabels});
+            template.renderTo(this, { name, slots, inputsAndLabels });
         }
         get value() {
+            /** @type {HTMLInputElement|null} */
             const checked = this.querySelector('input[type=radio]:checked');
             return checked ? checked.value : null;
         }
         set value(value) {
-            this.querySelector(`input[type=radio][value=${CSS.escape(value)}]`).checked = true;
+            if (value === null) {
+                /** @type {HTMLInputElement[]} */
+                this.querySelectorAll(`input[type=radio]`).forEach(el => {
+                    // @ts-ignore
+                    el.checked = false;
+                });
+                return;
+            }
+            /** @type {HTMLInputElement|null} */
+            const el = this.querySelector(`input[type=radio][value=${CSS.escape(value)}]`);
+            if (el) {
+                el.checked = true;
+            }
         }
     }
 
@@ -1359,6 +1773,7 @@ var ful = (function (exports) {
     exports.Fragments = Fragments;
     exports.Hex = Hex;
     exports.HttpClient = HttpClient;
+    exports.HttpClientError = HttpClientError;
     exports.INPUT_TEMPLATE = INPUT_TEMPLATE;
     exports.Input = Input;
     exports.LightSlots = LightSlots;
@@ -1372,15 +1787,9 @@ var ful = (function (exports) {
     exports.TemplatesRegistry = TemplatesRegistry;
     exports.VersionedStorage = VersionedStorage;
     exports.elements = elements;
-    exports.jsonPatch = jsonPatch;
-    exports.jsonPost = jsonPost;
-    exports.jsonPut = jsonPut;
-    exports.jsonRequest = jsonRequest;
     exports.makeInputFragment = makeInputFragment;
     exports.timing = timing;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
-
     return exports;
 
 })({});