@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.102

package/node/lib/forms/color-indicator/ColorIndicator.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Popover = _interopRequireDefault(require("../../components/popovers/popover/Popover"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ColorIndicator(_ref) {
+  let {
+    text,
+    label,
+    color,
+    className,
+    showPopOver = false,
+    children,
+    disabled
+  } = _ref;
+  const classes = (0, _classnames.default)('fwe-color-indicator', className, disabled);
+  const [isEditorOpen, setEditorOpen] = (0, _react.useState)(false);
+  function getBorderColor() {
+    if (!color || color.toUpperCase() === '#FFFFFF' || color.toUpperCase() === '#F2F3F5') {
+      return '#b6bec6'; // = $control-border
+    }
+
+    return color;
+  }
+  const colorBox = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fwe-color-box",
+    style: {
+      background: color,
+      borderColor: getBorderColor()
+    },
+    children: !color && /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      className: "fwe-no-color-pattern",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      id: "canvas1",
+      width: "18",
+      height: "18",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("pattern", {
+          id: "bwsquare2px",
+          width: "4",
+          height: "4",
+          patternUnits: "userSpaceOnUse",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+            x: "0",
+            y: "0",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#ffffff"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+            x: "2",
+            y: "0",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#e5e8eb"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+            x: "0",
+            y: "2",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#e5e8eb"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+            x: "2",
+            y: "2",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#ffffff"
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: "0",
+        y: "0",
+        rx: "0",
+        ry: "0",
+        width: "18",
+        height: "18",
+        fill: "url(#bwsquare2px)",
+        strokeWidth: "0"
+      })]
+    })
+  });
+  const wrapperProperties = showPopOver ? {
+    onClick: () => setEditorOpen(prevOpen => !prevOpen)
+  } : {};
+  const wrapper = wrapperChildren => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes,
+    ...wrapperProperties,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        opacity: isEditorOpen ? 0 : 1
+      },
+      className: "fwe-color-label",
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-color-container",
+      children: [wrapperChildren, " ", text && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-color-indicator-text",
+        children: text
+      }), ' ']
+    })]
+  });
+  return showPopOver ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+    containerClassName: "fwe-popover-container--color-indicator",
+    position: "top",
+    flip: false,
+    wrapper: wrapper,
+    popoverContent: children,
+    open: isEditorOpen,
+    onStatusChange: setEditorOpen,
+    stopPropagation: true,
+    children: colorBox
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: wrapper(colorBox)
+  });
+}
+var _default = ColorIndicator;
+exports.default = _default;

package/node/lib/forms/color-picker/ColorHelper.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class ColorHelper {
+  // based on: https://gist.github.com/mjackson/5311256
+  static rgbToHsv(rgb) {
+    if (!rgb) {
+      return undefined;
+    }
+    const r = this.limitToByte(rgb.r) / 255;
+    const g = this.limitToByte(rgb.g) / 255;
+    const b = this.limitToByte(rgb.b) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = max;
+    let s = max;
+    const v = max;
+    const d = max - min;
+    s = max === 0 ? 0 : d / max;
+    if (max === min) {
+      h = 0; // achromatic
+    } else {
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+        default:
+        // no other option
+      }
+
+      h /= 6;
+    }
+    return {
+      h,
+      s,
+      v
+    };
+  }
+
+  // based on: https://gist.github.com/mjackson/5311256
+  static hsvToRgb(_hsv) {
+    const hsv = _hsv;
+    hsv.h = this.limitToOne(_hsv.h);
+    hsv.s = this.limitToOne(_hsv.s);
+    hsv.v = this.limitToOne(_hsv.v);
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    const i = Math.floor(hsv.h * 6);
+    const f = hsv.h * 6 - i;
+    const p = hsv.v * (1 - hsv.s);
+    const q = hsv.v * (1 - f * hsv.s);
+    const t = hsv.v * (1 - (1 - f) * hsv.s);
+    switch (i % 6) {
+      case 0:
+        r = hsv.v;
+        g = t;
+        b = p;
+        break;
+      case 1:
+        r = q;
+        g = hsv.v;
+        b = p;
+        break;
+      case 2:
+        r = p;
+        g = hsv.v;
+        b = t;
+        break;
+      case 3:
+        r = p;
+        g = q;
+        b = hsv.v;
+        break;
+      case 4:
+        r = t;
+        g = p;
+        b = hsv.v;
+        break;
+      case 5:
+        r = hsv.v;
+        g = p;
+        b = q;
+        break;
+      default:
+      // no other option
+    }
+
+    return {
+      r: this.limitToByte(r * 255),
+      g: this.limitToByte(g * 255),
+      b: this.limitToByte(b * 255)
+    };
+  }
+  static limitToByte(num) {
+    if (num <= 0) {
+      return 0;
+    }
+    if (num >= 255) {
+      return 255;
+    }
+    return num;
+  }
+  static limitToOne(num) {
+    if (num <= 0) {
+      return 0;
+    }
+    if (num >= 1) {
+      return 1;
+    }
+    return num;
+  }
+  static numberToHex(rgb) {
+    let hex = Math.round(rgb).toString(16);
+    if (hex.length < 2) {
+      hex = `0${hex}`;
+    }
+    return hex.toUpperCase();
+  }
+  static rgbToHex(_rgb) {
+    const rgb = _rgb;
+    rgb.r = this.limitToByte(rgb.r);
+    rgb.g = this.limitToByte(rgb.g);
+    rgb.b = this.limitToByte(rgb.b);
+    const red = this.numberToHex(rgb.r);
+    const green = this.numberToHex(rgb.g);
+    const blue = this.numberToHex(rgb.b);
+    return `#${red}${green}${blue}`;
+  }
+  static hexToRgb(hexString) {
+    const numbersOnly = hexString.substring(1);
+    const aRgbHex = numbersOnly.match(/.{1,2}/g);
+    return aRgbHex ? {
+      r: parseInt(aRgbHex[0], 16),
+      g: parseInt(aRgbHex[1], 16),
+      b: parseInt(aRgbHex[2], 16)
+    } : undefined;
+  }
+}
+exports.default = ColorHelper;