@nascentdigital/funnel-ui 4.4.18

package/dist/client/forms/fields/BooleanField.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BooleanField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const interactive_1 = require("../interactive");
+const FieldErrorController_1 = require("./FieldErrorController");
+const FieldLayout_1 = require("./FieldLayout");
+const useField_1 = require("./useField");
+// component
+exports.BooleanField = (0, react_1.forwardRef)(function BooleanField({ id: externalId, className, field, disabled = false, autoFocus = false, name }, ref) {
+    // bind toolbar
+    const { value: data, schema } = field;
+    const internalId = (0, react_1.useId)();
+    const id = externalId !== null && externalId !== void 0 ? externalId : internalId;
+    const value = funnel_core_1.Schema.BooleanField.Value.fromData(data);
+    const { defaultValue } = schema;
+    const checked = value !== null && value !== void 0 ? value : defaultValue;
+    const errorLevel = (0, react_1.useContext)(FieldErrorController_1.FieldErrorContext);
+    const errors = field.getErrors(errorLevel);
+    const hasErrors = errors.length > 0;
+    // sync field
+    (0, useField_1.useField)(field);
+    // bind ref
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        focus: () => {
+            const element = document.getElementById(id);
+            element === null || element === void 0 ? void 0 : element.focus();
+        }
+    }), [id]);
+    // autofocus
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            const element = funnel_core_1.Browser.getElement(`#${CSS.escape(id)}`);
+            element === null || element === void 0 ? void 0 : element.focus();
+        }
+    }, [id, autoFocus]);
+    // render based on semantic
+    let component;
+    switch (schema.semantics) {
+        case 'check':
+            component = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interactive_1.CheckboxField, { id: id, name: field.name, checked: checked, onChange: checked => field.value = funnel_core_1.Schema.BooleanField.Value.toData(checked), onFocus: () => field.editing = true, onBlur: () => field.editing = false, disabled: disabled, error: hasErrors }), (0, jsx_runtime_1.jsx)("label", { className: "nd-Field-label", htmlFor: id, children: name !== null && name !== void 0 ? name : field.name })] }));
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, minimal: true, children: component }));
+});

package/dist/client/forms/fields/EnumField.d.ts

@@ -0,0 +1,20 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import { HTMLAttributes } from 'react';
+import type { Field as UIField } from './Field';
+export declare const EnumField: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSelectElement>, "defaultValue" | "onFocus" | "onBlur" | "onChange" | "required"> & UIField.Content & {
+    id?: string;
+    className?: string;
+    field: Field<Schema.EnumField>;
+    disabled?: boolean;
+} & import("react").RefAttributes<EnumField.Ref>>;
+export declare namespace EnumField {
+    type Props = Omit<HTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'required'> & UIField.Content & {
+        id?: string;
+        className?: string;
+        field: Field<Schema.EnumField>;
+        disabled?: boolean;
+    };
+    interface Ref {
+        focus(): void;
+    }
+}

package/dist/client/forms/fields/EnumField.js

