@hhgtech/hhg-components/build/esm/index-cf3c860d.js

Hello Health Group common components

import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { useMemo } from 'react';
import { useMantineTheme } from '@mantine/core';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { M as MediaQueries } from './utils-cb7242c7.js';

const StyledInput = styled.div `
  position: relative;
  width: 100%;

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

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

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

    &:disabled {
      background-color: ${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: ${theme.sizes.fwRegular};
      ${MediaQueries.mbDown} {
        font-size: 22px;
        line-height: 1.2;
      }

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

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

      ${MediaQueries.mbUp} {
        font-size: 13px;
        line-height: 1.5;
      }
    }
  }
`;
const StyledErrorLabel = styled.label `
  color: ${theme.colors.red700};
  font-weight: ${theme.sizes.fwRegular};
`;
const StyledActionIcon = styled.div `
  position: absolute;
  top: 50%;
  right: 16px;
  cursor: pointer;
  transform: translateY(-50%);
`;
const StyledDisplayIcon = styled.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.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 = __rest(_a, ["name", "value", "errorMessage", "isNumerousKeyboard", "showErrorMessage", "actionIcon", "displayIcon", "onActionClick", "label", "className", "onChange", "isDisabled", "CustomInput", "size", "style", "autoComplete", "type", "inputClassName", "trackingAttributes", "enterKeyHint"]);
    const _theme = useMantineTheme();
    const gaAttributes = 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.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.createElement(Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
        React__default.createElement("div", { style: { position: 'relative' } },
            CustomInput ? (CustomInput) : (React__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.createElement(StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
            ActionIcon && (React__default.createElement(StyledActionIcon, { className: "actionIcon", onClick: onActionClick }, ActionIcon))),
        errorMessage && errorMessage.length > 0 && showErrorMessage && (React__default.createElement(StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
};

export { Input as I, Label as L, StyledDisplayIcon as S, StyledActionIcon as a, StyledErrorLabel as b };