@festo-ui/react-extra 9.0.0-dev.726 → 9.0.0-dev.727

package/dist/components/color-indicator/ColorIndicator.css

@@ -0,0 +1,60 @@
+.fwe-color-indicator .fwe-popover-container {
+  position: relative;
+}
+
+.fwe-color-indicator .fwe-popover-container .fwe-popover {
+  background-color: var(--fwe-white);
+  font-size: var(--fwe-font-size-md);
+  border-radius: 4px;
+  padding: 8px 16px 16px;
+  line-height: 1rem;
+  box-shadow: 0 1px 4px #3333;
+}
+
+.fwe-color-indicator .fwe-backdrop {
+  background: none;
+}
+
+.fwe-color-indicator .fwe-color-label {
+  height: 18px;
+  font-size: var(--fwe-font-size-small);
+  font-weight: var(--fwe-font-weight-bold);
+  margin-bottom: 4px;
+}
+
+.fwe-color-indicator .fwe-color-container {
+  display: flex;
+}
+
+.fwe-color-indicator .fwe-color-container .fwe-color-box {
+  border: 1px solid var(--fwe-control-border);
+  background: var(--fwe-white);
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
+}
+
+.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern {
+  margin: 2px;
+}
+
+.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text {
+  margin-left: 8px;
+}
+
+.fwe-color-indicator.disabled {
+  pointer-events: none;
+}
+
+.fwe-color-indicator.disabled .fwe-color-label {
+  color: var(--fwe-text-disabled);
+}
+
+.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box {
+  opacity: .5;
+}
+
+.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text {
+  color: var(--fwe-text-disabled);
+}
+

package/dist/components/color-indicator/ColorIndicator.d.ts

@@ -0,0 +1,11 @@
+import { type JSX, type PropsWithChildren } from 'react';
+import './ColorIndicator.scss';
+export interface ColorIndicatorProps {
+    className?: string;
+    text: string;
+    label: string;
+    color?: string;
+    showPopOver?: boolean;
+    disabled?: boolean;
+}
+export declare function ColorIndicator({ text, label, color, className, showPopOver, children, disabled, }: PropsWithChildren<ColorIndicatorProps>): JSX.Element;

