survey-creator-react 3.0.0-beta.6 → 3.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "description": "A white-label drag-and-drop form builder for React that lets you design complex, interactive forms and surveys without writing code. It generates JSON schemas used by the SurveyJS Form Library to render dynamic forms in your React app.",
   "author": "DevSoft Baltic OU <info@devsoftbaltic.com>",
   "homepage": "https://surveyjs.io/",
@@ -60,9 +60,9 @@
     "ace-builds": "^1.4.12",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0",
-    "survey-core": "3.0.0-beta.6",
-    "survey-react-ui": "3.0.0-beta.6",
-    "survey-creator-core": "3.0.0-beta.6"
+    "survey-core": "3.0.0-beta.8",
+    "survey-react-ui": "3.0.0-beta.8",
+    "survey-creator-core": "3.0.0-beta.8"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v3.0.0-beta.6
+ * SurveyJS Creator v3.0.0-beta.8
  * (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -2701,7 +2701,7 @@
         }
         QuestionErrorComponent.prototype.render = function () {
             return (React__namespace.createElement("div", null,
-                React__namespace.createElement(surveyReactUi.SvgIcon, { "aria-hidden": "true", iconName: "icon-alert_24x24", size: "24", className: this.props.cssClasses.error.icon }),
+                React__namespace.createElement(surveyReactUi.SvgIcon, { "aria-hidden": "true", iconName: "icon-alert_24x24", size: "auto", className: this.props.cssClasses.error.icon }),
                 React__namespace.createElement("span", { className: this.props.cssClasses.error.item || undefined },
                     React__namespace.createElement(surveyReactUi.SurveyLocStringViewer, { model: this.props.error.locText }))));
         };
@@ -3584,6 +3584,50 @@
         return React__namespace.createElement(SurveyQuestionSpinEditor, props);
     });
 
+    var Swatch = /** @class */ (function (_super) {
+        __extends(Swatch, _super);
+        function Swatch() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(Swatch.prototype, "rootClassName", {
+            get: function () {
+                var _a;
+                return (_a = this.props.className) !== null && _a !== void 0 ? _a : "sd-color-swatch";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Swatch.prototype, "rootStyle", {
+            get: function () {
+                return { backgroundColor: this.props.color };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Swatch.prototype.renderIcon = function () {
+            var _a, _b;
+            if (!this.props.showIcon)
+                return null;
+            return (React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: (_a = this.props.swatchIcon) !== null && _a !== void 0 ? _a : "icon-dropper-16x16", size: "auto", className: (_b = this.props.iconClassName) !== null && _b !== void 0 ? _b : "sd-color-swatch__icon" }));
+        };
+        Swatch.prototype.renderColorInput = function () {
+            var _a = this.props, onColorInputChange = _a.onColorInputChange, colorInputValue = _a.colorInputValue, colorInputClassName = _a.colorInputClassName, inputDisabled = _a.inputDisabled, arias = _a.arias;
+            if (!onColorInputChange)
+                return null;
+            return (React__namespace.createElement("input", __assign({ type: "color", disabled: inputDisabled, value: colorInputValue, className: colorInputClassName, onChange: onColorInputChange, tabIndex: -1 }, arias)));
+        };
+        Swatch.prototype.render = function () {
+            var content = (React__namespace.createElement("div", { className: "sd-color-swatch__content", style: this.rootStyle },
+                this.renderIcon(),
+                this.renderColorInput()));
+            if (this.props.onColorInputChange) {
+                return React__namespace.createElement("label", { className: this.rootClassName }, content);
+            }
+            return React__namespace.createElement("div", { className: this.rootClassName }, content);
+        };
+        return Swatch;
+    }(React__namespace.Component));
+
     var ItemTemplateComponent = /** @class */ (function (_super) {
         __extends(ItemTemplateComponent, _super);
         function ItemTemplateComponent() {
@@ -3591,9 +3635,10 @@
         }
         ItemTemplateComponent.prototype.render = function () {
             var item = this.props.item;
-            return (React__namespace.createElement(React__namespace.Fragment, null,
-                React__namespace.createElement("span", { className: "spg-color-editor__color-swatch", style: { backgroundColor: item.value } }),
-                React__namespace.createElement("span", { key: 2 }, this.renderLocString(item.locTitle, undefined, "locString"))));
+            return (React__namespace.createElement("div", { className: "sd-color-swatch-item" },
+                React__namespace.createElement("div", { className: "sd-color-swatch-item__label" },
+                    React__namespace.createElement("span", { key: 2, className: "sd-color-swatch-item__caption" }, this.renderLocString(item.locTitle, undefined, "locString"))),
+                React__namespace.createElement(Swatch, { color: item.value })));
         };
         return ItemTemplateComponent;
     }(surveyReactUi.SurveyElementBase));
@@ -3630,10 +3675,15 @@
             return this.question.renderedValue;
         };
         SurveyQuestionColor.prototype.renderColorSwatch = function () {
-            var _this = this;
-            return React__namespace.createElement("label", { className: this.question.getSwatchCss(), style: this.question.getSwatchStyle() },
-                React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: this.question.cssClasses.swatchIcon, size: "auto" }),
-                React__namespace.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: function (event) { return _this.question.onColorInputChange(event.nativeEvent); }, tabIndex: -1, "aria-required": this.question.a11y_input_ariaRequired, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
+            var question = this.question;
+            return (React__namespace.createElement("div", { className: question.cssClasses.colorSwatch },
+                React__namespace.createElement(Swatch, { className: question.getSwatchCss(), swatchIcon: question.cssClasses.swatchIcon, iconClassName: question.cssClasses.iconClassName, color: question.renderedValue, showIcon: true, colorInputValue: question.renderedColorValue, colorInputClassName: question.cssClasses.colorInput, inputDisabled: this.isDisplayMode, onColorInputChange: function (event) { return question.onColorInputChange(event.nativeEvent); }, arias: {
+                        "aria-required": question.a11y_input_ariaRequired,
+                        "aria-labelledby": question.a11y_input_ariaLabelledBy,
+                        "aria-label": question.a11y_input_ariaLabel,
+                        "aria-invalid": question.a11y_input_ariaInvalid,
+                        "aria-describedby": question.a11y_input_ariaDescribedBy,
+                    } })));
         };
         SurveyQuestionColor.prototype.renderButtons = function () {
             return this.question.hasVisibleInputActions ? React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.question.inputActionsContainer }) : null;
