@eccenca/gui-elements 25.0.0-featurecolorwheelinputcmem7327.0 → 25.0.0-featurecolorwheelinputcmem7327.1

package/dist/cjs/components/ColorField/ColorField.js

@@ -0,0 +1,114 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorField = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const common_1 = require("../../common");
+const constants_1 = require("../../configuration/constants");
+const ContextOverlay_1 = require("../ContextOverlay");
+const Form_1 = require("../Form");
+const RadioButton_1 = require("../RadioButton/RadioButton");
+const Spacing_1 = require("../Separation/Spacing");
+const Tag_1 = require("../Tag");
+const TextField_1 = require("../TextField");
+const Tooltip_1 = require("../Tooltip/Tooltip");
+const Typography_1 = require("../Typography");
+/**
+ * Color input field that provides resets from the configured color palette.
+ * Use `colorWeightFilter` and `paletteGroupFilter` to filter them.
+ */
+const ColorField = (_a) => {
+    var { className = "", allowCustomColor = false, colorWeightFilter = [100, 300, 700, 900], paletteGroupFilter = ["layout"], defaultValue, value, onChange, fullWidth = false } = _a, otherTextFieldProps = __rest(_a, ["className", "allowCustomColor", "colorWeightFilter", "paletteGroupFilter", "defaultValue", "value", "onChange", "fullWidth"]);
+    const ref = react_1.default.useRef(null);
+    const [colorValue, setColorValue] = react_1.default.useState(defaultValue || value || "#000000");
+    let allowedPaletteColors, disableNativePicker, disabled;
+    const updateConfig = () => {
+        allowedPaletteColors = common_1.utils.getEnabledColorPropertiesFromPalette({
+            includePaletteGroup: paletteGroupFilter,
+            includeColorWeight: colorWeightFilter,
+            minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
+        });
+        disableNativePicker =
+            colorWeightFilter.length > 0 && paletteGroupFilter.length > 0 && allowedPaletteColors.length > 0;
+        disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
+    };
+    updateConfig();
+    react_1.default.useEffect(() => {
+        updateConfig();
+    }, [allowCustomColor, colorWeightFilter, paletteGroupFilter, otherTextFieldProps]);
+    react_1.default.useEffect(() => {
+        setColorValue(defaultValue || value || "#000000");
+    }, [defaultValue, value]);
+    const forwardOnChange = (forwardedEvent) => {
+        setColorValue(forwardedEvent.target.value);
+        if (onChange) {
+            onChange(forwardedEvent);
+        }
+    };
+    const colorInput = (react_1.default.createElement(TextField_1.TextField, Object.assign({ inputRef: ref, className: (0, classnames_1.default)(`${constants_1.CLASSPREFIX}-colorfield`, className, {
+            [`${constants_1.CLASSPREFIX}-colorfield--custom-picker`]: disableNativePicker,
+        }), 
+        // we cannot use `color` type for the custom picker because we do not have control over it then
+        type: !disableNativePicker ? "color" : "text", readOnly: disableNativePicker, disabled: disabled, value: colorValue, fullWidth: fullWidth }, otherTextFieldProps, { onChange: !disableNativePicker
+            ? (e) => {
+                forwardOnChange(e);
+            }
+            : undefined, style: Object.assign(Object.assign({}, otherTextFieldProps.style), { [`--eccgui-colorfield-background`]: colorValue }) })));
+    return disableNativePicker && !disabled ? (react_1.default.createElement(ContextOverlay_1.ContextOverlay, { fill: fullWidth, content: react_1.default.createElement(Typography_1.WhiteSpaceContainer, { paddingTop: "small", paddingRight: "small", paddingBottom: "small", paddingLeft: "small", className: `${constants_1.CLASSPREFIX}-colorfield__picker` },
+            allowCustomColor && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(TextField_1.TextField, { type: "color", value: colorValue, onChange: (e) => {
+                        forwardOnChange(e);
+                    } }),
+                react_1.default.createElement(Spacing_1.Spacing, { size: "small" }))),
+            react_1.default.createElement(Form_1.FieldSet, null,
+                react_1.default.createElement(Tag_1.TagList, { className: `${constants_1.CLASSPREFIX}-colorfield__palette ${constants_1.CLASSPREFIX}-colorfield__palette--${colorWeightFilter.length >= 3 ? colorWeightFilter.length * 2 : "8"}col` }, allowedPaletteColors.map((color, idx) => [
+                    react_1.default.createElement(RadioButton_1.RadioButton, { className: `${constants_1.CLASSPREFIX}-colorfield__palette__color`, hideIndicator: true, value: color[1], onChange: (e) => {
+                            forwardOnChange(e);
+                        } },
+                        react_1.default.createElement(Tooltip_1.Tooltip, { key: idx, content: color[0].replace(`${constants_1.CLASSPREFIX}-color-palette-`, "") },
+                            react_1.default.createElement(Tag_1.Tag, { large: true, style: { [`--eccgui-colorfield-palette-color`]: color[1] } }, color[1]))),
+                    // Looks like we cannot force some type of line break in the tag list via CSS only
+                    (idx + 1) % (colorWeightFilter.length >= 3 ? colorWeightFilter.length * 2 : 8) ===
+                        0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("br", { className: `${constants_1.CLASSPREFIX}-colorfield__palette-linebreak` }))),
+                ])))) }, colorInput)) : (colorInput);
+};
+exports.ColorField = ColorField;
+/**
+ * Simple helper function that provide simple access to color hash calculation.
+ * Using the same default values for the color palette filter.
+ */
+exports.ColorField.calculateColorHashValue = (text, options = {
+    allowCustomColor: false,
+    colorWeightFilter: [100, 300, 700, 900],
+    paletteGroupFilter: ["layout"],
+}) => {
+    const hash = common_1.utils.textToColorHash({
+        text,
+        options: {
+            returnValidColorsDirectly: options.allowCustomColor,
+            enabledColors: common_1.utils.getEnabledColorsFromPalette({
+                includePaletteGroup: options.paletteGroupFilter,
+                includeColorWeight: options.colorWeightFilter,
+                minimalColorDistance: 0,
+            }),
+        },
+    });
+    return hash ? hash : undefined;
+};
+exports.default = exports.ColorField;
+//# sourceMappingURL=ColorField.js.map

