import { Gray500 } from "../../../Types/BrandColors";
import React from "react";
const ColorInput = (props) => {
    var _a;
    const hasOnClick = Boolean(props.onClick);
    const colorLabel = ((_a = props.value) === null || _a === void 0 ? void 0 : _a.toString()) || props.placeholder || "No Color Selected";
    const handleKeyDown = (event) => {
        var _a;
        if (hasOnClick && (event.key === "Enter" || event.key === " ")) {
            event.preventDefault();
            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
        }
    };
    return (React.createElement("div", { className: `flex ${props.className}`, onClick: () => {
            var _a;
            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
        }, onKeyDown: handleKeyDown, role: hasOnClick ? "button" : undefined, tabIndex: hasOnClick ? 0 : undefined, "aria-label": hasOnClick ? `Color picker: ${colorLabel}` : undefined, "data-testid": props.dataTestId },
        props.value && (React.createElement("div", { style: {
                backgroundColor: props.value.toString(),
                height: "20px",
                borderWidth: "1px",
                borderColor: Gray500.toString(),
                width: "20px",
                borderRadius: "300px",
                boxShadow: "rgb(149 157 165 / 20%) 0px 8px 24px",
                marginRight: "7px",
                borderStyle: "solid",
            }, "aria-hidden": "true" })),
        React.createElement("div", null, colorLabel)));
};
export default ColorInput;
//# sourceMappingURL=ColorViewer.js.map