"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IconBox = exports.ClearButtonHotSpot = exports.ClearButton = exports.ShowHideButton = exports.Wrapper = exports.RelativeBox = exports.Input = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _react2 = _interopRequireDefault(require("cleave.js/react"));

require("cleave.js/dist/addons/cleave-phone.ca");

require("cleave.js/dist/addons/cleave-phone.gb");

require("cleave.js/dist/addons/cleave-phone.us");

var _typography = require("../../../mixins/typography");

var _branding = require("../../../mixins/branding");

var _box = require("../../../primitives/box");

var _icon = require("../../icon");

var _unstyledButton = require("../../behaviors/unstyled-button");

var _forms = require("../internals/forms.common");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var getTextColor = function getTextColor(_ref) {
  var theme = _ref.theme,
      error = _ref.error;
  return error != null && error !== false ? theme.colorPalette['error-fg'] : theme.colorPalette['greyscale-black'];
};

var getInputPaddingVertical = function getInputPaddingVertical(_ref2) {
  var theme = _ref2.theme,
      labelStyle = _ref2.labelStyle;
  return labelStyle === 'floating' || labelStyle === 'external-large' ? theme.spacing.s2 : theme.spacing.s1;
};

var getInputPaddingRight = function getInputPaddingRight(_ref3) {
  var theme = _ref3.theme;
  return theme.spacing.s1;
};

var getInputPaddingLeft = function getInputPaddingLeft(_ref4) {
  var theme = _ref4.theme,
      isEmbeddable = _ref4.isEmbeddable,
      type = _ref4.type;
  return isEmbeddable || type === 'search' ? '0' : theme.spacing.s2;
}; // Setting the height as fontSize plus vertical padding allows consistent
// label float calculations with varying fontSize. We could do this more
// simply by setting margins instead of padding, but then the click hotspot
// for the internal DOM input is too small.


var getHeight = function getHeight(props) {
  return "".concat(Number.parseInt((0, _typography.getFontSize)(props), 10) + Number.parseInt(getInputPaddingVertical(props), 10) * 2, "px");
};

var getFontWeight = function getFontWeight(_ref5) {
  var isEmbeddable = _ref5.isEmbeddable,
      labelStyle = _ref5.labelStyle;
  return isEmbeddable || labelStyle === 'external' ? 'normal' : 'bold';
}; // $FlowFixMe - TODO typedef this properly post TS migration.


var Input = (0, _styledComponents["default"])(_react2["default"]).withConfig({
  shouldForwardProp: function shouldForwardProp(prop) {
    return !['isEmbeddable', 'labelStyle', 'error'].includes(prop);
  }
}).withConfig({
  displayName: "Input",
  componentId: "vuit5i-0"
})(["&&{background:transparent;background-color:transparent;border:0;color:", ";font-family:", ";font-size:", ";font-weight:", ";flex-grow:1;line-height:1;height:", ";outline:none;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";transform:none;margin:0px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;&::placeholder{color:", ";font-style:italic;font-weight:normal;opacity:1;}:invalid{box-shadow:none;}", "}"], getTextColor, _typography.getFontFamily, _typography.getFontSize, getFontWeight, getHeight, getInputPaddingVertical, getInputPaddingRight, getInputPaddingVertical, getInputPaddingLeft, (0, _branding.getPaletteColor)('greyscale-dark'), _forms.floatingLabelInputStyles);
exports.Input = Input;
var RelativeBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "RelativeBox",
  componentId: "vuit5i-1"
})(["position:relative;"]);
exports.RelativeBox = RelativeBox;

var Wrapper = function Wrapper(_ref6) {
  var isEmbeddable = _ref6.isEmbeddable,
      disabled = _ref6.disabled,
      readOnly = _ref6.readOnly,
      labelStyle = _ref6.labelStyle,
      rest = _objectWithoutProperties(_ref6, ["isEmbeddable", "disabled", "readOnly", "labelStyle"]);

  return isEmbeddable ? /*#__PURE__*/_react["default"].createElement(_box.Box, rest) : /*#__PURE__*/_react["default"].createElement(_forms.FormBox, _extends({
    disabled: disabled,
    readOnly: readOnly,
    labelStyle: labelStyle
  }, rest));
};

exports.Wrapper = Wrapper;

var ShowHideButton = function ShowHideButton(_ref7) {
  var textVisible = _ref7.textVisible,
      onToggle = _ref7.onToggle,
      hideLabel = _ref7.hideLabel,
      revealLabel = _ref7.revealLabel,
      _ref7$disabled = _ref7.disabled,
      disabled = _ref7$disabled === void 0 ? false : _ref7$disabled;
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    align: "stretch"
  }, /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, {
    stacked: "row",
    align: "center",
    onClick: onToggle,
    "aria-label": textVisible ? hideLabel : revealLabel,
    disabled: disabled,
    spacing: "p1"
  }, textVisible ? /*#__PURE__*/_react["default"].createElement(_icon.RevealTextShow, null) : /*#__PURE__*/_react["default"].createElement(_icon.RevealTextHide, null)));
};

exports.ShowHideButton = ShowHideButton;

var ClearButton = function ClearButton(_ref8) {
  var onClick = _ref8.onClick,
      label = _ref8.label;
  return /*#__PURE__*/_react["default"].createElement(ClearButtonHotSpot, {
    onClick: onClick,
    "aria-label": label,
    stacked: "row",
    align: "center",
    justify: "center",
    spacing: "p1"
  }, /*#__PURE__*/_react["default"].createElement(_icon.Close, {
    colorName: "greyscale-black"
  }));
};

exports.ClearButton = ClearButton;
var ClearButtonHotSpot = (0, _styledComponents["default"])(_unstyledButton.UnstyledButton).withConfig({
  displayName: "ClearButtonHotSpot",
  componentId: "vuit5i-2"
})(["width:44px;"]);
exports.ClearButtonHotSpot = ClearButtonHotSpot;
var IconBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "IconBox",
  componentId: "vuit5i-3"
})(["margin:", ";"], function (_ref9) {
  var labelStyle = _ref9.labelStyle;
  return labelStyle === 'external' ? '-14px 0' : undefined;
});
exports.IconBox = IconBox;