package/dist/cjs/components/ColorField/ColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.js","sourceRoot":"","sources":["../../../../src/components/ColorField/ColorField.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./Card"), exports);
 __exportStar(require("./Chat"), exports);
 __exportStar(require("./Checkbox/Checkbox"), exports);
 __exportStar(require("./CodeAutocompleteField"), exports);
+__exportStar(require("./ColorField/ColorField"), exports);
 __exportStar(require("./ContentGroup/ContentGroup"), exports);
 __exportStar(require("./ContextOverlay"), exports);
 __exportStar(require("./DecoupledOverlay/DecoupledOverlay"), exports);

package/dist/cjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,+CAA6B;AAC7B,kDAAgC;AAChC,yCAAuB;AACvB,yCAAuB;AACvB,sDAAoC;AACpC,0DAAwC;AACxC,8DAA4C;AAC5C,mDAAiC;AACjC,sEAAoD;AACpD,wDAAsC;AACtC,2CAAyB;AACzB,mDAAiC;AACjC,yCAAuB;AACvB,yCAAuB;AACvB,8DAA4C;AAC5C,yCAAuB;AACvB,2CAAyB;AACzB,oEAAkD;AAClD,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,yCAAuB;AACvB,sDAAoC;AACpC,iDAA+B;AAC/B,iDAA+B;AAC/B,0DAAwC;AACxC,gDAA8B;AAC9B,sDAAoC;AACpC,4DAA0C;AAC1C,kDAAgC;AAChC,uDAAqC;AACrC,uDAAqC;AACrC,sDAAoC;AACpC,oDAAkC;AAClC,2CAAyB;AACzB,8CAA4B;AAC5B,iDAA+B;AAC/B,kDAAgC;AAChC,0CAAwB;AACxB,yCAAuB;AACvB,wCAAsB;AACtB,8CAA4B;AAC5B,4DAA0C;AAC1C,4CAA0B;AAC1B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,0DAAwC;AACxC,8CAA4B;AAE5B,+CAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,+CAA6B;AAC7B,kDAAgC;AAChC,yCAAuB;AACvB,yCAAuB;AACvB,sDAAoC;AACpC,0DAAwC;AACxC,0DAAwC;AACxC,8DAA4C;AAC5C,mDAAiC;AACjC,sEAAoD;AACpD,wDAAsC;AACtC,2CAAyB;AACzB,mDAAiC;AACjC,yCAAuB;AACvB,yCAAuB;AACvB,8DAA4C;AAC5C,yCAAuB;AACvB,2CAAyB;AACzB,oEAAkD;AAClD,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,yCAAuB;AACvB,sDAAoC;AACpC,iDAA+B;AAC/B,iDAA+B;AAC/B,0DAAwC;AACxC,gDAA8B;AAC9B,sDAAoC;AACpC,4DAA0C;AAC1C,kDAAgC;AAChC,uDAAqC;AACrC,uDAAqC;AACrC,sDAAoC;AACpC,oDAAkC;AAClC,2CAAyB;AACzB,8CAA4B;AAC5B,iDAA+B;AAC/B,kDAAgC;AAChC,0CAAwB;AACxB,yCAAuB;AACvB,wCAAsB;AACtB,8CAA4B;AAC5B,4DAA0C;AAC1C,4CAA0B;AAC1B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,0DAAwC;AACxC,8CAA4B;AAE5B,+CAA6B"}

