@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/components/colorPicker/ColorComponentEntry.js

@@ -1,38 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import style from "./ColorComponentEntry.modules.scss";
-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: style.colorPickerComponent, children: [_jsx("div", { className: style.colorPickerComponentValue, 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: style.colorPickerComponentLabel, children: this.props.label })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import style from "./ColorComponentEntry.modules.scss";
+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: style.colorPickerComponent, children: [_jsx("div", { className: style.colorPickerComponentValue, 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: style.colorPickerComponentLabel, children: this.props.label })] }));
+    }
+}
 //# sourceMappingURL=ColorComponentEntry.js.map

package/components/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";
-/**
- * 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;
-    backgroundColor?: string;
-}
-/**
- * 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";
+/**
+ * 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;
+    backgroundColor?: string;
+}
+/**
+ * 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/components/colorPicker/ColorPicker.js

@@ -1,138 +1,138 @@
-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 style from "./ColorPicker.modules.scss";
-import { ClassNames } from "../classNames.js";
-/**
- * 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: ClassNames({ colorPickerContainer: true, withHints: this.props.linearhint }, style), style: { backgroundColor: this.props.backgroundColor || "inherit" }, children: [_jsxs("div", { className: style.colorPickerSaturation, 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: style.colorPickerSaturationWhite }), _jsx("div", { className: style.colorPickerSaturationBlack }), _jsx("div", { className: style.colorPickerSaturationCursor, style: {
-                                top: `${-(hsv.b * 100) + 100}%`,
-                                left: `${hsv.g * 100}%`,
-                            } })] }), _jsxs("div", { className: style.colorPickerHue, children: [_jsx("div", { className: style.colorPickerHueColor, style: {
-                                background: colorHex,
-                            } }), _jsx("div", { className: style.colorPickerHueSlider, ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: _jsx("div", { className: style.colorPickerHueCursor, style: {
-                                    left: `${(hsv.r / 360.0) * 100}%`,
-                                    border: `1px solid ` + colorHexRef,
-                                } }) })] }), _jsxs("div", { className: style.colorPickerRgb, children: [_jsx("div", { className: style.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: style.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: style.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: ClassNames({ alpha: true, grayed: hasAlpha }, style), 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();
-                                } }) })] }), _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: style.colorPickerWarning, 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 style from "./ColorPicker.modules.scss";
+import { ClassNames } from "../classNames.js";
+/**
+ * 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: ClassNames({ colorPickerContainer: true, withHints: this.props.linearhint }, style), style: { backgroundColor: this.props.backgroundColor || "inherit" }, children: [_jsxs("div", { className: style.colorPickerSaturation, 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: style.colorPickerSaturationWhite }), _jsx("div", { className: style.colorPickerSaturationBlack }), _jsx("div", { className: style.colorPickerSaturationCursor, style: {
+                                top: `${-(hsv.b * 100) + 100}%`,
+                                left: `${hsv.g * 100}%`,
+                            } })] }), _jsxs("div", { className: style.colorPickerHue, children: [_jsx("div", { className: style.colorPickerHueColor, style: {
+                                background: colorHex,
+                            } }), _jsx("div", { className: style.colorPickerHueSlider, ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: _jsx("div", { className: style.colorPickerHueCursor, style: {
+                                    left: `${(hsv.r / 360.0) * 100}%`,
+                                    border: `1px solid ` + colorHexRef,
+                                } }) })] }), _jsxs("div", { className: style.colorPickerRgb, children: [_jsx("div", { className: style.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: style.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: style.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: ClassNames({ alpha: true, grayed: hasAlpha }, style), 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();
+                                } }) })] }), _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: style.colorPickerWarning, children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" }))] }));
+    }
+}
 //# sourceMappingURL=ColorPicker.js.map

package/components/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/components/colorPicker/HexColor.js

@@ -1,46 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import style from "./HexColor.modules.scss";
-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 (_jsxs("div", { className: style.colorPickerHex, children: [_jsx("div", { className: style.colorPickerHexLabel, children: "Hex" }), _jsx("div", { className: style.colorPickerHexValue, children: _jsx("input", { type: "string", 
-                        // className="hex-input"
-                        className: style.colorPickerHex, value: this.state.hex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateHexValue(evt.target.value) }) })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import style from "./HexColor.modules.scss";
+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 (_jsxs("div", { className: style.colorPickerHex, children: [_jsx("div", { className: style.colorPickerHexLabel, children: "Hex" }), _jsx("div", { className: style.colorPickerHexValue, children: _jsx("input", { type: "string", 
+                        // className="hex-input"
+                        className: style.colorPickerHex, value: this.state.hex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateHexValue(evt.target.value) }) })] }));
+    }
+}
 //# sourceMappingURL=HexColor.js.map

package/components/layout/DraggableIcon.d.ts

@@ -0,0 +1,23 @@
+import type { FC } from "react";
+import type { ElementTypes, TabDrag } from "./types";
+/**
+ * Arguments for the DraggableIcon component.
+ */
+export interface IDraggableIconProps {
+    /**
+     * Icon source
+     */
+    src: string;
+    /**
+     * Object that will be passed to the drag event
+     */
+    item: TabDrag;
+    /**
+     * Type of drag event
+     */
+    type: ElementTypes;
+}
+/**
+ * An icon that can be dragged by the user
+ */
+export declare const DraggableIcon: FC<IDraggableIconProps>;

package/components/layout/DraggableIcon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDrag } from "react-dnd";
+/**
+ * An icon that can be dragged by the user
+ */
+export const DraggableIcon = (props) => {
+    const [, drag] = useDrag(() => ({
+        type: props.type,
+        item: props.item,
+        collect(monitor) {
+            return {
+                isDragging: !!monitor.isDragging(),
+            };
+        },
+    }));
+    return _jsx("img", { ref: drag, src: props.src });
+};
+//# sourceMappingURL=DraggableIcon.js.map

package/components/layout/DraggableIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableIcon.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/layout/DraggableIcon.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAqBpC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAA4B,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5B,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,CAAC;AAC9C,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport type { ElementTypes, TabDrag } from \"./types\";\r\n\r\n/**\r\n * Arguments for the DraggableIcon component.\r\n */\r\nexport interface IDraggableIconProps {\r\n    /**\r\n     * Icon source\r\n     */\r\n    src: string;\r\n    /**\r\n     * Object that will be passed to the drag event\r\n     */\r\n    item: TabDrag;\r\n    /**\r\n     * Type of drag event\r\n     */\r\n    type: ElementTypes;\r\n}\r\n\r\n/**\r\n * An icon that can be dragged by the user\r\n */\r\nexport const DraggableIcon: FC<IDraggableIconProps> = (props) => {\r\n    const [, drag] = useDrag(() => ({\r\n        type: props.type,\r\n        item: props.item,\r\n        collect(monitor) {\r\n            return {\r\n                isDragging: !!monitor.isDragging(),\r\n            };\r\n        },\r\n    }));\r\n    return <img ref={drag} src={props.src} />;\r\n};\r\n"]}

package/components/layout/FlexibleColumn.d.ts

@@ -0,0 +1,17 @@
+import type { FC } from "react";
+/**
+ * Arguments for the Column component.
+ */
+export interface IFlexibleColumnProps {
+    /**
+     * Width of column
+     */
+    width: string;
+}
+/**
+ * This component represents a single column in the layout. It receives a width
+ * that it occupies and the content to display
+ * @param props
+ * @returns
+ */
+export declare const FlexibleColumn: FC<IFlexibleColumnProps>;