@babylonjs/shared-ui-components 5.28.0

package/lines/optionsLineComponent.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable.js";
+export declare const Null_Value: number;
+export interface IOptionsLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    options: IInspectableOptions[];
+    addInput?: boolean;
+    noDirectUpdate?: boolean;
+    onSelect?: (value: number | string) => void;
+    extractValue?: (target: any) => number | string;
+    addVal?: (newVal: {
+        label: string;
+        value: number;
+    }, prevVal: number) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    allowNullValue?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    className?: string;
+    valuesAreStrings?: boolean;
+    defaultIfNull?: number;
+    fromFontDropdown?: boolean;
+    valueProp?: number;
+    fallbackValue?: number;
+}
+export declare class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
+    value: number | string;
+    addCustom: boolean;
+}> {
+    private _localChange;
+    private _remapValueIn;
+    private _remapValueOut;
+    private _getValue;
+    constructor(props: IOptionsLineComponentProps);
+    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
+        value: number;
+        addCustom: boolean;
+    }): boolean;
+    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+    setValue(value: string | number): void;
+    updateValue(valueString: string): void;
+    updateCustomValue(): void;
+    render(): JSX.Element;
+}

package/lines/optionsLineComponent.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Null_Value = Number.MAX_SAFE_INTEGER;
+const DEFAULT_FALLBACK_VALUE = -1;
+export class OptionsLineComponent extends React.Component {
+    constructor(props) {
+        // Initialize default props
+        super(props);
+        this._localChange = false;
+        this.state = { value: this._remapValueIn(this._getValue(props)), addCustom: false };
+    }
+    _remapValueIn(value) {
+        return this.props.allowNullValue && value === null ? Null_Value : value;
+    }
+    _remapValueOut(value) {
+        return this.props.allowNullValue && value === Null_Value ? null : value;
+    }
+    _getValue(props) {
+        if (props.extractValue) {
+            return props.extractValue(props.target);
+        }
+        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this._localChange) {
+            this._localChange = false;
+            return true;
+        }
+        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(nextProps.target) : nextProps.target[nextProps.propertyName]);
+        if (newValue != null && newValue !== nextState.value) {
+            nextState.value = newValue;
+            return true;
+        }
+        if (this.props.options !== nextProps.options) {
+            return true;
+        }
+        return false;
+    }
+    raiseOnPropertyChanged(newValue, previousValue) {
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: newValue,
+            initialValue: previousValue,
+            allowNullValue: this.props.allowNullValue,
+        });
+    }
+    setValue(value) {
+        this.setState({ value: value });
+    }
+    updateValue(valueString) {
+        var _a, _b;
+        let value = this.props.valuesAreStrings ? valueString : parseInt(valueString);
+        if (isNaN(Number(value))) {
+            for (let i = 0; i < this.props.options.length; i++) {
+                if (((_a = this.props.options.at(i)) === null || _a === void 0 ? void 0 : _a.label) === valueString) {
+                    value = Number((_b = this.props.options.at(i)) === null || _b === void 0 ? void 0 : _b.value);
+                }
+            }
+        }
+        if (value === 0 && this.props.fromFontDropdown) {
+            this.setState({ addCustom: true });
+        }
+        this._localChange = true;
+        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
+        if (!this.props.noDirectUpdate) {
+            this.props.target[this.props.propertyName] = this._remapValueOut(value);
+        }
+        //selecting a regular option from font dropdown
+        if (value != 0 && this.props.fromFontDropdown) {
+            this.setState({ value: value });
+            if (this.props.onSelect) {
+                this.props.onSelect(value);
+            }
+            //selecting 'custom font' from font dropdown
+        }
+        else if (this.props.fromFontDropdown) {
+            if (this.props.onSelect) {
+                this.props.onSelect(this.state.value);
+            }
+        }
+        //selecting from a dropdown that's not font dropdown
+        else {
+            this.setState({ value: value });
+            if (this.props.onSelect) {
+                this.props.onSelect(value);
+            }
+        }
+        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
+        this.raiseOnPropertyChanged(newValue, store);
+    }
+    updateCustomValue() {
+        this.setState({ addCustom: false });
+    }
+    render() {
+        var _a;
+        const fallback = this.props.fallbackValue !== undefined ? this.props.fallbackValue : DEFAULT_FALLBACK_VALUE;
+        return (_jsxs("div", { className: `listLine ${(_a = this.props.className) !== null && _a !== void 0 ? _a : ""}`, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "options", children: this.state.addCustom ? (_jsx("input", { type: "text", placeholder: "Enter a custom font here", onKeyDown: (event) => {
+                            event.key === "Enter" && this.props.addVal != undefined
+                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
+                                    this.updateCustomValue(),
+                                    this.forceUpdate())
+                                : null;
+                        }, onBlur: (event) => {
+                            this.props.addVal != undefined
+                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
+                                    this.updateCustomValue(),
+                                    this.forceUpdate())
+                                : null;
+                        } })) : (_jsx("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value === null || this.state.value === undefined ? fallback : this.state.value, children: this.props.options.map((option, i) => {
+                            return (_jsx("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
+                        }) })) })] }));
+    }
+}
+//# sourceMappingURL=optionsLineComponent.js.map

