@corva/ui 0.65.0-1-test → 0.65.0-2

package/components/GradientManager/GradientManager.js

@@ -1,281 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Grid, TextField, Box } from '@material-ui/core';
-import { noop, isEmpty, trim } from 'lodash';
-import { useState, useEffect } from 'react';
-import CheckIcon from '@material-ui/icons/Check';
-import CloseIcon from '@material-ui/icons/Close';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { DEFAULT_GRADIENTS, DEFAULT_GRADIENT_STOPS, TEMP_GRADIENT_ID, GRADIENT_MAX_NAME_LENGTH } from './configuration/constants.js';
-import { GradientList } from './GradientList.js';
-import IconButton from '../IconButton/index.js';
-import { GradientSelect } from './GradientSelect.js';
-import { GradientPicker } from '../GradientPicker/GradientPicker.js';
-import { useStyles } from './GradientManager.styles.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(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; }
-var GradientManager = function GradientManager(props) {
-  var _gradientList$getById;
-  var gradientId = props.gradientId,
-    _props$onGradientEdit = props.onGradientEditStateChange,
-    onGradientEditStateChange = _props$onGradientEdit === void 0 ? noop : _props$onGradientEdit,
-    _props$onChange = props.onChange,
-    onChange = _props$onChange === void 0 ? noop : _props$onChange,
-    _props$defaultGradien = props.defaultGradients,
-    defaultGradients = _props$defaultGradien === void 0 ? DEFAULT_GRADIENTS : _props$defaultGradien,
-    _props$defaultGradien2 = props.defaultGradientStops,
-    defaultGradientStops = _props$defaultGradien2 === void 0 ? DEFAULT_GRADIENT_STOPS : _props$defaultGradien2,
-    allowNoname = props.allowNoname,
-    _props$scaleOptions = props.scaleOptions,
-    scaleOptions = _props$scaleOptions === void 0 ? {
-      scaleFrom: 0,
-      scaleTo: 100
-    } : _props$scaleOptions;
-  var classes = useStyles();
-  var gradientList = new GradientList(props.gradients || [], defaultGradients, props.onGradientsChange);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentlyEdited = _useState2[0],
-    setCurrentlyEdited = _useState2[1];
-  var disableGradientsManagement = props.disableGradientsManagement || !props.onGradientsChange;
-  var validationResult = gradientList.getHelperText({
-    name: currentlyEdited === null || currentlyEdited === void 0 ? void 0 : currentlyEdited.name,
-    allowNoname: allowNoname,
-    gradientId: gradientId
-  });
-
-  /**
-   * Calls editStateChange handler when gradient edit starts or ends.
-   * Will be called with false on component mount
-   */
-  useEffect(function () {
-    onGradientEditStateChange(Boolean(currentlyEdited));
-  }, [Boolean(currentlyEdited)]);
-
-  /**
-   * Use stops from the stored gradient first, then fallback to stored in the trace
-   * and finally, use defaultGradientStops if none of above is available
-   */
-  var gradientStops = ((_gradientList$getById = gradientList.getById(gradientId)) === null || _gradientList$getById === void 0 ? void 0 : _gradientList$getById.gradientStops) || props.gradientStops || defaultGradientStops;
-  var cancelEdit = function cancelEdit() {
-    setCurrentlyEdited(null);
-  };
-  var startAddGradient = function startAddGradient() {
-    setCurrentlyEdited({
-      name: '',
-      gradientStops: defaultGradientStops,
-      id: TEMP_GRADIENT_ID
-    });
-  };
-  var startEditGradient = function startEditGradient() {
-    var _gradientList$getById2;
-    if (gradientList.isDefault(gradientId)) {
-      setCurrentlyEdited({
-        name: gradientList.newName(),
-        gradientStops: gradientStops,
-        id: TEMP_GRADIENT_ID
-      });
-      return;
-    }
-    setCurrentlyEdited({
-      name: ((_gradientList$getById2 = gradientList.getById(gradientId)) === null || _gradientList$getById2 === void 0 ? void 0 : _gradientList$getById2.name) || '',
-      gradientStops: gradientStops
-    });
-  };
-  var saveChanges = function saveChanges() {
-    if (!isEmpty(validationResult)) {
-      return;
-    }
-    var gradientStops = currentlyEdited.gradientStops;
-    var name = trim(currentlyEdited.name);
-    setCurrentlyEdited(null);
-
-    // No name - no need to create a gradient. Saving stops to the trace.
-    if (!name) {
-      if (allowNoname) {
-        onChange({
-          gradientStops: gradientStops,
-          gradientId: null
-        });
-      }
-      return;
-    }
-
-    /**
-     * Gradient exists - Updating
-     * simple check that gradientId is not null is NOT enough because
-     * Deleted gradients have gradientId but should be handles as non-existing ones.
-     */
-    if (gradientList.getById(currentlyEdited.id || gradientId)) {
-      gradientList.update(gradientId, {
-        gradientStops: gradientStops,
-        name: name
-      });
-      onChange({
-        gradientId: gradientId,
-        gradientStops: gradientStops
-      });
-      return;
-    }
-
-    // Creating a new gradient
-    var newGradient = gradientList.add(name, gradientStops);
-    onChange({
-      gradientId: newGradient === null || newGradient === void 0 ? void 0 : newGradient.id,
-      gradientStops: gradientStops
-    });
-  };
-  var deleteGradient = function deleteGradient(id) {
-    if (id === gradientId) {
-      onChange({
-        gradientId: null,
-        gradientStops: gradientStops
-      });
-      setCurrentlyEdited(null);
-    }
-    gradientList.remove(id);
-  };
-  var handleNameChange = function handleNameChange(value) {
-    var name = value.trimStart().substring(0, GRADIENT_MAX_NAME_LENGTH);
-    setCurrentlyEdited(_objectSpread(_objectSpread({}, currentlyEdited), {}, {
-      name: name
-    }));
-  };
-  var handleGradientAction = function handleGradientAction(type, id) {
-    switch (type) {
-      case 'add':
-        startAddGradient();
-        break;
-      case 'delete':
-        {
-          deleteGradient(id);
-          break;
-        }
-    }
-  };
-  var handleGradientSelect = function handleGradientSelect(id) {
-    var _gradient$gradientSto;
-    var gradient = gradientList.getById(id);
-    onChange({
-      gradientId: id,
-      gradientStops: (_gradient$gradientSto = gradient === null || gradient === void 0 ? void 0 : gradient.gradientStops) !== null && _gradient$gradientSto !== void 0 ? _gradient$gradientSto : defaultGradientStops
-    });
-  };
-  var handleGradientChange = function handleGradientChange(gradientStops) {
-    setCurrentlyEdited(_objectSpread(_objectSpread({}, currentlyEdited), {}, {
-      gradientStops: gradientStops
-    }));
-  };
-  var handleNameKeyDown = function handleNameKeyDown(evt) {
-    if (evt.key === 'Enter') {
-      var _evt$target;
-      // @ts-ignore
-      var value = (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.value;
-      if (value) {
-        handleNameChange(value);
-        saveChanges();
-      }
-    }
-  };
-  return /*#__PURE__*/jsxs(Grid, {
-    container: true,
-    children: [/*#__PURE__*/jsx(Grid, {
-      item: true,
-      xs: 6,
-      children: currentlyEdited ? /*#__PURE__*/jsx(TextField, _objectSpread({
-        className: classes.customGradientName,
-        label: "Gradient Name",
-        value: currentlyEdited.name,
-        onChange: function onChange(evt) {
-          return handleNameChange(evt.target.value);
-        },
-        onFocus: function onFocus(event) {
-          event.target.select();
-        },
-        onKeyDown: handleNameKeyDown,
-        autoFocus: true,
-        fullWidth: true
-      }, validationResult)) : /*#__PURE__*/jsx(GradientSelect, {
-        value: gradientId,
-        gradients: props.gradients || [],
-        onChange: handleGradientSelect,
-        defaultGradients: defaultGradients,
-        onAction: handleGradientAction,
-        readonly: disableGradientsManagement
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      item: true,
-      xs: 6,
-      children: /*#__PURE__*/jsx(Box, {
-        display: "flex",
-        alignItems: "center",
-        height: "100%",
-        children: /*#__PURE__*/jsx(Box, {
-          display: "flex",
-          paddingLeft: 1,
-          children: currentlyEdited ? /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(IconButton, {
-              "data-testid": "save-gradient-btn",
-              className: classes.iconButton,
-              onClick: saveChanges,
-              tooltipProps: {
-                title: 'Save'
-              },
-              disabled: !!validationResult || disableGradientsManagement,
-              children: /*#__PURE__*/jsx(CheckIcon, {})
-            }), /*#__PURE__*/jsx(IconButton, {
-              "data-testid": "cancel-edit-btn",
-              className: classes.iconButton,
-              onClick: cancelEdit,
-              tooltipProps: {
-                title: 'Cancel'
-              },
-              children: /*#__PURE__*/jsx(CloseIcon, {})
-            })]
-          }) : /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(IconButton, {
-              "data-testid": "edit-gradient-btn",
-              className: classes.iconButton,
-              onClick: startEditGradient,
-              tooltipProps: {
-                title: 'Edit'
-              },
-              disabled: disableGradientsManagement,
-              children: /*#__PURE__*/jsx(EditIcon, {})
-            }), !!gradientList.getById(gradientId) && !gradientList.isDefault(gradientId) && /*#__PURE__*/jsx(IconButton, {
-              "data-testid": "delete-gradient-btn",
-              className: classes.iconButton,
-              onClick: function onClick() {
-                return deleteGradient(gradientId);
-              },
-              tooltipProps: {
-                title: 'Remove'
-              },
-              disabled: disableGradientsManagement,
-              children: /*#__PURE__*/jsx(DeleteIcon, {})
-            })]
-          })
-        })
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      item: true,
-      xs: 12,
-      children: /*#__PURE__*/jsx(GradientPicker, {
-        from: scaleOptions === null || scaleOptions === void 0 ? void 0 : scaleOptions.scaleFrom,
-        to: scaleOptions === null || scaleOptions === void 0 ? void 0 : scaleOptions.scaleTo,
-        unit: scaleOptions === null || scaleOptions === void 0 ? void 0 : scaleOptions.scaleUnit,
-        noScale: true,
-        gradientStops: (currentlyEdited === null || currentlyEdited === void 0 ? void 0 : currentlyEdited.gradientStops) || gradientStops,
-        onChange: handleGradientChange,
-        readonly: !currentlyEdited,
-        isMoveInputVisible: true
-      })
-    })]
-  });
-};
-
-export { GradientManager };
-//# sourceMappingURL=GradientManager.js.map
+import{__assign as t}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as e,jsx as n,Fragment as i}from"react/jsx-runtime";import{Grid as a,TextField as o,Box as r}from"@material-ui/core";import{noop as d,isEmpty as l,trim as s}from"lodash";import{useState as c,useEffect as m}from"react";import u from"@material-ui/icons/Check";import g from"@material-ui/icons/Close";import p from"@material-ui/icons/Edit";import f from"@material-ui/icons/Delete";import{DEFAULT_GRADIENTS as v,DEFAULT_GRADIENT_STOPS as h,TEMP_GRADIENT_ID as S,GRADIENT_MAX_NAME_LENGTH as I}from"./configuration/constants.js";import{GradientList as b}from"./GradientList.js";import C from"../IconButton/index.js";import{GradientSelect as G}from"./GradientSelect.js";import{GradientPicker as y}from"../GradientPicker/GradientPicker.js";import{useStyles as B}from"./GradientManager.styles.js";var N=function(N){var k,x=N.gradientId,j=N.onGradientEditStateChange,w=void 0===j?d:j,P=N.onChange,D=void 0===P?d:P,E=N.defaultGradients,F=void 0===E?v:E,M=N.defaultGradientStops,T=void 0===M?h:M,L=N.allowNoname,A=N.scaleOptions,H=void 0===A?{scaleFrom:0,scaleTo:100}:A,K=B(),O=new b(N.gradients||[],F,N.onGradientsChange),R=c(null),U=R[0],V=R[1],W=N.disableGradientsManagement||!N.onGradientsChange,_=O.getHelperText({name:null==U?void 0:U.name,allowNoname:L,gradientId:x});m((function(){w(Boolean(U))}),[Boolean(U)]);var q=(null===(k=O.getById(x))||void 0===k?void 0:k.gradientStops)||N.gradientStops||T,z=function(){if(l(_)){var t=U.gradientStops,e=s(U.name);if(V(null),e){if(O.getById(U.id||x))return O.update(x,{gradientStops:t,name:e}),void D({gradientId:x,gradientStops:t});var n=O.add(e,t);D({gradientId:null==n?void 0:n.id,gradientStops:t})}else L&&D({gradientStops:t,gradientId:null})}},J=function(t){t===x&&(D({gradientId:null,gradientStops:q}),V(null)),O.remove(t)},Q=function(e){var n=e.trimStart().substring(0,I);V(t(t({},U),{name:n}))};return e(a,t({container:!0},{children:[n(a,t({item:!0,xs:6},{children:U?n(o,t({className:K.customGradientName,label:"Gradient Name",value:U.name,onChange:function(t){return Q(t.target.value)},onFocus:function(t){t.target.select()},onKeyDown:function(t){var e;if("Enter"===t.key){var n=null===(e=t.target)||void 0===e?void 0:e.value;n&&(Q(n),z())}},autoFocus:!0,fullWidth:!0},_)):n(G,{value:x,gradients:N.gradients||[],onChange:function(t){var e,n=O.getById(t);D({gradientId:t,gradientStops:null!==(e=null==n?void 0:n.gradientStops)&&void 0!==e?e:T})},defaultGradients:F,onAction:function(t,e){switch(t){case"add":V({name:"",gradientStops:T,id:S});break;case"delete":J(e)}},readonly:W})})),n(a,t({item:!0,xs:6},{children:n(r,t({display:"flex",alignItems:"center",height:"100%"},{children:n(r,t({display:"flex",paddingLeft:1},{children:e(i,U?{children:[n(C,t({"data-testid":"save-gradient-btn",className:K.iconButton,onClick:z,tooltipProps:{title:"Save"},disabled:!!_||W},{children:n(u,{})})),n(C,t({"data-testid":"cancel-edit-btn",className:K.iconButton,onClick:function(){V(null)},tooltipProps:{title:"Cancel"}},{children:n(g,{})}))]}:{children:[n(C,t({"data-testid":"edit-gradient-btn",className:K.iconButton,onClick:function(){var t;O.isDefault(x)?V({name:O.newName(),gradientStops:q,id:S}):V({name:(null===(t=O.getById(x))||void 0===t?void 0:t.name)||"",gradientStops:q})},tooltipProps:{title:"Edit"},disabled:W},{children:n(p,{})})),!!O.getById(x)&&!O.isDefault(x)&&n(C,t({"data-testid":"delete-gradient-btn",className:K.iconButton,onClick:function(){return J(x)},tooltipProps:{title:"Remove"},disabled:W},{children:n(f,{})}))]})}))}))})),n(a,t({item:!0,xs:12},{children:n(y,{from:null==H?void 0:H.scaleFrom,to:null==H?void 0:H.scaleTo,unit:null==H?void 0:H.scaleUnit,noScale:!0,gradientStops:(null==U?void 0:U.gradientStops)||q,onChange:function(e){V(t(t({},U),{gradientStops:e}))},readonly:!U,isMoveInputVisible:!0})}))]}))};export{N as GradientManager};