@@ -3713,33 +3763,9 @@
         return React__namespace.createElement(SurveyQuestionFileEditorButton, props);
     });
 
-    var SurveyQuestionBooleanSwitch = /** @class */ (function (_super) {
-        __extends(SurveyQuestionBooleanSwitch, _super);
-        function SurveyQuestionBooleanSwitch() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        SurveyQuestionBooleanSwitch.prototype.renderElement = function () {
-            var _this = this;
-            var button = surveyReactUi.attachKey2click(React__namespace.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.booleanValue ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-checked": this.questionBase.booleanValue || false, "aria-required": this.questionBase.a11y_input_ariaRequired, "aria-label": this.questionBase.a11y_input_ariaLabel, "aria-labelledby": this.questionBase.a11y_input_ariaLabelledBy, "aria-invalid": this.questionBase.a11y_input_ariaInvalid, "aria-errormessage": this.questionBase.a11y_input_ariaErrormessage },
-                React__namespace.createElement("div", { className: "spg-boolean-switch__thumb" },
-                    React__namespace.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })),
-                React__namespace.createElement("div", { className: "spg-boolean-switch__thumb" },
-                    React__namespace.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" }))), this.questionBase, { processEsc: false });
-            return (React__namespace.createElement("div", { className: "spg-boolean-switch", onClick: function () { return _this.questionBase.booleanValue = !_this.questionBase.booleanValue; } },
-                button,
-                React__namespace.createElement("div", { className: "spg-boolean-switch__caption" },
-                    React__namespace.createElement("div", { className: "spg-boolean-switch__title", id: this.questionBase.labelRenderedAriaID }, surveyReactUi.SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
-        };
-        return SurveyQuestionBooleanSwitch;
-    }(surveyReactUi.SurveyQuestionElementBase));
-    surveyReactUi.ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", function (props) {
-        return React__namespace.createElement(SurveyQuestionBooleanSwitch, props);
-    });
-    surveyCore.RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
-
     exports.Version = void 0;
-    exports.Version = "".concat("3.0.0-beta.6");
-    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.6"), "survey-creator-react");
+    exports.Version = "".concat("3.0.0-beta.8");
+    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.8"), "survey-creator-react");
 
     Object.defineProperty(exports, "PropertyGridEditorCollection", {
         enumerable: true,
@@ -3819,7 +3845,6 @@
     exports.SurveyLocStringEditor = SurveyLocStringEditor;
     exports.SurveyLogicOpertor = SurveyLogicOpertor;
     exports.SurveyNavigation = SurveyNavigation;
-    exports.SurveyQuestionBooleanSwitch = SurveyQuestionBooleanSwitch;
     exports.SurveyQuestionColor = SurveyQuestionColor;
     exports.SurveyQuestionFileEditor = SurveyQuestionFileEditor;
     exports.SurveyQuestionFileEditorButton = SurveyQuestionFileEditorButton;