package/lines/optionsLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { IInspectableOptions } from \"core/Misc/iInspectable\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nconst DEFAULT_FALLBACK_VALUE = -1;\r\n\r\nexport interface IOptionsLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: IInspectableOptions[];\r\n    addInput?: boolean;\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    addVal?: (newVal: { label: string; value: number }, prevVal: number) => void;\r\n\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n    fromFontDropdown?: boolean;\r\n    valueProp?: number;\r\n    fallbackValue?: number;\r\n}\r\n\r\nexport class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, { value: number | string; addCustom: boolean }> {\r\n    private _localChange = false;\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineComponentProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineComponentProps) {\r\n        // Initialize default props\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)), addCustom: false };\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: { value: number; addCustom: boolean }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(nextProps.target) : nextProps.target[nextProps.propertyName]);\r\n\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n\r\n            return true;\r\n        }\r\n\r\n        if (this.props.options !== nextProps.options) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        let value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n\r\n        if (isNaN(Number(value))) {\r\n            for (let i = 0; i < this.props.options.length; i++) {\r\n                if (this.props.options.at(i)?.label === valueString) {\r\n                    value = Number(this.props.options.at(i)?.value);\r\n                }\r\n            }\r\n        }\r\n\r\n        if (value === 0 && this.props.fromFontDropdown) {\r\n            this.setState({ addCustom: true });\r\n        }\r\n\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n\r\n        //selecting a regular option from font dropdown\r\n        if (value != 0 && this.props.fromFontDropdown) {\r\n            this.setState({ value: value });\r\n            if (this.props.onSelect) {\r\n                this.props.onSelect(value);\r\n            }\r\n            //selecting 'custom font' from font dropdown\r\n        } else if (this.props.fromFontDropdown) {\r\n            if (this.props.onSelect) {\r\n                this.props.onSelect(this.state.value);\r\n            }\r\n        }\r\n        //selecting from a dropdown that's not font dropdown\r\n        else {\r\n            this.setState({ value: value });\r\n            if (this.props.onSelect) {\r\n                this.props.onSelect(value);\r\n            }\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    updateCustomValue() {\r\n        this.setState({ addCustom: false });\r\n    }\r\n\r\n    render() {\r\n        const fallback = this.props.fallbackValue !== undefined ? this.props.fallbackValue : DEFAULT_FALLBACK_VALUE;\r\n        return (\r\n            <div className={`listLine ${this.props.className ?? \"\"}`}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    {this.state.addCustom ? (\r\n                        <input\r\n                            type=\"text\"\r\n                            placeholder=\"Enter a custom font here\"\r\n                            onKeyDown={(event) => {\r\n                                event.key === \"Enter\" && this.props.addVal != undefined\r\n                                    ? (this.props.addVal({ label: (event.target as HTMLInputElement).value, value: this.props.options.length + 1 }, Number(this.state.value)),\r\n                                      this.updateCustomValue(),\r\n                                      this.forceUpdate())\r\n                                    : null;\r\n                            }}\r\n                            onBlur={(event) => {\r\n                                this.props.addVal != undefined\r\n                                    ? (this.props.addVal({ label: (event.target as HTMLInputElement).value, value: this.props.options.length + 1 }, Number(this.state.value)),\r\n                                      this.updateCustomValue(),\r\n                                      this.forceUpdate())\r\n                                    : null;\r\n                            }}\r\n                        />\r\n                    ) : (\r\n                        <select\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            value={this.state.value === null || this.state.value === undefined ? fallback : this.state.value}\r\n                        >\r\n                            {this.props.options.map((option, i) => {\r\n                                return (\r\n                                    <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                        {option.label}\r\n                                    </option>\r\n                                );\r\n                            })}\r\n                        </select>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/popup.d.ts

