Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_styles_typography = require("../styles/typography.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_utils_toReactNodes_toReactNodes = require("../utils/toReactNodes/toReactNodes.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
const require_components_Loading = require("./Loading.cjs");
const require_components_Tooltip = require("./Tooltip.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
const require_styles_fields = require("../styles/fields.cjs");
const require_Checkbox = require("../Checkbox-CwZSg7iI.cjs");
const require_components_Toggle = require("./Toggle.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
react = require_chunk.__toESM(react);
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/TextInput.tsx
const selectLeftOffset = 10;
const getPartialBorderRadiusCSS = (partialBorderRadius) => {
	if (!partialBorderRadius) return "";
	const { topLeft = 0, topRight = 0, bottomLeft = 0, bottomRight = 0 } = partialBorderRadius;
	return `border-radius: ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px;`;
};
const iconSides = ["left", "right"];
const iconOffsets = [
	"small",
	"medium",
	"large"
];
const iconWidths = [
	8,
	12,
	16,
	20
];
const iconStrokeWidths = [
	1,
	1.5,
	2
];
function withDefaults(textInputProps) {
	return {
		...textInputProps,
		width: textInputProps.width || "full",
		type: textInputProps.type || "text",
		disabled: Boolean(textInputProps.disabled),
		typography: {
			...require_styles_fields.defaultTextInputTypography,
			...textInputProps.typography
		}
	};
}
function TextInput(textInputProps) {
	const props = withDefaults(textInputProps);
	const [focused, setFocused] = (0, react.useState)(false);
	const inputRef = props.inputRef || react.default.createRef();
	const ref = props.inputRefCb || inputRef;
	if (props.inputRefCb && !props.inputRef) console.warn("TextInput: inputRef should be provided with inputRefCb.");
	const handleKeyDown = (e) => {
		if (e.key === "Enter" && props.onEnter) props.onEnter();
	};
	const hasError = Boolean(props.error || props.contentError);
	const hasSuccess = Boolean(props.success || props.contentSuccess);
	const iconSide = props.icon ? props.icon.side || "right" : void 0;
	const hasIconLeft = Boolean(props.icon && iconSide === "left");
	const hasIconRight = Boolean(props.icon && iconSide === "right") || props.loading;
	const iconWidth = props.icon?.width || 12;
	const iconCenterOffset = props.icon?.offset === "large" || props.icon?.offset === "medium" ? 26 : 18;
	const iconTextOffset = props.icon?.offset === "large" ? 14 : props.icon?.offset === "medium" ? 8 : 4;
	const leftIconOffset = iconCenterOffset - iconWidth / 2;
	let paddingLeftPx;
	if (typeof props.paddingX === "number") if (hasIconLeft) paddingLeftPx = props.paddingX + iconWidth + iconTextOffset;
	else paddingLeftPx = props.paddingX;
	else if (hasIconLeft) paddingLeftPx = leftIconOffset + iconWidth + iconTextOffset;
	else if (props.select) paddingLeftPx = selectLeftOffset + props.select.width + 5;
	const rightIconWidth = props.loading ? 20 : iconWidth;
	const rightIconOffset = iconCenterOffset - rightIconWidth / 2;
	let paddingRightPx;
	if (typeof props.paddingX === "number") if (hasIconRight) paddingRightPx = iconTextOffset + rightIconWidth + props.paddingX;
	else paddingRightPx = props.paddingX;
	else if (hasIconRight) paddingRightPx = rightIconOffset + rightIconWidth + iconTextOffset;
	const textInputWidth = props.width === "short" ? "250px" : "100%";
	let input = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(InputContainer, { children: [
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Input, {
			disabled: props.disabled,
			maxLength: props.maxLength,
			inputMode: props.inputMode,
			pattern: props.pattern,
			onBlur: (blurEvent) => {
				setFocused(false);
				if (props.onBlur) props.onBlur(blurEvent);
			},
			onChange: (e) => {
				e.target.setCustomValidity("");
				props.onChange(e.target.value, e);
			},
			onFocus: (focusEvent) => {
				setFocused(true);
				if (props.onFocus) props.onFocus(focusEvent);
			},
			onKeyDown: (e) => {
				if (props.onKeyDown) props.onKeyDown(e.key, e);
				handleKeyDown(e);
			},
			onKeyUp: props.onKeyUp,
			id: props.id,
			onPaste: props.onPaste,
			placeholder: props.placeholder,
			ref,
			name: props.name,
			type: props.type,
			value: props.value,
			paddingLeftPx,
			paddingRightPx,
			paddingTopPx: props.paddingY,
			paddingBottomPx: props.paddingY,
			activeOutline: props.activeOutline,
			activeOutlineColor: props.activeOutlineColor,
			hasError,
			hasSuccess,
			"data-test-id": props.testId,
			typography: props.typography,
			autoComplete: props.autoComplete === "off" ? "new-password" : props.autoComplete,
			onBeforeInput: (e) => {
				if (props.onBeforeInput) {
					const event = e;
					props.onBeforeInput(event);
				}
			},
			borderRadius: props.borderRadius,
			partialBorderRadius: props.partialBorderRadius,
			borderWidth: props.borderWidth,
			enterKeyHint: props.enterKeyHint,
			autoFocus: props.autoFocus
		}),
		props.rightButtonText && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(RightButtonAligner, {
			paddingX: rightIconOffset,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(RightButton, {
				onClick: props.onRightButtonClick,
				children: props.rightButtonText
			})
		}),
		props.rightText && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(RightButtonAligner, {
			paddingX: rightIconOffset,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(RightTextBody, {
				focused,
				children: props.rightText
			})
		})
	] });
	if (hasIconLeft || hasIconRight) input = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(WithIcon, {
		hasError,
		withFocus: focused,
		children: [
			props.icon && iconSide === "left" && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TextInputIconContainer, {
				onClick: props.onClickIcon ? props.onClickIcon : () => {},
				isIconRight: false,
				focused,
				hasValue: Boolean(props.value),
				colorProp: props.typography.color,
				iconOffset: typeof props.paddingX === "number" ? props.paddingX : leftIconOffset,
				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: props.icon.name,
					width: iconWidth,
					iconProps: { strokeWidth: props.icon.strokeWidth }
				})
			}),
			input,
			hasIconRight && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TextInputIconContainer, {
				onClick: props.onClickIcon ? props.onClickIcon : () => {},
				isIconRight: true,
				focused,
				hasValue: Boolean(props.value),
				colorProp: props.typography.color,
				iconOffset: typeof props.paddingX === "number" ? props.paddingX : rightIconOffset,
				children: props.loading ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Loading.Loading, {
					center: false,
					size: rightIconWidth
				}) : props.icon && iconSide === "right" ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: props.icon.name,
					width: rightIconWidth,
					iconProps: { strokeWidth: props.icon.strokeWidth }
				}) : null
			})
		]
	});
	const hintTooltipId = props.hintTooltip ? `${props.id || "input"}-hint-tooltip` : void 0;
	const { select } = props;
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledTextInput, {
		widthProp: textInputWidth,
		marginTop: props.marginTop,
		children: [
			props.label ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TextInputLabel, {
				hasError,
				labelOptions: props.labelOptions,
				children: props.labelOptions?.typography ? require_utils_toReactNodes_toReactNodes.toReactNodes({
					text: props.label,
					typography: props.labelOptions.typography
				}) : props.label
			}) : null,
			select && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TextInputSelect, {
				value: select.value,
				widthProp: select.width,
				heightProp: select.height,
				typography: props.typography,
				onChange: (event) => {
					select.onChange(event.target.value);
					inputRef.current?.focus();
				},
				children: select.options.map((option) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("option", {
					value: option.value,
					children: option.label
				}, option.value))
			}),
			input,
			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_styles_fields.InputSubtext, {
				text: props.error || props.success || props.hint,
				content: props.contentError || props.contentSuccess,
				hasError,
				hasSuccess,
				tooltipId: hintTooltipId,
				hideNonErrorsIfBlurred: props.hideNonErrorsIfBlurred,
				focused,
				subTextPaddingX: props.subTextPaddingX
			}),
			props.hintTooltip ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Tooltip.Tooltip, {
				id: hintTooltipId,
				content: props.hintTooltip,
				place: "right"
			}) : null
		]
	});
}
const TextInputSelect = _emotion_styled.default.select`
  ${({ typography, theme }) => require_styles_typography.applyTypography(theme, typography.type, typography.size, typography.color)}
  position: absolute;
  z-index: ${require_styles_z_index.z.textInput + 1};
  border: none;
  background-color: transparent;
  top: 0;
  left: ${selectLeftOffset}px;
  height: ${({ heightProp }) => `${heightProp}px`};
  width: ${({ widthProp }) => `${widthProp}px`};
`;
const WithIcon = _emotion_styled.default.div`
  ${require_styles_common.standardBorderRadius(8)}
  position: relative;

  & ${require_components_Icon_Icon.IconContainer.toString()} {
    z-index: ${require_styles_z_index.z.textInput + 1};
  }
`;
const TextInputIconContainer = _emotion_styled.default.div`
  position: absolute;
  z-index: ${require_styles_z_index.z.textInput + 1};
  ${({ isIconRight, iconOffset }) => isIconRight ? `right: ${iconOffset}px` : `left: ${iconOffset}px`};
  top: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: ${({ onClick }) => onClick ? "pointer" : "auto"};
  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? require_styles_themes.getFontColor(theme, colorProp) : require_styles_fields.textInputPlaceholderColor({ theme })};
`;
const Input = _emotion_styled.default.input`
  ${require_styles_fields.textInputStyle};
  ${({ partialBorderRadius }) => getPartialBorderRadiusCSS(partialBorderRadius)}
  // disable autofill styles in chrome https://stackoverflow.com/a/68240841/9808766
  &:-webkit-autofill,
  &:-webkit-autofill:focus,
  &:-internal-autofill-selected,
  &:-internal-autofill-selected:focus {
    background-color: ${({ theme }) => theme.bg} !important;
    color: ${({ theme }) => theme.text} !important;
    transition:
      background-color 600000s 0s,
      color 600000s 0s !important;
  }
`;
const RightButtonAligner = _emotion_styled.default.div`
  position: absolute;
  top: 0;
  right: ${({ paddingX }) => paddingX}px;
  z-index: ${require_styles_z_index.z.textInput + 1};
  bottom: 0;
  display: flex;
  align-items: center;
`;
const RightButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  border-radius: 4px;
  border: none;
  background-color: ${({ theme }) => theme.vlcNeutral};
  color: ${({ theme }) => theme.mcNeutral};
  font-size: 14px;
  font-weight: 600;
  padding: 8px 10px;
