@nascentdigital/funnel-ui 4.4.18

package/dist/client/fields/EmbeddedVideo/youtube/YoutubePlayer.js

@@ -0,0 +1,288 @@
+"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.YoutubePlayer = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const rxjs_1 = require("rxjs");
+const YTApi_1 = require("./YTApi");
+// helpers
+class YoutubePlayer {
+    constructor(_a) {
+        var { elementId, language, muted, background = false } = _a, target = __rest(_a, ["elementId", "language", "muted", "background"]);
+        // initialize instance variables
+        this.elementId = elementId;
+        this._target = target;
+        this._videoUrl = getVideoUrl(target);
+        this.language = language;
+        this.background = background;
+        this._state$ = new rxjs_1.BehaviorSubject('uninitialized');
+        this._muted$ = new rxjs_1.BehaviorSubject(muted || background);
+        this._captions$ = new rxjs_1.BehaviorSubject(false);
+        this._started = false;
+        // bind callback methods
+        this.onReady = this.onReady.bind(this);
+        this.onStateChange = this.onStateChange.bind(this);
+        this.onError = this.onError.bind(this);
+        this.onAutoplayBlocked = this.onAutoplayBlocked.bind(this);
+    }
+    get state$() {
+        return this._state$.asObservable();
+    }
+    get state() {
+        return this._state$.value;
+    }
+    set state(state) {
+        this._state$.next(state);
+    }
+    get muted$() {
+        return this._muted$.asObservable();
+    }
+    get muted() {
+        return this._muted$.value;
+    }
+    set muted(muted) {
+        this._muted$.next(muted);
+    }
+    get captions$() {
+        return this._captions$.asObservable();
+    }
+    get captions() {
+        return this._captions$.value;
+    }
+    set captions(captions) {
+        this._captions$.next(captions);
+    }
+    get hasCaptions() {
+        var _a;
+        return (_a = this._hasCaptions) !== null && _a !== void 0 ? _a : false;
+    }
+    get ready() {
+        const { state } = this;
+        return state !== 'uninitialized' && state !== 'initializing' && state !== 'destroyed';
+    }
+    get started() {
+        return this._started;
+    }
+    get target() {
+        return this._target;
+    }
+    set target(target) {
+        // skip if the same
+        if (funnel_core_1.Value.equals(target, this._target)) {
+            return;
+        }
+        // update video
+        this._target = target;
+        this._videoUrl = getVideoUrl(target);
+        // TODO: switch videos
+        throw new funnel_core_1.NotImplementedError();
+    }
+    get videoUrl() {
+        return this._videoUrl;
+    }
+    get duration() {
+        var _a, _b;
+        return (_b = (_a = this._player) === null || _a === void 0 ? void 0 : _a.getDuration()) !== null && _b !== void 0 ? _b : -1;
+    }
+    get currentTime() {
+        var _a, _b;
+        return (_b = (_a = this._player) === null || _a === void 0 ? void 0 : _a.getCurrentTime()) !== null && _b !== void 0 ? _b : -1;
+    }
+    get player() {
+        // throw if not bound
+        const { _player } = this;
+        if (!_player) {
+            throw new funnel_core_1.InvalidOperationError('Cannot access YoutubePlayer before calling initialize()');
+        }
+        // return player
+        return _player;
+    }
+    initialize() {
+        // throw if already initialized
+        if (this._player) {
+            throw new funnel_core_1.InvalidOperationError('Attempt to invoke initialize() multiple times');
+        }
+        // mark as initializing
+        this.state = 'initializing';
+        // initialize video
+        const { elementId, _target: { videoId }, language, muted, background } = this;
+        this._player = new YT.Player(elementId, {
+            videoId,
+            playerVars: {
+                controls: 0,
+                enablejsapi: 1,
+                hl: language,
+                cc_load_policy: 3,
+                iv_load_policy: 3,
+                mute: muted ? 1 : 0,
+                autoplay: background ? 1 : 0,
+                disablekb: 1,
+                color: 'white',
+                fs: 0,
+                playsinline: 1,
+                rel: 0,
+                loop: 0,
+                showinfo: 0
+            },
+            events: {
+                onReady: this.onReady,
+                onStateChange: this.onStateChange,
+                onError: this.onError,
+                onAutoplayBlocked: this.onAutoplayBlocked
+            }
+        });
+    }
+    play() {
+        var _a, _b, _c;
+        // verify state
+        const { state } = this;
+        switch (state) {
+            // prevent play from invalid state
+            case 'uninitialized':
+            case 'initializing':
+            case 'destroyed':
+                console.warn('[YoutubePlayer] cannot play from state:', state);
+                break;
+            // play if paused
+            case 'initialized':
+            case 'paused':
+                this._started = true;
+                this.state = 'playing';
+                (_a = this._player) === null || _a === void 0 ? void 0 : _a.playVideo();
+                break;
+            // restart if ended
+            case 'ended':
+                this.state = 'playing';
+                (_b = this._player) === null || _b === void 0 ? void 0 : _b.seekTo(0, true);
+                (_c = this._player) === null || _c === void 0 ? void 0 : _c.playVideo();
+                break;
+            // or ignore
+            default:
+                console.debug('[YoutubePlayer] ignoring play from state:', state);
+                break;
+        }
+    }
+    seekTo(timeInSeconds) {
+        // verify state
+        const { state } = this;
+        switch (state) {
+            // prevent pause from invalid state
+            case 'uninitialized':
+            case 'initializing':
+            case 'destroyed':
+                console.warn('[YoutubePlayer] cannot seek from state:', state);
+                return;
+            // seek
+            default:
+                this.player.seekTo(timeInSeconds, true);
+                return;
+        }
+    }
+    pause() {
+        // verify state
+        const { state } = this;
+        switch (state) {
+            // prevent pause from invalid state
+            case 'uninitialized':
+            case 'initializing':
+            case 'destroyed':
+                console.warn('[YoutubePlayer] cannot pause from state:', state);
+                return;
+            // pause if playing
+            case 'playing':
+                this.state = 'paused';
+                this.player.pauseVideo();
+                return;
+            // or ignore
+            default:
+                console.debug('[YoutubePlayer] ignoring pause from state:', state);
+                break;
+        }
+    }
+    mute() {
+        // update state
+        this.muted = true;
+        // update mute
+        this.player.mute();
+    }
+    unmute() {
+        // ignore if there's no player
+        const { _player } = this;
+        if (!_player) {
+            console.warn('[VimeoPlayer] attempt to unmute before initialization');
+            return;
+        }
+        // update state
+        this.muted = false;
+        // update mute
+        this.player.unMute();
+    }
+    captionsOn() {
+        // ignore if there are not captions
+        const { language, _hasCaptions } = this;
+        if (!_hasCaptions) {
+            console.warn(`[YoutubePlayer] video does not support "${language}" captions`);
+            return;
+        }
+        // update state
+        this.captions = true;
+        // enable captions
+    }
+    captionsOff() {
+        // update state
+        this.captions = false;
+        // disable captions
+    }
+    destroy() {
+        // update state
+        this.state = 'destroyed';
+        // destroy
+        this.player.destroy();
+    }
+    onReady(event) {
+        // TODO: add caption support if youtube ever opens it up
+        this._hasCaptions = true;
+        // mark ready
+        this.state = 'initialized';
+    }
+    onStateChange(event) {
+        switch (event.data) {
+            case YTApi_1.YTApi.State.unstarted:
+                this.state = 'uninitialized';
+                break;
+            case YTApi_1.YTApi.State.ended:
+                this.state = 'ended';
+                break;
+            case YTApi_1.YTApi.State.playing:
+                this._started = true;
+                this.state = 'playing';
+                break;
+            case YTApi_1.YTApi.State.paused:
+                this.state = 'paused';
+                break;
+        }
+    }
+    onError(event) {
+        console.error('[YoutubePlayer/onError]', event);
+        // mark as initialized
+        this.state = 'error';
+    }
+    onAutoplayBlocked(event) {
+        console.debug('[YoutubePlayer/onAutoplayBlocked]', event);
+    }
+}
+exports.YoutubePlayer = YoutubePlayer;
+// helpers
+function getVideoUrl({ videoId }) {
+    return new URL(`https://www.youtube.com/watch?v=${encodeURI(videoId)}`);
+}

