@festo-ui/react-extra 9.0.0-dev.697 → 9.0.0-dev.701

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react-extra",
-  "version": "9.0.0-dev.697",
+  "version": "9.0.0-dev.701",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -43,6 +43,7 @@
     "@rsbuild/plugin-sass": "^1.4.0",
     "@rslib/core": "^0.17.1",
     "@rstest/core": "^0.6.5",
+    "@rstest/coverage-istanbul": "^0.0.5",
     "@storybook/addon-docs": "^9.1.16",
     "@storybook/react": "^9.1.16",
     "@testing-library/jest-dom": "^6.9.1",
@@ -57,8 +58,8 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@festo-ui/web-essentials": "*",
     "@festo-ui/react": "*",
+    "@festo-ui/web-essentials": "*",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   }

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

@@ -1,60 +0,0 @@
-.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/forms/color-indicator/ColorIndicator.d.ts

@@ -1,11 +0,0 @@
-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/forms/color-indicator/ColorIndicator.js

@@ -1,125 +0,0 @@
-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/forms/color-picker/ColorHelper.d.ts

@@ -1,5 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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 };