@@ -0,0 +1,4 @@
+export declare class Popup {
+    static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
+    private static _CopyStyles;
+}

package/lines/popup.js

@@ -0,0 +1,68 @@
+export class Popup {
+    static CreatePopup(title, windowVariableName, width = 300, height = 800) {
+        const windowCreationOptionsList = {
+            width: width,
+            height: height,
+            top: (window.innerHeight - width) / 2 + window.screenY,
+            left: (window.innerWidth - height) / 2 + window.screenX,
+        };
+        const windowCreationOptions = Object.keys(windowCreationOptionsList)
+            .map((key) => key + "=" + windowCreationOptionsList[key])
+            .join(",");
+        const popupWindow = window.open("", title, windowCreationOptions);
+        if (!popupWindow) {
+            return null;
+        }
+        const parentDocument = popupWindow.document;
+        // Font
+        const newLinkEl = parentDocument.createElement("link");
+        newLinkEl.rel = "stylesheet";
+        newLinkEl.href = "https://use.typekit.net/cta4xsb.css";
+        parentDocument.head.appendChild(newLinkEl);
+        parentDocument.title = title;
+        parentDocument.body.style.width = "100%";
+        parentDocument.body.style.height = "100%";
+        parentDocument.body.style.margin = "0";
+        parentDocument.body.style.padding = "0";
+        const parentControl = parentDocument.createElement("div");
+        parentControl.style.width = "100%";
+        parentControl.style.height = "100%";
+        parentControl.style.margin = "0";
+        parentControl.style.padding = "0";
+        popupWindow.document.body.appendChild(parentControl);
+        this._CopyStyles(window.document, parentDocument);
+        setTimeout(() => {
+            // need this for late bindings
+            this._CopyStyles(window.document, parentDocument);
+        }, 0);
+        this[windowVariableName] = popupWindow;
+        return parentControl;
+    }
+    static _CopyStyles(sourceDoc, targetDoc) {
+        for (let index = 0; index < sourceDoc.styleSheets.length; index++) {
+            const styleSheet = sourceDoc.styleSheets[index];
+            try {
+                if (styleSheet.cssRules) {
+                    // for <style> elements
+                    const newStyleEl = sourceDoc.createElement("style");
+                    for (const cssRule of styleSheet.cssRules) {
+                        // write the text of each rule into the body of the style element
+                        newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
+                    }
+                    targetDoc.head.appendChild(newStyleEl);
+                }
+                else if (styleSheet.href) {
+                    // for <link> elements loading CSS from a URL
+                    const newLinkEl = sourceDoc.createElement("link");
+                    newLinkEl.rel = "stylesheet";
+                    newLinkEl.href = styleSheet.href;
+                    targetDoc.head.appendChild(newLinkEl);
+                }
+            }
+            catch (e) {
+                console.log(e);
+            }
+        }
+    }
+}
+//# sourceMappingURL=popup.js.map