package/components/GradientManager/GradientManager.styles.js

@@ -1,16 +1 @@
-import { makeStyles } from '@material-ui/core';
-
-var useStyles = makeStyles({
-  customGradientName: {
-    minWidth: 175,
-    marginBottom: 20
-  },
-  iconButton: {
-    '&:hover': {
-      background: 'transparent'
-    }
-  }
-});
-
-export { useStyles };
-//# sourceMappingURL=GradientManager.styles.js.map
+import{makeStyles as r}from"@material-ui/core";var t=r({customGradientName:{minWidth:175,marginBottom:20},iconButton:{"&:hover":{background:"transparent"}}});export{t as useStyles};

package/components/GradientManager/GradientPreview/GradientPreview.js

@@ -1,31 +1 @@
-import { makeStyles } from '@material-ui/core';
-import tinygradient from 'tinygradient';
-import { jsx } from 'react/jsx-runtime';
-
-var useStyles = makeStyles({
-  gradientPreview: {
-    background: 'red',
-    width: 32,
-    height: 16,
-    borderRadius: 4
-  }
-});
-var GradientPreview = function GradientPreview(_ref) {
-  var gradientStops = _ref.gradientStops;
-  var linearGradient = tinygradient(gradientStops.map(function (item) {
-    return {
-      color: item.color,
-      pos: item.pos / 100
-    };
-  })).css('linear', '90deg');
-  var styles = useStyles();
-  return /*#__PURE__*/jsx("div", {
-    className: styles.gradientPreview,
-    style: {
-      background: linearGradient
-    }
-  });
-};
-
-export { GradientPreview };
-//# sourceMappingURL=GradientPreview.js.map
+import{jsx as r}from"react/jsx-runtime";import{makeStyles as e}from"@material-ui/core";import i from"tinygradient";var o=e({gradientPreview:{background:"red",width:32,height:16,borderRadius:4}}),t=function(e){var t=e.gradientStops,a=i(t.map((function(r){return{color:r.color,pos:r.pos/100}}))).css("linear","90deg"),n=o();return r("div",{className:n.gradientPreview,style:{background:a}})};export{t as GradientPreview};

