@i-novus/n2o-components 1.0.0

package/lib/layouts/Spinner/Spinner.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spinner = exports.SpinnerType = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactstrap = require("reactstrap");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _eq = _interopRequireDefault(require("lodash/eq"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _excluded = ["children", "className", "text", "title", "transparent", "color", "loading"],
+    _excluded2 = ["children", "loading", "className"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var SpinnerType;
+exports.SpinnerType = SpinnerType;
+
+(function (SpinnerType) {
+  SpinnerType["cover"] = "cover";
+  SpinnerType["inline"] = "inline";
+})(SpinnerType || (exports.SpinnerType = SpinnerType = {}));
+
+var Spinner = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Spinner, _Component);
+
+  var _super = _createSuper(Spinner);
+
+  function Spinner(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Spinner);
+    _this = _super.call(this, props);
+    _this.state = {
+      showSpinner: false
+    };
+    _this.timeoutId = null;
+    _this.unmounted = null;
+    _this.renderCoverSpinner = _this.renderCoverSpinner.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.renderLineSpinner = _this.renderLineSpinner.bind((0, _assertThisInitialized2["default"])(_this));
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Spinner, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      var loading = this.props.loading;
+
+      if (prevProps.loading !== loading) {
+        if (this.timeoutId) {
+          clearTimeout(this.timeoutId);
+        }
+
+        this.timeoutId = setTimeout(function () {
+          var loading = _this2.props.loading;
+
+          if (!_this2.unmounted) {
+            _this2.setState({
+              showSpinner: loading
+            });
+          }
+        }, 2000);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unmounted = true;
+    }
+  }, {
+    key: "renderCoverSpinner",
+    value: function renderCoverSpinner() {
+      var _classNames;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          _this$props$className = _this$props.className,
+          className = _this$props$className === void 0 ? '' : _this$props$className,
+          text = _this$props.text,
+          title = _this$props.title,
+          transparent = _this$props.transparent,
+          color = _this$props.color,
+          loading = _this$props.loading,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var showSpinner = this.state.showSpinner;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])('n2o-spinner-wrapper', (_classNames = {}, (0, _defineProperty2["default"])(_classNames, className, className), (0, _defineProperty2["default"])(_classNames, 'n2o-disabled-page', loading), _classNames))
+      }, showSpinner && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "n2o-spinner-container "
+      }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Spinner, (0, _extends2["default"])({
+        className: "spinner-border",
+        color: color
+      }, (0, _omit["default"])(rest, ['loading']))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "loading_title loading_text"
+      }, title), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "loading_text"
+      }, text)), !transparent ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "spinner-background"
+      }) : null), children);
+    }
+  }, {
+    key: "renderLineSpinner",
+    value: function renderLineSpinner() {
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          loading = _this$props2.loading,
+          className = _this$props2.className,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded2);
+
+      if (loading) {
+        return /*#__PURE__*/_react["default"].createElement(_reactstrap.Spinner, (0, _extends2["default"])({
+          className: "spinner"
+        }, (0, _omit["default"])(rest, ['type'])));
+      }
+
+      if (_react["default"].Children.count(children)) {
+        return children;
+      }
+
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var type = this.props.type;
+      return (0, _eq["default"])(type, SpinnerType.cover) ? this.renderCoverSpinner() : this.renderLineSpinner();
+    }
+  }]);
+  return Spinner;
+}(_react.Component);
+
+exports.Spinner = Spinner;
+(0, _defineProperty2["default"])(Spinner, "defaultProps", {
+  loading: true,
+  type: 'inline',
+  text: '',
+  transparent: false,
+  color: 'primary',
+  minSpinnerTimeToShow: 250
+});
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9sYXlvdXRzL1NwaW5uZXIvU3Bpbm5lci50c3giXSwibmFtZXMiOlsiU3Bpbm5lclR5cGUiLCJTcGlubmVyIiwicHJvcHMiLCJzdGF0ZSIsInNob3dTcGlubmVyIiwidGltZW91dElkIiwidW5tb3VudGVkIiwicmVuZGVyQ292ZXJTcGlubmVyIiwiYmluZCIsInJlbmRlckxpbmVTcGlubmVyIiwicHJldlByb3BzIiwibG9hZGluZyIsImNsZWFyVGltZW91dCIsInNldFRpbWVvdXQiLCJzZXRTdGF0ZSIsImNoaWxkcmVuIiwiY2xhc3NOYW1lIiwidGV4dCIsInRpdGxlIiwidHJhbnNwYXJlbnQiLCJjb2xvciIsInJlc3QiLCJSZWFjdCIsIkNoaWxkcmVuIiwiY291bnQiLCJ0eXBlIiwiY292ZXIiLCJDb21wb25lbnQiLCJtaW5TcGlubmVyVGltZVRvU2hvdyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7Ozs7Ozs7Ozs7OztJQUlZQSxXOzs7V0FBQUEsVztBQUFBQSxFQUFBQSxXO0FBQUFBLEVBQUFBLFc7R0FBQUEsVywyQkFBQUEsVzs7SUFvQkNDLE87Ozs7O0FBS1QsbUJBQVlDLEtBQVosRUFBMEI7QUFBQTs7QUFBQTtBQUN0Qiw4QkFBTUEsS0FBTjtBQUVBLFVBQUtDLEtBQUwsR0FBYTtBQUNUQyxNQUFBQSxXQUFXLEVBQUU7QUFESixLQUFiO0FBSUEsVUFBS0MsU0FBTCxHQUFpQixJQUFqQjtBQUNBLFVBQUtDLFNBQUwsR0FBaUIsSUFBakI7QUFFQSxVQUFLQyxrQkFBTCxHQUEwQixNQUFLQSxrQkFBTCxDQUF3QkMsSUFBeEIsZ0RBQTFCO0FBQ0EsVUFBS0MsaUJBQUwsR0FBeUIsTUFBS0EsaUJBQUwsQ0FBdUJELElBQXZCLGdEQUF6QjtBQVhzQjtBQVl6Qjs7OztXQUVELDRCQUFtQkUsU0FBbkIsRUFBcUM7QUFBQTs7QUFDakMsVUFBUUMsT0FB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QUEsSUFBSSxFQUFFLFFBRlk7QUFHbEJSLEVBQUFBLElBQUksRUFBRSxFQUhZO0FBSWxCRSxFQUFBQSxXQUFXLEVBQUUsS0FKSztBQUtsQkMsRUFBQUEsS0FBSyxFQUFFLFNBTFc7QUFNbEJRLEVBQUFBLG9CQUFvQixFQUFFO0FBTkosQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnQsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgU3Bpbm5lciBhcyBCYXNlU3Bpbm5lciB9IGZyb20gJ3JlYWN0c3RyYXAnXG5pbXBvcnQgY2xhc3NOYW1lcyBmcm9tICdjbGFzc25hbWVzJ1xuaW1wb3J0IGVxIGZyb20gJ2xvZGFzaC9lcSdcbmltcG9ydCBvbWl0IGZyb20gJ2xvZGFzaC9vbWl0J1xuXG5pbXBvcnQgeyBUQmFzZVByb3BzIH0gZnJvbSAnLi4vLi4vdHlwZXMnXG5cbmV4cG9ydCBlbnVtIFNwaW5uZXJUeXBlIHtcbiAgICBjb3ZlciA9ICdjb3ZlcicsXG4gICAgaW5saW5lID0gJ2lubGluZSdcbn1cblxudHlwZSBQcm9wcyA9IFRCYXNlUHJvcHMgJiB7XG4gICAgY2hpbGRyZW46IFJlYWN0Tm9kZSxcbiAgICBjb2xvcjogc3RyaW5nLFxuICAgIGxvYWRpbmc6IGJvb2xlYW4sXG4gICAgbWluU3Bpbm5lclRpbWVUb1Nob3c6IG51bWJlcixcbiAgICB0ZXh0OiBzdHJpbmcsXG4gICAgdGl0bGU6IHN0cmluZyxcbiAgICB0cmFuc3BhcmVudDogYm9vbGVhbixcbiAgICB0eXBlOiBTcGlubmVyVHlwZVxufVxuXG50eXBlIFN0YXRlID0ge1xuICAgIHNob3dTcGlubmVyOiBib29sZWFuXG59XG5cbmV4cG9ydCBjbGFzcyBTcGlubmVyIGV4dGVuZHMgQ29tcG9uZW50PFByb3BzLCBTdGF0ZT4ge1xuICAgIHRpbWVvdXRJZDogbnVtYmVyIHwgbnVsbFxuXG4gICAgdW5tb3VudGVkOiBib29sZWFuIHwgbnVsbFxuXG4gICAgY29uc3RydWN0b3IocHJvcHM6IFByb3BzKSB7XG4gICAgICAgIHN1cGVyKHByb3BzKVxuXG4gICAgICAgIHRoaXMuc3RhdGUgPSB7XG4gICAgICAgICAgICBzaG93U3Bpbm5lcjogZmFsc2UsXG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnRpbWVvdXRJZCA9IG51bGxcbiAgICAgICAgdGhpcy51bm1vdW50ZWQgPSBudWxsXG5cbiAgICAgICAgdGhpcy5yZW5kZXJDb3ZlclNwaW5uZXIgPSB0aGlzLnJlbmRlckNvdmVyU3Bpbm5lci5iaW5kKHRoaXMpXG4gICAgICAgIHRoaXMucmVuZGVyTGluZVNwaW5uZXIgPSB0aGlzLnJlbmRlckxpbmVTcGlubmVyLmJpbmQodGhpcylcbiAgICB9XG5cbiAgICBjb21wb25lbnREaWRVcGRhdGUocHJldlByb3BzOiBQcm9wcykge1xuICAgICAgICBjb25zdCB7IGxvYWRpbmcgfSA9IHRoaXMucHJvcHNcblxuICAgICAgICBpZiAocHJldlByb3BzLmxvYWRpbmcgIT09IGxvYWRpbmcpIHtcbiAgICAgICAgICAgIGlmICh0aGlzLnRpbWVvdXRJZCkge1xuICAgICAgICAgICAgICAgIGNsZWFyVGltZW91dCh0aGlzLnRpbWVvdXRJZClcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIHRoaXMudGltZW91dElkID0gc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgY29uc3QgeyBsb2FkaW5nIH0gPSB0aGlzLnByb3BzXG5cbiAgICAgICAgICAgICAgICBpZiAoIXRoaXMudW5tb3VudGVkKSB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMuc2V0U3RhdGUoeyBzaG93U3Bpbm5lcjogbG9hZGluZyB9KVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0sIDIwMDApXG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICAgICAgdGhpcy51bm1vdW50ZWQgPSB0cnVlXG4gICAgfVxuXG4gICAgcmVuZGVyQ292ZXJTcGlubmVyKCkge1xuICAgICAgICBjb25zdCB7XG4gICAgICAgICAgICBjaGlsZHJlbixcbiAgICAgICAgICAgIGNsYXNzTmFtZSA9ICcnLFxuICAgICAgICAgICAgdGV4dCxcbiAgICAgICAgICAgIHRpdGxlLFxuICAgICAgICAgICAgdHJhbnNwYXJlbnQsXG4gICAgICAgICAgICBjb2xvcixcbiAgICAgICAgICAgIGxvYWRpbmcsXG4gICAgICAgICAgICAuLi5yZXN0XG4gICAgICAgIH0gPSB0aGlzLnByb3BzXG4gICAgICAgIGNvbnN0IHsgc2hvd1NwaW5uZXIgfSA9IHRoaXMuc3RhdGVcblxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcygnbjJvLXNwaW5uZXItd3JhcHBlcicsIHtcbiAgICAgICAgICAgICAgICAgICAgW2NsYXNzTmFtZV06IGNsYXNzTmFtZSxcbiAgICAgICAgICAgICAgICAgICAgJ24yby1kaXNhYmxlZC1wYWdlJzogbG9hZGluZyxcbiAgICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7c2hvd1NwaW5uZXIgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJuMm8tc3Bpbm5lci1jb250YWluZXIgXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJhc2VTcGlubmVyIGNsYXNzTmFtZT1cInNwaW5uZXItYm9yZGVyXCIgY29sb3I9e2NvbG9yfSB7Li4ub21pdChyZXN0LCBbJ2xvYWRpbmcnXSl9IC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJsb2FkaW5nX3RpdGxlIGxvYWRpbmdfdGV4dFwiPnt0aXRsZX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImxvYWRpbmdfdGV4dFwiPnt0ZXh0fTwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICB7IXRyYW5zcGFyZW50ID8gPGRpdiBjbGFzc05hbWU9XCJzcGlubmVyLWJhY2tncm91bmRcIiAvPiA6IG51bGx9XG4gICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIClcbiAgICB9XG5cbiAgICByZW5kZXJMaW5lU3Bpbm5lcigpIHtcbiAgICAgICAgY29uc3Qge1xuICAgICAgICAgICAgY2hpbGRyZW4sXG4gICAgICAgICAgICBsb2FkaW5nLFxuICAgICAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICAgICAgLi4ucmVzdFxuICAgICAgICB9ID0gdGhpcy5wcm9wc1xuXG4gICAgICAgIGlmIChsb2FkaW5nKSB7XG4gICAgICAgICAgICByZXR1cm4gPEJhc2VTcGlubmVyIGNsYXNzTmFtZT1cInNwaW5uZXJcIiB7Li4ub21pdChyZXN0LCBbJ3R5cGUnXSl9IC8+XG4gICAgICAgIH1cbiAgICAgICAgaWYgKFJlYWN0LkNoaWxkcmVuLmNvdW50KGNoaWxkcmVuKSkge1xuICAgICAgICAgICAgcmV0dXJuIGNoaWxkcmVuXG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gbnVsbFxuICAgIH1cblxuICAgIHJlbmRlcigpIHtcbiAgICAgICAgY29uc3QgeyB0eXBlIH0gPSB0aGlzLnByb3BzXG5cbiAgICAgICAgcmV0dXJuIGVxKHR5cGUsIFNwaW5uZXJUeXBlLmNvdmVyKVxuICAgICAgICAgICAgPyB0aGlzLnJlbmRlckNvdmVyU3Bpbm5lcigpXG4gICAgICAgICAgICA6IHRoaXMucmVuZGVyTGluZVNwaW5uZXIoKVxuICAgIH1cblxuICAgIHN0YXRpYyBkZWZhdWx0UHJvcHMgPSB7XG4gICAgICAgIGxvYWRpbmc6IHRydWUsXG4gICAgICAgIHR5cGU6ICdpbmxpbmUnLFxuICAgICAgICB0ZXh0OiAnJyxcbiAgICAgICAgdHJhbnNwYXJlbnQ6IGZhbHNlLFxuICAgICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgICBtaW5TcGlubmVyVGltZVRvU2hvdzogMjUwLFxuICAgIH0gYXMgUHJvcHNcbn1cbiJdfQ==