package/dist/client/fields/EmbeddedVideo/youtube/YoutubeVideo.d.ts

@@ -0,0 +1,13 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+import { EmbeddedPlayer } from '../EmbeddedPlayer';
+export declare const YoutubeVideo: import("react").ForwardRefExoticComponent<YoutubeVideo.Props & import("react").RefAttributes<EmbeddedPlayer>>;
+export declare namespace YoutubeVideo {
+    type Props = {
+        className?: string;
+        video: Schema.EmbeddedVideoField.Value.Youtube;
+        language?: Language;
+        background?: boolean;
+        muted?: boolean;
+        disableControls?: boolean;
+    };
+}

package/dist/client/fields/EmbeddedVideo/youtube/YoutubeVideo.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YoutubeVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const EmbeddedVideoContext_1 = require("../EmbeddedVideoContext");
+const YoutubePlayer_1 = require("./YoutubePlayer");
+// component
+exports.YoutubeVideo = (0, react_1.forwardRef)(function YoutubeVideo({ className, video, language = 'en', muted, background = false, disableControls = false }, ref) {
+    // bind state
+    const { videoId, thumbUrl } = video;
+    const elementId = (0, react_1.useId)();
+    const { youtubeReady, youtubeHack } = (0, react_1.useContext)(EmbeddedVideoContext_1.EmbeddedVideoContext);
+    const player = (0, react_1.useMemo)(() => new YoutubePlayer_1.YoutubePlayer({ elementId, videoId, language, muted, background }), [elementId, videoId, language, muted, background]);
+    const touch = (0, hooks_1.useTouch)();
+    const { state, ready, started } = player;
+    // bind ref
+    (0, react_1.useImperativeHandle)(ref, () => player, [player]);
+    // initialize player when ready
+    (0, react_1.useEffect)(() => {
+        // ignore if not ready
+        if (!youtubeReady) {
+            console.debug('[YoutubeVideo/init] waiting for YTPlayer API');
+            return;
+        }
+        // subscribe to changes
+        const subscription = player.state$
+            .subscribe(touch);
+        // initialize
+        player.initialize();
+        // destroy on unmount
+        return () => {
+            // remove subscriptions
+            subscription.unsubscribe();
+            // destroy
+            player.destroy();
+        };
+    }, [player, touch, youtubeReady]);
+    // helpers
+    const onOverlayClick = () => {
+        // skip if already started
+        if (!ready) {
+            console.debug('[YoutubeVideo/onStart] ignore start before ready');
+            return;
+        }
+        // start video
+        switch (player.state) {
+            case 'initialized':
+            case 'paused':
+            case 'ended':
+                player.play();
+                break;
+            case 'playing':
+                player.pause();
+                break;
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-YoutubePlayer', {
+            'nd-YoutubePlayer-experimental': youtubeHack,
+            'nd-YoutubePlayer-ready': ready,
+            'nd-YoutubePlayer-started': started,
+            'nd-YoutubePlayer-playing': state === 'playing',
+            'nd-YoutubePlayer-noControls': disableControls || background
+        }), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-YoutubePlayer-container", children: [(0, jsx_runtime_1.jsx)("img", { className: "nd-YoutubePlayer-thumbnail", src: thumbUrl, alt: "Video thumbnail", draggable: false, onClick: disableControls || background ? undefined : onOverlayClick }), (0, jsx_runtime_1.jsx)("div", { id: elementId })] }) }));
+});

