@babylonjs/shared-ui-components 5.28.0 → 5.30.0

package/colorPicker/colorComponentEntry.d.ts

@@ -1,18 +1,18 @@
-import * as React from "react";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
-export interface IColorComponentEntryProps {
-    value: number;
-    label: string;
-    max?: number;
-    min?: number;
-    onChange: (value: number) => void;
-    disabled?: boolean;
-    lockObject: LockObject;
-}
-export declare class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
-    constructor(props: IColorComponentEntryProps);
-    updateValue(valueString: string): void;
-    lock(): void;
-    unlock(): void;
-    render(): JSX.Element;
-}
+import * as React from "react";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IColorComponentEntryProps {
+    value: number;
+    label: string;
+    max?: number;
+    min?: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    lockObject: LockObject;
+}
+export declare class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+    constructor(props: IColorComponentEntryProps);
+    updateValue(valueString: string): void;
+    lock(): void;
+    unlock(): void;
+    render(): JSX.Element;
+}

package/colorPicker/colorComponentEntry.js

@@ -1,37 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-export class ColorComponentEntry extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    updateValue(valueString) {
-        if (/[^0-9.-]/g.test(valueString)) {
-            return;
-        }
-        let valueAsNumber = parseInt(valueString);
-        if (isNaN(valueAsNumber)) {
-            return;
-        }
-        if (this.props.max != undefined && valueAsNumber > this.props.max) {
-            valueAsNumber = this.props.max;
-        }
-        if (this.props.min != undefined && valueAsNumber < this.props.min) {
-            valueAsNumber = this.props.min;
-        }
-        this.props.onChange(valueAsNumber);
-    }
-    lock() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = true;
-        }
-    }
-    unlock() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = false;
-        }
-    }
-    render() {
-        return (_jsxs("div", { className: "color-picker-component", children: [_jsx("div", { className: "color-picker-component-value", children: _jsx("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) }), _jsx("div", { className: "color-picker-component-label", children: this.props.label })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class ColorComponentEntry extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    updateValue(valueString) {
+        if (/[^0-9.-]/g.test(valueString)) {
+            return;
+        }
+        let valueAsNumber = parseInt(valueString);
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+        if (this.props.max != undefined && valueAsNumber > this.props.max) {
+            valueAsNumber = this.props.max;
+        }
+        if (this.props.min != undefined && valueAsNumber < this.props.min) {
+            valueAsNumber = this.props.min;
+        }
+        this.props.onChange(valueAsNumber);
+    }
+    lock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = true;
+        }
+    }
+    unlock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    render() {
+        return (_jsxs("div", { className: "color-picker-component", children: [_jsx("div", { className: "color-picker-component-value", children: _jsx("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) }), _jsx("div", { className: "color-picker-component-label", children: this.props.label })] }));
+    }
+}
 //# sourceMappingURL=colorComponentEntry.js.map

package/colorPicker/colorPicker.d.ts

@@ -1,43 +1,43 @@
-import * as React from "react";
-import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
-import "./colorPicker.scss";
-/**
- * Interface used to specify creation options for color picker
- */
-export interface IColorPickerProps {
-    color: Color3 | Color4;
-    linearhint?: boolean;
-    debugMode?: boolean;
-    onColorChanged?: (color: Color3 | Color4) => void;
-    lockObject: LockObject;
-}
-/**
- * Interface used to specify creation options for color picker
- */
-export interface IColorPickerState {
-    color: Color3;
-    alpha: number;
-}
-/**
- * Class used to create a color picker
- */
-export declare class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
-    private _saturationRef;
-    private _hueRef;
-    private _isSaturationPointerDown;
-    private _isHuePointerDown;
-    constructor(props: IColorPickerProps);
-    shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
-    onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
-    onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
-    onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
-    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
-    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
-    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
-    private _evaluateSaturation;
-    private _evaluateHue;
-    componentDidUpdate(): void;
-    raiseOnColorChanged(): void;
-    render(): JSX.Element;
-}
+import * as React from "react";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import "./colorPicker.scss";
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerProps {
+    color: Color3 | Color4;
+    linearhint?: boolean;
+    debugMode?: boolean;
+    onColorChanged?: (color: Color3 | Color4) => void;
+    lockObject: LockObject;
+}
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerState {
+    color: Color3;
+    alpha: number;
+}
+/**
+ * Class used to create a color picker
+ */
+export declare class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+    private _saturationRef;
+    private _hueRef;
+    private _isSaturationPointerDown;
+    private _isHuePointerDown;
+    constructor(props: IColorPickerProps);
+    shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
+    onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    private _evaluateSaturation;
+    private _evaluateHue;
+    componentDidUpdate(): void;
+    raiseOnColorChanged(): void;
+    render(): JSX.Element;
+}

package/colorPicker/colorPicker.js

@@ -1,137 +1,137 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import { ColorComponentEntry } from "./colorComponentEntry.js";
-import { HexColor } from "./hexColor.js";
-import "./colorPicker.scss";
-/**
- * Class used to create a color picker
- */
-export class ColorPicker extends React.Component {
-    constructor(props) {
-        super(props);
-        if (this.props.color instanceof Color4) {
-            this.state = { color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };
-        }
-        else {
-            this.state = { color: this.props.color.clone(), alpha: 1 };
-        }
-        this._saturationRef = React.createRef();
-        this._hueRef = React.createRef();
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        return nextProps.color.toHexString() !== this.props.color.toHexString() || nextState.color.toHexString() !== this.props.color.toHexString();
-    }
-    onSaturationPointerDown(evt) {
-        this._evaluateSaturation(evt);
-        this._isSaturationPointerDown = true;
-        evt.currentTarget.setPointerCapture(evt.pointerId);
-    }
-    onSaturationPointerUp(evt) {
-        this._isSaturationPointerDown = false;
-        evt.currentTarget.releasePointerCapture(evt.pointerId);
-    }
-    onSaturationPointerMove(evt) {
-        if (!this._isSaturationPointerDown) {
-            return;
-        }
-        this._evaluateSaturation(evt);
-    }
-    onHuePointerDown(evt) {
-        this._evaluateHue(evt);
-        this._isHuePointerDown = true;
-        evt.currentTarget.setPointerCapture(evt.pointerId);
-    }
-    onHuePointerUp(evt) {
-        this._isHuePointerDown = false;
-        evt.currentTarget.releasePointerCapture(evt.pointerId);
-    }
-    onHuePointerMove(evt) {
-        if (!this._isHuePointerDown) {
-            return;
-        }
-        this._evaluateHue(evt);
-    }
-    _evaluateSaturation(evt) {
-        const left = evt.nativeEvent.offsetX;
-        const top = evt.nativeEvent.offsetY;
-        const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current.clientWidth));
-        const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current.clientHeight));
-        if (this.props.debugMode) {
-            console.log("Saturation: " + saturation);
-            console.log("Value: " + value);
-        }
-        const hsv = this.state.color.toHSV();
-        Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);
-        if (this.state.alpha === 0) {
-            this.setState({ alpha: 1 });
-        }
-        this.setState({ color: this.state.color });
-    }
-    _evaluateHue(evt) {
-        const left = evt.nativeEvent.offsetX;
-        const hue = 360 * Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current.clientWidth));
-        if (this.props.debugMode) {
-            console.log("Hue: " + hue);
-        }
-        const hsv = this.state.color.toHSV();
-        Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);
-        this.setState({ color: this.state.color });
-    }
-    componentDidUpdate() {
-        this.raiseOnColorChanged();
-    }
-    raiseOnColorChanged() {
-        if (!this.props.onColorChanged) {
-            return;
-        }
-        if (this.props.color instanceof Color4) {
-            const newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);
-            this.props.onColorChanged(newColor4);
-            return;
-        }
-        this.props.onColorChanged(this.state.color.clone());
-    }
-    render() {
-        const color4 = Color4.FromColor3(this.state.color);
-        color4.a = this.state.alpha;
-        const colorHex = color4.toHexString();
-        const hsv = this.state.color.toHSV();
-        const colorRef = new Color3();
-        Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
-        const colorHexRef = colorRef.toHexString();
-        const hasAlpha = this.props.color instanceof Color4;
-        return (_jsxs("div", { className: "color-picker-container" + (this.props.linearhint ? " with-hints" : ""), children: [_jsxs("div", { className: "color-picker-saturation", onPointerMove: (e) => this.onSaturationPointerMove(e), onPointerDown: (e) => this.onSaturationPointerDown(e), onPointerUp: (e) => this.onSaturationPointerUp(e), ref: this._saturationRef, style: {
-                        background: colorHexRef,
-                    }, children: [_jsx("div", { className: "color-picker-saturation-white" }), _jsx("div", { className: "color-picker-saturation-black" }), _jsx("div", { className: "color-picker-saturation-cursor", style: {
-                                top: `${-(hsv.b * 100) + 100}%`,
-                                left: `${hsv.g * 100}%`,
-                            } })] }), _jsxs("div", { className: "color-picker-hue", children: [_jsx("div", { className: "color-picker-hue-color", style: {
-                                background: colorHex,
-                            } }), _jsx("div", { className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: _jsx("div", { className: "color-picker-hue-cursor", style: {
-                                    left: `${(hsv.r / 360.0) * 100}%`,
-                                    border: `1px solid ` + colorHexRef,
-                                } }) })] }), _jsx("div", { className: "color-picker-alpha" }), _jsxs("div", { className: "color-picker-rgb", children: [_jsx("div", { className: "red", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
-                                    this.state.color.r = value / 255.0;
-                                    this.forceUpdate();
-                                } }) }), _jsx("div", { className: "green", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
-                                    this.state.color.g = value / 255.0;
-                                    this.forceUpdate();
-                                } }) }), _jsx("div", { className: "blue", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
-                                    this.state.color.b = value / 255.0;
-                                    this.forceUpdate();
-                                } }) }), _jsx("div", { className: "alpha" + (hasAlpha ? "" : " grayed"), children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
-                                    this.setState({ alpha: value / 255.0 });
-                                    this.forceUpdate();
-                                } }) })] }), _jsxs("div", { className: "color-picker-hex", children: [_jsx("div", { className: "color-picker-hex-label", children: "Hex" }), _jsx("div", { className: "color-picker-hex-value", children: _jsx(HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
-                                    if (hasAlpha) {
-                                        const color4 = Color4.FromHexString(value);
-                                        this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });
-                                    }
-                                    else {
-                                        this.setState({ color: Color3.FromHexString(value) });
-                                    }
-                                } }) })] }), this.props.linearhint && (_jsx("div", { className: "color-picker-warning", children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" }))] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import { ColorComponentEntry } from "./colorComponentEntry.js";
+import { HexColor } from "./hexColor.js";
+import "./colorPicker.scss";
+/**
+ * Class used to create a color picker
+ */
+export class ColorPicker extends React.Component {
+    constructor(props) {
+        super(props);
+        if (this.props.color instanceof Color4) {
+            this.state = { color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };
+        }
+        else {
+            this.state = { color: this.props.color.clone(), alpha: 1 };
+        }
+        this._saturationRef = React.createRef();
+        this._hueRef = React.createRef();
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextProps.color.toHexString() !== this.props.color.toHexString() || nextState.color.toHexString() !== this.props.color.toHexString();
+    }
+    onSaturationPointerDown(evt) {
+        this._evaluateSaturation(evt);
+        this._isSaturationPointerDown = true;
+        evt.currentTarget.setPointerCapture(evt.pointerId);
+    }
+    onSaturationPointerUp(evt) {
+        this._isSaturationPointerDown = false;
+        evt.currentTarget.releasePointerCapture(evt.pointerId);
+    }
+    onSaturationPointerMove(evt) {
+        if (!this._isSaturationPointerDown) {
+            return;
+        }
+        this._evaluateSaturation(evt);
+    }
+    onHuePointerDown(evt) {
+        this._evaluateHue(evt);
+        this._isHuePointerDown = true;
+        evt.currentTarget.setPointerCapture(evt.pointerId);
+    }
+    onHuePointerUp(evt) {
+        this._isHuePointerDown = false;
+        evt.currentTarget.releasePointerCapture(evt.pointerId);
+    }
+    onHuePointerMove(evt) {
+        if (!this._isHuePointerDown) {
+            return;
+        }
+        this._evaluateHue(evt);
+    }
+    _evaluateSaturation(evt) {
+        const left = evt.nativeEvent.offsetX;
+        const top = evt.nativeEvent.offsetY;
+        const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current.clientWidth));
+        const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current.clientHeight));
+        if (this.props.debugMode) {
+            console.log("Saturation: " + saturation);
+            console.log("Value: " + value);
+        }
+        const hsv = this.state.color.toHSV();
+        Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);
+        if (this.state.alpha === 0) {
+            this.setState({ alpha: 1 });
+        }
+        this.setState({ color: this.state.color });
+    }
+    _evaluateHue(evt) {
+        const left = evt.nativeEvent.offsetX;
+        const hue = 360 * Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current.clientWidth));
+        if (this.props.debugMode) {
+            console.log("Hue: " + hue);
+        }
+        const hsv = this.state.color.toHSV();
+        Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);
+        this.setState({ color: this.state.color });
+    }
+    componentDidUpdate() {
+        this.raiseOnColorChanged();
+    }
+    raiseOnColorChanged() {
+        if (!this.props.onColorChanged) {
+            return;
+        }
+        if (this.props.color instanceof Color4) {
+            const newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);
+            this.props.onColorChanged(newColor4);
+            return;
+        }
+        this.props.onColorChanged(this.state.color.clone());
+    }
+    render() {
+        const color4 = Color4.FromColor3(this.state.color);
+        color4.a = this.state.alpha;
+        const colorHex = color4.toHexString();
+        const hsv = this.state.color.toHSV();
+        const colorRef = new Color3();
+        Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
+        const colorHexRef = colorRef.toHexString();
+        const hasAlpha = this.props.color instanceof Color4;
+        return (_jsxs("div", { className: "color-picker-container" + (this.props.linearhint ? " with-hints" : ""), children: [_jsxs("div", { className: "color-picker-saturation", onPointerMove: (e) => this.onSaturationPointerMove(e), onPointerDown: (e) => this.onSaturationPointerDown(e), onPointerUp: (e) => this.onSaturationPointerUp(e), ref: this._saturationRef, style: {
+                        background: colorHexRef,
+                    }, children: [_jsx("div", { className: "color-picker-saturation-white" }), _jsx("div", { className: "color-picker-saturation-black" }), _jsx("div", { className: "color-picker-saturation-cursor", style: {
+                                top: `${-(hsv.b * 100) + 100}%`,
+                                left: `${hsv.g * 100}%`,
+                            } })] }), _jsxs("div", { className: "color-picker-hue", children: [_jsx("div", { className: "color-picker-hue-color", style: {
+                                background: colorHex,
+                            } }), _jsx("div", { className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: _jsx("div", { className: "color-picker-hue-cursor", style: {
+                                    left: `${(hsv.r / 360.0) * 100}%`,
+                                    border: `1px solid ` + colorHexRef,
+                                } }) })] }), _jsx("div", { className: "color-picker-alpha" }), _jsxs("div", { className: "color-picker-rgb", children: [_jsx("div", { className: "red", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
+                                    this.state.color.r = value / 255.0;
+                                    this.forceUpdate();
+                                } }) }), _jsx("div", { className: "green", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
+                                    this.state.color.g = value / 255.0;
+                                    this.forceUpdate();
+                                } }) }), _jsx("div", { className: "blue", children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
+                                    this.state.color.b = value / 255.0;
+                                    this.forceUpdate();
+                                } }) }), _jsx("div", { className: "alpha" + (hasAlpha ? "" : " grayed"), children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
+                                    this.setState({ alpha: value / 255.0 });
+                                    this.forceUpdate();
+                                } }) })] }), _jsxs("div", { className: "color-picker-hex", children: [_jsx("div", { className: "color-picker-hex-label", children: "Hex" }), _jsx("div", { className: "color-picker-hex-value", children: _jsx(HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
+                                    if (hasAlpha) {
+                                        const color4 = Color4.FromHexString(value);
+                                        this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });
+                                    }
+                                    else {
+                                        this.setState({ color: Color3.FromHexString(value) });
+                                    }
+                                } }) })] }), this.props.linearhint && (_jsx("div", { className: "color-picker-warning", children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" }))] }));
+    }
+}
 //# sourceMappingURL=colorPicker.js.map

package/colorPicker/hexColor.d.ts

@@ -1,20 +1,20 @@
-import * as React from "react";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
-export interface IHexColorProps {
-    value: string;
-    expectedLength: number;
-    onChange: (value: string) => void;
-    lockObject: LockObject;
-}
-export declare class HexColor extends React.Component<IHexColorProps, {
-    hex: string;
-}> {
-    constructor(props: IHexColorProps);
-    shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
-        hex: string;
-    }): boolean;
-    lock(): void;
-    unlock(): void;
-    updateHexValue(valueString: string): void;
-    render(): JSX.Element;
-}
+import * as React from "react";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IHexColorProps {
+    value: string;
+    expectedLength: number;
+    onChange: (value: string) => void;
+    lockObject: LockObject;
+}
+export declare class HexColor extends React.Component<IHexColorProps, {
+    hex: string;
+}> {
+    constructor(props: IHexColorProps);
+    shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
+        hex: string;
+    }): boolean;
+    lock(): void;
+    unlock(): void;
+    updateHexValue(valueString: string): void;
+    render(): JSX.Element;
+}

