@oracle/oraclejet-preact 14.0.6 → 14.1.0

package/cjs/UNSAFE_NumberInputText/__tests__/NumberInputText.spec.js

@@ -0,0 +1,769 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('@testing-library/preact');
+var chai = require('chai');
+var userEvent = require('@testing-library/user-event');
+var NumberInputText = require('../../NumberInputText-a83c00be.js');
+var hooks = require('preact/hooks');
+var hooks_UNSAFE_useFormContext = require('../../hooks/UNSAFE_useFormContext.js');
+var UNSAFE_Environment = require('../../UNSAFE_Environment.js');
+var utils_UNSAFE_matchTranslationBundle = require('../../utils/UNSAFE_matchTranslationBundle.js');
+require('preact');
+require('preact/compat');
+require('../../hooks/UNSAFE_useFocusableTextField.js');
+require('../../tslib.es6-6f60dd09.js');
+require('../../hooks/UNSAFE_useFocusWithin.js');
+require('../../useFocusWithin-145e8682.js');
+require('../../hooks/UNSAFE_useFormFieldContext.js');
+require('../../hooks/UNSAFE_useHover.js');
+require('../../hooks/UNSAFE_useToggle.js');
+require('../../hooks/UNSAFE_useTextField.js');
+require('../../hooks/UNSAFE_useId.js');
+require('../../UNSAFE_Label.js');
+require('../../utils/UNSAFE_classNames.js');
+require('../../classNames-55bceee6.js');
+
+require('../../hooks/UNSAFE_usePrefixSuffix.js');
+require('../../UNSAFE_PrefixSuffix.js');
+require('../../hooks/UNSAFE_useUser.js');
+require('../../UNSAFE_Layer.js');
+require('../../UNSAFE_TextField.js');
+require('../../ReadonlyTextFieldInput-ec13a273.js');
+require('../../hooks/UNSAFE_useTabbableMode.js');
+require('../../utils/UNSAFE_interpolations/text.js');
+require('../../keys-326d80d5.js');
+require('../../_curry1-f1ebd742.js');
+require('../../_has-2eedb7e0.js');
+require('../../utils/UNSAFE_mergeInterpolations.js');
+require('../../_curry3-bc6e6a86.js');
+require('../../_curry2-588f7ddc.js');
+require('../../FormControlUtils-c960c51d.js');
+require('../../hooks/UNSAFE_useTranslationBundle.js');
+require('../../UNSAFE_LabelValueLayout.js');
+require('../../UNSAFE_Flex.js');
+require('../../Flex-b113edd5.js');
+require('../../utils/UNSAFE_interpolations/dimensions.js');
+require('../../utils/UNSAFE_arrayUtils.js');
+require('../../utils/UNSAFE_size.js');
+require('../../utils/UNSAFE_interpolations/boxalignment.js');
+require('../../utils/UNSAFE_interpolations/flexbox.js');
+require('../../flexbox-6deddb70.js');
+require('../../utils/UNSAFE_interpolations/flexitem.js');
+require('../../flexitem-0c1e9a72.js');
+require('../../TextFieldInput-c5f861ba.js');
+require('../../hooks/UNSAFE_useTextFieldInputHandlers.js');
+require('../../utils/PRIVATE_clientHints.js');
+require('../../clientHints-e821b5ee.js');
+require('../../hooks/UNSAFE_useDebounce.js');
+require('../../UNSAFE_LiveRegion.js');
+require('../../UNSAFE_UserAssistance.js');
+require('../../InlineHelpSource-c498a09a.js');
+require('../../UNSAFE_ComponentMessage.js');
+require('../../ComponentMessage-eea92e6b.js');
+require('../../PRIVATE_Message.js');
+require('../../utils/PRIVATE_timer.js');
+require('../../MessageCloseButton-66757186.js');
+require('../../UNSAFE_Button.js');
+require('../../Button-07d97191.js');
+require('../../UNSAFE_BaseButton.js');
+require('../../BaseButton-9bfe304e.js');
+require('../../hooks/UNSAFE_usePress.js');
+require('../../hooks/UNSAFE_useActive.js');
+require('../../utils/UNSAFE_mergeProps.js');
+require('../../index-3651c0e7.js');
+require('../../index-d5067e50.js');
+require('../../UNSAFE_Icon.js');
+require('../../Icon-c44e10c9.js');
+require('../../hooks/UNSAFE_useTooltip.js');
+require('../../UNSAFE_Floating.js');
+require('../../Floating-48167355.js');
+require('../../index-55dfe40c.js');
+require('../../utils/PRIVATE_floatingUtils.js');
+require('../../utils/PRIVATE_refUtils.js');
+require('../../hooks/UNSAFE_useOutsideClick.js');
+require('../../hooks/UNSAFE_useFocus.js');
+require('../../hooks/UNSAFE_useTouch.js');
+require('../../hooks/UNSAFE_useAnimation.js');
+require('../../useAnimation-576ef8bc.js');
+require('../../hooks/UNSAFE_useTheme.js');
+require('../../MessageDetail-9ab2fec2.js');
+require('../../MessageFormattingUtils-fac29bd4.js');
+require('../../utils/UNSAFE_getLocale.js');
+require('../../utils/UNSAFE_stringUtils.js');
+require('../../stringUtils-dad38408.js');
+require('../../Message.types-d5b1820f.js');
+require('../../MessageStartIcon-5cdb8fbe.js');
+require('../../MessageSummary-ea4ba9b8.js');
+require('../../MessageTimestamp-cb7998db.js');
+require('../../MessageUtils-c82ad817.js');
+require('../../utils/UNSAFE_logger.js');
+require('../../utils/UNSAFE_soundUtils.js');
+require('../../MessagesManager-88e137d7.js');
+require('../../PRIVATE_TransitionGroup.js');
+require('../../hooks/UNSAFE_useMessagesContext.js');
+require('../../UNSAFE_HiddenAccessible.js');
+require('../../HiddenAccessible-42dab376.js');
+require('../../ComponentMessageContainer-7880a1b9.js');
+require('../../UNSAFE_Grid.js');
+require('../../utils/UNSAFE_interpolations/grid.js');
+require('../../hooks/UNSAFE_useCurrentValueReducer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var userEvent__default = /*#__PURE__*/_interopDefaultLegacy(userEvent);
+
+var NumberInputText_stories = {
+    title: 'Forms/UNSAFE_NumberInputText',
+    component: NumberInputText.NumberInputText,
+    decorators: [
+        (Story) => (jsxRuntime.jsx("div", Object.assign({ style: { minWidth: '18rem', maxWidth: '28rem', width: '50%' } }, { children: Story() })))
+    ]
+};
+const DemoNumberInputText = ({ assistiveText, helpSourceLink, helpSourceText, isDisabled, isReadonly, isRequired, label, labelEdge, messages, placeholder, prefix, suffix, textAlign, userAssistanceDensity, value, variant }) => {
+    const [displayValue, setDisplayValue] = hooks.useState(value !== null && value !== void 0 ? value : '');
+    const handleInput = hooks.useCallback((detail) => {
+        var _a;
+        if (displayValue !== detail.value) {
+            setDisplayValue((_a = detail.value) !== null && _a !== void 0 ? _a : '');
+        }
+    }, [displayValue]);
+    // In Redwood UX spec Required text should hide when the user types in a value and commits it,
+    // not when the user starts typing. Because of that we set isRequiredShown based on the
+    // committedValue being empty and isRequired.
+    const [valueCommitted, setValueCommitted] = hooks.useState(value !== null && value !== void 0 ? value : '');
+    const handleCommit = hooks.useCallback((detail) => {
+        var _a;
+        if (valueCommitted !== detail.value) {
+            setValueCommitted((_a = detail.value) !== null && _a !== void 0 ? _a : '');
+        }
+    }, [valueCommitted]);
+    const valueNow = valueCommitted === '' ? undefined : +valueCommitted;
+    return (jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueNow: valueNow, ariaValueText: valueCommitted, assistiveText: assistiveText, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isDisabled: isDisabled, isReadonly: isReadonly, isRequired: isRequired, isRequiredShown: isRequired && valueCommitted === '', label: label, labelEdge: labelEdge, messages: messages, onCommit: handleCommit, onInput: handleInput, placeholder: placeholder, prefix: prefix, suffix: suffix, textAlign: textAlign, userAssistanceDensity: userAssistanceDensity, value: displayValue, variant: variant }));
+};
+const demoContainerStyle = {
+    backgroundColor: 'aliceblue',
+    border: 'yellow dotted 2px',
+    boxSizing: 'border-box',
+    color: 'orangered',
+    height: '80px',
+    minWidth: '6em',
+    textAlign: 'right',
+    width: '25em'
+};
+const DemoEmbeddedNumberInputText = (props) => (jsxRuntime.jsx("div", Object.assign({ style: demoContainerStyle }, { children: jsxRuntime.jsx(DemoNumberInputText, Object.assign({}, props, { variant: "embedded" })) })));
+const DemoSteppers = ({ isDisabled, isReadonly, label, labelEdge }) => {
+    // Note: unary + converts empty string to 0 so use parseInt for this example.
+    const parse = (value) => parseInt(value.replace(/[^\d]+/gi, ''));
+    const min = 10, max = 100, step = 5;
+    const [displayValue, setDisplayValue] = hooks.useState('20');
+    const handleInput = hooks.useCallback((detail) => {
+        var _a;
+        if (displayValue !== detail.value) {
+            setDisplayValue((_a = detail.value) !== null && _a !== void 0 ? _a : '');
+        }
+    }, [displayValue]);
+    const [committedValue, setCommittedValue] = hooks.useState(20);
+    const handleCommit = hooks.useCallback((detail) => {
+        var _a;
+        // On commit, filter out any non-numbers and parse the value.
+        // If the result is NaN, clear the display value.
+        const numberValue = parse((_a = detail.value) !== null && _a !== void 0 ? _a : '');
+        const newValue = Number.isNaN(numberValue) ? '' : numberValue.toString();
+        if (displayValue !== newValue) {
+            setDisplayValue(newValue);
+        }
+        if (committedValue !== numberValue) {
+            setCommittedValue(numberValue);
+        }
+    }, [displayValue, committedValue]);
+    const doStep = (currentValue, direction) => {
+        if (Number.isNaN(currentValue)) {
+            // currentValue is not a valid number, return min
+            return min;
+        }
+        const modulo = currentValue % step;
+        let newValue;
+        if (modulo !== 0) {
+            // If currentValue is not a step match, snap it.
+            newValue = direction === 'increase' ? currentValue + (step - modulo) : currentValue - modulo;
+        }
+        else {
+            // If currentValue is already a step match, just increment or decrement it.
+            newValue = direction === 'increase' ? currentValue + step : currentValue - step;
+        }
+        return newValue > max ? max : newValue < min ? min : newValue;
+    };
+    // Increment or decrement the current display value and then update the
+    // display and committed values to match.
+    const handleStep = hooks.useCallback((event) => {
+        setDisplayValue((current) => {
+            const currentValue = parse(current);
+            const newValue = doStep(currentValue, event.direction);
+            setCommittedValue(newValue);
+            return newValue.toString();
+        });
+    }, []);
+    const numberTooHigh = [
+        {
+            severity: 'error',
+            detail: 'Enter 100 or a lower number.'
+        }
+    ];
+    const numberTooLow = [
+        {
+            severity: 'error',
+            detail: 'Enter 10 or a higher number.'
+        }
+    ];
+    const messages = committedValue !== NaN
+        ? committedValue > max
+            ? numberTooHigh
+            : committedValue < min
+                ? numberTooLow
+                : []
+        : [];
+    // If the committed value is not a valid number, don't update the aria value attributes.
+    const valueNow = Number.isNaN(committedValue) ? undefined : committedValue;
+    const valueText = Number.isNaN(committedValue) ? undefined : committedValue.toString();
+    return (jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueMax: max, ariaValueMin: min, ariaValueNow: valueNow, ariaValueText: valueText, assistiveText: "Enter a number between 10 and 100", hasSteppers: true, isDisabled: isDisabled, isReadonly: isReadonly, isStepDownDisabled: committedValue <= min, isStepUpDisabled: committedValue >= max, label: label, labelEdge: labelEdge, messages: messages, onCommit: handleCommit, onInput: handleInput, onSpin: handleStep, onStep: handleStep, value: displayValue }));
+};
+const numValue = '123';
+const widthValue = '1920';
+const accessCode = '58964';
+const lbsValue = '140.5';
+const longValue = '001-111222-3334-444444-555666666-777-8880-9099-0123456789';
+const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+const formContext = {
+    isFormLayout: true,
+    userAssistanceDensity: 'efficient'
+};
+const formContextWrap = {
+    isFormLayout: true,
+    labelWrapping: 'wrap',
+    userAssistanceDensity: 'efficient'
+};
+const formContextTruncate = {
+    isFormLayout: true,
+    labelWrapping: 'truncate',
+    userAssistanceDensity: 'efficient'
+};
+const Overview = () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "States inside form context" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoNumberInputText, { label: "Enabled", value: numValue }), jsxRuntime.jsx(DemoNumberInputText, { label: "Disabled", value: numValue, isDisabled: true }), jsxRuntime.jsx(DemoNumberInputText, { label: "Readonly", value: numValue, isReadonly: true }), jsxRuntime.jsx(DemoNumberInputText, { label: "Enabled no value" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Disabled no value", isDisabled: true }), jsxRuntime.jsx(DemoNumberInputText, { label: "Readonly no value", isReadonly: true })] })), jsxRuntime.jsx("h4", { children: "States outside form context" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(DemoNumberInputText, { label: "Enabled", value: numValue }), jsxRuntime.jsx(DemoNumberInputText, { label: "Disabled", value: numValue, isDisabled: true }), jsxRuntime.jsx(DemoNumberInputText, { label: "Readonly", value: numValue, isReadonly: true }), jsxRuntime.jsx(DemoNumberInputText, { label: "Enabled no value" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Disabled no value", isDisabled: true }), jsxRuntime.jsx(DemoNumberInputText, { label: "Readonly no value", isReadonly: true })] }), jsxRuntime.jsx("h4", { children: "Required & Placeholder" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoNumberInputText, { label: "Required", isRequired: true }), jsxRuntime.jsx(DemoNumberInputText, { label: "Placeholder", placeholder: "placeholder text" })] })), jsxRuntime.jsx("h4", { children: "Prefix & Suffix" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoNumberInputText, { label: "Access Code", prefix: "IN", value: accessCode }), jsxRuntime.jsx(DemoNumberInputText, { label: "Width", suffix: "px", value: widthValue })] })), jsxRuntime.jsx("h4", { children: "Help" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoNumberInputText, { label: "help text", value: numValue, assistiveText: "help text" }), jsxRuntime.jsx(DemoNumberInputText, { label: "help source", value: numValue, helpSourceLink: "https://www.oracle.com" }), jsxRuntime.jsx(DemoNumberInputText, { label: "help source (custom text)", value: numValue, helpSourceLink: "https://www.oracle.com", helpSourceText: "Click here" })] })), jsxRuntime.jsx("h4", { children: "Messages" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoNumberInputText, { label: "error", value: numValue, messages: [{ severity: 'error', detail: 'detail' }] }), jsxRuntime.jsx(DemoNumberInputText, { label: "warning", value: numValue, messages: [{ severity: 'warning', detail: 'detail' }] }), jsxRuntime.jsx(DemoNumberInputText, { label: "info", value: numValue, messages: [{ severity: 'info', detail: 'detail' }] }), jsxRuntime.jsx(DemoNumberInputText, { label: "confirmation", value: numValue, messages: [{ severity: 'confirmation', detail: 'detail' }] })] }))] }));
+};
+const EmbeddedStylesOverview = () => {
+    return (jsxRuntime.jsxs("div", Object.assign({ style: "max-width: 50%;" }, { children: [jsxRuntime.jsx("h4", { children: "States inside form context" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Enabled", value: numValue }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Disabled", value: numValue, isDisabled: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Readonly", value: numValue, isReadonly: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Enabled no value" }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Disabled no value", isDisabled: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Readonly no value", isReadonly: true })] })), jsxRuntime.jsx("h4", { children: "States outside form context" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Enabled", value: numValue }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Disabled", value: numValue, isDisabled: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Readonly", value: numValue, isReadonly: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Enabled no value" }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Disabled no value", isDisabled: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Readonly no value", isReadonly: true })] }), jsxRuntime.jsx("h4", { children: "No label" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Enabled", labelEdge: "none", value: numValue }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Disabled", labelEdge: "none", value: numValue, isDisabled: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Readonly", labelEdge: "none", value: numValue, isReadonly: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Enabled no value", labelEdge: "none" }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Disabled no value", labelEdge: "none", isDisabled: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Readonly no value", labelEdge: "none", isReadonly: true })] }), jsxRuntime.jsx("h4", { children: "Required & Placeholder" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Required", isRequired: true }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "Placeholder", placeholder: "placeholder text" })] })), jsxRuntime.jsx("h4", { children: "Help" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "help text", value: numValue, assistiveText: "help text" }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "help source", value: numValue, helpSourceLink: "https://www.oracle.com" })] })), jsxRuntime.jsx("h4", { children: "Messages" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "error", value: numValue, messages: [{ severity: 'error', detail: 'detail' }] }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "warning", value: numValue, messages: [{ severity: 'warning', detail: 'detail' }] }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "info", value: numValue, messages: [{ severity: 'info', detail: 'detail' }] }), jsxRuntime.jsx(DemoEmbeddedNumberInputText, { label: "confirmation", value: numValue, messages: [{ severity: 'confirmation', detail: 'detail' }] })] }))] })));
+};
+const EmbeddedStyles = (args) => {
+    const demoContainerStyle = {
+        backgroundColor: 'aliceblue',
+        border: 'yellow dotted 2px',
+        boxSizing: 'border-box',
+        color: 'orangered',
+        height: '80px',
+        minWidth: '6em',
+        textAlign: 'right',
+        width: '25em'
+    };
+    return (jsxRuntime.jsx("div", Object.assign({ style: demoContainerStyle }, { children: jsxRuntime.jsx(DemoNumberInputText, Object.assign({ label: "Input Number" }, args)) })));
+};
+EmbeddedStyles.args = {
+    isDisabled: false,
+    isReadonly: false,
+    labelEdge: 'none',
+    placeholder: 'Enter value',
+    textAlign: undefined,
+    variant: 'embedded'
+};
+EmbeddedStyles.parameters = {
+    controls: {
+        include: [...Object.keys(EmbeddedStyles.args)]
+    }
+};
+const createNumberInputText = ({ textAlign, isDisabled, isReadonly, label, labelEdge, value = numValue }) => {
+    return (jsxRuntime.jsx(DemoNumberInputText, { textAlign: textAlign, label: label, labelEdge: labelEdge, value: value, isDisabled: isDisabled, isReadonly: isReadonly }));
+};
+const TextAlign = () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx("h4", { children: "Enabled" }), createNumberInputText({ textAlign: 'start', label: 'start' }), createNumberInputText({ textAlign: 'end', label: 'end' }), createNumberInputText({ textAlign: 'right', label: 'right' }), jsxRuntime.jsx("h4", { children: "Disabled" }), createNumberInputText({ textAlign: 'start', label: 'start', isDisabled: true }), createNumberInputText({ textAlign: 'end', label: 'end', isDisabled: true }), createNumberInputText({ textAlign: 'right', label: 'right', isDisabled: true }), jsxRuntime.jsx("h4", { children: "Readonly" }), createNumberInputText({ textAlign: 'start', label: 'start', isReadonly: true }), createNumberInputText({ textAlign: 'end', label: 'end', isReadonly: true }), createNumberInputText({ textAlign: 'right', label: 'right', isReadonly: true })] })), jsxRuntime.jsx("h4", { children: "Readonly outside form context" }), createNumberInputText({ textAlign: 'start', label: 'start', isReadonly: true }), createNumberInputText({ textAlign: 'end', label: 'end', isReadonly: true }), createNumberInputText({ textAlign: 'right', label: 'right', isReadonly: true })] }));
+};
+const EnabledDisabledReadonly = ({ labelEdge = 'inside', label, value }) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [createNumberInputText({ label: label || 'Enabled', labelEdge: labelEdge, value: value }), createNumberInputText({
+                label: label || 'Disabled',
+                isDisabled: true,
+                labelEdge: labelEdge,
+                value: value
+            }), createNumberInputText({
+                label: label || 'Readonly',
+                isReadonly: true,
+                labelEdge: labelEdge,
+                value: value
+            })] }));
+};
+const LabelEdge = ({ labelEdge = 'inside', label }) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx("h4", { children: "Inside form context" }), jsxRuntime.jsx(EnabledDisabledReadonly, { label: label, labelEdge: labelEdge })] })), jsxRuntime.jsx("h4", { children: "Outside form context" }), jsxRuntime.jsx(EnabledDisabledReadonly, { label: label, labelEdge: labelEdge })] }));
+};
+const LabelEdgeInside = ({ label }) => jsxRuntime.jsx(LabelEdge, { label: label });
+const LabelEdgeStart = ({ label }) => (jsxRuntime.jsx(LabelEdge, { labelEdge: "start", label: label }));
+const LabelEdgeTop = ({ label }) => (jsxRuntime.jsx(LabelEdge, { labelEdge: "top", label: label }));
+const NoLabel = ({ label }) => (jsxRuntime.jsx(LabelEdge, { labelEdge: "none", label: label }));
+const LongLabels = ({ labelEdge = 'inside', label }) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContextWrap }, { children: [jsxRuntime.jsx("h4", { children: "Inside form context - wrapped" }), jsxRuntime.jsx(EnabledDisabledReadonly, { label: label, labelEdge: labelEdge })] })), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContextTruncate }, { children: [jsxRuntime.jsx("h4", { children: "Inside form context - truncated" }), jsxRuntime.jsx(EnabledDisabledReadonly, { label: label, labelEdge: labelEdge })] })), jsxRuntime.jsx("h4", { children: "Outside form context" }), jsxRuntime.jsx(EnabledDisabledReadonly, { label: label, labelEdge: labelEdge })] }));
+};
+const LongLabelInside = () => jsxRuntime.jsx(LabelEdgeInside, { label: longText });
+const LongLabelStart = () => jsxRuntime.jsx(LongLabels, { label: longText, labelEdge: "start" });
+const LongLabelTop = () => jsxRuntime.jsx(LongLabels, { label: longText, labelEdge: "top" });
+const LongValue = () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx("h4", { children: "Inside form context" }), jsxRuntime.jsx(EnabledDisabledReadonly, { value: longValue })] })), jsxRuntime.jsx("h4", { children: "Outside form context" }), jsxRuntime.jsx(EnabledDisabledReadonly, { value: longValue })] }));
+};
+const Prefix = () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "States inside form context" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoNumberInputText, { label: "Access code", value: accessCode, prefix: "IN" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Access code", value: accessCode, isDisabled: true, prefix: "IN" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Access code", value: accessCode, isReadonly: true, prefix: "IN" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Access code", prefix: "IN" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Access code", isDisabled: true, prefix: "IN" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Access code", isReadonly: true, prefix: "IN" })] })), jsxRuntime.jsx("h4", { children: "Placeholder" }), jsxRuntime.jsx(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: jsxRuntime.jsx(DemoNumberInputText, { label: "Access code", placeholder: "placeholder text", prefix: "IN" }) }))] }));
+};
+const Suffix = () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "States inside form context" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoNumberInputText, { label: "Enabled Weight", value: lbsValue, suffix: "lbs" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Disabled Weight", value: lbsValue, isDisabled: true, suffix: "lbs" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Readonly Weight", value: lbsValue, isReadonly: true, suffix: "lbs" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Enabled No Value Weight", suffix: "lbs" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Disabled No Value Weight", isDisabled: true, suffix: "lbs" }), jsxRuntime.jsx(DemoNumberInputText, { label: "Readonly No Value Weight", isReadonly: true, suffix: "lbs" })] })), jsxRuntime.jsx("h4", { children: "Placeholder" }), jsxRuntime.jsx(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: jsxRuntime.jsx(DemoNumberInputText, { label: "Target Weight", placeholder: "placeholder text", suffix: "lbs" }) }))] }));
+};
+const MinAndMax = () => {
+    // Note: unary + converts empty string to 0, so use parseInt for this example.
+    const parse = (value) => parseInt(value.replace(/[^\d]+/gi, ''));
+    const min = 10;
+    const max = 100;
+    const [displayValue, setDisplayValue] = hooks.useState('50');
+    const handleInput = hooks.useCallback((detail) => {
+        var _a;
+        if (displayValue !== detail.value) {
+            setDisplayValue((_a = detail.value) !== null && _a !== void 0 ? _a : '');
+        }
+    }, [displayValue]);
+    const [committedValue, setCommittedValue] = hooks.useState(50);
+    const handleCommit = hooks.useCallback((detail) => {
+        var _a;
+        // On commit, filter out any non-numbers and parse the value.
+        // If the result is NaN, clear the display value.
+        const numberValue = parse((_a = detail.value) !== null && _a !== void 0 ? _a : '');
+        const newValue = Number.isNaN(numberValue) ? '' : numberValue.toString();
+        if (displayValue !== newValue) {
+            setDisplayValue(newValue);
+        }
+        if (committedValue !== numberValue) {
+            setCommittedValue(numberValue);
+        }
+    }, [displayValue, committedValue]);
+    const numberTooHigh = [
+        {
+            severity: 'error',
+            detail: 'Enter 100 or a lower number.'
+        }
+    ];
+    const numberTooLow = [
+        {
+            severity: 'error',
+            detail: 'Enter 10 or a higher number.'
+        }
+    ];
+    const messages = committedValue !== NaN
+        ? committedValue > max
+            ? numberTooHigh
+            : committedValue < min
+                ? numberTooLow
+                : []
+        : [];
+    // If the committed value is not a valid number, don't update the aria value attributes.
+    // Note that this applies when there is no value (empty string parses as NaN with parseInt).
+    const valueNow = Number.isNaN(committedValue) ? undefined : committedValue;
+    const valueText = Number.isNaN(committedValue) ? undefined : committedValue.toString();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "Min and Max" }), jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueMax: max, ariaValueMin: min, ariaValueNow: valueNow, ariaValueText: valueText, assistiveText: "Enter a number between 10 and 100", label: "min=10, max=100", onCommit: handleCommit, onInput: handleInput, messages: messages, value: displayValue })] }));
+};
+const StepButtonOverview = () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "States inside form context" }), jsxRuntime.jsxs(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: [jsxRuntime.jsx(DemoSteppers, { label: "Enabled" }), jsxRuntime.jsx(DemoSteppers, { isDisabled: true, label: "Disabled" }), jsxRuntime.jsx(DemoSteppers, { isReadonly: true, label: "Readonly" })] })), jsxRuntime.jsx("h4", { children: "No Label" }), jsxRuntime.jsx(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: jsxRuntime.jsx(DemoSteppers, { labelEdge: "none", label: "No label" }) })), jsxRuntime.jsx("h4", { children: "Label Edge Top" }), jsxRuntime.jsx(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: jsxRuntime.jsx(DemoSteppers, { labelEdge: "top", label: "Top label" }) })), jsxRuntime.jsx("h4", { children: "Label Edge Start" }), jsxRuntime.jsx(hooks_UNSAFE_useFormContext.FormContext.Provider, Object.assign({ value: formContext }, { children: jsxRuntime.jsx(DemoSteppers, { labelEdge: "start", label: "Start label" }) }))] }));
+};
+const StepButtons = () => {
+    // Note: unary + converts empty string to 0 so use parseInt for this example.
+    const parse = (value) => parseInt(value.replace(/[^\d]+/gi, ''));
+    const min = 10, max = 100, step = 5;
+    const [displayValue, setDisplayValue] = hooks.useState('10');
+    const handleInput = hooks.useCallback((detail) => {
+        var _a;
+        if (displayValue !== detail.value) {
+            setDisplayValue((_a = detail.value) !== null && _a !== void 0 ? _a : '');
+        }
+    }, [displayValue]);
+    const [committedValue, setCommittedValue] = hooks.useState(10);
+    const handleCommit = hooks.useCallback((detail) => {
+        var _a;
+        // On commit, filter out any non-numbers and parse the value.
+        // If the result is NaN, clear the display value.
+        const numberValue = parse((_a = detail.value) !== null && _a !== void 0 ? _a : '');
+        const newValue = Number.isNaN(numberValue) ? '' : numberValue.toString();
+        if (displayValue !== newValue) {
+            setDisplayValue(newValue);
+        }
+        if (committedValue !== numberValue) {
+            setCommittedValue(numberValue);
+        }
+    }, [displayValue, committedValue]);
+    const doStep = (currentValue, direction) => {
+        if (Number.isNaN(currentValue)) {
+            // currentValue is not a valid number, return min
+            return min;
+        }
+        const modulo = currentValue % step;
+        let newValue;
+        if (modulo !== 0) {
+            // If currentValue is not a step match, snap it.
+            newValue = direction === 'increase' ? currentValue + (step - modulo) : currentValue - modulo;
+        }
+        else {
+            // If currentValue is already a step match, just increment or decrement it.
+            newValue = direction === 'increase' ? currentValue + step : currentValue - step;
+        }
+        return newValue > max ? max : newValue < min ? min : newValue;
+    };
+    // Increment or decrement the current display value and then update the
+    // display and committed values to match.
+    const handleStep = hooks.useCallback((event) => {
+        setDisplayValue((current) => {
+            const currentValue = parse(current);
+            const newValue = doStep(currentValue, event.direction);
+            setCommittedValue(newValue);
+            return newValue.toString();
+        });
+    }, []);
+    const numberTooHigh = [
+        {
+            severity: 'error',
+            detail: 'Enter 100 or a lower number.'
+        }
+    ];
+    const numberTooLow = [
+        {
+            severity: 'error',
+            detail: 'Enter 10 or a higher number.'
+        }
+    ];
+    const messages = committedValue !== NaN
+        ? committedValue > max
+            ? numberTooHigh
+            : committedValue < min
+                ? numberTooLow
+                : []
+        : [];
+    // If the committed value is not a valid number, don't update the aria value attributes.
+    const valueNow = Number.isNaN(committedValue) ? undefined : committedValue;
+    const valueText = Number.isNaN(committedValue) ? undefined : committedValue.toString();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "Step Buttons" }), jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueMax: max, ariaValueMin: min, ariaValueNow: valueNow, ariaValueText: valueText, assistiveText: "Enter a number between 10 and 100", hasSteppers: true, isStepDownDisabled: committedValue <= min, isStepUpDisabled: committedValue >= max, label: "min=10, max=100, step=5", messages: messages, onCommit: handleCommit, onInput: handleInput, onSpin: handleStep, onStep: handleStep, value: displayValue })] }));
+};
+
+function __variableDynamicImportRuntime0__(path) {
+  switch (path) {
+    case '../../resources/nls/ar/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar/bundle.js'); });
+    case '../../resources/nls/ar-XB/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar-XB/bundle.js'); });
+    case '../../resources/nls/bg/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bg/bundle.js'); });
+    case '../../resources/nls/bs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs/bundle.js'); });
+    case '../../resources/nls/bs-Cyrl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs-Cyrl/bundle.js'); });
+    case '../../resources/nls/cs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/cs/bundle.js'); });
+    case '../../resources/nls/da/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/da/bundle.js'); });
+    case '../../resources/nls/de/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/de/bundle.js'); });
+    case '../../resources/nls/el/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/el/bundle.js'); });
+    case '../../resources/nls/en/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en/bundle.js'); });
+    case '../../resources/nls/en-XA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XA/bundle.js'); });
+    case '../../resources/nls/en-XC/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XC/bundle.js'); });
+    case '../../resources/nls/es/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/es/bundle.js'); });
+    case '../../resources/nls/et/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/et/bundle.js'); });
+    case '../../resources/nls/fi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fi/bundle.js'); });
+    case '../../resources/nls/fr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr/bundle.js'); });
+    case '../../resources/nls/fr-CA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr-CA/bundle.js'); });
+    case '../../resources/nls/he/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/he/bundle.js'); });
+    case '../../resources/nls/hr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hr/bundle.js'); });
+    case '../../resources/nls/hu/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hu/bundle.js'); });
+    case '../../resources/nls/is/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/is/bundle.js'); });
+    case '../../resources/nls/it/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/it/bundle.js'); });
+    case '../../resources/nls/ja/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ja/bundle.js'); });
+    case '../../resources/nls/ko/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ko/bundle.js'); });
+    case '../../resources/nls/lt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lt/bundle.js'); });
+    case '../../resources/nls/lv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lv/bundle.js'); });
+    case '../../resources/nls/ms/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ms/bundle.js'); });
+    case '../../resources/nls/nl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/nl/bundle.js'); });
+    case '../../resources/nls/no/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/no/bundle.js'); });
+    case '../../resources/nls/pl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pl/bundle.js'); });
+    case '../../resources/nls/pt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt/bundle.js'); });
+    case '../../resources/nls/pt-PT/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt-PT/bundle.js'); });
+    case '../../resources/nls/ro/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ro/bundle.js'); });
+    case '../../resources/nls/ru/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ru/bundle.js'); });
+    case '../../resources/nls/sk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sk/bundle.js'); });
+    case '../../resources/nls/sl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sl/bundle.js'); });
+    case '../../resources/nls/sr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr/bundle.js'); });
+    case '../../resources/nls/sr-Latn/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr-Latn/bundle.js'); });
+    case '../../resources/nls/sv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sv/bundle.js'); });
+    case '../../resources/nls/th/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/th/bundle.js'); });
+    case '../../resources/nls/tr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/tr/bundle.js'); });
+    case '../../resources/nls/uk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/uk/bundle.js'); });
+    case '../../resources/nls/vi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/vi/bundle.js'); });
+    case '../../resources/nls/zh-Hans/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hans/bundle.js'); });
+    case '../../resources/nls/zh-Hant/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hant/bundle.js'); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+async function getEnvironmentContext() {
+    const locale = utils_UNSAFE_matchTranslationBundle.matchTranslationBundle(['en'], new Set(['en-US', 'en']));
+    const { default: translations } = await __variableDynamicImportRuntime0__(`../../resources/nls/${locale}/bundle.ts`);
+    return {
+        translations: { '@oracle/oraclejet-preact': translations }
+    };
+}
+const noOp = () => { };
+describe('Test NumberInputText', () => {
+    it('Renders', function () {
+        const { container } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { label: "mylabel", onInput: noOp }));
+        const inputElement = container.querySelector('input');
+        chai.expect(inputElement).not.to.be.null;
+    });
+    it('Does not have spinbutton role if no steppers are shown', function () {
+        const { container } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { label: "mylabel", onInput: noOp }));
+        const match = container.querySelector('[role=spinbutton]');
+        chai.expect(match).to.be.null;
+    });
+    afterEach(preact.cleanup);
+});
+describe('Test NumberInputText aria-value attributes', () => {
+    it('Adds aria-valuemin and aria-valuemax when enabled', function () {
+        const { container } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueMin: 0, ariaValueMax: 100, label: "min=0, max=100", onInput: noOp }));
+        const inputElement = container.querySelector('input');
+        const ariaValueMin = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuemin');
+        const ariaValueMax = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuemax');
+        chai.expect(ariaValueMin).to.equal('0');
+        chai.expect(ariaValueMax).to.equal('100');
+    });
+    it('Adds aria-valuemin and aria-valuemax when disabled', function () {
+        const { container } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueMin: 0, ariaValueMax: 100, isDisabled: true, label: "min=0, max=100", onInput: noOp }));
+        const inputElement = container.querySelector('input');
+        const ariaValueMin = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuemin');
+        const ariaValueMax = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuemax');
+        chai.expect(ariaValueMin).to.equal('0');
+        chai.expect(ariaValueMax).to.equal('100');
+    });
+    it('Does not add aria-valuemin and aria-valuemax when readonly', function () {
+        const numberVal = '25';
+        const { getByText } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueMin: 0, ariaValueMax: 100, isReadonly: true, label: "min=0, max=100", onInput: noOp, value: numberVal }));
+        // When readonly, only a div is shown which should not have aria value attributes set.
+        const inputDiv = getByText(numberVal);
+        const ariaValueMin = inputDiv.getAttribute('aria-valuemin');
+        const ariaValueMax = inputDiv.getAttribute('aria-valuemax');
+        chai.expect(ariaValueMin).to.be.null;
+        chai.expect(ariaValueMax).to.be.null;
+    });
+    it('Adds aria-valuenow and aria-valuetext when enabled', function () {
+        const currencyString = '$500';
+        const { container } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueNow: 500, ariaValueText: currencyString, label: "min=0, max=1000", onInput: noOp, value: currencyString }));
+        const inputElement = container.querySelector('input');
+        const ariaValueNow = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuenow');
+        const ariaValueText = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuetext');
+        chai.expect(ariaValueNow).to.equal('500');
+        chai.expect(ariaValueText).to.equal(currencyString);
+    });
+    it('Adds aria-valuenow and aria-valuetext when disabled', function () {
+        const currencyString = '$500';
+        const { container } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueNow: 500, ariaValueText: currencyString, isDisabled: true, label: "min=0, max=1000", onInput: noOp, value: currencyString }));
+        const inputElement = container.querySelector('input');
+        const ariaValueNow = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuenow');
+        const ariaValueText = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuetext');
+        chai.expect(ariaValueNow).to.equal('500');
+        chai.expect(ariaValueText).to.equal(currencyString);
+    });
+    it('Does not add aria-valuenow and aria-valuetext when readonly', function () {
+        const currencyString = '$500';
+        const { getByText } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueNow: 500, ariaValueText: currencyString, isReadonly: true, label: "min=0, max=1000", onInput: noOp, value: currencyString }));
+        // When readonly, only a div is shown which should not have aria value attributes set.
+        const inputDiv = getByText(currencyString);
+        const ariaValueNow = inputDiv.getAttribute('aria-valuenow');
+        const ariaValueText = inputDiv.getAttribute('aria-valuetext');
+        chai.expect(ariaValueNow).to.be.null;
+        chai.expect(ariaValueText).to.be.null;
+    });
+    it('Does not add aria-valuetext when it is the same as aria-valuenow', function () {
+        const numberVal = '500';
+        const { container } = preact.render(jsxRuntime.jsx(NumberInputText.NumberInputText, { ariaValueNow: 500, ariaValueText: numberVal, label: "min=0, max=1000", onInput: noOp, value: numberVal }));
+        const inputElement = container.querySelector('input');
+        const ariaValueNow = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuenow');
+        const ariaValueText = inputElement === null || inputElement === void 0 ? void 0 : inputElement.getAttribute('aria-valuetext');
+        chai.expect(ariaValueNow).to.equal(numberVal);
+        chai.expect(ariaValueText).to.be.null;
+    });
+    afterEach(preact.cleanup);
+});
+describe('Test NumberInputText steppers', () => {
+    let env;
+    beforeEach(async function () {
+        env = env !== null && env !== void 0 ? env : (await getEnvironmentContext());
+    });
+    afterEach(preact.cleanup);
+    const getStepUpButton = (container) => container === null || container === void 0 ? void 0 : container.querySelector('button[title="Increase"]');
+    const getStepDownButton = (container) => container === null || container === void 0 ? void 0 : container.querySelector('button[title="Decrease"]');
+    it('If hasSteppers=true and control is enabled, steppers are present and role is spinbutton', function () {
+        const { container, getByRole } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(NumberInputText.NumberInputText, { hasSteppers: true, label: "mylabel", onInput: noOp }) })));
+        const roleElement = getByRole('spinbutton');
+        chai.expect(roleElement).not.to.be.null;
+        chai.expect(roleElement === null || roleElement === void 0 ? void 0 : roleElement.tagName.toUpperCase()).to.equal('INPUT');
+        const upButton = getStepUpButton(container);
+        const downButton = getStepDownButton(container);
+        chai.expect(upButton).not.to.be.null;
+        chai.expect(downButton).not.to.be.null;
+    });
+    it('If hasSteppers=true and control is disabled, steppers are present and role is spinbutton', function () {
+        const { container, getByRole } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(NumberInputText.NumberInputText, { hasSteppers: true, isDisabled: true, label: "mylabel", onInput: noOp }) })));
+        const roleElement = getByRole('spinbutton');
+        chai.expect(roleElement).not.to.be.null;
+        chai.expect(roleElement === null || roleElement === void 0 ? void 0 : roleElement.tagName.toUpperCase()).to.equal('INPUT');
+        // If isDisabled is true, steppers are still present.
+        const upButton = getStepUpButton(container);
+        const downButton = getStepDownButton(container);
+        chai.expect(upButton).not.to.be.null;
+        chai.expect(downButton).not.to.be.null;
+    });
+    it('If hasSteppers=true and control is readonly, no steppers or spinbutton role', function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(NumberInputText.NumberInputText, { hasSteppers: true, isReadonly: true, label: "mylabel", onInput: noOp }) })));
+        const match = container.querySelector('[role=spinbutton]');
+        chai.expect(match).to.be.null;
+        const upButton = getStepUpButton(container);
+        const downButton = getStepDownButton(container);
+        chai.expect(upButton).to.be.null;
+        chai.expect(downButton).to.be.null;
+    });
+    it('Step buttons are shown with correct tabindex and title', function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(NumberInputText.NumberInputText, { hasSteppers: true, label: "mylabel", onInput: noOp }) })));
+        const upButton = getStepUpButton(container);
+        const downButton = getStepDownButton(container);
+        chai.expect(upButton === null || upButton === void 0 ? void 0 : upButton.getAttribute('tabindex')).to.equal('-1');
+        chai.expect(downButton === null || downButton === void 0 ? void 0 : downButton.getAttribute('tabindex')).to.equal('-1');
+        chai.expect(upButton === null || upButton === void 0 ? void 0 : upButton.getAttribute('title')).to.equal('Increase');
+        chai.expect(downButton === null || downButton === void 0 ? void 0 : downButton.getAttribute('title')).to.equal('Decrease');
+    });
+    it('Step buttons can be disabled', function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(NumberInputText.NumberInputText, { hasSteppers: true, isStepDownDisabled: true, isStepUpDisabled: true, label: "mylabel", onInput: noOp }) })));
+        const upButton = getStepUpButton(container);
+        const downButton = getStepDownButton(container);
+        chai.expect(upButton).not.to.be.null;
+        chai.expect(downButton).not.to.be.null;
+        const upDisabled = upButton === null || upButton === void 0 ? void 0 : upButton.getAttribute('disabled');
+        const downDisabled = downButton === null || downButton === void 0 ? void 0 : downButton.getAttribute('disabled');
+        chai.expect(upDisabled).not.to.be.null;
+        chai.expect(downDisabled).not.to.be.null;
+    });
+    it('If number input is disabled, the steppers are disabled', function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(NumberInputText.NumberInputText, { hasSteppers: true, isDisabled: true, label: "mylabel", onInput: noOp }) })));
+        const upButton = getStepUpButton(container);
+        const downButton = getStepDownButton(container);
+        chai.expect(upButton).not.to.be.null;
+        chai.expect(downButton).not.to.be.null;
+        const upDisabled = upButton === null || upButton === void 0 ? void 0 : upButton.getAttribute('disabled');
+        const downDisabled = downButton === null || downButton === void 0 ? void 0 : downButton.getAttribute('disabled');
+        chai.expect(upDisabled).not.to.be.null;
+        chai.expect(downDisabled).not.to.be.null;
+    });
+});
+describe('Test NumberInputText stepping functionality', () => {
+    let env;
+    beforeEach(async function () {
+        env = env !== null && env !== void 0 ? env : (await getEnvironmentContext());
+    });
+    afterEach(preact.cleanup);
+    const getStepUpButton = (container) => container === null || container === void 0 ? void 0 : container.querySelector('button[title="Increase"]');
+    const getStepDownButton = (container) => container === null || container === void 0 ? void 0 : container.querySelector('button[title="Decrease"]');
+    it('Can step up/down by clicking on steppers', function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(StepButtons, {}) })));
+        // Initial value of DemoStepButtons is 10, min=10, max=100, step=5.
+        const upButton = getStepUpButton(container);
+        const downButton = getStepDownButton(container);
+        const inputElement = container.querySelector('input');
+        // Click step up 3 times to increment value to 25.
+        preact.fireEvent.click(upButton);
+        preact.fireEvent.click(upButton);
+        preact.fireEvent.click(upButton);
+        chai.expect(inputElement.value).to.equal('25');
+        // Click step down once to decrement value to 20.
+        preact.fireEvent.click(downButton);
+        chai.expect(inputElement.value).to.equal('20');
+    });
+    it('Can step up/down by pressing the arrow keys', async function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(StepButtons, {}) })));
+        // Initial value of DemoStepButtons is 10, min=10, max=100, step=5.
+        const inputElement = container.querySelector('input');
+        chai.expect(inputElement).not.to.be.null;
+        // Press and release ArrowUp should step up.
+        inputElement.focus();
+        userEvent__default["default"].keyboard('[ARROWUP]');
+        await preact.waitFor(() => chai.expect(inputElement.value).equals('15'));
+        // Press and release ArrowDown should step down.
+        userEvent__default["default"].keyboard('[ARROWDOWN]');
+        await preact.waitFor(() => chai.expect(inputElement.value).equals('10'));
+    });
+    it('Clicking step down or pressing arrow down does nothing when disabled', async function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(StepButtons, {}) })));
+        // Initial value of DemoStepButtons is 10, min=10, max=100, step=5.
+        // DemoStepButtons disables step down when value reaches min, which
+        // means it's initially disabled.
+        const inputElement = container.querySelector('input');
+        const downButton = getStepDownButton(container);
+        chai.expect(inputElement).not.to.be.null;
+        chai.expect(downButton).not.to.be.null;
+        const initialValue = '10';
+        // Clicking disabled down button should do nothing.
+        preact.fireEvent.click(downButton);
+        chai.expect(inputElement.value).to.equal(initialValue);
+        // Arrow key down should also do nothing.
+        inputElement.focus();
+        userEvent__default["default"].keyboard('[ARROWDOWN]');
+        await preact.waitFor(() => chai.expect(inputElement.value).equals(initialValue));
+    });
+    it('Clicking step up or pressing arrow up does nothing when disabled', async function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StepButtons, {}), jsxRuntime.jsx("button", Object.assign({ class: "testclickmebutton" }, { children: "Click me" }))] }) })));
+        // Initial value of DemoStepButtons is 10, min=10, max=100, step=5.
+        // DemoStepButtons disables step up when the value reaches max.
+        const inputElement = container.querySelector('input');
+        const upButton = getStepUpButton(container);
+        const testButton = container.querySelector('.testclickmebutton');
+        chai.expect(inputElement).not.to.be.null;
+        chai.expect(upButton).not.to.be.null;
+        chai.expect(testButton).not.to.be.null;
+        // Calling inputElement.blur did not commit the value, so set
+        // inputElement.value to 100 (max) and move the focus to commit it.
+        const maxValue = '100';
+        inputElement.focus();
+        inputElement.value = maxValue;
+        testButton.focus();
+        chai.expect(inputElement.value).to.equal(maxValue);
+        // Clicking the disabled up button should do nothing.
+        preact.fireEvent.click(upButton);
+        chai.expect(inputElement.value).to.equal(maxValue);
+        // Arrow up key should also do nothing.
+        inputElement.focus();
+        userEvent__default["default"].keyboard('[ARROWUP]');
+        await preact.waitFor(() => chai.expect(inputElement.value).equals(maxValue));
+    });
+});
+describe('Test NumberInputText spinning functionality', () => {
+    let env;
+    beforeEach(async function () {
+        env = env !== null && env !== void 0 ? env : (await getEnvironmentContext());
+    });
+    afterEach(preact.cleanup);
+    it('Can spin by holding down the arrow keys', async function () {
+        const { container } = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(StepButtons, {}) })));
+        // Initial value of DemoStepButtons is 10, min=10, max=100, step=5.
+        const inputElement = container.querySelector('input');
+        chai.expect(inputElement).not.to.be.null;
+        // Holding down the arrow key triggers continuous step events.
+        // See https://testing-library.com/docs/user-event/keyboard/
+        inputElement.focus();
+        // Hold the arrow key down, trigger 10 keydown events, then send key up.
+        userEvent__default["default"].keyboard('[ARROWUP>10/]');
+        await preact.waitFor(() => chai.expect(inputElement.value).equals('60'));
+        userEvent__default["default"].keyboard('[ARROWDOWN>4/]');
+        await preact.waitFor(() => chai.expect(inputElement.value).equals('40'));
+    });
+});
+/*  */
+//# sourceMappingURL=NumberInputText.spec.js.map