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

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var core = require('@mantine/core');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var utils = require('./utils-7ba0038a.js');

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

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

const StyledInput = styled__default["default"].div `
  position: relative;
  width: 100%;

  &[data-has-error] {
    input {
      border-color: ${miscTheme.theme.colors.red700};
    }
  }

  input {
    width: 100%;
    padding: 12px 16px;
    border: solid 1px ${miscTheme.theme.colors.gray200};
    border-radius: ${miscTheme.theme.borderRadius};

    &:active,
    &:focus,
    &.focused {
      border-color: ${(props) => props.color};
      box-shadow: 0px 0px 2px 2px ${(props) => props.shadowColor};
    }

    &:disabled {
      background-color: ${miscTheme.theme.colors.gray100};
      cursor: not-allowed;
    }
  }

  &[data-has-action-icon] {
    input {
      padding: 12px 48px 12px 16px;
    }
  }
  &[data-has-display-icon] {
    input {
      padding: 12px 16px 12px 48px;
    }
  }

  &[data-has-action-icon][data-has-display-icon] {
    input {
      padding: 12px 48px;
    }
  }

  &[data-size='lg'] {
    input {
      font-size: 16px;
      font-weight: ${miscTheme.theme.sizes.fwRegular};
      ${utils.MediaQueries.mbDown} {
        font-size: 22px;
        line-height: 1.2;
      }

      ${utils.MediaQueries.mbUp} {
        font-size: 26px;
        line-height: 1.2;
      }
    }
  }
  &[data-size='md'] {
    input {
      font-weight: ${miscTheme.theme.sizes.fwRegular};
      line-height: 22px;
      ${utils.MediaQueries.mbDown} {
        font-size: 14px;
        line-height: 1.2;
      }

      ${utils.MediaQueries.mbUp} {
        font-size: 16px;
        line-height: 1.2;
      }
    }
  }
  &[data-size='sm'] {
    input {
      font-weight: ${miscTheme.theme.sizes.fwRegular};
      line-height: 20px;
      ${utils.MediaQueries.mbDown} {
        font-size: 13px;
        line-height: 1.5;
      }

      ${utils.MediaQueries.mbUp} {
        font-size: 13px;
        line-height: 1.5;
      }
    }
  }
`;
const StyledErrorLabel = styled__default["default"].label `
  color: ${miscTheme.theme.colors.red700};
  font-weight: ${miscTheme.theme.sizes.fwRegular};
`;
const StyledActionIcon = styled__default["default"].div `
  position: absolute;
  top: 50%;
  right: 16px;
  cursor: pointer;
  transform: translateY(-50%);
`;
const StyledDisplayIcon = styled__default["default"].div `
  position: absolute;
  top: 50%;
  left: 16px;
  display: inline-flex;
  cursor: default;
  transform: translateY(-50%);
`;

var styles = {"label":"DjBFAbd"};

/**
 * @deprecated will removed soon
 */
const Label = ({ children, className, style, htmlFor, size }) => {
    return (React__default["default"].createElement("label", { "data-size": size, className: `${styles.label} ${className || ''}`, style: style, htmlFor: htmlFor }, children));
};

/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const Input = (_a) => {
    var { name, value, errorMessage, isNumerousKeyboard = false, showErrorMessage = true, actionIcon: ActionIcon, displayIcon: DisplayIcon, onActionClick, label, className, onChange, isDisabled, CustomInput, size, style, autoComplete = 'off', type = 'text', inputClassName, trackingAttributes, enterKeyHint } = _a, rest = tslib_es6.__rest(_a, ["name", "value", "errorMessage", "isNumerousKeyboard", "showErrorMessage", "actionIcon", "displayIcon", "onActionClick", "label", "className", "onChange", "isDisabled", "CustomInput", "size", "style", "autoComplete", "type", "inputClassName", "trackingAttributes", "enterKeyHint"]);
    const _theme = core.useMantineTheme();
    const gaAttributes = React.useMemo(() => {
        if (trackingAttributes) {
            return {
                'data-event-category': trackingAttributes.dataEventCategory,
                'data-event-action': trackingAttributes.dataEventAction,
                'data-event-label': trackingAttributes.dataEventLabel,
            };
        }
        else {
            return {};
        }
    }, [trackingAttributes]);
    return (React__default["default"].createElement(StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][0], style: style },
        label && (React__default["default"].createElement(Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
        React__default["default"].createElement("div", { style: { position: 'relative' } },
            CustomInput ? (CustomInput) : (React__default["default"].createElement("input", Object.assign({ id: name, name: name, onChange: (e) => onChange && onChange(e.target.value), type: type, "aria-label": type, value: value, disabled: isDisabled, autoComplete: autoComplete, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', className: inputClassName, enterKeyHint: enterKeyHint }, gaAttributes, rest))),
            DisplayIcon && (React__default["default"].createElement(StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
            ActionIcon && (React__default["default"].createElement(StyledActionIcon, { className: "actionIcon", onClick: onActionClick }, ActionIcon))),
        errorMessage && errorMessage.length > 0 && showErrorMessage && (React__default["default"].createElement(StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
};

exports.Input = Input;
exports.Label = Label;
exports.StyledActionIcon = StyledActionIcon;
exports.StyledDisplayIcon = StyledDisplayIcon;
exports.StyledErrorLabel = StyledErrorLabel;