package/lines/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/popup.ts"],"names":[],"mappings":"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","sourcesContent":["export class Popup {\r\n    public static CreatePopup(title: string, windowVariableName: string, width = 300, height = 800) {\r\n        const windowCreationOptionsList = {\r\n            width: width,\r\n            height: height,\r\n            top: (window.innerHeight - width) / 2 + window.screenY,\r\n            left: (window.innerWidth - height) / 2 + window.screenX,\r\n        };\r\n\r\n        const windowCreationOptions = Object.keys(windowCreationOptionsList)\r\n            .map((key) => key + \"=\" + (windowCreationOptionsList as any)[key])\r\n            .join(\",\");\r\n\r\n        const popupWindow = window.open(\"\", title, windowCreationOptions);\r\n        if (!popupWindow) {\r\n            return null;\r\n        }\r\n\r\n        const parentDocument = popupWindow.document;\r\n\r\n        // Font\r\n        const newLinkEl = parentDocument.createElement(\"link\");\r\n\r\n        newLinkEl.rel = \"stylesheet\";\r\n        newLinkEl.href = \"https://use.typekit.net/cta4xsb.css\";\r\n        parentDocument.head!.appendChild(newLinkEl);\r\n\r\n        parentDocument.title = title;\r\n        parentDocument.body.style.width = \"100%\";\r\n        parentDocument.body.style.height = \"100%\";\r\n        parentDocument.body.style.margin = \"0\";\r\n        parentDocument.body.style.padding = \"0\";\r\n\r\n        const parentControl = parentDocument.createElement(\"div\");\r\n        parentControl.style.width = \"100%\";\r\n        parentControl.style.height = \"100%\";\r\n        parentControl.style.margin = \"0\";\r\n        parentControl.style.padding = \"0\";\r\n\r\n        popupWindow.document.body.appendChild(parentControl);\r\n        this._CopyStyles(window.document, parentDocument);\r\n        setTimeout(() => {\r\n            // need this for late bindings\r\n            this._CopyStyles(window.document, parentDocument);\r\n        }, 0);\r\n\r\n        (this as any)[windowVariableName] = popupWindow;\r\n\r\n        return parentControl;\r\n    }\r\n\r\n    private static _CopyStyles(sourceDoc: HTMLDocument, targetDoc: HTMLDocument) {\r\n        for (let index = 0; index < sourceDoc.styleSheets.length; index++) {\r\n            const styleSheet: any = sourceDoc.styleSheets[index];\r\n            try {\r\n                if (styleSheet.cssRules) {\r\n                    // for <style> elements\r\n                    const newStyleEl = sourceDoc.createElement(\"style\");\r\n\r\n                    for (const cssRule of styleSheet.cssRules) {\r\n                        // write the text of each rule into the body of the style element\r\n                        newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));\r\n                    }\r\n\r\n                    targetDoc.head!.appendChild(newStyleEl);\r\n                } else if (styleSheet.href) {\r\n                    // for <link> elements loading CSS from a URL\r\n                    const newLinkEl = sourceDoc.createElement(\"link\");\r\n\r\n                    newLinkEl.rel = \"stylesheet\";\r\n                    newLinkEl.href = styleSheet.href;\r\n                    targetDoc.head!.appendChild(newLinkEl);\r\n                }\r\n            } catch (e) {\r\n                console.log(e);\r\n            }\r\n        }\r\n    }\r\n}\r\n"]}

package/lines/radioLineComponent.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+interface IRadioButtonLineComponentProps {
+    onSelectionChangedObservable: Observable<RadioButtonLineComponent>;
+    label: string;
+    isSelected: () => boolean;
+    onSelect: () => void;
+    icon?: string;
+    iconLabel?: string;
+}
+export declare class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
+    isSelected: boolean;
+}> {
+    private _onSelectionChangedObserver;
+    constructor(props: IRadioButtonLineComponentProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onChange(): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/radioLineComponent.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class RadioButtonLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { isSelected: this.props.isSelected() };
+    }
+    componentDidMount() {
+        this._onSelectionChangedObserver = this.props.onSelectionChangedObservable.add((value) => {
+            this.setState({ isSelected: value === this });
+        });
+    }
+    componentWillUnmount() {
+        if (this._onSelectionChangedObserver) {
+            this.props.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
+            this._onSelectionChangedObserver = null;
+        }
+    }
+    onChange() {
+        this.props.onSelect();
+        this.props.onSelectionChangedObservable.notifyObservers(this);
+    }
+    render() {
+        return (_jsxs("div", { className: "radioLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsxs("div", { className: "radioContainer", children: [_jsx("input", { id: this.props.label, className: "radio", type: "radio", checked: this.state.isSelected, onChange: () => this.onChange() }), _jsx("label", { htmlFor: this.props.label, className: "labelForRadio" })] })] }));
+    }
+}
+//# sourceMappingURL=radioLineComponent.js.map

package/lines/radioLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/radioLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,OAAO,wBAAyB,SAAQ,KAAK,CAAC,SAAkE;IAGlH,YAAY,KAAqC;QAC7C,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC;IACzD,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,4BAA4B,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACrF,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,KAAK,KAAK,IAAI,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACP,CAAC;IAED,oBAAoB;QAChB,IAAI,IAAI,CAAC,2BAA2B,EAAE;YAClC,IAAI,CAAC,KAAK,CAAC,4BAA4B,CAAC,MAAM,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;YACjF,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;SAC3C;IACL,CAAC;IAED,QAAQ;QACJ,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtB,IAAI,CAAC,KAAK,CAAC,4BAA4B,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;QACF,OAAO,CACH,eAAK,SAAS,EAAC,WAAW,aACrB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,eAAK,SAAS,EAAC,gBAAgB,aAC3B,gBAAO,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAI,EAC/H,gBAAO,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAC,eAAe,GAAG,IAC5D,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Observer, Observable } from \"core/Misc/observable\";\r\n\r\ninterface IRadioButtonLineComponentProps {\r\n    onSelectionChangedObservable: Observable<RadioButtonLineComponent>;\r\n    label: string;\r\n    isSelected: () => boolean;\r\n    onSelect: () => void;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, { isSelected: boolean }> {\r\n    private _onSelectionChangedObserver: Nullable<Observer<RadioButtonLineComponent>>;\r\n\r\n    constructor(props: IRadioButtonLineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isSelected: this.props.isSelected() };\r\n    }\r\n\r\n    componentDidMount() {\r\n        this._onSelectionChangedObserver = this.props.onSelectionChangedObservable.add((value) => {\r\n            this.setState({ isSelected: value === this });\r\n        });\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        if (this._onSelectionChangedObserver) {\r\n            this.props.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n            this._onSelectionChangedObserver = null;\r\n        }\r\n    }\r\n\r\n    onChange() {\r\n        this.props.onSelect();\r\n        this.props.onSelectionChangedObservable.notifyObservers(this);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"radioLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"radioContainer\">\r\n                    <input id={this.props.label} className=\"radio\" type=\"radio\" checked={this.state.isSelected} onChange={() => this.onChange()} />\r\n                    <label htmlFor={this.props.label} className=\"labelForRadio\" />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/sliderLineComponent.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+interface ISliderLineComponentProps {
+    label: string;
+    target?: any;
+    propertyName?: string;
+    minimum: number;
+    maximum: number;
+    step: number;
+    directValue?: number;
+    useEuler?: boolean;
+    onChange?: (value: number) => void;
+    onInput?: (value: number) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    decimalCount?: number;
+    margin?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+    unit?: React.ReactNode;
+}
+export declare class SliderLineComponent extends React.Component<ISliderLineComponentProps, {
+    value: number;
+}> {
+    private _localChange;
+    constructor(props: ISliderLineComponentProps);
+    shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: {
+        value: number;
+    }): boolean;
+    onChange(newValueString: any): void;
+    onInput(newValueString: any): void;
+    prepareDataToRead(value: number): number;
+    render(): JSX.Element;
+}
+export {};

