ng-primitives 0.111.0 → 0.112.0

package/fesm2022/ng-primitives-number-field.mjs

@@ -0,0 +1,660 @@
+import * as i0 from '@angular/core';
+import { signal, computed, input, numberAttribute, output, booleanAttribute, Directive, inject, Injector } from '@angular/core';
+import { uniqueId, injectDisposables } from 'ng-primitives/utils';
+import { injectElementRef, explicitEffect } from 'ng-primitives/internal';
+import { createPrimitive, controlled, emitter, attrBinding, dataBinding, deprecatedSetter, listener } from 'ng-primitives/state';
+import { DOCUMENT } from '@angular/common';
+import { ngpFormControl } from 'ng-primitives/form-field';
+import { ngpInteractions } from 'ng-primitives/interactions';
+
+const [NgpNumberFieldStateToken, ngpNumberField, injectNumberFieldState, provideNumberFieldState,] = createPrimitive('NgpNumberField', ({ id = signal(uniqueId('ngp-number-field')), value: _value = signal(null), min = signal(-Infinity), max = signal(Infinity), step = signal(1), largeStep: _largeStep = signal(10), disabled: _disabled = signal(false), readonly: _readonly = signal(false), onValueChange, }) => {
+    const element = injectElementRef();
+    const value = controlled(_value);
+    const disabled = controlled(_disabled);
+    const readonly = controlled(_readonly);
+    const valueChange = emitter();
+    const canIncrement = computed(() => {
+        if (disabled() || readonly())
+            return false;
+        if (value() === null)
+            return true;
+        return value() < max();
+    }, ...(ngDevMode ? [{ debugName: "canIncrement" }] : []));
+    const canDecrement = computed(() => {
+        if (disabled() || readonly())
+            return false;
+        if (value() === null)
+            return true;
+        return value() > min();
+    }, ...(ngDevMode ? [{ debugName: "canDecrement" }] : []));
+    // Host bindings
+    attrBinding(element, 'role', () => 'group');
+    dataBinding(element, 'data-disabled', disabled);
+    dataBinding(element, 'data-readonly', readonly);
+    /**
+     * Count the number of decimal places in a number.
+     */
+    function getDecimalPlaces(n) {
+        const str = String(n);
+        const dotIndex = str.indexOf('.');
+        return dotIndex === -1 ? 0 : str.length - dotIndex - 1;
+    }
+    /**
+     * Round a number to a specific number of decimal places to avoid
+     * floating point precision issues (e.g. 0.1 + 0.2 = 0.30000000000000004).
+     */
+    function roundToPrecision(val, precision) {
+        if (precision === 0)
+            return Math.round(val);
+        return parseFloat(val.toFixed(precision));
+    }
+    function clampAndStep(val) {
+        const clamped = Math.min(max(), Math.max(min(), val));
+        // Round to nearest step
+        if (isFinite(step()) && step() > 0) {
+            const base = isFinite(min()) ? min() : 0;
+            const precision = Math.max(getDecimalPlaces(step()), getDecimalPlaces(base));
+            const stepped = roundToPrecision(Math.round((clamped - base) / step()) * step() + base, precision);
+            return Math.min(max(), Math.max(min(), stepped));
+        }
+        return clamped;
+    }
+    let suppressEmit = false;
+    function setValue(newValue) {
+        if (disabled() || readonly())
+            return;
+        if (newValue !== null && isNaN(newValue))
+            return;
+        const finalValue = newValue !== null ? clampAndStep(newValue) : null;
+        // Skip emit when value is unchanged
+        if (finalValue === value())
+            return;
+        value.set(finalValue);
+        if (!suppressEmit) {
+            onValueChange?.(finalValue);
+            valueChange.emit(finalValue);
+        }
+    }
+    let inputCommitFn = null;
+    function registerInputCommit(commitFn) {
+        inputCommitFn = commitFn;
+    }
+    /**
+     * Commit any pending input value without emitting change events.
+     * This ensures increment/decrement operates on the displayed value
+     * while only emitting the final stepped result.
+     */
+    function commitPendingInputSilently() {
+        if (!inputCommitFn)
+            return;
+        suppressEmit = true;
+        try {
+            inputCommitFn();
+        }
+        finally {
+            suppressEmit = false;
+        }
+    }
+    function getStepPrecision() {
+        const base = isFinite(min()) ? min() : 0;
+        return Math.max(getDecimalPlaces(step()), getDecimalPlaces(base));
+    }
+    function increment(multiplier = 1) {
+        if (!canIncrement())
+            return;
+        const valueBefore = value();
+        commitPendingInputSilently();
+        const valueAfterCommit = value();
+        const current = valueAfterCommit ?? (isFinite(min()) ? min() : 0);
+        const precision = getStepPrecision();
+        setValue(roundToPrecision(current + step() * multiplier, precision));
+        // If the silent commit changed the value but setValue was a no-op
+        // (stepped result clamped back to the committed value), emit the change
+        // so the parent learns about the new value.
+        if (valueBefore !== value() && valueAfterCommit === value()) {
+            onValueChange?.(value());
+            valueChange.emit(value());
+        }
+    }
+    function decrement(multiplier = 1) {
+        if (!canDecrement())
+            return;
+        const valueBefore = value();
+        commitPendingInputSilently();
+        const valueAfterCommit = value();
+        const current = valueAfterCommit ?? (isFinite(max()) ? max() : 0);
+        const precision = getStepPrecision();
+        setValue(roundToPrecision(current - step() * multiplier, precision));
+        // If the silent commit changed the value but setValue was a no-op
+        // (stepped result clamped back to the committed value), emit the change
+        // so the parent learns about the new value.
+        if (valueBefore !== value() && valueAfterCommit === value()) {
+            onValueChange?.(value());
+            valueChange.emit(value());
+        }
+    }
+    function setDisabled(isDisabled) {
+        disabled.set(isDisabled);
+    }
+    function setReadonly(isReadonly) {
+        readonly.set(isReadonly);
+    }
+    return {
+        id,
+        value,
+        min,
+        max,
+        step,
+        largeStep: _largeStep,
+        disabled: deprecatedSetter(disabled, 'setDisabled'),
+        readonly: deprecatedSetter(readonly, 'setReadonly'),
+        canIncrement,
+        canDecrement,
+        valueChange: valueChange.asObservable(),
+        setValue,
+        increment,
+        decrement,
+        setDisabled,
+        setReadonly,
+        registerInputCommit,
+    };
+});
+
+/**
+ * Apply the `ngpNumberField` directive to an element that represents the number field
+ * and contains the input, increment, and decrement buttons.
+ */
+class NgpNumberField {
+    constructor() {
+        /**
+         * The id of the number field. If not provided, a unique id will be generated.
+         */
+        this.id = input(uniqueId('ngp-number-field'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        /**
+         * The value of the number field.
+         */
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpNumberFieldValue',
+                transform: (v) => v === null || v === undefined || v === '' ? null : numberAttribute(v) }] : [{
+                alias: 'ngpNumberFieldValue',
+                transform: (v) => v === null || v === undefined || v === '' ? null : numberAttribute(v),
+            }]));
+        /**
+         * Emits when the value changes.
+         */
+        this.valueChange = output({
+            alias: 'ngpNumberFieldValueChange',
+        });
+        /**
+         * The minimum value.
+         */
+        this.min = input(-Infinity, ...(ngDevMode ? [{ debugName: "min", alias: 'ngpNumberFieldMin',
+                transform: numberAttribute }] : [{
+                alias: 'ngpNumberFieldMin',
+                transform: numberAttribute,
+            }]));
+        /**
+         * The maximum value.
+         */
+        this.max = input(Infinity, ...(ngDevMode ? [{ debugName: "max", alias: 'ngpNumberFieldMax',
+                transform: numberAttribute }] : [{
+                alias: 'ngpNumberFieldMax',
+                transform: numberAttribute,
+            }]));
+        /**
+         * The step value.
+         */
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step", alias: 'ngpNumberFieldStep',
+                transform: numberAttribute }] : [{
+                alias: 'ngpNumberFieldStep',
+                transform: numberAttribute,
+            }]));
+        /**
+         * The large step value (used with Shift key).
+         */
+        this.largeStep = input(10, ...(ngDevMode ? [{ debugName: "largeStep", alias: 'ngpNumberFieldLargeStep',
+                transform: numberAttribute }] : [{
+                alias: 'ngpNumberFieldLargeStep',
+                transform: numberAttribute,
+            }]));
+        /**
+         * The disabled state of the number field.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpNumberFieldDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpNumberFieldDisabled',
+                transform: booleanAttribute,
+            }]));
+        /**
+         * The readonly state of the number field.
+         */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", alias: 'ngpNumberFieldReadonly',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpNumberFieldReadonly',
+                transform: booleanAttribute,
+            }]));
+        /**
+         * @internal
+         */
+        this.state = ngpNumberField({
+            id: this.id,
+            value: this.value,
+            min: this.min,
+            max: this.max,
+            step: this.step,
+            largeStep: this.largeStep,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            onValueChange: value => this.valueChange.emit(value),
+        });
+    }
+    /**
+     * Set the value of the number field.
+     */
+    setValue(value) {
+        this.state.setValue(value);
+    }
+    /**
+     * Increment the value.
+     */
+    increment(multiplier) {
+        this.state.increment(multiplier);
+    }
+    /**
+     * Decrement the value.
+     */
+    decrement(multiplier) {
+        this.state.decrement(multiplier);
+    }
+    /**
+     * Set the disabled state.
+     */
+    setDisabled(disabled) {
+        this.state.setDisabled(disabled);
+    }
+    /**
+     * Set the readonly state.
+     */
+    setReadonly(readonly) {
+        this.state.setReadonly(readonly);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNumberField, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpNumberField, isStandalone: true, selector: "[ngpNumberField]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpNumberFieldValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpNumberFieldMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpNumberFieldMax", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "ngpNumberFieldStep", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "ngpNumberFieldLargeStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpNumberFieldDisabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "ngpNumberFieldReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpNumberFieldValueChange" }, providers: [provideNumberFieldState()], exportAs: ["ngpNumberField"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNumberField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpNumberField]',
+                    exportAs: 'ngpNumberField',
+                    providers: [provideNumberFieldState()],
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNumberFieldValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpNumberFieldValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNumberFieldMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNumberFieldMax", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNumberFieldStep", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNumberFieldLargeStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNumberFieldDisabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNumberFieldReadonly", required: false }] }] } });
+
+const [NgpNumberFieldInputStateToken, ngpNumberFieldInput, injectNumberFieldInputState, provideNumberFieldInputState,] = createPrimitive('NgpNumberFieldInput', ({ allowWheelScrub = signal(false) }) => {
+    const elementRef = injectElementRef();
+    const numberField = injectNumberFieldState();
+    const document = inject(DOCUMENT);
+    // Form control integration — sets id, aria-labelledby, aria-describedby on the input
+    ngpFormControl({ id: numberField().id, disabled: numberField().disabled });
+    const tabindex = computed(() => (numberField().disabled() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    // Host bindings
+    const inputMode = computed(() => {
+        const minVal = numberField().min();
+        const stepVal = numberField().step();
+        const allowsNegative = !isFinite(minVal) || minVal < 0;
+        const hasDecimals = stepVal % 1 !== 0;
+        // Some mobile keyboards can't show both minus sign and decimal point
+        if (allowsNegative && hasDecimals)
+            return 'text';
+        if (hasDecimals)
+            return 'decimal';
+        if (!allowsNegative)
+            return 'numeric';
+        return 'text';
+    }, ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
+    attrBinding(elementRef, 'role', 'spinbutton');
+    attrBinding(elementRef, 'type', 'text');
+    attrBinding(elementRef, 'inputmode', inputMode);
+    attrBinding(elementRef, 'autocomplete', 'off');
+    attrBinding(elementRef, 'autocorrect', 'off');
+    attrBinding(elementRef, 'spellcheck', 'false');
+    attrBinding(elementRef, 'aria-valuemin', () => {
+        const min = numberField().min();
+        return isFinite(min) ? min.toString() : null;
+    });
+    attrBinding(elementRef, 'aria-valuemax', () => {
+        const max = numberField().max();
+        return isFinite(max) ? max.toString() : null;
+    });
+    attrBinding(elementRef, 'aria-valuenow', () => numberField().value()?.toString() ?? null);
+    attrBinding(elementRef, 'tabindex', () => tabindex().toString());
+    attrBinding(elementRef, 'readonly', () => (numberField().readonly() ? '' : null));
+    dataBinding(elementRef, 'data-readonly', () => numberField().readonly());
+    ngpInteractions({
+        hover: true,
+        focusVisible: true,
+        disabled: numberField().disabled,
+    });
+    let isFocused = false;
+    /**
+     * Parse text and set the number field value accordingly.
+     */
+    function parseAndSetValue(text) {
+        const trimmed = text.trim();
+        if (trimmed === '' || trimmed === '-') {
+            numberField().setValue(null);
+        }
+        else {
+            const parsed = parseFloat(trimmed);
+            if (!isNaN(parsed)) {
+                numberField().setValue(parsed);
+            }
+        }
+    }
+    /**
+     * Commit the current input text to the number field value.
+     * Called before increment/decrement so they operate on the displayed value.
+     */
+    function commitInputValue() {
+        if (!isFocused)
+            return;
+        parseAndSetValue(elementRef.nativeElement.value);
+    }
+    // Register the commit function with the number field so buttons can trigger it
+    numberField().registerInputCommit(commitInputValue);
+    function formatDisplayValue() {
+        const val = numberField().value();
+        return val !== null ? String(val) : '';
+    }
+    // Sync input display value when the number field value changes
+    // (programmatically, via stepping, or on commit)
+    explicitEffect([() => numberField().value()], ([value]) => {
+        elementRef.nativeElement.value = value !== null ? String(value) : '';
+    });
+    listener(elementRef, 'focus', () => {
+        isFocused = true;
+    });
+    listener(elementRef, 'blur', () => {
+        isFocused = false;
+        parseAndSetValue(elementRef.nativeElement.value);
+        // Always sync the display value on blur to show the clamped/stepped value
+        elementRef.nativeElement.value = formatDisplayValue();
+    });
+    // Reject characters that can't form a valid number
+    listener(elementRef, 'beforeinput', (event) => {
+        if (numberField().disabled() || numberField().readonly())
+            return;
+        // Only filter insertions (typing, paste, drop)
+        const insertTypes = ['insertText', 'insertFromPaste', 'insertFromDrop'];
+        if (!insertTypes.includes(event.inputType) || !event.data)
+            return;
+        const input = elementRef.nativeElement;
+        const selStart = input.selectionStart ?? 0;
+        const selEnd = input.selectionEnd ?? 0;
+        const current = input.value;
+        const proposed = current.slice(0, selStart) + event.data + current.slice(selEnd);
+        const minVal = numberField().min();
+        const allowsNegative = !isFinite(minVal) || minVal < 0;
+        // Build a regex for valid partial number input
+        const pattern = allowsNegative ? /^-?(\d+\.?\d*|\.\d*)?$/ : /^(\d+\.?\d*|\.\d*)?$/;
+        if (!pattern.test(proposed)) {
+            event.preventDefault();
+        }
+    });
+    // Keyboard interactions
+    listener(elementRef, 'keydown', (event) => {
+        if (numberField().disabled() || numberField().readonly())
+            return;
+        const useLargeStep = event.shiftKey;
+        function getLargeStepMultiplier() {
+            const s = numberField().step();
+            if (!isFinite(s) || s <= 0)
+                return 1;
+            return numberField().largeStep() / s;
+        }
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                numberField().increment(useLargeStep ? getLargeStepMultiplier() : 1);
+                elementRef.nativeElement.value = formatDisplayValue();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                numberField().decrement(useLargeStep ? getLargeStepMultiplier() : 1);
+                elementRef.nativeElement.value = formatDisplayValue();
+                break;
+            case 'Home':
+                if (isFinite(numberField().min())) {
+                    event.preventDefault();
+                    numberField().setValue(numberField().min());
+                    elementRef.nativeElement.value = formatDisplayValue();
+                }
+                break;
+            case 'End':
+                if (isFinite(numberField().max())) {
+                    event.preventDefault();
+                    numberField().setValue(numberField().max());
+                    elementRef.nativeElement.value = formatDisplayValue();
+                }
+                break;
+            case 'Enter':
+                parseAndSetValue(elementRef.nativeElement.value);
+                elementRef.nativeElement.value = formatDisplayValue();
+                break;
+        }
+    });
+    // Mouse wheel support
+    listener(elementRef, 'wheel', (event) => {
+        if (!allowWheelScrub() || numberField().disabled() || numberField().readonly())
+            return;
+        // Don't intercept browser zoom (Ctrl+wheel / Cmd+wheel)
+        if (event.ctrlKey || event.metaKey)
+            return;
+        // Only handle when focused
+        if (document.activeElement !== elementRef.nativeElement)
+            return;
+        event.preventDefault();
+        if (event.deltaY < 0) {
+            numberField().increment();
+        }
+        else if (event.deltaY > 0) {
+            numberField().decrement();
+        }
+        elementRef.nativeElement.value = formatDisplayValue();
+    }, { config: { passive: false } });
+    function focus() {
+        elementRef.nativeElement.focus({ preventScroll: true });
+    }
+    return {
+        focus,
+    };
+});
+
+/**
+ * Apply the `ngpNumberFieldInput` directive to an input element within a number field.
+ */
+class NgpNumberFieldInput {
+    constructor() {
+        /**
+         * Whether mouse wheel changes the value when the input is focused.
+         */
+        this.allowWheelScrub = input(false, ...(ngDevMode ? [{ debugName: "allowWheelScrub", alias: 'ngpNumberFieldInputAllowWheelScrub',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpNumberFieldInputAllowWheelScrub',
+                transform: booleanAttribute,
+            }]));
+        ngpNumberFieldInput({
+            allowWheelScrub: this.allowWheelScrub,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNumberFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpNumberFieldInput, isStandalone: true, selector: "[ngpNumberFieldInput]", inputs: { allowWheelScrub: { classPropertyName: "allowWheelScrub", publicName: "ngpNumberFieldInputAllowWheelScrub", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNumberFieldInputState()], exportAs: ["ngpNumberFieldInput"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNumberFieldInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpNumberFieldInput]',
+                    exportAs: 'ngpNumberFieldInput',
+                    providers: [provideNumberFieldInputState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { allowWheelScrub: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNumberFieldInputAllowWheelScrub", required: false }] }] } });
+
+const [NgpNumberFieldIncrementStateToken, ngpNumberFieldIncrement, injectNumberFieldIncrementState, provideNumberFieldIncrementState,] = createPrimitive('NgpNumberFieldIncrement', ({}) => {
+    const elementRef = injectElementRef();
+    const numberField = injectNumberFieldState();
+    const injector = inject(Injector);
+    const disposables = injectDisposables();
+    const isDisabled = computed(() => !numberField().canIncrement(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // Host bindings
+    attrBinding(elementRef, 'type', 'button');
+    attrBinding(elementRef, 'tabindex', '-1');
+    attrBinding(elementRef, 'disabled', () => (isDisabled() ? '' : null));
+    dataBinding(elementRef, 'data-disabled', isDisabled);
+    ngpInteractions({
+        hover: true,
+        focusVisible: true,
+        press: true,
+        disabled: isDisabled,
+    });
+    let cleanupRepeat = null;
+    function stopRepeat() {
+        cleanupRepeat?.();
+        cleanupRepeat = null;
+    }
+    listener(elementRef, 'pointerdown', (event) => {
+        event.preventDefault();
+        if (isDisabled())
+            return;
+        numberField().increment();
+        // Start auto-repeat: 400ms initial delay, then 60ms interval
+        stopRepeat();
+        let intervalCleanup = null;
+        const delayCleanup = disposables.setTimeout(() => {
+            intervalCleanup = disposables.setInterval(() => {
+                if (!numberField().canIncrement()) {
+                    stopRepeat();
+                    return;
+                }
+                numberField().increment();
+            }, 60);
+        }, 400);
+        // Set up document-level listeners to stop on pointer release
+        const pointerUpCleanup = listener(document, 'pointerup', stopRepeat, {
+            config: false,
+            injector,
+        });
+        const pointerCancelCleanup = listener(document, 'pointercancel', stopRepeat, {
+            config: false,
+            injector,
+        });
+        cleanupRepeat = () => {
+            delayCleanup();
+            intervalCleanup?.();
+            pointerUpCleanup();
+            pointerCancelCleanup();
+        };
+    });
+    return {};
+});
+
+/**
+ * Apply the `ngpNumberFieldIncrement` directive to a button element that increments the number field value.
+ */
+class NgpNumberFieldIncrement {
+    constructor() {
+        ngpNumberFieldIncrement({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNumberFieldIncrement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpNumberFieldIncrement, isStandalone: true, selector: "[ngpNumberFieldIncrement]", providers: [provideNumberFieldIncrementState()], exportAs: ["ngpNumberFieldIncrement"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNumberFieldIncrement, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpNumberFieldIncrement]',
+                    exportAs: 'ngpNumberFieldIncrement',
+                    providers: [provideNumberFieldIncrementState()],
+                }]
+        }], ctorParameters: () => [] });
+
+const [NgpNumberFieldDecrementStateToken, ngpNumberFieldDecrement, injectNumberFieldDecrementState, provideNumberFieldDecrementState,] = createPrimitive('NgpNumberFieldDecrement', ({}) => {
+    const elementRef = injectElementRef();
+    const numberField = injectNumberFieldState();
+    const injector = inject(Injector);
+    const disposables = injectDisposables();
+    const isDisabled = computed(() => !numberField().canDecrement(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // Host bindings
+    attrBinding(elementRef, 'type', 'button');
+    attrBinding(elementRef, 'tabindex', '-1');
+    attrBinding(elementRef, 'disabled', () => (isDisabled() ? '' : null));
+    dataBinding(elementRef, 'data-disabled', isDisabled);
+    ngpInteractions({
+        hover: true,
+        focusVisible: true,
+        press: true,
+        disabled: isDisabled,
+    });
+    let cleanupRepeat = null;
+    function stopRepeat() {
+        cleanupRepeat?.();
+        cleanupRepeat = null;
+    }
+    listener(elementRef, 'pointerdown', (event) => {
+        event.preventDefault();
+        if (isDisabled())
+            return;
+        numberField().decrement();
+        // Start auto-repeat: 400ms initial delay, then 60ms interval
+        stopRepeat();
+        let intervalCleanup = null;
+        const delayCleanup = disposables.setTimeout(() => {
+            intervalCleanup = disposables.setInterval(() => {
+                if (!numberField().canDecrement()) {
+                    stopRepeat();
+                    return;
+                }
+                numberField().decrement();
+            }, 60);
+        }, 400);
+        // Set up document-level listeners to stop on pointer release
+        const pointerUpCleanup = listener(document, 'pointerup', stopRepeat, {
+            config: false,
+            injector,
+        });
+        const pointerCancelCleanup = listener(document, 'pointercancel', stopRepeat, {
+            config: false,
+            injector,
+        });
+        cleanupRepeat = () => {
+            delayCleanup();
+            intervalCleanup?.();
+            pointerUpCleanup();
+            pointerCancelCleanup();
+        };
+    });
+    return {};
+});
+
+/**
+ * Apply the `ngpNumberFieldDecrement` directive to a button element that decrements the number field value.
+ */
+class NgpNumberFieldDecrement {
+    constructor() {
+        ngpNumberFieldDecrement({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNumberFieldDecrement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpNumberFieldDecrement, isStandalone: true, selector: "[ngpNumberFieldDecrement]", providers: [provideNumberFieldDecrementState()], exportAs: ["ngpNumberFieldDecrement"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNumberFieldDecrement, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpNumberFieldDecrement]',
+                    exportAs: 'ngpNumberFieldDecrement',
+                    providers: [provideNumberFieldDecrementState()],
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgpNumberField, NgpNumberFieldDecrement, NgpNumberFieldIncrement, NgpNumberFieldInput, injectNumberFieldDecrementState, injectNumberFieldIncrementState, injectNumberFieldInputState, injectNumberFieldState, ngpNumberField, ngpNumberFieldDecrement, ngpNumberFieldIncrement, ngpNumberFieldInput, provideNumberFieldDecrementState, provideNumberFieldIncrementState, provideNumberFieldInputState, provideNumberFieldState };
+//# sourceMappingURL=ng-primitives-number-field.mjs.map