package/dist/client/fields/EmbeddedVideo/youtube/index.d.ts

@@ -0,0 +1,3 @@
+export * from './YoutubePlayer';
+export * from './YoutubeVideo';
+export * from './YTApi';

package/dist/client/fields/EmbeddedVideo/youtube/index.js

@@ -0,0 +1,19 @@
+"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("./YoutubePlayer"), exports);
+__exportStar(require("./YoutubeVideo"), exports);
+__exportStar(require("./YTApi"), exports);

package/dist/client/fields/LazyVideo.d.ts

@@ -0,0 +1,8 @@
+import { Schema } from '@nascentdigital/funnel-core';
+import { HTMLAttributes } from 'react';
+export declare function LazyVideo({ className, video: asset, ...props }: LazyVideo.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace LazyVideo {
+    type Props = Omit<HTMLAttributes<HTMLImageElement> & HTMLAttributes<HTMLVideoElement>, 'children'> & {
+        video?: Schema.AssetField.LinkedValue.Video;
+    };
+}

package/dist/client/fields/LazyVideo.js

@@ -0,0 +1,100 @@
+"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.LazyVideo = LazyVideo;
+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("motion/react");
+const react_2 = require("react");
+const hooks_1 = require("../hooks");
+// component
+function LazyVideo(_a) {
+    var { className, video: asset } = _a, props = __rest(_a, ["className", "video"]);
+    // bind state + refs
+    const { type, url, metadata: { crop, dimensions: { width, height } = {}, blurHash } = {} } = asset !== null && asset !== void 0 ? asset : {};
+    const [state, setState] = (0, react_2.useState)('uninitialized');
+    const containerRef = (0, react_2.useRef)(null);
+    const [videoRef, video] = (0, hooks_1.useRefElement)();
+    const videoProxy = (0, hooks_1.useVideoProxy)(video);
+    const videoReady = !!(videoProxy === null || videoProxy === void 0 ? void 0 : videoProxy.loaded);
+    const blurCanvasRef = (0, react_2.useRef)(null);
+    const videoVisible = (0, react_1.useInView)(containerRef, {
+        amount: 'some'
+    });
+    // decode blurhash (if any)
+    (0, react_2.useEffect)(() => {
+        // skip if there's no hash
+        const canvas = blurCanvasRef.current;
+        if (!canvas || !blurHash) {
+            return;
+        }
+        // render hash int canvas
+        funnel_core_1.BlurHasher.render({ canvas, blurHash });
+    }, [blurHash]);
+    // manage video state
+    (0, react_2.useEffect)(() => {
+        switch (state) {
+            // load video when visible for the first time
+            case 'uninitialized': {
+                if (videoVisible) {
+                    setState('loading');
+                }
+                break;
+            }
+            // mark video as ready if transitioning from loading
+            case 'loading': {
+                if (videoReady) {
+                    setState('ready');
+                }
+                break;
+            }
+            // play/pause video based on visibility
+            case 'ready': {
+                if (videoVisible) {
+                    videoProxy === null || videoProxy === void 0 ? void 0 : videoProxy.play({ loop: true }).catch(console.error);
+                }
+                else {
+                    videoProxy === null || videoProxy === void 0 ? void 0 : videoProxy.pause().catch(console.error);
+                }
+                break;
+            }
+        }
+    }, [state, videoReady, videoVisible, videoProxy]);
+    // load video when available
+    (0, react_2.useEffect)(() => {
+        // skip if not ready to load
+        if (!video || state !== 'loading') {
+            return;
+        }
+        // load video (once)
+        video.load();
+    }, [state, video]);
+    // skip if there's no video
+    if (!asset) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: containerRef, className: (0, classnames_1.default)(className, 'nd-LazyVideo', {
+            'nd-LazyVideo-loading': videoVisible && !videoReady,
+            'nd-LazyVideo-ready': videoReady
+        }), style: {
+            '--nd-visual-width': width ? `${width}` : '1',
+            '--nd-visual-height': height ? `${height}` : '1'
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-LazyVideo-content", children: [blurHash &&
+                    (0, jsx_runtime_1.jsx)("canvas", { ref: blurCanvasRef, className: "nd-LazyVideo-blurHash", width: 32, height: 32, draggable: false }), (0, jsx_runtime_1.jsxs)("video", { ref: videoRef, className: (0, classnames_1.default)('nd-LazyVideo-video'), preload: "none", autoPlay: true, muted: true, loop: true, playsInline: true, children: [state !== 'uninitialized' &&
+                            (0, jsx_runtime_1.jsx)("source", { src: url, type: type }), "Your browser does not support the video content."] })] }) })));
+}

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

