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

package/fesm/survey-creator-react.mjs

@@ -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
@@ -2127,7 +2127,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 }))));
     }
@@ -2834,12 +2834,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) => {
@@ -2868,9 +2900,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;
@@ -2927,27 +2965,9 @@ ReactElementFactory.Instance.registerElement("sv-fileedit-button", (props) => {
     return React.createElement(SurveyQuestionFileEditorButton, props);
 });
 
-class SurveyQuestionBooleanSwitch extends SurveyQuestionElementBase {
-    renderElement() {
-        const button = attachKey2click(React.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.createElement("div", { className: "spg-boolean-switch__thumb" },
-                React.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })),
-            React.createElement("div", { className: "spg-boolean-switch__thumb" },
-                React.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" }))), this.questionBase, { processEsc: false });
-        return (React.createElement("div", { className: "spg-boolean-switch", onClick: () => this.questionBase.booleanValue = !this.questionBase.booleanValue },
-            button,
-            React.createElement("div", { className: "spg-boolean-switch__caption" },
-                React.createElement("div", { className: "spg-boolean-switch__title", id: this.questionBase.labelRenderedAriaID }, SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
-    }
-}
-ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
-    return React.createElement(SurveyQuestionBooleanSwitch, 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.8"}`;
+checkLibraryVersion(`${"3.0.0-beta.8"}`, "survey-creator-react");
 
-export { ActionButton, AdaptiveToolbox, AddQuestionButtonComponent, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, ComponentContainer, CreatorSurveyPageComponent, IconItem, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SideBarLaunchCard, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionBooleanSwitch, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionFileEditorButton, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyResults, SurveyResultsByRow, SurveySimulator, SurveySpinEditorButton, SwitcherComponent, TabButtonComponent, TabContainerComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicComponent, TabPreviewSurveyComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version };
+export { ActionButton, AdaptiveToolbox, AddQuestionButtonComponent, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, ComponentContainer, CreatorSurveyPageComponent, IconItem, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SideBarLaunchCard, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionFileEditorButton, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyResults, SurveyResultsByRow, SurveySimulator, SurveySpinEditorButton, SwitcherComponent, TabButtonComponent, TabContainerComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicComponent, TabPreviewSurveyComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version };
 //# sourceMappingURL=survey-creator-react.mjs.map