@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/shared/Button.js

@@ -0,0 +1,245 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { useLocalization } from "../helpers/Localization.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+const Button = (_0)=>{
+    let { variant = "primary", size = "md", iconOnly = false, hidden = false, disabled = false, type = "button", fullWidth = false, visualOnly = false, css, title, ariaLabel, children } = _0, props = _object_without_properties_loose(_0, [
+        "variant",
+        "size",
+        "iconOnly",
+        "hidden",
+        "disabled",
+        "type",
+        "fullWidth",
+        "visualOnly",
+        "css",
+        "title",
+        "ariaLabel",
+        "children"
+    ]);
+    const resolvedTitle = useLocalization(title);
+    const resolvedAriaLabel = useLocalization(ariaLabel);
+    return /*#__PURE__*/ jsxRuntime_module_u(StyledButton, _extends({
+        "data-component-name": "Button.StyledButton",
+        type: type,
+        variant: variant,
+        size: size,
+        iconOnly: iconOnly,
+        hidden: hidden,
+        disabled: disabled,
+        fullWidth: fullWidth,
+        visualOnly: visualOnly,
+        css: css,
+        title: resolvedTitle,
+        "aria-label": resolvedAriaLabel,
+        "aria-hidden": visualOnly ? true : undefined,
+        tabIndex: visualOnly ? -1 : 0
+    }, props, {
+        children: children
+    }));
+};
+const StyledButton = styled("button", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: "$inter",
+        cursor: "pointer",
+        border: "none",
+        outline: "none",
+        flexShrink: 0,
+        gap: "$sm",
+        whiteSpace: "nowrap",
+        transition: "all 0.15s ease-in-out",
+        position: "relative",
+        "&:focus-visible": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "-2px"
+        },
+        "&:disabled": {
+            cursor: "not-allowed"
+        },
+        _touchDevice: {
+            "&::before": {
+                content: "''",
+                position: "absolute",
+                top: "[50%]",
+                left: "[50%]",
+                transform: "translate(-50%, -50%)",
+                minWidth: "[40px]",
+                minHeight: "[40px]"
+            }
+        }
+    },
+    variants: {
+        variant: {
+            primary: {
+                border: "[1px solid token(colors.$button.borderColor)]",
+                borderRadius: "$button",
+                background: "[linear-gradient(token(colors.$button.backgroundColor), token(colors.$button.backgroundColor)) var(--q-button-background-layer, #ffffff)]",
+                color: "$button.textColor",
+                fontWeight: "$normal",
+                "&:is(:hover, :focus-visible):not(:disabled)": {
+                    background: "[linear-gradient(token(colors.$button.hoverBackgroundColor), token(colors.$button.hoverBackgroundColor)) var(--q-button-hover-background-layer, #ffffff)]",
+                    color: "$button.hoverTextColor",
+                    borderColor: "$button.hoverBorderColor"
+                },
+                "&:disabled": {
+                    background: "[#E6E9EC]",
+                    color: "[#8A9394]",
+                    borderColor: "$transparent"
+                }
+            },
+            minimal: {
+                background: "$transparent",
+                color: "$text.dark",
+                borderRadius: "[4px]",
+                "&:is(:hover, :focus-visible):not(:disabled)": {
+                    background: "[#E6E9EC]"
+                }
+            },
+            /**
+       * A text button that answers on hover with its label rather than a fill,
+       * for the secondary action standing next to a filled primary one.
+       *
+       * Neutral rather than action-coloured, which is where this departs from
+       * Quartz's tertiary. The booker wears the customer's theme, so a brand
+       * Cancel would compete with the filled Continue for the eye and would read
+       * differently against every palette we are given. Grey asks nothing of the
+       * palette and recedes from the primary in all of them.
+       */ tertiary: {
+                background: "$transparent",
+                color: "$text.secondary",
+                borderRadius: "[4px]",
+                "&:is(:hover, :focus-visible):not(:disabled)": {
+                    color: "$text.dark"
+                }
+            }
+        },
+        size: {
+            xs: {
+                height: "[20px]",
+                paddingInline: "$xs",
+                paddingBlock: "$2xs",
+                fontSize: "[10px]",
+                lineHeight: "[14px]"
+            },
+            sm: {
+                height: "[24px]",
+                paddingInline: "$sm",
+                paddingBlock: "$xs",
+                fontSize: "[12px]",
+                lineHeight: "[18px]"
+            },
+            md: {
+                height: "[32px]",
+                paddingInline: "$lg",
+                paddingBlock: "$sm",
+                fontSize: "[14px]",
+                lineHeight: "[22px]"
+            }
+        },
+        hidden: {
+            true: {
+                display: "none"
+            }
+        },
+        iconOnly: {
+            true: {
+                padding: "$none"
+            }
+        },
+        fullWidth: {
+            true: {
+                width: "[100%]"
+            }
+        },
+        visualOnly: {
+            true: {
+                pointerEvents: "none"
+            }
+        }
+    },
+    compoundVariants: [
+        // iconOnly + xs (14px container, max 14px icon)
+        {
+            iconOnly: true,
+            size: "xs",
+            css: {
+                minWidth: "[14px]",
+                height: "[14px]",
+                paddingInline: "[0px]",
+                "& svg": {
+                    maxWidth: "[14px]",
+                    maxHeight: "[14px]"
+                }
+            }
+        },
+        // iconOnly + sm (24px container, 20px icon)
+        {
+            iconOnly: true,
+            size: "sm",
+            css: {
+                minWidth: "[24px]",
+                height: "[24px]",
+                paddingInline: "[2px]",
+                "& svg": {
+                    width: "[20px]",
+                    height: "[20px]"
+                }
+            }
+        },
+        // iconOnly + md (32px container, 24px icon)
+        {
+            iconOnly: true,
+            size: "md",
+            css: {
+                minWidth: "[32px]",
+                height: "[32px]",
+                paddingInline: "[4px]",
+                "& svg": {
+                    width: "[24px]",
+                    height: "[24px]"
+                }
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: "primary",
+        size: "md"
+    }
+});
+StyledButton.displayName = "StyledButton";
+/* export default */ const shared_Button = (Button);
+
+export { Button };
+export default shared_Button;