@@ -0,0 +1,2 @@
+export * from './EmbeddedVideo/index';
+export * from './LazyVideo';

package/dist/client/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("./EmbeddedVideo/index"), exports);
+__exportStar(require("./LazyVideo"), exports);

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

@@ -0,0 +1,13 @@
+import { Schema } from '@nascentdigital/funnel-core';
+import { FormMessage } from '../../server/blocks/FormMessage';
+import type { HTMLBlockElement } from '../../types';
+export declare function Form({ className, form: { formId, fields: fieldsContent }, privacy, submitLabel, successMessage, failureMessage, ...divProps }: Form.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Form {
+    type Props = HTMLBlockElement<'div'> & {
+        form: Schema.FormField.Value;
+        privacy?: Schema.RichTextField.Value;
+        submitLabel?: string;
+        successMessage: FormMessage.Model;
+        failureMessage: FormMessage.Model;
+    };
+}

package/dist/client/forms/Form.js

@@ -0,0 +1,68 @@
+"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.Form = Form;
+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 FormMessage_1 = require("../../server/blocks/FormMessage");
+const Caption_1 = require("../../server/fields/Caption");
+const fields_1 = require("./fields");
+const FieldErrorController_1 = require("./fields/FieldErrorController");
+const FormContext_1 = require("./FormContext");
+const useForm_1 = require("./useForm");
+// component
+function Form(_a) {
+    var { className, form: { formId, fields: fieldsContent }, privacy, submitLabel = 'Submit', successMessage, failureMessage } = _a, divProps = __rest(_a, ["className", "form", "privacy", "submitLabel", "successMessage", "failureMessage"]);
+    // create form model using config
+    const form = (0, react_1.useMemo)(() => {
+        const config = funnel_core_1.Forms.getConfig(formId);
+        return new funnel_core_1.FormModel(config);
+    }, [formId]);
+    // error level state
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)('none');
+    // create form context
+    const context = (0, react_1.useMemo)(() => ({ form }), [form]);
+    // react to form changes
+    (0, useForm_1.useForm)(form);
+    // initialize on mount
+    (0, react_1.useEffect)(() => {
+        form.initialize().catch(e => console.error('Failed to initialize form', e));
+    }, [form]);
+    // submit handler
+    const onSubmit = async () => {
+        // bail if form is not valid
+        if (!form.valid) {
+            setErrorLevel('all');
+            return;
+        }
+        // submit form
+        await form.submit();
+    };
+    // success state
+    if (form.submitted) {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Form') }, divProps, { children: (0, jsx_runtime_1.jsx)(FormMessage_1.FormMessage, { type: "success", message: successMessage }) })));
+    }
+    // failure state
+    if (form.submitFailed === 'submitFailedServer') {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Form') }, divProps, { children: (0, jsx_runtime_1.jsx)(FormMessage_1.FormMessage, { type: "failure", message: failureMessage }) })));
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Form') }, divProps, { children: [(0, jsx_runtime_1.jsx)("form", { className: "nd-Form-fields", children: form.fields.map(field => (0, jsx_runtime_1.jsx)(fields_1.Field, Object.assign({ field: field }, fieldsContent[field.id]), field.id)) }), privacy &&
+                        (0, jsx_runtime_1.jsx)(Caption_1.Caption, { as: "div", className: "nd-Form-privacy", caption: privacy }), form.consentFields &&
+                        (0, jsx_runtime_1.jsx)("div", { className: "nd-Form-consent", children: form.consentFields.map(field => (0, jsx_runtime_1.jsx)(fields_1.Field, Object.assign({ field: field }, fieldsContent[field.id]), `consent-${field.id}`)) }), (0, jsx_runtime_1.jsx)("div", { className: "nd-Form-actions", children: (0, jsx_runtime_1.jsx)("button", { className: "nd-Form-action nd-Form-action-save", disabled: !form.canSubmit, onClick: onSubmit, children: (0, jsx_runtime_1.jsx)("span", { className: "nd-Form-actionLabel", children: submitLabel }) }) })] })) }) }));
+}

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

@@ -0,0 +1,5 @@
+import type { FormModel } from '@nascentdigital/funnel-core';
+export type IFormContext = {
+    form: FormModel;
+};
+export declare const FormContext: import("react").Context<IFormContext>;

package/dist/client/forms/FormContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormContext = void 0;
+const react_1 = require("react");
+// context
+exports.FormContext = (0, react_1.createContext)({});

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

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