@ixfx/ui 0.36.0

package/dist/__tests__/test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test.d.ts.map

package/dist/__tests__/test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../../__tests__/test.ts"],"names":[],"mappings":""}

package/dist/__tests__/test.js

@@ -0,0 +1 @@
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export * as Rx from './rx/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/index.js

@@ -0,0 +1 @@
+export * as Rx from './rx/index.js';

package/dist/src/rx/browser-resize.d.ts

@@ -0,0 +1,21 @@
+import type { Interval } from "@ixfx/core";
+/**
+ * Observe when element resizes. Specify `interval` to debounce, uses 100ms by default.
+ *
+ * ```
+ * const o = resizeObservable(myEl, 500);
+ * o.subscribe(() => {
+ *  // called 500ms after last resize
+ * });
+ * ```
+ * @param elem
+ * @param interval Tiemout before event gets triggered
+ * @returns
+ */
+export declare const browserResizeObservable: (elem: Readonly<Element>, interval?: Interval) => import("@ixfx/rx").Reactive<ResizeObserverEntry[]>;
+/**
+ * Returns an Reactive for window resize. Default 100ms debounce.
+ * @param elapsed
+ * @returns
+ */
+//# sourceMappingURL=browser-resize.d.ts.map

package/dist/src/rx/browser-resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-resize.d.ts","sourceRoot":"","sources":["../../../src/rx/browser-resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,QAAQ,CAAC,OAAO,CAAC,EACvB,WAAW,QAAQ,uDAqBpB,CAAA;AAED;;;;GAIG"}

package/dist/src/rx/browser-resize.js

@@ -0,0 +1,40 @@
+import { observable } from "@ixfx/rx/from";
+import { debounce } from "@ixfx/rx/op/debounce";
+/**
+ * Observe when element resizes. Specify `interval` to debounce, uses 100ms by default.
+ *
+ * ```
+ * const o = resizeObservable(myEl, 500);
+ * o.subscribe(() => {
+ *  // called 500ms after last resize
+ * });
+ * ```
+ * @param elem
+ * @param interval Tiemout before event gets triggered
+ * @returns
+ */
+export const browserResizeObservable = (elem, interval) => {
+    if (elem === null) {
+        throw new Error(`Param 'elem' is null. Expected element to observe`);
+    }
+    if (elem === undefined) {
+        throw new Error(`Param 'elem' is undefined. Expected element to observe`);
+    }
+    const m = observable(stream => {
+        const ro = new ResizeObserver((entries) => {
+            stream.set(entries);
+        });
+        ro.observe(elem);
+        return () => {
+            ro.unobserve(elem);
+        };
+    });
+    //return debounce({ elapsed: interval ?? 100 })(m);
+    return debounce({ elapsed: interval ?? 100 })(m);
+};
+/**
+ * Returns an Reactive for window resize. Default 100ms debounce.
+ * @param elapsed
+ * @returns
+ */
+// export const windowResize = (elapsed?: Interval) => Rx.Ops.debounce<{ innerWidth: number, innerHeight: number }>({ elapsed: elapsed ?? 100 })(Rx.From.event(window, `resize`, { innerWidth: 0, innerHeight: 0 }));

package/dist/src/rx/browser-theme-change.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Observe when a class changes on a target element, by default the document.
+ * Useful for tracking theme changes.
+ *
+ * ```js
+ * const c = cssClassChange();
+ * c.on(msg => {
+ *  // some class has changed on the document
+ * });
+ * ```
+ */
+export declare const cssClassChange: (target?: HTMLElement) => import("@ixfx/rx").Reactive<MutationRecord[]>;
+//# sourceMappingURL=browser-theme-change.d.ts.map

package/dist/src/rx/browser-theme-change.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-theme-change.d.ts","sourceRoot":"","sources":["../../../src/rx/browser-theme-change.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GAAI,oBAAiC,kDAgB/D,CAAA"}

package/dist/src/rx/browser-theme-change.js