package/dist/esm/components/ColorField/ColorField.js

@@ -0,0 +1,139 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+import classNames from "classnames";
+import { utils } from "../../common/index.js";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
+import { ContextOverlay } from "../ContextOverlay/index.js";
+import { FieldSet } from "../Form/index.js";
+import { RadioButton } from "../RadioButton/RadioButton.js";
+import { Spacing } from "../Separation/Spacing.js";
+import { Tag, TagList } from "../Tag/index.js";
+import { TextField } from "../TextField/index.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { WhiteSpaceContainer } from "../Typography/index.js";
+/**
+ * Color input field that provides resets from the configured color palette.
+ * Use `colorWeightFilter` and `paletteGroupFilter` to filter them.
+ */
+export var ColorField = function (_a) {
+    var _b, _c;
+    var _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.allowCustomColor, allowCustomColor = _e === void 0 ? false : _e, _f = _a.colorWeightFilter, colorWeightFilter = _f === void 0 ? [100, 300, 700, 900] : _f, _g = _a.paletteGroupFilter, paletteGroupFilter = _g === void 0 ? ["layout"] : _g, defaultValue = _a.defaultValue, value = _a.value, onChange = _a.onChange, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, otherTextFieldProps = __rest(_a, ["className", "allowCustomColor", "colorWeightFilter", "paletteGroupFilter", "defaultValue", "value", "onChange", "fullWidth"]);
+    var ref = React.useRef(null);
+    var _j = __read(React.useState(defaultValue || value || "#000000"), 2), colorValue = _j[0], setColorValue = _j[1];
+    var allowedPaletteColors, disableNativePicker, disabled;
+    var updateConfig = function () {
+        allowedPaletteColors = utils.getEnabledColorPropertiesFromPalette({
+            includePaletteGroup: paletteGroupFilter,
+            includeColorWeight: colorWeightFilter,
+            minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
+        });
+        disableNativePicker =
+            colorWeightFilter.length > 0 && paletteGroupFilter.length > 0 && allowedPaletteColors.length > 0;
+        disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
+    };
+    updateConfig();
+    React.useEffect(function () {
+        updateConfig();
+    }, [allowCustomColor, colorWeightFilter, paletteGroupFilter, otherTextFieldProps]);
+    React.useEffect(function () {
+        setColorValue(defaultValue || value || "#000000");
+    }, [defaultValue, value]);
+    var forwardOnChange = function (forwardedEvent) {
+        setColorValue(forwardedEvent.target.value);
+        if (onChange) {
+            onChange(forwardedEvent);
+        }
+    };
+    var colorInput = (React.createElement(TextField, __assign({ inputRef: ref, className: classNames("".concat(eccgui, "-colorfield"), className, (_b = {},
+            _b["".concat(eccgui, "-colorfield--custom-picker")] = disableNativePicker,
+            _b)), 
+        // we cannot use `color` type for the custom picker because we do not have control over it then
+        type: !disableNativePicker ? "color" : "text", readOnly: disableNativePicker, disabled: disabled, value: colorValue, fullWidth: fullWidth }, otherTextFieldProps, { onChange: !disableNativePicker
+            ? function (e) {
+                forwardOnChange(e);
+            }
+            : undefined, style: __assign(__assign({}, otherTextFieldProps.style), (_c = {}, _c["--eccgui-colorfield-background"] = colorValue, _c)) })));
+    return disableNativePicker && !disabled ? (React.createElement(ContextOverlay, { fill: fullWidth, content: React.createElement(WhiteSpaceContainer, { paddingTop: "small", paddingRight: "small", paddingBottom: "small", paddingLeft: "small", className: "".concat(eccgui, "-colorfield__picker") },
+            allowCustomColor && (React.createElement(React.Fragment, null,
+                React.createElement(TextField, { type: "color", value: colorValue, onChange: function (e) {
+                        forwardOnChange(e);
+                    } }),
+                React.createElement(Spacing, { size: "small" }))),
+            React.createElement(FieldSet, null,
+                React.createElement(TagList, { className: "".concat(eccgui, "-colorfield__palette ").concat(eccgui, "-colorfield__palette--").concat(colorWeightFilter.length >= 3 ? colorWeightFilter.length * 2 : "8", "col") }, allowedPaletteColors.map(function (color, idx) {
+                    var _a;
+                    return [
+                        React.createElement(RadioButton, { className: "".concat(eccgui, "-colorfield__palette__color"), hideIndicator: true, value: color[1], onChange: function (e) {
+                                forwardOnChange(e);
+                            } },
+                            React.createElement(Tooltip, { key: idx, content: color[0].replace("".concat(eccgui, "-color-palette-"), "") },
+                                React.createElement(Tag, { large: true, style: (_a = {}, _a["--eccgui-colorfield-palette-color"] = color[1], _a) }, color[1]))),
+                        // Looks like we cannot force some type of line break in the tag list via CSS only
+                        (idx + 1) % (colorWeightFilter.length >= 3 ? colorWeightFilter.length * 2 : 8) ===
+                            0 && (React.createElement(React.Fragment, null,
+                            React.createElement("br", { className: "".concat(eccgui, "-colorfield__palette-linebreak") }))),
+                    ];
+                })))) }, colorInput)) : (colorInput);
+};
+/**
+ * Simple helper function that provide simple access to color hash calculation.
+ * Using the same default values for the color palette filter.
+ */
+ColorField.calculateColorHashValue = function (text, options) {
+    if (options === void 0) { options = {
+        allowCustomColor: false,
+        colorWeightFilter: [100, 300, 700, 900],
+        paletteGroupFilter: ["layout"],
+    }; }
+    var hash = utils.textToColorHash({
+        text: text,
+        options: {
+            returnValidColorsDirectly: options.allowCustomColor,
+            enabledColors: utils.getEnabledColorsFromPalette({
+                includePaletteGroup: options.paletteGroupFilter,
+                includeColorWeight: options.colorWeightFilter,
+                minimalColorDistance: 0,
+            }),
+        },
+    });
+    return hash ? hash : undefined;
+};
+export default ColorField;
+//# sourceMappingURL=ColorField.js.map