package/dist/components/color-indicator/ColorIndicator.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@festo-ui/react";
+import classnames from "classnames";
+import { useState } from "react";
+import "./ColorIndicator.css";
+function ColorIndicator({ text, label, color, className, showPopOver = false, children, disabled }) {
+    const classes = classnames('fwe-color-indicator', className, disabled);
+    const [isEditorOpen, setEditorOpen] = useState(false);
+    function getBorderColor() {
+        if (!color || '#FFFFFF' === color.toUpperCase() || '#F0F2F3' === color.toUpperCase()) return '#b6bec6';
+        return color;
+    }
+    const colorBox = /*#__PURE__*/ jsx("div", {
+        className: "fwe-color-box",
+        style: {
+            background: color,
+            borderColor: getBorderColor()
+        },
+        children: !color && /*#__PURE__*/ jsxs("svg", {
+            className: "fwe-no-color-pattern",
+            version: "1.1",
+            role: "img",
+            "aria-label": "No color selected",
+            xmlns: "http://www.w3.org/2000/svg",
+            xmlnsXlink: "http://www.w3.org/1999/xlink",
+            id: "canvas1",
+            width: "18",
+            height: "18",
+            children: [
+                /*#__PURE__*/ jsx("defs", {
+                    children: /*#__PURE__*/ jsxs("pattern", {
+                        id: "bwsquare2px",
+                        width: "4",
+                        height: "4",
+                        patternUnits: "userSpaceOnUse",
+                        children: [
+                            /*#__PURE__*/ jsx("rect", {
+                                x: "0",
+                                y: "0",
+                                width: "2",
+                                height: "2",
+                                stroke: "none",
+                                fill: "#ffffff"
+                            }),
+                            /*#__PURE__*/ jsx("rect", {
+                                x: "2",
+                                y: "0",
+                                width: "2",
+                                height: "2",
+                                stroke: "none",
+                                fill: "#e2e5e8"
+                            }),
+                            /*#__PURE__*/ jsx("rect", {
+                                x: "0",
+                                y: "2",
+                                width: "2",
+                                height: "2",
+                                stroke: "none",
+                                fill: "#e2e5e8"
+                            }),
+                            /*#__PURE__*/ jsx("rect", {
+                                x: "2",
+                                y: "2",
+                                width: "2",
+                                height: "2",
+                                stroke: "none",
+                                fill: "#ffffff"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ 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__*/ jsxs("div", {
+            className: classes,
+            ...wrapperProperties,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        opacity: isEditorOpen ? 0 : 1
+                    },
+                    className: "fwe-color-label",
+                    children: label
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "fwe-color-container",
+                    children: [
+                        wrapperChildren,
+                        ' ',
+                        text && /*#__PURE__*/ jsx("div", {
+                            className: "fwe-color-indicator-text",
+                            children: text
+                        }),
+                        ' '
+                    ]
+                })
+            ]
+        });
+    return showPopOver ? /*#__PURE__*/ jsx(Popover, {
+        containerClassName: "fwe-popover-container--color-indicator",
+        position: "top",
+        flip: false,
+        wrapper: wrapper,
+        popoverContent: children,
+        open: isEditorOpen,
+        onStatusChange: setEditorOpen,
+        stopPropagation: true,
+        children: colorBox
+    }) : wrapper(colorBox);
+}
+export { ColorIndicator };

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,4 @@
+export interface ScrollAreaProps extends React.ComponentPropsWithoutRef<'div'> {
+    readonly scrollbarMinSize?: number;
+}
+export declare function ScrollArea({ children, scrollbarMinSize, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import simplebar_react from "simplebar-react";
+function ScrollArea({ children, scrollbarMinSize = 25, ...props }) {
+    return /*#__PURE__*/ jsx(simplebar_react, {
+        ...props,
+        scrollbarMinSize: scrollbarMinSize,
+        children: children
+    });
+}
+export { ScrollArea };

package/dist/components/scroll-area/ScrollArea.stories.css

@@ -0,0 +1,9 @@
+.scroll-area-styles {
+  width: 400px;
+  max-width: 400px;
+  height: 300px;
+  padding-right: 8px;
+  display: block;
+  overflow: hidden auto;
+}
+

package/dist/forms/color-picker/ColorHelper.d.ts

@@ -0,0 +1,5 @@
+export declare function rgbToHsv(rgb: Record<'r' | 'g' | 'b', number>): Record<'h' | 's' | 'v', number> | undefined;
+export declare function hsvToRgb(_hsv: Record<'h' | 's' | 'v', number>): Record<'r' | 'g' | 'b', number>;
+export declare function numberToHex(rgb: number): string;
+export declare function rgbToHex(_rgb: Record<'r' | 'g' | 'b', number>): string;
+export declare function hexToRgb(hexString: string): Record<'r' | 'g' | 'b', number> | undefined;

package/dist/forms/color-picker/ColorHelper.js

@@ -0,0 +1,121 @@
+function rgbToHsv(rgb) {
+    if (!rgb) return;
+    const r = limitToByte(rgb.r) / 255;
+    const g = limitToByte(rgb.g) / 255;
+    const b = 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 = 0 === max ? 0 : d / max;
+    if (max === min) h = 0;
+    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:
+        }
+        h /= 6;
+    }
+    return {
+        h,
+        s,
+        v
+    };
+}
+function hsvToRgb(_hsv) {
+    const hsv = _hsv;
+    hsv.h = limitToOne(_hsv.h);
+    hsv.s = limitToOne(_hsv.s);
+    hsv.v = limitToOne(_hsv.v);
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    const i = Math.floor(6 * hsv.h);
+    const f = 6 * hsv.h - 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:
+    }
+    return {
+        r: limitToByte(255 * r),
+        g: limitToByte(255 * g),
+        b: limitToByte(255 * b)
+    };
+}
+function limitToByte(num) {
+    if (num <= 0) return 0;
+    if (num >= 255) return 255;
+    return num;
+}
+function limitToOne(num) {
+    if (num <= 0) return 0;
+    if (num >= 1) return 1;
+    return num;
+}
+function numberToHex(rgb) {
+    let hex = Math.round(rgb).toString(16);
+    if (hex.length < 2) hex = `0${hex}`;
+    return hex.toUpperCase();
+}
+function rgbToHex(_rgb) {
+    const rgb = _rgb;
+    rgb.r = limitToByte(rgb.r);
+    rgb.g = limitToByte(rgb.g);
+    rgb.b = limitToByte(rgb.b);
+    const red = numberToHex(rgb.r);
+    const green = numberToHex(rgb.g);
+    const blue = numberToHex(rgb.b);
+    return `#${red}${green}${blue}`;
+}
+function 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)
+    } : void 0;
+}
+export { hexToRgb, hsvToRgb, numberToHex, rgbToHex, rgbToHsv };