package/components/GradientManager/GradientSelect.js

@@ -1,135 +1 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { ListSubheader, MenuItem } from '@material-ui/core';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { useState } from 'react';
-import classNames from 'classnames';
-import { isEmpty } from 'lodash';
-import { GradientPreview } from './GradientPreview/GradientPreview.js';
-import Select from '../Select/index.js';
-import IconButton from '../IconButton/index.js';
-import { useStyles } from './GradientSelect.styles.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var GradientSelect = function GradientSelect(_ref) {
-  var value = _ref.value,
-    gradients = _ref.gradients,
-    onChange = _ref.onChange,
-    defaultGradients = _ref.defaultGradients,
-    onAction = _ref.onAction,
-    readonly = _ref.readonly;
-  var classes = useStyles();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-
-  /** @param {React.ChangeEvent<HTMLInputElement>} event */
-  var handleItemChange = function handleItemChange(_ref2) {
-    var target = _ref2.target;
-    if (target.value) {
-      onChange(target.value);
-    }
-  };
-  var handleDeleteClick = function handleDeleteClick(evt) {
-    var _evt$currentTarget$cl, _evt$currentTarget$cl2;
-    evt.stopPropagation();
-    // When we simply disable the button  clicks are passing through it
-    // and another gradient selected. To prevent this the button still handles
-    // clicks but does nothing.
-    if (readonly) {
-      return;
-    }
-    var gradientId = (_evt$currentTarget$cl = evt.currentTarget.closest('li')) === null || _evt$currentTarget$cl === void 0 ? void 0 : (_evt$currentTarget$cl2 = _evt$currentTarget$cl.dataset) === null || _evt$currentTarget$cl2 === void 0 ? void 0 : _evt$currentTarget$cl2.value;
-    if (value === gradientId) {
-      // Do not close dropdown when deleting not selected gradients
-      setOpen(false);
-    }
-    onAction('delete', gradientId);
-  };
-  var hideMyGroup = isEmpty(gradients) && readonly;
-  return /*#__PURE__*/jsxs(Select, {
-    "data-testid": "gradient-select",
-    label: "Gradients",
-    value: value || '',
-    className: classes.select,
-    onChange: handleItemChange,
-    open: open,
-    onClose: function onClose() {
-      return setOpen(false);
-    },
-    onOpen: function onOpen() {
-      return setOpen(true);
-    },
-    inputProps: {
-      name: 'gradientId',
-      id: 'gradientId'
-    },
-    FormControlProps: {
-      fullWidth: true
-    },
-    fullWidth: true,
-    defaultValue: "",
-    children: [/*#__PURE__*/jsx(ListSubheader, {
-      className: classes.listHeader,
-      children: "Gradients"
-    }), !hideMyGroup && /*#__PURE__*/jsxs(ListSubheader, {
-      className: classes.subHeader,
-      children: ["My Gradients", !readonly && /*#__PURE__*/jsx(IconButton, {
-        color: "primary",
-        "data-testid": "add-gradient-btn",
-        className: classes.addButton,
-        onClick: function onClick() {
-          return onAction('add');
-        },
-        tooltipProps: {
-          title: 'Create Custom Gradient'
-        },
-        children: /*#__PURE__*/jsx(AddCircleIcon, {
-          color: "primary"
-        })
-      })]
-    }), gradients.map(function (_ref3) {
-      var id = _ref3.id,
-        name = _ref3.name,
-        gradientStops = _ref3.gradientStops;
-      return /*#__PURE__*/jsxs(MenuItem, {
-        value: id,
-        className: classes.customGradientListItem,
-        children: [/*#__PURE__*/jsx(GradientPreview, {
-          gradientStops: gradientStops
-        }), /*#__PURE__*/jsx("span", {
-          children: name
-        }), /*#__PURE__*/jsx(IconButton, {
-          className: classNames(classes.removeButton, {
-            disabled: readonly
-          }),
-          onClick: handleDeleteClick,
-          tooltipProps: {
-            title: 'Remove Gradient'
-          },
-          children: /*#__PURE__*/jsx(DeleteIcon, {})
-        })]
-      }, id);
-    }), !isEmpty(defaultGradients) && /*#__PURE__*/jsx(ListSubheader, {
-      className: classes.subHeader,
-      children: "Default Gradients"
-    }), defaultGradients.map(function (_ref4) {
-      var id = _ref4.id,
-        name = _ref4.name,
-        gradientStops = _ref4.gradientStops;
-      return /*#__PURE__*/jsxs(MenuItem, {
-        value: id,
-        className: classes.customGradientListItem,
-        children: [/*#__PURE__*/jsx(GradientPreview, {
-          gradientStops: gradientStops
-        }), /*#__PURE__*/jsx("span", {
-          children: name
-        })]
-      }, id);
-    })]
-  });
-};
-
-export { GradientSelect };
-//# sourceMappingURL=GradientSelect.js.map
+import{__assign as e}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as t,jsx as r}from"react/jsx-runtime";import{ListSubheader as a,MenuItem as i}from"@material-ui/core";import n from"@material-ui/icons/AddCircle";import o from"@material-ui/icons/Delete";import{useState as l}from"react";import d from"classnames";import{isEmpty as s}from"lodash";import{GradientPreview as m}from"./GradientPreview/GradientPreview.js";import c from"../Select/index.js";import u from"../IconButton/index.js";import{useStyles as p}from"./GradientSelect.styles.js";var f=function(f){var v=f.value,h=f.gradients,g=f.onChange,G=f.defaultGradients,C=f.onAction,N=f.readonly,b=p(),P=l(!1),j=P[0],S=P[1],y=function(e){var t,r;if(e.stopPropagation(),!N){var a=null===(r=null===(t=e.currentTarget.closest("li"))||void 0===t?void 0:t.dataset)||void 0===r?void 0:r.value;v===a&&S(!1),C("delete",a)}},I=s(h)&&N;return t(c,e({"data-testid":"gradient-select",label:"Gradients",value:v||"",className:b.select,onChange:function(e){var t=e.target;t.value&&g(t.value)},open:j,onClose:function(){return S(!1)},onOpen:function(){return S(!0)},inputProps:{name:"gradientId",id:"gradientId"},FormControlProps:{fullWidth:!0},fullWidth:!0,defaultValue:""},{children:[r(a,e({className:b.listHeader},{children:"Gradients"})),!I&&t(a,e({className:b.subHeader},{children:["My Gradients",!N&&r(u,e({color:"primary","data-testid":"add-gradient-btn",className:b.addButton,onClick:function(){return C("add")},tooltipProps:{title:"Create Custom Gradient"}},{children:r(n,{color:"primary"})}))]})),h.map((function(a){var n=a.id,l=a.name,s=a.gradientStops;return t(i,e({value:n,className:b.customGradientListItem},{children:[r(m,{gradientStops:s}),r("span",{children:l}),r(u,e({className:d(b.removeButton,{disabled:N}),onClick:y,tooltipProps:{title:"Remove Gradient"}},{children:r(o,{})}))]}),n)})),!s(G)&&r(a,e({className:b.subHeader},{children:"Default Gradients"})),G.map((function(a){var n=a.id,o=a.name,l=a.gradientStops;return t(i,e({value:n,className:b.customGradientListItem},{children:[r(m,{gradientStops:l}),r("span",{children:o})]}),n)}))]}))};export{f as GradientSelect};

