@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/field_request/Form.js

@@ -0,0 +1,87 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { ArrowRightIcon } from "../../images/icons.js";
+import { Button } from "../shared/Button.js";
+import { ComposerForm } from "../shared/ComposerForm.js";
+import { FieldComponents } from "./FieldComponents.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+const Form = (param)=>{
+    let { message, rootStore } = param;
+    const { displayMode, fieldRequestStore, translationStore } = rootStore;
+    const { t } = translationStore;
+    const store = fieldRequestStore.value;
+    if (!store) {
+        return null;
+    }
+    const FieldComponent = FieldComponents[message.fieldType];
+    const isMinimized = displayMode.minimized.value;
+    const barebone = message.fieldType === "picklist" || message.fieldType === "multi_picklist";
+    const handleSubmit = async (e)=>{
+        // Prevent page navigation/reload when submitting the form
+        e.preventDefault();
+        await (store == null ? void 0 : store.submit());
+    };
+    const errorId = "field-error-" + message.id;
+    return /*#__PURE__*/ jsxRuntime_module_u(ComposerForm, {
+        "data-component-name": "FieldRequest.FormContainer",
+        onSubmit: handleSubmit,
+        displayMode: displayMode,
+        barebone: barebone,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(InputRow, {
+                "data-component-name": "FieldRequest.InputRow",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(FieldComponent, {
+                        fieldRequestStore: store,
+                        message: message,
+                        autoFocus: !isMinimized,
+                        t: t
+                    }),
+                    !barebone && /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                        variant: "primary",
+                        size: "sm",
+                        iconOnly: true,
+                        type: "submit",
+                        disabled: store == null ? void 0 : store.submitDisabled.value,
+                        "aria-label": t("fieldRequest.submitResponse"),
+                        children: /*#__PURE__*/ jsxRuntime_module_u(ArrowRightIcon, {})
+                    })
+                ]
+            }),
+            (store.validation.value.error || store.submitError.value) && /*#__PURE__*/ jsxRuntime_module_u(ErrorContainer, {
+                "data-component-name": "FieldRequest.ErrorContainer",
+                id: errorId,
+                role: "alert",
+                children: store.validation.value.error || store.submitError.value
+            })
+        ]
+    });
+};
+/* export default */ const field_request_Form = (Form);
+const InputRow = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$sm",
+        width: "[100%]"
+    }
+});
+InputRow.displayName = "InputRow";
+const ErrorContainer = styled("div", {
+    base: {
+        color: "$text.error",
+        fontSize: "12px",
+        lineHeight: "16px"
+    }
+});
+ErrorContainer.displayName = "ErrorContainer";
+
+export { Form };
+export default field_request_Form;

package/widget/multimodal_v2/components/field_request/MultiPicklistField.js

