@optionfactory/ful 0.90.0 → 0.92.0

package/dist/ful.mjs

@@ -70,21 +70,51 @@ class Hex {
     }
 }
 
+/**
+ * @typedef {{ type: string; context: string?; reason: string; details: any?; }} Problem
+ */
 class Failure extends Error {
-    constructor(name, problems, cause) {
-        super(JSON.stringify(problems), { cause });
-        this.name = name;
+    /**
+     * 
+     * @param {string} message 
+     * @param {Problem[]} problems 
+     * @param {*} cause
+     */
+    constructor(message, problems, cause) {
+        super(message, { cause });
+        this.name = 'Failure';
         this.problems = problems;
     }
 }
 
+/**
+ * @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 {
-    constructor(status, problems, cause) {
-        super(`HttpClientError:${status}`, problems, cause);
+    /**
+     * @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(0, [{
+        return new HttpClientError(cause.message, 0, [{
             type,
             context: null,
             reason: cause.message,
@@ -98,47 +128,61 @@ class HttpClientError extends Failure {
      */
     static async fromResponse(response) {
         const text = await response.text();
-        const def = [{
+        const message = `${response.status} ${response.statusText}: ${text}`;
+        const fallback = [{
             type: "GENERIC_PROBLEM",
             context: null,
-            reason: `${response.status} ${response.statusText}: ${text}`,
+            reason: message,
             details: null
         }];
         try {
-            return new HttpClientError(response.status, text ? JSON.parse(text) : def);
+            return new HttpClientError(message, response.status, text ? JSON.parse(text) : fallback);
         } catch (e) {
-            return new HttpClientError(response.status, def);
+            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");
-    }
+        this.#k = document.querySelector("meta[name='_csrf_header']")?.getAttribute("content");
+        this.#v = document.querySelector("meta[name='_csrf']")?.getAttribute("content");
+    } 
     async intercept(request, chain) {
-        request.headers.set(this.#k, this.#v);
+        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;
     }
     async intercept(request, chain) {
         const response = await chain.proceed(request);
-        if (response.status !== 401) {
-            return response;
+        if (response.status === 401) {
+            window.location.href = this.#redirectUri;
         }
-        window.location.href = this.#redirectUri;
+        return response;
     }
 }
 
 class HttpClientBuilder {
+    /**
+     * @type {HttpInterceptor[]}
+     */
     #interceptors;
     constructor() {
         this.#interceptors = [];
@@ -151,6 +195,9 @@ class HttpClientBuilder {
         this.#interceptors.push(new RedirectOnUnauthorizedInterceptor(redirectUri));
         return this;
     }
+    /**
+     * @param {...HttpInterceptor} interceptors
+     */
     withInterceptors(...interceptors) {
         this.#interceptors.push(...interceptors);
         return this;
@@ -160,27 +207,35 @@ class HttpClientBuilder {
     }
 }
 
+/**
+ * @implements {HttpInterceptor}
+ */
 class HttpCall {
-    /**
-     * 
-     * @async
-     * @param {Request} request 
-     * @param {HttpInterceptorChain} chain 
-     * @returns {Promise<Response>} the response
-     */
     async intercept(request, chain) {
         return await fetch(request);
     }
 }
 
 class HttpInterceptorChain {
+    #interceptors;
+    #current;
+    /**
+     * 
+     * @param {HttpInterceptor[]} interceptors 
+     * @param {number} current 
+     */
     constructor(interceptors, current) {
-        this.interceptors = interceptors;
-        this.current = current;
+        this.#interceptors = interceptors;
+        this.#current = current;
     }
+    /**
+     * 
+     * @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));
+        const interceptor = this.#interceptors[this.#current];
+        return await interceptor.intercept(request, new HttpInterceptorChain(this.#interceptors, this.#current + 1));
     }
 }
 
@@ -188,14 +243,14 @@ class HttpClient {
     #interceptors;
     /**
      * Creates a builder for an HttpClient.
-     * @returns {HttpRequestBuilder} the client builder
+     * @returns {HttpClientBuilder} the client builder
      */
     static builder() {
         return new HttpClientBuilder();
     }
     /**
      * Creates an HttpClient.
-     * @returns {[HttpInterceptor]} interceptors - a list of interceptors to be registered for every request performed by the created client. 
+     * @param {HttpInterceptor[]|undefined} interceptors - a list of interceptors to be registered for every request performed by the created client. 
      */
     constructor(interceptors) {
         this.#interceptors = interceptors || [];
@@ -205,7 +260,7 @@ class HttpClient {
      * @async
      * @param {string} uri - the (possibly relative) request url
      * @param {RequestInit|undefined} options - fetch options
-     * @param {[any]|undefined} interceptors - the HttpInterceptors to be registered for this request.
+     * @param {HttpInterceptor[]|undefined} interceptors - the HttpInterceptors to be registered for this exchange.
      * @returns {Promise<Response>} the response
      */
     async exchange(uri, options, interceptors) {
@@ -272,12 +327,17 @@ class HttpClient {
     }
 }
 
-
+/**
+ * 
+ * @param {Response} response 
+ * @param {'text'|'json'|'blob'|'arrayBuffer'} type 
+ * @returns 
+ */
 const unmarshal = async (response, type) => {
     try {
         return await response[type]();
-    } catch (e) {
-        throw HttpClientError.of("UNMARSHALING_PROBLEM", e);
+    } catch (ex) {
+        throw HttpClientError.of("UNMARSHALING_PROBLEM", ex);
     }
 };
 
@@ -319,7 +379,7 @@ class HttpRequestBuilder {
      * @param {Headers} headers 
      * @param {any} body 
      * @param {Omit<RequestInit,"headers"|"method"|"body">} options 
-     * @param {[HttpInterceptor]} interceptors 
+     * @param {HttpInterceptor[]} interceptors 
      */
     constructor(client, method, uri, params, headers, body, options, interceptors) {
         this.#client = client;
@@ -333,7 +393,7 @@ class HttpRequestBuilder {
     }
     /**
      * Add all passed headers to the request, overriding existing ones if that key already exists.
-     * @param {headersInit} hs 
+     * @param {HeadersInit} hs 
      * @returns {HttpRequestBuilder} this builder
      */
     headers(hs) {
@@ -395,6 +455,18 @@ class HttpRequestBuilder {
         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;
+        return this;
+    }
     /**
      * Sets a fetch options for the request.
      * @param {Omit<RequestInit,"headers"|"method"|"body">} kvs
@@ -402,6 +474,7 @@ class HttpRequestBuilder {
      */
     options(kvs) {
         for (const [k, v] of Object.entries(kvs)) {
+            // @ts-ignore
             this.#options[k] = v;
         }
         return this;
@@ -468,11 +541,11 @@ class HttpRequestBuilder {
                 throw await HttpClientError.fromResponse(response);
             }
             return response;
-        } catch (e) {
-            if (e instanceof Failure) {
-                throw e;
+        } catch (ex) {
+            if (ex instanceof Failure) {
+                throw ex;
             }
-            throw HttpClientError.of("CONNECTION_PROBLEM", e);
+            throw HttpClientError.of("CONNECTION_PROBLEM", ex);
         }
     }
     /**
@@ -491,14 +564,6 @@ class HttpRequestBuilder {
         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<Uint8Array>} the response body, as an Uint8Array
-     */
-    async fetchBytes() {
-        const response = await this.fetch();
-        return await unmarshal(response, 'bytes');
-    }
     /**
      * 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
@@ -517,6 +582,68 @@ class HttpRequestBuilder {
     }
 }
 
+
+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 multiple Blobs to the FormData with the same name. 
+     * The default filename for Blob objects is "blob"; 
+     * The default filename for File objects is the file's filename.
+     * @param {string} name 
+     * @param {Blob[]} values
+     * @returns this builder
+     */    
+    blobs(name, values){
+        for(let v of values){
+            this.#formData.append(name, v);
+        }
+        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;
+    }
+}
+
 class Storage {
     constructor(prefix, storage) {
         this.prefix = prefix;
@@ -613,7 +740,7 @@ class AuthorizationCodeFlow {
         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);
@@ -623,7 +750,7 @@ class AuthorizationCodeFlow {
             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) {
@@ -656,7 +783,7 @@ class AuthorizationCodeFlow {
         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, {});
@@ -727,7 +854,7 @@ class AuthorizationCodeFlowSession {
         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() {
@@ -786,7 +913,7 @@ const timing = {
         };
 
         return function () {
-            args = arguments;
+            args = [...arguments];
             previousTimestamp = new Date().getTime();
             if (tid === null) {
                 tid = setTimeout(later, timeoutMs);
@@ -820,7 +947,7 @@ const timing = {
                 previousTimestamp = now;
             }
             const remaining = timeoutMs - (now - previousTimestamp);
-            args = arguments;
+            args = [...arguments];
             if (remaining <= 0 || remaining > timeoutMs) {
                 if (tid !== null) {
                     clearTimeout(tid);
@@ -926,16 +1053,18 @@ class Attributes {
             .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) {
@@ -962,19 +1091,21 @@ class LightSlots {
      * @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);
@@ -1000,7 +1131,8 @@ class TemplatesRegistry {
     #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;
@@ -1019,6 +1151,7 @@ class TemplatesRegistry {
         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);
         }
     }
@@ -1122,8 +1255,8 @@ const ParsedElement = (conf) => {
         #initialized;
         #reflecting;
         #internals;
-        constructor(...args) {
-            super(...args);
+        constructor() {
+            super();
             this.#internals = this.attachInternals();
         }
         get initialized() {
@@ -1151,6 +1284,7 @@ const ParsedElement = (conf) => {
                 observer.disconnect();
                 upgradeQueue.enqueue(this);
             });
+            // @ts-ignore
             observer.observe(this.parentNode, { childList: true, subtree: true });
         }
         attributeChangedCallback(attr, oldValue, newValue) {
@@ -1176,6 +1310,7 @@ const ParsedElement = (conf) => {
                 return;
             }
             this.#parsed = true;
+            // @ts-ignore
             await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
 
             for (const [attr, mapper] of attrsAndMappers) {
@@ -1278,6 +1413,7 @@ class Form extends ParsedElement() {
     static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
     static SCROLL_OFFSET = 50;
     static INVALID_CLASS = 'is-invalid';
+    submitter;
     render() {
         const form = document.createElement('form');
         form.replaceChildren(...this.childNodes);
@@ -1290,8 +1426,14 @@ class Form extends ParsedElement() {
         this.replaceChildren(form);
     }
     spinner(spin) {
-        this.querySelectorAll('ful-spinner').forEach(el => el.hidden = !spin);
-        this.querySelectorAll('[type=submit],[type=reset]').forEach(el => el.disabled = spin);
+        this.querySelectorAll('ful-spinner').forEach(el => {
+            const hel = /** @type HTMLElement} */ (el);
+            hel.hidden = !spin;
+        });
+        this.querySelectorAll('[type=submit],[type=reset]').forEach(el => {
+            const hel = /** @type HTMLButtonElement} */ (el);
+            hel.disabled = spin;
+        });
     }
     async remoting(fn) {
         try {
@@ -1326,8 +1468,8 @@ class Form extends ParsedElement() {
         }
     }
     get values() {
-        return Array.from(this.querySelectorAll('[name]'))
-            .filter((el) => {
+        return Array.from(/** @type {NodeListOf<HTMLElement>} */ (this.querySelectorAll('[name]')))
+            .filter(el => {
                 if (el.dataset['fulBindInclude'] === 'never') {
                     return false;
                 }
@@ -1338,22 +1480,26 @@ class Form extends ParsedElement() {
             }, {});
     }
     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));
             const fieldErrorsSelector = `ful-field-error[field='${CSS.escape(name)}']`;
-            this.querySelectorAll(fieldErrorsSelector).forEach(el => el.innerText = e.reason);
+            this.querySelectorAll(fieldErrorsSelector).forEach(el => {
+                const hel = /** @type HTMLElement} */ (el);
+                hel.innerText = e.reason;
+            });
         });
         this.querySelectorAll("ful-errors").forEach(el => {
-            el.innerText = globalErrors.map(e => e.reason).join("\n");
+            const hel = /** @type HTMLElement} */ (el);
+            hel.innerText = globalErrors.map(e => e.reason).join("\n");
             if (globalErrors.length !== 0) {
                 el.removeAttribute('hidden');
             }
@@ -1416,6 +1562,7 @@ class Input extends ParsedElement({
     slots: true,
     template: INPUT_TEMPLATE
 }){
+    input;
     render(template, slots) {
         const fragment = makeInputFragment(this, template, slots);
         this.replaceChildren(fragment);
@@ -1451,6 +1598,8 @@ class Select extends ParsedElement({
         </div>
     `
 }) {
+    shouldLoad;
+    _unwrappedRemoteLoad;
     constructor(tsConfig) {
         super();
         this.tsConfig = tsConfig;
@@ -1502,6 +1651,7 @@ class Select extends ParsedElement({
             }
             callback(data);
         };
+        // @ts-ignore
         this.ts = new TomSelect(input, Object.assign(remote ? {
             preload: 'focus',
             load: this._unwrappedRemoteLoad,
@@ -1586,27 +1736,40 @@ class RadioGroup extends ParsedElement({
             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;
+        }
     }
 }