package/lines/sliderLineComponent.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { FloatLineComponent } from "./floatLineComponent.js";
+export class SliderLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        if (this.props.directValue !== undefined) {
+            this.state = {
+                value: this.props.directValue,
+            };
+        }
+        else {
+            let value = this.props.target[this.props.propertyName];
+            if (value === undefined) {
+                value = this.props.maximum;
+            }
+            this.state = { value: value };
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.directValue !== undefined) {
+            nextState.value = nextProps.directValue;
+            return true;
+        }
+        let currentState = nextProps.target[nextProps.propertyName];
+        if (currentState === undefined) {
+            currentState = nextProps.maximum;
+        }
+        if (currentState !== nextState.value || this._localChange || nextProps.maximum !== this.props.maximum || nextProps.minimum !== this.props.minimum) {
+            nextState.value = currentState;
+            this._localChange = false;
+            return true;
+        }
+        if (nextProps.unit !== this.props.unit) {
+            return true;
+        }
+        return false;
+    }
+    onChange(newValueString) {
+        if (newValueString === "—")
+            return;
+        this._localChange = true;
+        let newValue = parseFloat(newValueString);
+        if (this.props.useEuler) {
+            newValue = Tools.ToRadians(newValue);
+        }
+        if (this.props.target) {
+            if (this.props.onPropertyChangedObservable) {
+                this.props.onPropertyChangedObservable.notifyObservers({
+                    object: this.props.target,
+                    property: this.props.propertyName,
+                    value: newValue,
+                    initialValue: this.state.value,
+                });
+            }
+            this.props.target[this.props.propertyName] = newValue;
+        }
+        if (this.props.onChange) {
+            this.props.onChange(newValue);
+        }
+        this.setState({ value: newValue });
+    }
+    onInput(newValueString) {
+        const newValue = parseFloat(newValueString);
+        if (this.props.onInput) {
+            this.props.onInput(newValue);
+        }
+    }
+    prepareDataToRead(value) {
+        if (value === null) {
+            value = 0;
+        }
+        if (this.props.useEuler) {
+            return Tools.ToDegrees(value);
+        }
+        return value;
+    }
+    render() {
+        return (_jsxs("div", { className: "sliderLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), (!this.props.icon || this.props.label != "") && (_jsx("div", { className: this.props.margin ? "label withMargins" : "label", title: this.props.label, children: this.props.label })), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, isInteger: this.props.decimalCount === 0, smallUI: true, label: "", target: this.state, digits: this.props.decimalCount === undefined ? 4 : this.props.decimalCount, propertyName: "value", min: this.props.minimum, max: this.props.maximum, onEnter: () => {
+                        const changed = this.prepareDataToRead(this.state.value);
+                        this.onChange(changed);
+                    }, onChange: () => {
+                        const changed = this.prepareDataToRead(this.state.value);
+                        this.onChange(changed);
+                    }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: this.props.unit }), _jsx("div", { className: "slider", children: _jsx("input", { className: "range", type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: (evt) => this.onInput(evt.target.value), onChange: (evt) => this.onChange(evt.target.value) }) })] }));
+    }
+}
+//# sourceMappingURL=sliderLineComponent.js.map

