@qualcomm-ui/angular-core 1.0.1 → 1.0.3

package/fesm2022/qualcomm-ui-angular-core-number-input.mjs

@@ -0,0 +1,703 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, signal, inject, Injector, linkedSignal, computed, afterNextRender, isDevMode, effect, runInInjectionContext, Directive, Injectable, output } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl, Validators, PristineChangeEvent, FormSubmittedEvent, NgModel, NgForm, FormGroupDirective } from '@angular/forms';
+import { numberAttributeOrUndefined } from '@qualcomm-ui/angular-core/attributes';
+import { useOnDestroy, useId, useIsMounted } from '@qualcomm-ui/angular-core/common';
+import { allEventsSignal } from '@qualcomm-ui/angular-core/forms';
+import { defined, isDefined } from '@qualcomm-ui/utils/guard';
+import { BaseApiContextService, createApiContext, useTrackBindings, useMachine, normalizeProps } from '@qualcomm-ui/angular-core/machine';
+import { DOCUMENT } from '@angular/common';
+import { numberInputMachine, createNumberInputApi } from '@qualcomm-ui/core/number-input';
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+/**
+ * Validator that requires a number value. Will fail if the value is `NaN`, `null`,
+ * or `undefined`.
+ */
+function requiredNumberValidator(control) {
+    if (Number.isNaN(control.value) ||
+        control.value === null ||
+        control.value === undefined) {
+        return { required: { value: control.value } };
+    }
+    return null;
+}
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class AbstractNumberInputFormControlDirective {
+    /**
+     * The initial checked state of the checkbox when rendered. Use when you don't
+     * need to control the checked state of the checkbox. This property will be
+     * ignored if you opt into controlled state via form control bindings.
+     */
+    defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue", transform: numberAttributeOrUndefined }] : [{
+            transform: numberAttributeOrUndefined,
+        }]));
+    /**
+     * Controls whether the input is disabled in template-driven forms. When true,
+     * prevents user interaction and applies visual styling to indicate the disabled
+     * state.
+     */
+    disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * Controls the visual error state of the input. When true, applies semantic error
+     * styling to indicate validation failure.
+     */
+    invalid = input(undefined, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * The name of the input field in a checkbox. Useful for form submission.
+     */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    /**
+     * Whether the input is read-only. When true, prevents user interaction while
+     * keeping the input focusable and visible.
+     */
+    readOnly = input(undefined, ...(ngDevMode ? [{ debugName: "readOnly", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * Controls whether the input is required in template-driven forms. When
+     * true, the input must have a value for form validation to pass.
+     */
+    required = input(undefined, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /* the internal "value" state of the input */
+    value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    stringValue = signal(undefined, ...(ngDevMode ? [{ debugName: "stringValue" }] : []));
+    onDestroy = useOnDestroy();
+    injector = inject(Injector);
+    formControlStatus = signal(undefined, ...(ngDevMode ? [{ debugName: "formControlStatus" }] : []));
+    formSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "formSubmitted" }] : []));
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    formEventData = signal(null, ...(ngDevMode ? [{ debugName: "formEventData" }] : []));
+    /**
+     * If the component is bound to an Angular AbstractControl, its state wins.
+     * If not, fall back to the host attribute.
+     */
+    isDisabled = linkedSignal(() => {
+        /**
+         * When the component is bound to any AbstractControl, status is guaranteed to
+         * be non-undefined.
+         */
+        const status = this.formControlStatus();
+        const disabled = this.disabled();
+        if (status !== undefined) {
+            return status === "DISABLED";
+        }
+        return !!disabled;
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isInvalid = computed(() => {
+        const formEventData = this.formEventData();
+        const submitted = this.formSubmitted();
+        const isInvalidDefined = defined(this.invalid());
+        const invalidProp = this.invalid() || false;
+        if (!this.control) {
+            return invalidProp;
+        }
+        let invalid, touched, dirty;
+        if (this.isTemplateDrivenForm) {
+            invalid = isInvalidDefined ? invalidProp : this.control.invalid;
+            touched = this.control.touched;
+            dirty = this.control.dirty;
+        }
+        else if (formEventData) {
+            invalid = formEventData.invalid;
+            touched = formEventData.touched;
+            dirty = formEventData.dirty;
+        }
+        else {
+            return invalidProp;
+        }
+        // TODO: evaluate whether this should be customizable.
+        // React Hook Form uses a reValidateMode prop for adjusting the validation
+        // strategy after the form has been submitted.
+        if (submitted) {
+            return invalid;
+        }
+        switch (this.control.updateOn) {
+            case "submit":
+                return invalid;
+            case "blur":
+                return invalid && touched;
+            default:
+                // "change"
+                return dirty && invalid;
+        }
+    }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+    isRequired = linkedSignal(() => {
+        const control = this.control;
+        const required = this.required();
+        if (!control || !this.isReactiveForm) {
+            return required;
+        }
+        if (typeof control.hasValidator === "function") {
+            return (control.hasValidator(Validators.required) ||
+                control.hasValidator(Validators.requiredTrue) ||
+                control.hasValidator(requiredNumberValidator));
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+            this.setValueFromControl();
+        }
+        afterNextRender(() => {
+            if (isDefined(this.required()) && this.isReactiveForm && isDevMode()) {
+                console.warn("The required attribute is not supported on reactive forms. Use Validators instead. https://angular.dev/guide/forms/form-validation#validating-input-in-reactive-forms");
+            }
+        });
+        effect(() => {
+            const required = this.required();
+            if (this.control && this.isTemplateDrivenForm) {
+                if (required) {
+                    this.control.addValidators(requiredNumberValidator);
+                }
+                else if (this.control.hasValidator(requiredNumberValidator)) {
+                    this.control.removeValidators(requiredNumberValidator);
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.setValueFromControl();
+        // Ensure the form control receives the initial value
+        const defaultValue = this.defaultValue();
+        if (!this.control && defined(defaultValue)) {
+            this.stringValue.set(`${defaultValue}`);
+            this.value.set(defaultValue);
+        }
+        else if (this.control) {
+            const subscription = this.control.statusChanges.subscribe((status) => {
+                this.formControlStatus.set(status);
+            });
+            this.onDestroy(() => {
+                subscription.unsubscribe();
+            });
+            const parent = this.getParentForm();
+            runInInjectionContext(this.injector, () => {
+                if (this.control) {
+                    const formSignal = allEventsSignal(this.control);
+                    effect(() => {
+                        this.formEventData.set(formSignal());
+                    });
+                }
+                if (this.control) {
+                    this.control?.valueChanges
+                        .pipe(takeUntilDestroyed())
+                        .subscribe(() => {
+                        this.setValueFromControl();
+                    });
+                }
+                if (parent) {
+                    let prevPristine = this.control?.pristine || false;
+                    parent.form.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+                        if (event instanceof PristineChangeEvent) {
+                            if (event.pristine && !prevPristine) {
+                                // if this event fires with pristine status and the control was
+                                // previously not pristine, this means that the form was reset. There
+                                // isn't another way to determine form resets programmatically,
+                                // unfortunately.
+                                this.formSubmitted.set(false);
+                            }
+                            prevPristine = event.pristine;
+                        }
+                        else if (event instanceof FormSubmittedEvent) {
+                            this.formSubmitted.set(true);
+                            this.control?.markAsDirty();
+                        }
+                    });
+                    parent.ngSubmit.pipe(takeUntilDestroyed()).subscribe(() => {
+                        if (this.isReactiveForm) {
+                            // already accounted for in the above event subscription.
+                            return;
+                        }
+                        this.formSubmitted.set(true);
+                        this.control?.markAsDirty();
+                    });
+                }
+            });
+        }
+    }
+    setValueFromControl() {
+        if (this.ngControl) {
+            const value = this.ngControl.control?.value;
+            if (isDefined(value) && !Number.isNaN(value)) {
+                this.value.set(value);
+                this.stringValue.set(`${value}`);
+            }
+        }
+    }
+    /** `true` when used with template-driven forms (`[(ngModel)]`, `ngModel`, …). */
+    get isTemplateDrivenForm() {
+        return this.ngControl instanceof NgModel;
+    }
+    /** `true` when used with reactive-forms (`formControl`, `formControlName`, …). */
+    get isReactiveForm() {
+        // Any NgControl that is *not* NgModel belongs to the reactive-forms package
+        return !!this.ngControl && !this.isTemplateDrivenForm;
+    }
+    /** Convenience access to the underlying AbstractControl (can be null). */
+    get control() {
+        return this.ngControl?.control ?? null;
+    }
+    /**
+     * Used to subscribe to form submit events.
+     */
+    getParentForm() {
+        if (!this.control) {
+            return null;
+        }
+        // Try to find NgForm first
+        try {
+            const ngForm = this.injector.get(NgForm, null);
+            if (ngForm) {
+                return ngForm;
+            }
+        }
+        catch { }
+        // Fall back to FormGroupDirective
+        try {
+            const formGroupDirective = this.injector.get(FormGroupDirective, null);
+            if (formGroupDirective) {
+                return formGroupDirective;
+            }
+        }
+        catch { }
+        return null;
+    }
+    /*
+     * Control value accessor methods
+     */
+    writeValue(value) {
+        this.value.set(value);
+    }
+    // placeholder
+    onChange = (_value) => { };
+    registerOnChange(fn) {
+        this.onChange = (_value) => {
+            fn(_value);
+            this.value.set(_value);
+        };
+    }
+    onTouched = () => { };
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * NgModel never calls setDisabledState, but ReactiveForms does. Everything else
+     * (writeValue, registerOnChange, registerOnTouched) is identical between Reactive
+     * and Template forms.
+     */
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AbstractNumberInputFormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: AbstractNumberInputFormControlDirective, isStandalone: true, inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AbstractNumberInputFormControlDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class NumberInputContextService extends BaseApiContextService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NumberInputContextService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NumberInputContextService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NumberInputContextService, decorators: [{
+            type: Injectable
+        }] });
+const [NUMBER_INPUT_CONTEXT, useNumberInputContext, provideNumberInputContext,] = createApiContext("NumberInputContext", NumberInputContextService);
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputControlDirective {
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getControlBindings();
+    });
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: CoreNumberInputControlDirective, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputControlDirective, decorators: [{
+            type: Directive
+        }] });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputDecrementTriggerDirective {
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getDecrementTriggerBindings({
+            id: this.hostId(),
+            onDestroy: this.onDestroy,
+        });
+    });
+    hostId = computed(() => useId(this, this.id()), ...(ngDevMode ? [{ debugName: "hostId" }] : []));
+    onDestroy = useOnDestroy();
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputDecrementTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: CoreNumberInputDecrementTriggerDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputDecrementTriggerDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputErrorIndicatorDirective {
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getErrorIndicatorBindings();
+    });
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputErrorIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: CoreNumberInputErrorIndicatorDirective, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputErrorIndicatorDirective, decorators: [{
+            type: Directive
+        }] });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputErrorTextDirective {
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getErrorTextBindings({
+            id: this.hostId(),
+            onDestroy: this.onDestroy,
+        });
+    });
+    hostId = computed(() => useId(this, this.id()), ...(ngDevMode ? [{ debugName: "hostId" }] : []));
+    onDestroy = useOnDestroy();
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputErrorTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: CoreNumberInputErrorTextDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputErrorTextDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputHintDirective {
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getHintBindings({
+            id: this.hostId(),
+            onDestroy: this.onDestroy,
+        });
+    });
+    hostId = computed(() => useId(this, this.id()), ...(ngDevMode ? [{ debugName: "hostId" }] : []));
+    onDestroy = useOnDestroy();
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: CoreNumberInputHintDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputHintDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputIncrementTriggerDirective {
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getIncrementTriggerBindings({
+            id: this.hostId(),
+            onDestroy: this.onDestroy,
+        });
+    });
+    hostId = computed(() => useId(this, this.id()), ...(ngDevMode ? [{ debugName: "hostId" }] : []));
+    onDestroy = useOnDestroy();
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputIncrementTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: CoreNumberInputIncrementTriggerDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputIncrementTriggerDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputInputGroupDirective {
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getInputGroupBindings();
+    });
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputInputGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: CoreNumberInputInputGroupDirective, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputInputGroupDirective, decorators: [{
+            type: Directive
+        }] });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputInputDirective {
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getInputBindings({
+            id: this.hostId(),
+            onDestroy: this.onDestroy,
+        });
+    });
+    hostId = computed(() => useId(this, this.id()), ...(ngDevMode ? [{ debugName: "hostId" }] : []));
+    onDestroy = useOnDestroy();
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: CoreNumberInputInputDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputInputDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputLabelDirective {
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    numberInputContext = useNumberInputContext();
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext().getLabelBindings({
+            id: this.hostId(),
+            onDestroy: this.onDestroy,
+        });
+    });
+    hostId = computed(() => useId(this, this.id()), ...(ngDevMode ? [{ debugName: "hostId" }] : []));
+    onDestroy = useOnDestroy();
+    ngOnInit() {
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: CoreNumberInputLabelDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputLabelDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+class CoreNumberInputRootDirective extends AbstractNumberInputFormControlDirective {
+    /**
+     * Whether to allow mouse wheel to change the value
+     */
+    allowMouseWheel = input(undefined, ...(ngDevMode ? [{ debugName: "allowMouseWheel", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * Whether to allow the value to overflow the min/max range
+     * @default true
+     */
+    allowOverflow = input(undefined, ...(ngDevMode ? [{ debugName: "allowOverflow", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * Whether to clamp the value when the input loses focus (blur)
+     * @default true
+     */
+    clampValueOnBlur = input(undefined, ...(ngDevMode ? [{ debugName: "clampValueOnBlur", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * The document's text/writing direction.
+     *
+     * @default "ltr"
+     */
+    dir = input(undefined, ...(ngDevMode ? [{ debugName: "dir" }] : []));
+    /**
+     * Whether to focus the input when the value changes
+     *
+     * @default true
+     */
+    focusInputOnChange = input(undefined, ...(ngDevMode ? [{ debugName: "focusInputOnChange", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * The options to pass to the `Intl.NumberFormat` constructor
+     */
+    formatOptions = input(...(ngDevMode ? [undefined, { debugName: "formatOptions" }] : []));
+    /**
+     * A root node to correctly resolve the Document in custom environments. i.e.,
+     * Iframes, Electron.
+     */
+    getRootNode = input(...(ngDevMode ? [undefined, { debugName: "getRootNode" }] : []));
+    /**
+     * Hints at the type of data that might be entered by the user. It also determines
+     * the type of keyboard shown to the user on mobile devices
+     * @default "decimal"
+     */
+    inputMode = input(...(ngDevMode ? [undefined, { debugName: "inputMode" }] : []));
+    /**
+     * The maximum value of the number input
+     * @default Number.MAX_SAFE_INTEGER
+     */
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max", transform: numberAttributeOrUndefined }] : [{
+            transform: numberAttributeOrUndefined,
+        }]));
+    /**
+     * The minimum value of the number input
+     * @default Number.MIN_SAFE_INTEGER
+     */
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min", transform: numberAttributeOrUndefined }] : [{
+            transform: numberAttributeOrUndefined,
+        }]));
+    /**
+     * The current locale. Based on the BCP 47 definition.
+     *
+     * @default 'en-US'
+     */
+    locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
+    /**
+     * The pattern used to check the <input> element's value against
+     *
+     * @default "[0-9]*(.[0-9]+)?"
+     */
+    pattern = input(...(ngDevMode ? [undefined, { debugName: "pattern" }] : []));
+    /**
+     * Whether to spin the value when the increment/decrement button is pressed
+     * @default true
+     */
+    spinOnPress = input(undefined, ...(ngDevMode ? [{ debugName: "spinOnPress", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * Amount to increment/decrement the value when using stepper buttons or arrow keys.
+     * @default 1
+     */
+    step = input(undefined, ...(ngDevMode ? [{ debugName: "step", transform: numberAttributeOrUndefined }] : [{
+            transform: numberAttributeOrUndefined,
+        }]));
+    /**
+     * Specifies the localized strings that identify the accessibility elements and
+     * their states
+     */
+    translations = input(...(ngDevMode ? [undefined, { debugName: "translations" }] : []));
+    /**
+     * Event emitted when the checkbox is checked or unchecked. This is only emitted
+     * on interaction. It doesn't emit in response to programmatic form control
+     * changes.
+     */
+    valueChanged = output();
+    /**
+     * Function invoked when the value overflows or underflows the min/max range
+     */
+    valueInvalid = output();
+    document = inject(DOCUMENT);
+    isMounted = useIsMounted();
+    numberInputContext = inject(NumberInputContextService);
+    trackBindings = useTrackBindings(() => {
+        return this.numberInputContext.context().getRootBindings();
+    });
+    ngOnInit() {
+        super.ngOnInit();
+        const machine = useMachine(numberInputMachine, computed(() => {
+            return {
+                allowMouseWheel: this.allowMouseWheel(),
+                allowOverflow: this.allowOverflow(),
+                clampValueOnBlur: this.clampValueOnBlur(),
+                defaultValue: this.defaultValue()
+                    ? `${this.defaultValue() ?? ""}`
+                    : "",
+                dir: this.dir(),
+                disabled: this.isDisabled(),
+                focusInputOnChange: this.focusInputOnChange(),
+                // angular handles this automatically with ngModel and Reactive Forms
+                form: undefined,
+                formatOptions: this.formatOptions(),
+                getRootNode: this.getRootNode() ?? (() => this.document),
+                ids: undefined,
+                inputMode: this.inputMode(),
+                invalid: this.isInvalid(),
+                locale: this.locale(),
+                max: this.max(),
+                min: this.min(),
+                name: this.name(),
+                onFocusChange: (details) => {
+                    if (!details.focused) {
+                        // only trigger onTouched on blur.
+                        this.onTouched();
+                    }
+                },
+                onValueChange: (details) => {
+                    this.stringValue.set(details.value);
+                    if (!this.control) {
+                        if (this.isMounted()) {
+                            this.valueChanged.emit(details);
+                        }
+                        this.value.set(details.valueAsNumber);
+                        return;
+                    }
+                    // ngModel is bound to the root, but change events happen on the <input>
+                    // element and are forwarded to the machine.  So we need to fire the
+                    // value change event to keep the form in sync.
+                    this.onChange(details.valueAsNumber);
+                    if (!this.control?.touched) {
+                        this.control.markAsTouched?.();
+                    }
+                    if (!this.control?.dirty) {
+                        this.control.markAsDirty?.();
+                    }
+                },
+                onValueInvalid: (details) => {
+                    this.valueInvalid.emit(details);
+                },
+                pattern: this.pattern(),
+                readOnly: this.readOnly(),
+                required: this.isRequired(),
+                spinOnPress: this.spinOnPress(),
+                step: this.step(),
+                translations: this.translations(),
+                value: this.stringValue(),
+            };
+        }), this.injector);
+        this.numberInputContext.init(computed(() => createNumberInputApi(machine, normalizeProps)));
+        this.trackBindings();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputRootDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: CoreNumberInputRootDirective, isStandalone: true, inputs: { allowMouseWheel: { classPropertyName: "allowMouseWheel", publicName: "allowMouseWheel", isSignal: true, isRequired: false, transformFunction: null }, allowOverflow: { classPropertyName: "allowOverflow", publicName: "allowOverflow", isSignal: true, isRequired: false, transformFunction: null }, clampValueOnBlur: { classPropertyName: "clampValueOnBlur", publicName: "clampValueOnBlur", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, focusInputOnChange: { classPropertyName: "focusInputOnChange", publicName: "focusInputOnChange", isSignal: true, isRequired: false, transformFunction: null }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null }, getRootNode: { classPropertyName: "getRootNode", publicName: "getRootNode", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, spinOnPress: { classPropertyName: "spinOnPress", publicName: "spinOnPress", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", valueInvalid: "valueInvalid" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CoreNumberInputRootDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { allowMouseWheel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMouseWheel", required: false }] }], allowOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOverflow", required: false }] }], clampValueOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "clampValueOnBlur", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], focusInputOnChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusInputOnChange", required: false }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }], getRootNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRootNode", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], spinOnPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinOnPress", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], translations: [{ type: i0.Input, args: [{ isSignal: true, alias: "translations", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], valueInvalid: [{ type: i0.Output, args: ["valueInvalid"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractNumberInputFormControlDirective, CoreNumberInputControlDirective, CoreNumberInputDecrementTriggerDirective, CoreNumberInputErrorIndicatorDirective, CoreNumberInputErrorTextDirective, CoreNumberInputHintDirective, CoreNumberInputIncrementTriggerDirective, CoreNumberInputInputDirective, CoreNumberInputInputGroupDirective, CoreNumberInputLabelDirective, CoreNumberInputRootDirective, NUMBER_INPUT_CONTEXT, NumberInputContextService, provideNumberInputContext, requiredNumberValidator, useNumberInputContext };
+//# sourceMappingURL=qualcomm-ui-angular-core-number-input.mjs.map