babylonjs-gui 5.43.0 → 5.43.2

package/babylon.gui.js

@@ -2092,6 +2092,14 @@ var Button = /** @class */ (function (_super) {
         }
         return true;
     };
+    Button.prototype._getRectangleFill = function (context) {
+        if (this.isEnabled) {
+            return this._getBackgroundColor(context);
+        }
+        else {
+            return this._disabledColor;
+        }
+    };
     /**
      * @internal
      */
@@ -3869,7 +3877,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "Container": () => (/* binding */ Container)
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Misc/observable */ "core/Misc/observable");
+/* harmony import */ var core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Misc/tools */ "core/Misc/observable");
 /* harmony import */ var core_Misc_logger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "../../../lts/gui/dist/2D/controls/control.js");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../measure */ "../../../lts/gui/dist/2D/measure.js");
@@ -3883,6 +3891,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * Root class for 2D containers
  * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#containers
@@ -3903,6 +3912,8 @@ var Container = /** @class */ (function (_super) {
         /** @internal */
         _this._background = "";
         /** @internal */
+        _this._backgroundGradient = null;
+        /** @internal */
         _this._adaptWidthToChildren = false;
         /** @internal */
         _this._adaptHeightToChildren = false;
@@ -3994,6 +4005,21 @@ var Container = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Container.prototype, "backgroundGradient", {
+        /** Gets or sets background gradient color. Takes precedence over background */
+        get: function () {
+            return this._backgroundGradient;
+        },
+        set: function (value) {
+            if (this._backgroundGradient === value) {
+                return;
+            }
+            this._backgroundGradient = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Container.prototype, "children", {
         /** Gets the list of children */
         get: function () {
@@ -4164,11 +4190,14 @@ var Container = /** @class */ (function (_super) {
             this._children[index]._markAllAsDirty();
         }
     };
+    Container.prototype._getBackgroundColor = function (context) {
+        return this._backgroundGradient ? this._backgroundGradient.getCanvasGradient(context) : this._background;
+    };
     /**
      * @internal
      */
     Container.prototype._localDraw = function (context) {
-        if (this._background) {
+        if (this._background || this._backgroundGradient) {
             context.save();
             if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                 context.shadowColor = this.shadowColor;
@@ -4176,7 +4205,7 @@ var Container = /** @class */ (function (_super) {
                 context.shadowOffsetX = this.shadowOffsetX;
                 context.shadowOffsetY = this.shadowOffsetY;
             }
-            context.fillStyle = this._background;
+            context.fillStyle = this._getBackgroundColor(context);
             context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
             context.restore();
         }
@@ -4387,6 +4416,10 @@ var Container = /** @class */ (function (_super) {
      */
     Container.prototype.serialize = function (serializationObject) {
         _super.prototype.serialize.call(this, serializationObject);
+        if (this.backgroundGradient) {
+            serializationObject.backgroundGradient = {};
+            this.backgroundGradient.serialize(serializationObject.backgroundGradient);
+        }
         if (!this.children.length) {
             return;
         }
@@ -4411,13 +4444,20 @@ var Container = /** @class */ (function (_super) {
      * @internal
      */
     Container.prototype._parseFromContent = function (serializedObject, host) {
+        var _a;
         _super.prototype._parseFromContent.call(this, serializedObject, host);
         this._link(host);
+        // Gradient
+        if (serializedObject.backgroundGradient) {
+            var className = core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__.Tools.Instantiate("BABYLON.GUI." + serializedObject.backgroundGradient.className);
+            this._backgroundGradient = new className();
+            (_a = this._backgroundGradient) === null || _a === void 0 ? void 0 : _a.parse(serializedObject.backgroundGradient);
+        }
         if (!serializedObject.children) {
             return;
         }
-        for (var _i = 0, _a = serializedObject.children; _i < _a.length; _i++) {
-            var childData = _a[_i];
+        for (var _i = 0, _b = serializedObject.children; _i < _b.length; _i++) {
+            var childData = _b[_i];
             this.addControl(_control__WEBPACK_IMPORTED_MODULE_2__.Control.Parse(childData, host));
         }
     };
@@ -4436,6 +4476,9 @@ var Container = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__.serialize)()
     ], Container.prototype, "background", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_logger__WEBPACK_IMPORTED_MODULE_1__.serialize)()
+    ], Container.prototype, "backgroundGradient", null);
     return Container;
 }(_control__WEBPACK_IMPORTED_MODULE_2__.Control));
 
@@ -4554,6 +4597,7 @@ var Control = /** @class */ (function () {
         this._disabledColor = "#9a9a9a";
         this._disabledColorItem = "#6a6a6a";
         this._isReadOnly = false;
+        this._gradient = null;
         /** @internal */
         this._rebuildLayout = false;
         /** @internal */
@@ -5203,6 +5247,21 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "gradient", {
+        /** Gets or sets gradient. Setting a gradient will override the color */
+        get: function () {
+            return this._gradient;
+        },
+        set: function (value) {
+            if (this._gradient === value) {
+                return;
+            }
+            this._gradient = 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 () {
@@ -6046,6 +6105,9 @@ var Control = /** @class */ (function () {
     Control.prototype._renderHighlightSpecific = function (context) {
         context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
     };
+    Control.prototype._getColor = function (context) {
+        return this.gradient ? this.gradient.getCanvasGradient(context) : this.color;
+    };
     /**
      * @internal
      */
@@ -6063,8 +6125,8 @@ var Control = /** @class */ (function () {
         if (this._font) {
             context.font = this._font;
         }
-        if (this._color) {
-            context.fillStyle = this._color;
+        if (this._color || this.gradient) {
+            context.fillStyle = this._getColor(context);
         }
         if (Control.AllowAlphaInheritance) {
             context.globalAlpha *= this._alpha;
@@ -6604,6 +6666,10 @@ var Control = /** @class */ (function () {
             serializationObject.fontWeight = this.fontWeight;
             serializationObject.fontStyle = this.fontStyle;
         }
+        if (this._gradient) {
+            serializationObject.gradient = {};
+            this._gradient.serialize(serializationObject.gradient);
+        }
         // Animations
         core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.SerializationHelper.AppendSerializedAnimations(this, serializationObject);
     };
@@ -6611,6 +6677,7 @@ var Control = /** @class */ (function () {
      * @internal
      */
     Control.prototype._parseFromContent = function (serializedObject, host) {
+        var _a;
         if (serializedObject.fontFamily) {
             this.fontFamily = serializedObject.fontFamily;
         }
@@ -6623,6 +6690,12 @@ var Control = /** @class */ (function () {
         if (serializedObject.fontStyle) {
             this.fontStyle = serializedObject.fontStyle;
         }
+        // Gradient
+        if (serializedObject.gradient) {
+            var className = core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Tools.Instantiate("BABYLON.GUI." + serializedObject.gradient.className);
+            this._gradient = new className();
+            (_a = this._gradient) === null || _a === void 0 ? void 0 : _a.parse(serializedObject.gradient);
+        }
         // Animations
         if (serializedObject.animations) {
             this.animations = [];
@@ -6850,6 +6923,9 @@ var Control = /** @class */ (function () {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.serialize)()
     ], Control.prototype, "color", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.serialize)()
+    ], Control.prototype, "gradient", null);
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.serialize)()
     ], Control.prototype, "zIndex", null);
@@ -7232,8 +7308,8 @@ var Ellipse = /** @class */ (function (_super) {
             context.shadowOffsetY = this.shadowOffsetY;
         }
         _control__WEBPACK_IMPORTED_MODULE_2__.Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);
-        if (this._background) {
-            context.fillStyle = this._background;
+        if (this._backgroundGradient || this._background) {
+            context.fillStyle = this._getBackgroundColor(context);
             context.fill();
         }
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -7398,6 +7474,344 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "../../../lts/gui/dist/2D/controls/gradient/BaseGradient.js":
+/*!******************************************************************!*\
+  !*** ../../../lts/gui/dist/2D/controls/gradient/BaseGradient.js ***!
+  \******************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "BaseGradient": () => (/* binding */ BaseGradient)
+/* harmony export */ });
+/*
+ * Base Gradient class. Should not be used directly.
+ */
+/**
+ * Class that serves as a base for all the gradients created from context.
+ */
+var BaseGradient = /** @class */ (function () {
+    function BaseGradient() {
+        this._colorStops = [];
+        this._gradientDirty = true;
+    }
+    BaseGradient.prototype._addColorStopsToCanvasGradient = function () {
+        for (var _i = 0, _a = this._colorStops; _i < _a.length; _i++) {
+            var stop_1 = _a[_i];
+            this._canvasGradient.addColorStop(stop_1.offset, stop_1.color);
+        }
+    };
+    /**
+     * If there are any changes or the context changed, regenerate the canvas gradient object. Else,
+     * reuse the existing gradient.
+     **/
+    BaseGradient.prototype.getCanvasGradient = function (context) {
+        if (this._gradientDirty || this._context !== context) {
+            this._context = context;
+            this._canvasGradient = this._createCanvasGradient(context);
+            this._addColorStopsToCanvasGradient();
+            this._gradientDirty = false;
+        }
+        return this._canvasGradient;
+    };
+    /**
+     * Adds a new color stop to the gradient.
+     * @param offset the offset of the stop on the gradient. Should be between 0 and 1
+     * @param color the color of the stop
+     */
+    BaseGradient.prototype.addColorStop = function (offset, color) {
+        this._colorStops.push({ offset: offset, color: color });
+        this._gradientDirty = true;
+    };
+    /**
+     * Removes an existing color stop with the specified offset from the gradient
+     * @param offset the offset of the stop to be removed
+     */
+    BaseGradient.prototype.removeColorStop = function (offset) {
+        this._colorStops = this._colorStops.filter(function (colorStop) { return colorStop.offset !== offset; });
+        this._gradientDirty = true;
+    };
+    /**
+     * Removes all color stops from the gradient
+     */
+    BaseGradient.prototype.clearColorStops = function () {
+        this._colorStops = [];
+        this._gradientDirty = true;
+    };
+    Object.defineProperty(BaseGradient.prototype, "colorStops", {
+        /** Color stops of the gradient */
+        get: function () {
+            return this._colorStops;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Type of the gradient */
+    BaseGradient.prototype.getClassName = function () {
+        return "BaseGradient";
+    };
+    /** Serialize into a json object */
+    BaseGradient.prototype.serialize = function (serializationObject) {
+        serializationObject.colorStops = this._colorStops;
+        serializationObject.className = this.getClassName();
+    };
+    /** Parse from json object */
+    BaseGradient.prototype.parse = function (serializationObject) {
+        this._colorStops = serializationObject.colorStops;
+    };
+    return BaseGradient;
+}());
+
+
+
+/***/ }),
+
+/***/ "../../../lts/gui/dist/2D/controls/gradient/LinearGradient.js":
+/*!********************************************************************!*\
+  !*** ../../../lts/gui/dist/2D/controls/gradient/LinearGradient.js ***!
+  \********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "LinearGradient": () => (/* binding */ LinearGradient)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
+/* harmony import */ var _BaseGradient__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseGradient */ "../../../lts/gui/dist/2D/controls/gradient/BaseGradient.js");
+/* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Misc/typeStore */ "core/Misc/observable");
+/* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+/**
+ * Gradient along a line that connects two coordinates.
+ * These coordinates are relative to the canvas' space, not to any control's space.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
+ */
+var LinearGradient = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(LinearGradient, _super);
+    /**
+     * Creates a new linear gradient
+     * @param x0
+     * @param y0
+     * @param x1
+     * @param y1
+     */
+    function LinearGradient(x0, y0, x1, y1) {
+        var _this = _super.call(this) || this;
+        _this._x0 = x0 !== null && x0 !== void 0 ? x0 : 0;
+        _this._y0 = y0 !== null && y0 !== void 0 ? y0 : 0;
+        _this._x1 = x1 !== null && x1 !== void 0 ? x1 : 0;
+        _this._y1 = y1 !== null && y1 !== void 0 ? y1 : 0;
+        return _this;
+    }
+    LinearGradient.prototype._createCanvasGradient = function (context) {
+        return context.createLinearGradient(this._x0, this._y0, this._x1, this._y1);
+    };
+    Object.defineProperty(LinearGradient.prototype, "x0", {
+        /** X axis coordinate of the starting point in the line */
+        get: function () {
+            return this._x0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LinearGradient.prototype, "x1", {
+        /** X axis coordinate of the ending point in the line */
+        get: function () {
+            return this._x1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LinearGradient.prototype, "y0", {
+        /** Y axis coordinate of the starting point in the line */
+        get: function () {
+            return this._y0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LinearGradient.prototype, "y1", {
+        /** Y axis coordinate of the ending point in the line */
+        get: function () {
+            return this._y1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Class name of the gradient
+     * @returns the class name of the gradient
+     */
+    LinearGradient.prototype.getClassName = function () {
+        return "LinearGradient";
+    };
+    /**
+     * Serializes this gradient
+     * @param serializationObject the object to serialize to
+     */
+    LinearGradient.prototype.serialize = function (serializationObject) {
+        _super.prototype.serialize.call(this, serializationObject);
+        serializationObject.x0 = this._x0;
+        serializationObject.y0 = this._y0;
+        serializationObject.x1 = this._x1;
+        serializationObject.y1 = this._y1;
+    };
+    /**
+     * Parses a gradient from a serialization object
+     * @param serializationObject the object to parse from
+     */
+    LinearGradient.prototype.parse = function (serializationObject) {
+        _super.prototype.parse.call(this, serializationObject);
+        this._x0 = serializationObject.x0;
+        this._y0 = serializationObject.y0;
+        this._x1 = serializationObject.x1;
+        this._y1 = serializationObject.y1;
+    };
+    return LinearGradient;
+}(_BaseGradient__WEBPACK_IMPORTED_MODULE_1__.BaseGradient));
+
+(0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.RegisterClass)("BABYLON.GUI.LinearGradient", LinearGradient);
+
+
+/***/ }),
+
+/***/ "../../../lts/gui/dist/2D/controls/gradient/RadialGradient.js":
+/*!********************************************************************!*\
+  !*** ../../../lts/gui/dist/2D/controls/gradient/RadialGradient.js ***!
+  \********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "RadialGradient": () => (/* binding */ RadialGradient)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
+/* harmony import */ var _BaseGradient__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseGradient */ "../../../lts/gui/dist/2D/controls/gradient/BaseGradient.js");
+/* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Misc/typeStore */ "core/Misc/observable");
+/* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+/**
+ * Gradient formed from two circles with their own centers and radius.
+ * The coordinates of the circles centers are relative to the canvas' space, not to any control's space.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
+ */
+var RadialGradient = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(RadialGradient, _super);
+    /**
+     * Creates a new radial gradient
+     * @param x0 x coordinate of the first circle's center
+     * @param y0 y coordinate of the first circle's center
+     * @param r0 radius of the first circle
+     * @param x1 x coordinate of the second circle's center
+     * @param y1 y coordinate of the second circle's center
+     * @param r1 radius of the second circle
+     */
+    function RadialGradient(x0, y0, r0, x1, y1, r1) {
+        var _this = _super.call(this) || this;
+        _this._x0 = x0 !== null && x0 !== void 0 ? x0 : 0;
+        _this._y0 = y0 !== null && y0 !== void 0 ? y0 : 0;
+        _this._r0 = r0 !== null && r0 !== void 0 ? r0 : 0;
+        _this._x1 = x1 !== null && x1 !== void 0 ? x1 : 0;
+        _this._y1 = y1 !== null && y1 !== void 0 ? y1 : 0;
+        _this._r1 = r1 !== null && r1 !== void 0 ? r1 : 0;
+        return _this;
+    }
+    RadialGradient.prototype._createCanvasGradient = function (context) {
+        return context.createRadialGradient(this._x0, this._y0, this._r0, this._x1, this._y1, this._r1);
+    };
+    Object.defineProperty(RadialGradient.prototype, "x0", {
+        /** x coordinate of the first circle's center */
+        get: function () {
+            return this._x0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RadialGradient.prototype, "x1", {
+        /** x coordinate of the second circle's center */
+        get: function () {
+            return this._x1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RadialGradient.prototype, "y0", {
+        /** y coordinate of the first circle's center */
+        get: function () {
+            return this._y0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RadialGradient.prototype, "y1", {
+        /** y coordinate of the second circle's center */
+        get: function () {
+            return this._y1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RadialGradient.prototype, "r0", {
+        /** radius of the first circle */
+        get: function () {
+            return this._r0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RadialGradient.prototype, "r1", {
+        /** radius of the second circle */
+        get: function () {
+            return this._r1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Class name of the gradient
+     * @returns the class name of the gradient
+     */
+    RadialGradient.prototype.getClassName = function () {
+        return "RadialGradient";
+    };
+    /**
+     * Serializes this gradient
+     * @param serializationObject the object to serialize to
+     */
+    RadialGradient.prototype.serialize = function (serializationObject) {
+        _super.prototype.serialize.call(this, serializationObject);
+        serializationObject.x0 = this._x0;
+        serializationObject.y0 = this._y0;
+        serializationObject.r0 = this._r0;
+        serializationObject.x1 = this._x1;
+        serializationObject.y1 = this._y1;
+        serializationObject.r1 = this._r1;
+    };
+    /**
+     * Parses a gradient from a serialization object
+     * @param serializationObject the object to parse from
+     */
+    RadialGradient.prototype.parse = function (serializationObject) {
+        _super.prototype.parse.call(this, serializationObject);
+        this._x0 = serializationObject.x0;
+        this._y0 = serializationObject.y0;
+        this._r0 = serializationObject.r0;
+        this._x1 = serializationObject.x1;
+        this._y1 = serializationObject.y1;
+        this._r1 = serializationObject.r1;
+    };
+    return RadialGradient;
+}(_BaseGradient__WEBPACK_IMPORTED_MODULE_1__.BaseGradient));
+
+(0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.RegisterClass)("BABYLON.GUI.RadialGradient", RadialGradient);
+
+
 /***/ }),
 
 /***/ "../../../lts/gui/dist/2D/controls/grid.js":
@@ -8449,14 +8863,31 @@ var Image = /** @class */ (function (_super) {
                 var cachedData = Image.SourceImgCache.get(value);
                 this._domImage = cachedData.img;
                 cachedData.timesUsed += 1;
-                this._onImageLoaded();
+                if (cachedData.loaded) {
+                    this._onImageLoaded();
+                }
+                else {
+                    cachedData.waitingForLoadCallback.push(this._onImageLoaded.bind(this));
+                }
                 return;
             }
             this._domImage = engine.createCanvasImage();
             if (value) {
-                Image.SourceImgCache.set(value, { img: this._domImage, timesUsed: 1 });
+                Image.SourceImgCache.set(value, { img: this._domImage, timesUsed: 1, loaded: false, waitingForLoadCallback: [this._onImageLoaded.bind(this)] });
             }
             this._domImage.onload = function () {
+                if (value) {
+                    var cachedData = Image.SourceImgCache.get(value);
+                    if (cachedData) {
+                        cachedData.loaded = true;
+                        for (var _i = 0, _a = cachedData.waitingForLoadCallback; _i < _a.length; _i++) {
+                            var waitingCallback = _a[_i];
+                            waitingCallback();
+                        }
+                        cachedData.waitingForLoadCallback.length = 0;
+                        return;
+                    }
+                }
                 _this._onImageLoaded();
             };
             if (value) {
@@ -8820,6 +9251,9 @@ var Image = /** @class */ (function (_super) {
         this.onSVGAttributesComputedObservable.clear();
         this._removeCacheUsage(this._source);
     };
+    /**
+     * Cache of images to avoid loading the same image multiple times
+     */
     Image.SourceImgCache = new Map();
     // Static
     /** STRETCH_NONE */
@@ -8896,6 +9330,7 @@ var Image = /** @class */ (function (_super) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "BaseGradient": () => (/* reexport safe */ _gradient_BaseGradient__WEBPACK_IMPORTED_MODULE_31__.BaseGradient),
 /* harmony export */   "BaseSlider": () => (/* reexport safe */ _sliders_baseSlider__WEBPACK_IMPORTED_MODULE_25__.BaseSlider),
 /* harmony export */   "Button": () => (/* reexport safe */ _button__WEBPACK_IMPORTED_MODULE_0__.Button),
 /* harmony export */   "Checkbox": () => (/* reexport safe */ _checkbox__WEBPACK_IMPORTED_MODULE_1__.Checkbox),
@@ -8915,7 +9350,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "InputTextArea": () => (/* reexport safe */ _inputTextArea__WEBPACK_IMPORTED_MODULE_11__.InputTextArea),
 /* harmony export */   "KeyPropertySet": () => (/* reexport safe */ _virtualKeyboard__WEBPACK_IMPORTED_MODULE_22__.KeyPropertySet),
 /* harmony export */   "Line": () => (/* reexport safe */ _line__WEBPACK_IMPORTED_MODULE_13__.Line),
+/* harmony export */   "LinearGradient": () => (/* reexport safe */ _gradient_LinearGradient__WEBPACK_IMPORTED_MODULE_32__.LinearGradient),
 /* harmony export */   "MultiLine": () => (/* reexport safe */ _multiLine__WEBPACK_IMPORTED_MODULE_14__.MultiLine),
+/* harmony export */   "RadialGradient": () => (/* reexport safe */ _gradient_RadialGradient__WEBPACK_IMPORTED_MODULE_33__.RadialGradient),
 /* harmony export */   "RadioButton": () => (/* reexport safe */ _radioButton__WEBPACK_IMPORTED_MODULE_15__.RadioButton),
 /* harmony export */   "RadioGroup": () => (/* reexport safe */ _selector__WEBPACK_IMPORTED_MODULE_17__.RadioGroup),
 /* harmony export */   "Rectangle": () => (/* reexport safe */ _rectangle__WEBPACK_IMPORTED_MODULE_23__.Rectangle),
@@ -8964,6 +9401,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./sliders/scrollBar */ "../../../lts/gui/dist/2D/controls/sliders/scrollBar.js");
 /* harmony import */ var _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./sliders/imageScrollBar */ "../../../lts/gui/dist/2D/controls/sliders/imageScrollBar.js");
 /* harmony import */ var _statics__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./statics */ "../../../lts/gui/dist/2D/controls/statics.js");
+/* harmony import */ var _gradient_BaseGradient__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./gradient/BaseGradient */ "../../../lts/gui/dist/2D/controls/gradient/BaseGradient.js");
+/* harmony import */ var _gradient_LinearGradient__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./gradient/LinearGradient */ "../../../lts/gui/dist/2D/controls/gradient/LinearGradient.js");
+/* harmony import */ var _gradient_RadialGradient__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./gradient/RadialGradient */ "../../../lts/gui/dist/2D/controls/gradient/RadialGradient.js");
+
+
+
 
 
 
@@ -11474,7 +11917,7 @@ var Line = /** @class */ (function (_super) {
             context.shadowOffsetY = this.shadowOffsetY;
         }
         this._applyStates(context);
-        context.strokeStyle = this.color;
+        context.strokeStyle = this._getColor(context);
         context.lineWidth = this._lineWidth;
         context.setLineDash(this._dash);
         context.beginPath();
@@ -12151,6 +12594,9 @@ var Rectangle = /** @class */ (function (_super) {
         }
         return 0;
     };
+    Rectangle.prototype._getRectangleFill = function (context) {
+        return this._getBackgroundColor(context);
+    };
     Rectangle.prototype._localDraw = function (context) {
         context.save();
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -12159,8 +12605,8 @@ var Rectangle = /** @class */ (function (_super) {
             context.shadowOffsetX = this.shadowOffsetX;
             context.shadowOffsetY = this.shadowOffsetY;
         }
-        if (this._background) {
-            context.fillStyle = this.typeName === "Button" ? (this.isEnabled ? this._background : this.disabledColor) : this._background;
+        if (this._background || this._backgroundGradient) {
+            context.fillStyle = this._getRectangleFill(context);
             if (this._cornerRadius) {
                 this._drawRoundedRect(context, this._thickness / 2);
                 context.fill();
@@ -12175,8 +12621,8 @@ var Rectangle = /** @class */ (function (_super) {
                 context.shadowOffsetX = 0;
                 context.shadowOffsetY = 0;
             }
-            if (this.color) {
-                context.strokeStyle = this.color;
+            if (this.color || this.gradient) {
+                context.strokeStyle = this.gradient ? this.gradient.getCanvasGradient(context) : this.color;
             }
             context.lineWidth = this._thickness;
             if (this._cornerRadius) {
@@ -14815,12 +15261,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "../../../lts/gui/dist/2D/controls/sliders/baseSlider.js");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../measure */ "../../../lts/gui/dist/2D/measure.js");
-/* harmony import */ var core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core/Misc/decorators */ "core/Misc/observable");
+/* harmony import */ var core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core/Misc/typeStore */ "core/Misc/observable");
 /* harmony import */ var core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__);
 
 
 
 
+
+
 /**
  * Class used to create slider controls
  */
@@ -14837,6 +15285,7 @@ var ScrollBar = /** @class */ (function (_super) {
         _this._borderColor = "white";
         _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__.Measure(0, 0, 0, 0);
         _this._invertScrollDirection = false;
+        _this._backgroundGradient = null;
         return _this;
     }
     Object.defineProperty(ScrollBar.prototype, "borderColor", {
@@ -14869,6 +15318,21 @@ var ScrollBar = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(ScrollBar.prototype, "backgroundGradient", {
+        /** Gets or sets background gradient. Takes precedence over gradient. */
+        get: function () {
+            return this._backgroundGradient;
+        },
+        set: function (value) {
+            if (this._backgroundGradient === value) {
+                return;
+            }
+            this._backgroundGradient = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(ScrollBar.prototype, "invertScrollDirection", {
         /** Inverts the scrolling direction (default: false) */
         get: function () {
@@ -14893,16 +15357,19 @@ var ScrollBar = /** @class */ (function (_super) {
         }
         return thumbThickness;
     };
+    ScrollBar.prototype._getBackgroundColor = function (context) {
+        return this._backgroundGradient ? this._backgroundGradient.getCanvasGradient(context) : this._background;
+    };
     ScrollBar.prototype._draw = function (context) {
         context.save();
         this._applyStates(context);
         this._prepareRenderingData("rectangle");
         var left = this._renderLeft;
         var thumbPosition = this._getThumbPosition();
-        context.fillStyle = this._background;
+        context.fillStyle = this._getBackgroundColor(context);
         context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
         // Value bar
-        context.fillStyle = this.color;
+        context.fillStyle = this._getColor(context);
         // Thumb
         if (this.isVertical) {
             this._tempMeasure.left = left - this._effectiveBarOffset;
@@ -14962,6 +15429,21 @@ var ScrollBar = /** @class */ (function (_super) {
         this._first = true;
         return _super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi);
     };
+    ScrollBar.prototype.serialize = function (serializationObject) {
+        _super.prototype.serialize.call(this, serializationObject);
+        if (this.backgroundGradient) {
+            serializationObject.backgroundGradient = {};
+            this.backgroundGradient.serialize(serializationObject.backgroundGradient);
+        }
+    };
+    ScrollBar.prototype._parseFromContent = function (serializationObject, host) {
+        _super.prototype._parseFromContent.call(this, serializationObject, host);
+        if (serializationObject.backgroundGradient) {
+            var className = core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__.Tools.Instantiate("BABYLON.GUI." + serializationObject.backgroundGradient.className);
+            this.backgroundGradient = new className();
+            this.backgroundGradient.parse(serializationObject.backgroundGradient);
+        }
+    };
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__.serialize)()
     ], ScrollBar.prototype, "borderColor", null);
@@ -14974,6 +15456,7 @@ var ScrollBar = /** @class */ (function (_super) {
     return ScrollBar;
 }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__.BaseSlider));
 
+(0,core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__.RegisterClass)("BABYLON.GUI.Scrollbar", ScrollBar);
 
 
 /***/ }),
@@ -14990,12 +15473,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "../../../lts/gui/dist/2D/controls/sliders/baseSlider.js");
-/* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Misc/decorators */ "core/Misc/observable");
+/* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Misc/tools */ "core/Misc/observable");
 /* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
 
 
 
 
+
 /**
  * Class used to create slider controls
  */
@@ -15013,6 +15497,7 @@ var Slider = /** @class */ (function (_super) {
         _this._thumbColor = "";
         _this._isThumbCircle = false;
         _this._displayValueBar = true;
+        _this._backgroundGradient = null;
         return _this;
     }
     Object.defineProperty(Slider.prototype, "displayValueBar", {
@@ -15060,6 +15545,21 @@ var Slider = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Slider.prototype, "backgroundGradient", {
+        /** Gets or sets background gradient */
+        get: function () {
+            return this._backgroundGradient;
+        },
+        set: function (value) {
+            if (this._backgroundGradient === value) {
+                return;
+            }
+            this._backgroundGradient = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Slider.prototype, "thumbColor", {
         /** Gets or sets thumb's color */
         get: function () {
@@ -15093,6 +15593,9 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype._getTypeName = function () {
         return "Slider";
     };
+    Slider.prototype._getBackgroundColor = function (context) {
+        return this._backgroundGradient ? this._backgroundGradient.getCanvasGradient(context) : this._background;
+    };
     Slider.prototype._draw = function (context) {
         context.save();
         this._applyStates(context);
@@ -15121,7 +15624,7 @@ var Slider = /** @class */ (function (_super) {
             context.shadowOffsetY = this.shadowOffsetY;
         }
         var thumbPosition = this._getThumbPosition();
-        context.fillStyle = this._background;
+        context.fillStyle = this._getBackgroundColor(context);
         if (this.isVertical) {
             if (this.isThumbClamped) {
                 if (this.isThumbCircle) {
@@ -15160,7 +15663,7 @@ var Slider = /** @class */ (function (_super) {
             context.shadowOffsetY = 0;
         }
         // Value bar
-        context.fillStyle = this.color;
+        context.fillStyle = this._getColor(context);
         if (this._displayValueBar) {
             if (this.isVertical) {
                 if (this.isThumbClamped) {
@@ -15196,7 +15699,7 @@ var Slider = /** @class */ (function (_super) {
             }
         }
         // Thumb
-        context.fillStyle = this._thumbColor || this.color;
+        context.fillStyle = this._thumbColor || this._getColor(context);
         if (this.displayThumb) {
             if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                 context.shadowColor = this.shadowColor;
@@ -15244,6 +15747,22 @@ var Slider = /** @class */ (function (_super) {
         }
         context.restore();
     };
+    Slider.prototype.serialize = function (serializationObject) {
+        _super.prototype.serialize.call(this, serializationObject);
+        if (this.backgroundGradient) {
+            serializationObject.backgroundGradient = {};
+            this.backgroundGradient.serialize(serializationObject.backgroundGradient);
+        }
+    };
+    /** @internal */
+    Slider.prototype._parseFromContent = function (serializedObject, host) {
+        _super.prototype._parseFromContent.call(this, serializedObject, host);
+        if (serializedObject.backgroundGradient) {
+            var className = core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.Tools.Instantiate("BABYLON.GUI." + serializedObject.backgroundGradient.className);
+            this.backgroundGradient = new className();
+            this.backgroundGradient.parse(serializedObject.backgroundGradient);
+        }
+    };
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.serialize)()
     ], Slider.prototype, "displayValueBar", null);
@@ -15668,6 +16187,7 @@ var TextBlock = /** @class */ (function (_super) {
         _this._underline = false;
         _this._lineThrough = false;
         _this._wordDivider = " ";
+        _this._forceResizeWidth = false;
         /**
          * An event triggered after the text is changed
          */
@@ -15913,6 +16433,25 @@ var TextBlock = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TextBlock.prototype, "forceResizeWidth", {
+        /**
+         * By default, if a text block has text wrapping other than Clip, its width
+         * is not resized even if resizeToFit = true. This parameter forces the width
+         * to be resized.
+         */
+        get: function () {
+            return this._forceResizeWidth;
+        },
+        set: function (value) {
+            if (this._forceResizeWidth === value) {
+                return;
+            }
+            this._forceResizeWidth = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     TextBlock.prototype._getTypeName = function () {
         return "TextBlock";
     };
@@ -15932,9 +16471,9 @@ var TextBlock = /** @class */ (function (_super) {
             }
         }
         if (this._resizeToFit) {
-            if (this._textWrapping === TextWrapping.Clip) {
-                var newWidth = (this._paddingLeftInPixels + this._paddingRightInPixels + maxLineWidth) | 0;
-                if (newWidth !== this._width.internalValue) {
+            if (this._textWrapping === TextWrapping.Clip || this._forceResizeWidth) {
+                var newWidth = Math.ceil(this._paddingLeftInPixels + this._paddingRightInPixels + maxLineWidth);
+                if (newWidth !== this._width.getValueInPixel(this._host, this._tempParentMeasure.width)) {
                     this._width.updateInPlace(newWidth, _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__.ValueAndUnit.UNITMODE_PIXEL);
                     this._rebuildLayout = true;
                 }
@@ -16235,6 +16774,9 @@ var TextBlock = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.serialize)()
     ], TextBlock.prototype, "wordDivider", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.serialize)()
+    ], TextBlock.prototype, "forceResizeWidth", null);
     return TextBlock;
 }(_control__WEBPACK_IMPORTED_MODULE_3__.Control));
 
@@ -16948,6 +17490,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "AdvancedDynamicTexture": () => (/* reexport safe */ _advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_1__.AdvancedDynamicTexture),
 /* harmony export */   "AdvancedDynamicTextureInstrumentation": () => (/* reexport safe */ _adtInstrumentation__WEBPACK_IMPORTED_MODULE_2__.AdvancedDynamicTextureInstrumentation),
+/* harmony export */   "BaseGradient": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.BaseGradient),
 /* harmony export */   "BaseSlider": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.BaseSlider),
 /* harmony export */   "Button": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.Button),
 /* harmony export */   "Checkbox": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.Checkbox),
@@ -16967,11 +17510,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "InputTextArea": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.InputTextArea),
 /* harmony export */   "KeyPropertySet": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.KeyPropertySet),
 /* harmony export */   "Line": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.Line),
+/* harmony export */   "LinearGradient": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.LinearGradient),
 /* harmony export */   "MathTools": () => (/* reexport safe */ _math2D__WEBPACK_IMPORTED_MODULE_3__.MathTools),
 /* harmony export */   "Matrix2D": () => (/* reexport safe */ _math2D__WEBPACK_IMPORTED_MODULE_3__.Matrix2D),
 /* harmony export */   "Measure": () => (/* reexport safe */ _measure__WEBPACK_IMPORTED_MODULE_4__.Measure),
 /* harmony export */   "MultiLine": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.MultiLine),
 /* harmony export */   "MultiLinePoint": () => (/* reexport safe */ _multiLinePoint__WEBPACK_IMPORTED_MODULE_5__.MultiLinePoint),
+/* harmony export */   "RadialGradient": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.RadialGradient),
 /* harmony export */   "RadioButton": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.RadioButton),
 /* harmony export */   "RadioGroup": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.RadioGroup),
 /* harmony export */   "Rectangle": () => (/* reexport safe */ _controls_index__WEBPACK_IMPORTED_MODULE_0__.Rectangle),
@@ -29976,6 +30521,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "AbstractButton3D": () => (/* reexport safe */ _3D_index__WEBPACK_IMPORTED_MODULE_1__.AbstractButton3D),
 /* harmony export */   "AdvancedDynamicTexture": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.AdvancedDynamicTexture),
 /* harmony export */   "AdvancedDynamicTextureInstrumentation": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.AdvancedDynamicTextureInstrumentation),
+/* harmony export */   "BaseGradient": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.BaseGradient),
 /* harmony export */   "BaseSlider": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.BaseSlider),
 /* harmony export */   "Button": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.Button),
 /* harmony export */   "Button3D": () => (/* reexport safe */ _3D_index__WEBPACK_IMPORTED_MODULE_1__.Button3D),
@@ -30012,6 +30558,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "InputTextArea": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.InputTextArea),
 /* harmony export */   "KeyPropertySet": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.KeyPropertySet),
 /* harmony export */   "Line": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.Line),
+/* harmony export */   "LinearGradient": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.LinearGradient),
 /* harmony export */   "MRDLBackplateMaterial": () => (/* reexport safe */ _3D_index__WEBPACK_IMPORTED_MODULE_1__.MRDLBackplateMaterial),
 /* harmony export */   "MRDLSliderBarMaterial": () => (/* reexport safe */ _3D_index__WEBPACK_IMPORTED_MODULE_1__.MRDLSliderBarMaterial),
 /* harmony export */   "MRDLSliderThumbMaterial": () => (/* reexport safe */ _3D_index__WEBPACK_IMPORTED_MODULE_1__.MRDLSliderThumbMaterial),
@@ -30023,6 +30570,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "MultiLinePoint": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.MultiLinePoint),
 /* harmony export */   "NearMenu": () => (/* reexport safe */ _3D_index__WEBPACK_IMPORTED_MODULE_1__.NearMenu),
 /* harmony export */   "PlanePanel": () => (/* reexport safe */ _3D_index__WEBPACK_IMPORTED_MODULE_1__.PlanePanel),
+/* harmony export */   "RadialGradient": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.RadialGradient),
 /* harmony export */   "RadioButton": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.RadioButton),
 /* harmony export */   "RadioGroup": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.RadioGroup),
 /* harmony export */   "Rectangle": () => (/* reexport safe */ _2D_index__WEBPACK_IMPORTED_MODULE_0__.Rectangle),
@@ -30077,6 +30625,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "AbstractButton3D": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.AbstractButton3D),
 /* harmony export */   "AdvancedDynamicTexture": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.AdvancedDynamicTexture),
 /* harmony export */   "AdvancedDynamicTextureInstrumentation": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.AdvancedDynamicTextureInstrumentation),
+/* harmony export */   "BaseGradient": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.BaseGradient),
 /* harmony export */   "BaseSlider": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.BaseSlider),
 /* harmony export */   "Button": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.Button),
 /* harmony export */   "Button3D": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.Button3D),
@@ -30113,6 +30662,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "InputTextArea": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.InputTextArea),
 /* harmony export */   "KeyPropertySet": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.KeyPropertySet),
 /* harmony export */   "Line": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.Line),
+/* harmony export */   "LinearGradient": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.LinearGradient),
 /* harmony export */   "MRDLBackplateMaterial": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.MRDLBackplateMaterial),
 /* harmony export */   "MRDLSliderBarMaterial": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.MRDLSliderBarMaterial),
 /* harmony export */   "MRDLSliderThumbMaterial": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.MRDLSliderThumbMaterial),
@@ -30124,6 +30674,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "MultiLinePoint": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.MultiLinePoint),
 /* harmony export */   "NearMenu": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.NearMenu),
 /* harmony export */   "PlanePanel": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.PlanePanel),
+/* harmony export */   "RadialGradient": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.RadialGradient),
 /* harmony export */   "RadioButton": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.RadioButton),
 /* harmony export */   "RadioGroup": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.RadioGroup),
 /* harmony export */   "Rectangle": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.Rectangle),