ui-kit-ck-consultant 0.5.146 → 0.5.150

package/css/style.css

@@ -1499,6 +1499,9 @@ h3 {
 .d-flex {
   display: flex;
 }
+.flex-column {
+  flex-direction: column;
+}
 
 .text-center {
   text-align: center !important;

package/dist/index.css

@@ -62,7 +62,7 @@
   border-radius: 15px;
 }
 
-._2YluD._22C7A{
+._2YluD._22C7A {
   width: 900px;
 }
 
@@ -137,6 +137,11 @@
   overflow-y: auto;
 }
 
+._Pf5Uh {
+  height: 100%;
+  overflow-y: auto;
+}
+
 @media screen and (max-width: 640px) {
   ._2YluD {
     padding: 32px;
@@ -2798,4 +2803,5 @@
 ._zCJtD > div > span {
   margin: auto;
   padding: 0.4rem 1rem;
+  font-size: 14px;
 }

package/dist/index.js

@@ -46,7 +46,7 @@ function _setPrototypeOf(o, p) {
   return _setPrototypeOf(o, p);
 }
 
-var style = {"modal":"_Tr9L0","modal_container":"_2YluD","large":"_22C7A","modal_valid":"_RsujT","modal_close":"_1AbTJ","modal_header":"_2EzqX","modal_body":"_1-Y1J","full_modal_container":"_1w6wH","full_modal_header":"_2wSoq","full_modal_body":"_3bfp5"};
+var style = {"modal":"_Tr9L0","modal_container":"_2YluD","large":"_22C7A","modal_valid":"_RsujT","modal_close":"_1AbTJ","modal_header":"_2EzqX","modal_body":"_1-Y1J","full_modal_container":"_1w6wH","full_modal_header":"_2wSoq","full_modal_body":"_3bfp5","full_modal_body_no_padding":"_Pf5Uh"};
 
 var Modal = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Modal, _React$Component);
@@ -143,10 +143,10 @@ var FullModal = /*#__PURE__*/function (_React$Component) {
       onClick: this.props.onClose
     }, this.props.iconClose ? this.props.iconClose : /*#__PURE__*/React__default.createElement(reactFontawesome.FontAwesomeIcon, {
       icon: freeSolidSvgIcons.faTimes
-    })), /*#__PURE__*/React__default.createElement("div", {
+    })), this.props.title ? /*#__PURE__*/React__default.createElement("div", {
       className: style.full_modal_header
-    }, /*#__PURE__*/React__default.createElement("h2", null, this.props.title)), /*#__PURE__*/React__default.createElement("div", {
-      className: style.full_modal_body
+    }, /*#__PURE__*/React__default.createElement("h2", null, this.props.title)) : null, /*#__PURE__*/React__default.createElement("div", {
+      className: this.props.noPadding ? style.full_modal_body_no_padding : style.full_modal_body
     }, this.props.children)));
   };
 
@@ -385,7 +385,7 @@ var FormSelect = /*#__PURE__*/function (_React$Component) {
     }, "*") : '') : '', this.props.ignore !== true ? /*#__PURE__*/React__default.createElement("select", {
       className: style$5.form_select,
       onChange: this.props.onChange,
-      value: this.props.value,
+      value: this.props.value ? this.props.value : "DEFAULT",
       name: this.props.name,
       required: this.props.required,
       disabled: this.props.disabled,
@@ -402,7 +402,7 @@ var FormSelect = /*#__PURE__*/function (_React$Component) {
     }) : '') : /*#__PURE__*/React__default.createElement("select", {
       className: style$5.form_select,
       onChange: this.props.onChange,
-      value: this.props.value,
+      value: this.props.value ? this.props.value : "DEFAULT",
       name: this.props.name,
       required: this.props.required,
       disabled: this.props.disabled
@@ -3705,6 +3705,138 @@ var Switch = /*#__PURE__*/function (_React$Component) {
   return Switch;
 }(React__default.Component);
 
+var Gauge = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Gauge, _React$Component);
+
+  function Gauge(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.state = {
+      position: 0
+    };
+    return _this;
+  }
+
+  var _proto = Gauge.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.props.position) {
+      this.setState({
+        position: this.props.position
+      });
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.position !== this.props.position && this.props.position !== this.state.position) {
+      this.setState({
+        position: this.props.position
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: this.props.className
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        display: 'inline-block',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        color: 'var(--black)',
+        marginBottom: '16px'
+      }
+    }, this.props.title), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'relative',
+        width: '100%',
+        height: '22px',
+        backgroundImage: this.props.colors.length === 3 ? "linear-gradient(to right, " + this.props.colors[0] + " 0%, " + this.props.colors[1] + " 50%, " + this.props.colors[2] + " 100%)" : "linear-gradient(to right, " + this.props.colors[0] + ", " + this.props.colors[1] + ")",
+        borderRadius: '8px'
+      },
+      onClick: function onClick(e) {
+        var currentTargetRect = e.currentTarget.getBoundingClientRect();
+        var width = currentTargetRect.width;
+        var positionX = e.pageX - currentTargetRect.left;
+
+        _this2.setState({
+          position: positionX * 100 / width
+        }, function () {
+          return _this2.props.onChange ? _this2.props.onChange(_this2.state.position) : null;
+        });
+      }
+    }, this.props.min ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.props.min + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-18px',
+        fontSize: '10px'
+      }
+    }, "MIN"), /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'absolute',
+        width: '4px',
+        height: '28px',
+        borderRadius: '4px',
+        top: '-3px',
+        backgroundColor: 'black',
+        left: this.props.min + '%',
+        transform: 'translateX(-50%)'
+      }
+    })) : null, this.props.max ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.props.max + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-18px',
+        fontSize: '10px'
+      }
+    }, "MAX"), /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'absolute',
+        width: '4px',
+        height: '28px',
+        borderRadius: '4px',
+        top: '-3px',
+        backgroundColor: 'black',
+        left: this.props.max + '%',
+        transform: 'translateX(-50%)'
+      }
+    })) : null, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.state.position + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-16px',
+        fontSize: '10px',
+        fontWeight: 'bold'
+      }
+    }, parseInt(this.state.position), "%"), /*#__PURE__*/React__default.createElement("div", {
+      className: "cursor-pointer",
+      style: {
+        position: 'absolute',
+        bottom: '-6px',
+        width: 0,
+        height: 0,
+        borderLeft: '10px solid transparent',
+        borderRight: '10px solid transparent',
+        borderBottom: '18px solid black',
+        transform: 'translateX(-50%)',
+        left: this.state.position + '%'
+      }
+    }))));
+  };
+
+  return Gauge;
+}(React__default.Component);
+
 exports.Alert = Alert;
 exports.AlertContainer = AlertContainer;
 exports.AlertElement = AlertElement;
@@ -3732,6 +3864,7 @@ exports.FormRange = FormRange;
 exports.FormSelect = FormSelect;
 exports.FormTextarea = FormTextarea;
 exports.FullModal = FullModal;
+exports.Gauge = Gauge;
 exports.Header = Header;
 exports.HorizontalBarChart = HorizontalBarChart;
 exports.Icon = Icon;