@automattic/wpcom-checkout/dist/cjs/field.js

Functions and components used by WordPress.com checkout.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Field;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const composite_checkout_1 = require("@automattic/composite-checkout");
const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
// Disabling this to make migrating files easier
/* eslint-disable @typescript-eslint/no-use-before-define */
function Field({ type, id, className, inputClassName, isError, onChange, label, value, icon, iconAction, isIconVisible, placeholder, tabIndex, description, errorMessage, autoComplete, disabled, prefix, }) {
    const fieldOnChange = (event) => {
        if (onChange) {
            onChange(event.target.value);
        }
        return null;
    };
    const onBlurField = () => {
        return null;
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && ((0, jsx_runtime_1.jsx)(Label, { htmlFor: id, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(InputWrapper, { isError: isError, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: "field__overlay-prefix", children: prefix }), (0, jsx_runtime_1.jsx)(Input, { className: inputClassName, id: id, icon: icon, value: value, type: type, onChange: fieldOnChange, onBlur: onBlurField, placeholder: placeholder, tabIndex: tabIndex, isError: isError, autoComplete: autoComplete, disabled: disabled }), (0, jsx_runtime_1.jsx)(RenderedIcon, { icon: icon, iconAction: iconAction, isIconVisible: isIconVisible })] }), (0, jsx_runtime_1.jsx)(RenderedDescription, { isError: isError, description: description, errorMessage: errorMessage })] }));
}
const Label = styled_1.default.label `
	display: block;
	color: ${(props) => props.theme.colors.textColor};
	font-weight: ${(props) => props.theme.weights.bold};
	font-size: 14px;
	margin-bottom: 8px;

	:hover {
		cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
	}
`;
const Input = styled_1.default.input `
	flex: 1;
	box-sizing: border-box;
	border: 1px solid
		${(props) => (props.isError ? props.theme.colors.error : props.theme.colors.borderColor)};
	line-height: 1.5;
	font-size: 14px;
	padding: 7px 14px;

	::-webkit-inner-spin-button,
	::-webkit-outer-spin-button {
		-webkit-appearance: none;
	}

	[type='number'],
	[type='number'] {
		-moz-appearance: none;
		appearance: none;
	}

	::placeholder {
		color: ${(props) => props.theme.colors.placeHolderTextColor};
	}

	:disabled {
		background: ${(props) => props.theme.colors.disabledField};
		color: var( --studio-gray-20 );
	}
`;
const InputWrapper = styled_1.default.div `
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 3px;
	:focus-within {
		outline: ${(props) => props.isError ? props.theme.colors.error : props.theme.colors.outline}
			solid 2px;
	}
`;
const FieldIcon = styled_1.default.div `
	flex: 0 0 auto;
	white-space: nowrap;
`;
const ButtonIcon = styled_1.default.div `
	flex: 0 0 auto;
	white-space: nowrap;
	max-width: 100%;
	border-left: 1px solid ${(props) => props.theme.colors.borderColor};
	overflow: hidden;

	button {
		padding-block: 7px;
		padding-inline: 10px;
		border: none;
		line-height: 1.5;
	}

	button:hover {
		background: none;
		border: 1px solid transparent;
		box-shadow: none;

		filter: brightness( 0 ) saturate( 100% ) invert( 35% ) sepia( 22% ) saturate( 3465% )
			hue-rotate( 300deg ) brightness( 88% ) contrast( 98% );
	}
`;
const Description = styled_1.default.p `
	margin: 8px 0 0;
	color: ${(props) => props.isError ? props.theme.colors.error : props.theme.colors.textColorLight};
	font-style: italic;
	font-size: 14px;
`;
function RenderedIcon({ icon, iconAction, isIconVisible, }) {
    if (!isIconVisible) {
        return null;
    }
    if (iconAction) {
        return ((0, jsx_runtime_1.jsx)(ButtonIcon, { children: (0, jsx_runtime_1.jsx)(composite_checkout_1.Button, { onClick: iconAction, children: icon }) }));
    }
    if (icon) {
        return (0, jsx_runtime_1.jsx)(FieldIcon, { children: icon });
    }
    return null;
}
function RenderedDescription({ description, isError, errorMessage, }) {
    if (description || isError) {
        return (0, jsx_runtime_1.jsx)(Description, { isError: isError, children: isError ? errorMessage : description });
    }
    return null;
}
//# sourceMappingURL=field.js.map