`;
const RightTextBody = _emotion_styled.default.label`
  font-size: 14px;
  font-weight: ${({ focused }) => focused ? 600 : 400};
`;
const TextInputLabel = _emotion_styled.default.label`
  border-radius: ${({ labelOptions }) => labelOptions?.borderRadius ? require_styles_fields.getBorderRadiusCSS(labelOptions.borderRadius) : "8px"};
  font-size: 10px;
  position: ${({ labelOptions }) => labelOptions?.position || "absolute"};
  z-index: ${require_styles_z_index.z.textInput + 1};
  background-color: ${({ theme, labelOptions }) => labelOptions?.backgroundColor ? require_styles_themes.getBackgroundColor(theme, labelOptions.backgroundColor) : theme.bg};
  color: ${({ theme, hasError }) => hasError ? theme.danger : theme.mcNeutral};
  font-weight: 600;
  padding-left: ${({ labelOptions }) => labelOptions?.paddingX === void 0 ? "6px" : `${labelOptions.paddingX}px`};
  padding-right: ${({ labelOptions }) => labelOptions?.paddingX === void 0 ? "6px" : `${labelOptions.paddingX}px`};
  padding-top: ${({ labelOptions }) => labelOptions?.paddingY === void 0 ? "4px" : `${labelOptions.paddingY}px`};
  padding-bottom: ${({ labelOptions }) => labelOptions?.paddingY === void 0 ? "4px" : `${labelOptions.paddingY}px`};
  left: ${({ labelOptions }) => labelOptions?.position === "relative" ? "0" : "12px"};
  top: ${({ labelOptions }) => labelOptions?.position === "relative" ? "0" : "-10px"};
  margin-bottom: ${({ labelOptions }) => labelOptions?.marginBottom ? `${labelOptions.marginBottom}px` : "0"};