@@ -0,0 +1,65 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnumField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const interactive_1 = require("../interactive");
+const FieldErrorController_1 = require("./FieldErrorController");
+const FieldLayout_1 = require("./FieldLayout");
+const useField_1 = require("./useField");
+// component
+exports.EnumField = (0, react_1.forwardRef)(function EnumField(_a, ref) {
+    var _b;
+    var { id: externalId, className, field, autoFocus = false, disabled = false } = _a, props = __rest(_a, ["id", "className", "field", "autoFocus", "disabled"]);
+    // bind
+    const { schema } = field;
+    const internalId = (0, react_1.useId)();
+    const id = externalId !== null && externalId !== void 0 ? externalId : internalId;
+    const errorLevel = (0, react_1.useContext)(FieldErrorController_1.FieldErrorContext);
+    const errors = field.getErrors(errorLevel);
+    const hasErrors = errors.length > 0;
+    const value = (_b = funnel_core_1.Schema.EnumField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : '';
+    // sync field
+    (0, useField_1.useField)(field);
+    // bind ref
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        focus: () => {
+            const element = document.getElementById(id);
+            element === null || element === void 0 ? void 0 : element.focus();
+        }
+    }), [id]);
+    // autofocus
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            const element = funnel_core_1.Browser.getElement(`#${CSS.escape(id)}`);
+            element === null || element === void 0 ? void 0 : element.focus();
+        }
+    }, [id, autoFocus]);
+    // render based on semantics
+    let component;
+    switch (schema.semantics) {
+        case 'dropdown':
+            component = ((0, jsx_runtime_1.jsx)(interactive_1.SelectField, { id: id, hint: schema.hint, options: schema.options, value: value, onChange: value => field.value = funnel_core_1.Schema.EnumField.Value.toData(value), onFocus: () => field.editing = true, onBlur: () => field.editing = false, disabled: disabled, error: hasErrors }));
+            break;
+        case 'radio':
+            component = ((0, jsx_runtime_1.jsx)(interactive_1.RadioGroupField, { id: id, options: schema.options, value: value, onChange: value => field.value = funnel_core_1.Schema.EnumField.Value.toData(value), disabled: disabled, error: hasErrors }));
+            break;
+        default:
+            component = ((0, jsx_runtime_1.jsx)("div", { children: "Segmented enums are not Supported!" }));
+            break;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, minimal: true, children: component }));
+});

package/dist/client/forms/fields/Field.d.ts

@@ -0,0 +1,15 @@
+import { FieldModel } from '@nascentdigital/funnel-core';
+export declare function Field({ field: keyOrField, className, autoFocus, disabled, ...content }: Field.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Field {
+    type Content = {
+        name?: string;
+        description?: string;
+        hint?: string;
+    };
+    type Props = Content & {
+        className?: string;
+        field: string | FieldModel;
+        autoFocus?: boolean;
+        disabled?: boolean;
+    };
+}

package/dist/client/forms/fields/Field.js

@@ -0,0 +1,39 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = Field;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const BooleanField_1 = require("./BooleanField");
+const EnumField_1 = require("./EnumField");
+const TextField_1 = require("./TextField");
+const useField_1 = require("./useField");
+// component
+function Field(_a) {
+    var { field: keyOrField, className, autoFocus, disabled } = _a, content = __rest(_a, ["field", "className", "autoFocus", "disabled"]);
+    // bind
+    const field = (0, useField_1.useField)(keyOrField);
+    const { schema } = field;
+    if (field instanceof funnel_core_1.Field) {
+        switch (schema.type) {
+            case 'text':
+                return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, Object.assign({ className: className, field: field, autoFocus: autoFocus, disabled: disabled }, content)));
+            case 'boolean':
+                return ((0, jsx_runtime_1.jsx)(BooleanField_1.BooleanField, Object.assign({ className: className, field: field, autoFocus: autoFocus, disabled: disabled }, content)));
+            case 'enum':
+                return ((0, jsx_runtime_1.jsx)(EnumField_1.EnumField, Object.assign({ className: className, field: field, autoFocus: autoFocus, disabled: disabled }, content)));
+        }
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { children: ["field for ", field.name, " no supported"] }));
+}

package/dist/client/forms/fields/FieldErrorController.d.ts

@@ -0,0 +1,12 @@
+import { FieldValidator } from '@nascentdigital/funnel-core';
+import { PropsWithChildren } from 'react';
+export declare function FieldErrorController({ errorLevel, children }: FieldErrorController.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldErrorController {
+    type Props = PropsWithChildren & {
+        errorLevel?: FieldValidator.Error.Level;
+    };
+}
+export declare const FieldErrorContext: import("react").Context<FieldValidator.Error.Level>;
+export declare namespace FieldErrorContext {
+    type Data = FieldValidator.Error.Level;
+}

package/dist/client/forms/fields/FieldErrorController.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldErrorContext = void 0;
+exports.FieldErrorController = FieldErrorController;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// component
+function FieldErrorController({ errorLevel = 'all', children }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(exports.FieldErrorContext.Provider, { value: errorLevel, children: children }));
+}
+// context
+exports.FieldErrorContext = (0, react_1.createContext)('all');