package/lib/styles/components/Calendar.scss

@@ -0,0 +1,125 @@
+@import '../variables.scss';
+
+.n2o-calendar-body-item {
+    &.active {
+        background-color: $primary;
+        color: white;
+    }
+
+    &:hover:not(.active):not(.other-decade) {
+        background-color: $gray-200;
+    }
+
+    &.other-decade {
+        color: $gray-200;
+    }
+}
+
+.n2o-calendar {
+    display: flex;
+    flex-direction: column;
+    background: white;
+    min-width: $calendar-min-width;
+    max-width: $calendar-max-width;
+    min-height: $calendar-height;
+    border: 1px solid $gray-200;
+    padding: 5px;
+
+    .n2o-calendar-body {
+        display: flex;
+        flex-wrap: wrap;
+        position: relative;
+        bottom: 0;
+        flex-grow: 1;
+        align-items: stretch;
+
+        /* stylelint-disable-next-line no-descending-specificity */
+        .n2o-calendar-body-item {
+            font-size: 0.8rem;
+            padding: 3px;
+            width: 33%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            cursor: pointer;
+            margin: 5px 0;
+        }
+    }
+}
+
+.n2o-calendar-picker {
+    display: flex;
+    overflow-y: scroll;
+    width: 33%;
+    flex-direction: column;
+    text-align: center;
+}
+
+.n2o-calendar-timepicker {
+    max-height: 160px;
+    display: flex;
+}
+
+.n2o-calendar:focus {
+    outline: none;
+}
+
+.n2o-calendar td {
+    text-align: center;
+}
+
+.n2o-calendar thead td {
+    color: $gray-400;
+    padding: 0 5px;
+}
+
+.n2o-picker-dropdown {
+    z-index: $zindex-dropdown !important;
+}
+
+.n2o-calendar-month-header .fa {
+    font-size: 0.8* $font-size-base;
+}
+
+.n2o-calendar-year-header .fa {
+    font-size: 0.8* $font-size-base;
+}
+
+.n2o-calendar-time-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+    padding-bottom: 5px;
+}
+
+.n2o-calendar-time-unit {
+    cursor: pointer;
+
+    &.active {
+        background-color: $primary;
+        color: white;
+    }
+
+    &:hover:not(.active) {
+        background-color: $gray-200;
+    }
+}
+
+.n2o-calendar-time-container {
+    text-align: center;
+    margin: 10px auto 0;
+    //  margin-top: 10px;
+    bottom: 5px;
+    display: table;
+}
+
+.n2o-calendar-table {
+    border-collapse: separate;
+    border-spacing: 2px 0;
+    margin: auto;
+}
+
+.btn.n2o-calendar-button {
+    width: 40px;
+}

