@bonlineza/luxity-lib 2.35.1 → 2.35.2

package/ConditionSelector.js

@@ -0,0 +1,973 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady')) :
+  typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady'], factory) :
+  (global = global || self, global.ConditionSelector = factory(global.React, global.function, global.styled, global.EllipsisLoader, global.PageReady));
+}(this, (function (React, functions, styled, EllipsisLoader, PageReady) { 'use strict';
+
+  var React__default = 'default' in React ? React['default'] : React;
+  var styled__default = 'default' in styled ? styled['default'] : styled;
+  EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
+  PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
+    Object.defineProperty(subClass, "prototype", {
+      writable: false
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
+
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf(o, p);
+  }
+
+  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;
+    }
+  }
+
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+
+    return target;
+  }
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  function _possibleConstructorReturn(self, call) {
+    if (call && (typeof call === "object" || typeof call === "function")) {
+      return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
+    }
+
+    return _assertThisInitialized(self);
+  }
+
+  function _createSuper(Derived) {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+    return function _createSuperInternal() {
+      var Super = _getPrototypeOf(Derived),
+          result;
+
+      if (hasNativeReflectConstruct) {
+        var NewTarget = _getPrototypeOf(this).constructor;
+
+        result = Reflect.construct(Super, arguments, NewTarget);
+      } else {
+        result = Super.apply(this, arguments);
+      }
+
+      return _possibleConstructorReturn(this, result);
+    };
+  }
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var interpretErrorMessage = function interpretErrorMessage(error) {
+    var customMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Failed: :error_code';
+    var message = customMessage || 'Network Error';
+    return message.replace(':error_code', error.status || 'Network Down');
+  };
+
+  var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
+    data: null
+  });
+  /**
+   * A flavour of PageReady with Luxity customisations
+   * 1. the onIsLoading callback is useful to parent components that have more complex data interactions
+   * 2. an error message interpreter is supplied from the local helper library
+   */
+
+  var LuxityPageReady = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityPageReady, _React$Component);
+
+    var _super = _createSuper(LuxityPageReady);
+
+    function LuxityPageReady() {
+      var _this;
+
+      _classCallCheck(this, LuxityPageReady);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _super.call.apply(_super, [this].concat(args));
+
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        data: null
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "refreshPage", function () {
+        return _this.pageReadyInstance.initRequest();
+      });
+
+      return _this;
+    }
+
+    _createClass(LuxityPageReady, [{
+      key: "render",
+      value: function render() {
+        var _this2 = this;
+
+        var _this$props = this.props,
+            customErrorMessage = _this$props.customErrorMessage,
+            customErrorHandler = _this$props.customErrorHandler,
+            getRequestPromise = _this$props.getRequestPromise,
+            _onData = _this$props.onData,
+            children = _this$props.children;
+        var data = this.state.data;
+        return /*#__PURE__*/React__default.createElement(PageReady, {
+          ref: function ref(inst) {
+            _this2.pageReadyInstance = inst;
+          },
+          onData: function onData(res) {
+            _this2.setState({
+              data: res.data
+            });
+
+            _onData(res);
+          },
+          getRequestInstance: function getRequestInstance() {
+            _this2.props.onIsLoading(true);
+
+            return getRequestPromise().then(function (out) {
+              _this2.props.onIsLoading(false);
+
+              return out;
+            }).catch(function (oops) {
+              _this2.props.onIsLoading(false);
+
+              return oops;
+            });
+          },
+          customErrorMessage: customErrorMessage,
+          customErrorHandler: customErrorHandler,
+          renderCustomLoader: function renderCustomLoader() {
+            return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
+          },
+          errorMessageInterpreter: interpretErrorMessage
+        }, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
+          value: {
+            data: data
+          }
+        }, children));
+      }
+    }]);
+
+    return LuxityPageReady;
+  }(React__default.Component);
+
+  LuxityPageReady.defaultProps = {
+    onIsLoading: function onIsLoading() {
+      return null;
+    },
+    customErrorMessage: '',
+    customErrorHandler: function customErrorHandler() {
+      return null;
+    },
+    onData: function onData() {
+      return null;
+    }
+  };
+
+  var _templateObject, _templateObject2;
+  var disabledButtonStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
+  var baseButtonStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1rem 2rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n"])));
+
+  var theme = {
+    breakpoints: ['40em', '52em', '64em'],
+    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+    letterSpacings: ['-0.5px', '0px', '+0.5px'],
+    radii: ['0px', '2px', '4px', '8px'],
+    borderRadius: '6px',
+    colors: {
+      primary: '#000',
+      base: '#4e4949',
+      baseLt: '#817c7c',
+      borderColor: '#d8d8d8',
+      ntrlMin: '#fff',
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '16px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
+    }
+  };
+
+  var themed = (function (Component) {
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+        theme: theme
+      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
+        ref: ref
+      })));
+    });
+  });
+
+  var _excluded = ["children"];
+
+  var _templateObject$1;
+  var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: transparent;\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  &:disabled {\n    ", ";\n    color: ", ";\n  }\n"])), baseButtonStyle, function (props) {
+    return props.theme.colors.base;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, disabledButtonStyle, function (props) {
+    return props.theme.colors.base;
+  });
+
+  var TextButton = function TextButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/React__default.createElement(Button, restProps, children);
+  };
+
+  TextButton.defaultProps = {
+    type: 'button'
+  };
+  var TextButton$1 = themed(TextButton);
+
+  var _excluded$1 = ["children"];
+
+  var _templateObject$2;
+  var Button$1 = styled__default(TextButton$1)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.base;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  });
+
+  var InvertedTextButton = function InvertedTextButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded$1);
+
+    return /*#__PURE__*/React__default.createElement(Button$1, restProps, children);
+  };
+
+  var InvertedTextButton$1 = themed(InvertedTextButton);
+
+  var media = {
+    xs: '576px',
+    sm: '768px',
+    md: '992px',
+    lg: '1200px'
+  };
+
+  var _templateObject$3, _templateObject2$1;
+  var ALL_ITEM = {
+    id: 'ALL',
+    name: 'ALL'
+  };
+  var multiSelectorItemMaxHeight = '3rem';
+  var multiSelectorItemAnimationDuration = '300ms';
+  var multiselectorItemFadeIn = styled.keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"])), multiSelectorItemMaxHeight);
+  var StyledMultiselector = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[2];
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[0];
+  }, multiSelectorItemAnimationDuration, multiselectorItemFadeIn, function (props) {
+    return props.theme.marginPaddings[2];
+  }, function (props) {
+    return props.theme.marginPaddings[2];
+  }, function (props) {
+    return props.theme.marginPaddings[2];
+  }, media.sm, function (props) {
+    return props.theme.marginPaddings[2];
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  });
+  /**
+   * Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
+   */
+
+  var GraphQLMultiSelector = /*#__PURE__*/function (_React$Component) {
+    _inherits(GraphQLMultiSelector, _React$Component);
+
+    var _super = _createSuper(GraphQLMultiSelector);
+
+    function GraphQLMultiSelector(props) {
+      var _this;
+
+      _classCallCheck(this, GraphQLMultiSelector);
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
+        if (prevProps.graphQuery !== _this.props.graphQuery) {
+          _this.makeRequest();
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
+        _this.pageReady.refreshPage();
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
+        return _this.setState({
+          selected: [ALL_ITEM]
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
+        var selectedIds = _this.state.selected.map(function (sel) {
+          return sel.id;
+        });
+
+        var pagination = _this.props.resultProcessor(res);
+
+        var allSelected = _this.state.selected.some(function (item) {
+          return item.id === ALL_ITEM.id;
+        });
+
+        var newList = pagination.data.filter(function (newItem) {
+          return !selectedIds.includes(newItem.id);
+        });
+        newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
+
+        _this.setState({
+          list: newList,
+          pagination: pagination
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
+        _this.setState(function (prevState) {
+          var newSelectedList;
+          var newList;
+
+          if (addSelectedItem.id === ALL_ITEM.id) {
+            // Clear Selected List
+            // and move previous Selected items to list
+            newSelectedList = [ALL_ITEM];
+            newList = prevState.list.filter(function (item) {
+              return item.id !== ALL_ITEM.id;
+            }).concat(prevState.selected).sort(function (a, b) {
+              return a.id - b.id;
+            });
+          } else {
+            newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
+              return item.id !== ALL_ITEM.id;
+            })).concat(addSelectedItem);
+            newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
+              return item.id !== ALL_ITEM.id;
+            }).filter(function (item) {
+              return item.id !== addSelectedItem.id;
+            })));
+          }
+
+          return {
+            selected: newSelectedList,
+            list: newList
+          };
+        }, function () {
+          _this.props.onChange(_this.state.selected.filter(function (item) {
+            return item.id !== ALL_ITEM.id;
+          }));
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
+        _this.setState(function (prevState) {
+          // Cannot remove ALL from selection by unselecting it
+          if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM.id) {
+            return {};
+          }
+
+          var newSelectedList = prevState.selected.filter(function (item) {
+            return item.id !== removeSelectedItem.id;
+          });
+
+          var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
+            return item.id !== ALL_ITEM.id;
+          }).sort(function (a, b) {
+            return a.id - b.id;
+          });
+
+          return {
+            list: newList,
+            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
+          };
+        }, function () {
+          _this.props.onChange(_this.state.selected.filter(function (item) {
+            return item.id !== ALL_ITEM.id;
+          }));
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
+        _this.setState({
+          isLoading: flag
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _this$props = _this.props,
+            baseClass = _this$props.baseClass,
+            ItemRenderer = _this$props.itemRenderer,
+            identifier = _this$props.identifier,
+            triggerRequest = _this$props.triggerRequest,
+            className = _this$props.className;
+        var _this$state = _this.state,
+            list = _this$state.list,
+            selected = _this$state.selected,
+            pagination = _this$state.pagination,
+            isLoading = _this$state.isLoading;
+        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
+          "data-qe-id": identifier,
+          className: "".concat(className, " ").concat(baseClass)
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(baseClass, "__selected-items")
+        }, selected.map(function (item) {
+          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
+            key: item.id,
+            item: item,
+            onSelect: _this.onRemoveItem,
+            selected: true
+          });
+        })), /*#__PURE__*/React__default.createElement(LuxityPageReady, {
+          ref: function ref(inst) {
+            _this.pageReady = inst;
+          },
+          onData: _this.setNewResults,
+          onIsLoading: _this.onIsLoading,
+          getRequestPromise: function getRequestPromise() {
+            return triggerRequest();
+          }
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(baseClass, "__selectable-items")
+        }, list.map(function (item) {
+          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
+            key: item.id,
+            item: item,
+            onSelect: _this.onAddItem,
+            selected: false
+          });
+        })), /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(baseClass, "__footer")
+        }, /*#__PURE__*/React__default.createElement(InvertedTextButton$1, {
+          disabled: isLoading || !pagination.has_more_pages,
+          onClick: _this.props.increaseLimit,
+          type: "button"
+        }, "SHOW MORE"))));
+      });
+
+      _this.state = {
+        selected: [ALL_ITEM],
+        list: [],
+        pagination: {},
+        isLoading: false
+      };
+      return _this;
+    }
+
+    return _createClass(GraphQLMultiSelector);
+  }(React__default.Component);
+
+  GraphQLMultiSelector.defaultProps = {
+    baseClass: 'multiselector'
+  };
+  var GraphQLMultiSelector$1 = themed(GraphQLMultiSelector);
+
+  var Search = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
+      width: "15",
+      height: "15",
+      viewBox: "0 0 15 15",
+      overflow: "visible",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), /*#__PURE__*/React__default.createElement("path", {
+      d: "M14.82 13.93L11.21 10.32C12.1 9.23 12.64 7.83 12.64 6.31C12.64 2.83 9.81 0 6.32 0C2.83 0 0 2.83 0 6.32C0 9.81 2.83 12.64 6.32 12.64C7.84 12.64 9.23 12.1 10.32 11.21L13.93 14.81C14.17 15.06 14.57 15.06 14.81 14.81C15.06 14.57 15.06 14.18 14.82 13.93ZM6.32 11.38C3.53 11.38 1.25 9.11 1.25 6.32C1.25 3.53 3.52 1.25 6.32 1.25C9.11 1.25 11.39 3.52 11.39 6.32C11.39 9.12 9.11 11.38 6.32 11.38Z",
+      fill: "currentColor"
+    }));
+  });
+
+  var _templateObject$4, _templateObject2$2;
+  var Title = styled__default.h1(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
+    return props.theme.fontSizes[2];
+  });
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  });
+
+  var InterestsSubheading = function InterestsSubheading(_ref) {
+    var title = _ref.title,
+        children = _ref.children,
+        className = _ref.className;
+    return /*#__PURE__*/React__default.createElement(InterestsSubheadingContainer, {
+      className: className
+    }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
+  };
+
+  var _templateObject$5;
+
+  var Title$1 = function Title(_ref) {
+    var baseClass = _ref.baseClass,
+        className = _ref.className,
+        title = _ref.title,
+        searchPlaceHolder = _ref.searchPlaceHolder,
+        onSearchChanged = _ref.onSearchChanged;
+    return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
+      className: "".concat(className, " ").concat(baseClass, "__title"),
+      title: title
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "title__search"
+    }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
+      placeholder: searchPlaceHolder,
+      type: "text",
+      name: "search",
+      onChange: onSearchChanged
+    })));
+  };
+
+  var StyledTitle = styled__default(Title$1)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[2];
+  }, function (props) {
+    return props.theme.fontSizes[2];
+  }, function (props) {
+    return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.colors.primary || '';
+  }, function (props) {
+    return props.theme.colors.primary || '';
+  }, function (props) {
+    return props.theme.fontSizes[2];
+  }, function (props) {
+    return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.colors.primary;
+  });
+  var Title$2 = themed(StyledTitle);
+
+  var debounceBuilder = functions.debounced(200);
+
+  /**
+   * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
+   */
+  var LuxityGraphQLMultiselector = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityGraphQLMultiselector, _React$Component);
+
+    var _super = _createSuper(LuxityGraphQLMultiselector);
+
+    function LuxityGraphQLMultiselector(props) {
+      var _this;
+
+      _classCallCheck(this, LuxityGraphQLMultiselector);
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
+
+      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
+        _this.setState(function (prevState) {
+          return {
+            limit: prevState.limit + _this.props.queryLimitIncrement
+          };
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
+        _this.props.onChange(selection);
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
+        event.preventDefault();
+        var searchText = event.target.value;
+        debounceBuilder(function () {
+          _this.setState({
+            nameFilter: searchText
+          });
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _this$state = _this.state,
+            limit = _this$state.limit,
+            category = _this$state.category,
+            nameFilter = _this$state.nameFilter;
+        var _this$props = _this.props,
+            title = _this$props.title,
+            baseClass = _this$props.baseClass,
+            getGraphQuery = _this$props.getGraphQuery,
+            resultProcessor = _this$props.resultProcessor,
+            itemRenderer = _this$props.itemRenderer,
+            searchPlaceHolder = _this$props.searchPlaceHolder,
+            graphApi = _this$props.graphApi,
+            identifier = _this$props.identifier,
+            requestInstance = _this$props.requestInstance;
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: baseClass
+        }, /*#__PURE__*/React__default.createElement(Title$2, {
+          title: title,
+          baseClass: baseClass,
+          searchPlaceHolder: searchPlaceHolder,
+          onSearchChanged: _this.onSearchChanged
+        }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
+          triggerRequest: function triggerRequest() {
+            return requestInstance.post(graphApi, {
+              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
+            });
+          },
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
+          identifier: identifier,
+          ref: _this.multiSelectorRef,
+          onChange: _this.onChange,
+          resultProcessor: resultProcessor,
+          increaseLimit: _this.increaseLimit,
+          itemRenderer: itemRenderer
+        })));
+      });
+
+      _this.state = {
+        limit: props.baseQueryLimit,
+        category: props.category,
+        nameFilter: ''
+      };
+      return _this;
+    }
+
+    _createClass(LuxityGraphQLMultiselector, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        var _this$multiSelectorRe;
+
+        if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+      }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, prevState) {
+        if (prevState.category !== props.category) {
+          return {
+            category: props.category
+          };
+        }
+
+        return null;
+      }
+    }]);
+
+    return LuxityGraphQLMultiselector;
+  }(React__default.Component);
+
+  LuxityGraphQLMultiselector.defaultProps = {
+    baseClass: '',
+    searchPlaceHolder: '',
+    queryLimitIncrement: 12,
+    baseQueryLimit: 12
+  };
+
+  var _excluded$2 = ["children"];
+
+  var _templateObject$6;
+  var Button$2 = styled__default.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: #fff;\n  color: ", ";\n  border: 1px solid ", ";\n\n  &:disabled {\n    ", "\n  }\n"])), baseButtonStyle, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, disabledButtonStyle);
+
+  var PrimaryButton = function PrimaryButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded$2);
+
+    return /*#__PURE__*/React__default.createElement(Button$2, restProps, children);
+  };
+
+  var PrimaryButton$1 = themed(PrimaryButton);
+
+  var _templateObject$7;
+  var BaseButton = styled__default.button(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (props) {
+    return props.theme.colors.base;
+  }, function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  });
+  var UnselectedButton = themed(BaseButton);
+
+  var ItemRenderer = function ItemRenderer(_ref) {
+    var item = _ref.item,
+        onSelect = _ref.onSelect,
+        selected = _ref.selected;
+    var props = {
+      onClick: function onClick(e) {
+        e.preventDefault();
+        onSelect(item);
+      }
+    };
+    return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
+  };
+
+  var ConditionSelector = function ConditionSelector(_ref) {
+    var onChange = _ref.onChange,
+        graphApi = _ref.graphApi,
+        itemRenderer = _ref.itemRenderer,
+        getGraphQuery = _ref.getGraphQuery,
+        requestInstance = _ref.requestInstance;
+
+    var resultProcessor = function resultProcessor(result) {
+      return result.data.data.conditions_list;
+    };
+
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
+      title: "Condition",
+      queryId: "getCondition",
+      baseQueryLimit: 10,
+      baseClass: "style-selector",
+      identifier: "style-selector",
+      searchPlaceHolder: "Search Condition",
+      category: "",
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  ConditionSelector.defaultProps = {
+    itemRenderer: ItemRenderer
+  };
+
+  return ConditionSelector;
+
+})));