survey-creator-js 3.0.0-beta.6 → 3.0.0-beta.7

package/fesm/survey-creator-js.mjs

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v3.0.0-beta.6
+ * SurveyJS Creator v3.0.0-beta.7
  * (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -2125,7 +2125,7 @@ ReactElementFactory.Instance.registerElement(editableStringRendererName, (props)
 class QuestionErrorComponent extends React.Component {
     render() {
         return (React.createElement("div", null,
-            React.createElement(SvgIcon, { "aria-hidden": "true", iconName: "icon-alert_24x24", size: "24", className: this.props.cssClasses.error.icon }),
+            React.createElement(SvgIcon, { "aria-hidden": "true", iconName: "icon-alert_24x24", size: "auto", className: this.props.cssClasses.error.icon }),
             React.createElement("span", { className: this.props.cssClasses.error.item || undefined },
                 React.createElement(SurveyLocStringViewer, { model: this.props.error.locText }))));
     }
@@ -2832,12 +2832,44 @@ ReactQuestionFactory.Instance.registerQuestion("spinedit", (props) => {
     return React.createElement(SurveyQuestionSpinEditor, props);
 });
 
+class Swatch extends React.Component {
+    get rootClassName() {
+        var _a;
+        return (_a = this.props.className) !== null && _a !== void 0 ? _a : "sd-color-swatch";
+    }
+    get rootStyle() {
+        return { backgroundColor: this.props.color };
+    }
+    renderIcon() {
+        var _a, _b;
+        if (!this.props.showIcon)
+            return null;
+        return (React.createElement(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" }));
+    }
+    renderColorInput() {
+        const { onColorInputChange, colorInputValue, colorInputClassName, inputDisabled, arias } = this.props;
+        if (!onColorInputChange)
+            return null;
+        return (React.createElement("input", Object.assign({ type: "color", disabled: inputDisabled, value: colorInputValue, className: colorInputClassName, onChange: onColorInputChange, tabIndex: -1 }, arias)));
+    }
+    render() {
+        const content = (React.createElement("div", { className: "sd-color-swatch__content", style: this.rootStyle },
+            this.renderIcon(),
+            this.renderColorInput()));
+        if (this.props.onColorInputChange) {
+            return React.createElement("label", { className: this.rootClassName }, content);
+        }
+        return React.createElement("div", { className: this.rootClassName }, content);
+    }
+}
+
 class ItemTemplateComponent extends SurveyElementBase {
     render() {
         const item = this.props.item;
-        return (React.createElement(React.Fragment, null,
-            React.createElement("span", { className: "spg-color-editor__color-swatch", style: { backgroundColor: item.value } }),
-            React.createElement("span", { key: 2 }, this.renderLocString(item.locTitle, undefined, "locString"))));
+        return (React.createElement("div", { className: "sd-color-swatch-item" },
+            React.createElement("div", { className: "sd-color-swatch-item__label" },
+                React.createElement("span", { key: 2, className: "sd-color-swatch-item__caption" }, this.renderLocString(item.locTitle, undefined, "locString"))),
+            React.createElement(Swatch, { color: item.value })));
     }
 }
 ReactElementFactory.Instance.registerElement("color-item", (props) => {
@@ -2866,9 +2898,15 @@ class SurveyQuestionColor extends SurveyQuestionText {
         return this.question.renderedValue;
     }
     renderColorSwatch() {
-        return React.createElement("label", { className: this.question.getSwatchCss(), style: this.question.getSwatchStyle() },
-            React.createElement(SvgIcon, { iconName: this.question.cssClasses.swatchIcon, size: "auto" }),
-            React.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: (event) => 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 }));
+        const question = this.question;
+        return (React.createElement("div", { className: question.cssClasses.colorSwatch },
+            React.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: (event) => 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,
+                } })));
     }
     renderButtons() {
         return this.question.hasVisibleInputActions ? React.createElement(SurveyActionBar, { model: this.question.inputActionsContainer }) : null;
@@ -2944,8 +2982,8 @@ ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
 RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
 
 let Version;
-Version = `${"3.0.0-beta.6"}`;
-checkLibraryVersion(`${"3.0.0-beta.6"}`, "survey-creator-react");
+Version = `${"3.0.0-beta.7"}`;
+checkLibraryVersion(`${"3.0.0-beta.7"}`, "survey-creator-react");
 
 function renderSurveyCreator(creator, element, props = {}) {
     let node = element;