@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
257 lines (256 loc) • 10.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.inputFocusWidthMixin = exports.inputPadding = exports.contentBottomMargin = exports.contentTopMargin = exports.labelInTopStyles = exports.helpMessageMargin = exports.innerRightContentPosition = exports.innerLeftContentPosition = exports.mapVariableStyles = exports.getIconPadding = exports.getIconPaddingDeprecated = exports.mapBaseStyles = exports.mapLabelTypeStyles = exports.getLeft = void 0;
const styled_components_1 = require("styled-components");
const inputTheme_1 = require("../../components/input/types/inputTheme");
const pxToRem_1 = require("../../utils/pxToRem/pxToRem");
const getStyles_1 = require("../../utils/getStyles/getStyles");
const input_mixin_utils_1 = require("./input.mixin.utils");
const isStandardLabel = (labelType) => {
return labelType === inputTheme_1.LABEL_TYPE.STANDARD;
};
const labelFilledMixin = (margin, width) => (0, styled_components_1.css) `
margin-top: ${margin};
position: absolute;
z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
// new
white-space: nowrap;
text-overflow: ellipsis;
width: ${width};
overflow: hidden;
`;
const labelFilledWithTransitionMixin = (width) => (0, styled_components_1.css) `
transform: translate(-0%, 50%);
transition: all 0.2s linear;
position: absolute;
z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
// new
white-space: nowrap;
text-overflow: ellipsis;
width: ${width};
overflow: hidden;
`;
const labelOutlineMixin = (backgroundColor) => (0, styled_components_1.css) `
position: absolute;
z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
background-color: ${backgroundColor};
`;
const labelStandardMixin = () => (0, styled_components_1.css) `
z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
`;
const getLeft = (styles) => {
const paddingSplit = styles?.inputContainer?.padding?.split(' ') || [];
switch (paddingSplit.length) {
case 1:
return paddingSplit[0];
case 2:
case 3:
return paddingSplit[1];
case 4:
return paddingSplit[3];
default:
return '0';
}
};
exports.getLeft = getLeft;
const mapLabelTypeStyles = (props) => {
const isOutlineLabel = ({ styles }) => styles?.label?.type === inputTheme_1.LABEL_TYPE.OUTLINED
? (0, styled_components_1.css) `
padding-left: ${(0, exports.getLeft)(styles)};
display: flex;
`
: (0, styled_components_1.css) `
display: inline-block;
/* width: 100%; */
`;
const isFilledLabel = ({ styles, leftExtraStyles }) => leftExtraStyles
? (0, styled_components_1.css) `
padding-left: ${(0, exports.getLeft)(styles)};
`
: (0, styled_components_1.css) ``;
const isFilledLabelWithAffixOut = ({ styles, topExtraStyles }) => topExtraStyles
? (0, styled_components_1.css) `
/* We need to write the CSS code inside this CSS extension, which will only be applied to the web page when opening the Firefox browser. */
/* Firefox need a explicit position when you use position:absolute; */
@-moz-document url-prefix() {
padding-left: ${(0, exports.getLeft)(styles)};
}
`
: (0, styled_components_1.css) ``;
const labelTypeStyle = ({ styles, $placeholder, state, $maxLabelSize, }) => {
if (styles?.label?.type === inputTheme_1.LABEL_TYPE.OUTLINED) {
return (0, styled_components_1.css) `
${labelOutlineMixin(styles?.labelContainer?.background_color)}
`;
}
else if (styles?.label?.type === inputTheme_1.LABEL_TYPE.FILLED &&
(($placeholder &&
[inputTheme_1.InputState.EMPTY, inputTheme_1.InputState.ERROR_EMPTY, inputTheme_1.InputState.DISABLED_EMPTY].includes(state)) ||
[
inputTheme_1.InputState.ACTIVE,
inputTheme_1.InputState.FILLED,
inputTheme_1.InputState.ERROR_FILLED,
inputTheme_1.InputState.DISABLED_FILLED,
inputTheme_1.InputState.DISABLED_FILLED_WITH_INFO,
inputTheme_1.InputState.ERROR_ACTIVE,
inputTheme_1.InputState.ERROR_FILLED_WITH_INFO,
].includes(state))) {
return (0, styled_components_1.css) `
${labelFilledMixin(props.styles?.inputContainer?.margin_top, $maxLabelSize)}
${isFilledLabelWithAffixOut(props)};
`;
}
return (0, styled_components_1.css) `
${labelFilledWithTransitionMixin($maxLabelSize)}
`;
};
return isStandardLabel(props.styles?.label?.type)
? (0, styled_components_1.css) `
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: ${props.styles?.labelContainer?.justify_content};
label {
${labelStandardMixin()}
}
`
: (0, styled_components_1.css) `
position: absolute;
${isOutlineLabel(props)};
${isFilledLabel(props)};
label {
${labelTypeStyle(props)}
}
`;
};
exports.mapLabelTypeStyles = mapLabelTypeStyles;
const mapBaseStyles = ({ state, labelType, placeholder, styles, }) => (0, styled_components_1.css) `
${() => !isStandardLabel(labelType) && placeholder && state !== inputTheme_1.InputState.ACTIVE
? (0, styled_components_1.css) `
padding: ${styles?.[inputTheme_1.InputState.ACTIVE]?.inputContainer?.padding};
`
: (0, styled_components_1.css) `
padding: ${styles?.[state]?.inputContainer?.padding};
`}
border-width: ${styles?.[state]?.inputContainer?.border_width};
border-style: ${styles?.[state]?.inputContainer?.border_style};
border-radius: ${styles?.[state]?.inputContainer?.border_radius};
opacity: ${styles?.[state]?.inputContainer?.opacity};
`;
exports.mapBaseStyles = mapBaseStyles;
// deprecated - remove this `getIconPaddingDeprecated` function when icon prop is removed
const getIconPaddingDeprecated = (position, styles) => {
const iconWidth = styles?.inputIcon?.width;
if (position === inputTheme_1.InputIconPosition.RIGHT) {
const paddingRight = (0, input_mixin_utils_1.getPaddingRightFromContainer)(styles?.inputContainer);
return (0, styled_components_1.css) `
padding-right: calc(${paddingRight} + ${iconWidth});
`;
}
const paddingLeft = (0, input_mixin_utils_1.getPaddingLeftFromContainer)(styles?.inputContainer);
return (0, styled_components_1.css) `
padding-left: calc(${paddingLeft} + ${iconWidth});
`;
};
exports.getIconPaddingDeprecated = getIconPaddingDeprecated;
const getIconPadding = (leftIcon, rightIcon, styles) => {
const iconWidth = styles?.inputIcon?.width;
if (leftIcon && rightIcon) {
const paddingLeft = (0, input_mixin_utils_1.getPaddingLeftFromContainer)(styles?.inputContainer);
const paddingRight = (0, input_mixin_utils_1.getPaddingRightFromContainer)(styles?.inputContainer);
return (0, styled_components_1.css) `
padding-left: calc(${paddingLeft} + ${iconWidth});
padding-right: calc(${paddingRight} + ${iconWidth});
`;
}
else if (leftIcon) {
const paddingLeft = (0, input_mixin_utils_1.getPaddingLeftFromContainer)(styles?.inputContainer);
return (0, styled_components_1.css) `
padding-left: calc(${paddingLeft} + ${iconWidth});
`;
}
else if (rightIcon) {
const paddingRight = (0, input_mixin_utils_1.getPaddingRightFromContainer)(styles?.inputContainer);
return (0, styled_components_1.css) `
padding-right: calc(${paddingRight} + ${iconWidth});
`;
}
return undefined;
};
exports.getIconPadding = getIconPadding;
const mapVariableStyles = (styles) => (0, styled_components_1.css) `
${(0, getStyles_1.getTypographyStyles)(styles?.input)};
background-color: ${styles?.inputContainer?.background_color};
border-color: ${styles?.inputContainer?.border_color};
${() => styles?.inputContainer?.border_bottom &&
styles?.inputContainer?.border_bottom_color &&
(0, styled_components_1.css) `
border-bottom: ${styles?.inputContainer?.border_bottom} solid
${styles?.inputContainer?.border_bottom_color};
`};
::placeholder {
${(0, getStyles_1.getTypographyStyles)(styles?.placeholder)};
}
`;
exports.mapVariableStyles = mapVariableStyles;
// position the left content inside the input
const innerLeftContentPosition = () => (0, styled_components_1.css) `
position: absolute;
left: 0;
z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
`;
exports.innerLeftContentPosition = innerLeftContentPosition;
// position the right content inside the input
const innerRightContentPosition = () => (0, styled_components_1.css) `
position: absolute;
right: 0;
`;
exports.innerRightContentPosition = innerRightContentPosition;
// help message styles when label is not STANDARD and input has inner left content
const helpMessageMargin = (marginLeft) => (0, styled_components_1.css) `
> div:has(> span) {
margin-left: ${(0, pxToRem_1.pxToRem)(marginLeft)}rem;
}
`;
exports.helpMessageMargin = helpMessageMargin;
// label is not STANDARD (absolute position) and input has inner left content
const labelInTopStyles = (marginLeft, inputWidth) => (0, styled_components_1.css) `
> div {
margin-left: ${marginLeft}rem;
max-width: ${inputWidth}px;
}
/* We need to write the CSS code inside this CSS extension, which will only be applied to the web page when opening the Firefox browser. */
/* Firefox need a explicit position when you use position:absolute; */
@-moz-document url-prefix() {
label {
left: calc(${marginLeft}rem);
max-width: ${inputWidth}px;
}
}
`;
exports.labelInTopStyles = labelInTopStyles;
// add margin to bottom content there is right external content
const contentTopMargin = (marginRight) => (0, styled_components_1.css) `
margin-right: ${marginRight}rem;
`;
exports.contentTopMargin = contentTopMargin;
// add margin to bottom content there is left or right external content
const contentBottomMargin = (marginLeft, marginRight) => (0, styled_components_1.css) `
margin-left: ${marginLeft}rem;
margin-right: ${marginRight}rem;
`;
exports.contentBottomMargin = contentBottomMargin;
// add padding to input content when input has left inner content
const inputPadding = (marginLeft, marginRight) => (0, styled_components_1.css) `
input {
padding-left: ${marginLeft}rem;
padding-right: ${marginRight}rem;
}
`;
exports.inputPadding = inputPadding;
exports.inputFocusWidthMixin = (0, styled_components_1.css) `
outline-offset: 0.063rem;
outline-width: 0.063rem;
`;
//# sourceMappingURL=input.mixin.js.map