@babylonjs/shared-ui-components 5.28.0 → 5.30.0

package/components/lines/ColorLineComponent.js

@@ -1,146 +1,146 @@
-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 { NumericInputComponent } from "./NumericInputComponent.js";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { ColorPickerLineComponent } from "./ColorPickerLineComponent.js";
-import style from "./ColorLineComponent.modules.scss";
-import copyIcon from "../../imgs/copy.svg";
-import { JoinClassNames } from "../classNames.js";
-const emptyColor = new Color4(0, 0, 0, 0);
-export class ColorLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { isExpanded: false, color: this.getValue() };
-        const target = this.props.target;
-        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        const stateColor = nextState.color;
-        const propsColor = this.getValue(nextProps);
-        if (stateColor !== this.state.color) {
-            nextState.color = stateColor;
-            return true;
-        }
-        if (propsColor !== this.state.color) {
-            nextState.color = propsColor;
-            return true;
-        }
-        if (nextState.isExpanded !== this.state.isExpanded) {
-            return true;
-        }
-        return false;
-    }
-    getValue(props = this.props) {
-        const target = props.target;
-        const property = target[props.propertyName];
-        if (!property)
-            return emptyColor;
-        if (typeof property === "string") {
-            // if (property === conflictingValuesPlaceholder) {
-            //     return emptyColor;
-            // }
-            return this._convertToColor(property);
-        }
-        else {
-            if (props.isLinear) {
-                return property.toGammaSpace();
-            }
-            return property.clone();
-        }
-    }
-    setColorFromString(colorString) {
-        const color = this._convertToColor(colorString);
-        this.setColor(color);
-    }
-    setColor(newColor) {
-        this.setState({ color: newColor.clone() });
-        if (this.props.isLinear) {
-            newColor.toLinearSpaceToRef(newColor);
-        }
-        // whether to set properties to color3 or color4
-        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;
-        const target = this.props.target;
-        const initialValue = target[this.props.propertyName];
-        const value = typeof target[this.props.propertyName] === "string" ? setColor.toHexString() : setColor;
-        // make the change
-        target[this.props.propertyName] = value;
-        // notify observers
-        if (this.props.onPropertyChangedObservable) {
-            this.props.onPropertyChangedObservable.notifyObservers({
-                object: target,
-                property: this.props.propertyName,
-                value,
-                initialValue,
-            });
-        }
-        if (this.props.onChange) {
-            this.props.onChange();
-        }
-    }
-    switchExpandState() {
-        this.setState({ isExpanded: !this.state.isExpanded });
-    }
-    updateStateR(value) {
-        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));
-    }
-    updateStateG(value) {
-        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));
-    }
-    updateStateB(value) {
-        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));
-    }
-    updateStateA(value) {
-        if (this.props.disableAlpha) {
-            return;
-        }
-        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));
-    }
-    copyToClipboard() {
-        const element = document.createElement("div");
-        element.textContent = this.state.color.toHexString();
-        document.body.appendChild(element);
-        if (window.getSelection) {
-            const range = document.createRange();
-            range.selectNode(element);
-            window.getSelection().removeAllRanges();
-            window.getSelection().addRange(range);
-        }
-        document.execCommand("copy");
-        element.remove();
-    }
-    _convertToColor(color) {
-        if (color === "" || color === "transparent") {
-            return emptyColor;
-        }
-        if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
-            const d = document.createElement("div");
-            d.style.color = color;
-            document.body.append(d);
-            const rgb = window.getComputedStyle(d).color;
-            document.body.removeChild(d);
-            const rgbArray = rgb
-                .substring(4, rgb.length - 1)
-                .replace(/ /g, "")
-                .split(",");
-            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;
-            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);
-        }
-        if (this.props.disableAlpha) {
-            const color3 = Color3.FromHexString(color);
-            return new Color4(color3.r, color3.g, color3.b, 1.0);
-        }
-        return Color4.FromHexString(color);
-    }
-    _toColor3(color) {
-        return new Color3(color.r, color.g, color.b);
-    }
-    render() {
-        const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
-        return (_jsxs("div", { className: style.color3Line, children: [_jsxs("div", { className: style.firstLine, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: style.label, title: this.props.label, children: this.props.label }), _jsx("div", { className: style.color3, children: _jsx(ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
-                                    this.setColorFromString(colorString);
-                                } }) }), _jsx("div", { className: JoinClassNames(style, "copy", "hoverIcon"), onClick: () => this.copyToClipboard(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), _jsx("div", { className: JoinClassNames("expand", "hoverIcon"), onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && (_jsxs("div", { className: style.secondLine, children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
-    }
-}
+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 { NumericInputComponent } from "./NumericInputComponent.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { ColorPickerLineComponent } from "./ColorPickerLineComponent.js";
+import style from "./ColorLineComponent.modules.scss";
+import copyIcon from "../../imgs/copy.svg";
+import { JoinClassNames } from "../classNames.js";
+const emptyColor = new Color4(0, 0, 0, 0);
+export class ColorLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { isExpanded: false, color: this.getValue() };
+        const target = this.props.target;
+        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const stateColor = nextState.color;
+        const propsColor = this.getValue(nextProps);
+        if (stateColor !== this.state.color) {
+            nextState.color = stateColor;
+            return true;
+        }
+        if (propsColor !== this.state.color) {
+            nextState.color = propsColor;
+            return true;
+        }
+        if (nextState.isExpanded !== this.state.isExpanded) {
+            return true;
+        }
+        return false;
+    }
+    getValue(props = this.props) {
+        const target = props.target;
+        const property = target[props.propertyName];
+        if (!property)
+            return emptyColor;
+        if (typeof property === "string") {
+            // if (property === conflictingValuesPlaceholder) {
+            //     return emptyColor;
+            // }
+            return this._convertToColor(property);
+        }
+        else {
+            if (props.isLinear) {
+                return property.toGammaSpace();
+            }
+            return property.clone();
+        }
+    }
+    setColorFromString(colorString) {
+        const color = this._convertToColor(colorString);
+        this.setColor(color);
+    }
+    setColor(newColor) {
+        this.setState({ color: newColor.clone() });
+        if (this.props.isLinear) {
+            newColor.toLinearSpaceToRef(newColor);
+        }
+        // whether to set properties to color3 or color4
+        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;
+        const target = this.props.target;
+        const initialValue = target[this.props.propertyName];
+        const value = typeof target[this.props.propertyName] === "string" ? setColor.toHexString() : setColor;
+        // make the change
+        target[this.props.propertyName] = value;
+        // notify observers
+        if (this.props.onPropertyChangedObservable) {
+            this.props.onPropertyChangedObservable.notifyObservers({
+                object: target,
+                property: this.props.propertyName,
+                value,
+                initialValue,
+            });
+        }
+        if (this.props.onChange) {
+            this.props.onChange();
+        }
+    }
+    switchExpandState() {
+        this.setState({ isExpanded: !this.state.isExpanded });
+    }
+    updateStateR(value) {
+        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));
+    }
+    updateStateG(value) {
+        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));
+    }
+    updateStateB(value) {
+        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));
+    }
+    updateStateA(value) {
+        if (this.props.disableAlpha) {
+            return;
+        }
+        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));
+    }
+    copyToClipboard() {
+        const element = document.createElement("div");
+        element.textContent = this.state.color.toHexString();
+        document.body.appendChild(element);
+        if (window.getSelection) {
+            const range = document.createRange();
+            range.selectNode(element);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+        }
+        document.execCommand("copy");
+        element.remove();
+    }
+    _convertToColor(color) {
+        if (color === "" || color === "transparent") {
+            return emptyColor;
+        }
+        if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
+            const d = document.createElement("div");
+            d.style.color = color;
+            document.body.append(d);
+            const rgb = window.getComputedStyle(d).color;
+            document.body.removeChild(d);
+            const rgbArray = rgb
+                .substring(4, rgb.length - 1)
+                .replace(/ /g, "")
+                .split(",");
+            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;
+            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);
+        }
+        if (this.props.disableAlpha) {
+            const color3 = Color3.FromHexString(color);
+            return new Color4(color3.r, color3.g, color3.b, 1.0);
+        }
+        return Color4.FromHexString(color);
+    }
+    _toColor3(color) {
+        return new Color3(color.r, color.g, color.b);
+    }
+    render() {
+        const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
+        return (_jsxs("div", { className: style.color3Line, children: [_jsxs("div", { className: style.firstLine, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: style.label, title: this.props.label, children: this.props.label }), _jsx("div", { className: style.color3, children: _jsx(ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
+                                    this.setColorFromString(colorString);
+                                } }) }), _jsx("div", { className: JoinClassNames(style, "copy", "hoverIcon"), onClick: () => this.copyToClipboard(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), _jsx("div", { className: JoinClassNames("expand", "hoverIcon"), onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && (_jsxs("div", { className: style.secondLine, children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
+    }
+}
 //# sourceMappingURL=ColorLineComponent.js.map

package/components/lines/ColorPickerLineComponent.d.ts

@@ -1,33 +1,33 @@
-import * as React from "react";
-import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-export interface IColorPickerComponentProps {
-    value: Color4 | Color3;
-    linearHint?: boolean;
-    onColorChanged: (newOne: string) => void;
-    icon?: string;
-    iconLabel?: string;
-    shouldPopRight?: boolean;
-    lockObject?: LockObject;
-    backgroundColor?: string;
-}
-interface IColorPickerComponentState {
-    pickerEnabled: boolean;
-    color: Color3 | Color4;
-    hex: string;
-}
-export declare class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
-    private _floatRef;
-    private _floatHostRef;
-    private _coverRef;
-    constructor(props: IColorPickerComponentProps);
-    syncPositions(): void;
-    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
-    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
-        children?: React.ReactNode;
-    }>): string;
-    componentDidUpdate(): void;
-    componentDidMount(): void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+export interface IColorPickerComponentProps {
+    value: Color4 | Color3;
+    linearHint?: boolean;
+    onColorChanged: (newOne: string) => void;
+    icon?: string;
+    iconLabel?: string;
+    shouldPopRight?: boolean;
+    lockObject?: LockObject;
+    backgroundColor?: string;
+}
+interface IColorPickerComponentState {
+    pickerEnabled: boolean;
+    color: Color3 | Color4;
+    hex: string;
+}
+export declare class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+    private _floatRef;
+    private _floatHostRef;
+    private _coverRef;
+    constructor(props: IColorPickerComponentProps);
+    syncPositions(): void;
+    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): string;
+    componentDidUpdate(): void;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};

package/components/lines/ColorPickerLineComponent.js

@@ -1,62 +1,62 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ColorPicker } from "../colorPicker/ColorPicker.js";
-import style from "./ColorPickerLineComponent.modules.scss";
-export class ColorPickerLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };
-        this._floatRef = React.createRef();
-        this._floatHostRef = React.createRef();
-        this._coverRef = React.createRef();
-    }
-    syncPositions() {
-        const div = this._floatRef.current;
-        const host = this._floatHostRef.current;
-        if (!div || !host) {
-            return;
-        }
-        let top = host.getBoundingClientRect().top;
-        const height = div.getBoundingClientRect().height;
-        if (top + height + 10 > window.innerHeight) {
-            top = window.innerHeight - height - 10;
-        }
-        div.style.top = top + "px";
-        if (!this.props.shouldPopRight) {
-            div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
-        }
-        else {
-            div.style.left = host.getBoundingClientRect().left + "px";
-        }
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        const diffProps = this.getHexString(nextProps) !== this.getHexString();
-        if (diffProps) {
-            nextState.color = nextProps.value;
-            nextState.hex = this.getHexString(nextProps);
-        }
-        return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
-    }
-    getHexString(props = this.props) {
-        return props.value.toHexString();
-    }
-    componentDidUpdate() {
-        this.syncPositions();
-    }
-    componentDidMount() {
-        this.syncPositions();
-    }
-    render() {
-        return (_jsxs("div", { className: style.colorPicker, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: style.colorRectBackground, ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: _jsx("div", { className: style.colorRect, style: { background: this.state.hex } }) }), this.state.pickerEnabled && (_jsx(_Fragment, { children: _jsx("div", { ref: this._coverRef, className: style.colorPickerCover, onClick: (evt) => {
-                            if (evt.target !== this._coverRef.current) {
-                                return;
-                            }
-                            this.setState({ pickerEnabled: false });
-                        }, children: _jsx("div", { className: style.colorPickerFloat, ref: this._floatRef, children: _jsx(ColorPicker, { backgroundColor: this.props.backgroundColor, lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
-                                    const hex = color.toHexString();
-                                    this.setState({ hex, color });
-                                    this.props.onColorChanged(hex);
-                                } }) }) }) }))] }));
-    }
-}
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ColorPicker } from "../colorPicker/ColorPicker.js";
+import style from "./ColorPickerLineComponent.modules.scss";
+export class ColorPickerLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };
+        this._floatRef = React.createRef();
+        this._floatHostRef = React.createRef();
+        this._coverRef = React.createRef();
+    }
+    syncPositions() {
+        const div = this._floatRef.current;
+        const host = this._floatHostRef.current;
+        if (!div || !host) {
+            return;
+        }
+        let top = host.getBoundingClientRect().top;
+        const height = div.getBoundingClientRect().height;
+        if (top + height + 10 > window.innerHeight) {
+            top = window.innerHeight - height - 10;
+        }
+        div.style.top = top + "px";
+        if (!this.props.shouldPopRight) {
+            div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
+        }
+        else {
+            div.style.left = host.getBoundingClientRect().left + "px";
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const diffProps = this.getHexString(nextProps) !== this.getHexString();
+        if (diffProps) {
+            nextState.color = nextProps.value;
+            nextState.hex = this.getHexString(nextProps);
+        }
+        return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
+    }
+    getHexString(props = this.props) {
+        return props.value.toHexString();
+    }
+    componentDidUpdate() {
+        this.syncPositions();
+    }
+    componentDidMount() {
+        this.syncPositions();
+    }
+    render() {
+        return (_jsxs("div", { className: style.colorPicker, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: style.colorRectBackground, ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: _jsx("div", { className: style.colorRect, style: { background: this.state.hex } }) }), this.state.pickerEnabled && (_jsx(_Fragment, { children: _jsx("div", { ref: this._coverRef, className: style.colorPickerCover, onClick: (evt) => {
+                            if (evt.target !== this._coverRef.current) {
+                                return;
+                            }
+                            this.setState({ pickerEnabled: false });
+                        }, children: _jsx("div", { className: style.colorPickerFloat, ref: this._floatRef, children: _jsx(ColorPicker, { backgroundColor: this.props.backgroundColor, lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
+                                    const hex = color.toHexString();
+                                    this.setState({ hex, color });
+                                    this.props.onColorChanged(hex);
+                                } }) }) }) }))] }));
+    }
+}
 //# sourceMappingURL=ColorPickerLineComponent.js.map

