@rio-cloud/rio-uikit 0.15.0-beta-46 → 0.15.0

package/lib/components/radiobutton/RadioButton.js

@@ -9,174 +9,139 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "icon", "iconLabelPosition", "iconSize", "inline", "inputRef", "label", "name", "onChange", "onClick", "right", "tabIndex", "value"];
+
 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 RadioButton = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(RadioButton, _Component);
-
-  var _super = _createSuper(RadioButton);
-
-  function RadioButton(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, RadioButton);
-    _this = _super.call(this, props);
-    _this.handleToggleKeyDown = _this.handleToggleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  }
+var RadioButtonIcon = function RadioButtonIcon(props) {
+  var icon = props.icon,
+      iconSize = props.iconSize,
+      iconLabelPosition = props.iconLabelPosition,
+      text = props.text;
+  var iconStyles = {
+    width: "".concat(iconSize, "px"),
+    height: "".concat(iconSize, "px"),
+    fontSize: "".concat(iconSize, "px"),
+    lineHeight: "".concat(iconSize, "px")
+  };
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "radio-icon label-".concat(iconLabelPosition)
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph ".concat(icon),
+    style: iconStyles
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: 'radio-label'
+  }, text));
+};
 
-  (0, _createClass2.default)(RadioButton, [{
-    key: "getInput",
-    value: function getInput() {
-      return _reactDom.default.findDOMNode(this).children[0];
-    }
-  }, {
-    key: "handleToggleKeyDown",
-    value: function handleToggleKeyDown(event) {
-      switch (event.keyCode) {
-        case 32:
-          // toggle on space
-          this.toggle(event);
-          break;
-
-        case 13:
-          // open on enter
-          this.toggle(event);
-          break;
-
-        default:
-          break;
-      }
-    }
-  }, {
-    key: "toggle",
-    value: function toggle(event) {
-      event.preventDefault();
-      var _this$props = this.props,
-          disabled = _this$props.disabled,
-          checked = _this$props.checked,
-          onClick = _this$props.onClick,
-          onChange = _this$props.onChange;
-
-      if (disabled) {
-        return;
-      } // Controlled case
-
-
-      if (checked !== null && checked !== undefined) {
-        onChange(event);
-        return;
-      }
-
-      var input = this.getInput();
-      input.checked = !input.checked; // For testing capabilities
-
-      this.checked = input.checked;
-      onClick(event);
-    }
-  }, {
-    key: "renderRadioText",
-    value: function renderRadioText(text) {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: 'radio-text'
-      }, /*#__PURE__*/_react.default.createElement("span", null, text));
+var RadioButton = function RadioButton(props) {
+  var checked = props.checked,
+      children = props.children,
+      className = props.className,
+      custom = props.custom,
+      defaultChecked = props.defaultChecked,
+      disabled = props.disabled,
+      icon = props.icon,
+      iconLabelPosition = props.iconLabelPosition,
+      iconSize = props.iconSize,
+      inline = props.inline,
+      inputRef = props.inputRef,
+      label = props.label,
+      name = props.name,
+      onChange = props.onChange,
+      onClick = props.onClick,
+      right = props.right,
+      tabIndex = props.tabIndex,
+      value = props.value,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var labelRef = (0, _react.useRef)();
+
+  var handleToggleKeyDown = function handleToggleKeyDown(event) {
+    switch (event.keyCode) {
+      case 32:
+        // toggle on space
+        toggle(event);
+        break;
+
+      case 13:
+        // open on enter
+        toggle(event);
+        break;
+
+      default:
+        break;
     }
-  }, {
-    key: "renderRadioIcon",
-    value: function renderRadioIcon(icon, iconSize, iconLabelPosition, text) {
-      var iconStyles = {
-        width: "".concat(iconSize, "px"),
-        height: "".concat(iconSize, "px"),
-        fontSize: "".concat(iconSize, "px"),
-        lineHeight: "".concat(iconSize, "px")
-      };
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: "radio-icon label-".concat(iconLabelPosition)
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "rioglyph ".concat(icon),
-        style: iconStyles
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        className: 'radio-label'
-      }, text));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          checked = _this$props2.checked,
-          defaultChecked = _this$props2.defaultChecked,
-          disabled = _this$props2.disabled,
-          inline = _this$props2.inline,
-          onClick = _this$props2.onClick,
-          onChange = _this$props2.onChange,
-          tabIndex = _this$props2.tabIndex,
-          label = _this$props2.label,
-          children = _this$props2.children,
-          right = _this$props2.right,
-          inputRef = _this$props2.inputRef,
-          className = _this$props2.className,
-          name = _this$props2.name,
-          value = _this$props2.value,
-          icon = _this$props2.icon,
-          iconSize = _this$props2.iconSize,
-          iconLabelPosition = _this$props2.iconLabelPosition;
-      var text = label || children;
-      var labelClassnames = (0, _classnames.default)('radio', inline && 'radio-inline', className);
-      var inputClassnames = (0, _classnames.default)(right && 'icon-right', className);
-      return /*#__PURE__*/_react.default.createElement("label", {
-        className: labelClassnames,
-        tabIndex: tabIndex,
-        onKeyDown: this.handleToggleKeyDown
-      }, /*#__PURE__*/_react.default.createElement("input", {
-        type: 'radio',
-        defaultChecked: defaultChecked,
-        checked: checked,
-        disabled: disabled,
-        className: inputClassnames,
-        ref: inputRef,
-        onClick: onClick,
-        onChange: onChange,
-        name: name,
-        value: value
-      }), icon ? this.renderRadioIcon(icon, iconSize, iconLabelPosition, text) : this.renderRadioText(text));
-    }
-  }]);
-  return RadioButton;
-}(_react.Component);
+  };
+
+  var toggle = function toggle(event) {
+    event.preventDefault();
+
+    if (disabled) {
+      return;
+    } // Controlled case - uses "onChange()" instead of "onClick()" callback
+
+
+    if (checked !== null && checked !== undefined) {
+      onChange(event);
+      return;
+    } // Uncontrolled case - set the input checked or unchecked
+
+
+    labelRef.current.firstChild.checked = !labelRef.current.firstChild.checked;
+    onClick(event);
+  };
+
+  var text = label || children;
+  var labelClassnames = (0, _classnames.default)('radio', inline && 'radio-inline', className);
+  var inputClassnames = (0, _classnames.default)(right && 'icon-right', className);
+  var renderCustomIcon = !!icon;
+  var renderCustomContent = custom && children;
+  var renderDefault = !icon && !custom;
+  return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({}, remainingProps, {
+    className: labelClassnames,
+    tabIndex: tabIndex,
+    onKeyDown: handleToggleKeyDown,
+    ref: labelRef
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    type: 'radio',
+    defaultChecked: defaultChecked,
+    checked: checked,
+    disabled: disabled,
+    className: inputClassnames,
+    ref: inputRef,
+    onClick: onClick,
+    onChange: onChange,
+    name: name,
+    value: value
+  }), renderCustomIcon && /*#__PURE__*/_react.default.createElement(RadioButtonIcon, {
+    icon: icon,
+    iconSize: iconSize,
+    iconLabelPosition: iconLabelPosition,
+    text: text
+  }), renderDefault && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'radio-text'
+  }, /*#__PURE__*/_react.default.createElement("span", null, text)), renderCustomContent && children);
+};
 
