@hhgtech/hhg-components/build/index-cf6e6a67.js

Hello Health Group common components

'use strict';

var core = require('@mantine/core');
var index$1 = require('./index-04864074.js');
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var hooks = require('@mantine/hooks');
var react = require('@emotion/react');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

var useTextStyles = core.createStyles((theme) => {
    return index$1.GlobalTextStyleNew(theme)[index$1.CustomStylesType.LEADGEN];
});

const TextFieldContext = React.createContext({});

const cssInputNotShrink = react.css `
  height: 100% !important;
  min-height: calc(var(--container-height, 56px) * 24 / 56);
  line-height: calc(var(--container-height, 56px) * 24 / 56);
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  cursor: pointer;
  /* opacity: 0; */

  ::placeholder {
    color: ${miscTheme.theme.colors.gray400};
  }
`;
const cssInputShrink = react.css `
  height: auto !important;
  cursor: text;
  opacity: 1;
  transition: 0.1s ease-in-out all;
`;
const cssLabelNotShrink = react.css `
  position: absolute;
  top: calc(var(--container-height) / 2);
  left: var(--space-x, 16px);
  margin: 0;
  z-index: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: 0.125s ease-in all;

  right: 0; // auto grow width
`;
const cssLabelShrink = react.css `
  top: var(--space-y-shrink, 6px);
  transform: translateY(0);
  transition: 0.125s ease-out all;
  right: 0; // auto grow width
`;
const cssWrapperInputNotShrink = react.css `
  min-height: var(--container-height, 56px);
  display: flex;
  align-items: flex-end;
  border: 1px solid ${miscTheme.theme.colors.gray200};
  border-radius: 8px;
  background-color: #fff;
  padding-inline: var(--space-x, 16px);
  padding-block: var(--space-y-not-shrink, 16px);
  cursor: pointer;
  pointer-events: none;

  &:has(.mantine-Input-rightSection) {
    padding-right: var(--container-height, 56px);
  }

  .mantine-Input-icon {
    display: none;
  }

  .mantine-NumberInput-control {
    border-color: ${miscTheme.theme.colors.gray200};
  }
`;
const cssWrapperInputShrink = react.css `
  height: auto;
  min-height: var(--container-height, 56px);
  padding-block: var(--space-y-shrink, 6px);
  cursor: text;
  pointer-events: auto;
`;
const cssInputWrapperError = react.css `
  color: ${miscTheme.theme.colors.red800};
  font-size: 12px;
  line-height: 1.5;
`;
const StyledTextFieldContainer = styled__default["default"].div `
  --space-x: 16px;
  --space-y-not-shrink: 15px;
  --space-y-shrink: 6px;
  --container-height: 56px;
  --label-not-shrink: 16px;
  --label-shrink: 12px;
  --input: 15px;

  position: relative;
  min-width: 100px;
  max-width: 100%;
  display: inline-block;

  .textField_wrapper {
    display: inline-block;
    width: 100%;
    cursor: pointer;
  }

  .mantine-InputWrapper-root {
    &[data-invalid='true'] {
      .mantine-Input-wrapper {
        border-color: ${miscTheme.theme.colors.red400};
      }
    }

    .mantine-Input-wrapper {
      &:has([data-invalid]) {
        border-color: ${miscTheme.theme.colors.red400};
      }
    }
  }

  .mantine-InputWrapper-label {
    ${cssLabelNotShrink}
  }

  .mantine-Input-wrapper {
    ${cssWrapperInputNotShrink}

    + .mantine-Popover-dropdown[data-position="bottom-start"] {
      left: 0 !important;
    }
    + .mantine-Popover-dropdown[data-position='top-start'] {
      top: unset !important;
      left: 0 !important;
      bottom: 100% !important;
    }
  }

  .mantine-Input-input {
    ${cssInputNotShrink}
  }

  &.textField_shrink {
    .mantine-InputWrapper-label {
      ${cssLabelShrink}
    }

    .mantine-Input-wrapper {
      ${cssWrapperInputShrink}
      &.mantine-Select-wrapper {
        .mantine-Select-rightSection {
          pointer-events: auto !important;
        }
      }
    }

    .mantine-Input-input {
      ${cssInputShrink}
    }

    &:has(.PhoneInput) {
      .mantine-InputWrapper-label {
        left: var(--space-x, 16px);
      }
      .PhoneInput {
        .PhoneInputInput {
          opacity: 1;
        }
      }
    }
  }

  &:focus-within {
    .mantine-Input-wrapper {
      transition: 0.25s linear border;
      border-color: ${miscTheme.theme.colors.primary600};
      box-shadow: 0 0 4px ${miscTheme.theme.colors.primary200};
    }
  }

  .PhoneInput {
    --phone-select: 75px;
    --phone-input-space-x: 8px;
    width: 100%;
    opacity: 1;
    border: none;
    .PhoneInputCountry {
      background-color: transparent;
      border: none;
      padding: 0;
      width: var(--phone-select, 75px);
    }
    .PhoneInputInput {
      flex: 1;
      min-width: 0;
      line-height: 1.5;
      outline: none !important;
      border: none;
      box-shadow: none;
      font-size: var(--input, 15px);
      padding: 0 var(--phone-input-space-x, 8px);
      /* opacity: 0; */
      color: ${miscTheme.theme.colors.gray800} !important;
      :focus {
        color: ${miscTheme.theme.colors.gray800} !important;
      }
    }
  }

  &:has(.PhoneInput) {
    .mantine-InputWrapper-label {
      left: calc(
        var(--space-x, 16px) + var(--phone-select, 75px) +
          var(--phone-input-space-x, 8px)
      );
    }
  }

  .icon {
    position: absolute;
    top: calc(var(--container-height) / 2);
    right: var(--space-x, 16px);
    transform: translateY(-50%);
    transition: 0.125s ease-in all;
    &.shrink {
      top: calc(var(--container-height) / 2 - 4px);
      transform: translateY(0);
    }
  }
`;
const StyledChoiceFieldContainer = styled__default["default"].div `
  &.leadgen-form_checkbox,
  &.leadgen-form_radio {
    width: 100%;
  }

  &.leadgen-form_dropdown {
    width: calc(50% - 12px);
  }

  .mantine-InputWrapper-root {
    display: block;
  }

  .mantine-InputWrapper-label {
    margin-bottom: 0.5rem;
    color: ${miscTheme.theme.colors.gray800};
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }

  .mantine-Radio-root,
  .mantine-Checkbox-root {
    gap: 8px;
    min-width: calc(50% - 4px);

    // input[type='radio'],
    // input[type='checkbox'] {
    //   border-color: ${miscTheme.theme.colors.gray600};
    //   width: 18px;
    //   height: 18px;
    // }
    // input[type='checkbox'] {
    //   border-radius: 4px;
    // }

    // &[data-checked='true'] {
    //   input[type='radio'],
    //   input[type='checkbox'] {
    //     border-color: ${miscTheme.theme.colors.primary600};
    //   }

    //   input[type='radio'] {
    //     background-color: white;
    //   }
    // }

    .mantine-Checkbox-input {
      &:checked {
        border-color: ${miscTheme.theme.colors.primary600};
      }
    }
  }

  .leadgen-choiceContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  .mantine-InputWrapper-error {
    ${cssInputWrapperError}
  }
`;
styled__default["default"].div `
  position: absolute;
  top: calc(var(--container-height) / 2);
  right: var(--space-x, 16px);
`;

