@f1studio/form-spec 5.0.0-alpha.107 → 5.0.0-alpha.109

package/src/plugins/likert/src/LikertField.ts

@@ -0,0 +1,420 @@
+import { FSharpRef, Record } from "@fable-org/fable-library-js/Types.js";
+import { equals, int32ToString, createObj, IComparable, IEquatable } from "@fable-org/fable-library-js/Util.js";
+import { class_type, list_type, record_type, string_type, TypeInfo } from "@fable-org/fable-library-js/Reflection.js";
+import { choose, sum, map as map_1, append as append_1, empty as empty_1, singleton as singleton_1, sumBy, length, ofArray, isEmpty as isEmpty_2, FSharpList } from "@fable-org/fable-library-js/List.js";
+import { mapValues, Field$3, IAttributes } from "../../../fable_modules/Fable.Form.3.0.0/Field.fs.js";
+import { Form$3, FieldConfig$4, field as field_1 } from "../../../fable_modules/Fable.Form.3.0.0/Base.fs.js";
+import { toList as toList_1, FSharpMap__get_Count, add, remove, tryFind, FSharpMap, isEmpty as isEmpty_1 } from "@fable-org/fable-library-js/Map.js";
+import { createElement } from "react";
+import React from "react";
+import { withLabelAndError } from "../../../fable_modules/Fable.Form.Simple.Bulma.5.0.1/Html.View.fs.js";
+import { map, empty, collect, singleton, append, delay, toList } from "@fable-org/fable-library-js/Seq.js";
+import { ReactElement } from "../../../fable_modules/Fable.React.Types.18.3.0/Fable.React.fs.js";
+import { value as value_123, Option } from "@fable-org/fable-library-js/Option.js";
+import { IStyleAttribute } from "../../../fable_modules/Feliz.2.8.0/Types.fs.js";
+import { rgba } from "../../../fable_modules/Feliz.2.8.0/Colors.fs.js";
+import { tryParse, int32, float64 } from "@fable-org/fable-library-js/Int32.js";
+import { reactApi } from "../../../fable_modules/Feliz.2.8.0/Interop.fs.js";
+import { IStandardField$3_$reflection, IStandardField$3, IField$1, StandardRenderFieldConfig$2 } from "../../../fable_modules/Fable.Form.Simple.Bulma.5.0.1/Types.fs.js";
+import { Spec_FormField$1, Spec_FieldType_$union, Shared_MatrixAnswer, Shared_MatrixItemKey, Shared_FieldOption, Shared_FieldValue_$union, Shared_FieldKey, Shared_FieldValue_PluginData, Shared_PluginDataProperty, Shared_PluginPropertyKey, Spec_PluginFieldConfig } from "../../../FormSpec.FS/FormSpec.js";
+import { FSharpResult$2_$union, FSharpResult$2_Ok } from "@fable-org/fable-library-js/Result.js";
+import { IPluginValueConverter } from "../../../FormSpec.FS/PluginInterface.js";
+import { rangeDouble } from "@fable-org/fable-library-js/Range.js";
+import { RenderPreviewProps$1 } from "../../../FormSpec.FS/Interfaces.js";
+import { substring, join } from "@fable-org/fable-library-js/String.js";
+import { FieldDetails } from "../../../FormSpec.FS/Designer.js";
+
+export class LikertField_LikertItemConfig extends Record implements IEquatable<LikertField_LikertItemConfig>, IComparable<LikertField_LikertItemConfig> {
+    readonly Key: string;
+    readonly Label: string;
+    constructor(Key: string, Label: string) {
+        super();
+        this.Key = Key;
+        this.Label = Label;
+    }
+}
+
+export function LikertField_LikertItemConfig_$reflection(): TypeInfo {
+    return record_type("Fable.Form.Simple.Bulma.Fields.LikertField.LikertField.LikertItemConfig", [], LikertField_LikertItemConfig, () => [["Key", string_type], ["Label", string_type]]);
+}
+
+export class LikertField_LikertOptionConfig extends Record implements IEquatable<LikertField_LikertOptionConfig>, IComparable<LikertField_LikertOptionConfig> {
+    readonly Value: string;
+    readonly Label: string;
+    readonly Description: string;
+    constructor(Value: string, Label: string, Description: string) {
+        super();
+        this.Value = Value;
+        this.Label = Label;
+        this.Description = Description;
+    }
+}
+
+export function LikertField_LikertOptionConfig_$reflection(): TypeInfo {
+    return record_type("Fable.Form.Simple.Bulma.Fields.LikertField.LikertField.LikertOptionConfig", [], LikertField_LikertOptionConfig, () => [["Value", string_type], ["Label", string_type], ["Description", string_type]]);
+}
+
+export class LikertField_Attributes extends Record implements IEquatable<LikertField_Attributes>, IComparable<LikertField_Attributes>, IAttributes {
+    readonly FieldId: string;
+    readonly Label: string;
+    readonly Items: FSharpList<LikertField_LikertItemConfig>;
+    readonly Options: FSharpList<LikertField_LikertOptionConfig>;
+    constructor(FieldId: string, Label: string, Items: FSharpList<LikertField_LikertItemConfig>, Options: FSharpList<LikertField_LikertOptionConfig>) {
+        super();
+        this.FieldId = FieldId;
+        this.Label = Label;
+        this.Items = Items;
+        this.Options = Options;
+    }
+    GetFieldId(): string {
+        const this$: LikertField_Attributes = this;
+        return this$.FieldId;
+    }
+}
+
+export function LikertField_Attributes_$reflection(): TypeInfo {
+    return record_type("Fable.Form.Simple.Bulma.Fields.LikertField.LikertField.Attributes", [], LikertField_Attributes, () => [["FieldId", string_type], ["Label", string_type], ["Items", list_type(LikertField_LikertItemConfig_$reflection())], ["Options", list_type(LikertField_LikertOptionConfig_$reflection())]]);
+}
+
+export function LikertField_form<Values, Field, Output>(): ((arg0: ((arg0: Field$3<LikertField_Attributes, FSharpMap<string, string>, Values>) => Field)) => ((arg0: FieldConfig$4<LikertField_Attributes, FSharpMap<string, string>, Values, Output>) => Form$3<Values, Output, Field>)) {
+    return (build: ((arg0: Field$3<LikertField_Attributes, FSharpMap<string, string>, Values>) => Field)): ((arg0: FieldConfig$4<LikertField_Attributes, FSharpMap<string, string>, Values, Output>) => Form$3<Values, Output, Field>) => ((config: FieldConfig$4<LikertField_Attributes, FSharpMap<string, string>, Values, Output>): Form$3<Values, Output, Field> => field_1<FSharpMap<string, string>, LikertField_Attributes, Values, Field, Output>(isEmpty_1, build, config));
+}
+
+export function LikertField_LikertFieldComponent(config: StandardRenderFieldConfig$2<FSharpMap<string, string>, LikertField_Attributes>): ReactElement {
+    let elems_5: Iterable<ReactElement>;
+    const value: FSharpMap<string, string> = config.Value;
+    return withLabelAndError(config.Attributes.Label, config.ShowError, config.Error, createElement<any>("div", createObj(ofArray([["className", "likert-field"] as [string, any], (elems_5 = toList<ReactElement>(delay<ReactElement>((): Iterable<ReactElement> => {
+        let elems_3: Iterable<ReactElement>;
+        return append<ReactElement>(singleton<ReactElement>(createElement<any>("div", createObj(ofArray([["className", "likert-container"] as [string, any], ["style", {
+            width: 100 + "%",
+        }] as [string, any], (elems_3 = toList<ReactElement>(delay<ReactElement>((): Iterable<ReactElement> => (isEmpty_2(config.Attributes.Items) ? singleton<ReactElement>(createElement<any>("div", {
+            className: "likert-empty-message",
+            style: {
+                padding: 2 + "rem",
+                textAlign: "center",
+                color: "#7a7a7a",
+                fontStyle: "italic",
+            },
+            children: "No items configured. Please add items to this Likert scale.",
+        })) : collect<LikertField_LikertItemConfig, Iterable<ReactElement>, ReactElement>((item: LikertField_LikertItemConfig): Iterable<ReactElement> => {
+            let elems_2: Iterable<ReactElement>, elems: Iterable<ReactElement>, elems_1: Iterable<ReactElement>;
+            const selectedValue: Option<string> = tryFind<string, string>(item.Key, value);
+            return singleton<ReactElement>(createElement<any>("div", createObj(ofArray([["className", "likert-item"] as [string, any], ["style", {
+                marginBottom: 1.5 + "rem",
+                padding: 1 + "rem",
+                backgroundColor: "#fafafa",
+                borderRadius: 8 + "px",
+                border: (((1 + "px ") + "solid") + " ") + "#e8e8e8",
+            }] as [string, any], (elems_2 = [createElement<any>("div", {
+                className: "likert-item-label",
+                style: {
+                    marginBottom: 0.75 + "rem",
+                    fontWeight: 500,
+                    fontSize: 1 + "rem",
+                    color: "#363636",
+                },
+                children: item.Label,
+            }), createElement<any>("div", createObj(ofArray([["className", "likert-options"] as [string, any], ["style", {
+                display: "flex",
+                justifyContent: "space-between",
+                gap: 0.5 + "rem",
+                flexWrap: "wrap",
+            }] as [string, any], (elems = toList<ReactElement>(delay<ReactElement>((): Iterable<ReactElement> => collect<LikertField_LikertOptionConfig, Iterable<ReactElement>, ReactElement>((option: LikertField_LikertOptionConfig): Iterable<ReactElement> => {
+                const isSelected: boolean = (selectedValue == null) ? false : (value_123(selectedValue) === option.Value);
+                return singleton<ReactElement>(createElement<any>("button", {
+                    type: "button",
+                    className: isSelected ? "button is-primary is-selected" : "button is-light",
+                    style: createObj(toList<IStyleAttribute>(delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["flexGrow", 1] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["flexBasis", 0] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["minWidth", 60 + "px"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["margin", 2 + "px"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["transitionDuration", 200 + "ms"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => (isSelected ? append<IStyleAttribute>(singleton<IStyleAttribute>(["fontWeight", "bold"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => singleton<IStyleAttribute>(["boxShadow", (((((0 + "px ") + 2) + "px ") + 8) + "px ") + rgba<float64>(0, 0, 0, 0.15)] as [string, any]))) : empty<IStyleAttribute>())))))))))))))),
+                    children: option.Value,
+                    title: option.Label,
+                    disabled: config.Disabled ? true : config.IsReadOnly,
+                    onClick: (_arg: MouseEvent): void => {
+                        if (!config.Disabled && !config.IsReadOnly) {
+                            config.OnChange(isSelected ? remove<string, string>(item.Key, value) : add<string, string>(item.Key, option.Value, value));
+                        }
+                    },
+                }));
+            }, config.Attributes.Options))), ["children", reactApi.Children.toArray(Array.from(elems))] as [string, any])]))), createElement<any>("div", createObj(ofArray([["className", "likert-labels"] as [string, any], ["style", {
+                display: "flex",
+                justifyContent: "space-between",
+                fontSize: 0.7 + "rem",
+                color: "#7a7a7a",
+                marginTop: 0.35 + "rem",
+            }] as [string, any], (elems_1 = toList<ReactElement>(delay<ReactElement>((): Iterable<ReactElement> => map<LikertField_LikertOptionConfig, ReactElement>((option_1: LikertField_LikertOptionConfig): ReactElement => createElement<any>("span", {
+                style: {
+                    flexGrow: 1,
+                    flexBasis: 0,
+                    textAlign: "center",
+                    padding: 2 + "px",
+                },
+                children: option_1.Label,
+            }), config.Attributes.Options))), ["children", reactApi.Children.toArray(Array.from(elems_1))] as [string, any])])))], ["children", reactApi.Children.toArray(Array.from(elems_2))] as [string, any])]))));
+        }, config.Attributes.Items)))), ["children", reactApi.Children.toArray(Array.from(elems_3))] as [string, any])])))), delay<ReactElement>((): Iterable<ReactElement> => {
+            let elems_4: Iterable<ReactElement>;
+            const completedCount: int32 = FSharpMap__get_Count(value) | 0;
+            const totalCount: int32 = length(config.Attributes.Items) | 0;
+            return (totalCount > 0) ? singleton<ReactElement>(createElement<any>("div", createObj(ofArray([["className", "likert-progress"] as [string, any], ["style", {
+                marginTop: 1 + "rem",
+                fontSize: 0.85 + "rem",
+                color: (completedCount === totalCount) ? "#48c774" : "#7a7a7a",
+                textAlign: "right",
+            }] as [string, any], (elems_4 = toList<ReactElement>(delay<ReactElement>((): Iterable<ReactElement> => append<ReactElement>(singleton<ReactElement>(`Answered: ${completedCount} / ${totalCount}`), delay<ReactElement>((): Iterable<ReactElement> => ((completedCount === totalCount) ? singleton<ReactElement>(createElement<any>("span", {
+                style: {
+                    marginLeft: 0.5 + "rem",
+                },
+                children: "✓",
+            })) : empty<ReactElement>()))))), ["children", reactApi.Children.toArray(Array.from(elems_4))] as [string, any])])))) : empty<ReactElement>();
+        }));
+    })), ["children", reactApi.Children.toArray(Array.from(elems_5))] as [string, any])]))));
+}
+
+export class LikertField_Field$1<Values> extends IStandardField$3<Values, FSharpMap<string, string>, LikertField_Attributes> implements IField$1<Values> {
+    readonly innerField_1: Field$3<LikertField_Attributes, FSharpMap<string, string>, Values>;
+    constructor(innerField: Field$3<LikertField_Attributes, FSharpMap<string, string>, Values>) {
+        super(innerField);
+        this.innerField_1 = innerField;
+    }
+    "Fable.Form.Simple.Bulma.IStandardField`3.RenderFieldZ43FEF6DC"(config: StandardRenderFieldConfig$2<FSharpMap<string, string>, LikertField_Attributes>): ReactElement {
+        return createElement(LikertField_LikertFieldComponent, config);
+    }
+    MapFieldValues<NewValues>(update: ((arg0: Values) => $a)): IField$1<$a> {
+        const _: LikertField_Field$1<Values> = this;
+        return LikertField_Field$1_$ctor_3DBAD33C<$a>(mapValues<Values, $a, LikertField_Attributes, FSharpMap<string, string>>(update, _.innerField_1));
+    }
+}
+
+export function LikertField_Field$1_$reflection(gen0: TypeInfo): TypeInfo {
+    return class_type("Fable.Form.Simple.Bulma.Fields.LikertField.LikertField.Field`1", [gen0], LikertField_Field$1, IStandardField$3_$reflection(gen0, class_type("Microsoft.FSharp.Collections.FSharpMap`2", [string_type, string_type]), LikertField_Attributes_$reflection()));
+}
+
+export function LikertField_Field$1_$ctor_3DBAD33C<Values>(innerField: Field$3<LikertField_Attributes, FSharpMap<string, string>, Values>): LikertField_Field$1<Values> {
+    return new LikertField_Field$1(innerField);
+}
+
+/**
+ * Create a Likert scale field
+ */
+export function Form_likertField<Values, Output>(config: FieldConfig$4<LikertField_Attributes, FSharpMap<string, string>, Values, Output>): Form$3<Values, Output, IField$1<Values>> {
+    return LikertField_form<Values, IField$1<Values>, Output>()(LikertField_Field$1_$ctor_3DBAD33C)(config);
+}
+
+export const Form_pluginConfig: Spec_PluginFieldConfig = new Spec_PluginFieldConfig("Fable.Form.Simple.Bulma.Fields.LikertField");
+
+export const Form_likertConverter: IPluginValueConverter = (() => {
+    const totalScoreKey: Shared_PluginPropertyKey = new Shared_PluginPropertyKey("a1a1a1a1-2222-3333-4444-555555555555");
+    const totalScoreMeta = (): Shared_PluginDataProperty => (new Shared_PluginDataProperty(totalScoreKey, "TotalScore", "int", "", "Total Score", undefined, "Sum of all Likert item ratings"));
+    return new IPluginValueConverter((_arg: Shared_FieldKey, v: any): Option<Shared_FieldValue_$union> => {
+        let p: Shared_PluginDataProperty;
+        const total: int32 = sumBy<[string, string], int32>((tupledArg: [string, string]): int32 => {
+            let matchValue: [boolean, int32];
+            let outArg = 0;
+            matchValue = ([tryParse(tupledArg[1].trim(), 511, false, 32, new FSharpRef<int32>((): int32 => outArg, (v_2: int32): void => {
+                outArg = (v_2 | 0);
+            })), outArg] as [boolean, int32]);
+            if (matchValue[0]) {
+                return matchValue[1] | 0;
+            }
+            else {
+                return 0;
+            }
+        }, toList_1<string, string>(v), {
+            GetZero: (): int32 => 0,
+            Add: (x: int32, y: int32): int32 => (x + y),
+        }) | 0;
+        return Shared_FieldValue_PluginData(singleton_1((p = totalScoreMeta(), new Shared_PluginDataProperty(p.PropertyKey, p.Name, p.DataType, int32ToString(total), p.DisplayName, p.Unit, p.Description))));
+    }, (_arg_2: Shared_FieldValue_$union): Option<any> => undefined, (): Option<FSharpList<Shared_FieldOption>> => undefined, (): FSharpList<string> => singleton_1("TotalScore"), (n_1: string): Option<Shared_PluginDataProperty> => ((n_1 === "TotalScore") ? totalScoreMeta() : undefined), (_arg_3: Shared_PluginPropertyKey): Option<Shared_PluginDataProperty> => totalScoreMeta(), (n_2: string, fv: Shared_FieldValue_$union): Option<Shared_PluginDataProperty> => {
+        let bind$0040: Shared_PluginDataProperty, ma: Shared_MatrixAnswer;
+        let matchResult: int32, ma_1: Shared_MatrixAnswer;
+        if (fv.tag === /* Matrix */ 2) {
+            if ((ma = fv.fields[0], n_2 === "TotalScore")) {
+                matchResult = 0;
+                ma_1 = fv.fields[0];
+            }
+            else {
+                matchResult = 1;
+            }
+        }
+        else {
+            matchResult = 1;
+        }
+        switch (matchResult) {
+            case 0: {
+                const total_1: int32 = sumBy<[Shared_MatrixItemKey, string], int32>((tupledArg_1: [Shared_MatrixItemKey, string]): int32 => {
+                    let matchValue_1: [boolean, int32];
+                    let outArg_1 = 0;
+                    matchValue_1 = ([tryParse(tupledArg_1[1].trim(), 511, false, 32, new FSharpRef<int32>((): int32 => outArg_1, (v_4: int32): void => {
+                        outArg_1 = (v_4 | 0);
+                    })), outArg_1] as [boolean, int32]);
+                    if (matchValue_1[0]) {
+                        return matchValue_1[1] | 0;
+                    }
+                    else {
+                        return 0;
+                    }
+                }, toList_1<Shared_MatrixItemKey, string>(ma_1!.Values), {
+                    GetZero: (): int32 => 0,
+                    Add: (x_1: int32, y_1: int32): int32 => (x_1 + y_1),
+                }) | 0;
+                return (bind$0040 = totalScoreMeta(), new Shared_PluginDataProperty(bind$0040.PropertyKey, bind$0040.Name, bind$0040.DataType, int32ToString(total_1), bind$0040.DisplayName, bind$0040.Unit, bind$0040.Description));
+            }
+            default:
+                return undefined;
+        }
+    }, (k: Shared_PluginPropertyKey, fv_1: Shared_FieldValue_$union): Option<Shared_PluginDataProperty> => {
+        let bind$0040_1: Shared_PluginDataProperty, ma_2: Shared_MatrixAnswer;
+        let matchResult_1: int32, ma_3: Shared_MatrixAnswer;
+        if (fv_1.tag === /* Matrix */ 2) {
+            if ((ma_2 = fv_1.fields[0], equals(k, totalScoreKey))) {
+                matchResult_1 = 0;
+                ma_3 = fv_1.fields[0];
+            }
+            else {
+                matchResult_1 = 1;
+            }
+        }
+        else {
+            matchResult_1 = 1;
+        }
+        switch (matchResult_1) {
+            case 0: {
+                const total_2: int32 = sumBy<[Shared_MatrixItemKey, string], int32>((tupledArg_2: [Shared_MatrixItemKey, string]): int32 => {
+                    let matchValue_2: [boolean, int32];
+                    let outArg_2 = 0;
+                    matchValue_2 = ([tryParse(tupledArg_2[1].trim(), 511, false, 32, new FSharpRef<int32>((): int32 => outArg_2, (v_6: int32): void => {
+                        outArg_2 = (v_6 | 0);
+                    })), outArg_2] as [boolean, int32]);
+                    if (matchValue_2[0]) {
+                        return matchValue_2[1] | 0;
+                    }
+                    else {
+                        return 0;
+                    }
+                }, toList_1<Shared_MatrixItemKey, string>(ma_3!.Values), {
+                    GetZero: (): int32 => 0,
+                    Add: (x_2: int32, y_2: int32): int32 => (x_2 + y_2),
+                }) | 0;
+                return (bind$0040_1 = totalScoreMeta(), new Shared_PluginDataProperty(bind$0040_1.PropertyKey, bind$0040_1.Name, bind$0040_1.DataType, int32ToString(total_2), bind$0040_1.DisplayName, bind$0040_1.Unit, bind$0040_1.Description));
+            }
+            default:
+                return undefined;
+        }
+    }, (_arg_6: string, _arg_7: string): FSharpResult$2_$union<void, string> => FSharpResult$2_Ok<void, string>(undefined), (fv_2: Shared_FieldValue_$union): FSharpList<Shared_PluginDataProperty> => {
+        let bind$0040_2: Shared_PluginDataProperty;
+        if (fv_2.tag === /* Matrix */ 2) {
+            const total_3: int32 = sumBy<[Shared_MatrixItemKey, string], int32>((tupledArg_3: [Shared_MatrixItemKey, string]): int32 => {
+                let matchValue_3: [boolean, int32];
+                let outArg_3 = 0;
+                matchValue_3 = ([tryParse(tupledArg_3[1].trim(), 511, false, 32, new FSharpRef<int32>((): int32 => outArg_3, (v_8: int32): void => {
+                    outArg_3 = (v_8 | 0);
+                })), outArg_3] as [boolean, int32]);
+                if (matchValue_3[0]) {
+                    return matchValue_3[1] | 0;
+                }
+                else {
+                    return 0;
+                }
+            }, toList_1<Shared_MatrixItemKey, string>(fv_2.fields[0].Values), {
+                GetZero: (): int32 => 0,
+                Add: (x_3: int32, y_3: int32): int32 => (x_3 + y_3),
+            }) | 0;
+            return singleton_1((bind$0040_2 = totalScoreMeta(), new Shared_PluginDataProperty(bind$0040_2.PropertyKey, bind$0040_2.Name, bind$0040_2.DataType, int32ToString(total_3), bind$0040_2.DisplayName, bind$0040_2.Unit, bind$0040_2.Description)));
+        }
+        else {
+            return empty_1<Shared_PluginDataProperty>();
+        }
+    });
+})();
+
+/**
+ * Designer preview for the Likert field
+ */
+export function Form_designerPreview(props: RenderPreviewProps$1<Spec_FieldType_$union>): ReactElement {
+    let elems_2: Iterable<ReactElement>, elems: Iterable<ReactElement>, elems_1: Iterable<ReactElement>;
+    return createElement<any>("div", createObj(ofArray([["className", "likert-designer-preview"] as [string, any], ["style", {
+        padding: 1 + "rem",
+        backgroundColor: "#fafafa",
+        borderRadius: 8 + "px",
+        border: (((1 + "px ") + "dashed") + " ") + "#dbdbdb",
+    }] as [string, any], (elems_2 = [createElement<any>("div", {
+        style: {
+            marginBottom: 0.75 + "rem",
+            fontWeight: 500,
+            color: "#4a4a4a",
+        },
+        children: "📊 Likert Scale Preview",
+    }), createElement<any>("div", createObj(ofArray([["style", {
+        display: "flex",
+        justifyContent: "space-between",
+        gap: 0.25 + "rem",
+    }] as [string, any], (elems = toList<ReactElement>(delay<ReactElement>((): Iterable<ReactElement> => map<int32, ReactElement>((i: int32): ReactElement => createElement<any>("span", {
+        className: "button is-small is-light",
+        style: {
+            flexGrow: 1,
+            textAlign: "center",
+            fontSize: 0.75 + "rem",
+        },
+        children: int32ToString(i),
+    }), rangeDouble(1, 1, 5)))), ["children", reactApi.Children.toArray(Array.from(elems))] as [string, any])]))), createElement<any>("div", createObj(ofArray([["style", {
+        display: "flex",
+        justifyContent: "space-between",
+        fontSize: 0.65 + "rem",
+        color: "#7a7a7a",
+        marginTop: 0.25 + "rem",
+    }] as [string, any], (elems_1 = [createElement<any>("span", {
+        children: "Disagree",
+    }), createElement<any>("span", {
+        children: "Neutral",
+    }), createElement<any>("span", {
+        children: "Agree",
+    })], ["children", reactApi.Children.toArray(Array.from(elems_1))] as [string, any])]))), createElement<any>("div", {
+        style: {
+            fontSize: 0.75 + "rem",
+            color: "#7a7a7a",
+            textAlign: "center",
+            marginTop: 0.75 + "rem",
+        },
+        children: "Multiple items can be rated using the same scale",
+    })], ["children", reactApi.Children.toArray(Array.from(elems_2))] as [string, any])])));
+}
+
+/**
+ * Render Likert field results as Markdown
+ */
+export function Form_markdownRenderer(field: Spec_FormField$1<Spec_FieldType_$union>, fieldDetails: FieldDetails): string {
+    const matchValue: Shared_FieldValue_$union = fieldDetails.FieldValue;
+    switch (matchValue.tag) {
+        case /* Single */ 0:
+            return `**${field.Label}:** ${matchValue.fields[0].Value}`;
+        case /* Multiple */ 1:
+            return `**${field.Label}:** *Multiple values (unexpected format)*`;
+        case /* PluginData */ 3:
+            return `**${field.Label}:** *Plugin data (use plugin-specific export)*`;
+        default: {
+            const matrixAnswer: Shared_MatrixAnswer = matchValue.fields[0];
+            const itemCount: int32 = FSharpMap__get_Count(matrixAnswer.Values) | 0;
+            if (itemCount === 0) {
+                return `**${field.Label}:** *No responses provided*`;
+            }
+            else {
+                return join("\n", append_1(ofArray([`**${field.Label}** 📊`, "", "| Item | Rating |", "|------|--------|"]), append_1(map_1<[Shared_MatrixItemKey, string], string>((tupledArg: [Shared_MatrixItemKey, string]): string => (`| ${substring(tupledArg[0].fields[0], 0, 8)} | **${tupledArg[1]}** |`), toList_1<Shared_MatrixItemKey, string>(matrixAnswer.Values)), ofArray(["", `> **Total Score:** ${sum<int32>(choose<[Shared_MatrixItemKey, string], int32>((tupledArg_1: [Shared_MatrixItemKey, string]): Option<int32> => {
+                    let matchValue_1: [boolean, int32];
+                    let outArg = 0;
+                    matchValue_1 = ([tryParse(tupledArg_1[1], 511, false, 32, new FSharpRef<int32>((): int32 => outArg, (v_1: int32): void => {
+                        outArg = (v_1 | 0);
+                    })), outArg] as [boolean, int32]);
+                    if (matchValue_1[0]) {
+                        return matchValue_1[1];
+                    }
+                    else {
+                        return undefined;
+                    }
+                }, toList_1<Shared_MatrixItemKey, string>(matrixAnswer.Values)), {
+                    GetZero: (): int32 => 0,
+                    Add: (x: int32, y: int32): int32 => (x + y),
+                })} (${itemCount} items rated)`]))));
+            }
+        }
+    }
+}
+
+//# sourceMappingURL=LikertField.ts.map