`;
const TextInputHalfRow = _emotion_styled.default.div`
  margin-top: ${24}px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  & > * {
    width: 50%;
  }
`;
const StyledTextInput = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
  width: ${({ widthProp }) => widthProp};
  position: relative;
  /* Apply marginTop to every TextInput when specified */
  margin-top: ${({ marginTop }) => marginTop !== void 0 ? `${marginTop}px` : ""};

  /* eg forms, should be left consistent: */
  & + & {
    margin-top: ${({ marginTop }) => marginTop !== void 0 ? `${marginTop}px` : `24px`};
  }

  ${TextInputHalfRow.toString()} & + & {
    margin-top: 0;
  }

  ${require_Checkbox.CheckboxContainer.toString()} + &,
  ${require_components_Toggle.ToggleContainer.toString()} + &,
  & + ${require_Checkbox.CheckboxContainer.toString()},
  & + ${require_components_Toggle.ToggleContainer.toString()} {
    margin-top: ${24}px;
  }
`;
const InputContainer = _emotion_styled.default.div`
  position: relative;
`;
//#endregion
exports.TextInput = TextInput;
exports.TextInputHalfRow = TextInputHalfRow;
exports.iconOffsets = iconOffsets;
exports.iconSides = iconSides;
exports.iconStrokeWidths = iconStrokeWidths;
exports.iconWidths = iconWidths;