package/lib/styles/components/CalendarHeader.scss

@@ -0,0 +1,75 @@
+.n2o-calendar-header {
+    display: flex;
+    justify-content: space-between;
+    width: auto;
+    padding: 8px;
+}
+
+.n2o-calendar-month-header,
+.n2o-calendar-year-header {
+    display: inline-block;
+}
+
+.n2o-calendar-year-header {
+    float: right;
+    margin-right: 7px;
+}
+
+.n2o-calendar-icon {
+    cursor: pointer;
+
+    &::before {
+        font-size: 1.2rem;
+        vertical-align: -webkit-baseline-middle;
+        vertical-align: -moz-middle-with-baseline;
+    }
+}
+
+.n2o-calendar-dropdown-container {
+    display: inline-block;
+    position: relative;
+}
+
+.n2o-calendar-dropdown {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index: 2000;
+    padding: 5px;
+    background-color: white;
+}
+
+.n2o-calendar-dropdown-item {
+    list-style: none;
+    cursor: pointer;
+    font-size: 10px;
+    padding: 1px;
+    margin: 0;
+}
+
+.n2o-calendar-dropdown-item:hover {
+    background-color: #bce8f1;
+}
+
+.n2o-calendar-dropdown-menu {
+    margin: 0;
+    padding: 0;
+    background: white;
+    z-index: 1051;
+    position: absolute;
+}
+
+.n2o-calendar-current-month,
+.n2o-calendar-current-year {
+    cursor: pointer;
+}
+
+.n2o-calendar-current-date {
+    display: flex;
+    justify-content: space-around;
+}
+
+.n2o-calendar-year,
+.n2o-calendar-month {
+    position: relative;
+}