package/dist/client/forms/fields/FieldLayout.d.ts

@@ -0,0 +1,16 @@
+import { Field } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function FieldLayout({ field, className, label: rawLabel, description: rawDescription, minimal, children }: FieldLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldLayout {
+    type Props = {
+        field: Field;
+        className?: string;
+        label?: string;
+        description?: string;
+        minimal?: boolean;
+        secured?: boolean;
+        disabled?: boolean;
+        locked?: boolean;
+        children: ReactNode;
+    };
+}

package/dist/client/forms/fields/FieldLayout.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldLayout = FieldLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const Markup_1 = require("../../../server/atomic/Markup");
+const FieldErrorController_1 = require("./FieldErrorController");
+const useField_1 = require("./useField");
+// component
+function FieldLayout({ field, className, label: rawLabel, description: rawDescription, minimal, children }) {
+    var _a, _b;
+    // bind props + hook
+    const { schema, name: schemaName = 'Unknown' } = field !== null && field !== void 0 ? field : {};
+    const { description: schemaDescription } = schema !== null && schema !== void 0 ? schema : {};
+    const label = rawLabel !== null && rawLabel !== void 0 ? rawLabel : schemaName;
+    const description = rawDescription !== null && rawDescription !== void 0 ? rawDescription : schemaDescription;
+    const errorLevel = (0, react_1.useContext)(FieldErrorController_1.FieldErrorContext);
+    // TODO: use error level to just show one error
+    const errors = (_b = (_a = field === null || field === void 0 ? void 0 : field.getErrors(errorLevel)) === null || _a === void 0 ? void 0 : _a.slice(0, 1)) !== null && _b !== void 0 ? _b : [];
+    const hasErrors = errors.length > 0;
+    // sync with field
+    (0, useField_1.useField)(field);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'nd-Field-layout', { 'nd-Field-hasErrors': hasErrors }), "data-field-id": field.id, children: [!minimal &&
+                (0, jsx_runtime_1.jsxs)("div", { className: "nd-Field-info", children: [(0, jsx_runtime_1.jsx)("label", { className: "nd-Field-label", "aria-label": label, children: label }), description &&
+                            (0, jsx_runtime_1.jsx)(Markup_1.Markup, { className: "nd-Field-description", markdown: description })] }), children, !minimal && hasErrors &&
+                (0, jsx_runtime_1.jsx)("ul", { className: "nd-Field-errors", "aria-live": "polite", children: errors.map((error, index) => (0, jsx_runtime_1.jsx)("li", { className: "nd-Field-error", children: error.message }, `error_${index}`)) })] }));
+}

package/dist/client/forms/fields/TextField.d.ts

@@ -0,0 +1,25 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import { HTMLAttributes, ReactNode } from 'react';
+import type { Field as UIField } from './Field';
+export declare const TextField: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "defaultValue" | "onFocus" | "onBlur" | "onChange"> & UIField.Content & {
+    field: Field<Schema.TextField>;
+    disabled?: boolean;
+    secured?: boolean;
+    minimal?: boolean;
+    small?: boolean;
+    controls?: ReactNode;
+} & import("react").RefAttributes<TextField.Ref>>;
+export declare namespace TextField {
+    type Props = Omit<HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'> & UIField.Content & {
+        field: Field<Schema.TextField>;
+        disabled?: boolean;
+        secured?: boolean;
+        minimal?: boolean;
+        small?: boolean;
+        controls?: ReactNode;
+    };
+    interface Ref {
+        focus(): void;
+        coerce(value: string): void;
+    }
+}

package/dist/client/forms/fields/TextField.js

