@furystack/shades-common-components/esm/components/inputs/text-area.js

Common UI components for FuryStack Shades

import { createComponent, Shade } from '@furystack/shades';
import { cssVariableTheme } from '../../services/css-variable-theme.js';
export const TextArea = Shade({
    customElementName: 'shade-text-area',
    css: {
        display: 'block',
        fontFamily: cssVariableTheme.typography.fontFamily,
        marginBottom: '1em',
        '& label': {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
            justifyContent: 'space-between',
            fontSize: cssVariableTheme.typography.fontSize.xs,
            color: cssVariableTheme.text.secondary,
            padding: '1em',
            borderRadius: cssVariableTheme.shape.borderRadius.md,
            border: 'none',
            transition: `color ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
        },
        '&[data-variant="outlined"] label': {
            border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
        },
        '&[data-disabled] label': {
            color: cssVariableTheme.text.disabled,
        },
        '&:focus-within label': {
            color: cssVariableTheme.palette.primary.main,
        },
        '& .textarea-content': {
            border: 'none',
            backgroundColor: 'transparent',
            outline: 'none',
            fontSize: cssVariableTheme.typography.fontSize.sm,
            width: '100%',
            textOverflow: 'ellipsis',
            boxShadow: '0px 0px 0px rgba(128,128,128,0.1)',
            transition: `box-shadow ${cssVariableTheme.transitions.duration.normal} ease`,
        },
        '&:focus-within .textarea-content': {
            boxShadow: `0px 3px 0px ${cssVariableTheme.palette.primary.main}`,
        },
        // Size: small
        '&[data-size="small"] label': {
            padding: cssVariableTheme.spacing.sm,
            fontSize: cssVariableTheme.typography.fontSize.xs,
        },
        '&[data-size="small"] .textarea-content': {
            fontSize: cssVariableTheme.typography.fontSize.xs,
        },
        // Size: large
        '&[data-size="large"] label': {
            padding: cssVariableTheme.spacing.lg,
            fontSize: cssVariableTheme.typography.fontSize.sm,
        },
        '&[data-size="large"] .textarea-content': {
            fontSize: cssVariableTheme.typography.fontSize.md,
        },
    },
    render: ({ props, useHostProps }) => {
        useHostProps({
            'data-variant': props.variant || undefined,
            'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
            'data-disabled': props.disabled ? '' : undefined,
        });
        return (createComponent("label", { ...props.labelProps, style: props.labelProps?.style },
            createComponent("span", null, props.labelTitle),
            createComponent("div", { className: "textarea-content", contentEditable: props.readOnly === true || props.disabled === true ? 'inherit' : 'true', ...props, style: props.style }, props.value)));
    },
});
//# sourceMappingURL=text-area.js.map