package/colorPicker/hexColor.js

@@ -1,43 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-export class HexColor extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hex: this.props.value.replace("#", "") };
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (nextProps.value !== this.props.value) {
-            nextState.hex = nextProps.value.replace("#", "");
-        }
-        return true;
-    }
-    lock() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = true;
-        }
-    }
-    unlock() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = false;
-        }
-    }
-    updateHexValue(valueString) {
-        if (valueString != "" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {
-            return;
-        }
-        this.setState({ hex: valueString });
-        if (valueString.length !== this.props.expectedLength) {
-            if (this.props.expectedLength === 8 && valueString.length === 6) {
-                valueString = valueString + "FF";
-            }
-            else {
-                return;
-            }
-        }
-        this.props.onChange("#" + valueString);
-    }
-    render() {
-        return (_jsx("input", { type: "string", className: "hex-input", value: this.state.hex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateHexValue(evt.target.value) }));
-    }
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export class HexColor extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hex: this.props.value.replace("#", "") };
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.value !== this.props.value) {
+            nextState.hex = nextProps.value.replace("#", "");
+        }
+        return true;
+    }
+    lock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = true;
+        }
+    }
+    unlock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    updateHexValue(valueString) {
+        if (valueString != "" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {
+            return;
+        }
+        this.setState({ hex: valueString });
+        if (valueString.length !== this.props.expectedLength) {
+            if (this.props.expectedLength === 8 && valueString.length === 6) {
+                valueString = valueString + "FF";
+            }
+            else {
+                return;
+            }
+        }
+        this.props.onChange("#" + valueString);
+    }
+    render() {
+        return (_jsx("input", { type: "string", className: "hex-input", value: this.state.hex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateHexValue(evt.target.value) }));
+    }
+}
 //# sourceMappingURL=hexColor.js.map