@@ -0,0 +1,240 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { hooks_module_y, hooks_module_d, jsxRuntime_module_u, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import "../../../utils/native_globals.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+/* provided dependency */ var cancelAnimationFrame = __webpack_require__(68034).pP;
+
+/** @jsxImportSource preact */ 
+
+const MultiPicklistField = (param)=>{
+    let { fieldRequestStore, message, onFocus, autoFocus, t } = param;
+    var _message_fieldValues;
+    const [optionsEntered, setOptionsEntered] = hooks_module_d(false);
+    const [continueEntered, setContinueEntered] = hooks_module_d(false);
+    const continueWasVisible = hooks_module_A(false);
+    hooks_module_y(()=>{
+        const animationFrame = requestAnimationFrame(()=>{
+            setOptionsEntered(true);
+        });
+        return ()=>cancelAnimationFrame(animationFrame);
+    }, []);
+    const selectedValues = fieldRequestStore.selectedFieldValues.value;
+    const selectedCount = selectedValues.length;
+    const continueText = t("fieldRequest.continueSelection") || "Continue";
+    const showContinueButton = selectedCount > 0;
+    const errorId = "field-error-" + message.id;
+    hooks_module_y(()=>{
+        const isVisible = selectedCount > 0;
+        let animationFrame = null;
+        if (isVisible && !continueWasVisible.current) {
+            setContinueEntered(false);
+            animationFrame = requestAnimationFrame(()=>{
+                setContinueEntered(true);
+            });
+        }
+        if (!isVisible) {
+            setContinueEntered(false);
+        }
+        continueWasVisible.current = isVisible;
+        return ()=>{
+            if (animationFrame) {
+                cancelAnimationFrame(animationFrame);
+            }
+        };
+    }, [
+        selectedCount
+    ]);
+    const handleFocus = (e)=>{
+        // Keep focus handling local to the field request UI and avoid bubbling to parent forms.
+        e.stopPropagation();
+        onFocus == null ? void 0 : onFocus();
+    };
+    const handleSubmit = async ()=>{
+        await fieldRequestStore.submit();
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "MultiPicklistField.Container",
+        role: "group",
+        "aria-label": message.inputFieldLabel,
+        "aria-describedby": fieldRequestStore.validation.value.error ? errorId : undefined,
+        children: [
+            (_message_fieldValues = message.fieldValues) == null ? void 0 : _message_fieldValues.map((option, index)=>{
+                const selected = selectedValues.includes(option.value);
+                return /*#__PURE__*/ jsxRuntime_module_u(OptionRow, {
+                    type: "button",
+                    role: "checkbox",
+                    "aria-checked": selected,
+                    onClick: ()=>fieldRequestStore.toggleMultiPicklistValue(option.value),
+                    onFocus: handleFocus,
+                    autoFocus: autoFocus && index === 0,
+                    selected: selected,
+                    entered: optionsEntered,
+                    style: {
+                        transitionDelay: "" + index * 0.1 + "s"
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxRuntime_module_u(SelectionIndicator, {
+                            "aria-hidden": true,
+                            selected: selected
+                        }),
+                        /*#__PURE__*/ jsxRuntime_module_u(OptionLabel, {
+                            children: option.label
+                        })
+                    ]
+                }, option.value);
+            }),
+            showContinueButton && /*#__PURE__*/ jsxRuntime_module_u(SubmitContainer, {
+                entered: continueEntered,
+                children: /*#__PURE__*/ jsxRuntime_module_u(ContinueButton, {
+                    type: "button",
+                    onClick: handleSubmit,
+                    disabled: fieldRequestStore.submitDisabled.value,
+                    "aria-label": continueText,
+                    children: continueText
+                })
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        width: "[100%]",
+        display: "flex",
+        flexDirection: "column",
+        gap: "$sm",
+        marginTop: "$sm"
+    }
+});
+Container.displayName = "Container";
+const OptionRow = styled("button", {
+    base: {
+        width: "[100%]",
+        display: "flex",
+        alignItems: "center",
+        gap: "$md",
+        paddingInline: "[12px]",
+        paddingBlock: "[10px]",
+        borderRadius: "[6px]",
+        border: "[1px solid #C8CED0]",
+        backgroundColor: "$white.solid",
+        color: "$text.dark",
+        fontFamily: "$inter",
+        fontSize: "14px",
+        lineHeight: "22px",
+        fontWeight: "$normal",
+        textAlign: "left",
+        cursor: "pointer",
+        transition: "all 0.15s ease-in-out",
+        "&:is(:hover, :focus-visible)": {
+            borderColor: "$button.borderColor"
+        },
+        "&:focus-visible": {
+            outline: "2px solid token(colors.$button.borderColor)",
+            outlineOffset: "1px"
+        }
+    },
+    variants: {
+        selected: {
+            true: {
+                borderColor: "$button.borderColor"
+            }
+        },
+        entered: {
+            true: {
+                opacity: 1,
+                transform: "translateY(0px)"
+            },
+            false: {
+                opacity: 0,
+                transform: "translateY(4px)"
+            }
+        }
+    },
+    defaultVariants: {
+        entered: false
+    }
+});
+OptionRow.displayName = "OptionRow";
+const SelectionIndicator = styled("span", {
+    base: {
+        width: "[14px]",
+        height: "[14px]",
+        borderRadius: "[4px]",
+        display: "block",
+        flexShrink: 0
+    },
+    variants: {
+        selected: {
+            true: {
+                border: "none",
+                backgroundColor: "$button.backgroundColor"
+            },
+            false: {
+                border: "[1.5px solid #D7DDE2]",
+                backgroundColor: "$transparent"
+            }
+        }
+    }
+});
+SelectionIndicator.displayName = "SelectionIndicator";
+const OptionLabel = styled("span", {
+    base: {
+        flexGrow: 1,
+        minWidth: "[0px]"
+    }
+});
+OptionLabel.displayName = "OptionLabel";
+const SubmitContainer = styled("div", {
+    base: {
+        marginTop: "$md",
+        transition: "opacity 200ms ease-out, transform 200ms ease-out"
+    },
+    variants: {
+        entered: {
+            true: {
+                opacity: 1,
+                transform: "translateY(0px)"
+            },
+            false: {
+                opacity: 0,
+                transform: "translateY(8px)"
+            }
+        }
+    },
+    defaultVariants: {
+        entered: false
+    }
+});
+SubmitContainer.displayName = "SubmitContainer";
+const ContinueButton = styled("button", {
+    base: {
+        width: "[100%]",
+        border: "none",
+        borderRadius: "[6px]",
+        backgroundColor: "$button.backgroundColor",
+        color: "$button.textColor",
+        fontFamily: "$inter",
+        fontSize: "14px",
+        lineHeight: "22px",
+        fontWeight: "$normal",
+        paddingBlock: "[10px]",
+        cursor: "pointer",
+        transition: "opacity 0.15s ease-in-out",
+        "&:is(:hover, :focus-visible):not(:disabled)": {
+            opacity: 0.9
+        },
+        "&:disabled": {
+            backgroundColor: "[#E6E9EC]",
+            color: "[#8A9394]",
+            cursor: "not-allowed",
+            opacity: 1
+        }
+    }
+});
+ContinueButton.displayName = "ContinueButton";
+/* export default */ const field_request_MultiPicklistField = (MultiPicklistField);
+
+export default field_request_MultiPicklistField;

package/widget/multimodal_v2/components/field_request/PicklistField.js

@@ -0,0 +1,166 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { Button } from "../shared/Button.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+
+const PicklistField = (param)=>{
+    let { fieldRequestStore, message, onFocus, autoFocus, t } = param;
+    // TODO: Get renderStyle from backend when supported
+    const renderStyle = "chips";
+    const fieldValues = message.fieldValues;
+    if (renderStyle === "chips") {
+        return /*#__PURE__*/ jsxRuntime_module_u(PicklistChips, {
+            fieldRequestStore: fieldRequestStore,
+            message: message,
+            fieldValues: fieldValues,
+            onFocus: onFocus,
+            autoFocus: autoFocus
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime_module_u(PicklistDropdown, {
+        fieldRequestStore: fieldRequestStore,
+        message: message,
+        fieldValues: fieldValues,
+        onFocus: onFocus,
+        autoFocus: autoFocus,
+        t: t
+    });
+};
+const PicklistDropdown = (param)=>{
+    let { fieldRequestStore, message, fieldValues, onFocus, autoFocus, t } = param;
+    const handleChange = (e)=>{
+        fieldRequestStore.setFieldValue(e.currentTarget.value);
+    };
+    const handleFocus = (e)=>{
+        // Prevent the focus event from bubbling up to the parent form
+        e.stopPropagation();
+        onFocus == null ? void 0 : onFocus();
+    };
+    const placeholder = message.placeholder || (t ? t("fieldRequest.selectOption") : "Select an option");
+    const errorId = "field-error-" + message.id;
+    return /*#__PURE__*/ jsxRuntime_module_u(Select, {
+        "data-component-name": "PicklistField.Select",
+        id: "picklist-field-" + message.id,
+        value: fieldRequestStore.fieldValue.value,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        disabled: false,
+        autoFocus: autoFocus,
+        "aria-label": message.inputFieldLabel,
+        "aria-invalid": !fieldRequestStore.validation.value.isValid,
+        "aria-describedby": fieldRequestStore.validation.value.error ? errorId : undefined,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u("option", {
+                value: "",
+                disabled: true,
+                children: placeholder
+            }),
+            fieldValues == null ? void 0 : fieldValues.map((option)=>/*#__PURE__*/ jsxRuntime_module_u("option", {
+                    value: option.value,
+                    children: option.label
+                }, option.value))
+        ]
+    });
+};
+const PicklistChips = (param)=>{
+    let { fieldRequestStore, message, fieldValues } = param;
+    var _ref, _ref1;
+    var _message_layout, _message_layout1;
+    const handleSelect = async (value)=>{
+        fieldRequestStore.setFieldValue(value);
+        // Auto-submit when a chip is clicked - error handling is in submit()
+        await fieldRequestStore.submit();
+    };
+    const errorId = "field-error-" + message.id;
+    const selectedValue = fieldRequestStore.fieldValue.value;
+    const isStacked = (_ref = (_message_layout = message.layout) == null ? void 0 : _message_layout.stacked) != null ? _ref : false;
+    const isExpanded = isStacked && ((_ref1 = (_message_layout1 = message.layout) == null ? void 0 : _message_layout1.expand) != null ? _ref1 : false);
+    const disabled = fieldRequestStore.submitting.value;
+    return /*#__PURE__*/ jsxRuntime_module_u(ChipsContainer, {
+        "data-component-name": "PicklistField.ChipsContainer",
+        role: "radiogroup",
+        "aria-label": message.inputFieldLabel,
+        "aria-invalid": !fieldRequestStore.validation.value.isValid,
+        "aria-describedby": fieldRequestStore.validation.value.error ? errorId : undefined,
+        stacked: isStacked,
+        expanded: isExpanded,
+        children: fieldValues == null ? void 0 : fieldValues.map((option)=>/*#__PURE__*/ jsxRuntime_module_u(Button, {
+                variant: "primary",
+                size: "md",
+                role: "radio",
+                "aria-checked": selectedValue === option.value,
+                onClick: ()=>handleSelect(option.value),
+                fullWidth: isExpanded,
+                disabled: disabled,
+                children: option.label
+            }, option.value))
+    });
+};
+const Select = styled("select", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.secondary",
+        outline: "none",
+        border: "none",
+        backgroundColor: "$transparent",
+        flexGrow: 1,
+        cursor: "pointer",
+        "&:disabled": {
+            opacity: 0.6,
+            cursor: "not-allowed"
+        }
+    }
+});
+Select.displayName = "Select";
+const ChipsContainer = styled("div", {
+    base: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "$sm",
+        alignItems: "flex-start",
+        justifyContent: "flex-end",
+        flexGrow: 1,
+        "& button": {
+            flexShrink: 1,
+            whiteSpace: "normal",
+            maxWidth: "[100%]",
+            height: "[auto]",
+            minHeight: "[32px]",
+            textAlign: "left",
+            justifyContent: "flex-start"
+        }
+    },
+    variants: {
+        stacked: {
+            true: {
+                flexDirection: "column",
+                alignItems: "flex-end"
+            }
+        },
+        expanded: {
+            true: {}
+        }
+    },
+    compoundVariants: [
+        {
+            stacked: true,
+            expanded: true,
+            css: {
+                alignItems: "stretch",
+                "& button": {
+                    textAlign: "center",
+                    justifyContent: "center"
+                }
+            }
+        }
+    ]
+});
+ChipsContainer.displayName = "ChipsContainer";
+/* export default */ const field_request_PicklistField = (PicklistField);
+
+export default field_request_PicklistField;

package/widget/multimodal_v2/components/field_request/SingleLineInputField.js

@@ -0,0 +1,69 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+const SingleLineInputField = (param)=>{
+    let { fieldRequestStore, message, inputType, autoComplete, placeholderKey, ariaLabelKey, onFocus, autoFocus, t } = param;
+    const handleChange = (e)=>{
+        fieldRequestStore.setFieldValue(e.currentTarget.value);
+    };
+    const handleSubmit = async ()=>{
+        // Error handling is in submit()
+        await fieldRequestStore.submit();
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === "Enter" && !fieldRequestStore.submitDisabled.value) {
+            // Prevent form submission on Enter key press
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    const handleFocus = (e)=>{
+        // Prevent the focus event from bubbling up to the parent form
+        e.stopPropagation();
+        onFocus == null ? void 0 : onFocus();
+    };
+    // Cast keys to expected type since they come from message config
+    const placeholder = message.placeholder || t(placeholderKey);
+    const ariaLabel = t(ariaLabelKey);
+    const fieldId = message.fieldType + "-field-" + message.id;
+    const errorId = "field-error-" + message.id;
+    return /*#__PURE__*/ jsxRuntime_module_u(Input, {
+        "data-component-name": "SingleLineInputField.Input",
+        id: fieldId,
+        type: inputType,
+        step: inputType === "number" ? "any" : undefined,
+        value: fieldRequestStore.fieldValue.value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        placeholder: placeholder,
+        autoComplete: autoComplete,
+        autoFocus: autoFocus,
+        "aria-label": ariaLabel,
+        "aria-invalid": !fieldRequestStore.validation.value.isValid,
+        "aria-describedby": fieldRequestStore.validation.value.error ? errorId : undefined
+    });
+};
+const Input = styled("input", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.secondary",
+        outline: "none",
+        border: "none",
+        resize: "none",
+        backgroundColor: "$transparent",
+        flexGrow: 1,
+        "&::placeholder": {
+            color: "$text.secondary"
+        }
+    }
+});
+Input.displayName = "Input";
+/* export default */ const field_request_SingleLineInputField = (SingleLineInputField);
+
+export default field_request_SingleLineInputField;

package/widget/multimodal_v2/components/field_request/TextField.js

@@ -0,0 +1,37 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { TextArea } from "../shared/controls/TextArea.js";
+
+
+
+const TextField = (param)=>{
+    let { fieldRequestStore, message, onFocus, autoFocus, t } = param;
+    const handleChange = (value)=>{
+        fieldRequestStore.setFieldValue(value);
+    };
+    const handleSubmit = async ()=>{
+        await fieldRequestStore.submit();
+    };
+    const handleFocus = (e)=>{
+        // Prevent the focus event from bubbling up to the parent form
+        e.stopPropagation();
+        onFocus == null ? void 0 : onFocus();
+    };
+    const placeholder = message.placeholder || t("fieldRequest.enterYourResponse");
+    const errorId = "field-error-" + message.id;
+    return /*#__PURE__*/ jsxRuntime_module_u(TextArea, {
+        id: "text-field-" + message.id,
+        value: fieldRequestStore.fieldValue,
+        onChange: handleChange,
+        onSubmit: handleSubmit,
+        onFocus: handleFocus,
+        placeholder: placeholder,
+        disabled: false,
+        autoFocus: autoFocus,
+        "aria-label": message.inputFieldLabel,
+        "aria-invalid": !fieldRequestStore.validation.value.isValid,
+        "aria-describedby": fieldRequestStore.validation.value.error ? errorId : undefined
+    });
+};
+/* export default */ const field_request_TextField = (TextField);
+
+export default field_request_TextField;