package/src/plugins/signature/src/SignatureField.ts

@@ -0,0 +1,185 @@
+import { Record } from "@fable-org/fable-library-js/Types.js";
+import { equals, createObj, IDisposable, IComparable, IEquatable } from "@fable-org/fable-library-js/Util.js";
+import { mapValues, Field$3, IAttributes } from "../../../fable_modules/Fable.Form.3.0.0/Field.fs.js";
+import { class_type, record_type, string_type, TypeInfo } from "@fable-org/fable-library-js/Reflection.js";
+import { Form$3, FieldConfig$4, field as field_1 } from "../../../fable_modules/Fable.Form.3.0.0/Base.fs.js";
+import { join, isNullOrWhiteSpace, isNullOrEmpty } from "@fable-org/fable-library-js/String.js";
+import { createElement } from "react";
+import React from "react";
+import { reactApi } from "../../../fable_modules/Feliz.2.8.0/Interop.fs.js";
+import { ReactElement, IRefValue$1 } from "../../../fable_modules/Fable.React.Types.18.3.0/Fable.React.fs.js";
+import { defaultArg, some, value as value_22, Option } from "@fable-org/fable-library-js/Option.js";
+import { useEffectWithDeps } from "../../../fable_modules/Feliz.2.8.0/ReactInterop.js";
+import { int32 } from "@fable-org/fable-library-js/Int32.js";
+import { withLabelAndError } from "../../../fable_modules/Fable.Form.Simple.Bulma.5.0.1/Html.View.fs.js";
+import { empty, singleton, append, delay, toList } from "@fable-org/fable-library-js/Seq.js";
+import { IStyleAttribute } from "../../../fable_modules/Feliz.2.8.0/Types.fs.js";
+import { cons, empty as empty_1, singleton as singleton_1, FSharpList, ofArray } from "@fable-org/fable-library-js/List.js";
+import { reactApi as reactApi_1 } from "../../../fable_modules/Feliz.2.8.0/Interop.fs.js";
+import react_signature_pad_wrapper from "react-signature-pad-wrapper";
+import { IStandardField$3_$reflection, IStandardField$3, IField$1, StandardRenderFieldConfig$2 } from "../../../fable_modules/Fable.Form.Simple.Bulma.5.0.1/Types.fs.js";
+import { ISignaturePadProperty } from "../../../fable_modules/Glutinum.Feliz.ReactSignaturePadWrapper.1.0.2/Types.fs.js";
+import { Spec_FormField$1, Spec_FieldType_$union, Shared_FieldOption, Shared_FieldValue_$union, Shared_FieldKey, Shared_FieldValue_Single, Shared_FieldAnswer, Shared_PluginDataProperty, Shared_PluginPropertyKey, Spec_PluginFieldConfig } from "../../../FormSpec.FS/FormSpec.js";
+import { FSharpResult$2_$union, FSharpResult$2_Ok } from "@fable-org/fable-library-js/Result.js";
+import { IPluginValueConverter } from "../../../FormSpec.FS/PluginInterface.js";
+import { Helpers_combineClasses } from "../../../fable_modules/Feliz.Bulma.3.0.0/ElementBuilders.fs.js";
+import { RenderPreviewProps$1 } from "../../../FormSpec.FS/Interfaces.js";
+import { now, toString } from "@fable-org/fable-library-js/Date.js";
+import { FieldDetails } from "../../../FormSpec.FS/Designer.js";
+
+export class SignatureField_Attributes extends Record implements IEquatable<SignatureField_Attributes>, IComparable<SignatureField_Attributes>, IAttributes {
+    readonly FieldId: string;
+    readonly Label: string;
+    constructor(FieldId: string, Label: string) {
+        super();
+        this.FieldId = FieldId;
+        this.Label = Label;
+    }
+    GetFieldId(): string {
+        const this$: SignatureField_Attributes = this;
+        return this$.FieldId;
+    }
+}
+
+export function SignatureField_Attributes_$reflection(): TypeInfo {
+    return record_type("Fable.Form.Simple.Bulma.Fields.SignatureField.SignatureField.Attributes", [], SignatureField_Attributes, () => [["FieldId", string_type], ["Label", string_type]]);
+}
+
+export function SignatureField_form<Values, Field, Output>(): ((arg0: ((arg0: Field$3<SignatureField_Attributes, string, Values>) => Field)) => ((arg0: FieldConfig$4<SignatureField_Attributes, string, Values, Output>) => Form$3<Values, Output, Field>)) {
+    return (build: ((arg0: Field$3<SignatureField_Attributes, string, Values>) => Field)): ((arg0: FieldConfig$4<SignatureField_Attributes, string, Values, Output>) => Form$3<Values, Output, Field>) => ((config: FieldConfig$4<SignatureField_Attributes, string, Values, Output>): Form$3<Values, Output, Field> => field_1<string, SignatureField_Attributes, Values, Field, Output>(isNullOrEmpty, build, config));
+}
+
+export function SignatureField_SignatureFieldComponent(config: StandardRenderFieldConfig$2<string, SignatureField_Attributes>): ReactElement {
+    let children: Iterable<ReactElement>, properties_2: FSharpList<ISignaturePadProperty>;
+    const signaturePadRef: IRefValue$1<Option<any>> = reactApi.useRef(undefined);
+    const timerRef: IRefValue$1<Option<any>> = reactApi.useRef(undefined);
+    useEffectWithDeps((): IDisposable => {
+        const timerId: int32 = setInterval((): void => {
+            const matchValue: Option<any> = signaturePadRef.current;
+            if (matchValue == null) {
+            }
+            else {
+                const pad: any = value_22(matchValue);
+                try {
+                    if (!pad.isEmpty()) {
+                        config.OnChange(pad.toDataURL());
+                    }
+                }
+                catch (ex: any) {
+                    console.error(some("Error capturing signature:"), ex);
+                }
+            }
+        }, 1000) | 0;
+        timerRef.current = some(timerId);
+        return {
+            Dispose(): void {
+                const matchValue_1: Option<any> = timerRef.current;
+                if (matchValue_1 == null) {
+                }
+                else {
+                    clearInterval(value_22(matchValue_1));
+                }
+            },
+        };
+    }, [config.OnChange]);
+    const dependencies_1: any[] = [config.Value];
+    reactApi.useEffect((): void => {
+        const matchValue_2: Option<any> = signaturePadRef.current;
+        if (matchValue_2 == null) {
+        }
+        else {
+            const signaturePad: any = value_22(matchValue_2);
+            try {
+                signaturePad.clear();
+                if (!isNullOrWhiteSpace(config.Value)) {
+                    signaturePad.fromDataURL(config.Value);
+                }
+            }
+            catch (ex_1: any) {
+                console.error(some("Error setting signature data:"), ex_1);
+            }
+        }
+    }, dependencies_1);
+    return withLabelAndError(config.Attributes.Label, config.ShowError, config.Error, (children = [(properties_2 = ofArray([["ref", signaturePadRef] as [string, any], ["redrawOnResize", true] as [string, any], ["canvasProps", {
+        style: createObj(toList<IStyleAttribute>(delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["margin", "auto"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["display", "block"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["borderRadius", 5 + "px"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => append<IStyleAttribute>(singleton<IStyleAttribute>(["border", (((1 + "px ") + "solid") + " ") + "hsl(0, 0%, 86%)"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => ((config.Disabled ? true : config.IsReadOnly) ? append<IStyleAttribute>(singleton<IStyleAttribute>(["backgroundColor", "hsl(0, 0%, 96%)"] as [string, any]), delay<IStyleAttribute>((): Iterable<IStyleAttribute> => singleton<IStyleAttribute>(["pointerEvents", "none"] as [string, any]))) : empty<IStyleAttribute>())))))))))))),
+    }] as [string, any], ["height", 200] as [string, any], ["width", 600] as [string, any]]), reactApi_1.createElement(react_signature_pad_wrapper, createObj(properties_2)))], createElement<any>("div", {
+        className: "control",
+        children: reactApi.Children.toArray(Array.from(children)),
+    })));
+}
+
+export class SignatureField_Field$1<Values> extends IStandardField$3<Values, string, SignatureField_Attributes> implements IField$1<Values> {
+    readonly innerField_1: Field$3<SignatureField_Attributes, string, Values>;
+    constructor(innerField: Field$3<SignatureField_Attributes, string, Values>) {
+        super(innerField);
+        this.innerField_1 = innerField;
+    }
+    "Fable.Form.Simple.Bulma.IStandardField`3.RenderFieldZ43FEF6DC"(config: StandardRenderFieldConfig$2<string, SignatureField_Attributes>): ReactElement {
+        return createElement(SignatureField_SignatureFieldComponent, config);
+    }
+    MapFieldValues<NewValues>(update: ((arg0: Values) => $a)): IField$1<$a> {
+        const _: SignatureField_Field$1<Values> = this;
+        return SignatureField_Field$1_$ctor_Z4A53DCC7<$a>(mapValues<Values, $a, SignatureField_Attributes, string>(update, _.innerField_1));
+    }
+}
+
+export function SignatureField_Field$1_$reflection(gen0: TypeInfo): TypeInfo {
+    return class_type("Fable.Form.Simple.Bulma.Fields.SignatureField.SignatureField.Field`1", [gen0], SignatureField_Field$1, IStandardField$3_$reflection(gen0, string_type, SignatureField_Attributes_$reflection()));
+}
+
+export function SignatureField_Field$1_$ctor_Z4A53DCC7<Values>(innerField: Field$3<SignatureField_Attributes, string, Values>): SignatureField_Field$1<Values> {
+    return new SignatureField_Field$1(innerField);
+}
+
+export function Form_signatureField<Values, Output>(config: FieldConfig$4<SignatureField_Attributes, string, Values, Output>): Form$3<Values, Output, IField$1<Values>> {
+    return SignatureField_form<Values, IField$1<Values>, Output>()(SignatureField_Field$1_$ctor_Z4A53DCC7)(config);
+}
+
+export const Form_pluginConfig: Spec_PluginFieldConfig = new Spec_PluginFieldConfig("Fable.Form.Simple.Bulma.Fields.SignatureField");
+
+export const Form_signatureConverter: IPluginValueConverter = (() => {
+    const valueKey: Shared_PluginPropertyKey = new Shared_PluginPropertyKey("b2b2b2b2-3333-4444-5555-666666666666");
+    const valueMeta = (v: Option<string>): Shared_PluginDataProperty => (new Shared_PluginDataProperty(valueKey, "value", "string", defaultArg<string>(v, ""), "Signature Data", undefined, "Digital signature data URL"));
+    return new IPluginValueConverter((fieldKey: Shared_FieldKey, v_1: any): Option<Shared_FieldValue_$union> => Shared_FieldValue_Single(new Shared_FieldAnswer(fieldKey, "", v_1)), (fv: Shared_FieldValue_$union): Option<any> => ((fv.tag === /* Single */ 0) ? some(fv.fields[0].Value) : undefined), (): Option<FSharpList<Shared_FieldOption>> => undefined, (): FSharpList<string> => singleton_1("value"), (n: string): Option<Shared_PluginDataProperty> => ((n === "value") ? valueMeta(undefined) : undefined), (k: Shared_PluginPropertyKey): Option<Shared_PluginDataProperty> => (equals(k, valueKey) ? valueMeta(undefined) : undefined), (n_1: string, fv_1: Shared_FieldValue_$union): Option<Shared_PluginDataProperty> => {
+        let a_1: Shared_FieldAnswer, a_2: Shared_FieldAnswer;
+        return (fv_1.tag === /* Single */ 0) ? (((a_1 = fv_1.fields[0], n_1 === "value")) ? ((a_2 = fv_1.fields[0], valueMeta(a_2.Value))) : undefined) : undefined;
+    }, (k_1: Shared_PluginPropertyKey, fv_2: Shared_FieldValue_$union): Option<Shared_PluginDataProperty> => {
+        let a_3: Shared_FieldAnswer, a_4: Shared_FieldAnswer;
+        return (fv_2.tag === /* Single */ 0) ? (((a_3 = fv_2.fields[0], equals(k_1, valueKey))) ? ((a_4 = fv_2.fields[0], valueMeta(a_4.Value))) : undefined) : undefined;
+    }, (_arg: string, _arg_1: string): FSharpResult$2_$union<void, string> => FSharpResult$2_Ok<void, string>(undefined), (fv_3: Shared_FieldValue_$union): FSharpList<Shared_PluginDataProperty> => ((fv_3.tag === /* Single */ 0) ? singleton_1(valueMeta(fv_3.fields[0].Value)) : empty_1<Shared_PluginDataProperty>()));
+})();
+
+export function Form_designerPreview(props: RenderPreviewProps$1<Spec_FieldType_$union>): ReactElement {
+    const children: Iterable<ReactElement> = [createElement<any>("input", createObj(cons(["type", "text"] as [string, any], Helpers_combineClasses("input", ofArray([["readOnly", true] as [string, any], ["placeholder", "✍️ Signature Pad Preview"] as [string, any], ["style", {
+        border: (((1 + "px ") + "dashed") + " ") + "hsl(0, 0%, 86%)",
+        backgroundColor: "hsl(0, 0%, 98%)",
+        textAlign: "center",
+        padding: 20,
+    }] as [string, any]]))))), createElement<any>("div", {
+        style: {
+            fontSize: 12 + "px",
+            color: "hsl(0, 0%, 60%)",
+            textAlign: "center",
+            marginTop: 5,
+        },
+        children: "✍️ Digital signature drawing area",
+    })];
+    return createElement<any>("div", {
+        className: "control",
+        children: reactApi.Children.toArray(Array.from(children)),
+    });
+}
+
+export function Form_markdownRenderer(field: Spec_FormField$1<Spec_FieldType_$union>, fieldDetails: FieldDetails): string {
+    let value: string;
+    const matchValue: Shared_FieldValue_$union = fieldDetails.FieldValue;
+    value = ((matchValue.tag === /* Single */ 0) ? matchValue.fields[0].Value : "");
+    if (isNullOrWhiteSpace(value)) {
+        return `**${field.Label}:** ❌ *[No signature provided]*`;
+    }
+    else {
+        return join("\n", [`**${field.Label}** ✍️`, "", "| Status | Details |", "|--------|---------|", "| **Signature** | ✅ **Captured** |", `| **Timestamp** | ${toString(now(), "yyyy-MM-dd HH:mm")} |`, `| **Data Size** | ${value.length} characters |`, "| **Format** | Digital signature |", "", "> 🔒 *Digital signature has been securely captured and stored*", ">", "> 📋 *This signature serves as electronic consent and acknowledgment*"]);
+    }
+}
+
+//# sourceMappingURL=SignatureField.ts.map