-exports.default = RadioButton;
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';
 RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';
 RadioButton.defaultProps = {
   inline: false,
   disabled: false,
   right: false,
+  custom: false,
   tabIndex: 0,
   icon: '',
   iconSize: 16,
@@ -196,6 +161,9 @@ RadioButton.propTypes = {
   className: _propTypes.default.string,
   inline: _propTypes.default.bool,
   right: _propTypes.default.bool,
+  custom: _propTypes.default.bool,
   inputRef: _propTypes.default.func,
   tabIndex: _propTypes.default.number
-};
+};
+var _default = RadioButton;
+exports.default = _default;

package/lib/components/radiobutton/RadioButton.less

@@ -1,5 +1,6 @@
 @dim-radio-size-default: 14px;
 @color-disabled-inverted: darken(@gray-darker, 20%);
+@input-margin: 7px;
 
 .radio {
   color: @gray-darkest;
@@ -33,7 +34,8 @@
 
     // use tag name for being stronger than the checked style and to avoid using important
     input[type='radio'] {
-      + .radio-text {
+      + .radio-text,
+      + .radio-text-wrapper > .radio-text {
         &:before,
         &:after {
           border-color: @gray-darker;
@@ -54,7 +56,8 @@
   input[type='radio'] {
     display: none;
 
-    + .radio-text {
+    + .radio-text,
+    + .radio-text-wrapper > .radio-text {
       font-weight: 400;
 
       &:before,
@@ -68,7 +71,7 @@
         font-weight: 400;
         height: @dim-radio-size-default;
         line-height: 1;
-        margin-right: 5px;
+        margin-right: @input-margin;
         position: relative;
         top: -2px;
         vertical-align: middle;
@@ -96,7 +99,7 @@
 
       &.label-horizontal {
         .radio-label {
-          margin-left: 5px;
+          margin-left: @input-margin;
         }
       }
 
@@ -118,14 +121,15 @@
 
       &:after {
         content: '';
-        margin-left: 5px;
+        margin-left: @input-margin;
         margin-right: 0;
       }
     }
 
     // Define style for 'checked' state
     &:checked {
-      + .radio-text {
+      + .radio-text,
+      + .radio-text-wrapper > .radio-text {
         &:before,
         &:after {
           animation: radio-tick 100ms ease-in;

package/lib/components/resizer/Resizer.less

@@ -1,9 +1,9 @@
-@dim-resizer-width: 5px;
+@dim-resizer-width: 6px;
 
 .Resizer {
   display: flex;
   position: absolute;
-  transition: background-color 0.2s ease-in-out;
+  transition: background-color 0.1s ease-in-out;
 
   &:hover {
     background-color: rgba(167, 175, 187, 0.2);

package/lib/components/selects/BaseDropdownMenu.js

@@ -49,9 +49,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 

package/lib/components/selects/DropdownHeader.js

@@ -17,15 +17,11 @@ var DropdownHeader = function DropdownHeader(props) {
       center = props.center;
   return /*#__PURE__*/_react.default.createElement("li", {
     className: "dropdown-header ".concat(center ? 'center' : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'dropdown-header-line'
-  }, /*#__PURE__*/_react.default.createElement("hr", null)), /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: 'dropdown-header-text'
   }, icon && /*#__PURE__*/_react.default.createElement("span", {
     className: 'margin-right-5'
-  }, icon), label), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'dropdown-header-line'
-  }, /*#__PURE__*/_react.default.createElement("hr", null)));
+  }, icon), label));
 };
 
 DropdownHeader.defaultProps = {

package/lib/components/spinner/Spinner.js

@@ -35,7 +35,7 @@ var Spinner = function Spinner(props) {
       isFullScreen = props.isFullScreen,
       show = props.show,
       isInline = props.isInline;
-  var spinnerWrapperClasses = (0, _classnames.default)('spinnerInfoBox', isFullSized && 'fullsized', isFullScreen && 'fullscreen', isInverse && 'inverse', 'display-flex justify-content-center align-items-center height-100pct');
+  var spinnerWrapperClasses = (0, _classnames.default)('spinnerInfoBox', isFullSized && 'fullsized', isFullScreen && 'fullscreen', 'display-flex justify-content-center align-items-center height-100pct');
 
   if (isInline) {
     return /*#__PURE__*/_react.default.createElement(BaseSpinner, props);

package/lib/components/spinner/Spinner.less

@@ -1,12 +1,12 @@
 .spinner {
-  .spinnerMixin(20, @color-highlight-dark);
+  .spinnerMixin(20, @brand-primary);
 
   &.inverse {
     .spinnerMixin(20, @color-white);
   }
 
   &.double {
-    .spinnerMixin(30, @color-highlight-dark);
+    .spinnerMixin(30, @brand-primary);
 
     &.inverse {
       .spinnerMixin(30, @color-white);

package/lib/components/states/MaintenanceState.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CustomState = _interopRequireDefault(require("./CustomState"));
+
+var _baseStatePropTypes = require("./baseStatePropTypes");
+
+var MaintenanceState = function MaintenanceState(props) {
+  return /*#__PURE__*/_react.default.createElement(_CustomState.default, props);
+};
+
+MaintenanceState.defaultProps = {
+  icon: 'rioglyph-wrench'
+};
+MaintenanceState.propTypes = _baseStatePropTypes.baseStatePropTypes;
+var _default = MaintenanceState;
+exports.default = _default;

package/lib/components/states/baseStatePropTypes.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.baseStatePropTypes = exports.ALIGN_RIGHT = exports.ALIGN_CENTER = exports.ALIGN_LEFT = void 0;
+exports.baseStatePropTypes = exports.ALIGN_RIGHT = exports.ALIGN_LEFT = exports.ALIGN_CENTER = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/components/supportMarker/toggleSupportMarker.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.enableSupportMarker = exports.toggleSupportMarker = exports.SUPPORT_MARKER_CLASS = void 0;
+exports.toggleSupportMarker = exports.enableSupportMarker = exports.SUPPORT_MARKER_CLASS = void 0;
 var SUPPORT_MARKER_CLASS = 'show-support-marker';
 exports.SUPPORT_MARKER_CLASS = SUPPORT_MARKER_CLASS;
 

package/lib/components/table/SortArrows.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SortArrows = exports.SortArrowDown = exports.SortArrowUp = void 0;
+exports.SortArrows = exports.SortArrowUp = exports.SortArrowDown = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/components/table/TableCardsSorting.js

@@ -27,7 +27,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _SortUtil = require("../../utils/SortUtil");
+var _SortUtils = require("../../utils/SortUtils");
 
 var _Select = _interopRequireDefault(require("../selects/Select"));
 
@@ -64,12 +64,12 @@ var TableCardsSorting = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(TableCardsSorting, [{
     key: "setSortDirectionAsc",
     value: function setSortDirectionAsc() {
-      this.setSortDirection(_SortUtil.SortDirection.ASCENDING);
+      this.setSortDirection(_SortUtils.SortDirection.ASCENDING);
     }
   }, {
     key: "setSortDirectionDesc",
     value: function setSortDirectionDesc() {
-      this.setSortDirection(_SortUtil.SortDirection.DESCENDING);
+      this.setSortDirection(_SortUtils.SortDirection.DESCENDING);
     }
   }, {
     key: "setSortDirection",
@@ -101,13 +101,13 @@ var TableCardsSorting = /*#__PURE__*/function (_Component) {
         className: "btn-group margin-left-0"
       }, /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
         className: 'btn-icon-only',
-        active: sortOrder === _SortUtil.SortDirection.ASCENDING,
+        active: sortOrder === _SortUtils.SortDirection.ASCENDING,
         onClick: this.setSortDirectionAsc
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "rioglyph rioglyph-sort-by-attributes-alt"
       })), /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
         className: 'btn-icon-only',
-        active: sortOrder === _SortUtil.SortDirection.DESCENDING,
+        active: sortOrder === _SortUtils.SortDirection.DESCENDING,
         onClick: this.setSortDirectionDesc
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "rioglyph rioglyph-sort-by-attributes"
@@ -124,12 +124,12 @@ var TableCardsSorting = /*#__PURE__*/function (_Component) {
 
 TableCardsSorting.defaultProps = {
   onSortChange: function onSortChange() {},
-  sortOrder: _SortUtil.SortDirection.ASCENDING,
+  sortOrder: _SortUtils.SortDirection.ASCENDING,
   selectOptions: []
 };
 TableCardsSorting.propTypes = {
   sortName: _propTypes.default.string.isRequired,
-  sortOrder: _propTypes.default.oneOf([_SortUtil.SortDirection.ASCENDING, _SortUtil.SortDirection.DESCENDING]).isRequired,
+  sortOrder: _propTypes.default.oneOf([_SortUtils.SortDirection.ASCENDING, _SortUtils.SortDirection.DESCENDING]).isRequired,
   onSortChange: _propTypes.default.func,
   selectOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
     id: _propTypes.default.string.isRequired,

package/lib/components/table/TableSettingsDialog.js

@@ -59,9 +59,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 

package/lib/components/table/TableSettingsListItem.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.filterColumns = void 0;
+exports.filterColumns = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/lib/components/teaser/Teaser.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.placeholderImage16by9 = exports.placeholderImage3by2 = exports.placeholderImage3by1 = exports.placeholderImage1by1 = void 0;
+exports.placeholderImage3by2 = exports.placeholderImage3by1 = exports.placeholderImage1by1 = exports.placeholderImage16by9 = exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/lib/components/timepicker/TimePicker.js

@@ -29,7 +29,7 @@ var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
 
 var _moment = _interopRequireDefault(require("moment"));
 
-var _excluded = ["onChange", "value", "className", "alwaysShowMask", "inputProps"];
+var _excluded = ["onChange", "value", "className", "alwaysShowMask", "showIcon", "inputProps"];
 
 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); }
 
@@ -78,6 +78,7 @@ var TimePicker = function TimePicker(props) {
       value = props.value,
       className = props.className,
       alwaysShowMask = props.alwaysShowMask,
+      showIcon = props.showIcon,
       inputProps = props.inputProps,
       remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var initialTime = isControlledAndValid(value) ? value : getInitialTime();
@@ -129,9 +130,14 @@ var TimePicker = function TimePicker(props) {
   var inputClassName = inputProps.className;
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
     className: (0, _classnames.default)('TimePicker', 'input-group', className)
-  }), /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, inputProps, {
+  }), showIcon && /*#__PURE__*/_react.default.createElement("span", {
+    className: "input-group-addon"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-time-alt"
+  })), /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, inputProps, {
     className: (0, _classnames.default)('TimePickerInput', 'form-control', inputClassName),
     mask: mask,
+    maskPlaceholder: '-',
     value: timeValue,
     onChange: handleChangeTime,
     alwaysShowMask: alwaysShowMask
@@ -153,6 +159,7 @@ var TimePicker = function TimePicker(props) {
 TimePicker.defaultProps = {
   onChange: function onChange() {},
   alwaysShowMask: true,
+  showIcon: false,
   className: '',
   inputProps: {}
 };
@@ -160,6 +167,7 @@ TimePicker.propTypes = {
   onChange: _propTypes.default.func,
   value: _propTypes.default.string,
   alwaysShowMask: _propTypes.default.bool,
+  showIcon: _propTypes.default.bool,
   className: _propTypes.default.string,
   inputProps: _propTypes.default.shape({
     className: _propTypes.default.string