@@ -0,0 +1,28 @@
+import { observable } from "@ixfx/rx/from/observable";
+/**
+ * Observe when a class changes on a target element, by default the document.
+ * Useful for tracking theme changes.
+ *
+ * ```js
+ * const c = cssClassChange();
+ * c.on(msg => {
+ *  // some class has changed on the document
+ * });
+ * ```
+ */
+export const cssClassChange = (target = document.documentElement) => {
+    const m = observable(stream => {
+        const ro = new MutationObserver((entries) => {
+            stream.set(entries);
+        });
+        const opts = {
+            attributeFilter: [`class`],
+            attributes: true,
+        };
+        ro.observe(target, opts);
+        return () => {
+            ro.disconnect();
+        };
+    });
+    return m;
+};

package/dist/src/rx/colour.d.ts

@@ -0,0 +1,8 @@
+import { type ReactiveInitial, type ReactiveNonInitial, type ReactiveWritable } from "@ixfx/rx";
+import type { HslRelative } from "@ixfx/visual/colour";
+export type ReactiveColour = ReactiveWritable<HslRelative> & {
+    setHsl: (hsl: HslRelative) => void;
+};
+export declare function colour(initialValue: HslRelative): ReactiveColour & ReactiveInitial<HslRelative>;
+export declare function colour(): ReactiveColour & ReactiveNonInitial<HslRelative>;
+//# sourceMappingURL=colour.d.ts.map

package/dist/src/rx/colour.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour.d.ts","sourceRoot":"","sources":["../../../src/rx/colour.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5G,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,gBAAgB,CAAC,WAAW,CAAC,GAAG;IAC3D,MAAM,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACpC,CAAA;AAED,wBAAgB,MAAM,CAAC,YAAY,EAAE,WAAW,GAAG,cAAc,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;AACjG,wBAAgB,MAAM,IAAI,cAAc,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC"}

package/dist/src/rx/colour.js

@@ -0,0 +1,20 @@
+import { initStream } from "@ixfx/rx";
+export function colour(initialValue) {
+    let value = initialValue;
+    const events = initStream();
+    const set = (v) => {
+        value = v;
+        events.set(v);
+    };
+    return {
+        dispose: events.dispose,
+        isDisposed: events.isDisposed,
+        last: () => value,
+        on: events.on,
+        onValue: events.onValue,
+        set,
+        setHsl: (hsl) => {
+            set(hsl);
+        }
+    };
+}

package/dist/src/rx/dom-source.d.ts