@@ -0,0 +1,178 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const atomic_1 = require("../../atomic");
+const FieldErrorController_1 = require("./FieldErrorController");
+const FieldLayout_1 = require("./FieldLayout");
+const useField_1 = require("./useField");
+// component
+exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
+    var _b, _c, _d;
+    var { id: externalId, className, field, autoFocus = false, onKeyDown = funnel_core_1.Fn.NoOp, disabled = false, secured = false, minimal = false, small = false, controls, name, description, hint } = _a, props = __rest(_a, ["id", "className", "field", "autoFocus", "onKeyDown", "disabled", "secured", "minimal", "small", "controls", "name", "description", "hint"]);
+    // bind props + state + hooks
+    const { schema } = field;
+    const sandboxed = field.sandboxed;
+    const locked = secured && !sandboxed;
+    const internalId = (0, react_1.useId)();
+    const id = externalId !== null && externalId !== void 0 ? externalId : internalId;
+    const mask = (0, react_1.useMemo)(() => getMask(schema), [schema]);
+    const autoComplete = (0, react_1.useMemo)(() => getAutoComplete(schema), [schema]);
+    const maskRef = (0, react_1.useRef)(null);
+    const errorLevel = (0, react_1.useContext)(FieldErrorController_1.FieldErrorContext);
+    const errors = field.getErrors(errorLevel);
+    const hasErrors = errors.length > 0;
+    const inputClassNames = (0, react_1.useMemo)(() => (0, classnames_1.default)('nd-Field nd-TextField', {
+        'nd-Field-error': hasErrors,
+        'nd-Field-disabled': disabled || locked
+    }), [disabled, locked, hasErrors]);
+    // bind field
+    (0, useField_1.useField)(field);
+    // bind ref
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        focus: () => {
+            const element = document.getElementById(id);
+            element === null || element === void 0 ? void 0 : element.focus();
+        },
+        coerce: (value) => {
+            var _a;
+            if (mask) {
+                (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value);
+            }
+            else {
+                field.value = funnel_core_1.Schema.TextField.Value.toData(value);
+            }
+        }
+    }), [id, mask, field]);
+    // sync field with mask
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        // update field immediately
+        (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.setValue((_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : '');
+        // update whenever field gets reset
+        const subscription = field.events$
+            .pipe((0, rxjs_1.filter)(e => e.type === 'reset'))
+            .subscribe(() => { var _a, _b; return (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.setValue((_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : ''); });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [field]);
+    // autofocus
+    (0, react_1.useEffect)(() => {
+        if (autoFocus || sandboxed) {
+            const element = funnel_core_1.Browser.getElement(`#${CSS.escape(id)}`);
+            element === null || element === void 0 ? void 0 : element.focus();
+        }
+    }, [id, autoFocus, sandboxed]);
+    // helpers
+    const onSandbox = () => {
+        // sandbox field (triggers autofocus - see above)
+        field.sandbox();
+    };
+    const onCommit = () => {
+        // commit field
+        field.commit();
+    };
+    const onRollback = () => {
+        var _a, _b;
+        // rollback field
+        field.rollback();
+        // re-sync mask with field value
+        (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.setValue((_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : '');
+    };
+    // mask
+    let component;
+    if (mask) {
+        component = ((0, jsx_runtime_1.jsx)(atomic_1.MaskedInput, Object.assign({ ref: maskRef, id: id, className: inputClassNames, name: field.id, placeholder: hint !== null && hint !== void 0 ? hint : schema.hint, autoComplete: autoComplete, mask: mask, initialValue: (_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : '', onValueChanged: value => field.value = funnel_core_1.Schema.TextField.Value.toData(value), onFocus: () => field.editing = true, onBlur: () => field.editing = false, onKeyDown: onKeyDown, disabled: disabled || locked, "aria-label": field.name }, props)));
+    }
+    // textarea if long text
+    else if (schema.semantics === 'long') {
+        component = ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ id: id, className: inputClassNames, name: field.id, placeholder: hint !== null && hint !== void 0 ? hint : schema.hint, autoComplete: autoComplete, value: (_c = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _c !== void 0 ? _c : '', onChange: e => field.value = funnel_core_1.Schema.TextField.Value.toData(e.target.value), onFocus: () => field.editing = true, onBlur: () => field.editing = false, onKeyDown: onKeyDown, disabled: disabled || locked, "aria-label": field.name }, props)));
+    }
+    // otherwise regular input
+    else {
+        component = ((0, jsx_runtime_1.jsx)("input", Object.assign({ id: id, className: inputClassNames, type: getInputType(schema), pattern: getPattern(schema), name: field.id, placeholder: hint !== null && hint !== void 0 ? hint : schema.hint, autoComplete: autoComplete, value: (_d = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _d !== void 0 ? _d : '', onChange: e => field.value = funnel_core_1.Schema.TextField.Value.toData(e.target.value), onFocus: () => field.editing = true, onBlur: () => field.editing = false, onKeyDown: onKeyDown, disabled: disabled || locked, "aria-label": field.name }, props)));
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, label: name, description: description, disabled: disabled, secured: secured, minimal: minimal, children: component }));
+});
+// helpers
+function getMask(schema) {
+    // determine regex/mask based on semantics
+    let mask;
+    switch (schema.semantics) {
+        case 'slug':
+            mask = {
+                mask: /^(?!.*--)[a-z\d]+(-?|([a-z\d]+))*$/
+            };
+            break;
+        case 'email':
+            mask = {
+                mask: /^(?!.*\.\.)(?!.*@@)[a-z\d]+(\.|[a-z\d]+)*(@([a-z\d]+(\.|[a-z\d])*)?)?$/,
+                prepare: (text) => text === null || text === void 0 ? void 0 : text.toLowerCase()
+            };
+            break;
+        case 'phone':
+            mask = {
+                mask: '(000) 000-0000'
+            };
+            break;
+        case 'phone-intl':
+            mask = {
+                mask: [
+                    { mask: '(000) 000-0000' },
+                    { mask: '+00 0 0000 0000' },
+                    { mask: '+00 00 0000 0000' },
+                    { mask: '+000 000 0000000' }
+                ]
+            };
+            break;
+    }
+    // return mask
+    return mask;
+}
+function getInputType(schema) {
+    switch (schema.semantics) {
+        case 'integer':
+            return 'number';
+        case 'email':
+            return 'email';
+        case 'password':
+            return 'password';
+        default:
+            return 'text';
+    }
+}
+function getAutoComplete(schema) {
+    switch (schema.semantics) {
+        case 'email':
+        case 'password':
+        default:
+            return 'off';
+    }
+}
+function getPattern(schema) {
+    switch (schema.semantics) {
+        case 'integer':
+            return '[0-9]*';
+        default:
+            return undefined;
+    }
+}

