@babylonjs/gui 5.20.0 → 5.22.1

package/2D/controls/control.js

@@ -1,4 +1,4 @@
-import { __decorate } from "tslib";
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
 import { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Vector2, Vector3, Matrix } from "@babylonjs/core/Maths/math.vector.js";
 import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
@@ -14,13 +14,13 @@ import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
  * Root class used for all 2D controls
  * @see https://doc.babylonjs.com/how_to/gui#controls
  */
-var Control = /** @class */ (function () {
+export class Control {
     // Functions
     /**
      * Creates a new control
      * @param name defines the name of the control
      */
-    function Control(
+    constructor(
     /** defines the name of the control */
     name) {
         this.name = name;
@@ -195,1006 +195,752 @@ var Control = /** @class */ (function () {
         this._fixedRatioMasterIsWidth = true;
         this._tmpMeasureA = new Measure(0, 0, 0, 0);
     }
-    Object.defineProperty(Control.prototype, "isReadOnly", {
-        /**
-         * Gets or sets a boolean indicating if the control is readonly (default: false).
-         * A readonly control will still raise pointer events but will not react to them
-         */
-        get: function () {
-            return this._isReadOnly;
-        },
-        set: function (value) {
-            this._isReadOnly = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "transformedMeasure", {
-        /**
-         * Gets the transformed measure, that is the bounding box of the control after applying all transformations
-         */
-        get: function () {
-            return this._evaluatedMeasure;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "shadowOffsetX", {
-        /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
-        get: function () {
-            return this._shadowOffsetX;
-        },
-        set: function (value) {
-            if (this._shadowOffsetX === value) {
-                return;
-            }
-            this._shadowOffsetX = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "shadowOffsetY", {
-        /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
-        get: function () {
-            return this._shadowOffsetY;
-        },
-        set: function (value) {
-            if (this._shadowOffsetY === value) {
-                return;
-            }
-            this._shadowOffsetY = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "shadowBlur", {
-        /** Gets or sets a value indicating the amount of blur to use to render the shadow */
-        get: function () {
-            return this._shadowBlur;
-        },
-        set: function (value) {
-            if (this._shadowBlur === value) {
-                return;
-            }
-            this._previousShadowBlur = this._shadowBlur;
-            this._shadowBlur = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "shadowColor", {
-        /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
-        get: function () {
-            return this._shadowColor;
-        },
-        set: function (value) {
-            if (this._shadowColor === value) {
-                return;
-            }
-            this._shadowColor = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "typeName", {
-        // Properties
-        /** Gets the control type name */
-        get: function () {
-            return this._getTypeName();
-        },
-        enumerable: false,
-        configurable: true
-    });
+    /**
+     * Gets or sets a boolean indicating if the control is readonly (default: false).
+     * A readonly control will still raise pointer events but will not react to them
+     */
+    get isReadOnly() {
+        return this._isReadOnly;
+    }
+    set isReadOnly(value) {
+        this._isReadOnly = value;
+    }
+    /**
+     * Gets the transformed measure, that is the bounding box of the control after applying all transformations
+     */
+    get transformedMeasure() {
+        return this._evaluatedMeasure;
+    }
+    /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
+    get shadowOffsetX() {
+        return this._shadowOffsetX;
+    }
+    set shadowOffsetX(value) {
+        if (this._shadowOffsetX === value) {
+            return;
+        }
+        this._shadowOffsetX = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
+    get shadowOffsetY() {
+        return this._shadowOffsetY;
+    }
+    set shadowOffsetY(value) {
+        if (this._shadowOffsetY === value) {
+            return;
+        }
+        this._shadowOffsetY = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a value indicating the amount of blur to use to render the shadow */
+    get shadowBlur() {
+        return this._shadowBlur;
+    }
+    set shadowBlur(value) {
+        if (this._shadowBlur === value) {
+            return;
+        }
+        this._previousShadowBlur = this._shadowBlur;
+        this._shadowBlur = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
+    get shadowColor() {
+        return this._shadowColor;
+    }
+    set shadowColor(value) {
+        if (this._shadowColor === value) {
+            return;
+        }
+        this._shadowColor = value;
+        this._markAsDirty();
+    }
+    // Properties
+    /** Gets the control type name */
+    get typeName() {
+        return this._getTypeName();
+    }
     /**
      * Get the current class name of the control.
      * @returns current class name
      */
-    Control.prototype.getClassName = function () {
+    getClassName() {
         return this._getTypeName();
-    };
-    Object.defineProperty(Control.prototype, "host", {
-        /**
-         * Get the hosting AdvancedDynamicTexture
-         */
-        get: function () {
-            return this._host;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontOffset", {
-        /** Gets or set information about font offsets (used to render and align text) */
-        get: function () {
-            return this._fontOffset;
-        },
-        set: function (offset) {
-            this._fontOffset = offset;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "alpha", {
-        /** Gets or sets alpha value for the control (1 means opaque and 0 means entirely transparent) */
-        get: function () {
-            return this._alpha;
-        },
-        set: function (value) {
-            if (this._alpha === value) {
-                return;
-            }
-            this._alphaSet = true;
-            this._alpha = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "highlightLineWidth", {
-        /**
-         * Gets or sets a number indicating size of stroke we want to highlight the control with (mostly for debugging purpose)
-         */
-        get: function () {
-            return this._highlightLineWidth;
-        },
-        set: function (value) {
-            if (this._highlightLineWidth === value) {
-                return;
-            }
-            this._highlightLineWidth = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "isHighlighted", {
-        /**
-         * Gets or sets a boolean indicating that we want to highlight the control (mostly for debugging purpose)
-         */
-        get: function () {
-            return this._isHighlighted;
-        },
-        set: function (value) {
-            if (this._isHighlighted === value) {
-                return;
-            }
-            this._isHighlighted = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "highlightColor", {
-        /**
-         * Gets or sets a string defining the color to use for highlighting this control
-         */
-        get: function () {
-            return this._highlightColor;
-        },
-        set: function (value) {
-            if (this._highlightColor === value) {
-                return;
-            }
-            this._highlightColor = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "scaleX", {
-        /** Gets or sets a value indicating the scale factor on X axis (1 by default)
-         * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-         */
-        get: function () {
-            return this._scaleX;
-        },
-        set: function (value) {
-            if (this._scaleX === value) {
-                return;
-            }
-            this._scaleX = value;
-            this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "scaleY", {
-        /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
-         * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-         */
-        get: function () {
-            return this._scaleY;
-        },
-        set: function (value) {
-            if (this._scaleY === value) {
-                return;
-            }
-            this._scaleY = value;
+    }
+    /**
+     * Get the hosting AdvancedDynamicTexture
+     */
+    get host() {
+        return this._host;
+    }
+    /** Gets or set information about font offsets (used to render and align text) */
+    get fontOffset() {
+        return this._fontOffset;
+    }
+    set fontOffset(offset) {
+        this._fontOffset = offset;
+    }
+    /** Gets or sets alpha value for the control (1 means opaque and 0 means entirely transparent) */
+    get alpha() {
+        return this._alpha;
+    }
+    set alpha(value) {
+        if (this._alpha === value) {
+            return;
+        }
+        this._alphaSet = true;
+        this._alpha = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets a number indicating size of stroke we want to highlight the control with (mostly for debugging purpose)
+     */
+    get highlightLineWidth() {
+        return this._highlightLineWidth;
+    }
+    set highlightLineWidth(value) {
+        if (this._highlightLineWidth === value) {
+            return;
+        }
+        this._highlightLineWidth = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets a boolean indicating that we want to highlight the control (mostly for debugging purpose)
+     */
+    get isHighlighted() {
+        return this._isHighlighted;
+    }
+    set isHighlighted(value) {
+        if (this._isHighlighted === value) {
+            return;
+        }
+        this._isHighlighted = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets a string defining the color to use for highlighting this control
+     */
+    get highlightColor() {
+        return this._highlightColor;
+    }
+    set highlightColor(value) {
+        if (this._highlightColor === value) {
+            return;
+        }
+        this._highlightColor = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a value indicating the scale factor on X axis (1 by default)
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     */
+    get scaleX() {
+        return this._scaleX;
+    }
+    set scaleX(value) {
+        if (this._scaleX === value) {
+            return;
+        }
+        this._scaleX = value;
+        this._markAsDirty();
+        this._markMatrixAsDirty();
+    }
+    /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     */
+    get scaleY() {
+        return this._scaleY;
+    }
+    set scaleY(value) {
+        if (this._scaleY === value) {
+            return;
+        }
+        this._scaleY = value;
+        this._markAsDirty();
+        this._markMatrixAsDirty();
+    }
+    /** Gets or sets the rotation angle (0 by default)
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     */
+    get rotation() {
+        return this._rotation;
+    }
+    set rotation(value) {
+        if (this._rotation === value) {
+            return;
+        }
+        this._rotation = value;
+        this._markAsDirty();
+        this._markMatrixAsDirty();
+    }
+    /** Gets or sets the transformation center on Y axis (0 by default)
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     */
+    get transformCenterY() {
+        return this._transformCenterY;
+    }
+    set transformCenterY(value) {
+        if (this._transformCenterY === value) {
+            return;
+        }
+        this._transformCenterY = value;
+        this._markAsDirty();
+        this._markMatrixAsDirty();
+    }
+    /** Gets or sets the transformation center on X axis (0 by default)
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     */
+    get transformCenterX() {
+        return this._transformCenterX;
+    }
+    set transformCenterX(value) {
+        if (this._transformCenterX === value) {
+            return;
+        }
+        this._transformCenterX = value;
+        this._markAsDirty();
+        this._markMatrixAsDirty();
+    }
+    /**
+     * Gets or sets the horizontal alignment
+     * @see https://doc.babylonjs.com/how_to/gui#alignments
+     */
+    get horizontalAlignment() {
+        return this._horizontalAlignment;
+    }
+    set horizontalAlignment(value) {
+        if (this._horizontalAlignment === value) {
+            return;
+        }
+        this._horizontalAlignment = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the vertical alignment
+     * @see https://doc.babylonjs.com/how_to/gui#alignments
+     */
+    get verticalAlignment() {
+        return this._verticalAlignment;
+    }
+    set verticalAlignment(value) {
+        if (this._verticalAlignment === value) {
+            return;
+        }
+        this._verticalAlignment = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets control width
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get width() {
+        return this._width.toString(this._host);
+    }
+    set width(value) {
+        this._fixedRatioMasterIsWidth = true;
+        if (this._width.toString(this._host) === value) {
+            return;
+        }
+        if (this._width.fromString(value)) {
             this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "rotation", {
-        /** Gets or sets the rotation angle (0 by default)
-         * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-         */
-        get: function () {
-            return this._rotation;
-        },
-        set: function (value) {
-            if (this._rotation === value) {
-                return;
-            }
-            this._rotation = value;
+        }
+    }
+    /**
+     * Gets or sets the control width in pixel
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get widthInPixels() {
+        return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
+    }
+    set widthInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this._fixedRatioMasterIsWidth = true;
+        this.width = value + "px";
+    }
+    /**
+     * Gets or sets control height
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get height() {
+        return this._height.toString(this._host);
+    }
+    set height(value) {
+        this._fixedRatioMasterIsWidth = false;
+        if (this._height.toString(this._host) === value) {
+            return;
+        }
+        if (this._height.fromString(value)) {
             this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "transformCenterY", {
-        /** Gets or sets the transformation center on Y axis (0 by default)
-         * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-         */
-        get: function () {
-            return this._transformCenterY;
-        },
-        set: function (value) {
-            if (this._transformCenterY === value) {
-                return;
-            }
-            this._transformCenterY = value;
+        }
+    }
+    /**
+     * Gets or sets control height in pixel
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get heightInPixels() {
+        return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
+    }
+    set heightInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this._fixedRatioMasterIsWidth = false;
+        this.height = value + "px";
+    }
+    /** Gets or set font family */
+    get fontFamily() {
+        return this._fontFamily;
+    }
+    set fontFamily(value) {
+        if (this._fontFamily === value) {
+            return;
+        }
+        this._fontFamily = value;
+        this._resetFontCache();
+    }
+    /** Gets or sets font style */
+    get fontStyle() {
+        return this._fontStyle;
+    }
+    set fontStyle(value) {
+        if (this._fontStyle === value) {
+            return;
+        }
+        this._fontStyle = value;
+        this._resetFontCache();
+    }
+    /** Gets or sets font weight */
+    get fontWeight() {
+        return this._fontWeight;
+    }
+    set fontWeight(value) {
+        if (this._fontWeight === value) {
+            return;
+        }
+        this._fontWeight = value;
+        this._resetFontCache();
+    }
+    /**
+     * Gets or sets style
+     * @see https://doc.babylonjs.com/how_to/gui#styles
+     */
+    get style() {
+        return this._style;
+    }
+    set style(value) {
+        if (this._style) {
+            this._style.onChangedObservable.remove(this._styleObserver);
+            this._styleObserver = null;
+        }
+        this._style = value;
+        if (this._style) {
+            this._styleObserver = this._style.onChangedObservable.add(() => {
+                this._markAsDirty();
+                this._resetFontCache();
+            });
+        }
+        this._markAsDirty();
+        this._resetFontCache();
+    }
+    /** @hidden */
+    get _isFontSizeInPercentage() {
+        return this._fontSize.isPercentage;
+    }
+    /** Gets or sets font size in pixels */
+    get fontSizeInPixels() {
+        const fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
+        if (fontSizeToUse.isPixel) {
+            return fontSizeToUse.getValue(this._host);
+        }
+        return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
+    }
+    set fontSizeInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.fontSize = value + "px";
+    }
+    /** Gets or sets font size */
+    get fontSize() {
+        return this._fontSize.toString(this._host);
+    }
+    set fontSize(value) {
+        if (this._fontSize.toString(this._host) === value) {
+            return;
+        }
+        if (this._fontSize.fromString(value)) {
             this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "transformCenterX", {
-        /** Gets or sets the transformation center on X axis (0 by default)
-         * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-         */
-        get: function () {
-            return this._transformCenterX;
-        },
-        set: function (value) {
-            if (this._transformCenterX === value) {
-                return;
-            }
-            this._transformCenterX = value;
+            this._resetFontCache();
+        }
+    }
+    /** Gets or sets foreground color */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        if (this._color === value) {
+            return;
+        }
+        this._color = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets z index which is used to reorder controls on the z axis */
+    get zIndex() {
+        return this._zIndex;
+    }
+    set zIndex(value) {
+        if (this.zIndex === value) {
+            return;
+        }
+        this._zIndex = value;
+        if (this.parent) {
+            this.parent._reOrderControl(this);
+        }
+    }
+    /** Gets or sets a boolean indicating if the control can be rendered */
+    get notRenderable() {
+        return this._doNotRender;
+    }
+    set notRenderable(value) {
+        if (this._doNotRender === value) {
+            return;
+        }
+        this._doNotRender = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a boolean indicating if the control is visible */
+    get isVisible() {
+        return this._isVisible;
+    }
+    set isVisible(value) {
+        if (this._isVisible === value) {
+            return;
+        }
+        this._isVisible = value;
+        this._markAsDirty(true);
+    }
+    /** Gets a boolean indicating that the control needs to update its rendering */
+    get isDirty() {
+        return this._isDirty;
+    }
+    /**
+     * Gets the current linked mesh (or null if none)
+     */
+    get linkedMesh() {
+        return this._linkedMesh;
+    }
+    /**
+     * Gets or sets a value indicating the padding should work like in CSS.
+     * Basically, it will add the padding amount on each side of the parent control for its children.
+     */
+    get descendantsOnlyPadding() {
+        return this._descendantsOnlyPadding;
+    }
+    set descendantsOnlyPadding(value) {
+        if (this._descendantsOnlyPadding === value) {
+            return;
+        }
+        this._descendantsOnlyPadding = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets a value indicating the padding to use on the left of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get paddingLeft() {
+        return this._paddingLeft.toString(this._host);
+    }
+    set paddingLeft(value) {
+        if (this._paddingLeft.fromString(value)) {
             this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "horizontalAlignment", {
-        /**
-         * Gets or sets the horizontal alignment
-         * @see https://doc.babylonjs.com/how_to/gui#alignments
-         */
-        get: function () {
-            return this._horizontalAlignment;
-        },
-        set: function (value) {
-            if (this._horizontalAlignment === value) {
-                return;
-            }
-            this._horizontalAlignment = value;
+        }
+    }
+    /**
+     * Gets or sets a value indicating the padding in pixels to use on the left of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get paddingLeftInPixels() {
+        return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
+    }
+    set paddingLeftInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.paddingLeft = value + "px";
+    }
+    /** @hidden */
+    get _paddingLeftInPixels() {
+        if (this._descendantsOnlyPadding) {
+            return 0;
+        }
+        return this.paddingLeftInPixels;
+    }
+    /**
+     * Gets or sets a value indicating the padding to use on the right of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get paddingRight() {
+        return this._paddingRight.toString(this._host);
+    }
+    set paddingRight(value) {
+        if (this._paddingRight.fromString(value)) {
             this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "verticalAlignment", {
-        /**
-         * Gets or sets the vertical alignment
-         * @see https://doc.babylonjs.com/how_to/gui#alignments
-         */
-        get: function () {
-            return this._verticalAlignment;
-        },
-        set: function (value) {
-            if (this._verticalAlignment === value) {
-                return;
-            }
-            this._verticalAlignment = value;
+        }
+    }
+    /**
+     * Gets or sets a value indicating the padding in pixels to use on the right of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get paddingRightInPixels() {
+        return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
+    }
+    set paddingRightInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.paddingRight = value + "px";
+    }
+    /** @hidden */
+    get _paddingRightInPixels() {
+        if (this._descendantsOnlyPadding) {
+            return 0;
+        }
+        return this.paddingRightInPixels;
+    }
+    /**
+     * Gets or sets a value indicating the padding to use on the top of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get paddingTop() {
+        return this._paddingTop.toString(this._host);
+    }
+    set paddingTop(value) {
+        if (this._paddingTop.fromString(value)) {
             this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "width", {
-        /**
-         * Gets or sets control width
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._width.toString(this._host);
-        },
-        set: function (value) {
-            this._fixedRatioMasterIsWidth = true;
-            if (this._width.toString(this._host) === value) {
-                return;
-            }
-            if (this._width.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "widthInPixels", {
-        /**
-         * Gets or sets the control width in pixel
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this._fixedRatioMasterIsWidth = true;
-            this.width = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "height", {
-        /**
-         * Gets or sets control height
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._height.toString(this._host);
-        },
-        set: function (value) {
-            this._fixedRatioMasterIsWidth = false;
-            if (this._height.toString(this._host) === value) {
-                return;
-            }
-            if (this._height.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "heightInPixels", {
-        /**
-         * Gets or sets control height in pixel
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this._fixedRatioMasterIsWidth = false;
-            this.height = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontFamily", {
-        /** Gets or set font family */
-        get: function () {
-            return this._fontFamily;
-        },
-        set: function (value) {
-            if (this._fontFamily === value) {
-                return;
-            }
-            this._fontFamily = value;
-            this._resetFontCache();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontStyle", {
-        /** Gets or sets font style */
-        get: function () {
-            return this._fontStyle;
-        },
-        set: function (value) {
-            if (this._fontStyle === value) {
-                return;
-            }
-            this._fontStyle = value;
-            this._resetFontCache();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontWeight", {
-        /** Gets or sets font weight */
-        get: function () {
-            return this._fontWeight;
-        },
-        set: function (value) {
-            if (this._fontWeight === value) {
-                return;
-            }
-            this._fontWeight = value;
-            this._resetFontCache();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "style", {
-        /**
-         * Gets or sets style
-         * @see https://doc.babylonjs.com/how_to/gui#styles
-         */
-        get: function () {
-            return this._style;
-        },
-        set: function (value) {
-            var _this = this;
-            if (this._style) {
-                this._style.onChangedObservable.remove(this._styleObserver);
-                this._styleObserver = null;
-            }
-            this._style = value;
-            if (this._style) {
-                this._styleObserver = this._style.onChangedObservable.add(function () {
-                    _this._markAsDirty();
-                    _this._resetFontCache();
-                });
-            }
+        }
+    }
+    /**
+     * Gets or sets a value indicating the padding in pixels to use on the top of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get paddingTopInPixels() {
+        return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
+    }
+    set paddingTopInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.paddingTop = value + "px";
+    }
+    /** @hidden */
+    get _paddingTopInPixels() {
+        if (this._descendantsOnlyPadding) {
+            return 0;
+        }
+        return this.paddingTopInPixels;
+    }
+    /**
+     * Gets or sets a value indicating the padding to use on the bottom of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get paddingBottom() {
+        return this._paddingBottom.toString(this._host);
+    }
+    set paddingBottom(value) {
+        if (this._paddingBottom.fromString(value)) {
             this._markAsDirty();
-            this._resetFontCache();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "_isFontSizeInPercentage", {
-        /** @hidden */
-        get: function () {
-            return this._fontSize.isPercentage;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontSizeInPixels", {
-        /** Gets or sets font size in pixels */
-        get: function () {
-            var fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
-            if (fontSizeToUse.isPixel) {
-                return fontSizeToUse.getValue(this._host);
-            }
-            return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.fontSize = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontSize", {
-        /** Gets or sets font size */
-        get: function () {
-            return this._fontSize.toString(this._host);
-        },
-        set: function (value) {
-            if (this._fontSize.toString(this._host) === value) {
-                return;
-            }
-            if (this._fontSize.fromString(value)) {
-                this._markAsDirty();
-                this._resetFontCache();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "color", {
-        /** Gets or sets foreground color */
-        get: function () {
-            return this._color;
-        },
-        set: function (value) {
-            if (this._color === value) {
-                return;
-            }
-            this._color = value;
+        }
+    }
+    /**
+     * Gets or sets a value indicating the padding in pixels to use on the bottom of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get paddingBottomInPixels() {
+        return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
+    }
+    set paddingBottomInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.paddingBottom = value + "px";
+    }
+    /** @hidden */
+    get _paddingBottomInPixels() {
+        if (this._descendantsOnlyPadding) {
+            return 0;
+        }
+        return this.paddingBottomInPixels;
+    }
+    /**
+     * Gets or sets a value indicating the left coordinate of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get left() {
+        return this._left.toString(this._host);
+    }
+    set left(value) {
+        if (this._left.fromString(value)) {
             this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "zIndex", {
-        /** Gets or sets z index which is used to reorder controls on the z axis */
-        get: function () {
-            return this._zIndex;
-        },
-        set: function (value) {
-            if (this.zIndex === value) {
-                return;
-            }
-            this._zIndex = value;
-            if (this.parent) {
-                this.parent._reOrderControl(this);
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "notRenderable", {
-        /** Gets or sets a boolean indicating if the control can be rendered */
-        get: function () {
-            return this._doNotRender;
-        },
-        set: function (value) {
-            if (this._doNotRender === value) {
-                return;
-            }
-            this._doNotRender = value;
+        }
+    }
+    /**
+     * Gets or sets a value indicating the left coordinate in pixels of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get leftInPixels() {
+        return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
+    }
+    set leftInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.left = value + "px";
+    }
+    /**
+     * Gets or sets a value indicating the top coordinate of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get top() {
+        return this._top.toString(this._host);
+    }
+    set top(value) {
+        if (this._top.fromString(value)) {
             this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "isVisible", {
-        /** Gets or sets a boolean indicating if the control is visible */
-        get: function () {
-            return this._isVisible;
-        },
-        set: function (value) {
-            if (this._isVisible === value) {
-                return;
-            }
-            this._isVisible = value;
-            this._markAsDirty(true);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "isDirty", {
-        /** Gets a boolean indicating that the control needs to update its rendering */
-        get: function () {
-            return this._isDirty;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkedMesh", {
-        /**
-         * Gets the current linked mesh (or null if none)
-         */
-        get: function () {
-            return this._linkedMesh;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "descendantsOnlyPadding", {
-        /**
-         * Gets or sets a value indicating the padding should work like in CSS.
-         * Basically, it will add the padding amount on each side of the parent control for its children.
-         */
-        get: function () {
-            return this._descendantsOnlyPadding;
-        },
-        set: function (value) {
-            if (this._descendantsOnlyPadding === value) {
-                return;
-            }
-            this._descendantsOnlyPadding = value;
+        }
+    }
+    /**
+     * Gets or sets a value indicating the top coordinate in pixels of the control
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get topInPixels() {
+        return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
+    }
+    set topInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.top = value + "px";
+    }
+    /**
+     * Gets or sets a value indicating the offset on X axis to the linked mesh
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
+     */
+    get linkOffsetX() {
+        return this._linkOffsetX.toString(this._host);
+    }
+    set linkOffsetX(value) {
+        if (this._linkOffsetX.fromString(value)) {
             this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingLeft", {
-        /**
-         * Gets or sets a value indicating the padding to use on the left of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingLeft.toString(this._host);
-        },
-        set: function (value) {
-            if (this._paddingLeft.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingLeftInPixels", {
-        /**
-         * Gets or sets a value indicating the padding in pixels to use on the left of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.paddingLeft = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "_paddingLeftInPixels", {
-        /** @hidden */
-        get: function () {
-            if (this._descendantsOnlyPadding) {
-                return 0;
-            }
-            return this.paddingLeftInPixels;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingRight", {
-        /**
-         * Gets or sets a value indicating the padding to use on the right of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingRight.toString(this._host);
-        },
-        set: function (value) {
-            if (this._paddingRight.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingRightInPixels", {
-        /**
-         * Gets or sets a value indicating the padding in pixels to use on the right of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.paddingRight = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "_paddingRightInPixels", {
-        /** @hidden */
-        get: function () {
-            if (this._descendantsOnlyPadding) {
-                return 0;
-            }
-            return this.paddingRightInPixels;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingTop", {
-        /**
-         * Gets or sets a value indicating the padding to use on the top of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingTop.toString(this._host);
-        },
-        set: function (value) {
-            if (this._paddingTop.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingTopInPixels", {
-        /**
-         * Gets or sets a value indicating the padding in pixels to use on the top of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.paddingTop = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "_paddingTopInPixels", {
-        /** @hidden */
-        get: function () {
-            if (this._descendantsOnlyPadding) {
-                return 0;
-            }
-            return this.paddingTopInPixels;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingBottom", {
-        /**
-         * Gets or sets a value indicating the padding to use on the bottom of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingBottom.toString(this._host);
-        },
-        set: function (value) {
-            if (this._paddingBottom.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingBottomInPixels", {
-        /**
-         * Gets or sets a value indicating the padding in pixels to use on the bottom of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.paddingBottom = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "_paddingBottomInPixels", {
-        /** @hidden */
-        get: function () {
-            if (this._descendantsOnlyPadding) {
-                return 0;
-            }
-            return this.paddingBottomInPixels;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "left", {
-        /**
-         * Gets or sets a value indicating the left coordinate of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._left.toString(this._host);
-        },
-        set: function (value) {
-            if (this._left.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "leftInPixels", {
-        /**
-         * Gets or sets a value indicating the left coordinate in pixels of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.left = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "top", {
-        /**
-         * Gets or sets a value indicating the top coordinate of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._top.toString(this._host);
-        },
-        set: function (value) {
-            if (this._top.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "topInPixels", {
-        /**
-         * Gets or sets a value indicating the top coordinate in pixels of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.top = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkOffsetX", {
-        /**
-         * Gets or sets a value indicating the offset on X axis to the linked mesh
-         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
-         */
-        get: function () {
-            return this._linkOffsetX.toString(this._host);
-        },
-        set: function (value) {
-            if (this._linkOffsetX.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkOffsetXInPixels", {
-        /**
-         * Gets or sets a value indicating the offset in pixels on X axis to the linked mesh
-         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
-         */
-        get: function () {
-            return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.linkOffsetX = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkOffsetY", {
-        /**
-         * Gets or sets a value indicating the offset on Y axis to the linked mesh
-         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
-         */
-        get: function () {
-            return this._linkOffsetY.toString(this._host);
-        },
-        set: function (value) {
-            if (this._linkOffsetY.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkOffsetYInPixels", {
-        /**
-         * Gets or sets a value indicating the offset in pixels on Y axis to the linked mesh
-         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
-         */
-        get: function () {
-            return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.linkOffsetY = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "centerX", {
-        /** Gets the center coordinate on X axis */
-        get: function () {
-            return this._currentMeasure.left + this._currentMeasure.width / 2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "centerY", {
-        /** Gets the center coordinate on Y axis */
-        get: function () {
-            return this._currentMeasure.top + this._currentMeasure.height / 2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "isEnabled", {
-        /** Gets or sets if control is Enabled */
-        get: function () {
-            return this._isEnabled;
-        },
-        set: function (value) {
-            var _this = this;
-            if (this._isEnabled === value) {
+        }
+    }
+    /**
+     * Gets or sets a value indicating the offset in pixels on X axis to the linked mesh
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
+     */
+    get linkOffsetXInPixels() {
+        return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
+    }
+    set linkOffsetXInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.linkOffsetX = value + "px";
+    }
+    /**
+     * Gets or sets a value indicating the offset on Y axis to the linked mesh
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
+     */
+    get linkOffsetY() {
+        return this._linkOffsetY.toString(this._host);
+    }
+    set linkOffsetY(value) {
+        if (this._linkOffsetY.fromString(value)) {
+            this._markAsDirty();
+        }
+    }
+    /**
+     * Gets or sets a value indicating the offset in pixels on Y axis to the linked mesh
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
+     */
+    get linkOffsetYInPixels() {
+        return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
+    }
+    set linkOffsetYInPixels(value) {
+        if (isNaN(value)) {
+            return;
+        }
+        this.linkOffsetY = value + "px";
+    }
+    /** Gets the center coordinate on X axis */
+    get centerX() {
+        return this._currentMeasure.left + this._currentMeasure.width / 2;
+    }
+    /** Gets the center coordinate on Y axis */
+    get centerY() {
+        return this._currentMeasure.top + this._currentMeasure.height / 2;
+    }
+    /** Gets or sets if control is Enabled */
+    get isEnabled() {
+        return this._isEnabled;
+    }
+    set isEnabled(value) {
+        if (this._isEnabled === value) {
+            return;
+        }
+        this._isEnabled = value;
+        this._markAsDirty();
+        // if this control or any of it's descendants are under a pointer, we need to fire a pointerOut event
+        const recursivelyFirePointerOut = (control) => {
+            if (!control.host) {
                 return;
             }
-            this._isEnabled = value;
-            this._markAsDirty();
-            // if this control or any of it's descendants are under a pointer, we need to fire a pointerOut event
-            var recursivelyFirePointerOut = function (control) {
-                if (!control.host) {
-                    return;
-                }
-                for (var pointer in control.host._lastControlOver) {
-                    if (control === _this.host._lastControlOver[pointer]) {
-                        control._onPointerOut(control, null, true);
-                        delete control.host._lastControlOver[pointer];
-                    }
-                }
-                if (control.children !== undefined) {
-                    control.children.forEach(recursivelyFirePointerOut);
+            for (const pointer in control.host._lastControlOver) {
+                if (control === this.host._lastControlOver[pointer]) {
+                    control._onPointerOut(control, null, true);
+                    delete control.host._lastControlOver[pointer];
                 }
-            };
-            recursivelyFirePointerOut(this);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "disabledColor", {
-        /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
-        get: function () {
-            return this._disabledColor;
-        },
-        set: function (value) {
-            if (this._disabledColor === value) {
-                return;
             }
-            this._disabledColor = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "disabledColorItem", {
-        /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
-        get: function () {
-            return this._disabledColorItem;
-        },
-        set: function (value) {
-            if (this._disabledColorItem === value) {
-                return;
+            if (control.children !== undefined) {
+                control.children.forEach(recursivelyFirePointerOut);
             }
-            this._disabledColorItem = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
+        };
+        recursivelyFirePointerOut(this);
+    }
+    /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
+    get disabledColor() {
+        return this._disabledColor;
+    }
+    set disabledColor(value) {
+        if (this._disabledColor === value) {
+            return;
+        }
+        this._disabledColor = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
+    get disabledColorItem() {
+        return this._disabledColorItem;
+    }
+    set disabledColorItem(value) {
+        if (this._disabledColorItem === value) {
+            return;
+        }
+        this._disabledColorItem = value;
+        this._markAsDirty();
+    }
     /** @hidden */
-    Control.prototype._getTypeName = function () {
+    _getTypeName() {
         return "Control";
-    };
+    }
     /**
      * Gets the first ascendant in the hierarchy of the given type
      * @param className defines the required type
      * @returns the ascendant or null if not found
      */
-    Control.prototype.getAscendantOfClass = function (className) {
+    getAscendantOfClass(className) {
         if (!this.parent) {
             return null;
         }
@@ -1202,32 +948,31 @@ var Control = /** @class */ (function () {
             return this.parent;
         }
         return this.parent.getAscendantOfClass(className);
-    };
+    }
     /**
      * Mark control element as dirty
      * @param force force non visible elements to be marked too
      */
-    Control.prototype.markAsDirty = function (force) {
-        if (force === void 0) { force = false; }
+    markAsDirty(force = false) {
         this._markAsDirty(force);
-    };
+    }
     /**
      * Mark the element and its children as dirty
      */
-    Control.prototype.markAllAsDirty = function () {
+    markAllAsDirty() {
         this._markAllAsDirty();
-    };
+    }
     /** @hidden */
-    Control.prototype._resetFontCache = function () {
+    _resetFontCache() {
         this._fontSet = true;
         this._markAsDirty();
-    };
+    }
     /**
      * Determines if a container is an ascendant of the current control
      * @param container defines the container to look for
      * @returns true if the container is one of the ascendant of the control
      */
-    Control.prototype.isAscendant = function (container) {
+    isAscendant(container) {
         if (!this.parent) {
             return false;
         }
@@ -1235,94 +980,93 @@ var Control = /** @class */ (function () {
             return true;
         }
         return this.parent.isAscendant(container);
-    };
+    }
     /**
      * Gets coordinates in local control space
      * @param globalCoordinates defines the coordinates to transform
      * @returns the new coordinates in local space
      */
-    Control.prototype.getLocalCoordinates = function (globalCoordinates) {
-        var result = Vector2.Zero();
+    getLocalCoordinates(globalCoordinates) {
+        const result = Vector2.Zero();
         this.getLocalCoordinatesToRef(globalCoordinates, result);
         return result;
-    };
+    }
     /**
      * Gets coordinates in local control space
      * @param globalCoordinates defines the coordinates to transform
      * @param result defines the target vector2 where to store the result
      * @returns the current control
      */
-    Control.prototype.getLocalCoordinatesToRef = function (globalCoordinates, result) {
+    getLocalCoordinatesToRef(globalCoordinates, result) {
         result.x = globalCoordinates.x - this._currentMeasure.left;
         result.y = globalCoordinates.y - this._currentMeasure.top;
         return this;
-    };
+    }
     /**
      * Gets coordinates in parent local control space
      * @param globalCoordinates defines the coordinates to transform
      * @returns the new coordinates in parent local space
      */
-    Control.prototype.getParentLocalCoordinates = function (globalCoordinates) {
-        var result = Vector2.Zero();
+    getParentLocalCoordinates(globalCoordinates) {
+        const result = Vector2.Zero();
         result.x = globalCoordinates.x - this._cachedParentMeasure.left;
         result.y = globalCoordinates.y - this._cachedParentMeasure.top;
         return result;
-    };
+    }
     /**
      * Move the current control to a vector3 position projected onto the screen.
      * @param position defines the target position
      * @param scene defines the hosting scene
      */
-    Control.prototype.moveToVector3 = function (position, scene) {
+    moveToVector3(position, scene) {
         if (!this._host || this.parent !== this._host._rootContainer) {
             Tools.Error("Cannot move a control to a vector3 if the control is not at root level");
             return;
         }
         this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
         this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        var globalViewport = this._host._getGlobalViewport();
-        var projectedPosition = Vector3.Project(position, Matrix.Identity(), scene.getTransformMatrix(), globalViewport);
+        const globalViewport = this._host._getGlobalViewport();
+        const projectedPosition = Vector3.Project(position, Matrix.Identity(), scene.getTransformMatrix(), globalViewport);
         this._moveToProjectedPosition(projectedPosition);
         if (projectedPosition.z < 0 || projectedPosition.z > 1) {
             this.notRenderable = true;
             return;
         }
         this.notRenderable = false;
-    };
+    }
     /**
      * Will store all controls that have this control as ascendant in a given array
      * @param results defines the array where to store the descendants
      * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
      * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
      */
-    Control.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
-        if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
+    getDescendantsToRef(results, directDescendantsOnly = false, predicate) {
         // Do nothing by default
-    };
+    }
     /**
      * Will return all controls that have this control as ascendant
      * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
      * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
      * @return all child controls
      */
-    Control.prototype.getDescendants = function (directDescendantsOnly, predicate) {
-        var results = new Array();
+    getDescendants(directDescendantsOnly, predicate) {
+        const results = new Array();
         this.getDescendantsToRef(results, directDescendantsOnly, predicate);
         return results;
-    };
+    }
     /**
      * Link current control with a target mesh
      * @param mesh defines the mesh to link with
      * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
      */
-    Control.prototype.linkWithMesh = function (mesh) {
+    linkWithMesh(mesh) {
         if (!this._host || (this.parent && this.parent !== this._host._rootContainer)) {
             if (mesh) {
                 Tools.Error("Cannot link a control to a mesh if the control is not at root level");
             }
             return;
         }
-        var index = this._host._linkedControls.indexOf(this);
+        const index = this._host._linkedControls.indexOf(this);
         if (index !== -1) {
             this._linkedMesh = mesh;
             if (!mesh) {
@@ -1337,7 +1081,7 @@ var Control = /** @class */ (function () {
         this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
         this._linkedMesh = mesh;
         this._host._linkedControls.push(this);
-    };
+    }
     /**
      * Shorthand function to set the top, right, bottom, and left padding values on the control.
      * @param { string | number} paddingTop - The value of the top padding.
@@ -1346,16 +1090,16 @@ var Control = /** @class */ (function () {
      * @param { string | number} paddingLeft - The value of the left padding. If omitted, right is used.
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
-    Control.prototype.setPadding = function (paddingTop, paddingRight, paddingBottom, paddingLeft) {
-        var top = paddingTop;
-        var right = paddingRight !== null && paddingRight !== void 0 ? paddingRight : top;
-        var bottom = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : top;
-        var left = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : right;
+    setPadding(paddingTop, paddingRight, paddingBottom, paddingLeft) {
+        const top = paddingTop;
+        const right = paddingRight ?? top;
+        const bottom = paddingBottom ?? top;
+        const left = paddingLeft ?? right;
         this.paddingTop = top;
         this.paddingRight = right;
         this.paddingBottom = bottom;
         this.paddingLeft = left;
-    };
+    }
     /**
      * Shorthand funtion to set the top, right, bottom, and left padding values in pixels on the control.
      * @param { number} paddingTop - The value in pixels of the top padding.
@@ -1364,30 +1108,29 @@ var Control = /** @class */ (function () {
      * @param { number} paddingLeft - The value in pixels of the left padding. If omitted, right is used.
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
-    Control.prototype.setPaddingInPixels = function (paddingTop, paddingRight, paddingBottom, paddingLeft) {
-        var top = paddingTop;
-        var right = paddingRight !== null && paddingRight !== void 0 ? paddingRight : top;
-        var bottom = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : top;
-        var left = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : right;
+    setPaddingInPixels(paddingTop, paddingRight, paddingBottom, paddingLeft) {
+        const top = paddingTop;
+        const right = paddingRight ?? top;
+        const bottom = paddingBottom ?? top;
+        const left = paddingLeft ?? right;
         this.paddingTopInPixels = top;
         this.paddingRightInPixels = right;
         this.paddingBottomInPixels = bottom;
         this.paddingLeftInPixels = left;
-    };
+    }
     /**
      * @param projectedPosition
      * @hidden
      */
-    Control.prototype._moveToProjectedPosition = function (projectedPosition) {
-        var _a;
-        var oldLeft = this._left.getValue(this._host);
-        var oldTop = this._top.getValue(this._host);
-        var parentMeasure = (_a = this.parent) === null || _a === void 0 ? void 0 : _a._currentMeasure;
+    _moveToProjectedPosition(projectedPosition) {
+        const oldLeft = this._left.getValue(this._host);
+        const oldTop = this._top.getValue(this._host);
+        const parentMeasure = this.parent?._currentMeasure;
         if (parentMeasure) {
             this._processMeasures(parentMeasure, this._host.getContext());
         }
-        var newLeft = projectedPosition.x + this._linkOffsetX.getValue(this._host) - this._currentMeasure.width / 2;
-        var newTop = projectedPosition.y + this._linkOffsetY.getValue(this._host) - this._currentMeasure.height / 2;
+        let newLeft = projectedPosition.x + this._linkOffsetX.getValue(this._host) - this._currentMeasure.width / 2;
+        let newTop = projectedPosition.y + this._linkOffsetY.getValue(this._host) - this._currentMeasure.height / 2;
         if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
             if (Math.abs(newLeft - oldLeft) < 0.5) {
                 newLeft = oldLeft;
@@ -1401,38 +1144,38 @@ var Control = /** @class */ (function () {
         this._left.ignoreAdaptiveScaling = true;
         this._top.ignoreAdaptiveScaling = true;
         this._markAsDirty();
-    };
+    }
     /**
      * @param offset
      * @hidden
      */
-    Control.prototype._offsetLeft = function (offset) {
+    _offsetLeft(offset) {
         this._isDirty = true;
         this._currentMeasure.left += offset;
-    };
+    }
     /**
      * @param offset
      * @hidden
      */
-    Control.prototype._offsetTop = function (offset) {
+    _offsetTop(offset) {
         this._isDirty = true;
         this._currentMeasure.top += offset;
-    };
+    }
     /** @hidden */
-    Control.prototype._markMatrixAsDirty = function () {
+    _markMatrixAsDirty() {
         this._isMatrixDirty = true;
         this._flagDescendantsAsMatrixDirty();
-    };
+    }
     /** @hidden */
-    Control.prototype._flagDescendantsAsMatrixDirty = function () {
+    _flagDescendantsAsMatrixDirty() {
         // No child
-    };
+    }
     /**
      * @param rect
      * @param context
      * @hidden
      */
-    Control.prototype._intersectsRect = function (rect, context) {
+    _intersectsRect(rect, context) {
         // make sure we are transformed correctly before checking intersections. no-op if nothing is dirty.
         this._transform(context);
         if (this._evaluatedMeasure.left >= rect.left + rect.width) {
@@ -1448,18 +1191,18 @@ var Control = /** @class */ (function () {
             return false;
         }
         return true;
-    };
+    }
     /** @hidden */
-    Control.prototype._computeAdditionnalOffsetX = function () {
+    _computeAdditionnalOffsetX() {
         return 0;
-    };
+    }
     /** @hidden */
-    Control.prototype._computeAdditionnalOffsetY = function () {
+    _computeAdditionnalOffsetY() {
         return 0;
-    };
+    }
     /** @hidden */
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    Control.prototype.invalidateRect = function () {
+    invalidateRect() {
         this._transform();
         if (this.host && this.host.useInvalidateRectOptimization) {
             // Rotate by transform to get the measure transformed to global space
@@ -1468,24 +1211,23 @@ var Control = /** @class */ (function () {
             // the previous measure is used to properly clear a control that is scaled down
             Measure.CombineToRef(this._tmpMeasureA, this._prevCurrentMeasureTransformedIntoGlobalSpace, this._tmpMeasureA);
             // Expand rect based on shadows
-            var shadowOffsetX = this.shadowOffsetX;
-            var shadowOffsetY = this.shadowOffsetY;
-            var shadowBlur = Math.max(this._previousShadowBlur, this.shadowBlur);
-            var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
-            var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
-            var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
-            var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
-            var offsetX = this._computeAdditionnalOffsetX();
-            var offsetY = this._computeAdditionnalOffsetY();
+            const shadowOffsetX = this.shadowOffsetX;
+            const shadowOffsetY = this.shadowOffsetY;
+            const shadowBlur = Math.max(this._previousShadowBlur, this.shadowBlur);
+            const leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
+            const rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
+            const topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
+            const bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
+            const offsetX = this._computeAdditionnalOffsetX();
+            const offsetY = this._computeAdditionnalOffsetY();
             this.host.invalidateRect(Math.floor(this._tmpMeasureA.left + leftShadowOffset - offsetX), Math.floor(this._tmpMeasureA.top + topShadowOffset - offsetY), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width + rightShadowOffset + offsetX), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height + bottomShadowOffset + offsetY));
         }
-    };
+    }
     /**
      * @param force
      * @hidden
      */
-    Control.prototype._markAsDirty = function (force) {
-        if (force === void 0) { force = false; }
+    _markAsDirty(force = false) {
         if (!this._isVisible && !force) {
             return;
         }
@@ -1495,35 +1237,35 @@ var Control = /** @class */ (function () {
         if (this._host) {
             this._host.markAsDirty();
         }
-    };
+    }
     /** @hidden */
-    Control.prototype._markAllAsDirty = function () {
+    _markAllAsDirty() {
         this._markAsDirty();
         if (this._font) {
             this._prepareFont();
         }
-    };
+    }
     /**
      * @param host
      * @hidden
      */
-    Control.prototype._link = function (host) {
+    _link(host) {
         this._host = host;
         if (this._host) {
             this.uniqueId = this._host.getScene().getUniqueId();
         }
-    };
+    }
     /**
      * @param context
      * @hidden
      */
-    Control.prototype._transform = function (context) {
+    _transform(context) {
         if (!this._isMatrixDirty && this._scaleX === 1 && this._scaleY === 1 && this._rotation === 0) {
             return;
         }
         // postTranslate
-        var offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
-        var offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
+        const offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
+        const offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
         if (context) {
             context.translate(offsetX, offsetY);
             // rotate
@@ -1543,12 +1285,12 @@ var Control = /** @class */ (function () {
             this._transformMatrix.invertToRef(this._invertTransformMatrix);
             this._currentMeasure.transformToRef(this._transformMatrix, this._evaluatedMeasure);
         }
-    };
+    }
     /**
      * @param context
      * @hidden
      */
-    Control.prototype._renderHighlight = function (context) {
+    _renderHighlight(context) {
         if (!this.isHighlighted) {
             return;
         }
@@ -1557,19 +1299,19 @@ var Control = /** @class */ (function () {
         context.lineWidth = this._highlightLineWidth;
         this._renderHighlightSpecific(context);
         context.restore();
-    };
+    }
     /**
      * @param context
      * @hidden
      */
-    Control.prototype._renderHighlightSpecific = function (context) {
+    _renderHighlightSpecific(context) {
         context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
-    };
+    }
     /**
      * @param context
      * @hidden
      */
-    Control.prototype._applyStates = function (context) {
+    _applyStates(context) {
         if (this._isFontSizeInPercentage) {
             this._fontSet = true;
         }
@@ -1592,13 +1334,13 @@ var Control = /** @class */ (function () {
         else if (this._alphaSet) {
             context.globalAlpha = this.parent && !this.parent.renderToIntermediateTexture ? this.parent.alpha * this._alpha : this._alpha;
         }
-    };
+    }
     /**
      * @param parentMeasure
      * @param context
      * @hidden
      */
-    Control.prototype._layout = function (parentMeasure, context) {
+    _layout(parentMeasure, context) {
         if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
             return false;
         }
@@ -1607,14 +1349,14 @@ var Control = /** @class */ (function () {
             this._currentMeasure.addAndTransformToRef(this._transformMatrix, -this._paddingLeftInPixels | 0, -this._paddingTopInPixels | 0, this._paddingRightInPixels | 0, this._paddingBottomInPixels | 0, this._prevCurrentMeasureTransformedIntoGlobalSpace);
             context.save();
             this._applyStates(context);
-            var rebuildCount = 0;
+            let rebuildCount = 0;
             do {
                 this._rebuildLayout = false;
                 this._processMeasures(parentMeasure, context);
                 rebuildCount++;
             } while (this._rebuildLayout && rebuildCount < 3);
             if (rebuildCount >= 3) {
-                Logger.Error("Layout cycle detected in GUI (Control name=".concat(this.name, ", uniqueId=").concat(this.uniqueId, ")"));
+                Logger.Error(`Layout cycle detected in GUI (Control name=${this.name}, uniqueId=${this.uniqueId})`);
             }
             context.restore();
             this.invalidateRect();
@@ -1623,13 +1365,13 @@ var Control = /** @class */ (function () {
         this._wasDirty = this._isDirty;
         this._isDirty = false;
         return true;
-    };
+    }
     /**
      * @param parentMeasure
      * @param context
      * @hidden
      */
-    Control.prototype._processMeasures = function (parentMeasure, context) {
+    _processMeasures(parentMeasure, context) {
         this._tempPaddingMeasure.copyFrom(parentMeasure);
         // Apply padding if in correct mode
         if (this.parent && this.parent.descendantsOnlyPadding) {
@@ -1655,8 +1397,8 @@ var Control = /** @class */ (function () {
         if (this.onDirtyObservable.hasObservers()) {
             this.onDirtyObservable.notifyObservers(this);
         }
-    };
-    Control.prototype._evaluateClippingState = function (parentMeasure) {
+    }
+    _evaluateClippingState(parentMeasure) {
         this._currentMeasure.transformToRef(this._transformMatrix, this._evaluatedMeasure);
         if (this.parent && this.parent.clipChildren) {
             parentMeasure.transformToRef(this.parent._transformMatrix, this._evaluatedParentMeasure);
@@ -1679,9 +1421,9 @@ var Control = /** @class */ (function () {
             }
         }
         this._isClipped = false;
-    };
+    }
     /** @hidden */
-    Control.prototype._measure = function () {
+    _measure() {
         // Width / Height
         if (this._width.isPixel) {
             this._currentMeasure.width = this._width.getValue(this._host);
@@ -1703,20 +1445,20 @@ var Control = /** @class */ (function () {
                 this._currentMeasure.width = this._currentMeasure.height * this.fixedRatio;
             }
         }
-    };
+    }
     /**
      * @param parentMeasure
      * @param context
      * @hidden
      */
-    Control.prototype._computeAlignment = function (parentMeasure, context) {
-        var width = this._currentMeasure.width;
-        var height = this._currentMeasure.height;
-        var parentWidth = parentMeasure.width;
-        var parentHeight = parentMeasure.height;
+    _computeAlignment(parentMeasure, context) {
+        const width = this._currentMeasure.width;
+        const height = this._currentMeasure.height;
+        const parentWidth = parentMeasure.width;
+        const parentHeight = parentMeasure.height;
         // Left / top
-        var x = 0;
-        var y = 0;
+        let x = 0;
+        let y = 0;
         switch (this.horizontalAlignment) {
             case Control.HORIZONTAL_ALIGNMENT_LEFT:
                 x = 0;
@@ -1783,38 +1525,38 @@ var Control = /** @class */ (function () {
         }
         this._currentMeasure.left += x;
         this._currentMeasure.top += y;
-    };
+    }
     /**
      * @param parentMeasure
      * @param context
      * @hidden
      */
-    Control.prototype._preMeasure = function (parentMeasure, context) {
+    _preMeasure(parentMeasure, context) {
         // Do nothing
-    };
+    }
     /**
      * @param parentMeasure
      * @param context
      * @hidden
      */
-    Control.prototype._additionalProcessing = function (parentMeasure, context) {
+    _additionalProcessing(parentMeasure, context) {
         // Do nothing
-    };
+    }
     /**
      * @param context
      * @hidden
      */
-    Control.prototype._clipForChildren = function (context) {
+    _clipForChildren(context) {
         // DO nothing
-    };
-    Control.prototype._clip = function (context, invalidatedRectangle) {
+    }
+    _clip(context, invalidatedRectangle) {
         context.beginPath();
         Control._ClipMeasure.copyFrom(this._currentMeasure);
         if (invalidatedRectangle) {
             // Rotate the invalidated rect into the control's space
             invalidatedRectangle.transformToRef(this._invertTransformMatrix, this._tmpMeasureA);
             // Get the intersection of the rect in context space and the current context
-            var intersection = new Measure(0, 0, 0, 0);
+            const intersection = new Measure(0, 0, 0, 0);
             intersection.left = Math.max(this._tmpMeasureA.left, this._currentMeasure.left);
             intersection.top = Math.max(this._tmpMeasureA.top, this._currentMeasure.top);
             intersection.width = Math.min(this._tmpMeasureA.left + this._tmpMeasureA.width, this._currentMeasure.left + this._currentMeasure.width) - intersection.left;
@@ -1822,26 +1564,26 @@ var Control = /** @class */ (function () {
             Control._ClipMeasure.copyFrom(intersection);
         }
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-            var shadowOffsetX = this.shadowOffsetX;
-            var shadowOffsetY = this.shadowOffsetY;
-            var shadowBlur = this.shadowBlur;
-            var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
-            var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
-            var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
-            var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
+            const shadowOffsetX = this.shadowOffsetX;
+            const shadowOffsetY = this.shadowOffsetY;
+            const shadowBlur = this.shadowBlur;
+            const leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
+            const rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
+            const topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
+            const bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
             context.rect(Control._ClipMeasure.left + leftShadowOffset, Control._ClipMeasure.top + topShadowOffset, Control._ClipMeasure.width + rightShadowOffset - leftShadowOffset, Control._ClipMeasure.height + bottomShadowOffset - topShadowOffset);
         }
         else {
             context.rect(Control._ClipMeasure.left, Control._ClipMeasure.top, Control._ClipMeasure.width, Control._ClipMeasure.height);
         }
         context.clip();
-    };
+    }
     /**
      * @param context
      * @param invalidatedRectangle
      * @hidden
      */
-    Control.prototype._render = function (context, invalidatedRectangle) {
+    _render(context, invalidatedRectangle) {
         if (!this.isVisible || this.notRenderable || this._isClipped) {
             this._isDirty = false;
             return false;
@@ -1873,22 +1615,22 @@ var Control = /** @class */ (function () {
         }
         context.restore();
         return true;
-    };
+    }
     /**
      * @param context
      * @param invalidatedRectangle
      * @hidden
      */
-    Control.prototype._draw = function (context, invalidatedRectangle) {
+    _draw(context, invalidatedRectangle) {
         // Do nothing
-    };
+    }
     /**
      * Tests if a given coordinates belong to the current control
      * @param x defines x coordinate to test
      * @param y defines y coordinate to test
      * @returns true if the coordinates are inside the control
      */
-    Control.prototype.contains = function (x, y) {
+    contains(x, y) {
         // Invert transform
         this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
         x = this._transformedPosition.x;
@@ -1910,7 +1652,7 @@ var Control = /** @class */ (function () {
             this._host._shouldBlockPointer = true;
         }
         return true;
-    };
+    }
     /**
      * @param x
      * @param y
@@ -1922,7 +1664,7 @@ var Control = /** @class */ (function () {
      * @param deltaY
      * @hidden
      */
-    Control.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
+    _processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
         if (!this._isEnabled) {
             return false;
         }
@@ -1934,7 +1676,7 @@ var Control = /** @class */ (function () {
         }
         this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
         return true;
-    };
+    }
     /**
      * @param target
      * @param coordinates
@@ -1942,18 +1684,18 @@ var Control = /** @class */ (function () {
      * @param pi
      * @hidden
      */
-    Control.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
-        var canNotify = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this, pi);
+    _onPointerMove(target, coordinates, pointerId, pi) {
+        const canNotify = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this, pi);
         if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerMove(target, coordinates, pointerId, pi);
         }
-    };
+    }
     /**
      * @param target
      * @param pi
      * @hidden
      */
-    Control.prototype._onPointerEnter = function (target, pi) {
+    _onPointerEnter(target, pi) {
         if (!this._isEnabled) {
             return false;
         }
@@ -1965,32 +1707,31 @@ var Control = /** @class */ (function () {
             this._enterCount = 0;
         }
         this._enterCount++;
-        var canNotify = this.onPointerEnterObservable.notifyObservers(this, -1, target, this, pi);
+        const canNotify = this.onPointerEnterObservable.notifyObservers(this, -1, target, this, pi);
         if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerEnter(target, pi);
         }
         return true;
-    };
+    }
     /**
      * @param target
      * @param pi
      * @param force
      * @hidden
      */
-    Control.prototype._onPointerOut = function (target, pi, force) {
-        if (force === void 0) { force = false; }
+    _onPointerOut(target, pi, force = false) {
         if (!force && (!this._isEnabled || target === this)) {
             return;
         }
         this._enterCount = 0;
-        var canNotify = true;
+        let canNotify = true;
         if (!target.isAscendant(this)) {
             canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this, pi);
         }
         if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerOut(target, pi, force);
         }
-    };
+    }
     /**
      * @param target
      * @param coordinates
@@ -1999,7 +1740,7 @@ var Control = /** @class */ (function () {
      * @param pi
      * @hidden
      */
-    Control.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
+    _onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
         // Prevent pointerout to lose control context.
         // Event redundancy is checked inside the function.
         this._onPointerEnter(this, pi);
@@ -2008,12 +1749,15 @@ var Control = /** @class */ (function () {
         }
         this._downCount++;
         this._downPointerIds[pointerId] = true;
-        var canNotify = this.onPointerDownObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
+        const canNotify = this.onPointerDownObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
         if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);
         }
+        if (pi && this.uniqueId !== this._host.rootContainer.uniqueId) {
+            this._host._capturedPointerIds.add(pi.event.pointerId);
+        }
         return true;
-    };
+    }
     /**
      * @param target
      * @param coordinates
@@ -2023,52 +1767,54 @@ var Control = /** @class */ (function () {
      * @param pi
      * @hidden
      */
-    Control.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
+    _onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
         if (!this._isEnabled) {
             return;
         }
         this._downCount = 0;
         delete this._downPointerIds[pointerId];
-        var canNotifyClick = notifyClick;
+        let canNotifyClick = notifyClick;
         if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
             canNotifyClick = this.onPointerClickObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
         }
-        var canNotify = this.onPointerUpObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
+        const canNotify = this.onPointerUpObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
         if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick, pi);
         }
-    };
+        if (pi && this.uniqueId !== this._host.rootContainer.uniqueId) {
+            this._host._capturedPointerIds.delete(pi.event.pointerId);
+        }
+    }
     /**
      * @param pointerId
      * @hidden
      */
-    Control.prototype._forcePointerUp = function (pointerId) {
-        if (pointerId === void 0) { pointerId = null; }
+    _forcePointerUp(pointerId = null) {
         if (pointerId !== null) {
             this._onPointerUp(this, Vector2.Zero(), pointerId, 0, true);
         }
         else {
-            for (var key in this._downPointerIds) {
+            for (const key in this._downPointerIds) {
                 this._onPointerUp(this, Vector2.Zero(), +key, 0, true);
             }
         }
-    };
+    }
     /**
      * @param deltaX
      * @param deltaY
      * @hidden
      */
-    Control.prototype._onWheelScroll = function (deltaX, deltaY) {
+    _onWheelScroll(deltaX, deltaY) {
         if (!this._isEnabled) {
             return;
         }
-        var canNotify = this.onWheelObservable.notifyObservers(new Vector2(deltaX, deltaY));
+        const canNotify = this.onWheelObservable.notifyObservers(new Vector2(deltaX, deltaY));
         if (canNotify && this.parent != null) {
             this.parent._onWheelScroll(deltaX, deltaY);
         }
-    };
+    }
     /** @hidden */
-    Control.prototype._onCanvasBlur = function () { };
+    _onCanvasBlur() { }
     /**
      * @param type
      * @param x
@@ -2080,14 +1826,14 @@ var Control = /** @class */ (function () {
      * @param deltaY
      * @hidden
      */
-    Control.prototype._processObservables = function (type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY) {
+    _processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY) {
         if (!this._isEnabled) {
             return false;
         }
         this._dummyVector2.copyFromFloats(x, y);
         if (type === PointerEventTypes.POINTERMOVE) {
             this._onPointerMove(this, this._dummyVector2, pointerId, pi);
-            var previousControlOver = this._host._lastControlOver[pointerId];
+            const previousControlOver = this._host._lastControlOver[pointerId];
             if (previousControlOver && previousControlOver !== this) {
                 previousControlOver._onPointerOut(this, pi);
             }
@@ -2117,8 +1863,8 @@ var Control = /** @class */ (function () {
             }
         }
         return false;
-    };
-    Control.prototype._prepareFont = function () {
+    }
+    _prepareFont() {
         if (!this._font && !this._fontSet) {
             return;
         }
@@ -2130,13 +1876,13 @@ var Control = /** @class */ (function () {
         }
         this._fontOffset = Control._GetFontOffset(this._font);
         //children need to be refreshed
-        this.getDescendants().forEach(function (child) { return child._markAllAsDirty(); });
-    };
+        this.getDescendants().forEach((child) => child._markAllAsDirty());
+    }
     /**
      * Serializes the current control
      * @param serializationObject defined the JSON serialized object
      */
-    Control.prototype.serialize = function (serializationObject) {
+    serialize(serializationObject) {
         SerializationHelper.Serialize(this, serializationObject);
         serializationObject.name = this.name;
         serializationObject.className = this.getClassName();
@@ -2146,13 +1892,13 @@ var Control = /** @class */ (function () {
             serializationObject.fontWeight = this.fontWeight;
             serializationObject.fontStyle = this.fontStyle;
         }
-    };
+    }
     /**
      * @param serializedObject
      * @param host
      * @hidden
      */
-    Control.prototype._parseFromContent = function (serializedObject, host) {
+    _parseFromContent(serializedObject, host) {
         if (serializedObject.fontFamily) {
             this.fontFamily = serializedObject.fontFamily;
         }
@@ -2165,9 +1911,9 @@ var Control = /** @class */ (function () {
         if (serializedObject.fontStyle) {
             this.fontStyle = serializedObject.fontStyle;
         }
-    };
+    }
     /** Releases associated resources */
-    Control.prototype.dispose = function () {
+    dispose() {
         this.onDirtyObservable.clear();
         this.onBeforeDrawObservable.clear();
         this.onAfterDrawObservable.clear();
@@ -2187,7 +1933,7 @@ var Control = /** @class */ (function () {
             this.parent = null;
         }
         if (this._host) {
-            var index = this._host._linkedControls.indexOf(this);
+            const index = this._host._linkedControls.indexOf(this);
             if (index > -1) {
                 this.linkWithMesh(null);
             }
@@ -2195,84 +1941,60 @@ var Control = /** @class */ (function () {
         // Callback
         this.onDisposeObservable.notifyObservers(this);
         this.onDisposeObservable.clear();
-    };
-    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
-        /** HORIZONTAL_ALIGNMENT_LEFT */
-        get: function () {
-            return Control._HORIZONTAL_ALIGNMENT_LEFT;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
-        /** HORIZONTAL_ALIGNMENT_RIGHT */
-        get: function () {
-            return Control._HORIZONTAL_ALIGNMENT_RIGHT;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
-        /** HORIZONTAL_ALIGNMENT_CENTER */
-        get: function () {
-            return Control._HORIZONTAL_ALIGNMENT_CENTER;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
-        /** VERTICAL_ALIGNMENT_TOP */
-        get: function () {
-            return Control._VERTICAL_ALIGNMENT_TOP;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
-        /** VERTICAL_ALIGNMENT_BOTTOM */
-        get: function () {
-            return Control._VERTICAL_ALIGNMENT_BOTTOM;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
-        /** VERTICAL_ALIGNMENT_CENTER */
-        get: function () {
-            return Control._VERTICAL_ALIGNMENT_CENTER;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    }
+    /** HORIZONTAL_ALIGNMENT_LEFT */
+    static get HORIZONTAL_ALIGNMENT_LEFT() {
+        return Control._HORIZONTAL_ALIGNMENT_LEFT;
+    }
+    /** HORIZONTAL_ALIGNMENT_RIGHT */
+    static get HORIZONTAL_ALIGNMENT_RIGHT() {
+        return Control._HORIZONTAL_ALIGNMENT_RIGHT;
+    }
+    /** HORIZONTAL_ALIGNMENT_CENTER */
+    static get HORIZONTAL_ALIGNMENT_CENTER() {
+        return Control._HORIZONTAL_ALIGNMENT_CENTER;
+    }
+    /** VERTICAL_ALIGNMENT_TOP */
+    static get VERTICAL_ALIGNMENT_TOP() {
+        return Control._VERTICAL_ALIGNMENT_TOP;
+    }
+    /** VERTICAL_ALIGNMENT_BOTTOM */
+    static get VERTICAL_ALIGNMENT_BOTTOM() {
+        return Control._VERTICAL_ALIGNMENT_BOTTOM;
+    }
+    /** VERTICAL_ALIGNMENT_CENTER */
+    static get VERTICAL_ALIGNMENT_CENTER() {
+        return Control._VERTICAL_ALIGNMENT_CENTER;
+    }
     /**
      * @param font
      * @hidden
      */
-    Control._GetFontOffset = function (font) {
+    static _GetFontOffset(font) {
         if (Control._FontHeightSizes[font]) {
             return Control._FontHeightSizes[font];
         }
-        var engine = EngineStore.LastCreatedEngine;
+        const engine = EngineStore.LastCreatedEngine;
         if (!engine) {
             throw new Error("Invalid engine. Unable to create a canvas.");
         }
-        var result = engine.getFontOffset(font);
+        const result = engine.getFontOffset(font);
         Control._FontHeightSizes[font] = result;
         return result;
-    };
+    }
     /**
      * Creates a Control from parsed data
      * @param serializedObject defines parsed data
      * @param host defines the hosting AdvancedDynamicTexture
      * @returns a new Control
      */
-    Control.Parse = function (serializedObject, host) {
-        var controlType = Tools.Instantiate("BABYLON.GUI." + serializedObject.className);
-        var control = SerializationHelper.Parse(function () { return new controlType(); }, serializedObject, null);
+    static Parse(serializedObject, host) {
+        const controlType = Tools.Instantiate("BABYLON.GUI." + serializedObject.className);
+        const control = SerializationHelper.Parse(() => new controlType(), serializedObject, null);
         control.name = serializedObject.name;
         control._parseFromContent(serializedObject, host);
         return control;
-    };
+    }
     /**
      * @param x
      * @param y
@@ -2281,7 +2003,7 @@ var Control = /** @class */ (function () {
      * @param context
      * @hidden
      */
-    Control.drawEllipse = function (x, y, width, height, context) {
+    static drawEllipse(x, y, width, height, context) {
         context.translate(x, y);
         context.scale(width, height);
         context.beginPath();
@@ -2289,152 +2011,150 @@ var Control = /** @class */ (function () {
         context.closePath();
         context.scale(1 / width, 1 / height);
         context.translate(-x, -y);
-    };
-    /**
-     * Gets or sets a boolean indicating if alpha must be an inherited value (false by default)
-     */
-    Control.AllowAlphaInheritance = false;
-    Control._ClipMeasure = new Measure(0, 0, 0, 0);
-    // Statics
-    Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
-    Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
-    Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
-    Control._VERTICAL_ALIGNMENT_TOP = 0;
-    Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
-    Control._VERTICAL_ALIGNMENT_CENTER = 2;
-    Control._FontHeightSizes = {};
-    Control.AddHeader = function () { };
-    __decorate([
-        serialize()
-    ], Control.prototype, "metadata", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isHitTestVisible", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isPointerBlocker", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isFocusInvisible", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "clipChildren", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "clipContent", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "useBitmapCache", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "shadowOffsetX", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "shadowOffsetY", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "shadowBlur", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "shadowColor", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "hoverCursor", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "fontOffset", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "alpha", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "scaleX", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "scaleY", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "rotation", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "transformCenterY", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "transformCenterX", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "horizontalAlignment", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "verticalAlignment", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "fixedRatio", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "width", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "height", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "style", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "color", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "zIndex", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "notRenderable", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isVisible", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "descendantsOnlyPadding", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "paddingLeft", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "paddingRight", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "paddingTop", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "paddingBottom", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "left", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "top", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "linkOffsetX", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "linkOffsetY", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isEnabled", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "disabledColor", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "disabledColorItem", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "overlapGroup", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "overlapDeltaMultiplier", void 0);
-    return Control;
-}());
-export { Control };
+    }
+}
+/**
+ * Gets or sets a boolean indicating if alpha must be an inherited value (false by default)
+ */
+Control.AllowAlphaInheritance = false;
+Control._ClipMeasure = new Measure(0, 0, 0, 0);
+// Statics
+Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
+Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
+Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
+Control._VERTICAL_ALIGNMENT_TOP = 0;
+Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
+Control._VERTICAL_ALIGNMENT_CENTER = 2;
+Control._FontHeightSizes = {};
+Control.AddHeader = () => { };
+__decorate([
+    serialize()
+], Control.prototype, "metadata", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "isHitTestVisible", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "isPointerBlocker", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "isFocusInvisible", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "clipChildren", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "clipContent", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "useBitmapCache", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "shadowOffsetX", null);
+__decorate([
+    serialize()
+], Control.prototype, "shadowOffsetY", null);
+__decorate([
+    serialize()
+], Control.prototype, "shadowBlur", null);
+__decorate([
+    serialize()
+], Control.prototype, "shadowColor", null);
+__decorate([
+    serialize()
+], Control.prototype, "hoverCursor", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "fontOffset", null);
+__decorate([
+    serialize()
+], Control.prototype, "alpha", null);
+__decorate([
+    serialize()
+], Control.prototype, "scaleX", null);
+__decorate([
+    serialize()
+], Control.prototype, "scaleY", null);
+__decorate([
+    serialize()
+], Control.prototype, "rotation", null);
+__decorate([
+    serialize()
+], Control.prototype, "transformCenterY", null);
+__decorate([
+    serialize()
+], Control.prototype, "transformCenterX", null);
+__decorate([
+    serialize()
+], Control.prototype, "horizontalAlignment", null);
+__decorate([
+    serialize()
+], Control.prototype, "verticalAlignment", null);
+__decorate([
+    serialize()
+], Control.prototype, "fixedRatio", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "width", null);
+__decorate([
+    serialize()
+], Control.prototype, "height", null);
+__decorate([
+    serialize()
+], Control.prototype, "style", null);
+__decorate([
+    serialize()
+], Control.prototype, "color", null);
+__decorate([
+    serialize()
+], Control.prototype, "zIndex", null);
+__decorate([
+    serialize()
+], Control.prototype, "notRenderable", null);
+__decorate([
+    serialize()
+], Control.prototype, "isVisible", null);
+__decorate([
+    serialize()
+], Control.prototype, "descendantsOnlyPadding", null);
+__decorate([
+    serialize()
+], Control.prototype, "paddingLeft", null);
+__decorate([
+    serialize()
+], Control.prototype, "paddingRight", null);
+__decorate([
+    serialize()
+], Control.prototype, "paddingTop", null);
+__decorate([
+    serialize()
+], Control.prototype, "paddingBottom", null);
+__decorate([
+    serialize()
+], Control.prototype, "left", null);
+__decorate([
+    serialize()
+], Control.prototype, "top", null);
+__decorate([
+    serialize()
+], Control.prototype, "linkOffsetX", null);
+__decorate([
+    serialize()
+], Control.prototype, "linkOffsetY", null);
+__decorate([
+    serialize()
+], Control.prototype, "isEnabled", null);
+__decorate([
+    serialize()
+], Control.prototype, "disabledColor", null);
+__decorate([
+    serialize()
+], Control.prototype, "disabledColorItem", null);
+__decorate([
+    serialize()
+], Control.prototype, "overlapGroup", void 0);
+__decorate([
+    serialize()
+], Control.prototype, "overlapDeltaMultiplier", void 0);
 RegisterClass("BABYLON.GUI.Control", Control);
 //# sourceMappingURL=control.js.map