@@ -0,0 +1,96 @@
+import type { ReactiveInitial, ReactiveWritable, Reactive } from "@ixfx/rx";
+import type { DomFormOptions, DomNumberInputValueOptions, DomValueOptions } from "./dom-types.js";
+import { Colour } from "@ixfx/visual";
+/**
+ * Reactive getting/setting of values to a HTML INPUT element.
+ *
+ * Options:
+ * - relative: if _true_, values are 0..1 (default: false)
+ * - inverted: if _true_, values are 1..0 (default: false)
+ *
+ * If element is missing a 'type' attribute, this will be set to 'range'.
+ * @param targetOrQuery
+ * @param options
+ * @returns
+ */
+export declare function domNumberInputValue(targetOrQuery: HTMLInputElement | string, options?: Partial<DomNumberInputValueOptions>): ReactiveInitial<number> & ReactiveWritable<number>;
+export declare function domHslInputValue(targetOrQuery: HTMLInputElement | string, options?: Partial<DomValueOptions>): ReactiveInitial<Colour.HslRelative> & Reactive<Colour.HslRelative> & ReactiveWritable<Colour.HslRelative>;
+/**
+ * A stream of values when the a HTMLInputElement changes. Eg a <input type="range">
+ * ```js
+ * const r = Rx.From.domInputValue(`#myEl`);
+ * r.onValue(value => {
+ *  // value will be string
+ * });
+ * ```
+ *
+ * Options:
+ * * emitInitialValue: If _true_ emits the HTML value of element (default: false)
+ * * attributeName: If set, this is the HTML attribute value is set to when writing to stream (default: 'value')
+ * * fieldName: If set, this is the DOM object field set when writing to stream (default: 'value')
+ * * when: 'changed'|'changing' when values are emitted. (default: 'changed')
+ * * fallbackValue:  Fallback value to use if field/attribute cannot be read (default: '')
+ * @param targetOrQuery
+ * @param options
+ * @returns
+ */
+export declare function domInputValue(targetOrQuery: HTMLInputElement | string, options?: Partial<DomValueOptions>): {
+    el: HTMLInputElement;
+} & ReactiveInitial<string> & ReactiveWritable<string>;
+/**
+ * Listens for data changes from elements within a HTML form element.
+ * Input elements must have a 'name' attribute.
+ *
+ * Simple usage:
+ * ```js
+ * const rx = Rx.From.domForm(`#my-form`);
+ * rx.onValue(value => {
+ *  // Object containing values from form
+ * });
+ *
+ * rx.last(); // Read current values of form
+ * ```
+ *
+ * UI can be updated
+ * ```js
+ * // Set using an object of key-value pairs
+ * rx.set({
+ *  size: 'large'
+ * });
+ *
+ * // Or set a single name-value pair
+ * rx.setNamedValue(`size`, `large`);
+ * ```
+ *
+ * If an 'upstream' reactive is provided, this is used to set initial values of the UI, overriding
+ * whatever may be in the HTML. Upstream changes modify UI elements, but UI changes do not modify the upstream
+ * source.
+ *
+ * ```js
+ * // Create a reactive object
+ * const obj = Rx.From.object({
+ *  when: `2024-10-03`,
+ *  size: 12,
+ *  checked: true
+ * });
+ *
+ * // Use this as initial values for a HTML form
+ * // (assuming appropriate INPUT/SELECT elements exist)
+ * const rx = Rx.From.domForm(`form`, {
+ *  upstreamSource: obj
+ * });
+ *
+ * // Listen for changes in the UI
+ * rx.onValue(value => {
+ *
+ * });
+ * ```
+ * @param formElOrQuery
+ * @param options
+ * @returns
+ */
+export declare function domForm<T extends Record<string, any>>(formElOrQuery: HTMLFormElement | string, options?: Partial<DomFormOptions<T>>): {
+    setNamedValue: (name: string, value: any) => void;
+    el: HTMLFormElement;
+} & ReactiveInitial<T> & ReactiveWritable<T>;
+//# sourceMappingURL=dom-source.d.ts.map

package/dist/src/rx/dom-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-source.d.ts","sourceRoot":"","sources":["../../../src/rx/dom-source.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,0BAA0B,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIlG,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAItC;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,aAAa,EAAE,gBAAgB,GAAG,MAAM,EAAE,OAAO,GAAE,OAAO,CAAC,0BAA0B,CAAM,GAAG,eAAe,CAAC,MAAM,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAoCnL;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,gBAAgB,GAAG,MAAM,EAAE,OAAO,GAAE,OAAO,CAAC,eAAe,CAAM,GAAG,eAAe,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,WAAW,CAAC,CAoB5N;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,aAAa,EAAE,gBAAgB,GAAG,MAAM,EAAE,OAAO,GAAE,OAAO,CAAC,eAAe,CAAM,GAAG;IAAE,EAAE,EAAE,gBAAgB,CAAA;CAAE,GAAG,eAAe,CAAC,MAAM,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CA+E7L;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,aAAa,EAAE,eAAe,GAAG,MAAM,EAAE,OAAO,GAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAM,GAAG;IACzI,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAClD,EAAE,EAAE,eAAe,CAAA;CACpB,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAgK3C"}

package/dist/src/rx/dom-source.js

