@festo-ui/react-extra 9.0.0-dev.693 → 9.0.0-dev.696

package/dist/forms/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/forms/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/forms/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/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 };

package/dist/forms/color-picker/ColorPicker.css

@@ -0,0 +1,377 @@
+.fwe-triangle.fwe-triangle-right, .fwe-triangle.fwe-triangle-left, .fwe-triangle.fwe-triangle-bottom, .fwe-triangle.fwe-triangle-top {
+  width: 17px;
+  height: 17px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.fwe-triangle.fwe-triangle-right:after, .fwe-triangle.fwe-triangle-left:after, .fwe-triangle.fwe-triangle-bottom:after, .fwe-triangle.fwe-triangle-top:after {
+  content: "";
+  background: var(--fwe-white);
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  transform: rotate(45deg);
+  box-shadow: 0 1px 4px #3333;
+}
+
+.fwe-popover.fwe-popover-menu, .fwe-popover {
+  background-color: var(--fwe-white);
+  border-radius: 4px;
+  box-shadow: 0 1px 4px #3333;
+}
+
+.fwe-popover {
+  font-size: var(--fwe-font-size-md);
+  padding: 8px;
+  line-height: 1rem;
+}
+
+.fwe-popover-container {
+  min-width: max-content;
+  display: inline-block;
+  position: relative;
+}
+
+.fwe-triangle.fwe-triangle-top {
+  top: -17px;
+  left: 50%;
+  transform: translateX(-8px);
+}
+
+.fwe-triangle.fwe-triangle-top:after {
+  top: 11px;
+  left: 3px;
+}
+
+.fwe-triangle.fwe-triangle-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-8px);
+}
+
+.fwe-triangle.fwe-triangle-bottom:after {
+  top: -6px;
+  left: 3px;
+}
+
+.fwe-triangle.fwe-triangle-left {
+  top: 50%;
+  left: -17px;
+  transform: translateY(-8px);
+}
+
+.fwe-triangle.fwe-triangle-left:after {
+  top: 2px;
+  left: 11px;
+}
+
+.fwe-triangle.fwe-triangle-right {
+  top: 50%;
+  left: 100%;
+  transform: translateY(-8px);
+}
+
+.fwe-triangle.fwe-triangle-right:after {
+  top: 2px;
+  left: -6px;
+}
+
+.fwe-popover.fwe-popover-menu {
+  font-size: var(--fwe-font-size-base);
+  padding: 16px;
+  line-height: 1.5rem;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item {
+  border-bottom: none;
+  min-height: 36px;
+  padding: 0;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button {
+  width: 100%;
+  margin-left: inherit;
+  text-align: left;
+  justify-content: unset;
+  height: 32px;
+  max-height: 32px;
+  padding: 0 8px 0 0;
+  display: inline-flex;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover {
+  color: var(--fwe-black);
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i {
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 24px;
+  margin-right: 0;
+  display: inline-flex;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before {
+  display: inline-flex;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button .fwe-svg-icon {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span {
+  height: 24px;
+  display: inline-flex;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"] {
+  margin-left: inherit;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover {
+  color: var(--fwe-black);
+  background-color: #3333331a;
+}
+
+.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active {
+  background-color: #3333;
+}
+
+.fwe-popover .fwe-popover-legend {
+  margin: 16px;
+  line-height: 24px;
+  display: table;
+}
+
+.fwe-popover .fwe-popover-legend .fwe-popover-legend-content {
+  display: table-row;
+}
+
+.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt {
+  margin: 0;
+  padding-right: 8px;
+  display: table-cell;
+}
+
+.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd {
+  margin: 0;
+  display: table-cell;
+}
+
+.fwe-color-picker {
+  width: 216px;
+}
+
+.fwe-color-picker.fwe-alpha-active {
+  width: 245px;
+}
+
+.fwe-color-picker .fwe-gradient-picker {
+  width: 198px;
+  height: 198px;
+  margin: -7px;
+  position: relative;
+}
+
+.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient {
+  background-image: linear-gradient(#0000, #000);
+  position: absolute;
+  inset: 7px;
+}
+
+.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient {
+  position: absolute;
+  inset: 7px;
+}
+
+.fwe-color-picker .fwe-vertical-picker, .fwe-color-picker .fwe-alpha-picker, .fwe-color-picker .fwe-hue-picker {
+  width: 14px;
+  height: 198px;
+  margin: -7px -3px -7px 18px;
+  position: relative;
+}
+
+.fwe-color-picker .fwe-vertical-picker .fwe-picker-background, .fwe-color-picker .fwe-alpha-picker .fwe-picker-background, .fwe-color-picker .fwe-hue-picker .fwe-picker-background {
+  border-radius: 4px;
+  width: 8px;
+  height: 184px;
+  margin: 7px 3px;
+}
+
+.fwe-color-picker .fwe-vertical-picker .fwe-knob, .fwe-color-picker .fwe-alpha-picker .fwe-knob, .fwe-color-picker .fwe-hue-picker .fwe-knob {
+  left: -3px;
+}
+
+.fwe-color-picker .fwe-hue-picker .fwe-picker-background {
+  background-image: linear-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red);
+}
+
+.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern {
+  margin: 7px 3px;
+  position: absolute;
+}
+
+.fwe-color-picker .fwe-alpha-picker .fwe-picker-background {
+  position: absolute;
+}
+
+.fwe-color-picker .fwe-type-select {
+  display: flex;
+  position: relative;
+}
+
+.fwe-color-picker .fwe-type-select .fwe-type-indicator {
+  cursor: pointer;
+  background-color: #fff;
+  border: none;
+  flex-shrink: 1;
+  display: flex;
+}
+
+.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover {
+  color: var(--fwe-hero);
+}
+
+.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type {
+  font-size: var(--fwe-font-size-small);
+  line-height: calc(var(--fwe-font-size-small)  + 5px);
+  font-weight: var(--fwe-font-weight-bold);
+}
+
+.fwe-color-picker .fwe-type-select .fwe-popover {
+  z-index: 1;
+  position: absolute;
+  top: 24px;
+  left: 0;
+}
+
+.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item {
+  cursor: pointer;
+  background-color: #fff;
+  border: none;
+  align-items: center;
+  padding: 8px;
+  display: flex;
+}
+
+.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover {
+  color: var(--fwe-hero);
+}
+
+.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-svg-icon {
+  opacity: 0;
+  margin-right: 8px;
+}
+
+.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected {
+  cursor: default;
+}
+
+.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-svg-icon {
+  opacity: 1;
+}
+
+.fwe-color-picker input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.fwe-color-picker input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.fwe-color-picker input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.fwe-color-picker input {
+  text-align: center;
+  padding-right: 0 !important;
+}
+
+.fwe-color-picker .fwe-hex-input {
+  width: 75px;
+  margin-right: 16px;
+}
+
+.fwe-color-picker .fwe-red-input, .fwe-color-picker .fwe-green-input {
+  width: 32px;
+  margin-right: 8px;
+}
+
+.fwe-color-picker .fwe-blue-input {
+  width: 32px;
+}
+
+.fwe-color-picker .fwe-alpha-input span input {
+  width: 48px;
+  padding-right: 16px !important;
+}
+
+.fwe-color-picker .fwe-alpha-input .fwe-percent-char {
+  margin-left: -16px;
+}
+
+.fwe-color-picker .fwe-color-grid {
+  flex-wrap: wrap;
+  margin-bottom: -8px;
+  margin-right: -8px;
+  display: flex;
+}
+
+.fwe-color-picker .fwe-color-grid .fwe-color-item {
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  margin-bottom: 8px;
+  margin-right: 8px;
+  padding: 0;
+  display: flex;
+}
+
+.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item {
+  border: 1px solid var(--fwe-control-border);
+  color: #000;
+}
+
+.fwe-color-picker .fwe-color-grid .fwe-remove-color-button {
+  border: 1px solid var(--fwe-control-border);
+  width: 24px;
+  height: 24px;
+  color: var(--fwe-control);
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 8px;
+  margin-right: 8px;
+  display: flex;
+}
+
+.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern {
+  margin: 2px;
+}
+
+.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-svg-icon {
+  color: #0000;
+  position: absolute;
+}
+
+.fwe-color-picker .fwe-knob {
+  z-index: 1;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  box-shadow: 0 0 4px #00000026;
+}
+

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

@@ -0,0 +1,12 @@
+import './ColorPicker.scss';
+export interface ColorPickerProps {
+    readonly className?: string;
+    readonly palette?: string[];
+    readonly useAlpha?: boolean;
+    readonly alpha?: number;
+    readonly paletteOnly?: boolean;
+    readonly color?: string;
+    readonly onChange?: (color?: string | null) => void;
+    readonly onAlphaChange?: (alpha?: number) => void;
+}
+export declare function ColorPicker({ className, palette, useAlpha, alpha, paletteOnly, color, onChange, onAlphaChange, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;