package/dist/client/forms/fields/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Field';
+export * from './FieldErrorController';

package/dist/client/forms/fields/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Field"), exports);
+__exportStar(require("./FieldErrorController"), exports);

package/dist/client/forms/fields/useField.d.ts

@@ -0,0 +1,2 @@
+import { FieldModel } from '@nascentdigital/funnel-core';
+export declare function useField(keyOrField: string | FieldModel): FieldModel;

package/dist/client/forms/fields/useField.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useField = useField;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const FormContext_1 = require("../FormContext");
+// hook
+function useField(keyOrField) {
+    // bind context
+    const touch = (0, hooks_1.useTouch)();
+    const { form } = (0, react_1.useContext)(FormContext_1.FormContext);
+    // coerce into field model
+    const field = funnel_core_1.FieldModel.filter(keyOrField)
+        ? keyOrField
+        : form.getField(keyOrField);
+    // listen to field changes
+    (0, react_1.useEffect)(() => {
+        // subscribe to changes
+        const subscription = field.events$.subscribe(touch);
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [field, touch]);
+    // return field
+    return field;
+}

package/dist/client/forms/index.d.ts

@@ -0,0 +1,4 @@
+export * from './fields';
+export * from './interactive';
+export * from './Form';
+export * from './useTempFields';

package/dist/client/forms/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./fields"), exports);
+__exportStar(require("./interactive"), exports);
+__exportStar(require("./Form"), exports);
+__exportStar(require("./useTempFields"), exports);

package/dist/client/forms/interactive/CheckboxField.d.ts

@@ -0,0 +1,14 @@
+import { Callback } from '@nascentdigital/funnel-core';
+export declare function CheckboxField({ id, name, checked, onChange, disabled, error, onFocus, onBlur, }: CheckboxField.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CheckboxField {
+    type Props = {
+        id: string;
+        name?: string;
+        checked: boolean;
+        onChange?: Callback<boolean>;
+        disabled?: boolean;
+        error?: boolean;
+        onFocus?: Callback.Void;
+        onBlur?: Callback.Void;
+    };
+}

package/dist/client/forms/interactive/CheckboxField.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxField = CheckboxField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function CheckboxField({ id, name, checked, onChange, disabled, error, onFocus, onBlur, }) {
+    // render
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)('nd-Field nd-BooleanField nd-CheckboxField', {
+            'nd-Field-checked': checked,
+            'nd-Field-error': error,
+            'nd-Field-disabled': disabled
+        }, 'shrink-0 relative inline-block interpolate-fast size-[20px]'), children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: "checkbox", className: (0, classnames_1.default)('nd-BooleanField-input', {
+                    'nd-BooleanField-input-checked': checked
+                }, 'absolute inset-0 opacity-0 appearance-none outline-none cursor-pointer disabled:cursor-default'), checked: checked, onChange: e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-label": name }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('nd-BooleanField-icon', { 'opacity-none': !checked }, 'absolute inset-0 inline-flex justify-center items-center', 'pointer-events-none interpolate-fast'), children: (0, jsx_runtime_1.jsx)("svg", { className: "size-[20px]", viewBox: "0 0 18 18", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 10.5L8 12.75L13.25 6", stroke: "inherit", strokeWidth: "inherit" }) }) })] }));
+}

