survey-creator-react 3.0.0-beta.2 → 3.0.0-beta.3

package/fesm/survey-creator-react.mjs

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v3.0.0-beta.2
+ * SurveyJS Creator v3.0.0-beta.3
  * (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -2808,13 +2808,30 @@ class SurveyQuestionSpinEditor extends SurveyQuestionText {
         return this.question.renderedValue;
     }
     renderButtons() {
-        return (React.createElement("span", { className: this.question.cssClasses.buttonsContainer },
-            React.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onDownButtonClick, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
-                React.createElement(SvgIcon, { iconName: this.question.cssClasses.decreaseButtonIcon, size: "auto" })),
-            React.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onUpButtonClick, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
-                React.createElement(SvgIcon, { iconName: this.question.cssClasses.increaseButtonIcon, size: "auto" }))));
+        return React.createElement(SurveyActionBar, { model: this.question.inputActionsContainer });
     }
 }
+class SurveySpinEditorButton extends SurveyElementBase {
+    get item() {
+        return this.props.item;
+    }
+    get itemAction() {
+        return this.props.item;
+    }
+    getStateElement() {
+        return this.itemAction;
+    }
+    get question() {
+        return this.item.data.question;
+    }
+    renderElement() {
+        return React.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.itemAction.getActionBarItemCss(), disabled: this.itemAction.disabled, onClick: () => this.item.action(), onMouseDown: this.item.data.onMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
+            React.createElement(SvgIcon, { className: this.itemAction.cssClasses.itemIcon, iconName: this.item.iconName, size: "auto" }));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-spinedit-button", (props) => {
+    return React.createElement(SurveySpinEditorButton, props);
+});
 ReactQuestionFactory.Instance.registerQuestion("spinedit", (props) => {
     return React.createElement(SurveyQuestionSpinEditor, props);
 });
@@ -2843,10 +2860,11 @@ class SurveyQuestionColor extends SurveyQuestionText {
             React.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: (input) => (this.setControl(input)), placeholder: this.question.renderedPlaceholder, autoComplete: "off", onKeyUp: (event) => this.question.onKeyUp(event.nativeEvent), onBlur: (event) => this.question.onBlur(event.nativeEvent), onChange: this.question.onChange, onBeforeInput: event => this.question.onBeforeInput(event.nativeEvent), "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 })));
     }
     renderElement() {
-        return (React.createElement("div", { className: this.question.cssClasses.root, onKeyDown: event => this.question.onKeyDown(event.nativeEvent) },
-            this.renderColorSwatch(),
-            this.renderInput(),
-            this.question.showDropdownAction ? this.renderDropdownAction() : null));
+        return (React.createElement("div", { className: this.question.cssClasses.rootWrapper },
+            React.createElement("div", { className: this.question.cssClasses.root, onKeyDown: event => this.question.onKeyDown(event.nativeEvent) },
+                this.renderColorSwatch(),
+                this.renderInput(),
+                this.renderButtons())));
     }
     getValueCore() {
         return this.question.renderedValue;
@@ -2856,13 +2874,8 @@ class SurveyQuestionColor extends SurveyQuestionText {
             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 }));
     }
