@babylonjs/gui 9.12.1 → 9.14.0

package/2D/controls/toggleButton.pure.js

@@ -0,0 +1,240 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Rectangle } from "./rectangle.pure.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+/**
+ * Class used to create toggle buttons
+ * @since 5.0.0
+ */
+export class ToggleButton extends Rectangle {
+    /** Gets or sets group name this toggle button belongs to */
+    get group() {
+        return this._group;
+    }
+    set group(value) {
+        if (this._group === value) {
+            return;
+        }
+        this._group = value;
+    }
+    /** Gets or sets a boolean indicating if the toggle button is active or not */
+    get isActive() {
+        return this._isActive;
+    }
+    set isActive(value) {
+        // Function modeled after radioButton.ts
+        if (this._isActive === value) {
+            return;
+        }
+        this._isActive = value;
+        // Update the visual state based on the new value
+        if (this._isActive) {
+            this.toActiveAnimation?.();
+        }
+        else {
+            this.toInactiveAnimation?.();
+        }
+        this._markAsDirty();
+        this.onIsActiveChangedObservable.notifyObservers(value);
+        if (this._isActive && this._host && this._group) {
+            // A toggle button in a group can only have 1 active element at a given time.
+            // If this toggle button has a group, set other toggle buttons in the group to inactive.
+            this._host.executeOnAllControls((control) => {
+                // Check for control type ToggleButton
+                if (control.typeName === "ToggleButton") {
+                    // Don't do anything to this toggle button
+                    if (control === this) {
+                        return;
+                    }
+                    const childToggle = control;
+                    // If toggle button is in same group, set isActive to false
+                    if (childToggle.group === this.group) {
+                        childToggle.isActive = false;
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * Creates a new ToggleButton
+     * @param name defines the control name
+     * @param group defines the toggle group this toggle belongs to
+     */
+    constructor(name, group) {
+        super(name);
+        this.name = name;
+        /** Observable raised when isActive is changed */
+        this.onIsActiveChangedObservable = new Observable();
+        /**
+         * Gets or sets a boolean indicating that the toggle button will let internal controls handle picking instead of doing it directly using its bounding info
+         */
+        this.delegatePickingToChildren = false;
+        this._isActive = false;
+        this.group = group ?? "";
+        this.thickness = 0;
+        this.isPointerBlocker = true;
+        let alphaStore = null;
+        this.toActiveAnimation = () => {
+            this.thickness = 1;
+        };
+        this.toInactiveAnimation = () => {
+            this.thickness = 0;
+        };
+        this.pointerEnterActiveAnimation = () => {
+            alphaStore = this.alpha;
+            this.alpha -= 0.1;
+        };
+        this.pointerOutActiveAnimation = () => {
+            if (alphaStore !== null) {
+                this.alpha = alphaStore;
+            }
+        };
+        this.pointerDownActiveAnimation = () => {
+            this.scaleX -= 0.05;
+            this.scaleY -= 0.05;
+        };
+        this.pointerUpActiveAnimation = () => {
+            this.scaleX += 0.05;
+            this.scaleY += 0.05;
+        };
+        this.pointerEnterInactiveAnimation = () => {
+            alphaStore = this.alpha;
+            this.alpha -= 0.1;
+        };
+        this.pointerOutInactiveAnimation = () => {
+            if (alphaStore !== null) {
+                this.alpha = alphaStore;
+            }
+        };
+        this.pointerDownInactiveAnimation = () => {
+            this.scaleX -= 0.05;
+            this.scaleY -= 0.05;
+        };
+        this.pointerUpInactiveAnimation = () => {
+            this.scaleX += 0.05;
+            this.scaleY += 0.05;
+        };
+    }
+    _getTypeName() {
+        return "ToggleButton";
+    }
+    // While being a container, the toggle button behaves like a control.
+    /**
+     * @internal
+     */
+    _processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
+        if (!this._isEnabled || !this.isHitTestVisible || !this.isVisible || this.notRenderable) {
+            return false;
+        }
+        if (!super.contains(x, y)) {
+            return false;
+        }
+        if (this.delegatePickingToChildren) {
+            let contains = false;
+            for (let index = this._children.length - 1; index >= 0; index--) {
+                const child = this._children[index];
+                if (child.isEnabled && child.isHitTestVisible && child.isVisible && !child.notRenderable && child.contains(x, y)) {
+                    contains = true;
+                    break;
+                }
+            }
+            if (!contains) {
+                return false;
+            }
+        }
+        this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
+        return true;
+    }
+    /**
+     * @internal
+     */
+    _onPointerEnter(target, pi) {
+        if (!super._onPointerEnter(target, pi)) {
+            return false;
+        }
+        if (this.isReadOnly) {
+            return true;
+        }
+        if (this._isActive) {
+            if (this.pointerEnterActiveAnimation) {
+                this.pointerEnterActiveAnimation();
+            }
+        }
+        else {
+            if (this.pointerEnterInactiveAnimation) {
+                this.pointerEnterInactiveAnimation();
+            }
+        }
+        return true;
+    }
+    /**
+     * @internal
+     */
+    _onPointerOut(target, pi, force = false) {
+        if (!this.isReadOnly) {
+            if (this._isActive) {
+                if (this.pointerOutActiveAnimation) {
+                    this.pointerOutActiveAnimation();
+                }
+            }
+            else {
+                if (this.pointerOutInactiveAnimation) {
+                    this.pointerOutInactiveAnimation();
+                }
+            }
+        }
+        super._onPointerOut(target, pi, force);
+    }
+    /**
+     * @internal
+     */
+    _onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
+        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {
+            return false;
+        }
+        if (this.isReadOnly) {
+            return true;
+        }
+        if (this._isActive) {
+            if (this.pointerDownActiveAnimation) {
+                this.pointerDownActiveAnimation();
+            }
+        }
+        else {
+            if (this.pointerDownInactiveAnimation) {
+                this.pointerDownInactiveAnimation();
+            }
+        }
+        return true;
+    }
+    /**
+     * @internal
+     */
+    _onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
+        if (!this.isReadOnly) {
+            if (this._isActive) {
+                if (this.pointerUpActiveAnimation) {
+                    this.pointerUpActiveAnimation();
+                }
+            }
+            else {
+                if (this.pointerUpInactiveAnimation) {
+                    this.pointerUpInactiveAnimation();
+                }
+            }
+        }
+        super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi);
+    }
+}
+let _Registered = false;
+/**
+ * Registers the ToggleButton class with the type store for serialization support.
+ * Safe to call multiple times; only the first call has an effect.
+ */
+export function RegisterToggleButton() {
+    if (_Registered) {
+        return;
+    }
+    _Registered = true;
+    RegisterClass("BABYLON.GUI.ToggleButton", ToggleButton);
+}
+//# sourceMappingURL=toggleButton.pure.js.map

package/2D/controls/toggleButton.pure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleButton.pure.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/toggleButton.pure.ts"],"names":[],"mappings":"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","sourcesContent":["import { type Nullable } from \"core/types\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport { type Vector2 } from \"core/Maths/math.vector.pure\";\r\n\r\nimport { Rectangle } from \"./rectangle.pure\";\r\nimport { type Control } from \"./control.pure\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { type PointerInfoBase } from \"core/Events/pointerEvents\";\r\n\r\n/**\r\n * Class used to create toggle buttons\r\n * @since 5.0.0\r\n */\r\nexport class ToggleButton extends Rectangle {\r\n    /**\r\n     * Function called to generate the toActive animation\r\n     */\r\n    public toActiveAnimation: () => void;\r\n\r\n    /**\r\n     * Function called to generate the toInactive animation\r\n     */\r\n    public toInactiveAnimation: () => void;\r\n\r\n    /**\r\n     * Function called to generate a pointer enter animation when the toggle button is active.\r\n     */\r\n    public pointerEnterActiveAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer out animation when the toggle button is active.\r\n     */\r\n    public pointerOutActiveAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer down animation when the toggle button is active.\r\n     */\r\n    public pointerDownActiveAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer up animation when the toggle button is active.\r\n     */\r\n    public pointerUpActiveAnimation: () => void;\r\n\r\n    /**\r\n     * Function called to generate a pointer enter animation when the toggle button is inactive.\r\n     */\r\n    public pointerEnterInactiveAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer out animation when the toggle button is inactive.\r\n     */\r\n    public pointerOutInactiveAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer down animation when the toggle button is inactive.\r\n     */\r\n    public pointerDownInactiveAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer up animation when the toggle button is inactive.\r\n     */\r\n    public pointerUpInactiveAnimation: () => void;\r\n\r\n    /** Observable raised when isActive is changed */\r\n    public onIsActiveChangedObservable = new Observable<boolean>();\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating that the toggle button will let internal controls handle picking instead of doing it directly using its bounding info\r\n     */\r\n    public override delegatePickingToChildren = false;\r\n\r\n    private _group: string;\r\n    /** Gets or sets group name this toggle button belongs to */\r\n    public get group(): string {\r\n        return this._group;\r\n    }\r\n    public set group(value: string) {\r\n        if (this._group === value) {\r\n            return;\r\n        }\r\n\r\n        this._group = value;\r\n    }\r\n\r\n    private _isActive = false;\r\n    /** Gets or sets a boolean indicating if the toggle button is active or not */\r\n    public get isActive(): boolean {\r\n        return this._isActive;\r\n    }\r\n    public set isActive(value: boolean) {\r\n        // Function modeled after radioButton.ts\r\n        if (this._isActive === value) {\r\n            return;\r\n        }\r\n\r\n        this._isActive = value;\r\n\r\n        // Update the visual state based on the new value\r\n        if (this._isActive) {\r\n            this.toActiveAnimation?.();\r\n        } else {\r\n            this.toInactiveAnimation?.();\r\n        }\r\n\r\n        this._markAsDirty();\r\n\r\n        this.onIsActiveChangedObservable.notifyObservers(value);\r\n\r\n        if (this._isActive && this._host && this._group) {\r\n            // A toggle button in a group can only have 1 active element at a given time.\r\n            // If this toggle button has a group, set other toggle buttons in the group to inactive.\r\n            this._host.executeOnAllControls((control) => {\r\n                // Check for control type ToggleButton\r\n                if (control.typeName === \"ToggleButton\") {\r\n                    // Don't do anything to this toggle button\r\n                    if (control === this) {\r\n                        return;\r\n                    }\r\n\r\n                    const childToggle = <ToggleButton>control;\r\n                    // If toggle button is in same group, set isActive to false\r\n                    if (childToggle.group === this.group) {\r\n                        childToggle.isActive = false;\r\n                    }\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Creates a new ToggleButton\r\n     * @param name defines the control name\r\n     * @param group defines the toggle group this toggle belongs to\r\n     */\r\n    constructor(\r\n        public override name?: string,\r\n        group?: string\r\n    ) {\r\n        super(name);\r\n        this.group = group ?? \"\";\r\n\r\n        this.thickness = 0;\r\n        this.isPointerBlocker = true;\r\n\r\n        let alphaStore: Nullable<number> = null;\r\n\r\n        this.toActiveAnimation = () => {\r\n            this.thickness = 1;\r\n        };\r\n        this.toInactiveAnimation = () => {\r\n            this.thickness = 0;\r\n        };\r\n\r\n        this.pointerEnterActiveAnimation = () => {\r\n            alphaStore = this.alpha;\r\n            this.alpha -= 0.1;\r\n        };\r\n\r\n        this.pointerOutActiveAnimation = () => {\r\n            if (alphaStore !== null) {\r\n                this.alpha = alphaStore;\r\n            }\r\n        };\r\n\r\n        this.pointerDownActiveAnimation = () => {\r\n            this.scaleX -= 0.05;\r\n            this.scaleY -= 0.05;\r\n        };\r\n\r\n        this.pointerUpActiveAnimation = () => {\r\n            this.scaleX += 0.05;\r\n            this.scaleY += 0.05;\r\n        };\r\n\r\n        this.pointerEnterInactiveAnimation = () => {\r\n            alphaStore = this.alpha;\r\n            this.alpha -= 0.1;\r\n        };\r\n\r\n        this.pointerOutInactiveAnimation = () => {\r\n            if (alphaStore !== null) {\r\n                this.alpha = alphaStore;\r\n            }\r\n        };\r\n\r\n        this.pointerDownInactiveAnimation = () => {\r\n            this.scaleX -= 0.05;\r\n            this.scaleY -= 0.05;\r\n        };\r\n\r\n        this.pointerUpInactiveAnimation = () => {\r\n            this.scaleX += 0.05;\r\n            this.scaleY += 0.05;\r\n        };\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"ToggleButton\";\r\n    }\r\n\r\n    // While being a container, the toggle button behaves like a control.\r\n    /**\r\n     * @internal\r\n     */\r\n    public override _processPicking(x: number, y: number, pi: PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean {\r\n        if (!this._isEnabled || !this.isHitTestVisible || !this.isVisible || this.notRenderable) {\r\n            return false;\r\n        }\r\n\r\n        if (!super.contains(x, y)) {\r\n            return false;\r\n        }\r\n\r\n        if (this.delegatePickingToChildren) {\r\n            let contains = false;\r\n            for (let index = this._children.length - 1; index >= 0; index--) {\r\n                const child = this._children[index];\r\n                if (child.isEnabled && child.isHitTestVisible && child.isVisible && !child.notRenderable && child.contains(x, y)) {\r\n                    contains = true;\r\n                    break;\r\n                }\r\n            }\r\n\r\n            if (!contains) {\r\n                return false;\r\n            }\r\n        }\r\n\r\n        this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public override _onPointerEnter(target: Control, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerEnter(target, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (this.isReadOnly) {\r\n            return true;\r\n        }\r\n\r\n        if (this._isActive) {\r\n            if (this.pointerEnterActiveAnimation) {\r\n                this.pointerEnterActiveAnimation();\r\n            }\r\n        } else {\r\n            if (this.pointerEnterInactiveAnimation) {\r\n                this.pointerEnterInactiveAnimation();\r\n            }\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public override _onPointerOut(target: Control, pi: PointerInfoBase, force = false): void {\r\n        if (!this.isReadOnly) {\r\n            if (this._isActive) {\r\n                if (this.pointerOutActiveAnimation) {\r\n                    this.pointerOutActiveAnimation();\r\n                }\r\n            } else {\r\n                if (this.pointerOutInactiveAnimation) {\r\n                    this.pointerOutInactiveAnimation();\r\n                }\r\n            }\r\n        }\r\n\r\n        super._onPointerOut(target, pi, force);\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public override _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (this.isReadOnly) {\r\n            return true;\r\n        }\r\n\r\n        if (this._isActive) {\r\n            if (this.pointerDownActiveAnimation) {\r\n                this.pointerDownActiveAnimation();\r\n            }\r\n        } else {\r\n            if (this.pointerDownInactiveAnimation) {\r\n                this.pointerDownInactiveAnimation();\r\n            }\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public override _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi: PointerInfoBase): void {\r\n        if (!this.isReadOnly) {\r\n            if (this._isActive) {\r\n                if (this.pointerUpActiveAnimation) {\r\n                    this.pointerUpActiveAnimation();\r\n                }\r\n            } else {\r\n                if (this.pointerUpInactiveAnimation) {\r\n                    this.pointerUpInactiveAnimation();\r\n                }\r\n            }\r\n        }\r\n\r\n        super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi);\r\n    }\r\n}\r\n\r\nlet _Registered = false;\r\n/**\r\n * Registers the ToggleButton class with the type store for serialization support.\r\n * Safe to call multiple times; only the first call has an effect.\r\n */\r\nexport function RegisterToggleButton(): void {\r\n    if (_Registered) {\r\n        return;\r\n    }\r\n    _Registered = true;\r\n\r\n    RegisterClass(\"BABYLON.GUI.ToggleButton\", ToggleButton);\r\n}\r\n"]}