package/lines/sliderLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliderLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/sliderLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { Tools } from \"core/Misc/tools\";\r\nimport { FloatLineComponent } from \"./floatLineComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface ISliderLineComponentProps {\r\n    label: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    minimum: number;\r\n    maximum: number;\r\n    step: number;\r\n    directValue?: number;\r\n    useEuler?: boolean;\r\n    onChange?: (value: number) => void;\r\n    onInput?: (value: number) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    decimalCount?: number;\r\n    margin?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    lockObject: LockObject;\r\n    unit?: React.ReactNode;\r\n}\r\n\r\nexport class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {\r\n    private _localChange = false;\r\n    constructor(props: ISliderLineComponentProps) {\r\n        super(props);\r\n\r\n        if (this.props.directValue !== undefined) {\r\n            this.state = {\r\n                value: this.props.directValue,\r\n            };\r\n        } else {\r\n            let value = this.props.target![this.props.propertyName!];\r\n\r\n            if (value === undefined) {\r\n                value = this.props.maximum;\r\n            }\r\n            this.state = { value: value };\r\n        }\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: { value: number }) {\r\n        if (nextProps.directValue !== undefined) {\r\n            nextState.value = nextProps.directValue;\r\n            return true;\r\n        }\r\n\r\n        let currentState = nextProps.target![nextProps.propertyName!];\r\n        if (currentState === undefined) {\r\n            currentState = nextProps.maximum;\r\n        }\r\n\r\n        if (currentState !== nextState.value || this._localChange || nextProps.maximum !== this.props.maximum || nextProps.minimum !== this.props.minimum) {\r\n            nextState.value = currentState;\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.unit !== this.props.unit) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    onChange(newValueString: any) {\r\n        if (newValueString === \"—\") return;\r\n        this._localChange = true;\r\n        let newValue = parseFloat(newValueString);\r\n\r\n        if (this.props.useEuler) {\r\n            newValue = Tools.ToRadians(newValue);\r\n        }\r\n\r\n        if (this.props.target) {\r\n            if (this.props.onPropertyChangedObservable) {\r\n                this.props.onPropertyChangedObservable.notifyObservers({\r\n                    object: this.props.target,\r\n                    property: this.props.propertyName!,\r\n                    value: newValue,\r\n                    initialValue: this.state.value,\r\n                });\r\n            }\r\n\r\n            this.props.target[this.props.propertyName!] = newValue;\r\n        }\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n        }\r\n\r\n        this.setState({ value: newValue });\r\n    }\r\n\r\n    onInput(newValueString: any) {\r\n        const newValue = parseFloat(newValueString);\r\n        if (this.props.onInput) {\r\n            this.props.onInput(newValue);\r\n        }\r\n    }\r\n\r\n    prepareDataToRead(value: number) {\r\n        if (value === null) {\r\n            value = 0;\r\n        }\r\n\r\n        if (this.props.useEuler) {\r\n            return Tools.ToDegrees(value);\r\n        }\r\n\r\n        return value;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"sliderLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {(!this.props.icon || this.props.label != \"\") && (\r\n                    <div className={this.props.margin ? \"label withMargins\" : \"label\"} title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                <FloatLineComponent\r\n                    lockObject={this.props.lockObject}\r\n                    isInteger={this.props.decimalCount === 0}\r\n                    smallUI={true}\r\n                    label=\"\"\r\n                    target={this.state}\r\n                    digits={this.props.decimalCount === undefined ? 4 : this.props.decimalCount}\r\n                    propertyName=\"value\"\r\n                    min={this.props.minimum}\r\n                    max={this.props.maximum}\r\n                    onEnter={() => {\r\n                        const changed = this.prepareDataToRead(this.state.value);\r\n                        this.onChange(changed);\r\n                    }}\r\n                    onChange={() => {\r\n                        const changed = this.prepareDataToRead(this.state.value);\r\n                        this.onChange(changed);\r\n                    }}\r\n                    onPropertyChangedObservable={this.props.onPropertyChangedObservable}\r\n                    unit={this.props.unit}\r\n                />\r\n                <div className=\"slider\">\r\n                    <input\r\n                        className=\"range\"\r\n                        type=\"range\"\r\n                        step={this.props.step}\r\n                        min={this.prepareDataToRead(this.props.minimum)}\r\n                        max={this.prepareDataToRead(this.props.maximum)}\r\n                        value={this.prepareDataToRead(this.state.value)}\r\n                        onInput={(evt) => this.onInput((evt.target as HTMLInputElement).value)}\r\n                        onChange={(evt) => this.onChange(evt.target.value)}\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/targetsProxy.d.ts

@@ -0,0 +1,11 @@
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+export declare const conflictingValuesPlaceholder = "\u2014";
+/**
+ *
+ * @param targets a list of selected targets
+ * @param onPropertyChangedObservable
+ * @param getProperty
+ * @returns a proxy object that can be passed as a target into the input
+ */
+export declare function makeTargetsProxy<Type>(targets: Type[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>, getProperty?: (target: Type, property: keyof Type) => any): any;

package/lines/targetsProxy.js

@@ -0,0 +1,43 @@
+export const conflictingValuesPlaceholder = "—";
+/**
+ *
+ * @param targets a list of selected targets
+ * @param onPropertyChangedObservable
+ * @param getProperty
+ * @returns a proxy object that can be passed as a target into the input
+ */
+export function makeTargetsProxy(targets, onPropertyChangedObservable, getProperty = (target, property) => target[property]) {
+    return new Proxy({}, {
+        get(_, name) {
+            const property = name;
+            if (targets.length === 0)
+                return conflictingValuesPlaceholder;
+            const firstValue = getProperty(targets[0], property);
+            for (const target of targets) {
+                if (getProperty(target, property) !== firstValue) {
+                    return conflictingValuesPlaceholder;
+                }
+            }
+            return firstValue;
+        },
+        set(_, name, value) {
+            if (value === "—")
+                return true;
+            const property = name;
+            for (const target of targets) {
+                const initialValue = target[property];
+                target[property] = value;
+                if (onPropertyChangedObservable) {
+                    onPropertyChangedObservable.notifyObservers({
+                        object: target,
+                        property: name,
+                        value: target[property],
+                        initialValue,
+                    });
+                }
+            }
+            return true;
+        },
+    });
+}
+//# sourceMappingURL=targetsProxy.js.map

package/lines/targetsProxy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"targetsProxy.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/targetsProxy.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAC5B,OAAe,EACf,2BAA8D,EAC9D,cAA2D,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC;IAEjG,OAAO,IAAI,KAAK,CACZ,EAAE,EACF;QACI,GAAG,CAAC,CAAC,EAAE,IAAI;YACP,MAAM,QAAQ,GAAG,IAAkB,CAAC;YACpC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO,4BAA4B,CAAC;YAC9D,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;YACrD,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;gBAC1B,IAAI,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,KAAK,UAAU,EAAE;oBAC9C,OAAO,4BAA4B,CAAC;iBACvC;aACJ;YACD,OAAO,UAAU,CAAC;QACtB,CAAC;QACD,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK;YACd,IAAI,KAAK,KAAK,GAAG;gBAAE,OAAO,IAAI,CAAC;YAC/B,MAAM,QAAQ,GAAG,IAAkB,CAAC;YACpC,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;gBAC1B,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;gBACtC,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;gBACzB,IAAI,2BAA2B,EAAE;oBAC7B,2BAA2B,CAAC,eAAe,CAAC;wBACxC,MAAM,EAAE,MAAM;wBACd,QAAQ,EAAE,IAAc;wBACxB,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;wBACvB,YAAY;qBACf,CAAC,CAAC;iBACN;aACJ;YACD,OAAO,IAAI,CAAC;QAChB,CAAC;KACJ,CACG,CAAC;AACb,CAAC","sourcesContent":["import type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\n\r\nexport const conflictingValuesPlaceholder = \"—\";\r\n\r\n/**\r\n *\r\n * @param targets a list of selected targets\r\n * @param onPropertyChangedObservable\r\n * @param getProperty\r\n * @returns a proxy object that can be passed as a target into the input\r\n */\r\nexport function makeTargetsProxy<Type>(\r\n    targets: Type[],\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>,\r\n    getProperty: (target: Type, property: keyof Type) => any = (target, property) => target[property]\r\n) {\r\n    return new Proxy(\r\n        {},\r\n        {\r\n            get(_, name) {\r\n                const property = name as keyof Type;\r\n                if (targets.length === 0) return conflictingValuesPlaceholder;\r\n                const firstValue = getProperty(targets[0], property);\r\n                for (const target of targets) {\r\n                    if (getProperty(target, property) !== firstValue) {\r\n                        return conflictingValuesPlaceholder;\r\n                    }\r\n                }\r\n                return firstValue;\r\n            },\r\n            set(_, name, value) {\r\n                if (value === \"—\") return true;\r\n                const property = name as keyof Type;\r\n                for (const target of targets) {\r\n                    const initialValue = target[property];\r\n                    target[property] = value;\r\n                    if (onPropertyChangedObservable) {\r\n                        onPropertyChangedObservable.notifyObservers({\r\n                            object: target,\r\n                            property: name as string,\r\n                            value: target[property],\r\n                            initialValue,\r\n                        });\r\n                    }\r\n                }\r\n                return true;\r\n            },\r\n        }\r\n    ) as any;\r\n}\r\n"]}

package/lines/textInputLineComponent.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface ITextInputLineComponentProps {
+    label?: string;
+    lockObject?: LockObject;
+    target?: any;
+    propertyName?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    icon?: string;
+    iconLabel?: string;
+    noUnderline?: boolean;
+    numbersOnly?: boolean;
+    delayInput?: boolean;
+    arrows?: boolean;
+    arrowsIncrement?: (amount: number) => void;
+    step?: number;
+    numeric?: boolean;
+    roundValues?: boolean;
+    min?: number;
+    max?: number;
+    placeholder?: string;
+    unit?: React.ReactNode;
+    validator?: (value: string) => boolean;
+    multilines?: boolean;
+}
+export declare class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
+    value: string;
+    dragging: boolean;
+}> {
+    private _localChange;
+    constructor(props: ITextInputLineComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
+        value: string;
+        dragging: boolean;
+    }): boolean;
+    raiseOnPropertyChanged(newValue: string, previousValue: string): void;
+    getCurrentNumericValue(value: string): number;
+    updateValue(value: string, valueToValidate?: string): void;
+    incrementValue(amount: number): void;
+    onKeyDown(event: React.KeyboardEvent): void;
+    render(): JSX.Element;
+}