const TextField = (props) => {
    const { shrink: shrinkProps, onChangeShrink, children, className } = props, restProps = tslib_es6.__rest(props, ["shrink", "onChangeShrink", "children", "className"]);
    const [shrink, setShrink] = React.useState(shrinkProps);
    const [hasIcon, setHasIcon] = React.useState(false);
    React.useEffect(() => {
        setShrink(shrinkProps);
    }, [shrinkProps]);
    return (React__default["default"].createElement(TextFieldContext.Provider, Object.assign({ value: {
            shrinkProps,
            shrink,
            setShrink,
            onChangeShrink,
            hasIcon,
            setHasIcon,
        } }, restProps),
        React__default["default"].createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
};
const TextFieldControl = (props) => {
    const { shrink, shrinkProps, onChangeShrink, setShrink, hasIcon } = React.useContext(TextFieldContext);
    const { children, htmlFor } = props;
    const containerRef = hooks.useClickOutside(() => {
        if (shrinkProps) {
            return;
        }
        setShrink(false);
        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
    });
    // const inputInside = useMemo(() => {
    //   containerRef.current.querySelectorAll(
    //     'input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])',
    //   )
    // }, [containerRef.current])
    // console.log({ containerRef })
    const focusInput = (target) => {
        //Note: Add timeout to wait animation shrink already ended
        setTimeout(() => {
            const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
            const $focusEl = $textEl.item($textEl.length - 1);
            if ($focusEl) {
                $focusEl.focus({ preventScroll: true });
            }
        }, 150);
    };
    const onClick = React.useCallback((e) => {
        if (shrink) {
            // e.preventDefault()
            focusInput(e.currentTarget);
            return;
        }
        setShrink(true);
        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
        focusInput(e.currentTarget);
    }, [shrink]);
    React.useEffect(() => {
        setShrink(shrinkProps);
    }, [shrinkProps]);
    return (React__default["default"].createElement(core.Box, { ref: containerRef, onClick: onClick, className: "textField_wrapper", component: htmlFor ? 'label' : 'div', htmlFor: htmlFor }, typeof children === 'function'
        ? children({ shrink: !!shrink, hasIcon })
        : children));
};
const TextFieldIcon = ({ Icon }) => {
    const { shrink, setHasIcon } = React.useContext(TextFieldContext);
    const theme = core.useMantineTheme();
    React.useEffect(() => {
        Icon && setHasIcon(true);
    }, []);
    return Icon ? (React__default["default"].createElement(Icon, { className: `icon ${!!shrink ? 'shrink' : ''}`, shrink: shrink, size: 24, color: theme.colors.gray[9] })) : null;
};
TextField.Control = TextFieldControl;
TextField.Icon = TextFieldIcon;
const ChoiceField = (props) => {
    const { children, className } = props, restProps = tslib_es6.__rest(props, ["children", "className"]);
    return (React__default["default"].createElement(StyledChoiceFieldContainer, Object.assign({ className: core.clsx(className, 'choiceField') }, restProps), children));
};

var index = /*#__PURE__*/Object.freeze({
  __proto__: null,
  TextField: TextField,
  TextFieldControl: TextFieldControl,
  TextFieldIcon: TextFieldIcon,
  ChoiceField: ChoiceField
});

exports.ChoiceField = ChoiceField;
exports.TextField = TextField;
exports.index = index;
exports.useTextStyles = useTextStyles;