"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ItemWithActiveAndSelected = exports.ItemSvg = exports.Item = exports.ListWrap = exports.MenuScroll = exports.Menu = exports.ErrorFloatStyled = exports.LoaderStyled = exports.ChevronDownSvg = exports.LabelSvg = exports.Label = exports.HeaderInnerWrap = exports.HeaderWrap = exports.DropdownWrap = void 0;

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

var _styles = require("@vincent_za/styles");

var _component = _interopRequireDefault(require("../Scroll/component"));

var _Loader = require("../Loader");

var _Error = require("../Error");

var _component2 = _interopRequireDefault(require("../Svg/component"));

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

function _templateObject14() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: ", ";\n  padding: ", " ", ";\n  cursor: pointer;\n  color: ", ";\n  box-shadow: ", ";\n  white-space: nowrap;\n\n  &:hover {\n    color: ", ";\n\n    ", " {\n      svg {\n        fill: ", ";\n      };\n    };\n  };\n\n  &:first-child {\n    margin-top: 0;\n  };\n"]);

  _templateObject14 = function _templateObject14() {
    return data;
  };

  return data;
}

function _templateObject13() {
  var data = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  flex-shrink: 0;\n  width: 1.6rem;\n  height: 1.6rem;\n  \n  svg {\n    fill: ", ";\n\n    ", ":hover & {\n      fill: ", ";\n    };\n  };\n"]);

  _templateObject13 = function _templateObject13() {
    return data;
  };

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: ", ";\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n\n  &:hover {\n    color: ", ";\n  };\n  \n  &:first-child {\n    margin-top: 0;\n  };\n\n  ", ";\n\n  ", ";\n"]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteral([""]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  z-index: 2;\n  position: fixed;\n  top: ", "px;\n  ", ";\n  ", ";\n  ", ";\n  right: auto;\n  left: ", ";\n  padding: ", " ", ";\n  padding-top: ", ";\n  width: auto;\n  ", ";\n  ", ";\n  max-height: ", ";\n  ", ";\n  color: #abb1a7;\n  background: #ECF0E8;\n  box-shadow: 0 4px 11px -6px #ababab;\n  transform: ", ";\n\n  ", ":hover & {\n    ", ";\n  };\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  margin-left: auto;\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  margin: -0.6rem 0 -0.6rem auto;\n  padding-left: 0.6rem;\n  height: ", ";\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-left: auto;\n  padding-left: ", ";\n  flex-shrink: 0;\n  width: 0.9rem;\n  height: 0.9rem;\n  box-sizing: content-box;\n\n  svg {\n    fill: #ADCCC8;\n  };\n\n  ", ":hover & {\n    svg {\n      ", ";\n    };\n  };\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  fill: ", ";\n\n  &:hover {\n    fill: ", ";\n  };\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  display: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ":hover & {\n    ", ";\n  };\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";  \n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    padding-bottom: ", ";\n  "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", ";\n  padding-bottom: ", ";\n  flex-grow: ", ";\n  align-items: center;\n  cursor: ", ";\n  fill: ", ";\n  white-space: nowrap;\n\n  ", ";\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  z-index: ", ";\n  display: ", ";\n  position: relative;\n  flex-grow: ", ";\n  appearance: none !important;\n  outline: none;\n  ", ";\n  ", ";\n\n  &:hover {\n    ", ";\n  };\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var DropdownWrap = _styledComponents.default.div(_templateObject(), function (props) {
  return props.isOpen ? 3 : 'auto';
}, function (props) {
  return props.isHidden ? 'none' : 'flex';
}, function (props) {
  return props.isHeaderStretchWidth ? 1 : 0;
}, function (props) {
  return props.isOpen && 'background: #ECF0E8';
}, function (props) {
  return props.isDisabled && 'opacity: 0.5';
}, function (props) {
  return !props.isClick && !props.isDisabled && !props.isError && "\n      z-index: 3;\n      background: #ECF0E8;\n    ";
});

exports.DropdownWrap = DropdownWrap;

var HeaderWrap = _styledComponents.default.div(_templateObject2(), function (props) {
  return props.isFormVariant ? "".concat(_styles.REM_UNIT_SM, " ").concat(_styles.REM_UNIT_LG) : "".concat(_styles.REM_UNIT_MD, " ").concat(_styles.REM_UNIT_LG);
}, _styles.REM_UNIT_SM, function (props) {
  return props.isHeaderStretchWidth ? 1 : 0;
}, function (props) {
  return props.isBusy ? 'progress' : props.isDisabled || props.isError ? 'not-allowed' : 'default';
}, _styles.SONIC_SILVER, _styles.media.sm(_templateObject3(), _styles.REM_UNIT_MD));

exports.HeaderWrap = HeaderWrap;

var HeaderInnerWrap = _styledComponents.default.div(_templateObject4(), function (props) {
  return props.isFormVariant && "\n    height: 32px;\n    box-shadow: 0 1px 0 ".concat(props.isOpen ? '#dfe4db' : '#ECF0E8', ";\n  ");
}, function (props) {
  return props.isFormVariant && props.hasActiveItem && "\n    padding: ".concat(_styles.REM_UNIT_MD, " 0 ").concat(_styles.REM_UNIT_XSM, ";\n    color: ").concat(_styles.GRAY_X11, ";\n  ");
}, function (props) {
  return props.isError && "\n    ".concat(props.isFormVariant && "box-shadow: 0 1px 0 ".concat(_styles.SUNSET_ORANGE), ";\n    color: ").concat(_styles.SUNSET_ORANGE, ";\n  ");
}, function (props) {
  return props.isInfo && "\n    ".concat(props.isFormVariant && "box-shadow: 0 1px 0 ".concat(_styles.VERY_LIGHT_TANGELO), ";\n    color: ").concat(_styles.VERY_LIGHT_TANGELO, ";\n  ");
});

exports.HeaderInnerWrap = HeaderInnerWrap;

var Label = _styledComponents.default.div(_templateObject5(), function (props) {
  return props.isHidden ? 'none' : 'block';
}, function (props) {
  return props.isOpen && !props.isDisabled && !props.isInfo && !props.isError && "\n    color: ".concat(_styles.STYLE_DROPDOWN_LABEL_COLOR_HOVER, ";\n  ");
}, function (props) {
  return (props.isError || props.isDisabled) && !props.isInfo && "\n    margin-right: ".concat(_styles.REM_UNIT_MD, ";\n  ");
}, DropdownWrap, function (props) {
  return !props.isClick && !props.isDisabled && !props.isInfo && !props.isError && "\n      color: ".concat(_styles.STYLE_DROPDOWN_LABEL_COLOR_HOVER, ";\n    ");
});

exports.Label = Label;
var LabelSvg = (0, _styledComponents.default)(_component2.default)(_templateObject6(), function (props) {
  return props.isOpen ? _styles.STYLE_DROPDOWN_LABEL_FILL_HOVER : _styles.SONIC_SILVER;
}, _styles.STYLE_DROPDOWN_LABEL_FILL_HOVER);
exports.LabelSvg = LabelSvg;
var ChevronDownSvg = (0, _styledComponents.default)(_component2.default)(_templateObject7(), function (props) {
  return !props.isHidden ? 'flex' : 'none';
}, _styles.REM_UNIT_SM, DropdownWrap, function (props) {
  return !props.isClick && 'fill: #ADCCC8';
});
exports.ChevronDownSvg = ChevronDownSvg;
var LoaderStyled = (0, _styledComponents.default)(_Loader.SpinnerLoader)(_templateObject8(), _styles.REM_UNIT_LG);
exports.LoaderStyled = LoaderStyled;
var ErrorFloatStyled = (0, _styledComponents.default)(_Error.ErrorFloat)(_templateObject9());
exports.ErrorFloatStyled = ErrorFloatStyled;

var Menu = _styledComponents.default.div(_templateObject10(), function (props) {
  return props.isOpen ? 'flex' : 'none';
}, function (props) {
  return props.clientRect.top + props.clientRect.height;
}, function (props) {
  return props.isTop && "top: ".concat(props.clientRect.top, "px;");
}, function (props) {
  return props.isBottom && "\n    top: auto;\n    bottom: ".concat(props.clientRect.bottom - props.clientRect.height, "px;\n  ");
}, function (props) {
  return props.isInWidget && "\n    top: auto;\n    margin-top: ".concat(props.clientRect.height, "px;\n  ");
}, function (props) {
  return props.isRight ? "".concat(props.clientRect.right, "px") : 'auto';
}, _styles.REM_UNIT_MD, _styles.REM_UNIT_LG, _styles.REM_UNIT_SM, function (props) {
  return props.isMenuHeaderWidth && "width: ".concat(props.clientRect.width, "px;");
}, function (props) {
  return props.isMenuHeaderWidthMin && "min-width: ".concat(props.clientRect.width, "px;");
}, function (props) {
  return props.isNoMaxHeight ? 'none' : '20rem';
}, function (props) {
  return props.isMenuCutOff && "\n    max-height: ".concat("calc(100vh - ".concat(props.clientRect.top + props.clientRect.height, "px)"), " !important;\n  ");
}, function (props) {
  return props.isRight ? 'translateX(-100%)' : 'none';
}, DropdownWrap, function (props) {
  return !props.isClick && !props.isDisabled && !props.isInfo && !props.isError && 'display: flex';
});

exports.Menu = Menu;
var MenuScroll = (0, _component.default)(Menu);
exports.MenuScroll = MenuScroll;

var ListWrap = _styledComponents.default.ul(_templateObject11());

exports.ListWrap = ListWrap;

var Item = _styledComponents.default.li(_templateObject12(), _styles.REM_UNIT_MD, function (props) {
  return props.isActive ? _styles.STYLE_DROPDOWN_COLOR_ACTIVE : _styles.STYLE_DROPDOWN_COLOR_HOVER;
}, function (props) {
  return props.isActive && "\n    color: ".concat(_styles.STYLE_DROPDOWN_COLOR_ACTIVE, ";\n    font-family: ").concat(_styles.FONT_BOLD, ";\n  ");
}, function (props) {
  return props.isDisabled && "\n    pointer-events: none;\n    color: ".concat(_styles.STYLE_DROPDOWN_COLOR_DISABLED, ";\n  ");
});

exports.Item = Item;
var ItemSvg = (0, _styledComponents.default)(_component2.default)(_templateObject13(), _styles.REM_UNIT_MD, function (props) {
  return props.isActive ? _styles.STYLE_DROPDOWN_FILL_ACTIVE : _styles.STYLE_DROPDOWN_FILL;
}, Item, function (props) {
  return props.isActive ? _styles.STYLE_DROPDOWN_FILL_ACTIVE : _styles.STYLE_DROPDOWN_FILL_HOVER;
});
exports.ItemSvg = ItemSvg;

var ItemWithActiveAndSelected = _styledComponents.default.li(_templateObject14(), _styles.REM_UNIT_XSM, _styles.REM_UNIT_XSM, _styles.REM_UNIT_LG, function (props) {
  return props.isSelected ? _styles.STYLE_DROPDOWN_COLOR_ACTIVE : _styles.STYLE_DROPDOWN_COLOR;
}, function (props) {
  return props.isActive ? "inset 1px 0 0 0 ".concat(_styles.STYLE_DROPDOWN_COLOR_ACTIVE) : 'none';
}, function (props) {
  return props.isActive || props.isSelected ? _styles.STYLE_DROPDOWN_COLOR_ACTIVE : _styles.STYLE_DROPDOWN_COLOR_HOVER;
}, ItemSvg, function (props) {
  return props.isActive || props.isSelected ? _styles.STYLE_DROPDOWN_FILL_ACTIVE : _styles.STYLE_DROPDOWN_FILL_HOVER;
});

exports.ItemWithActiveAndSelected = ItemWithActiveAndSelected;