@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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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); }
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 _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 ? (0, _utils.getColor)("text") : disabled ? (0, _utils.getColor)("placeholder") : (0, _utils.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";
}, (0, _utils.getColor)("placeholder"), function (_ref8) {
  var disabled = _ref8.disabled;
  return disabled ? 0.4 : 1;
}, function (_ref9) {
  var placeholderProps = _ref9.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 _objectSpread({
    as: props.size === "tiny" ? _typography.TextMicro : _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"));