package/dist/esm/components/ColorField/ColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.js","sourceRoot":"","sources":["../../../../src/components/ColorField/ColorField.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/index.js

@@ -7,6 +7,7 @@ export * from "./Card/index.js";
 export * from "./Chat/index.js";
 export * from "./Checkbox/Checkbox.js";
 export * from "./CodeAutocompleteField/index.js";
+export * from "./ColorField/ColorField.js";
 export * from "./ContentGroup/ContentGroup.js";
 export * from "./ContextOverlay/index.js";
 export * from "./DecoupledOverlay/DecoupledOverlay.js";

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,qCAAqC,CAAC;AACpD,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,qCAAqC,CAAC;AACpD,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC"}

package/dist/types/components/ColorField/ColorField.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { ColorWeight, PaletteGroup } from "../../common/utils/colorHash";
+import { TextFieldProps } from "../TextField";
+export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
+    /**
+     * Any color can be selected, not only from the configured color palette.
+     */
+    allowCustomColor?: boolean;
+    /**
+     * What color weights should be included in the set of allowed colors.
+     */
+    colorWeightFilter?: ColorWeight[];
+    /**
+     * What palette groups should be included in the set of allowed colors.
+     */
+    paletteGroupFilter?: PaletteGroup[];
+}
+/**
+ * Color input field that provides resets from the configured color palette.
+ * Use `colorWeightFilter` and `paletteGroupFilter` to filter them.
+ */
+export declare const ColorField: {
+    ({ className, allowCustomColor, colorWeightFilter, paletteGroupFilter, defaultValue, value, onChange, fullWidth, ...otherTextFieldProps }: ColorFieldProps): React.JSX.Element;
+    /**
+     * Simple helper function that provide simple access to color hash calculation.
+     * Using the same default values for the color palette filter.
+     */
+    calculateColorHashValue(text: string, options?: calculateColorHashValueProps): string | undefined;
+};
+type calculateColorHashValueProps = Pick<ColorFieldProps, "allowCustomColor" | "colorWeightFilter" | "paletteGroupFilter">;
+export default ColorField;

package/dist/types/components/index.d.ts

@@ -7,6 +7,7 @@ export * from "./Card";
 export * from "./Chat";
 export * from "./Checkbox/Checkbox";
 export * from "./CodeAutocompleteField";
+export * from "./ColorField/ColorField";
 export * from "./ContentGroup/ContentGroup";
 export * from "./ContextOverlay";
 export * from "./DecoupledOverlay/DecoupledOverlay";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "25.0.0-featurecolorwheelinputcmem7327.0",
+    "version": "25.0.0-featurecolorwheelinputcmem7327.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from "./Card";
 export * from "./Chat";
 export * from "./Checkbox/Checkbox";
 export * from "./CodeAutocompleteField";
+export * from "./ColorField/ColorField";
 export * from "./ContentGroup/ContentGroup";
 export * from "./ContextOverlay";
 export * from "./DecoupledOverlay/DecoupledOverlay";