package/components/Button.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-export declare type ButtonProps = {
-    disabled?: boolean;
-    active?: boolean;
-    onClick?: () => void;
-    color: "light" | "dark";
-    size: "default" | "small" | "wide";
-    title?: string;
-};
-export declare const Button: React.FC<ButtonProps>;
+/// <reference types="react" />
+export declare type ButtonProps = {
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    color: "light" | "dark";
+    size: "default" | "small" | "wide";
+    title?: string;
+};
+export declare const Button: React.FC<ButtonProps>;

package/components/Button.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from "./Button.modules.scss";
-import { ClassNames } from "./classNames.js";
-export const Button = ({ disabled, active, onClick, children, color, size, title }) => {
-    return (_jsx("button", { className: ClassNames({ button: true, active, wide: size === "wide", small: size === "small", light: color === "light", dark: color === "dark" }, styles), disabled: disabled, onClick: onClick, title: title, children: children }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Button.modules.scss";
+import { ClassNames } from "./classNames.js";
+export const Button = ({ disabled, active, onClick, children, color, size, title }) => {
+    return (_jsx("button", { className: ClassNames({ button: true, active, wide: size === "wide", small: size === "small", light: color === "light", dark: color === "dark" }, styles), disabled: disabled, onClick: onClick, title: title, children: children }));
+};
 //# sourceMappingURL=Button.js.map