@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/lines/checkBoxLineComponent.js

@@ -1,89 +1,89 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { conflictingValuesPlaceholder } from "./targetsProxy.js";
-import toggleOnIcon_40px from "../imgs/toggleOnIcon_40px.svg";
-import toggleOffIcon_40px from "../imgs/toggleOffIcon_40px.svg";
-import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
-import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
-import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
-const Icons = {
-    size30: {
-        on: toggleOnIcon_30px,
-        mixed: toggleMixedIcon_30px,
-        off: toggleOffIcon_30px,
-    },
-    size40: {
-        on: toggleOnIcon_40px,
-        mixed: "",
-        off: toggleOffIcon_40px,
-    },
-};
-export class CheckBoxLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._localChange = false;
-        if (this.props.isSelected) {
-            this.state = { isSelected: this.props.isSelected(), isConflict: false };
-        }
-        else {
-            this.state = {
-                isSelected: this.props.target[this.props.propertyName] === true,
-                isConflict: this.props.target[this.props.propertyName] === conflictingValuesPlaceholder,
-            };
-        }
-        if (this.props.disabled) {
-            this.state = { ...this.state, isDisabled: this.props.disabled };
-        }
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        let selected;
-        if (nextProps.isSelected) {
-            selected = nextProps.isSelected();
-        }
-        else {
-            selected = nextProps.target[nextProps.propertyName] === true;
-            if (nextProps.target[nextProps.propertyName] === conflictingValuesPlaceholder) {
-                nextState.isConflict = true;
-            }
-        }
-        if (selected !== nextState.isSelected || this._localChange) {
-            nextState.isSelected = selected;
-            this._localChange = false;
-            return true;
-        }
-        if (nextProps.disabled !== nextState.isDisabled) {
-            return true;
-        }
-        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;
-    }
-    onChange() {
-        this._localChange = true;
-        if (this.props.onSelect) {
-            this.props.onSelect(!this.state.isSelected);
-        }
-        else {
-            if (this.props.onPropertyChangedObservable) {
-                this.props.onPropertyChangedObservable.notifyObservers({
-                    object: this.props.target,
-                    property: this.props.propertyName,
-                    value: !this.state.isSelected,
-                    initialValue: this.state.isSelected,
-                });
-            }
-            if (this.props.target && this.props.propertyName) {
-                this.props.target[this.props.propertyName] = !this.state.isSelected;
-            }
-        }
-        if (this.props.onValueChanged) {
-            this.props.onValueChanged();
-        }
-        this.setState({ isSelected: !this.state.isSelected, isConflict: false });
-    }
-    render() {
-        const icons = this.props.large ? Icons.size40 : Icons.size30;
-        const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;
-        return (_jsxs("div", { className: "checkBoxLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && (_jsx("div", { className: "label", title: this.props.iconLabel, children: this.props.label })), this.props.faIcons && (_jsx(FontAwesomeIcon, { className: `cbx ${this.props.disabled ? "disabled" : ""}`, icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: () => !this.props.disabled && this.onChange() })), !this.props.faIcons && (_jsx("div", { className: "checkBox", children: _jsxs("label", { className: `container lbl${this.props.disabled ? " disabled" : ""} ${this.state.isSelected ? "checked" : ""}`, children: [_jsx("input", { type: "checkbox", className: `cbx hidden ${this.state.isConflict ? "conflict" : ""}`, checked: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled }), _jsx("img", { className: "icon", src: icon, alt: this.props.label })] }) }))] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { conflictingValuesPlaceholder } from "./targetsProxy.js";
+import toggleOnIcon_40px from "../imgs/toggleOnIcon_40px.svg";
+import toggleOffIcon_40px from "../imgs/toggleOffIcon_40px.svg";
+import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
+import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
+import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
+const Icons = {
+    size30: {
+        on: toggleOnIcon_30px,
+        mixed: toggleMixedIcon_30px,
+        off: toggleOffIcon_30px,
+    },
+    size40: {
+        on: toggleOnIcon_40px,
+        mixed: "",
+        off: toggleOffIcon_40px,
+    },
+};
+export class CheckBoxLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        if (this.props.isSelected) {
+            this.state = { isSelected: this.props.isSelected(), isConflict: false };
+        }
+        else {
+            this.state = {
+                isSelected: this.props.target[this.props.propertyName] === true,
+                isConflict: this.props.target[this.props.propertyName] === conflictingValuesPlaceholder,
+            };
+        }
+        if (this.props.disabled) {
+            this.state = { ...this.state, isDisabled: this.props.disabled };
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        let selected;
+        if (nextProps.isSelected) {
+            selected = nextProps.isSelected();
+        }
+        else {
+            selected = nextProps.target[nextProps.propertyName] === true;
+            if (nextProps.target[nextProps.propertyName] === conflictingValuesPlaceholder) {
+                nextState.isConflict = true;
+            }
+        }
+        if (selected !== nextState.isSelected || this._localChange) {
+            nextState.isSelected = selected;
+            this._localChange = false;
+            return true;
+        }
+        if (nextProps.disabled !== nextState.isDisabled) {
+            return true;
+        }
+        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;
+    }
+    onChange() {
+        this._localChange = true;
+        if (this.props.onSelect) {
+            this.props.onSelect(!this.state.isSelected);
+        }
+        else {
+            if (this.props.onPropertyChangedObservable) {
+                this.props.onPropertyChangedObservable.notifyObservers({
+                    object: this.props.target,
+                    property: this.props.propertyName,
+                    value: !this.state.isSelected,
+                    initialValue: this.state.isSelected,
+                });
+            }
+            if (this.props.target && this.props.propertyName) {
+                this.props.target[this.props.propertyName] = !this.state.isSelected;
+            }
+        }
+        if (this.props.onValueChanged) {
+            this.props.onValueChanged();
+        }
+        this.setState({ isSelected: !this.state.isSelected, isConflict: false });
+    }
+    render() {
+        const icons = this.props.large ? Icons.size40 : Icons.size30;
+        const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;
+        return (_jsxs("div", { className: "checkBoxLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && (_jsx("div", { className: "label", title: this.props.iconLabel, children: this.props.label })), this.props.faIcons && (_jsx(FontAwesomeIcon, { className: `cbx ${this.props.disabled ? "disabled" : ""}`, icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: () => !this.props.disabled && this.onChange() })), !this.props.faIcons && (_jsx("div", { className: "checkBox", children: _jsxs("label", { className: `container lbl${this.props.disabled ? " disabled" : ""} ${this.state.isSelected ? "checked" : ""}`, children: [_jsx("input", { type: "checkbox", className: `cbx hidden ${this.state.isConflict ? "conflict" : ""}`, checked: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled }), _jsx("img", { className: "icon", src: icon, alt: this.props.label })] }) }))] }));
+    }
+}
 //# sourceMappingURL=checkBoxLineComponent.js.map

package/lines/color3LineComponent.d.ts

@@ -1,18 +1,18 @@
-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 IColor3LineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    isLinear?: boolean;
-    icon?: string;
-    lockObject: LockObject;
-    iconLabel?: string;
-    onChange?: () => void;
-}
-export declare class Color3LineComponent extends React.Component<IColor3LineComponentProps> {
-    render(): JSX.Element;
-}
+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 IColor3LineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    isLinear?: boolean;
+    icon?: string;
+    lockObject: LockObject;
+    iconLabel?: string;
+    onChange?: () => void;
+}
+export declare class Color3LineComponent extends React.Component<IColor3LineComponentProps> {
+    render(): JSX.Element;
+}

package/lines/color3LineComponent.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { ColorLineComponent } from "./colorLineComponent.js";
-export class Color3LineComponent extends React.Component {
-    render() {
-        const props = this.props;
-        return _jsx(ColorLineComponent, { disableAlpha: true, ...props });
-    }
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ColorLineComponent } from "./colorLineComponent.js";
+export class Color3LineComponent extends React.Component {
+    render() {
+        const props = this.props;
+        return _jsx(ColorLineComponent, { disableAlpha: true, ...props });
+    }
+}
 //# sourceMappingURL=color3LineComponent.js.map

package/lines/color4LineComponent.d.ts

@@ -1,18 +1,18 @@
-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 IColor4LineComponentProps {
-    label: string;
-    target?: any;
-    propertyName: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    isLinear?: boolean;
-    icon?: string;
-    iconLabel?: string;
-    lockObject: LockObject;
-}
-export declare class Color4LineComponent extends React.Component<IColor4LineComponentProps> {
-    render(): JSX.Element;
-}
+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 IColor4LineComponentProps {
+    label: string;
+    target?: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+}
+export declare class Color4LineComponent extends React.Component<IColor4LineComponentProps> {
+    render(): JSX.Element;
+}

package/lines/color4LineComponent.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { ColorLineComponent } from "./colorLineComponent.js";
-export class Color4LineComponent extends React.Component {
-    render() {
-        const props = this.props;
-        return _jsx(ColorLineComponent, { ...props });
-    }
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ColorLineComponent } from "./colorLineComponent.js";
+export class Color4LineComponent extends React.Component {
+    render() {
+        const props = this.props;
+        return _jsx(ColorLineComponent, { ...props });
+    }
+}
 //# sourceMappingURL=color4LineComponent.js.map

package/lines/colorLineComponent.d.ts

@@ -1,40 +1,40 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
-export interface IColorLineComponentProps {
-    label: string;
-    target?: any;
-    propertyName: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    isLinear?: boolean;
-    icon?: string;
-    iconLabel?: string;
-    disableAlpha?: boolean;
-    lockObject: LockObject;
-}
-interface IColorLineComponentState {
-    isExpanded: boolean;
-    color: Color4;
-}
-export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
-    constructor(props: IColorLineComponentProps);
-    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
-        children?: React.ReactNode;
-    }>): Color4;
-    setColorFromString(colorString: string): void;
-    setColor(newColor: Color4): void;
-    switchExpandState(): void;
-    updateStateR(value: number): void;
-    updateStateG(value: number): void;
-    updateStateB(value: number): void;
-    updateStateA(value: number): void;
-    copyToClipboard(): void;
-    private _convertToColor;
-    private _toColor3;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Color4 } from "@babylonjs/core/Maths/math.color.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IColorLineComponentProps {
+    label: string;
+    target?: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    disableAlpha?: boolean;
+    lockObject: LockObject;
+}
+interface IColorLineComponentState {
+    isExpanded: boolean;
+    color: Color4;
+}
+export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+    constructor(props: IColorLineComponentProps);
+    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): Color4;
+    setColorFromString(colorString: string): void;
+    setColor(newColor: Color4): void;
+    switchExpandState(): void;
+    updateStateR(value: number): void;
+    updateStateG(value: number): void;
+    updateStateB(value: number): void;
+    updateStateA(value: number): void;
+    copyToClipboard(): void;
+    private _convertToColor;
+    private _toColor3;
+    render(): JSX.Element;
+}
+export {};