@babylonjs/gui-editor 5.25.0 → 5.26.0

package/dist/babylon.guiEditor.max.js

@@ -49833,7 +49833,8 @@ const MessageDialog = (props) => {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "ClassNames": () => (/* binding */ ClassNames)
+/* harmony export */   "ClassNames": () => (/* binding */ ClassNames),
+/* harmony export */   "JoinClassNames": () => (/* binding */ JoinClassNames)
 /* harmony export */ });
 function ClassNames(names, styleObject) {
     let string = "";
@@ -49844,6 +49845,15 @@ function ClassNames(names, styleObject) {
     }
     return string;
 }
+function JoinClassNames(styleObject, ...names) {
+    let string = "";
+    for (const name of names) {
+        if (name && styleObject[name]) {
+            string += styleObject[name] + " ";
+        }
+    }
+    return string;
+}
 
 
 /***/ }),
@@ -50637,8 +50647,10 @@ __webpack_require__.r(__webpack_exports__);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const Null_Value = Number.MAX_SAFE_INTEGER;
+const DEFAULT_FALLBACK_VALUE = -1;
 class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     constructor(props) {
+        // Initialize default props
         super(props);
         this._localChange = false;
         this.state = { value: this._remapValueIn(this._getValue(props)), addCustom: false };
@@ -50729,6 +50741,7 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this.setState({ addCustom: false });
     }
     render() {
+        const fallback = this.props.fallbackValue !== undefined ? this.props.fallbackValue : DEFAULT_FALLBACK_VALUE;
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: `listLine ${this.props.className ?? ""}`, children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "options", children: this.state.addCustom ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", placeholder: "Enter a custom font here", onKeyDown: (event) => {
                             event.key === "Enter" && this.props.addVal != undefined
                                 ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
@@ -50741,7 +50754,7 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
                                     this.updateCustomValue(),
                                     this.forceUpdate())
                                 : null;
-                        } })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value === -1 || this.state.value === null || this.state.value === undefined ? 1 : this.state.value, children: this.props.options.map((option, i) => {
+                        } })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value === null || this.state.value === undefined ? fallback : this.state.value, children: this.props.options.map((option, i) => {
                             return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
                         }) })) })] }));
     }
@@ -52427,7 +52440,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
                                     }, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingLeft"), onClick: (unit) => convertUnits(unit, "paddingLeft") }), arrows: true, arrowsIncrement: (amount) => increment("paddingLeft", amount) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "R", delayInput: true, value: getValue("_paddingRight"), onChange: (newValue) => {
                                         this._checkAndUpdateValues("paddingRight", newValue);
                                         this._markChildrenAsDirty();