-    renderDropdownAction() {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { "aria-hidden": "true", className: this.question.cssClasses.choicesButtonWrapper }, ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction })),
-            this.renderPopup()));
-    }
-    renderPopup() {
-        return React.createElement(Popup, { model: this.question.dropdownAction.popupModel });
+    renderButtons() {
+        return this.question.hasVisibleInputActions ? React.createElement(SurveyActionBar, { model: this.question.inputActionsContainer }) : null;
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("color", (props) => {
@@ -2883,32 +2896,38 @@ class SurveyQuestionFileEditor extends SurveyQuestionText {
         return (React.createElement(React.Fragment, null,
             React.createElement("input", { disabled: this.question.isTextInputReadOnly, className: this.questionFile.cssClasses.control, placeholder: this.questionFile.renderedPlaceholder, ref: (input) => (this.setControl(input)), autoComplete: "off", type: "text", onBlur: (event) => this.questionFile.onInputBlur(event.nativeEvent), onChange: (event) => this.questionFile.onInputChange(event.nativeEvent) })));
     }
-    renderFileInput() {
-        return (React.createElement("input", { type: "file", disabled: this.isDisplayMode, className: this.questionFile.cssClasses.fileInput, id: this.questionFile.inputId, "aria-required": this.questionFile.ariaRequired, "aria-label": this.questionFile.ariaLabel, "aria-invalid": this.questionFile.ariaInvalid, "aria-describedby": this.questionFile.ariaDescribedBy, multiple: false, title: this.questionFile.inputTitle, accept: this.questionFile.acceptedTypes, tabIndex: -1, onChange: (event) => this.questionFile.onFileInputChange(event.nativeEvent) }));
-    }
     renderButtons() {
-        return (React.createElement("div", { className: this.questionFile.cssClasses.buttonsContainer },
-            this.renderClearButton(),
-            this.renderChooseButton()));
-    }
-    renderClearButton() {
-        return attachKey2click((React.createElement("button", { className: this.questionFile.cssClasses.clearButton, title: this.questionFile.clearButtonCaption, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
-            React.createElement(SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto" }))));
-    }
-    renderChooseButton() {
-        return (attachKey2click(React.createElement("label", { onClick: event => this.questionFile.chooseFiles(event.nativeEvent), className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
-            React.createElement(SvgIcon, { iconName: this.questionFile.cssClasses.chooseButtonIcon, size: "auto", title: this.questionFile.chooseButtonCaption }))));
+        return this.question.hasVisibleInputActions ? React.createElement(SurveyActionBar, { model: this.questionFile.inputActionsContainer }) : null;
     }
     renderElement() {
         return (React.createElement("div", { className: this.questionFile.cssClasses.root, ref: el => this.setContent(el), onDragEnter: this.questionFile.onDragEnter, onDragOver: this.questionFile.onDragOver, onDrop: this.questionFile.onDrop, onDragLeave: this.questionFile.onDragLeave, onKeyDown: event => this.question.onKeyDown(event.nativeEvent) },
             this.renderInput(),
-            this.renderFileInput(),
             this.renderButtons()));
     }
 }
+class SurveyQuestionFileEditorButton extends SurveyElementBase {
+    get item() {
+        return this.props.item;
+    }
+    get question() {
+        return this.props.item.data.question;
+    }
+    getStateElement() {
+        return this.item;
+    }
+    renderElement() {
+        return (React.createElement("div", null,
+            attachKey2click(React.createElement("label", { onClick: event => this.question.chooseFiles(event.nativeEvent), className: this.item.getActionBarItemCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonCaption },
+                React.createElement(SvgIcon, { iconName: this.item.iconName, size: "auto", title: this.item.title, className: this.item.cssClasses.itemIcon }))),
+            React.createElement("input", { type: "file", disabled: this.item.disabled, className: this.question.cssClasses.fileInput, id: this.question.inputId, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, multiple: false, title: this.question.inputTitle, accept: this.question.acceptedTypes, tabIndex: -1, onChange: (event) => this.question.onFileInputChange(event.nativeEvent) })));
+    }
+}
 ReactQuestionFactory.Instance.registerQuestion("fileedit", (props) => {
     return React.createElement(SurveyQuestionFileEditor, props);
 });
+ReactElementFactory.Instance.registerElement("sv-fileedit-button", (props) => {
+    return React.createElement(SurveyQuestionFileEditorButton, props);
+});
 
 class SurveyQuestionBooleanSwitch extends SurveyQuestionElementBase {
     renderElement() {
@@ -2929,8 +2948,8 @@ ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
 RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
 
 let Version;
-Version = `${"3.0.0-beta.2"}`;
-checkLibraryVersion(`${"3.0.0-beta.2"}`, "survey-creator-react");
+Version = `${"3.0.0-beta.3"}`;
+checkLibraryVersion(`${"3.0.0-beta.3"}`, "survey-creator-react");
 
-export { ActionButton, AdaptiveToolbox, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, ComponentContainer, CreatorSurveyPageComponent, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionBooleanSwitch, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyResults, SurveyResultsByRow, SurveySimulator, SwitcherComponent, TabButtonComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicAddButtonComponent, TabLogicComponent, TabPreviewSurveyComponent, TabPreviewTestSurveyAgainComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version };
+export { ActionButton, AdaptiveToolbox, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, ComponentContainer, CreatorSurveyPageComponent, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionBooleanSwitch, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionFileEditorButton, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyResults, SurveyResultsByRow, SurveySimulator, SurveySpinEditorButton, SwitcherComponent, TabButtonComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicAddButtonComponent, TabLogicComponent, TabPreviewSurveyComponent, TabPreviewTestSurveyAgainComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version };
 //# sourceMappingURL=survey-creator-react.mjs.map