package/widget/multimodal_v2/components/shared/ButtonGroup.js

@@ -0,0 +1,133 @@
+import { jsxRuntime_module_u, signals_module_useSignal } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { Button } from "./Button.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+const ButtonGroup = (param)=>{
+    let { items, onClick, disabled, size = "sm", stacked = false, css, dismissOnClick = false } = param;
+    const dismissedIds = signals_module_useSignal(new Set());
+    const handleClick = (item)=>{
+        if (dismissOnClick && item.id) {
+            dismissedIds.value = new Set([
+                ...dismissedIds.value,
+                item.id
+            ]);
+        }
+        onClick(item);
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u(ButtonGroupContainer, {
+        "data-component-name": "ButtonGroup.ButtonGroupContainer",
+        stacked: stacked,
+        css: css,
+        children: items.value.map((item, index)=>{
+            var _item_id;
+            const id = (_item_id = item.id) != null ? _item_id : String(index);
+            const isDismissed = dismissedIds.value.has(id);
+            return /*#__PURE__*/ jsxRuntime_module_u(DismissableWrapper, {
+                dismissed: isDismissed,
+                children: /*#__PURE__*/ jsxRuntime_module_u(ButtonGroupButton, {
+                    item: item,
+                    onClick: handleClick,
+                    disabled: disabled,
+                    size: size,
+                    stacked: stacked
+                })
+            }, id);
+        })
+    });
+};
+const CtaButton = styled(Button, {
+    base: {
+        whiteSpace: "normal",
+        overflowWrap: "break-word",
+        wordBreak: "normal",
+        hyphens: "auto",
+        overflow: "hidden",
+        height: "$auto!",
+        minHeight: "[24px]",
+        flexShrink: 1
+    },
+    variants: {
+        stacked: {
+            true: {
+                minWidth: "[0]",
+                width: "[100%]",
+                maxWidth: "[100%]",
+                fontSize: "[13px]"
+            },
+            false: {
+                textAlign: "left"
+            }
+        }
+    },
+    defaultVariants: {
+        stacked: false
+    }
+});
+CtaButton.displayName = "CtaButton";
+const ButtonGroupButton = (param)=>{
+    let { item, onClick, disabled, size, stacked } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(CtaButton, {
+        variant: "primary",
+        size: size,
+        stacked: stacked,
+        onClick: ()=>onClick(item),
+        disabled: disabled == null ? void 0 : disabled.value,
+        children: item.text
+    });
+};
+const DismissableWrapper = styled("div", {
+    base: {
+        display: "flex",
+        transition: "[opacity 0.2s ease-out, max-width 0.3s ease-out, max-height 0.3s ease-out, padding 0.3s ease-out]",
+        opacity: 1,
+        maxWidth: "[500px]",
+        maxHeight: "[200px]",
+        overflow: "hidden"
+    },
+    variants: {
+        dismissed: {
+            true: {
+                opacity: 0,
+                maxWidth: "[0px]",
+                maxHeight: "[0px]",
+                padding: "[0px]",
+                pointerEvents: "none"
+            }
+        }
+    }
+});
+DismissableWrapper.displayName = "DismissableWrapper";
+const ButtonGroupContainer = styled("div", {
+    base: {
+        display: "flex",
+        gap: "$xs",
+        minWidth: "[0]",
+        overflow: "hidden"
+    },
+    variants: {
+        stacked: {
+            true: {
+                flexDirection: "column"
+            },
+            false: {
+                flexDirection: "row",
+                flexWrap: "wrap",
+                alignItems: "flex-start"
+            }
+        }
+    },
+    defaultVariants: {
+        stacked: false
+    }
+});
+ButtonGroupContainer.displayName = "ButtonGroupContainer";
+/* export default */ const shared_ButtonGroup = ((/* unused pure expression or super */ null && (ButtonGroup)));
+
+var ButtonGroup_default = /* unused export */ undefined;
+export { ButtonGroup };
+export default ButtonGroup_default;

