@furystack/shades-common-components 11.0.0 → 12.0.0

package/esm/components/inputs/checkbox.spec.js

@@ -0,0 +1,287 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ThemeProviderService } from '../../services/theme-provider-service.js';
+import { Form, FormService } from '../form.js';
+import { Checkbox } from './checkbox.js';
+describe('Checkbox', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        vi.restoreAllMocks();
+    });
+    it('should render with shadow DOM', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Checkbox, null),
+            });
+            await sleepAsync(50);
+            const checkbox = document.querySelector('shade-checkbox');
+            expect(checkbox).not.toBeNull();
+        });
+    });
+    it('should render the inner checkbox input element', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Checkbox, { name: "testField" }),
+            });
+            await sleepAsync(50);
+            const input = document.querySelector('shade-checkbox input[type="checkbox"]');
+            expect(input).not.toBeNull();
+            expect(input.name).toBe('testField');
+        });
+    });
+    it('should render the label title', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Checkbox, { labelTitle: "Accept terms" }),
+            });
+            await sleepAsync(50);
+            const label = document.querySelector('shade-checkbox label');
+            expect(label).not.toBeNull();
+            expect(label.textContent).toContain('Accept terms');
+        });
+    });
+    it('should not render label span when no labelTitle is provided', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Checkbox, null),
+            });
+            await sleepAsync(50);
+            const labelSpan = document.querySelector('shade-checkbox .checkbox-label');
+            expect(labelSpan).toBeNull();
+        });
+    });
+    describe('checked state', () => {
+        it('should be checked when checked prop is true', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { checked: true }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-checkbox input[type="checkbox"]');
+                expect(input.checked).toBe(true);
+            });
+        });
+        it('should not be checked when checked prop is false', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { checked: false }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-checkbox input[type="checkbox"]');
+                expect(input.checked).toBe(false);
+            });
+        });
+    });
+    describe('disabled state', () => {
+        it('should set data-disabled attribute when disabled', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { disabled: true }),
+                });
+                await sleepAsync(50);
+                const wrapper = document.querySelector('shade-checkbox');
+                expect(wrapper.hasAttribute('data-disabled')).toBe(true);
+                const input = wrapper.querySelector('input[type="checkbox"]');
+                expect(input.disabled).toBe(true);
+            });
+        });
+        it('should not have data-disabled attribute when not disabled', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { disabled: false }),
+                });
+                await sleepAsync(50);
+                const wrapper = document.querySelector('shade-checkbox');
+                expect(wrapper.hasAttribute('data-disabled')).toBe(false);
+            });
+        });
+    });
+    describe('indeterminate state', () => {
+        it('should set data-indeterminate attribute when indeterminate', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { indeterminate: true }),
+                });
+                await sleepAsync(50);
+                const wrapper = document.querySelector('shade-checkbox');
+                expect(wrapper.hasAttribute('data-indeterminate')).toBe(true);
+            });
+        });
+        it('should not have data-indeterminate attribute when not indeterminate', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { indeterminate: false }),
+                });
+                await sleepAsync(50);
+                const wrapper = document.querySelector('shade-checkbox');
+                expect(wrapper.hasAttribute('data-indeterminate')).toBe(false);
+            });
+        });
+    });
+    describe('theme integration', () => {
+        it('should set CSS color variable from theme', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, null),
+                });
+                await sleepAsync(50);
+                const wrapper = document.querySelector('shade-checkbox');
+                const themeService = injector.getInstance(ThemeProviderService);
+                expect(wrapper.style.getPropertyValue('--checkbox-color')).toBe(themeService.theme.palette.primary.main);
+            });
+        });
+        it('should use custom color from color prop', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { color: "secondary" }),
+                });
+                await sleepAsync(50);
+                const wrapper = document.querySelector('shade-checkbox');
+                const themeService = injector.getInstance(ThemeProviderService);
+                expect(wrapper.style.getPropertyValue('--checkbox-color')).toBe(themeService.theme.palette.secondary.main);
+            });
+        });
+    });
+    describe('callbacks', () => {
+        it('should call onchange when checkbox is clicked', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onchange = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { onchange: onchange }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-checkbox input[type="checkbox"]');
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                expect(onchange).toHaveBeenCalled();
+            });
+        });
+    });
+    describe('value and name', () => {
+        it('should set value attribute', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { name: "terms", value: "accepted" }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-checkbox input[type="checkbox"]');
+                expect(input.value).toBe('accepted');
+                expect(input.name).toBe('terms');
+            });
+        });
+    });
+    describe('required', () => {
+        it('should set required attribute', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { required: true }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-checkbox input[type="checkbox"]');
+                expect(input.required).toBe(true);
+            });
+        });
+    });
+    describe('labelProps', () => {
+        it('should pass labelProps to the label element', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Checkbox, { labelProps: { className: 'custom-label' } }),
+                });
+                await sleepAsync(50);
+                const label = document.querySelector('shade-checkbox label');
+                expect(label.className).toContain('custom-label');
+            });
+        });
+    });
+    describe('FormService integration', () => {
+        it('should register input with FormService when inside a Form', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
+                        createComponent(Checkbox, { name: "agree", labelTitle: "I agree" }))),
+                });
+                await sleepAsync(50);
+                const form = document.querySelector('form[is="shade-form"]');
+                const formInjector = form.injector;
+                const formService = formInjector.getInstance(FormService);
+                expect(formService.inputs.size).toBe(1);
+            });
+        });
+        it('should unregister input from FormService on cleanup', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
+                        createComponent(Checkbox, { name: "agree", labelTitle: "I agree" }))),
+                });
+                await sleepAsync(50);
+                const form = document.querySelector('form[is="shade-form"]');
+                const formInjector = form.injector;
+                const formService = formInjector.getInstance(FormService);
+                expect(formService.inputs.size).toBe(1);
+                rootElement.innerHTML = '';
+                await sleepAsync(50);
+            });
+        });
+    });
+});
+//# sourceMappingURL=checkbox.spec.js.map