package/2D/controls/virtualKeyboard.d.ts

@@ -1,102 +1,5 @@
-import { type Nullable } from "@babylonjs/core/types.js";
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import { StackPanel } from "./stackPanel.js";
-import { type InputText } from "./inputText.js";
-import { type AdvancedDynamicTexture } from "../advancedDynamicTexture.js";
-import { InputTextArea } from "./inputTextArea.js";
 /**
- * Class used to store key control properties
+ * Re-exports the pure implementation and applies the runtime registration side effect.
+ * Import "./virtualKeyboard.pure" for tree-shakeable, side-effect-free usage.
  */
-export declare class KeyPropertySet {
-    /** Width */
-    width?: string;
-    /** Height */
-    height?: string;
-    /** Left padding */
-    paddingLeft?: string;
-    /** Right padding */
-    paddingRight?: string;
-    /** Top padding */
-    paddingTop?: string;
-    /** Bottom padding */
-    paddingBottom?: string;
-    /** Foreground color */
-    color?: string;
-    /** Background color */
-    background?: string;
-}
-/**
- * Class used to create virtual keyboard
- */
-export declare class VirtualKeyboard extends StackPanel {
-    /** Observable raised when a key is pressed */
-    onKeyPressObservable: Observable<string>;
-    /** Gets or sets default key button width */
-    defaultButtonWidth: string;
-    /** Gets or sets default key button height */
-    defaultButtonHeight: string;
-    /** Gets or sets default key button left padding */
-    defaultButtonPaddingLeft: string;
-    /** Gets or sets default key button right padding */
-    defaultButtonPaddingRight: string;
-    /** Gets or sets default key button top padding */
-    defaultButtonPaddingTop: string;
-    /** Gets or sets default key button bottom padding */
-    defaultButtonPaddingBottom: string;
-    /** Gets or sets default key button foreground color */
-    defaultButtonColor: string;
-    /** Gets or sets default key button background color */
-    defaultButtonBackground: string;
-    /** Gets or sets shift button foreground color */
-    shiftButtonColor: string;
-    /** Gets or sets shift button thickness*/
-    selectedShiftThickness: number;
-    /** Gets shift key state */
-    shiftState: number;
-    protected _getTypeName(): string;
-    private _createKey;
-    /**
-     * Adds a new row of keys
-     * @param keys defines the list of keys to add
-     * @param propertySets defines the associated property sets
-     */
-    addKeysRow(keys: Array<string>, propertySets?: Array<KeyPropertySet>): void;
-    /**
-     * Set the shift key to a specific state
-     * @param shiftState defines the new shift state
-     */
-    applyShiftState(shiftState: number): void;
-    private _currentlyConnectedInputText;
-    private _connectedInputTexts;
-    private _onKeyPressObserver;
-    /** Gets the input text control currently attached to the keyboard */
-    get connectedInputText(): Nullable<InputText | InputTextArea>;
-    /**
-     * Connects the keyboard with an input text control
-     *
-     * @param input defines the target control
-     */
-    connect(input: InputText): void;
-    /**
-     * Disconnects the keyboard from connected InputText controls
-     *
-     * @param input optionally defines a target control, otherwise all are disconnected
-     */
-    disconnect(input?: InputText): void;
-    private _removeConnectedInputObservables;
-    /**
-     * Release all resources
-     */
-    dispose(): void;
-    /**
-     * Creates a new keyboard using a default layout
-     *
-     * @param name defines control name
-     * @returns a new VirtualKeyboard
-     */
-    static CreateDefaultLayout(name?: string): VirtualKeyboard;
-    /**
-     * @internal
-     */
-    _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture): void;
-}
+export * from "./virtualKeyboard.pure.js";