package/dist/client/forms/interactive/RadioField.d.ts

@@ -0,0 +1,12 @@
+import { Callback } from '@nascentdigital/funnel-core';
+export declare function RadioField({ id, groupId, checked, error, disabled, onChange }: RadioField.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioField {
+    type Props = {
+        id: string;
+        groupId: string;
+        checked: boolean;
+        error?: boolean;
+        disabled?: boolean;
+        onChange?: Callback<boolean>;
+    };
+}

package/dist/client/forms/interactive/RadioField.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioField = RadioField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function RadioField({ id, groupId, checked, error, disabled, onChange }) {
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)('nd-Field nd-EnumField nd-RadioField', {
+            'nd-Field-checked': checked,
+            'nd-Field-error': error,
+            'nd-Field-disabled': disabled,
+        }, 'shrink-0 relative inline-block interpolate-fast size-[20px]'), children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: groupId, value: id, disabled: disabled, checked: checked, onChange: e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), className: (0, classnames_1.default)('nd-RadioField-input', 'absolute inset-0 opacity-0 appearance-none outline-none cursor-pointer disabled:cursor-default') }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('nd-RadioField-icon', { 'opacity-none': !checked }, 'absolute inset-0 inline-flex justify-center items-center', 'pointer-events-none interpolate-fast'), children: (0, jsx_runtime_1.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: (0, jsx_runtime_1.jsx)("circle", { cx: "5", cy: "5", r: "5", fill: "#C4006A" }) }) })] }));
+}

package/dist/client/forms/interactive/RadioGroupField.d.ts

@@ -0,0 +1,12 @@
+import { Callback, Schema } from '@nascentdigital/funnel-core';
+export declare function RadioGroupField({ id, value, onChange, options, disabled, error }: RadioGroupField.Props): import("react/jsx-runtime").JSX.Element[];
+export declare namespace RadioGroupField {
+    type Props = {
+        id: string;
+        value: string;
+        onChange?: Callback<string>;
+        options: Schema.EnumField.Options;
+        disabled?: boolean;
+        error?: boolean;
+    };
+}