package/lib/styles/components/DateInputGroup.scss

@@ -0,0 +1,39 @@
+@import '../variables.scss';
+
+.n2o-date-input-group {
+    display: flex;
+}
+
+.n2o-calendar-button {
+    width: $datepicker-button-width;
+    border: none;
+    background: transparent;
+    margin-left: -$datepicker-button-width;
+
+    &:focus,
+    &:hover,
+    &:active {
+        outline: 0;
+        box-shadow: none;
+
+        &:not([disabled]) {
+            color: $link-hover-color;
+        }
+    }
+}
+
+.n2o-date-input {
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+
+    &.n2o-date-input-first {
+        width: calc(100% - #{$datepicker-button-width} + 3px);
+    }
+
+    &.n2o-date-input-last {
+        > input {
+            padding-right: $datepicker-button-width;
+        }
+    }
+}

package/lib/styles/components/DatePicker.scss

@@ -0,0 +1,18 @@
+.n2o-calendar-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.n2o-date-picker {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.n2o-date-picker-container {
+    display: block;
+    width: 100%;
+}

package/lib/styles/components/Day.scss

@@ -0,0 +1,29 @@
+@import '../variables.scss';
+
+.n2o-calendar-day {
+    cursor: pointer;
+    padding: $datepicker-day-padding;
+}
+
+.n2o-calendar-day:hover:not(.disabled):not(.selected) {
+    color: $datepicker-day-color-hover;
+    background: $datepicker-day-background-color-hover;
+}
+
+.n2o-calendar-day.other-month {
+    color: $gray-300;
+}
+
+.n2o-calendar-day.selected {
+    color: $datepicker-day-color-selected;
+    background-color: $datepicker-day-background-color-selected;
+}
+
+.n2o-calendar-day.current {
+    border: 1px solid $datepicker-day-border-color-current;
+}
+
+.n2o-calendar-day.disabled {
+    color: $gray-200;
+    cursor: not-allowed;
+}

package/lib/styles/components/OutputList.scss

@@ -0,0 +1,14 @@
+.n2o-output-list {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.n2o-output-list__item--link {
+    text-decoration: underline;
+}
+
+.n2o-output-list--column {
+    flex-direction: column;
+}

package/lib/styles/components/OutputText.scss

@@ -0,0 +1,50 @@
+@import "../variables";
+
+.n2o-output-text {
+    display: flex;
+    align-items: flex-start;
+    align-content: flex-start;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+
+    .details-label {
+        display: inline-block;
+        border-bottom: 1px dashed rgba(38, 50, 56, 0.55);
+        cursor: pointer;
+        margin-left: $input-padding-y;
+    }
+
+    > .text {
+        display: flex;
+        align-items: center;
+        order: 2;
+        min-height: 1.4rem;
+    }
+
+    > .icon {
+        margin-top: 2px;
+    }
+
+    &.right {
+        > .icon {
+            order: 3;
+        }
+    }
+
+    &.left {
+        > .icon {
+            order: 1;
+        }
+    }
+}
+
+.n2o-output-text--expandable > .text {
+    display: block;
+}
+
+.n2o-output-text--ellipsis > .text > span {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/lib/styles/controls/CodeEditor.scss

@@ -0,0 +1,4 @@
+.n2o-code-editor {
+    display: flex;
+    border: 1px solid #d1d1d1;
+}

package/lib/styles/controls/InputNumber.scss

@@ -0,0 +1,36 @@
+@import '../variables.scss';
+
+.n2o-input-number {
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+}
+
+.n2o-input-number-buttons {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    top: calc($input-padding-y / 2);
+    bottom: calc($input-padding-y / 2);
+    right: $input-padding-x;
+}
+
+.n2o-input-number-buttons > button {
+    display: flex;
+    cursor: pointer;
+    padding: 0;
+    flex-grow: 1;
+    outline: none;
+    border: none;
+    background: none;
+    color: $gray-300;
+}
+
+.n2o-input-number-buttons > button:hover,
+.n2o-input-number-buttons > button:focus {
+    color: $pink;
+}
+
+.n2o-number-interval-description {
+    font-size: 0.9rem;
+}

package/lib/styles/controls/InputPassword.scss

@@ -0,0 +1,17 @@
+.n2o-input-password {
+    position: relative;
+    width: 100%;
+
+    .n2o-input-password-toggler {
+        position: absolute;
+        right: 2px;
+        top: calc(50% - 16px);
+        width: 32px;
+        height: 32px;
+        opacity: 0.5;
+
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+}

package/lib/styles/controls/InputText.scss

@@ -0,0 +1,59 @@
+@import '../variables.scss';
+
+.n2o-input-text__affix-wrapper {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    display: inline-flex;
+
+    .n2o-input-text {
+        padding: 0;
+        border: none;
+        outline: none;
+        width: 100%;
+
+        &:disabled {
+            background-color: $input-disabled-bg;
+            opacity: 1;
+        }
+    }
+
+    &.focused {
+        color: $input-focus-color;
+        background-color: $input-focus-bg;
+        border-color: $input-focus-border-color;
+        outline: 0;
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+            box-shadow: $input-box-shadow, $input-focus-box-shadow;
+        }
+
+        @else {
+            box-shadow: $input-focus-box-shadow;
+        }
+    }
+
+    &.disabled {
+        background-color: $input-disabled-bg;
+        opacity: 1;
+    }
+}
+
+.n2o-input-text__prefix,
+.n2o-input-text__suffix {
+    display: flex;
+    flex: none;
+    align-items: center;
+}
+
+.n2o-input-text__prefix {
+    margin-right: $input-padding-x;
+}
+
+.n2o-input-text__suffix {
+    margin-left: $input-padding-x;
+}
+
+.n2o-input.form-control.n2o-input-text {
+    text-overflow: ellipsis;
+}