package/2D/controls/virtualKeyboard.js

@@ -1,275 +1,8 @@
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import { StackPanel } from "./stackPanel.js";
-import { Button } from "./button.js";
-import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
-import { InputTextArea } from "./inputTextArea.js";
 /**
- * Class used to store key control properties
+ * Re-exports the pure implementation and applies the runtime registration side effect.
+ * Import "./virtualKeyboard.pure" for tree-shakeable, side-effect-free usage.
  */
-export class KeyPropertySet {
-}
-/**
- * Class used to create virtual keyboard
- */
-export class VirtualKeyboard extends StackPanel {
-    constructor() {
-        super(...arguments);
-        /** Observable raised when a key is pressed */
-        this.onKeyPressObservable = new Observable();
-        /** Gets or sets default key button width */
-        this.defaultButtonWidth = "40px";
-        /** Gets or sets default key button height */
-        this.defaultButtonHeight = "40px";
-        /** Gets or sets default key button left padding */
-        this.defaultButtonPaddingLeft = "2px";
-        /** Gets or sets default key button right padding */
-        this.defaultButtonPaddingRight = "2px";
-        /** Gets or sets default key button top padding */
-        this.defaultButtonPaddingTop = "2px";
-        /** Gets or sets default key button bottom padding */
-        this.defaultButtonPaddingBottom = "2px";
-        /** Gets or sets default key button foreground color */
-        this.defaultButtonColor = "#DDD";
-        /** Gets or sets default key button background color */
-        this.defaultButtonBackground = "#070707";
-        /** Gets or sets shift button foreground color */
-        this.shiftButtonColor = "#7799FF";
-        /** Gets or sets shift button thickness*/
-        this.selectedShiftThickness = 1;
-        /** Gets shift key state */
-        this.shiftState = 0;
-        this._currentlyConnectedInputText = null;
-        this._connectedInputTexts = [];
-        this._onKeyPressObserver = null;
-    }
-    _getTypeName() {
-        return "VirtualKeyboard";
-    }
-    _createKey(key, propertySet) {
-        const button = Button.CreateSimpleButton(key, key);
-        button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth;
-        button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight;
-        button.color = propertySet && propertySet.color ? propertySet.color : this.defaultButtonColor;
-        button.background = propertySet && propertySet.background ? propertySet.background : this.defaultButtonBackground;
-        button.paddingLeft = propertySet && propertySet.paddingLeft ? propertySet.paddingLeft : this.defaultButtonPaddingLeft;
-        button.paddingRight = propertySet && propertySet.paddingRight ? propertySet.paddingRight : this.defaultButtonPaddingRight;
-        button.paddingTop = propertySet && propertySet.paddingTop ? propertySet.paddingTop : this.defaultButtonPaddingTop;
-        button.paddingBottom = propertySet && propertySet.paddingBottom ? propertySet.paddingBottom : this.defaultButtonPaddingBottom;
-        button.thickness = 0;
-        button.isFocusInvisible = true;
-        button.shadowColor = this.shadowColor;
-        button.shadowBlur = this.shadowBlur;
-        button.shadowOffsetX = this.shadowOffsetX;
-        button.shadowOffsetY = this.shadowOffsetY;
-        button.onPointerUpObservable.add(() => {
-            this.onKeyPressObservable.notifyObservers(key);
-        });
-        return button;
-    }
-    /**
-     * Adds a new row of keys
-     * @param keys defines the list of keys to add
-     * @param propertySets defines the associated property sets
-     */
-    addKeysRow(keys, propertySets) {
-        const panel = new StackPanel();
-        panel.isVertical = false;
-        panel.isFocusInvisible = true;
-        let maxKey = null;
-        for (let i = 0; i < keys.length; i++) {
-            let properties = null;
-            if (propertySets && propertySets.length === keys.length) {
-                properties = propertySets[i];
-            }
-            const key = this._createKey(keys[i], properties);
-            if (!maxKey || key.heightInPixels > maxKey.heightInPixels) {
-                maxKey = key;
-            }
-            panel.addControl(key);
-        }
-        panel.height = maxKey ? maxKey.height : this.defaultButtonHeight;
-        this.addControl(panel);
-    }
-    /**
-     * Set the shift key to a specific state
-     * @param shiftState defines the new shift state
-     */
-    applyShiftState(shiftState) {
-        if (!this.children) {
-            return;
-        }
-        for (let i = 0; i < this.children.length; i++) {
-            const row = this.children[i];
-            if (!row || !row.children) {
-                continue;
-            }
-            const rowContainer = row;
-            for (let j = 0; j < rowContainer.children.length; j++) {
-                const button = rowContainer.children[j];
-                if (!button || !button.children[0]) {
-                    continue;
-                }
-                const buttonTblock = button.children[0];
-                if (buttonTblock.text === "\u21E7") {
-                    button.color = shiftState ? this.shiftButtonColor : this.defaultButtonColor;
-                    button.thickness = shiftState > 1 ? this.selectedShiftThickness : 0;
-                }
-                buttonTblock.text = shiftState > 0 ? buttonTblock.text.toUpperCase() : buttonTblock.text.toLowerCase();
-            }
-        }
-    }
-    /** Gets the input text control currently attached to the keyboard */
-    get connectedInputText() {
-        return this._currentlyConnectedInputText;
-    }
-    /**
-     * Connects the keyboard with an input text control
-     *
-     * @param input defines the target control
-     */
-    connect(input) {
-        const inputTextAlreadyConnected = this._connectedInputTexts.some((a) => a.input === input);
-        if (inputTextAlreadyConnected) {
-            return;
-        }
-        if (this._onKeyPressObserver === null) {
-            this._onKeyPressObserver = this.onKeyPressObservable.add((key) => {
-                if (!this._currentlyConnectedInputText) {
-                    return;
-                }
-                this._currentlyConnectedInputText._host.focusedControl = this._currentlyConnectedInputText;
-                switch (key) {
-                    case "\u21E7":
-                        this.shiftState++;
-                        if (this.shiftState > 2) {
-                            this.shiftState = 0;
-                        }
-                        this.applyShiftState(this.shiftState);
-                        return;
-                    case "\u2190":
-                        if (this._currentlyConnectedInputText instanceof InputTextArea) {
-                            this._currentlyConnectedInputText.alternativeProcessKey("Backspace");
-                        }
-                        else {
-                            this._currentlyConnectedInputText.processKey(8);
-                        }
-                        return;
-                    case "\u21B5":
-                        if (this._currentlyConnectedInputText instanceof InputTextArea) {
-                            this._currentlyConnectedInputText.alternativeProcessKey("Enter");
-                        }
-                        else {
-                            this._currentlyConnectedInputText.processKey(13);
-                        }
-                        return;
-                }
-                if (this._currentlyConnectedInputText instanceof InputTextArea) {
-                    this._currentlyConnectedInputText.alternativeProcessKey("", this.shiftState ? key.toUpperCase() : key);
-                }
-                else {
-                    this._currentlyConnectedInputText.processKey(-1, this.shiftState ? key.toUpperCase() : key);
-                }
-                if (this.shiftState === 1) {
-                    this.shiftState = 0;
-                    this.applyShiftState(this.shiftState);
-                }
-            });
-        }
-        this.isVisible = false;
-        this._currentlyConnectedInputText = input;
-        input._connectedVirtualKeyboard = this;
-        // Events hooking
-        const onFocusObserver = input.onFocusObservable.add(() => {
-            this._currentlyConnectedInputText = input;
-            input._connectedVirtualKeyboard = this;
-            this.isVisible = true;
-        });
-        const onBlurObserver = input.onBlurObservable.add(() => {
-            input._connectedVirtualKeyboard = null;
-            this._currentlyConnectedInputText = null;
-            this.isVisible = false;
-        });
-        this._connectedInputTexts.push({
-            input,
-            onBlurObserver,
-            onFocusObserver,
-        });
-    }
-    /**
-     * Disconnects the keyboard from connected InputText controls
-     *
-     * @param input optionally defines a target control, otherwise all are disconnected
-     */
-    disconnect(input) {
-        if (input) {
-            // .find not available on IE
-            const filtered = this._connectedInputTexts.filter((a) => a.input === input);
-            if (filtered.length === 1) {
-                this._removeConnectedInputObservables(filtered[0]);
-                this._connectedInputTexts = this._connectedInputTexts.filter((a) => a.input !== input);
-                if (this._currentlyConnectedInputText === input) {
-                    this._currentlyConnectedInputText = null;
-                }
-            }
-        }
-        else {
-            for (const connectedInputText of this._connectedInputTexts) {
-                this._removeConnectedInputObservables(connectedInputText);
-            }
-            this._connectedInputTexts.length = 0;
-        }
-        if (this._connectedInputTexts.length === 0) {
-            this._currentlyConnectedInputText = null;
-            this.onKeyPressObservable.remove(this._onKeyPressObserver);
-            this._onKeyPressObserver = null;
-        }
-    }
-    _removeConnectedInputObservables(connectedInputText) {
-        connectedInputText.input._connectedVirtualKeyboard = null;
-        connectedInputText.input.onFocusObservable.remove(connectedInputText.onFocusObserver);
-        connectedInputText.input.onBlurObservable.remove(connectedInputText.onBlurObserver);
-    }
-    /**
-     * Release all resources
-     */
-    dispose() {
-        super.dispose();
-        this.disconnect();
-    }
-    // Statics
-    /**
-     * Creates a new keyboard using a default layout
-     *
-     * @param name defines control name
-     * @returns a new VirtualKeyboard
-     */
-    static CreateDefaultLayout(name) {
-        const returnValue = new VirtualKeyboard(name);
-        returnValue.addKeysRow(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "\u2190"]);
-        returnValue.addKeysRow(["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]);
-        returnValue.addKeysRow(["a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "\u21B5"]);
-        returnValue.addKeysRow(["\u21E7", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/"]);
-        returnValue.addKeysRow([" "], [{ width: "200px" }]);
-        return returnValue;
-    }
-    /**
-     * @internal
-     */
-    _parseFromContent(serializedObject, host) {
-        super._parseFromContent(serializedObject, host);
-        for (const row of this.children) {
-            if (row.getClassName() === "StackPanel") {
-                const stackPanel = row;
-                for (const key of stackPanel.children) {
-                    if (key.getClassName() === "Button" && key.name) {
-                        key.onPointerUpObservable.add(() => {
-                            this.onKeyPressObservable.notifyObservers(key.name);
-                        });
-                    }
-                }
-            }
-        }
-    }
-}
-RegisterClass("BABYLON.GUI.VirtualKeyboard", VirtualKeyboard);
+export * from "./virtualKeyboard.pure.js";
+import { RegisterVirtualKeyboard } from "./virtualKeyboard.pure.js";
+RegisterVirtualKeyboard();
 //# sourceMappingURL=virtualKeyboard.js.map