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

netdata UI kit

"use strict";

exports.__esModule = true;
exports.SuccessIcon = exports.StyledLabel = exports.StyledIcon = exports.MetaInfo = exports.MetaContainer = exports.LabelText = exports.Input = exports.IconContainer = exports.FieldInfo = exports.ErrorIcon = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _icon = require("../icon");
var _flex = _interopRequireDefault(require("../templates/flex"));
var _typography = require("../typography");
var _utils = require("../../theme/utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var disabledCursorSupport = (0, _styledComponents.css)(["cursor:", ";pointer-events:", ";"], function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? "not-allowed" : "";
}, function (_ref2) {
  var disabled = _ref2.disabled;
  return disabled ? "none" : "auto";
});
var Input = exports.Input = (0, _styledComponents["default"])(_flex["default"]).attrs(function (props) {
  return _extends({
    round: 0.5,
    as: "input",
    background: "inputBg",
    backgroundOpacity: props.disabled ? 0.4 : 1,
    width: "100%",
    border: props.error ? "error" : "inputBorder",
    _hover: {
      border: props.error ? "errorText" : "inputBorderHover"
    },
    _focus: {
      border: props.error ? "error" : "inputBorder"
    },
    padding: [0.5, 1],
    height: 6
  }, props);
}).withConfig({
  displayName: "styled__Input",
  componentId: "sc-1iygz87-0"
})(["font-size:12px;color:", ";", " ", " ", " &::placeholder{font-size:12px;color:", ";opacity:", ";font-weight:normal;", "}", ";"], function (_ref3) {
  var disabled = _ref3.disabled,
    hasValue = _ref3.hasValue;
  return hasValue ? (0, _utils.getColor)("text") : disabled ? (0, _utils.getColor)("placeholder") : (0, _utils.getColor)("textLite");
}, function (_ref4) {
  var hasIconLeft = _ref4.hasIconLeft;
  return hasIconLeft && "padding-left: 24px;";
}, function (_ref5) {
  var hasIconRight = _ref5.hasIconRight,
    hasIndicator = _ref5.hasIndicator;
  return (hasIconRight || hasIndicator) && "padding-right: " + (hasIconRight && hasIndicator ? 48 : 24) + "px;";
}, function (_ref6) {
  var textAlign = _ref6.textAlign;
  return textAlign ? "text-align: " + textAlign + ";" : "";
}, (0, _utils.getColor)("placeholder"), function (_ref7) {
  var disabled = _ref7.disabled;
  return disabled ? 0.4 : 1;
}, function (_ref8) {
  var placeholderProps = _ref8.placeholderProps;
  return placeholderProps || null;
}, disabledCursorSupport);
var StyledLabel = exports.StyledLabel = _styledComponents["default"].label.withConfig({
  displayName: "styled__StyledLabel",
  componentId: "sc-1iygz87-1"
})(["width:100%;display:block;", ";"], disabledCursorSupport);
var LabelText = exports.LabelText = (0, _styledComponents["default"])(_flex["default"]).attrs(function (props) {
  return _extends({
    as: _typography.TextSmall,
    strong: true,
    alignItems: "center",
    flex: false,
    width: "100%"
  }, props);
}).withConfig({
  displayName: "styled__LabelText",
  componentId: "sc-1iygz87-2"
})([""]);
var StyledIcon = exports.StyledIcon = (0, _styledComponents["default"])(_icon.Icon).withConfig({
  displayName: "styled__StyledIcon",
  componentId: "sc-1iygz87-3"
})(["flex-grow:0;flex-shrink:0;"]);
var ErrorIcon = exports.ErrorIcon = (0, _styledComponents["default"])(StyledIcon).withConfig({
  displayName: "styled__ErrorIcon",
  componentId: "sc-1iygz87-4"
})(["fill:", ";"], (0, _utils.getColor)("error"));
var SuccessIcon = exports.SuccessIcon = (0, _styledComponents["default"])(StyledIcon).withConfig({
  displayName: "styled__SuccessIcon",
  componentId: "sc-1iygz87-5"
})(["fill:", ";"], (0, _utils.getColor)("success"));
var IconContainer = exports.IconContainer = (0, _styledComponents["default"])(_flex["default"]).withConfig({
  displayName: "styled__IconContainer",
  componentId: "sc-1iygz87-6"
})([""]);
var MetaContainer = exports.MetaContainer = (0, _styledComponents["default"])(_flex["default"]).withConfig({
  displayName: "styled__MetaContainer",
  componentId: "sc-1iygz87-7"
})(["flex-flow:row nowrap;"]);
var MetaInfo = exports.MetaInfo = _styledComponents["default"].span.withConfig({
  displayName: "styled__MetaInfo",
  componentId: "sc-1iygz87-8"
})(["font-size:12px;line-height:16px;overflow:hidden;flex-grow:0;flex-shrink:0;color:", ";"], (0, _utils.getColor)("placeholder"));
var FieldInfo = exports.FieldInfo = (0, _styledComponents["default"])(MetaInfo).withConfig({
  displayName: "styled__FieldInfo",
  componentId: "sc-1iygz87-9"
})(["color:", ";flex-shrink:1;"], (0, _utils.getValidatedControlColor)("text"));