@netdata/netdata-ui/dist/es6/components/input/styled.js

netdata UI kit

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import styled, { css } from "styled-components";
import { Icon } from "../icon";
import Flex from "../templates/flex";
import { TextSmall, TextMicro } from "../typography";
import { getColor, getValidatedControlColor } from "../../theme/utils";
var disabledCursorSupport = css(["cursor:", ";pointer-events:", ";"], function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? "not-allowed" : "";
}, function (_ref2) {
  var disabled = _ref2.disabled;
  return disabled ? "none" : "auto";
});
export var Input = styled(Flex).attrs(function (props) {
  return _objectSpread({
    round: 0.5,
    as: "input",
    background: "inputBg",
    backgroundOpacity: props.disabled ? 0.4 : 1,
    width: "100%",
    border: props.error ? "error" : props.hasValue ? "text" : "inputBorder",
    _hover: {
      border: props.error ? "errorText" : "inputBorderHover"
    },
    _focus: {
      border: props.error ? "errorText" : "inputBorderFocus"
    },
    padding: props.size === "tiny" ? [0.5, 1] : props.size === "small" ? [1, 2] : [2, 3],
    height: props.size === "tiny" ? 6 : props.size === "small" ? 7 : 9
  }, props);
}).withConfig({
  displayName: "styled__Input",
  componentId: "sc-1iygz87-0"
})(["font-size:", ";color:", ";", " ", " &::placeholder{font-size:", ";color:", ";opacity:", ";font-weight:normal;", "}", ";"], function (_ref3) {
  var size = _ref3.size;
  return size === "tiny" ? "11px" : size === "small" ? "12px" : "14px";
}, function (_ref4) {
  var disabled = _ref4.disabled,
    hasValue = _ref4.hasValue;
  return hasValue ? getColor("text") : disabled ? getColor("placeholder") : getColor("textLite");
}, function (_ref5) {
  var hasIconLeft = _ref5.hasIconLeft;
  return hasIconLeft && "padding-left: 24px;";
}, function (_ref6) {
  var hasIconRight = _ref6.hasIconRight,
    hasIndicator = _ref6.hasIndicator;
  return (hasIconRight || hasIndicator) && "padding-right: " + (hasIconRight && hasIndicator ? 48 : 24) + "px;";
}, function (_ref7) {
  var size = _ref7.size;
  return size === "tiny" ? "11px" : size === "small" ? "12px" : "14px";
}, getColor("placeholder"), function (_ref8) {
  var disabled = _ref8.disabled;
  return disabled ? 0.4 : 1;
}, function (_ref9) {
  var placeholderProps = _ref9.placeholderProps;
  return placeholderProps || null;
}, disabledCursorSupport);
export var StyledLabel = styled.label.withConfig({
  displayName: "styled__StyledLabel",
  componentId: "sc-1iygz87-1"
})(["width:100%;display:block;", ";"], disabledCursorSupport);
export var LabelText = styled(Flex).attrs(function (props) {
  return _objectSpread({
    as: props.size === "tiny" ? TextMicro : TextSmall,
    strong: true,
    alignItems: "center",
    flex: false,
    width: "100%"
  }, props);
}).withConfig({
  displayName: "styled__LabelText",
  componentId: "sc-1iygz87-2"
})([""]);
export var StyledIcon = styled(Icon).withConfig({
  displayName: "styled__StyledIcon",
  componentId: "sc-1iygz87-3"
})(["flex-grow:0;flex-shrink:0;"]);
export var ErrorIcon = styled(StyledIcon).withConfig({
  displayName: "styled__ErrorIcon",
  componentId: "sc-1iygz87-4"
})(["fill:", ";"], getColor("error"));
export var SuccessIcon = styled(StyledIcon).withConfig({
  displayName: "styled__SuccessIcon",
  componentId: "sc-1iygz87-5"
})(["fill:", ";"], getColor("success"));
export var IconContainer = styled(Flex).withConfig({
  displayName: "styled__IconContainer",
  componentId: "sc-1iygz87-6"
})([""]);
export var MetaContainer = styled(Flex).withConfig({
  displayName: "styled__MetaContainer",
  componentId: "sc-1iygz87-7"
})(["flex-flow:row nowrap;"]);
export var MetaInfo = styled.span.withConfig({
  displayName: "styled__MetaInfo",
  componentId: "sc-1iygz87-8"
})(["font-size:12px;line-height:16px;overflow:hidden;flex-grow:0;flex-shrink:0;color:", ";"], getColor("placeholder"));
export var FieldInfo = styled(MetaInfo).withConfig({
  displayName: "styled__FieldInfo",
  componentId: "sc-1iygz87-9"
})(["color:", ";flex-shrink:1;"], getValidatedControlColor("text"));