package/components/lines/FileButtonLineComponent.d.ts

@@ -1,16 +1,16 @@
-import * as React from "react";
-export interface IFileButtonLineComponentProps {
-    label: string;
-    onClick: (file: File) => void;
-    accept: string;
-    icon?: string;
-    iconLabel?: string;
-}
-export declare class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
-    private static _IDGenerator;
-    private _id;
-    private _uploadInputRef;
-    constructor(props: IFileButtonLineComponentProps);
-    onChange(evt: any): void;
-    render(): JSX.Element;
-}
+import * as React from "react";
+export interface IFileButtonLineComponentProps {
+    label: string;
+    onClick: (file: File) => void;
+    accept: string;
+    icon?: string;
+    iconLabel?: string;
+}
+export declare class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
+    private static _IDGenerator;
+    private _id;
+    private _uploadInputRef;
+    constructor(props: IFileButtonLineComponentProps);
+    onChange(evt: any): void;
+    render(): JSX.Element;
+}

package/components/lines/FileButtonLineComponent.js

@@ -1,22 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import styles from "./FileButtonLineComponent.modules.scss";
-export class FileButtonLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._id = FileButtonLineComponent._IDGenerator++;
-        this._uploadInputRef = React.createRef();
-    }
-    onChange(evt) {
-        const files = evt.target.files;
-        if (files && files.length) {
-            this.props.onClick(files[0]);
-        }
-        evt.target.value = "";
-    }
-    render() {
-        return (_jsxs("div", { className: styles.buttonLine, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel }), _jsx("label", { htmlFor: "file-upload" + this._id, className: styles.fileUpload, children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));
-    }
-}
-FileButtonLineComponent._IDGenerator = 0;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./FileButtonLineComponent.modules.scss";
+export class FileButtonLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._id = FileButtonLineComponent._IDGenerator++;
+        this._uploadInputRef = React.createRef();
+    }
+    onChange(evt) {
+        const files = evt.target.files;
+        if (files && files.length) {
+            this.props.onClick(files[0]);
+        }
+        evt.target.value = "";
+    }
+    render() {
+        return (_jsxs("div", { className: styles.buttonLine, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel }), _jsx("label", { htmlFor: "file-upload" + this._id, className: styles.fileUpload, children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));
+    }
+}
+FileButtonLineComponent._IDGenerator = 0;
 //# sourceMappingURL=FileButtonLineComponent.js.map

