survey-js-ui 2.1.1 → 2.2.1

package/fesm/survey-js-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.1.1
+ * surveyjs - Survey JavaScript library v2.2.1
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1503,7 +1503,7 @@ class SurveyQuestion extends SurveyElementBase {
         var descriptionUnderInput = question.hasDescriptionUnderInput
             ? this.renderDescription()
             : null;
-        return (_$1("div", { className: question.cssContent || undefined, style: contentStyle, role: "presentation" },
+        return (_$1("div", { className: question.cssContent || undefined, style: contentStyle, "aria-hidden": question.contentAriaHidden, role: "presentation" },
             questionRender,
             comment,
             descriptionUnderInput));
@@ -1978,7 +1978,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.1.1
+ * surveyjs - Survey JavaScript library v2.2.1
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2048,7 +2048,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.1.1
+ * surveyjs - Survey JavaScript library v2.2.1
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5268,7 +5268,7 @@ class SurveyQuestionSlider extends SurveyQuestionElementBase {
     }
     getInputsAndThumbs() {
         const inputsAndThumbs = [];
-        const value = this.question.getRenderedValue();
+        const value = this.question.renderedValue;
         for (let i = 0; i < value.length; i++) {
             const thumbAndInput = _$1(k$2, { key: i },
                 this.getInput(i),
@@ -5278,8 +5278,8 @@ class SurveyQuestionSlider extends SurveyQuestionElementBase {
         return inputsAndThumbs;
     }
     getThumb(i) {
-        const { cssClasses, getThumbContainerCss, tooltipVisibility, tooltipCss, getPercent, getRenderedValue, getTooltipValue } = this.question;
-        const value = getRenderedValue()[i];
+        const { cssClasses, getThumbContainerCss, tooltipVisibility, tooltipCss, getPercent, renderedValue, getTooltipValue } = this.question;
+        const value = renderedValue[i];
         let tooltip = null;
         if (tooltipVisibility !== "never") {
             tooltip = _$1("div", { className: tooltipCss },
@@ -5293,24 +5293,20 @@ class SurveyQuestionSlider extends SurveyQuestionElementBase {
         return thumb;
     }
     getInput(i) {
-        const { renderedMax: max, renderedMin: min, step, cssClasses, isDisabledAttr, getRenderedValue, handleOnChange, handlePointerDown, handlePointerUp, handleKeyDown, handleKeyUp, handleOnFocus, handleOnBlur } = this.question;
-        const value = getRenderedValue()[i];
+        const { renderedMax: max, renderedMin: min, step, cssClasses, isDisabledAttr, renderedValue, handleOnChange, handlePointerDown, handlePointerUp, handleKeyDown, handleKeyUp, handleOnFocus, handleOnBlur } = this.question;
+        const value = renderedValue[i];
         const input = _$1("input", { className: cssClasses.input, id: "sjs-slider-input-" + i, type: "range", min: min, max: max, step: step, value: value, onChange: (e) => { handleOnChange(e.nativeEvent, i); }, onPointerDown: (e) => { handlePointerDown(e.nativeEvent); }, onPointerUp: (e) => { e.stopPropagation(); handlePointerUp(e.nativeEvent); }, onKeyDown: (e) => { handleKeyDown(e.nativeEvent); }, onKeyUp: (e) => { handleKeyUp(e.nativeEvent); }, onFocus: () => { handleOnFocus(i); }, onBlur: () => { handleOnBlur(); }, disabled: isDisabledAttr, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage });
         return input;
     }
     getRangeInput() {
         const { renderedMax: max, renderedMin: min, step, cssClasses, handleRangeOnChange, handleRangePointerDown, handleRangePointerUp } = this.question;
-        return _$1("input", { name: "range-input", ref: this.rangeInputRef, className: cssClasses.input, type: "range", "aria-hidden": "true", min: min, max: max, step: step, tabIndex: -1, onChange: (e) => { handleRangeOnChange(e.nativeEvent); }, onPointerDown: (e) => { e.persist(); handleRangePointerDown(e.nativeEvent, this.control); }, onPointerUp: (e) => { handleRangePointerUp(e.nativeEvent, this.control); } });
+        return _$1("input", { name: "range-input", id: "sjs-slider-input-range-input", ref: this.rangeInputRef, className: cssClasses.input, type: "range", "aria-hidden": "true", min: min, max: max, step: step, tabIndex: -1, onChange: (e) => { handleRangeOnChange(e.nativeEvent); }, onPointerDown: (e) => { e.persist(); handleRangePointerDown(e.nativeEvent, this.control); }, onPointerUp: (e) => { handleRangePointerUp(e.nativeEvent, this.control); } });
     }
     getLabels() {
         const labels = [];
-        const { renderedLabels, cssClasses, handleLabelPointerUp, getLabelCss } = this.question;
+        const { renderedLabels, cssClasses } = this.question;
         for (let i = 0; i < renderedLabels.length; i++) {
-            const value = renderedLabels[i].value;
-            const text = renderedLabels[i].locText;
-            const label = _$1("div", { key: i, className: getLabelCss(i), style: { left: value + "%" }, onPointerUp: (e) => { handleLabelPointerUp(e.nativeEvent, i); } },
-                _$1("div", { className: cssClasses.labelTick }),
-                _$1("div", { className: cssClasses.labelText }, this.renderLocString(text)));
+            const label = ReactElementFactory.Instance.createElement("sv-slider-label-item", { item: renderedLabels[i], question: this.question, key: renderedLabels[i].id });
             labels.push(label);
         }
         return _$1("div", { className: cssClasses.labelsContainer },
@@ -6091,6 +6087,31 @@ ReactElementFactory.Instance.registerElement("sv-question-error", (props) => {
     return _$1(QuestionErrorComponent, props);
 });
 
+class SliderLabelItem extends SurveyElementBase {
+    getStateElement() {
+        return this.item;
+    }
+    get item() {
+        return this.props.item;
+    }
+    get question() {
+        return this.props.question;
+    }
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState);
+    }
+    renderElement() {
+        const { cssClasses, handleLabelPointerUp, getLabelCss, getPercent } = this.question;
+        const { value, locText } = this.item;
+        return _$1("div", { key: this.item.id, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: (e) => { handleLabelPointerUp(e.nativeEvent, value); } },
+            _$1("div", { className: cssClasses.labelTick }),
+            _$1("div", { className: cssClasses.labelText }, this.renderLocString(locText)));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-slider-label-item", (props) => {
+    return _$1(SliderLabelItem, props);
+});
+
 class Skeleton extends x$2 {
     render() {
         var _a, _b;
@@ -6273,7 +6294,7 @@ SurveyModel.prototype["render"] = function (element = null) {
     }
 };
 const preact = React;
-checkLibraryVersion(`${"2.1.1"}`, "survey-js-ui");
+checkLibraryVersion(`${"2.2.1"}`, "survey-js-ui");
 
-export { CharacterCounterComponent, O as Children, x$2 as Component, ComponentsContainer, k$2 as Fragment, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, N as PureComponent, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, Cn as StrictMode, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, P as Suspense, B as SuspenseList, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click, _n as cloneElement, K$1 as createContext, _$1 as createElement, dn as createFactory, $ as createPortal, b$1 as createRef, Sn as findDOMNode, En as flushSync, D as forwardRef, tn as hydrate, pn as isFragment, yn as isMemo, mn as isValidElement, z as lazy, M as memo, preact, nn as render, renderPopupSurvey, renderSurvey, R as startTransition, bn as unmountComponentAtNode, gn as unstable_batchedUpdates, q$1 as useCallback, x$1 as useContext, P$1 as useDebugValue, w as useDeferredValue, y as useEffect, g$1 as useId, F$1 as useImperativeHandle, I as useInsertionEffect, _ as useLayoutEffect, T$1 as useMemo, h as useReducer, A$1 as useRef, d as useState, C as useSyncExternalStore, k as useTransition, vn as version };
+export { CharacterCounterComponent, O as Children, x$2 as Component, ComponentsContainer, k$2 as Fragment, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, N as PureComponent, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Cn as StrictMode, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, P as Suspense, B as SuspenseList, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click, _n as cloneElement, K$1 as createContext, _$1 as createElement, dn as createFactory, $ as createPortal, b$1 as createRef, Sn as findDOMNode, En as flushSync, D as forwardRef, tn as hydrate, pn as isFragment, yn as isMemo, mn as isValidElement, z as lazy, M as memo, preact, nn as render, renderPopupSurvey, renderSurvey, R as startTransition, bn as unmountComponentAtNode, gn as unstable_batchedUpdates, q$1 as useCallback, x$1 as useContext, P$1 as useDebugValue, w as useDeferredValue, y as useEffect, g$1 as useId, F$1 as useImperativeHandle, I as useInsertionEffect, _ as useLayoutEffect, T$1 as useMemo, h as useReducer, A$1 as useRef, d as useState, C as useSyncExternalStore, k as useTransition, vn as version };
 //# sourceMappingURL=survey-js-ui.mjs.map