package/widget/multimodal_v2/components/shared/ComposerForm.js

@@ -0,0 +1,98 @@
+import "../../styled-system/jsx/index.js";
+import { DisplayMode as types_DisplayMode } from "../../types.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+// Reusable styled components for chat input forms
+const ComposerForm = styled("form", {
+    base: {
+        display: "grid",
+        gridTemplateAreas: '"textarea multimodal submit"',
+        gridTemplateColumns: "1fr auto auto",
+        gap: "$md",
+        padding: "$lg",
+        boxSizing: "border-box",
+        opacity: 1,
+        transition: "opacity 0.3s ease",
+        width: "[100%]",
+        "&:has(textarea:focus)": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "-2px"
+        },
+        "& [data-grid-area='multimodal']": {
+            marginLeft: "$md"
+        },
+        _mobile: {
+            padding: "$sm",
+            "& :is(textarea, input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='tel'], input[type='url'], input[type='search'], input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month'], input[type='week'], input[type='color'])": {
+                fontSize: "16px"
+            }
+        }
+    },
+    variants: {
+        displayMode: {
+            collapsed_center: {
+                "&:has(textarea:focus)": {
+                    outline: "none"
+                }
+            },
+            collapsed_right: {
+                gap: "$sm",
+                padding: "$md",
+                borderRadius: "[4px]",
+                outline: "1px solid rgba(200, 206, 208, 0.93)",
+                outlineOffset: "-1px",
+                boxShadow: "[0px 1px 3px 0px rgba(0, 0, 0, 0.06)]"
+            },
+            sidebar: {
+                borderRadius: "[4px]",
+                outline: "1px solid rgba(200, 206, 208, 0.93)",
+                outlineOffset: "-1px",
+                boxShadow: "[0px 1px 3px 0px rgba(0, 0, 0, 0.06)]"
+            },
+            docked: {
+                borderRadius: "[4px]",
+                outline: "1px solid rgba(200, 206, 208, 0.93)",
+                outlineOffset: "-1px",
+                boxShadow: "[0px 1px 3px 0px rgba(0, 0, 0, 0.06)]"
+            }
+        },
+        hasButtons: {
+            true: {
+                gridTemplateAreas: '\n          "textarea textarea textarea"\n          "buttons multimodal submit"\n        '
+            }
+        },
+        visuallyHidden: {
+            true: {
+                opacity: 0,
+                pointerEvents: "none",
+                visibility: "hidden",
+                cursor: "not-allowed"
+            }
+        },
+        barebone: {
+            true: {
+                display: "block",
+                padding: "$none",
+                outline: "none",
+                boxShadow: "$none",
+                "&:has(textarea:focus)": {
+                    outline: "none"
+                }
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            barebone: true,
+            displayMode: types_DisplayMode.COLLAPSED_CENTER,
+            css: {
+                padding: "$lg"
+            }
+        }
+    ]
+});
+ComposerForm.displayName = "ComposerForm";
+
+export { ComposerForm };