package/esm/components/inputs/checkbox.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.spec.js","sourceRoot":"","sources":["../../../src/components/inputs/checkbox.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/inputs/index.d.ts

@@ -1,4 +1,11 @@
 export * from './autocomplete.js';
+export * from './checkbox.js';
+export * from './input-number.js';
 export * from './input.js';
+export * from './radio-group.js';
+export * from './radio.js';
+export * from './select.js';
+export * from './slider.js';
+export * from './switch.js';
 export * from './text-area.js';
 //# sourceMappingURL=index.d.ts.map

package/esm/components/inputs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA"}

package/esm/components/inputs/index.js

@@ -1,4 +1,11 @@
 export * from './autocomplete.js';
+export * from './checkbox.js';
+export * from './input-number.js';
 export * from './input.js';
+export * from './radio-group.js';
+export * from './radio.js';
+export * from './select.js';
+export * from './slider.js';
+export * from './switch.js';
 export * from './text-area.js';
 //# sourceMappingURL=index.js.map

package/esm/components/inputs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA"}

package/esm/components/inputs/input-number.d.ts

@@ -0,0 +1,79 @@
+import type { PartialElement } from '@furystack/shades';
+import type { Palette } from '../../services/theme-provider-service.js';
+export type InputNumberProps = {
+    /**
+     * The current numeric value
+     */
+    value?: number;
+    /**
+     * Minimum allowed value
+     */
+    min?: number;
+    /**
+     * Maximum allowed value
+     */
+    max?: number;
+    /**
+     * Step increment for +/- buttons and keyboard arrows
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Number of decimal places to display
+     */
+    precision?: number;
+    /**
+     * Callback when the value changes
+     */
+    onValueChange?: (value: number | undefined) => void;
+    /**
+     * Custom formatter to display the value in the input
+     */
+    formatter?: (value: number | undefined) => string;
+    /**
+     * Custom parser to convert the displayed text back to a number
+     */
+    parser?: (displayValue: string) => number | undefined;
+    /**
+     * An optional label title element or string
+     */
+    labelTitle?: JSX.Element | string;
+    /**
+     * Optional props for the label element
+     */
+    labelProps?: PartialElement<HTMLLabelElement>;
+    /**
+     * The variant of the input
+     */
+    variant?: 'contained' | 'outlined';
+    /**
+     * The color of the input
+     */
+    color?: keyof Palette;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * The name attribute for form integration
+     */
+    name?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+};
+export declare const InputNumber: (props: InputNumberProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=input-number.d.ts.map

package/esm/components/inputs/input-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/input-number.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAIvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAEnD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAA;IAEjD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;IAErD;;OAEG;IACH,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAE7C;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;IAElC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,OAAO,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAgCD,eAAO,MAAM,WAAW;;;;sEAqQtB,CAAA"}

package/esm/components/inputs/input-number.js

@@ -0,0 +1,232 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../../services/css-variable-theme.js';
+import { ThemeProviderService } from '../../services/theme-provider-service.js';
+import { FormService } from '../form.js';
+const clampValue = (value, min, max) => {
+    if (min !== undefined && value < min)
+        return min;
+    if (max !== undefined && value > max)
+        return max;
+    return value;
+};
+const roundToPrecision = (value, precision) => {
+    if (precision === undefined)
+        return value;
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+};
+const formatValue = (value, precision, formatter) => {
+    if (value === undefined)
+        return '';
+    if (formatter)
+        return formatter(value);
+    if (precision !== undefined)
+        return value.toFixed(precision);
+    return String(value);
+};
+const parseValue = (text, parser) => {
+    if (parser)
+        return parser(text);
+    if (text === '' || text === '-')
+        return undefined;
+    const num = Number(text);
+    return isNaN(num) ? undefined : num;
+};
+export const InputNumber = Shade({
+    shadowDomName: 'shade-input-number',
+    css: {
+        display: 'block',
+        marginBottom: '1.25em',
+        '& label': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'space-between',
+            fontSize: cssVariableTheme.typography.fontSize.xs,
+            fontWeight: cssVariableTheme.typography.fontWeight.medium,
+            letterSpacing: '0.01em',
+            padding: '12px 14px',
+            borderRadius: cssVariableTheme.shape.borderRadius.md,
+            transition: `all ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
+            cursor: 'text',
+            color: cssVariableTheme.text.secondary,
+            background: 'transparent',
+            border: '2px solid transparent',
+            boxShadow: 'none',
+        },
+        '&[data-variant="outlined"] label': {
+            borderColor: cssVariableTheme.action.subtleBorder,
+        },
+        '&[data-variant="contained"] label': {
+            borderColor: cssVariableTheme.action.subtleBorder,
+            background: 'color-mix(in srgb, var(--input-number-color) 8%, transparent)',
+        },
+        '&:focus-within label': {
+            color: 'var(--input-number-color)',
+        },
+        '&[data-variant="outlined"]:focus-within label, &[data-variant="contained"]:focus-within label': {
+            borderColor: 'var(--input-number-color)',
+            boxShadow: cssVariableTheme.action.focusRing,
+        },
+        '&[data-variant="contained"]:focus-within label': {
+            background: 'color-mix(in srgb, var(--input-number-color) 12%, transparent)',
+        },
+        '&[data-disabled] label': {
+            color: cssVariableTheme.text.disabled,
+            filter: 'grayscale(100%)',
+            opacity: cssVariableTheme.action.disabledOpacity,
+            cursor: 'not-allowed',
+        },
+        '&[data-disabled]:focus-within label': {
+            boxShadow: 'none',
+        },
+        '& .input-number-row': {
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            gap: cssVariableTheme.spacing.xs,
+        },
+        '& input': {
+            color: 'inherit',
+            border: 'none',
+            backgroundColor: 'transparent',
+            outline: 'none',
+            fontSize: cssVariableTheme.typography.fontSize.sm,
+            fontWeight: cssVariableTheme.typography.fontWeight.normal,
+            width: '100%',
+            textOverflow: 'ellipsis',
+            padding: '0',
+            marginTop: cssVariableTheme.spacing.sm,
+            marginBottom: '2px',
+            flexGrow: '1',
+            lineHeight: '1.5',
+            textAlign: 'center',
+            appearance: 'textfield',
+        },
+        '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+            webkitAppearance: 'none',
+            margin: '0',
+        },
+        '& .step-button': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '28px',
+            height: '28px',
+            border: 'none',
+            borderRadius: cssVariableTheme.shape.borderRadius.sm,
+            background: 'color-mix(in srgb, var(--input-number-color) 15%, transparent)',
+            color: 'var(--input-number-color)',
+            cursor: 'pointer',
+            fontSize: cssVariableTheme.typography.fontSize.md,
+            fontWeight: cssVariableTheme.typography.fontWeight.bold,
+            lineHeight: '1',
+            flexShrink: '0',
+            userSelect: 'none',
+            transition: buildTransition(['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default], ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default], ['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.easeOut]),
+        },
+        '& .step-button:hover:not(:disabled)': {
+            background: 'color-mix(in srgb, var(--input-number-color) 25%, transparent)',
+        },
+        '& .step-button:active:not(:disabled)': {
+            transform: 'scale(0.92)',
+        },
+        '& .step-button:disabled': {
+            cursor: 'not-allowed',
+            opacity: '0.4',
+        },
+        '& .helperText': {
+            fontSize: cssVariableTheme.typography.fontSize.xs,
+            marginTop: '6px',
+            opacity: '0.85',
+            lineHeight: '1.4',
+        },
+    },
+    render: ({ props, injector, useState, useDisposable, useHostProps, useRef }) => {
+        const inputRef = useRef('formInput');
+        useDisposable('form-registration', () => {
+            const formService = injector.cachedSingletons.has(FormService) ? injector.getInstance(FormService) : null;
+            if (formService) {
+                queueMicrotask(() => {
+                    if (inputRef.current)
+                        formService.inputs.add(inputRef.current);
+                });
+            }
+            return {
+                [Symbol.dispose]: () => {
+                    if (inputRef.current && formService)
+                        formService.inputs.delete(inputRef.current);
+                },
+            };
+        });
+        const themeProvider = injector.getInstance(ThemeProviderService);
+        const primaryColor = themeProvider.theme.palette[props.color || 'primary'].main;
+        useHostProps({
+            'data-variant': props.variant || undefined,
+            'data-disabled': props.disabled ? '' : undefined,
+            style: { '--input-number-color': primaryColor },
+        });
+        const step = props.step ?? 1;
+        const [state, setState] = useState('inputNumberState', {
+            value: props.value,
+            displayValue: formatValue(props.value, props.precision, props.formatter),
+        });
+        const updateValue = (newValue) => {
+            if (newValue !== undefined) {
+                newValue = roundToPrecision(newValue, props.precision);
+                newValue = clampValue(newValue, props.min, props.max);
+            }
+            const displayValue = formatValue(newValue, props.precision, props.formatter);
+            setState({ value: newValue, displayValue });
+            props.onValueChange?.(newValue);
+        };
+        const handleIncrement = () => {
+            if (props.disabled || props.readOnly)
+                return;
+            const current = state.value ?? props.min ?? 0;
+            updateValue(current + step);
+        };
+        const handleDecrement = () => {
+            if (props.disabled || props.readOnly)
+                return;
+            const current = state.value ?? props.min ?? 0;
+            updateValue(current - step);
+        };
+        const isDecrementDisabled = props.disabled ||
+            props.readOnly ||
+            (props.min !== undefined && state.value !== undefined && state.value <= props.min);
+        const isIncrementDisabled = props.disabled ||
+            props.readOnly ||
+            (props.max !== undefined && state.value !== undefined && state.value >= props.max);
+        return (createComponent("label", { ...props.labelProps },
+            props.labelTitle,
+            createComponent("div", { className: "input-number-row" },
+                createComponent("button", { type: "button", className: "step-button", "aria-label": "Decrease value", disabled: isDecrementDisabled, onclick: handleDecrement, tabIndex: -1 }, "\u2212"),
+                createComponent("input", { ref: inputRef, type: "text", inputMode: "decimal", role: "spinbutton", "aria-valuemin": props.min !== undefined ? String(props.min) : undefined, "aria-valuemax": props.max !== undefined ? String(props.max) : undefined, "aria-valuenow": state.value !== undefined ? String(state.value) : undefined, name: props.name, value: state.displayValue, placeholder: props.placeholder, disabled: props.disabled, readOnly: props.readOnly, onkeydown: (ev) => {
+                        if (props.disabled || props.readOnly)
+                            return;
+                        if (ev.key === 'ArrowUp') {
+                            ev.preventDefault();
+                            handleIncrement();
+                        }
+                        else if (ev.key === 'ArrowDown') {
+                            ev.preventDefault();
+                            handleDecrement();
+                        }
+                    }, oninput: (ev) => {
+                        const el = ev.target;
+                        setState({ ...state, displayValue: el.value });
+                    }, onblur: (ev) => {
+                        const el = ev.target;
+                        const parsed = parseValue(el.value, props.parser);
+                        updateValue(parsed);
+                    }, onchange: (ev) => {
+                        const el = ev.target;
+                        const parsed = parseValue(el.value, props.parser);
+                        updateValue(parsed);
+                    } }),
+                createComponent("button", { type: "button", className: "step-button", "aria-label": "Increase value", disabled: isIncrementDisabled, onclick: handleIncrement, tabIndex: -1 }, "+")),
+            props.helperText ? createComponent("span", { className: "helperText" }, props.helperText) : null));
+    },
+});
+//# sourceMappingURL=input-number.js.map