@@ -0,0 +1,373 @@
+import { resolveEl } from '@ixfx/dom';
+import { transform } from '@ixfx/rx';
+import { hasLast } from '@ixfx/rx';
+import { Colour } from "@ixfx/visual";
+import { eventTrigger } from "@ixfx/rx/from";
+//import type { Colourish } from '@ixfx/visual/colour';
+/**
+ * Reactive getting/setting of values to a HTML INPUT element.
+ *
+ * Options:
+ * - relative: if _true_, values are 0..1 (default: false)
+ * - inverted: if _true_, values are 1..0 (default: false)
+ *
+ * If element is missing a 'type' attribute, this will be set to 'range'.
+ * @param targetOrQuery
+ * @param options
+ * @returns
+ */
+export function domNumberInputValue(targetOrQuery, options = {}) {
+    const input = domInputValue(targetOrQuery, options);
+    const el = input.el;
+    const relative = options.relative ?? false;
+    const inverted = options.inverted ?? false;
+    const rx = transform(input, v => {
+        return Number.parseFloat(v);
+    });
+    if (relative) {
+        //el.setAttribute(`max`, inverted ? "0" : "1");
+        el.max = inverted ? "0" : "1";
+        //el.setAttribute(`min`, inverted ? "1" : "0");
+        el.min = inverted ? "1" : "0";
+        if (!el.hasAttribute(`step`)) {
+            //el.setAttribute(`step`, "0.1");
+            el.step = "0.1";
+        }
+    }
+    if (el.getAttribute(`type`) === null) {
+        el.type = `range`;
+    }
+    const set = (value) => {
+        input.set(value.toString());
+    };
+    return {
+        ...rx,
+        last() {
+            //console.log(`domNumberInputValue last: ${ input.last() }`);
+            return Number.parseFloat(input.last());
+        },
+        set
+    };
+}
+export function domHslInputValue(targetOrQuery, options = {}) {
+    const input = domInputValue(targetOrQuery, {
+        ...options,
+        upstreamFilter: (value) => {
+            return (typeof value === `object`) ? Colour.toHex(value) : value;
+        },
+    });
+    const rx = transform(input, v => {
+        return Colour.toHsl(v, true);
+    });
+    return {
+        ...rx,
+        last() {
+            return Colour.toHsl(input.last(), true);
+        },
+        set(value) {
+            input.set(Colour.toHex(value));
+        },
+    };
+}
+/**
+ * A stream of values when the a HTMLInputElement changes. Eg a <input type="range">
+ * ```js
+ * const r = Rx.From.domInputValue(`#myEl`);
+ * r.onValue(value => {
+ *  // value will be string
+ * });
+ * ```
+ *
+ * Options:
+ * * emitInitialValue: If _true_ emits the HTML value of element (default: false)
+ * * attributeName: If set, this is the HTML attribute value is set to when writing to stream (default: 'value')
+ * * fieldName: If set, this is the DOM object field set when writing to stream (default: 'value')
+ * * when: 'changed'|'changing' when values are emitted. (default: 'changed')
+ * * fallbackValue:  Fallback value to use if field/attribute cannot be read (default: '')
+ * @param targetOrQuery
+ * @param options
+ * @returns
+ */
+export function domInputValue(targetOrQuery, options = {}) {
+    const target = (typeof targetOrQuery === `string` ? document.querySelector(targetOrQuery) : targetOrQuery);
+    if (target === null && typeof targetOrQuery === `string`)
+        throw new Error(`Element query could not be resolved '${targetOrQuery}'`);
+    if (target === null)
+        throw new Error(`targetOrQuery is null`);
+    const el = resolveEl(targetOrQuery);
+    const when = options.when ?? `changed`;
+    const eventName = when === `changed` ? `change` : `input`;
+    const emitInitialValue = options.emitInitialValue ?? false;
+    const fallbackValue = options.fallbackValue ?? ``;
+    const upstreamSource = options.upstreamSource;
+    let upstreamSourceUnsub = () => { };
+    let attribName = options.attributeName;
+    let fieldName = options.fieldName;
+    if (fieldName === undefined && attribName === undefined) {
+        attribName = fieldName = `value`;
+    }
+    const readValue = () => {
+        let value;
+        if (attribName) {
+            value = el.getAttribute(attribName);
+            //console.log(`  attrib: ${ attribName } value: ${ value }`);
+        }
+        if (fieldName) {
+            value = el[fieldName];
+        }
+        if (value === undefined || value === null)
+            value = fallbackValue;
+        //console.log(`domInputValue readValue: ${ value }. attrib: ${ attribName } field: ${ fieldName }`);
+        return value;
+    };
+    const setValue = (value) => {
+        if (attribName) {
+            el.setAttribute(attribName, value);
+        }
+        if (fieldName) {
+            el[fieldName] = value;
+        }
+    };
+    const setUpstream = (v) => {
+        v = options.upstreamFilter ? options.upstreamFilter(v) : v;
+        setValue(v);
+    };
+    if (upstreamSource) {
+        upstreamSourceUnsub = upstreamSource.onValue(setUpstream);
+        if (hasLast(upstreamSource)) {
+            setUpstream(upstreamSource.last());
+        }
+    }
+    // Input element change event stream
+    const rxEvents = eventTrigger(el, eventName, {
+        fireInitial: emitInitialValue,
+        debugFiring: options.debugFiring ?? false,
+        debugLifecycle: options.debugLifecycle ?? false,
+    });
+    // Transform to get values
+    const rxValues = transform(rxEvents, _trigger => readValue());
+    return {
+        ...rxValues,
+        el,
+        last() {
+            return readValue();
+        },
+        set(value) {
+            setValue(value);
+        },
+        dispose(reason) {
+            upstreamSourceUnsub();
+            rxValues.dispose(reason);
+            rxEvents.dispose(reason);
+        },
+    };
+}
+/**
+ * Listens for data changes from elements within a HTML form element.
+ * Input elements must have a 'name' attribute.
+ *
+ * Simple usage:
+ * ```js
+ * const rx = Rx.From.domForm(`#my-form`);
+ * rx.onValue(value => {
+ *  // Object containing values from form
+ * });
+ *
+ * rx.last(); // Read current values of form
+ * ```
+ *
+ * UI can be updated
+ * ```js
+ * // Set using an object of key-value pairs
+ * rx.set({
+ *  size: 'large'
+ * });
+ *
+ * // Or set a single name-value pair
+ * rx.setNamedValue(`size`, `large`);
+ * ```
+ *
+ * If an 'upstream' reactive is provided, this is used to set initial values of the UI, overriding
+ * whatever may be in the HTML. Upstream changes modify UI elements, but UI changes do not modify the upstream
+ * source.
+ *
+ * ```js
+ * // Create a reactive object
+ * const obj = Rx.From.object({
+ *  when: `2024-10-03`,
+ *  size: 12,
+ *  checked: true
+ * });
+ *
+ * // Use this as initial values for a HTML form
+ * // (assuming appropriate INPUT/SELECT elements exist)
+ * const rx = Rx.From.domForm(`form`, {
+ *  upstreamSource: obj
+ * });
+ *
+ * // Listen for changes in the UI
+ * rx.onValue(value => {
+ *
+ * });
+ * ```
+ * @param formElOrQuery
+ * @param options
+ * @returns
+ */
+export function domForm(formElOrQuery, options = {}) {
+    const formEl = resolveEl(formElOrQuery);
+    const when = options.when ?? `changed`;
+    const eventName = when === `changed` ? `change` : `input`;
+    const emitInitialValue = options.emitInitialValue ?? false;
+    const upstreamSource = options.upstreamSource;
+    const typeHints = new Map();
+    let upstreamSourceUnsub = () => { };
+    const readValue = () => {
+        const fd = new FormData(formEl);
+        const entries = [];
+        for (const [k, v] of fd.entries()) {
+            const vString = v.toString();
+            // Get type hint for key
+            let typeHint = typeHints.get(k);
+            if (!typeHint) {
+                // If not found, use the kind of input element as a hint
+                const el = getFormElement(k, vString);
+                if (el) {
+                    if (el.type === `range` || el.type === `number`) {
+                        typeHint = `number`;
+                    }
+                    else if (el.type === `color`) {
+                        typeHint = `colour`;
+                    }
+                    else if (el.type === `checkbox` && (v === `true` || v === `on`)) {
+                        typeHint = `boolean`;
+                    }
+                    else {
+                        typeHint = `string`;
+                    }
+                    typeHints.set(k, typeHint);
+                }
+            }
+            if (typeHint === `number`) {
+                entries.push([k, Number.parseFloat(vString)]);
+            }
+            else if (typeHint === `boolean`) {
+                const vBool = (vString === `true`) ? true : false;
+                entries.push([k, vBool]);
+            }
+            else if (typeHint === `colour`) {
+                const vRgb = Colour.toString(vString);
+                entries.push([k, Colour.toRgb(vRgb)]);
+            }
+            else {
+                entries.push([k, v.toString()]);
+            }
+        }
+        // Checkboxes that aren't checked don't give a value, so find those
+        for (const el of formEl.querySelectorAll(`input[type="checkbox"]`)) {
+            if (!el.checked && el.value === `true`) {
+                entries.push([el.name, false]);
+            }
+        }
+        const asObject = Object.fromEntries(entries);
+        //console.log(`readValue`, asObj);
+        return asObject;
+    };
+    const getFormElement = (name, value) => {
+        const el = formEl.querySelector(`[name="${name}"]`);
+        if (!el) {
+            console.warn(`Form does not contain an element with name="${name}"`);
+            return;
+        }
+        if (el.type === `radio`) {
+            // Get right radio option
+            const radioEl = formEl.querySelector(`[name="${name}"][value="${value}"]`);
+            if (!radioEl) {
+                console.warn(`Form does not contain radio option for name=${name} value=${value}`);
+                return;
+            }
+            return radioEl;
+        }
+        return el;
+    };
+    const setNamedValue = (name, value) => {
+        const el = getFormElement(name, value);
+        if (!el)
+            return;
+        //let typeHint = typeHints.get(name);
+        // if (typeHint) {
+        //   console.log(`${ name } hint: ${ typeHint } input type: ${ el.type }`);
+        // } else {
+        //   console.warn(`Rx.Sources.Dom.domForm no type hint for: ${ name }`);
+        // }
+        if (el.nodeName === `INPUT` || el.nodeName === `SELECT`) {
+            if (el.type === `color`) {
+                if (typeof value === `object`) {
+                    // Try to parse colour if value is an object
+                    //const c = Colour.resolve(value, true);
+                    value = Colour.toHex(value);
+                }
+            }
+            else if (el.type === `checkbox`) {
+                if (typeof value === `boolean`) {
+                    el.checked = value;
+                    return;
+                }
+                else {
+                    console.warn(`Rx.Sources.domForm: Trying to set non boolean type to a checkbox. Name: ${name} Value: ${value} (${typeof value})`);
+                }
+            }
+            else if (el.type === `radio`) {
+                el.checked = true;
+                return;
+            }
+            el.value = value;
+        }
+    };
+    const setFromUpstream = (value) => {
+        //console.log(`setUpstream`, value);
+        for (const [name, v] of Object.entries(value)) {
+            let hint = typeHints.get(name);
+            if (!hint) {
+                hint = typeof v;
+                if (hint === `object`) {
+                    const rgb = Colour.parseRgbObject(v);
+                    if (rgb.success) {
+                        hint = `colour`;
+                    }
+                }
+                typeHints.set(name, hint);
+            }
+            const valueFiltered = options.upstreamFilter ? options.upstreamFilter(name, v) : v;
+            setNamedValue(name, valueFiltered);
+        }
+    };
+    if (upstreamSource) {
+        upstreamSourceUnsub = upstreamSource.onValue(setFromUpstream);
+        if (hasLast(upstreamSource)) {
+            setFromUpstream(upstreamSource.last());
+        }
+    }
+    // Input element change event stream
+    const rxEvents = eventTrigger(formEl, eventName, {
+        fireInitial: emitInitialValue,
+        debugFiring: options.debugFiring ?? false,
+        debugLifecycle: options.debugLifecycle ?? false,
+    });
+    // Transform to get values
+    const rxValues = transform(rxEvents, _trigger => readValue());
+    return {
+        ...rxValues,
+        el: formEl,
+        last() {
+            return readValue();
+        },
+        set: setFromUpstream,
+        setNamedValue,
+        dispose(reason) {
+            upstreamSourceUnsub();
+            rxValues.dispose(reason);
+            rxEvents.dispose(reason);
+        },
+    };
+}