package/components/GradientManager/GradientSelect.styles.js

@@ -1,72 +1 @@
-import { makeStyles } from '@material-ui/core';
-
-var useStyles = makeStyles(function (_ref) {
-  var palette = _ref.palette;
-  return {
-    select: {
-      '& > .MuiSelect-root': {
-        display: 'flex',
-        gap: '8px',
-        flexShrink: 0,
-        paddingRight: 0
-      },
-      '& > .MuiSelect-root > button': {
-        display: 'none'
-      },
-      width: '100%',
-      marginBottom: 20
-    },
-    customGradientListItem: {
-      width: '300px',
-      '& span': {
-        flexGrow: 1,
-        padding: '0 8px'
-      },
-      '& button': {
-        visibility: 'hidden'
-      },
-      '&:hover button': {
-        visibility: 'visible'
-      },
-      '&:hover button.disabled': {
-        opacity: 0.3
-      }
-    },
-    listHeader: {
-      pointerEvents: 'none',
-      userSelect: 'none',
-      fontSize: '20px',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      color: palette.common.white
-    },
-    subHeader: {
-      pointerEvents: 'none',
-      userSelect: 'none',
-      fontSize: '10px',
-      color: palette.primary.text7,
-      textTransform: 'uppercase',
-      display: 'flex',
-      alignItems: 'center'
-    },
-    addButton: {
-      pointerEvents: 'all',
-      '&:hover': {
-        background: 'transparent'
-      }
-    },
-    removeButton: {
-      color: palette.primary.text7,
-      padding: 0,
-      '&:hover': {
-        background: 'transparent'
-      },
-      '& .MuiIconButton-label': {
-        padding: 0
-      }
-    }
-  };
-});
-
-export { useStyles };
-//# sourceMappingURL=GradientSelect.styles.js.map
+import{makeStyles as t}from"@material-ui/core";var e=t((function(t){var e=t.palette;return{select:{"& > .MuiSelect-root":{display:"flex",gap:"8px",flexShrink:0,paddingRight:0},"& > .MuiSelect-root > button":{display:"none"},width:"100%",marginBottom:20},customGradientListItem:{width:"300px","& span":{flexGrow:1,padding:"0 8px"},"& button":{visibility:"hidden"},"&:hover button":{visibility:"visible"},"&:hover button.disabled":{opacity:.3}},listHeader:{pointerEvents:"none",userSelect:"none",fontSize:"20px",fontStyle:"normal",fontWeight:400,color:e.common.white},subHeader:{pointerEvents:"none",userSelect:"none",fontSize:"10px",color:e.primary.text7,textTransform:"uppercase",display:"flex",alignItems:"center"},addButton:{pointerEvents:"all","&:hover":{background:"transparent"}},removeButton:{color:e.primary.text7,padding:0,"&:hover":{background:"transparent"},"& .MuiIconButton-label":{padding:0}}}}));export{e as useStyles};

