@pie-element/number-line 11.3.4-next.3 → 12.0.0-beta.0

package/lib/number-line/point-chooser/index.js

@@ -1,193 +1,197 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.PointChooser = exports.Point = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.PointChooser = exports.Point = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
+var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _button = _interopRequireDefault(require("./button"));
-
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
-
-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 translator = _translator["default"].translator;
-
-var DeleteIcon = function DeleteIcon(_ref) {
-  var classes = _ref.classes;
-  return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: classes.deleteIcon,
+var _img = _interopRequireDefault(require("./img"));
+var _PointChooser;
+const {
+  translator
+} = _translator.default;
+const iconHeight = 41;
+const iconWidth = 42;
+const StyledDeleteIcon = (0, _styles.styled)('svg')({
+  fill: 'black',
+  cursor: 'pointer',
+  transition: 'opacity 100ms linear',
+  '&:hover': {
+    opacity: '0.5'
+  }
+});
+const DeleteIcon = () => {
+  return /*#__PURE__*/_react.default.createElement(StyledDeleteIcon, {
     fill: "#000000",
     height: "24",
     viewBox: "0 0 24 24",
     width: "24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
+  }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
+  }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M0 0h24v24H0z",
     fill: "none"
   }));
 };
-
-DeleteIcon.propTypes = {
-  classes: _propTypes["default"].object
+const iconIndexMap = {
+  pf: 0,
+  lff: 1,
+  lef: 2,
+  lfe: 3,
+  lee: 4,
+  rfn: 5,
+  rfp: 6,
+  ren: 7,
+  rep: 8
 };
-
-var RawPoint = function RawPoint(props) {
-  var iconKey = props.iconKey,
-      active = props.active,
-      classes = props.classes,
-      onClick = props.onClick;
-  var names = (0, _classnames["default"])(classes[iconKey], {
-    active: active
-  });
-  return /*#__PURE__*/_react["default"].createElement("span", {
+const StyledPointLink = (0, _styles.styled)('a')(({
+  $iconIndex,
+  $active
+}) => ({
+  display: 'inline-block',
+  width: iconWidth,
+  height: iconHeight,
+  position: 'relative',
+  top: '1px',
+  cursor: 'pointer',
+  background: `url(${_img.default}) -${$iconIndex * iconWidth}px 0px`,
+  ...($active && {
+    backgroundPosition: `-${$iconIndex * iconWidth}px -${2 * iconHeight}px`
+  }),
+  '&:hover': {
+    textDecoration: 'none',
+    backgroundPosition: `-${$iconIndex * iconWidth}px -${iconHeight}px`
+  },
+  ...($active && {
+    '&:hover': {
+      backgroundPosition: `-${$iconIndex * iconWidth}px -${2 * iconHeight}px`
+    }
+  })
+}));
+const RawPoint = props => {
+  const {
+    iconKey,
+    active,
+    onClick
+  } = props;
+  const iconIndex = iconIndexMap[iconKey.toLowerCase()] ?? 0;
+  return /*#__PURE__*/_react.default.createElement("span", {
     role: "presentation",
     key: iconKey,
     onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: names
+  }, /*#__PURE__*/_react.default.createElement(StyledPointLink, {
+    $iconIndex: iconIndex,
+    $active: active
   }, "\xA0"));
 };
-
 RawPoint.propTypes = {
-  iconKey: _propTypes["default"].string.isRequired,
-  active: _propTypes["default"].bool,
-  classes: _propTypes["default"].object,
-  onClick: _propTypes["default"].func
+  iconKey: _propTypes.default.string.isRequired,
+  active: _propTypes.default.bool,
+  onClick: _propTypes.default.func
 };
-var Point = (0, _reactJss["default"])(_styles["default"])(RawPoint);
-exports.Point = Point;
-
-var Points = function Points(_ref2) {
-  var selectPoint = _ref2.selectPoint,
-      classes = _ref2.classes,
-      selected = _ref2.selected,
-      icons = _ref2.icons;
-  var iconTags = icons.map(function (key) {
-    var active = key === selected;
-    var onClick = active ? function () {} : selectPoint.bind(null, key);
-    return /*#__PURE__*/_react["default"].createElement(Point, {
+const Point = exports.Point = RawPoint;
+const ElementSelector = (0, _styles.styled)('div')({
+  width: '55%',
+  padding: '1px',
+  '-webkit-touch-callout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none'
+});
+const Points = ({
+  selectPoint,
+  selected,
+  icons
+}) => {
+  const iconTags = icons.map(key => {
+    let active = key === selected;
+    let onClick = active ? () => {} : selectPoint.bind(null, key);
+    return /*#__PURE__*/_react.default.createElement(Point, {
       key: key.toLowerCase(),
       iconKey: key.toLowerCase(),
       active: active,
       onClick: onClick
-    }); //icon(key, active);
+    });
   });
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.elementSelector
-  }, iconTags);
+  return /*#__PURE__*/_react.default.createElement(ElementSelector, null, iconTags);
 };
-
 Points.propTypes = {
-  selectPoint: _propTypes["default"].func.isRequired,
-  classes: _propTypes["default"].object.isRequired,
-  selected: _propTypes["default"].string,
-  icons: _propTypes["default"].array
+  selectPoint: _propTypes.default.func.isRequired,
+  selected: _propTypes.default.string,
+  icons: _propTypes.default.array
 };
-
-var PointChooser = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(PointChooser, _React$Component);
-
-  var _super = _createSuper(PointChooser);
-
-  function PointChooser() {
-    (0, _classCallCheck2["default"])(this, PointChooser);
-    return _super.apply(this, arguments);
+const PointChooserContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  borderRadius: '4px',
+  padding: '1px'
+});
+const Controls = (0, _styles.styled)('div')({
+  display: 'flex',
+  paddingTop: '7px'
+});
+const DeleteIconHolder = (0, _styles.styled)('span')({
+  position: 'relative',
+  top: '3px',
+  width: '30px'
+});
+class PointChooser extends _react.default.Component {
+  render() {
+    const {
+      elementType,
+      showDeleteButton,
+      onDeleteClick,
+      onUndoElement,
+      onClearElements,
+      icons,
+      onElementType,
+      language
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(PointChooserContainer, null, /*#__PURE__*/_react.default.createElement(Points, {
+      selected: elementType,
+      selectPoint: onElementType,
+      icons: icons
+    }), /*#__PURE__*/_react.default.createElement(Controls, null, showDeleteButton && /*#__PURE__*/_react.default.createElement(DeleteIconHolder, {
+      onClick: onDeleteClick
+    }, /*#__PURE__*/_react.default.createElement(DeleteIcon, null)), /*#__PURE__*/_react.default.createElement(_button.default, {
+      onClick: onUndoElement,
+      label: translator.t('common:undo', {
+        lng: language
+      })
+    }), /*#__PURE__*/_react.default.createElement(_button.default, {
+      onClick: onClearElements,
+      label: translator.t('numberLine.clearAll', {
+        lng: language
+      })
+    })));
   }
-
-  (0, _createClass2["default"])(PointChooser, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          elementType = _this$props.elementType,
-          showDeleteButton = _this$props.showDeleteButton,
-          onDeleteClick = _this$props.onDeleteClick,
-          onUndoElement = _this$props.onUndoElement,
-          onClearElements = _this$props.onClearElements,
-          icons = _this$props.icons,
-          classes = _this$props.classes,
-          onElementType = _this$props.onElementType,
-          language = _this$props.language;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.pointChooser
-      }, /*#__PURE__*/_react["default"].createElement(Points, {
-        selected: elementType,
-        classes: classes,
-        selectPoint: onElementType,
-        icons: icons
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.controls
-      }, showDeleteButton && /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.deleteIconHolder,
-        onClick: onDeleteClick
-      }, /*#__PURE__*/_react["default"].createElement(DeleteIcon, {
-        classes: classes
-      })), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        className: classes.buttonText,
-        onClick: onUndoElement,
-        label: translator.t('common:undo', {
-          lng: language
-        })
-      }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        className: classes.buttonText,
-        onClick: onClearElements,
-        label: translator.t('numberLine.clearAll', {
-          lng: language
-        })
-      })));
-    }
-  }]);
-  return PointChooser;
-}(_react["default"].Component);
-
+}
 exports.PointChooser = PointChooser;