-                                    }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingRight"), onClick: (unit) => convertUnits(unit, "paddingRight") }), arrows: true, arrowsIncrement: (amount) => increment("paddingRight", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_descendantsOnlyPaddingIcon_svg__WEBPACK_IMPORTED_MODULE_27__, label: "Makes padding affect only the descendants of this control" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "ONLY PAD DESCENDANTS", target: proxy, propertyName: "descendentsOnlyPadding" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" })] })), parent?.name === "root" && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { label: "LINK OFFSET", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_linkedMeshOffsetIcon_svg__WEBPACK_IMPORTED_MODULE_28__, label: "Link offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "X", delayInput: true, value: getValue("_linkOffsetX"), onChange: (newValue) => this._checkAndUpdateValues("linkOffsetX", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_linkOffsetX"), onClick: (unit) => convertUnits(unit, "linkOffsetX") }), arrows: true, arrowsIncrement: (amount) => increment("linkOffsetX", amount) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", delayInput: true, value: getValue("_linkOffsetY"), onChange: (newValue) => this._checkAndUpdateValues("linkOffsetY", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_linkOffsetY"), onClick: (unit) => convertUnits(unit, "linkOffsetY") }), arrows: true, arrowsIncrement: (amount) => increment("linkOffsetY", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_scaleIcon_svg__WEBPACK_IMPORTED_MODULE_29__, label: "Scale" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "scaleX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "scaleY", arrows: true, digits: 2, step: "0.0005" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_pivotIcon_svg__WEBPACK_IMPORTED_MODULE_30__, label: "Transform Center" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "transformCenterX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "transformCenterY", arrows: true, digits: 2, step: "0.0005" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_rotationIcon_svg__WEBPACK_IMPORTED_MODULE_31__, label: "Rotation" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { iconLabel: "Rotation", lockObject: this.props.lockObject, label: "", target: proxy, decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "RAD", locked: true }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }), controls.every((control) => control.color !== undefined && control.typeName !== "Image" && control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_32__, label: "Outline Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Outline Color", target: proxy, propertyName: "color" })] })), controls.every((control) => control.background !== undefined) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_33__, label: "Background Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Background Color", target: proxy, propertyName: "background" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_34__, label: "Alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowColorIcon_svg__WEBPACK_IMPORTED_MODULE_35__, label: "Shadow Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "shadowColor", disableAlpha: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowOffsetXIcon_svg__WEBPACK_IMPORTED_MODULE_36__, label: "Shadow Offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "shadowOffsetX", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "shadowOffsetY", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowBlurIcon_svg__WEBPACK_IMPORTED_MODULE_37__, label: "Shadow Blur" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "shadowBlur", arrows: true, min: 0, digits: 2 })] }), showTextProperties && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontFamilyIcon_svg__WEBPACK_IMPORTED_MODULE_38__, label: "Font Family" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "", target: proxy, propertyName: "fontFamily", valueProp: this.state.value, options: fonts, addVal: this.addVal, fromFontDropdown: true, onSelect: (newValue) => {
+                                    }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingRight"), onClick: (unit) => convertUnits(unit, "paddingRight") }), arrows: true, arrowsIncrement: (amount) => increment("paddingRight", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_descendantsOnlyPaddingIcon_svg__WEBPACK_IMPORTED_MODULE_27__, label: "Makes padding affect only the descendants of this control" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "ONLY PAD DESCENDANTS", target: proxy, propertyName: "descendentsOnlyPadding" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" })] })), parent?.name === "root" && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { label: "LINK OFFSET", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_linkedMeshOffsetIcon_svg__WEBPACK_IMPORTED_MODULE_28__, label: "Link offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "X", delayInput: true, value: getValue("_linkOffsetX"), onChange: (newValue) => this._checkAndUpdateValues("linkOffsetX", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_linkOffsetX"), onClick: (unit) => convertUnits(unit, "linkOffsetX") }), arrows: true, arrowsIncrement: (amount) => increment("linkOffsetX", amount) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", delayInput: true, value: getValue("_linkOffsetY"), onChange: (newValue) => this._checkAndUpdateValues("linkOffsetY", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_linkOffsetY"), onClick: (unit) => convertUnits(unit, "linkOffsetY") }), arrows: true, arrowsIncrement: (amount) => increment("linkOffsetY", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_scaleIcon_svg__WEBPACK_IMPORTED_MODULE_29__, label: "Scale" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "scaleX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "scaleY", arrows: true, digits: 2, step: "0.0005" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_pivotIcon_svg__WEBPACK_IMPORTED_MODULE_30__, label: "Transform Center" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "transformCenterX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "transformCenterY", arrows: true, digits: 2, step: "0.0005" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_rotationIcon_svg__WEBPACK_IMPORTED_MODULE_31__, label: "Rotation" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { iconLabel: "Rotation", lockObject: this.props.lockObject, label: "", target: proxy, decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "RAD", locked: true }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }), controls.every((control) => control.color !== undefined && control.typeName !== "Image" && control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_32__, label: "Outline Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Outline Color", target: proxy, propertyName: "color" })] })), controls.every((control) => control.background !== undefined) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_33__, label: "Background Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Background Color", target: proxy, propertyName: "background" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_34__, label: "Alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowColorIcon_svg__WEBPACK_IMPORTED_MODULE_35__, label: "Shadow Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "shadowColor", disableAlpha: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowOffsetXIcon_svg__WEBPACK_IMPORTED_MODULE_36__, label: "Shadow Offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "shadowOffsetX", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "shadowOffsetY", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowBlurIcon_svg__WEBPACK_IMPORTED_MODULE_37__, label: "Shadow Blur" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "shadowBlur", arrows: true, min: 0, digits: 2 })] }), showTextProperties && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontFamilyIcon_svg__WEBPACK_IMPORTED_MODULE_38__, label: "Font Family" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "", target: proxy, propertyName: "fontFamily", valueProp: this.state.value, options: fonts, addVal: this.addVal, fromFontDropdown: true, fallbackValue: 1, onSelect: (newValue) => {
                                         const fontFamily = this.state.fontFamilyOptions.filter(({ value }) => value === newValue).map(({ label }) => label);
                                         proxy.fontFamily = fontFamily[0];
                                     }, extractValue: () => {