package/components/GradientManager/configuration/constants.js

@@ -1,113 +1 @@
-var ALREADY_EXISTS_MESSAGE = 'This name is already used';
-var NAME_IS_MISSING_MESSAGE = 'Please enter the name';
-var GRADIENT_NEW_NAME = 'My Gradient';
-var GRADIENT_MAX_NAME_LENGTH = 30;
-var TEMP_GRADIENT_ID = 'TEMP_GRADIENT_ID';
-var DEFAULT_GRADIENTS = [{
-  id: 'chromium',
-  name: 'Chromium',
-  gradientStops: [{
-    color: '#F7F7F7',
-    pos: 0
-  }, {
-    color: '#828282',
-    pos: 100
-  }]
-}, {
-  id: 'garden',
-  name: 'Garden',
-  gradientStops: [{
-    color: '#5256BE',
-    pos: 0
-  }, {
-    color: '#3CA3BD',
-    pos: 25
-  }, {
-    color: '#18B756',
-    pos: 50
-  }, {
-    color: '#DECF11',
-    pos: 75
-  }, {
-    color: '#AF534C',
-    pos: 100
-  }]
-}, {
-  id: 'standard',
-  name: 'Standard',
-  gradientStops: [{
-    color: '#C05B5B',
-    pos: 0
-  }, {
-    color: '#D6CA1D',
-    pos: 50
-  }, {
-    color: '#14C23A',
-    pos: 100
-  }]
-}, {
-  id: 'amber',
-  name: 'Amber',
-  gradientStops: [{
-    color: '#FFFBF4',
-    pos: 0
-  }, {
-    color: '#C0A87D',
-    pos: 25
-  }, {
-    color: '#E2A547',
-    pos: 50
-  }, {
-    color: '#CA8846',
-    pos: 75
-  }, {
-    color: '#6D4B48',
-    pos: 100
-  }]
-}, {
-  id: 'volcano',
-  name: 'Volcano',
-  gradientStops: [{
-    color: '#807373',
-    pos: 0
-  }, {
-    color: '#C56265',
-    pos: 25
-  }, {
-    color: '#CA8846',
-    pos: 50
-  }, {
-    color: '#CF9957',
-    pos: 75
-  }, {
-    color: '#D7CD1F',
-    pos: 100
-  }]
-}, {
-  id: 'cave',
-  name: 'Cave',
-  gradientStops: [{
-    color: '#FEFEF3',
-    pos: 0
-  }, {
-    color: '#F5D09E',
-    pos: 10
-  }, {
-    color: '#ED9F3B',
-    pos: 30
-  }, {
-    color: '#B9421C',
-    pos: 50
-  }, {
-    color: '#541106',
-    pos: 75
-  }, {
-    color: '#050204',
-    pos: 100
-  }]
-}];
-var GARDEN_GRADIENT_INDEX = 1;
-var DEFAULT_GRADIENT_STOPS = DEFAULT_GRADIENTS[GARDEN_GRADIENT_INDEX].gradientStops;
-
-export { ALREADY_EXISTS_MESSAGE, DEFAULT_GRADIENTS, DEFAULT_GRADIENT_STOPS, GRADIENT_MAX_NAME_LENGTH, GRADIENT_NEW_NAME, NAME_IS_MISSING_MESSAGE, TEMP_GRADIENT_ID };
-//# sourceMappingURL=constants.js.map
+var o="This name is already used",r="Please enter the name",s="My Gradient",p=30,a="TEMP_GRADIENT_ID",c=[{id:"chromium",name:"Chromium",gradientStops:[{color:"#F7F7F7",pos:0},{color:"#828282",pos:100}]},{id:"garden",name:"Garden",gradientStops:[{color:"#5256BE",pos:0},{color:"#3CA3BD",pos:25},{color:"#18B756",pos:50},{color:"#DECF11",pos:75},{color:"#AF534C",pos:100}]},{id:"standard",name:"Standard",gradientStops:[{color:"#C05B5B",pos:0},{color:"#D6CA1D",pos:50},{color:"#14C23A",pos:100}]},{id:"amber",name:"Amber",gradientStops:[{color:"#FFFBF4",pos:0},{color:"#C0A87D",pos:25},{color:"#E2A547",pos:50},{color:"#CA8846",pos:75},{color:"#6D4B48",pos:100}]},{id:"volcano",name:"Volcano",gradientStops:[{color:"#807373",pos:0},{color:"#C56265",pos:25},{color:"#CA8846",pos:50},{color:"#CF9957",pos:75},{color:"#D7CD1F",pos:100}]},{id:"cave",name:"Cave",gradientStops:[{color:"#FEFEF3",pos:0},{color:"#F5D09E",pos:10},{color:"#ED9F3B",pos:30},{color:"#B9421C",pos:50},{color:"#541106",pos:75},{color:"#050204",pos:100}]}],e=c[1].gradientStops;export{o as ALREADY_EXISTS_MESSAGE,c as DEFAULT_GRADIENTS,e as DEFAULT_GRADIENT_STOPS,p as GRADIENT_MAX_NAME_LENGTH,s as GRADIENT_NEW_NAME,r as NAME_IS_MISSING_MESSAGE,a as TEMP_GRADIENT_ID};