package/components/lines/NumericInputComponent.d.ts

@@ -1,31 +1,31 @@
-import * as React from "react";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-interface INumericInputComponentProps {
-    label: string;
-    value: number;
-    step?: number;
-    onChange: (value: number) => void;
-    precision?: number;
-    icon?: string;
-    iconLabel?: string;
-    lockObject: LockObject;
-}
-export declare class NumericInputComponent extends React.Component<INumericInputComponentProps, {
-    value: string;
-}> {
-    static defaultProps: {
-        step: number;
-    };
-    private _localChange;
-    constructor(props: INumericInputComponentProps);
-    componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
-        value: string;
-    }): boolean;
-    updateValue(valueString: string): void;
-    onBlur(): void;
-    incrementValue(amount: number): void;
-    onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>): void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+interface INumericInputComponentProps {
+    label: string;
+    value: number;
+    step?: number;
+    onChange: (value: number) => void;
+    precision?: number;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+}
+export declare class NumericInputComponent extends React.Component<INumericInputComponentProps, {
+    value: string;
+}> {
+    static defaultProps: {
+        step: number;
+    };
+    private _localChange;
+    constructor(props: INumericInputComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
+        value: string;
+    }): boolean;
+    updateValue(valueString: string): void;
+    onBlur(): void;
+    incrementValue(amount: number): void;
+    onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};