-(0, _defineProperty2["default"])(PointChooser, "defaultProps", {
+_PointChooser = PointChooser;
+(0, _defineProperty2.default)(PointChooser, "defaultProps", {
   showDeleteButton: false,
-  elementType: PointChooser.DEFAULT_TYPE,
+  elementType: _PointChooser.DEFAULT_TYPE,
   icons: ['pf', 'lff', 'lef', 'lfe', 'lee', 'rfn', 'rfp', 'ren', 'rep']
 });
-(0, _defineProperty2["default"])(PointChooser, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  elementType: _propTypes["default"].string,
-  showDeleteButton: _propTypes["default"].bool,
-  onDeleteClick: _propTypes["default"].func.isRequired,
-  onElementType: _propTypes["default"].func.isRequired,
-  onUndoElement: _propTypes["default"].func.isRequired,
-  onClearElements: _propTypes["default"].func.isRequired,
-  icons: _propTypes["default"].array,
-  language: _propTypes["default"].string
+(0, _defineProperty2.default)(PointChooser, "propTypes", {
+  elementType: _propTypes.default.string,
+  showDeleteButton: _propTypes.default.bool,
+  onDeleteClick: _propTypes.default.func.isRequired,
+  onElementType: _propTypes.default.func.isRequired,
+  onUndoElement: _propTypes.default.func.isRequired,
+  onClearElements: _propTypes.default.func.isRequired,
+  icons: _propTypes.default.array,
+  language: _propTypes.default.string
 });
-
-var _default = (0, _reactJss["default"])(_styles["default"])(PointChooser);
-
-exports["default"] = _default;
+var _default = exports.default = PointChooser;
 PointChooser.DEFAULT_TYPE = 'pf';
 //# sourceMappingURL=index.js.map

package/lib/number-line/point-chooser/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/number-line/point-chooser/index.jsx"],"names":["translator","Translator","DeleteIcon","classes","deleteIcon","propTypes","PropTypes","object","RawPoint","props","iconKey","active","onClick","names","string","isRequired","bool","func","Point","styles","Points","selectPoint","selected","icons","iconTags","map","key","bind","toLowerCase","elementSelector","array","PointChooser","elementType","showDeleteButton","onDeleteClick","onUndoElement","onClearElements","onElementType","language","pointChooser","controls","deleteIconHolder","buttonText","t","lng","React","Component","DEFAULT_TYPE"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\nimport injectSheet from 'react-jss';\nimport styles from './styles';\nimport PropTypes from 'prop-types';\nimport Button from './button';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst DeleteIcon = ({ classes }) => {\n  return (\n    <svg\n      className={classes.deleteIcon}\n      fill=\"#000000\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    </svg>\n  );\n};\n\nDeleteIcon.propTypes = {\n  classes: PropTypes.object,\n};\n\nconst RawPoint = (props) => {\n  const { iconKey, active, classes, onClick } = props;\n  const names = classNames(classes[iconKey], { active });\n  return (\n    <span role=\"presentation\" key={iconKey} onClick={onClick}>\n      <a className={names}>&nbsp;</a>\n    </span>\n  );\n};\n\nRawPoint.propTypes = {\n  iconKey: PropTypes.string.isRequired,\n  active: PropTypes.bool,\n  classes: PropTypes.object,\n  onClick: PropTypes.func,\n};\n\nexport const Point = injectSheet(styles)(RawPoint);\n\nconst Points = ({ selectPoint, classes, selected, icons }) => {\n  const iconTags = icons.map((key) => {\n    let active = key === selected;\n    let onClick = active ? () => {} : selectPoint.bind(null, key);\n    return <Point key={key.toLowerCase()} iconKey={key.toLowerCase()} active={active} onClick={onClick} />; //icon(key, active);\n  });\n\n  return <div className={classes.elementSelector}>{iconTags}</div>;\n};\n\nPoints.propTypes = {\n  selectPoint: PropTypes.func.isRequired,\n  classes: PropTypes.object.isRequired,\n  selected: PropTypes.string,\n  icons: PropTypes.array,\n};\n\nexport class PointChooser extends React.Component {\n  static defaultProps = {\n    showDeleteButton: false,\n    elementType: PointChooser.DEFAULT_TYPE,\n    icons: ['pf', 'lff', 'lef', 'lfe', 'lee', 'rfn', 'rfp', 'ren', 'rep'],\n  };\n\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    elementType: PropTypes.string,\n    showDeleteButton: PropTypes.bool,\n    onDeleteClick: PropTypes.func.isRequired,\n    onElementType: PropTypes.func.isRequired,\n    onUndoElement: PropTypes.func.isRequired,\n    onClearElements: PropTypes.func.isRequired,\n    icons: PropTypes.array,\n    language: PropTypes.string,\n  };\n\n  render() {\n    const {\n      elementType,\n      showDeleteButton,\n      onDeleteClick,\n      onUndoElement,\n      onClearElements,\n      icons,\n      classes,\n      onElementType,\n      language,\n    } = this.props;\n\n    return (\n      <div className={classes.pointChooser}>\n        <Points selected={elementType} classes={classes} selectPoint={onElementType} icons={icons} />\n        <div className={classes.controls}>\n          {showDeleteButton && (\n            <span className={classes.deleteIconHolder} onClick={onDeleteClick}>\n              <DeleteIcon classes={classes} />\n            </span>\n          )}\n          <Button\n            className={classes.buttonText}\n            onClick={onUndoElement}\n            label={translator.t('common:undo', { lng: language })}\n          />\n          <Button\n            className={classes.buttonText}\n            onClick={onClearElements}\n            label={translator.t('numberLine.clearAll', { lng: language })}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default injectSheet(styles)(PointChooser);\n\nPointChooser.DEFAULT_TYPE = 'pf';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_styles","_propTypes","_button","_translator","_img","_PointChooser","translator","Translator","iconHeight","iconWidth","StyledDeleteIcon","styled","fill","cursor","transition","opacity","DeleteIcon","default","createElement","height","viewBox","width","xmlns","d","iconIndexMap","pf","lff","lef","lfe","lee","rfn","rfp","ren","rep","StyledPointLink","$iconIndex","$active","display","position","top","background","img","backgroundPosition","textDecoration","RawPoint","props","iconKey","active","onClick","iconIndex","toLowerCase","role","key","propTypes","PropTypes","string","isRequired","bool","func","Point","exports","ElementSelector","padding","Points","selectPoint","selected","icons","iconTags","map","bind","array","PointChooserContainer","justifyContent","borderRadius","Controls","paddingTop","DeleteIconHolder","PointChooser","React","Component","render","elementType","showDeleteButton","onDeleteClick","onUndoElement","onClearElements","onElementType","language","label","t","lng","_defineProperty2","DEFAULT_TYPE","_default"],"sources":["../../../src/number-line/point-chooser/index.jsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\nimport Button from './button';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst iconHeight = 41;\nconst iconWidth = 42;\nimport img from './img';\n\nconst StyledDeleteIcon = styled('svg')({\n  fill: 'black',\n  cursor: 'pointer',\n  transition: 'opacity 100ms linear',\n  '&:hover': {\n    opacity: '0.5',\n  },\n});\n\nconst DeleteIcon = () => {\n  return (\n    <StyledDeleteIcon\n      fill=\"#000000\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    </StyledDeleteIcon>\n  );\n};\n\nconst iconIndexMap = {\n  pf: 0,\n  lff: 1,\n  lef: 2,\n  lfe: 3,\n  lee: 4,\n  rfn: 5,\n  rfp: 6,\n  ren: 7,\n  rep: 8,\n};\n\nconst StyledPointLink = styled('a')(({ $iconIndex, $active }) => ({\n  display: 'inline-block',\n  width: iconWidth,\n  height: iconHeight,\n  position: 'relative',\n  top: '1px',\n  cursor: 'pointer',\n  background: `url(${img}) -${$iconIndex * iconWidth}px 0px`,\n  ...($active && {\n    backgroundPosition: `-${$iconIndex * iconWidth}px -${2 * iconHeight}px`,\n  }),\n  '&:hover': {\n    textDecoration: 'none',\n    backgroundPosition: `-${$iconIndex * iconWidth}px -${iconHeight}px`,\n  },\n  ...($active && {\n    '&:hover': {\n      backgroundPosition: `-${$iconIndex * iconWidth}px -${2 * iconHeight}px`,\n    },\n  }),\n}));\n\nconst RawPoint = (props) => {\n  const { iconKey, active, onClick } = props;\n  const iconIndex = iconIndexMap[iconKey.toLowerCase()] ?? 0;\n  return (\n    <span role=\"presentation\" key={iconKey} onClick={onClick}>\n      <StyledPointLink $iconIndex={iconIndex} $active={active}>&nbsp;</StyledPointLink>\n    </span>\n  );\n};\n\nRawPoint.propTypes = {\n  iconKey: PropTypes.string.isRequired,\n  active: PropTypes.bool,\n  onClick: PropTypes.func,\n};\n\nexport const Point = RawPoint;\n\nconst ElementSelector = styled('div')({\n  width: '55%',\n  padding: '1px',\n  '-webkit-touch-callout': 'none',\n  '-webkit-user-select': 'none',\n  '-khtml-user-select': 'none',\n  '-moz-user-select': 'none',\n  '-ms-user-select': 'none',\n  'user-select': 'none',\n});\n\nconst Points = ({ selectPoint, selected, icons }) => {\n  const iconTags = icons.map((key) => {\n    let active = key === selected;\n    let onClick = active ? () => {} : selectPoint.bind(null, key);\n    return <Point key={key.toLowerCase()} iconKey={key.toLowerCase()} active={active} onClick={onClick} />;\n  });\n\n  return <ElementSelector>{iconTags}</ElementSelector>;\n};\n\nPoints.propTypes = {\n  selectPoint: PropTypes.func.isRequired,\n  selected: PropTypes.string,\n  icons: PropTypes.array,\n};\n\nconst PointChooserContainer = styled('div')({\n  display: 'flex',\n  justifyContent: 'space-between',\n  borderRadius: '4px',\n  padding: '1px',\n});\n\nconst Controls = styled('div')({\n  display: 'flex',\n  paddingTop: '7px',\n});\n\nconst DeleteIconHolder = styled('span')({\n  position: 'relative',\n  top: '3px',\n  width: '30px',\n});\n\nexport class PointChooser extends React.Component {\n  static defaultProps = {\n    showDeleteButton: false,\n    elementType: PointChooser.DEFAULT_TYPE,\n    icons: ['pf', 'lff', 'lef', 'lfe', 'lee', 'rfn', 'rfp', 'ren', 'rep'],\n  };\n\n  static propTypes = {\n    elementType: PropTypes.string,\n    showDeleteButton: PropTypes.bool,\n    onDeleteClick: PropTypes.func.isRequired,\n    onElementType: PropTypes.func.isRequired,\n    onUndoElement: PropTypes.func.isRequired,\n    onClearElements: PropTypes.func.isRequired,\n    icons: PropTypes.array,\n    language: PropTypes.string,\n  };\n\n  render() {\n    const {\n      elementType,\n      showDeleteButton,\n      onDeleteClick,\n      onUndoElement,\n      onClearElements,\n      icons,\n      onElementType,\n      language,\n    } = this.props;\n\n    return (\n      <PointChooserContainer>\n        <Points selected={elementType} selectPoint={onElementType} icons={icons} />\n        <Controls>\n          {showDeleteButton && (\n            <DeleteIconHolder onClick={onDeleteClick}>\n              <DeleteIcon />\n            </DeleteIconHolder>\n          )}\n          <Button\n            onClick={onUndoElement}\n            label={translator.t('common:undo', { lng: language })}\n          />\n          <Button\n            onClick={onClearElements}\n            label={translator.t('numberLine.clearAll', { lng: language })}\n          />\n        </Controls>\n      </PointChooserContainer>\n    );\n  }\n}\n\nexport default PointChooser;\n\nPointChooser.DEFAULT_TYPE = 'pf';\n"],"mappings":"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","ignoreList":[]}

package/lib/number-line/point-chooser/styles.js

@@ -1,61 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
+exports.default = void 0;
 var _img = _interopRequireDefault(require("./img"));
-
-var iconHeight = 41;
-var iconWidth = 42;
-
-var noselect = function noselect() {
-  return {
-    '-webkit-touch-callout': 'none'
-    /* iOS Safari */
-    ,
-    '-webkit-user-select': 'none'
-    /* Safari */
-    ,
-    '-khtml-user-select': 'none'
-    /* Konqueror HTML */
-    ,
-    '-moz-user-select': 'none'
-    /* Firefox */
-    ,
-    '-ms-user-select': 'none'
-    /* Internet Explorer/Edge */
-    ,
-    'user-select': 'none'
-    /* Non-prefixed version, currently
-              supported by Chrome and Opera */
-
-  };
-};
-
-var styleElement = function styleElement(index) {
-  return {
-    display: 'inline-block',
-    width: iconWidth,
-    height: iconHeight,
-    position: 'relative',
-    top: '1px',
-    cursor: 'pointer',
-    background: "url(".concat(_img["default"], ") -").concat(index * iconWidth, "px 0px"),
-    '&.active, &.active:hover': {
-      backgroundPosition: "-".concat(index * iconWidth, "px -").concat(2 * iconHeight, "px")
-    },
-    '&:hover': {
-      textDecoration: 'none',
-      backgroundPosition: "-".concat(index * iconWidth, "px -").concat(iconHeight, "px")
-    }
-  };
-};
-
-var _default = {
+const iconHeight = 41;
+const iconWidth = 42;
+const noselect = () => ({
+  '-webkit-touch-callout': 'none' /* iOS Safari */,
+  '-webkit-user-select': 'none' /* Safari */,
+  '-khtml-user-select': 'none' /* Konqueror HTML */,
+  '-moz-user-select': 'none' /* Firefox */,
+  '-ms-user-select': 'none' /* Internet Explorer/Edge */,
+  'user-select': 'none' /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+});
+const styleElement = index => ({
+  display: 'inline-block',
+  width: iconWidth,
+  height: iconHeight,
+  position: 'relative',
+  top: '1px',
+  cursor: 'pointer',
+  background: `url(${_img.default}) -${index * iconWidth}px 0px`,
+  '&.active, &.active:hover': {
+    backgroundPosition: `-${index * iconWidth}px -${2 * iconHeight}px`
+  },
+  '&:hover': {
+    textDecoration: 'none',
+    backgroundPosition: `-${index * iconWidth}px -${iconHeight}px`
+  }
+});
+var _default = exports.default = {
   pointChooser: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -96,5 +74,4 @@ var _default = {
   ren: styleElement(7),
   rep: styleElement(8)
 };
-exports["default"] = _default;
 //# sourceMappingURL=styles.js.map

package/lib/number-line/point-chooser/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/number-line/point-chooser/styles.js"],"names":["iconHeight","iconWidth","noselect","styleElement","index","display","width","height","position","top","cursor","background","img","backgroundPosition","textDecoration","pointChooser","justifyContent","borderRadius","padding","deleteIconHolder","deleteIcon","fill","transition","opacity","elementSelector","Object","assign","controls","paddingTop","buttonText","textWrap","pf","lff","lef","lfe","lee","rfn","rfp","ren","rep"],"mappings":";;;;;;;;;AAGA;;AAHA,IAAMA,UAAU,GAAG,EAAnB;AACA,IAAMC,SAAS,GAAG,EAAlB;;AAIA,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,SAAO;AACtB,6BAAyB;AAAO;AADV;AAEtB,2BAAuB;AAAO;AAFR;AAGtB,0BAAsB;AAAO;AAHP;AAItB,wBAAoB;AAAO;AAJL;AAKtB,uBAAmB;AAAO;AALJ;AAMtB,mBAAe;AAAO;AACxB;;AAPwB,GAAP;AAAA,CAAjB;;AAUA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;AAAA,SAAY;AAC/BC,IAAAA,OAAO,EAAE,cADsB;AAE/BC,IAAAA,KAAK,EAAEL,SAFwB;AAG/BM,IAAAA,MAAM,EAAEP,UAHuB;AAI/BQ,IAAAA,QAAQ,EAAE,UAJqB;AAK/BC,IAAAA,GAAG,EAAE,KAL0B;AAM/BC,IAAAA,MAAM,EAAE,SANuB;AAO/BC,IAAAA,UAAU,gBAASC,eAAT,gBAAkBR,KAAK,GAAGH,SAA1B,WAPqB;AAQ/B,gCAA4B;AAC1BY,MAAAA,kBAAkB,aAAMT,KAAK,GAAGH,SAAd,iBAA8B,IAAID,UAAlC;AADQ,KARG;AAW/B,eAAW;AACTc,MAAAA,cAAc,EAAE,MADP;AAETD,MAAAA,kBAAkB,aAAMT,KAAK,GAAGH,SAAd,iBAA8BD,UAA9B;AAFT;AAXoB,GAAZ;AAAA,CAArB;;eAiBe;AACbe,EAAAA,YAAY,EAAE;AACZV,IAAAA,OAAO,EAAE,MADG;AAEZW,IAAAA,cAAc,EAAE,eAFJ;AAGZC,IAAAA,YAAY,EAAE,KAHF;AAIZC,IAAAA,OAAO,EAAE;AAJG,GADD;AAObC,EAAAA,gBAAgB,EAAE;AAChBX,IAAAA,QAAQ,EAAE,UADM;AAEhBC,IAAAA,GAAG,EAAE,KAFW;AAGhBH,IAAAA,KAAK,EAAE;AAHS,GAPL;AAYbc,EAAAA,UAAU,EAAE;AACVC,IAAAA,IAAI,EAAE,OADI;AAEVX,IAAAA,MAAM,EAAE,SAFE;AAGVY,IAAAA,UAAU,EAAE,sBAHF;AAIV,eAAW;AACTC,MAAAA,OAAO,EAAE;AADA;AAJD,GAZC;AAoBbC,EAAAA,eAAe,EAAEC,MAAM,CAACC,MAAP,CACf;AACEpB,IAAAA,KAAK,EAAE,KADT;AAEEY,IAAAA,OAAO,EAAE;AAFX,GADe,EAKfhB,QAAQ,EALO,CApBJ;AA2BbyB,EAAAA,QAAQ,EAAE;AACRtB,IAAAA,OAAO,EAAE,MADD;AAERuB,IAAAA,UAAU,EAAE;AAFJ,GA3BG;AA+BbC,EAAAA,UAAU,EAAE;AACVC,IAAAA,QAAQ,EAAE;AADA,GA/BC;AAkCbC,EAAAA,EAAE,EAAE5B,YAAY,CAAC,CAAD,CAlCH;AAmCb6B,EAAAA,GAAG,EAAE7B,YAAY,CAAC,CAAD,CAnCJ;AAoCb8B,EAAAA,GAAG,EAAE9B,YAAY,CAAC,CAAD,CApCJ;AAqCb+B,EAAAA,GAAG,EAAE/B,YAAY,CAAC,CAAD,CArCJ;AAsCbgC,EAAAA,GAAG,EAAEhC,YAAY,CAAC,CAAD,CAtCJ;AAuCbiC,EAAAA,GAAG,EAAEjC,YAAY,CAAC,CAAD,CAvCJ;AAwCbkC,EAAAA,GAAG,EAAElC,YAAY,CAAC,CAAD,CAxCJ;AAyCbmC,EAAAA,GAAG,EAAEnC,YAAY,CAAC,CAAD,CAzCJ;AA0CboC,EAAAA,GAAG,EAAEpC,YAAY,CAAC,CAAD;AA1CJ,C","sourcesContent":["const iconHeight = 41;\nconst iconWidth = 42;\n\nimport img from './img';\n\nconst noselect = () => ({\n  '-webkit-touch-callout': 'none' /* iOS Safari */,\n  '-webkit-user-select': 'none' /* Safari */,\n  '-khtml-user-select': 'none' /* Konqueror HTML */,\n  '-moz-user-select': 'none' /* Firefox */,\n  '-ms-user-select': 'none' /* Internet Explorer/Edge */,\n  'user-select': 'none' /* Non-prefixed version, currently\n                                  supported by Chrome and Opera */,\n});\n\nconst styleElement = (index) => ({\n  display: 'inline-block',\n  width: iconWidth,\n  height: iconHeight,\n  position: 'relative',\n  top: '1px',\n  cursor: 'pointer',\n  background: `url(${img}) -${index * iconWidth}px 0px`,\n  '&.active, &.active:hover': {\n    backgroundPosition: `-${index * iconWidth}px -${2 * iconHeight}px`,\n  },\n  '&:hover': {\n    textDecoration: 'none',\n    backgroundPosition: `-${index * iconWidth}px -${iconHeight}px`,\n  },\n});\n\nexport default {\n  pointChooser: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    borderRadius: '4px',\n    padding: '1px',\n  },\n  deleteIconHolder: {\n    position: 'relative',\n    top: '3px',\n    width: '30px',\n  },\n  deleteIcon: {\n    fill: 'black',\n    cursor: 'pointer',\n    transition: 'opacity 100ms linear',\n    '&:hover': {\n      opacity: '0.5',\n    },\n  },\n  elementSelector: Object.assign(\n    {\n      width: '55%',\n      padding: '1px',\n    },\n    noselect(),\n  ),\n  controls: {\n    display: 'flex',\n    paddingTop: '7px',\n  },\n  buttonText: {\n    textWrap: 'nowrap',\n  },\n  pf: styleElement(0),\n  lff: styleElement(1),\n  lef: styleElement(2),\n  lfe: styleElement(3),\n  lee: styleElement(4),\n  rfn: styleElement(5),\n  rfp: styleElement(6),\n  ren: styleElement(7),\n  rep: styleElement(8),\n};\n"],"file":"styles.js"}
+{"version":3,"file":"styles.js","names":["_img","_interopRequireDefault","require","iconHeight","iconWidth","noselect","styleElement","index","display","width","height","position","top","cursor","background","img","backgroundPosition","textDecoration","_default","exports","default","pointChooser","justifyContent","borderRadius","padding","deleteIconHolder","deleteIcon","fill","transition","opacity","elementSelector","Object","assign","controls","paddingTop","buttonText","textWrap","pf","lff","lef","lfe","lee","rfn","rfp","ren","rep"],"sources":["../../../src/number-line/point-chooser/styles.js"],"sourcesContent":["const iconHeight = 41;\nconst iconWidth = 42;\n\nimport img from './img';\n\nconst noselect = () => ({\n  '-webkit-touch-callout': 'none' /* iOS Safari */,\n  '-webkit-user-select': 'none' /* Safari */,\n  '-khtml-user-select': 'none' /* Konqueror HTML */,\n  '-moz-user-select': 'none' /* Firefox */,\n  '-ms-user-select': 'none' /* Internet Explorer/Edge */,\n  'user-select': 'none' /* Non-prefixed version, currently\n                                  supported by Chrome and Opera */,\n});\n\nconst styleElement = (index) => ({\n  display: 'inline-block',\n  width: iconWidth,\n  height: iconHeight,\n  position: 'relative',\n  top: '1px',\n  cursor: 'pointer',\n  background: `url(${img}) -${index * iconWidth}px 0px`,\n  '&.active, &.active:hover': {\n    backgroundPosition: `-${index * iconWidth}px -${2 * iconHeight}px`,\n  },\n  '&:hover': {\n    textDecoration: 'none',\n    backgroundPosition: `-${index * iconWidth}px -${iconHeight}px`,\n  },\n});\n\nexport default {\n  pointChooser: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    borderRadius: '4px',\n    padding: '1px',\n  },\n  deleteIconHolder: {\n    position: 'relative',\n    top: '3px',\n    width: '30px',\n  },\n  deleteIcon: {\n    fill: 'black',\n    cursor: 'pointer',\n    transition: 'opacity 100ms linear',\n    '&:hover': {\n      opacity: '0.5',\n    },\n  },\n  elementSelector: Object.assign(\n    {\n      width: '55%',\n      padding: '1px',\n    },\n    noselect(),\n  ),\n  controls: {\n    display: 'flex',\n    paddingTop: '7px',\n  },\n  buttonText: {\n    textWrap: 'nowrap',\n  },\n  pf: styleElement(0),\n  lff: styleElement(1),\n  lef: styleElement(2),\n  lfe: styleElement(3),\n  lee: styleElement(4),\n  rfn: styleElement(5),\n  rfp: styleElement(6),\n  ren: styleElement(7),\n  rep: styleElement(8),\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,IAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAG,EAAE;AAIpB,MAAMC,QAAQ,GAAGA,CAAA,MAAO;EACtB,uBAAuB,EAAE,MAAM,CAAC;EAChC,qBAAqB,EAAE,MAAM,CAAC;EAC9B,oBAAoB,EAAE,MAAM,CAAC;EAC7B,kBAAkB,EAAE,MAAM,CAAC;EAC3B,iBAAiB,EAAE,MAAM,CAAC;EAC1B,aAAa,EAAE,MAAM,CAAC;AACxB;AACA,CAAC,CAAC;AAEF,MAAMC,YAAY,GAAIC,KAAK,KAAM;EAC/BC,OAAO,EAAE,cAAc;EACvBC,KAAK,EAAEL,SAAS;EAChBM,MAAM,EAAEP,UAAU;EAClBQ,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,KAAK;EACVC,MAAM,EAAE,SAAS;EACjBC,UAAU,EAAE,OAAOC,YAAG,MAAMR,KAAK,GAAGH,SAAS,QAAQ;EACrD,0BAA0B,EAAE;IAC1BY,kBAAkB,EAAE,IAAIT,KAAK,GAAGH,SAAS,OAAO,CAAC,GAAGD,UAAU;EAChE,CAAC;EACD,SAAS,EAAE;IACTc,cAAc,EAAE,MAAM;IACtBD,kBAAkB,EAAE,IAAIT,KAAK,GAAGH,SAAS,OAAOD,UAAU;EAC5D;AACF,CAAC,CAAC;AAAC,IAAAe,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEY;EACbC,YAAY,EAAE;IACZb,OAAO,EAAE,MAAM;IACfc,cAAc,EAAE,eAAe;IAC/BC,YAAY,EAAE,KAAK;IACnBC,OAAO,EAAE;EACX,CAAC;EACDC,gBAAgB,EAAE;IAChBd,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,KAAK;IACVH,KAAK,EAAE;EACT,CAAC;EACDiB,UAAU,EAAE;IACVC,IAAI,EAAE,OAAO;IACbd,MAAM,EAAE,SAAS;IACjBe,UAAU,EAAE,sBAAsB;IAClC,SAAS,EAAE;MACTC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,eAAe,EAAEC,MAAM,CAACC,MAAM,CAC5B;IACEvB,KAAK,EAAE,KAAK;IACZe,OAAO,EAAE;EACX,CAAC,EACDnB,QAAQ,CAAC,CACX,CAAC;EACD4B,QAAQ,EAAE;IACRzB,OAAO,EAAE,MAAM;IACf0B,UAAU,EAAE;EACd,CAAC;EACDC,UAAU,EAAE;IACVC,QAAQ,EAAE;EACZ,CAAC;EACDC,EAAE,EAAE/B,YAAY,CAAC,CAAC,CAAC;EACnBgC,GAAG,EAAEhC,YAAY,CAAC,CAAC,CAAC;EACpBiC,GAAG,EAAEjC,YAAY,CAAC,CAAC,CAAC;EACpBkC,GAAG,EAAElC,YAAY,CAAC,CAAC,CAAC;EACpBmC,GAAG,EAAEnC,YAAY,CAAC,CAAC,CAAC;EACpBoC,GAAG,EAAEpC,YAAY,CAAC,CAAC,CAAC;EACpBqC,GAAG,EAAErC,YAAY,CAAC,CAAC,CAAC;EACpBsC,GAAG,EAAEtC,YAAY,CAAC,CAAC,CAAC;EACpBuC,GAAG,EAAEvC,YAAY,CAAC,CAAC;AACrB,CAAC","ignoreList":[]}