@furystack/shades-common-components
Version:
65 lines • 3.43 kB
JavaScript
import { createComponent, Shade } from '@furystack/shades';
import { ThemeProviderService } from '../../services/theme-provider-service.js';
import { promisifyAnimation } from '../../utils/promisify-animation.js';
export const TextArea = Shade({
shadowDomName: 'shade-text-area',
render: ({ props, element, injector }) => {
const themeProvider = injector.getInstance(ThemeProviderService);
const { theme } = themeProvider;
const { palette } = theme;
return (createComponent("label", { ...props.labelProps, style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'space-between',
fontSize: '10px',
color: props.disabled ? 'rgb(170, 170, 170)' : '#bbb',
marginBottom: '1em',
padding: '1em',
borderRadius: '5px',
border: props.variant === 'outlined' ? '1px solid #bbb' : 'none',
...props.labelProps?.style,
} },
createComponent("span", null, props.labelTitle),
createComponent("div", { contentEditable: props.readOnly === true || props.disabled === true ? 'inherit' : 'true', ...props, style: {
border: 'none',
backgroundColor: 'transparent',
outline: 'none',
fontSize: '12px',
width: '100%',
textOverflow: 'ellipsis',
...props.style,
}, onfocus: () => {
if (!props.disabled) {
void promisifyAnimation(element.querySelector('label'), [{ color: themeProvider.getTextColor(theme.background.default) }, { color: palette.primary.main }], {
duration: 500,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
fill: 'forwards',
});
void promisifyAnimation(element.querySelector('div[contenteditable="true"]'), [
{ boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
{ boxShadow: `0px 3px 0px ${palette.primary.main}` },
], {
duration: 200,
fill: 'forwards',
});
}
}, onblur: () => {
if (!props.disabled) {
void promisifyAnimation(element.querySelector('label'), [{ color: palette.primary.main }, { color: themeProvider.getTextColor(theme.background.default) }], {
duration: 200,
easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
fill: 'forwards',
});
void promisifyAnimation(element.querySelector('div[contenteditable="true"]'), [
{ boxShadow: '0px 3px 0px rgba(128,128,128,0.4)' },
{ boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
], {
duration: 400,
fill: 'forwards',
});
}
} }, props.value)));
},
});
//# sourceMappingURL=text-area.js.map