@cdevhub/ngx-tw 0.2.1 → 0.3.0

package/fesm2022/cdevhub-ngx-tw-number-input.mjs

@@ -0,0 +1,622 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, signal, computed, afterNextRender, isDevMode, forwardRef, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TW_INPUT_VALUE_ACCESSOR } from '@cdevhub/ngx-tw/input';
+import { tv } from 'tailwind-variants';
+
+/**
+ * Turns a plain `<input twInput twNumberInput>` into a robust numeric field
+ * without `type="number"` — fixing the broken-on-mobile, browser-inconsistent
+ * native control. It composes the sibling {@link InputDirective}: that directive
+ * keeps owning the form-field chrome, error-state, and `aria-invalid` /
+ * `aria-required`, while this directive owns the numeric value transport,
+ * locale-aware parse/format, spinbutton ARIA, `inputmode`, and keyboard stepping.
+ *
+ * Pair it with the companion `<tw-number-stepper [for]="ref">` for visible
+ * up/down spinner buttons.
+ *
+ * Forms: implements `ControlValueAccessor`, so the value round-trips as a real
+ * `number | null` (never a string) through template-driven, reactive, and
+ * signal-based forms.
+ */
+class NumberInputDirective {
+    el = inject(ElementRef).nativeElement;
+    // ── Inputs ──
+    /** Smallest accepted value. Clamps the committed value (on blur, Enter, and stepping) and sets `aria-valuemin`. Does not clamp per keystroke. Defaults to `undefined` (no lower bound). */
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Largest accepted value. Clamps the committed value (on blur, Enter, and stepping) and sets `aria-valuemax`. Does not clamp per keystroke. Defaults to `undefined` (no upper bound). */
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Amount added or subtracted by ArrowUp/ArrowDown and the stepper buttons. Defaults to `1`. Values `<= 0` or non-finite fall back to `1`. */
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** `Intl.NumberFormat` options driving the blurred display (grouping, decimals, currency). The formatter's resolved `maximumFractionDigits` also sets commit-time rounding precision and switches `inputmode` to `'numeric'` when it is `0`. Percent style is not supported in v1. Defaults to `undefined` (locale default number formatting, grouping on). */
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** BCP-47 locale for `Intl.NumberFormat` formatting and for locale-aware parsing (decimal and group separators). Defaults to `undefined` (the runtime default locale). */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    // ── Output ──
+    /** Fires when the committed numeric value changes through user interaction (typing, stepping, clamping on blur/Enter). Does not fire on `writeValue` (programmatic form writes). Useful for non-form / template-ref usage alongside the `value` signal. */
+    valueChange = output();
+    // ── State ──
+    _value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    readonlySig = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonlySig" }] : /* istanbul ignore next */ []));
+    /** The current committed numeric value, or `null` when empty / unparseable. Read this from a template ref (`#n="twNumberInput"`) for non-form usage. */
+    value = this._value.asReadonly();
+    /** @internal Formatted display text surfaced through `TW_INPUT_VALUE_ACCESSOR` so the sibling InputDirective's empty / float-label state tracks the text in the box (not the numeric model). Updated on every field mutation. */
+    displayText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    /** True when the control is disabled. Reactively tracks the reactive-forms path (`setDisabledState` via `control.disable()`) and a static `disabled` attribute read at mount. A runtime-toggled declarative `[disabled]` binding without reactive forms is NOT reactively tracked (v2 limitation — same class as `readonly`). Read by the companion stepper so its buttons disable in lock-step. */
+    disabled = computed(() => this.cvaDisabled() || this.el.disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** True when the host input carries the `readonly` attribute (static / declarative, seeded after render). A runtime toggle of the bare `readonly` attribute is not reactively tracked (v2). Read by the companion stepper so its buttons disable in lock-step. */
+    readonly = this.readonlySig.asReadonly();
+    /** @internal Mobile-keyboard hint: `'numeric'` for integer-only formats, else `'decimal'`. */
+    inputMode = computed(() => this.format()?.maximumFractionDigits === 0 ? 'numeric' : 'decimal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+    /** @internal Locale group / decimal separators, memoized per `locale()`. */
+    separators = computed(() => {
+        try {
+            const parts = new Intl.NumberFormat(this.locale()).formatToParts(11000.1);
+            return {
+                group: parts.find((p) => p.type === 'group')?.value ?? '',
+                decimal: parts.find((p) => p.type === 'decimal')?.value ?? '.',
+            };
+        }
+        catch {
+            return { group: '', decimal: '.' };
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []));
+    // ── Plain (non-signal) bookkeeping ──
+    _focused = false;
+    _lastValue = null;
+    _lastDisplay = '';
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Seed `readonly` after render. InputDirective mirrors its `readonly` input
+        // onto the native attribute via an effect that runs AFTER construction
+        // (input.ts:330-337), so a synchronous read here would be stale.
+        afterNextRender(() => this.readonlySig.set(this.el.readOnly));
+        // Dev-mode: warn once on a bogus step (mirrors time-picker).
+        afterNextRender(() => {
+            if (!isDevMode())
+                return;
+            const s = this.step();
+            if (s <= 0 || !Number.isFinite(s)) {
+                console.warn(`[twNumberInput] step=${s} is invalid. Using 1 instead.`);
+            }
+        });
+    }
+    // ── ControlValueAccessor ──
+    /** @internal */
+    writeValue(value) {
+        if (value == null || Number.isNaN(value)) {
+            this._value.set(null);
+            this.displayText.set('');
+            this._lastValue = null;
+            this._lastDisplay = '';
+            if (!this._focused)
+                this.el.value = '';
+            return;
+        }
+        // Normalize -0 → 0 (never store a negative zero); otherwise keep the value
+        // un-rounded — a programmatic write is authoritative and must not silently
+        // diverge from the parent FormControl.
+        const n = Object.is(value, -0) ? 0 : value;
+        const display = this.formatValue(n);
+        this._value.set(n);
+        this.displayText.set(display);
+        // Update the revert anchor even while focused, so an unparseable blur after
+        // a programmatic write snaps back to the form's value (not to '').
+        this._lastValue = n;
+        this._lastDisplay = display;
+        // Caret guard: never rewrite el.value while focused (clobbers the caret);
+        // defer the visible reformat to the next blur.
+        if (!this._focused)
+            this.el.value = display;
+    }
+    /** @internal */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @internal */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @internal */
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── Public methods ──
+    /** Steps the value up: treats an empty field as `0`, adds `step`, clamps to `[min,max]`, rounds to the formatter's resolved precision, formats, and writes both the display and the model. Emits `valueChange`. No-op when the host input is disabled or readonly. Does not move focus. */
+    increment() {
+        this.stepBy(1);
+    }
+    /** Steps the value down: treats an empty field as `0`, subtracts `step`, clamps to `[min,max]`, rounds, formats, writes display and model. Emits `valueChange`. No-op when disabled or readonly. Does not move focus. */
+    decrement() {
+        this.stepBy(-1);
+    }
+    /** Moves focus to the underlying input element. */
+    focus(options) {
+        this.el.focus(options);
+    }
+    // ── Host handlers ──
+    /** @internal */
+    onInput() {
+        const raw = this.el.value;
+        this.displayText.set(raw);
+        const parsed = this.parseValue(raw);
+        this._value.set(parsed);
+        this.onChange(parsed);
+        this.valueChange.emit(parsed);
+    }
+    /** @internal */
+    onFocus() {
+        this._focused = true;
+    }
+    /** @internal */
+    onBlur() {
+        this._focused = false;
+        this.commitFromElement();
+        this.onTouched();
+    }
+    /** @internal */
+    onKeydown(event) {
+        if (this.disabled() || this.el.readOnly)
+            return;
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.increment();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.decrement();
+                break;
+            case 'Home':
+                if (this.min() !== undefined) {
+                    event.preventDefault();
+                    this.commitNumber(this.min());
+                }
+                break;
+            case 'End':
+                if (this.max() !== undefined) {
+                    event.preventDefault();
+                    this.commitNumber(this.max());
+                }
+                break;
+            case 'Enter':
+                // Do NOT preventDefault — preserve native form submission. Commit in place.
+                this.commitFromElement();
+                break;
+            // All other keys (PageUp/Down, text entry, caret nav, Backspace) → native.
+        }
+    }
+    // ── Internal commit / step logic ──
+    stepBy(direction) {
+        if (this.disabled() || this.el.readOnly)
+            return;
+        // Treat an empty field as 0, apply ±step, then clamp — matches native
+        // <input type="number">.
+        const current = this.parseValue(this.el.value) ?? 0;
+        this.commitNumber(current + direction * this.resolvedStep());
+    }
+    commitFromElement() {
+        const raw = this.el.value;
+        if (raw.trim() === '') {
+            this.commitEmpty();
+            return;
+        }
+        const parsed = this.parseValue(raw);
+        if (parsed === null) {
+            // Non-empty unparseable → snap back to the last committed value.
+            this.revertToLastCommitted();
+            return;
+        }
+        this.commitNumber(parsed);
+    }
+    commitNumber(n) {
+        const rounded = this.roundToPrecision(this.clamp(n));
+        const normalized = Object.is(rounded, -0) ? 0 : rounded;
+        const display = this.formatValue(normalized);
+        const changed = !Object.is(this._value(), normalized);
+        this._value.set(normalized);
+        this.displayText.set(display);
+        this._lastValue = normalized;
+        this._lastDisplay = display;
+        this.el.value = display;
+        if (changed) {
+            this.onChange(normalized);
+            this.valueChange.emit(normalized);
+        }
+    }
+    commitEmpty() {
+        const changed = this._value() !== null;
+        this._value.set(null);
+        this.displayText.set('');
+        this._lastValue = null;
+        this._lastDisplay = '';
+        this.el.value = '';
+        if (changed) {
+            this.onChange(null);
+            this.valueChange.emit(null);
+        }
+    }
+    revertToLastCommitted() {
+        const changed = this._value() !== this._lastValue;
+        this._value.set(this._lastValue);
+        this.displayText.set(this._lastDisplay);
+        this.el.value = this._lastDisplay;
+        if (changed) {
+            this.onChange(this._lastValue);
+            this.valueChange.emit(this._lastValue);
+        }
+    }
+    // ── Inline numeric helpers ──
+    resolvedStep() {
+        const s = this.step();
+        return s > 0 && Number.isFinite(s) ? s : 1;
+    }
+    clamp(n) {
+        const min = this.min();
+        const max = this.max();
+        let r = n;
+        if (min !== undefined && r < min)
+            r = min;
+        if (max !== undefined && r > max)
+            r = max;
+        return r;
+    }
+    roundToPrecision(n) {
+        if (!Number.isFinite(n))
+            return n;
+        const digits = this.resolvedMaxFractionDigits();
+        if (digits === undefined)
+            return n;
+        const factor = 10 ** digits;
+        return Math.round(n * factor) / factor;
+    }
+    resolvedMaxFractionDigits() {
+        try {
+            return new Intl.NumberFormat(this.locale(), this.format()).resolvedOptions().maximumFractionDigits;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    formatValue(n) {
+        const normalized = Object.is(n, -0) ? 0 : n;
+        try {
+            return new Intl.NumberFormat(this.locale(), this.format()).format(normalized);
+        }
+        catch {
+            return String(normalized);
+        }
+    }
+    /**
+     * Parse a raw string to `number | null` in a load-bearing order: the `e`/`E`
+     * rejection MUST precede stripping (otherwise `'1e3'` would survive as `'13'`).
+     */
+    parseValue(raw) {
+        const trimmed = raw.trim();
+        if (trimmed === '')
+            return null;
+        // 2. Reject exponent notation before any stripping.
+        if (/[eE]/.test(trimmed))
+            return null;
+        const { group, decimal } = this.separators();
+        // 3. Strip all Unicode whitespace (covers NBSP / narrow-NBSP group separators
+        //    and a user-typed ASCII space alike).
+        let s = trimmed.replace(/\s/gu, '');
+        // 4. Strip group separators (redundant-but-harmless for space-grouped locales).
+        if (group)
+            s = s.split(group).join('');
+        // 5. Normalize the locale decimal separator to '.'.
+        if (decimal && decimal !== '.')
+            s = s.split(decimal).join('.');
+        // 6. Strip remaining non-numeric chars (currency symbols, '%', leading '+', …)
+        //    and collapse to a single leading '-'.
+        s = s.replace(/[^\d.-]/g, '').replace(/(?!^)-/g, '');
+        // 7. Digit-presence + finiteness guard (prevents Number('') === 0 committing 0).
+        if (!/\d/.test(s))
+            return null;
+        const n = Number(s);
+        if (!Number.isFinite(n))
+            return null;
+        // Normalize -0 → 0 so it never enters the model from any path.
+        return Object.is(n, -0) ? 0 : n;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: NumberInputDirective, isStandalone: true, selector: "input[twNumberInput]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "spinbutton" }, listeners: { "input": "onInput()", "keydown": "onKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.inputmode": "inputMode()", "attr.aria-valuemin": "min() ?? null", "attr.aria-valuemax": "max() ?? null", "attr.aria-valuenow": "value() ?? null", "attr.aria-valuetext": "displayText() || \"Empty\"" } }, providers: [
+            // Custom CVA — transports a real `number | null`, not a string. Registered
+            // statically because this directive injects NO `NgControl` (matcher /
+            // error-state stay on the sibling InputDirective), so the circular-DI trap
+            // that forces runtime registration does not apply. Follows the
+            // segmented-control / calendar precedent. A custom accessor takes precedence
+            // over the built-in DefaultValueAccessor, so there is no "more than one
+            // value accessor" error.
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NumberInputDirective),
+                multi: true,
+            },
+            // Lets the sibling InputDirective read the formatted *display text* (not the
+            // numeric model) for its empty / float-label state. The factory exposes the
+            // `displayText` signal so InputDirective's `isSignal(value)` effect stays
+            // self-healing. Must NOT be `useExisting` — that would expose the numeric
+            // `value` signal and report the field empty during intermediate typing.
+            {
+                provide: TW_INPUT_VALUE_ACCESSOR,
+                useFactory: (dir) => ({ value: dir.displayText }),
+                deps: [forwardRef(() => NumberInputDirective)],
+            },
+        ], exportAs: ["twNumberInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[twNumberInput]',
+                    exportAs: 'twNumberInput',
+                    providers: [
+                        // Custom CVA — transports a real `number | null`, not a string. Registered
+                        // statically because this directive injects NO `NgControl` (matcher /
+                        // error-state stay on the sibling InputDirective), so the circular-DI trap
+                        // that forces runtime registration does not apply. Follows the
+                        // segmented-control / calendar precedent. A custom accessor takes precedence
+                        // over the built-in DefaultValueAccessor, so there is no "more than one
+                        // value accessor" error.
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumberInputDirective),
+                            multi: true,
+                        },
+                        // Lets the sibling InputDirective read the formatted *display text* (not the
+                        // numeric model) for its empty / float-label state. The factory exposes the
+                        // `displayText` signal so InputDirective's `isSignal(value)` effect stays
+                        // self-healing. Must NOT be `useExisting` — that would expose the numeric
+                        // `value` signal and report the field empty during intermediate typing.
+                        {
+                            provide: TW_INPUT_VALUE_ACCESSOR,
+                            useFactory: (dir) => ({ value: dir.displayText }),
+                            deps: [forwardRef(() => NumberInputDirective)],
+                        },
+                    ],
+                    host: {
+                        'role': 'spinbutton',
+                        '[attr.inputmode]': 'inputMode()',
+                        '[attr.aria-valuemin]': 'min() ?? null',
+                        '[attr.aria-valuemax]': 'max() ?? null',
+                        '[attr.aria-valuenow]': 'value() ?? null',
+                        '[attr.aria-valuetext]': 'displayText() || "Empty"',
+                        '(input)': 'onInput()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+const numberStepper = tv({
+    slots: {
+        // The column stretches to the field's height (host is `flex self-stretch`)
+        // and the two buttons split it via `flex-1`.
+        group: 'flex flex-col self-stretch',
+        // `flex-1` gives each button HALF the field height. Codified departure
+        // from CLAUDE.md "Square interactive targets" (size-6/7/8): stacking two
+        // square buttons made the column 2× a button tall — far taller than the
+        // text line — which is exactly what bloated the field's height. So the
+        // buttons carry a fixed WIDTH only; the chevron glyph's min-content
+        // (size-3 = 12px) is the natural floor that keeps the column compact.
+        //
+        // WCAG 2.5.8 (target-size, 24px — which slider.ts / badge.ts codify):
+        // two stacked buttons cannot each be ≥24px tall inside a ~38–42px field
+        // without re-bloating it, so each spinner ends up < 24px tall. The
+        // equivalent-control exception covers most cases — the value is reachable
+        // by typing into the ≥24px spinbutton input and, with a keyboard, via ↑/↓.
+        // Known gap: a negative-allowed field on touch — iOS `inputmode`
+        // numeric/decimal exposes no minus key and there are no hardware arrows,
+        // so the sub-24px decrement button becomes the only path to a negative
+        // value; a consumer needing negatives on touch must provide an alternative.
+        // Matches the sub-24px stacked-spinner convention of native/Mantine/Chakra.
+        button: 'flex-1 inline-flex items-center justify-center text-fg-muted hover:text-fg hover:bg-surface-muted rounded-md transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-40 disabled:pointer-events-none',
+        icon: '',
+    },
+    variants: {
+        // Button WIDTH (the height comes from `flex-1`); glyph sub-scale for the
+        // chevrons (per CLAUDE.md "Icon Sizing").
+        size: {
+            xs: { button: 'w-6', icon: 'size-3' },
+            sm: { button: 'w-7', icon: 'size-3' },
+            md: { button: 'w-7', icon: 'size-3' },
+            lg: { button: 'w-8', icon: 'size-4' },
+            xl: { button: 'w-8', icon: 'size-4' },
+        },
+    },
+    defaultVariants: { size: 'md' },
+}, { twMerge: true });
+/**
+ * The visible up/down spinner column for a {@link NumberInputDirective}. A
+ * directive cannot emit sibling DOM, so the spinner buttons live in this tiny
+ * companion. Bind it to the directive via a template ref and drop it into a
+ * `<tw-form-field>`'s `[twSuffix]` slot (or a standalone flex row):
+ *
+ * ```html
+ * <input twInput twNumberInput #qty="twNumberInput" [formControl]="ctrl" />
+ * <tw-number-stepper twSuffix [for]="qty" />
+ * ```
+ *
+ * The buttons are kept out of the tab order (`tabindex="-1"`) — the spinbutton
+ * input owns value + keyboard semantics — and refocus the input after stepping.
+ */
+class NumberStepperComponent {
+    /** The number-input directive instance this stepper controls. Bind to a template ref, e.g. `[for]="qty"` with `#qty="twNumberInput"`. When omitted, the buttons render but do nothing (no-op) and disable. */
+    for = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+    /** Button + glyph density. Match the field's `size` for visual alignment. Defaults to `'md'`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = computed(() => numberStepper({ size: this.size() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    groupClasses = computed(() => this.variant().group(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    buttonClasses = computed(() => this.variant().button(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    iconClasses = computed(() => this.variant().icon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal Disabled when there is no target, or the target input is disabled / readonly. */
+    isDisabled = computed(() => {
+        const d = this.for();
+        return !d || d.disabled() || d.readonly();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal Step the bound directive, then refocus the input (the refocus lives here, not in `increment`/`decrement`). */
+    onStep(direction) {
+        const dir = this.for();
+        if (!dir)
+            return;
+        if (direction === 1) {
+            dir.increment();
+        }
+        else {
+            dir.decrement();
+        }
+        dir.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: NumberStepperComponent, isStandalone: true, selector: "tw-number-stepper", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex self-stretch" }, exportAs: ["twNumberStepper"], ngImport: i0, template: `
+    <div [class]="groupClasses()">
+      <button
+        type="button"
+        tabindex="-1"
+        aria-label="Increase"
+        [class]="buttonClasses()"
+        [disabled]="isDisabled()"
+        (mousedown)="$event.preventDefault()"
+        (click)="onStep(1)"
+      >
+        <ng-content select="[slot=up]">
+          <svg
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            [class]="iconClasses()"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M14.77 12.79a.75.75 0 0 1-1.06-.02L10 8.94l-3.71 3.83a.75.75 0 1 1-1.08-1.04l4.25-4.39a.75.75 0 0 1 1.08 0l4.25 4.39a.75.75 0 0 1-.02 1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </ng-content>
+      </button>
+      <button
+        type="button"
+        tabindex="-1"
+        aria-label="Decrease"
+        [class]="buttonClasses()"
+        [disabled]="isDisabled()"
+        (mousedown)="$event.preventDefault()"
+        (click)="onStep(-1)"
+      >
+        <ng-content select="[slot=down]">
+          <svg
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            [class]="iconClasses()"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </ng-content>
+      </button>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberStepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-number-stepper',
+                    exportAs: 'twNumberStepper',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // `flex` makes the inner group fill the host; `self-stretch` makes the host
+                    // fill the field height — overriding `items-center` in a `<tw-form-field>`
+                    // `[twSuffix]` slot, and matching `items-stretch` in a standalone flex row.
+                    host: {
+                        'class': 'flex self-stretch',
+                    },
+                    template: `
+    <div [class]="groupClasses()">
+      <button
+        type="button"
+        tabindex="-1"
+        aria-label="Increase"
+        [class]="buttonClasses()"
+        [disabled]="isDisabled()"
+        (mousedown)="$event.preventDefault()"
+        (click)="onStep(1)"
+      >
+        <ng-content select="[slot=up]">
+          <svg
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            [class]="iconClasses()"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M14.77 12.79a.75.75 0 0 1-1.06-.02L10 8.94l-3.71 3.83a.75.75 0 1 1-1.08-1.04l4.25-4.39a.75.75 0 0 1 1.08 0l4.25 4.39a.75.75 0 0 1-.02 1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </ng-content>
+      </button>
+      <button
+        type="button"
+        tabindex="-1"
+        aria-label="Decrease"
+        [class]="buttonClasses()"
+        [disabled]="isDisabled()"
+        (mousedown)="$event.preventDefault()"
+        (click)="onStep(-1)"
+      >
+        <ng-content select="[slot=down]">
+          <svg
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            [class]="iconClasses()"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </ng-content>
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NumberInputDirective, NumberStepperComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-number-input.mjs.map