@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs

@@ -0,0 +1,597 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, computed, signal, contentChildren, TemplateRef, viewChild, input, output, model, afterNextRender, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { LucideChevronUp, LucideChevronDown } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { Subject, filter, switchMap, of, tap, delay, concatMap, timer, takeUntil, distinctUntilChanged, map } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
+import { cva } from 'class-variance-authority';
+
+class NumericTextBoxPrefixTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxPrefixTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NumericTextBoxPrefixTemplateDirective, isStandalone: true, selector: "ng-template[monaNumericTextBoxPrefixTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxPrefixTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaNumericTextBoxPrefixTemplate]",
+                    standalone: true
+                }]
+        }] });
+
+const numericTextboxVariants = cva(`
+        flex items-center w-full min-w-0
+        bg-transparent
+        border border-input-border p-0
+        outline-none overflow-hidden
+
+        placeholder:text-muted-foreground
+
+        selection:bg-primary selection:text-primary-foreground
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        focus-within:ring-2 focus-within:ring-primary/40
+        focus-within:border-primary
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        },
+        size: {
+            large: "h-10 text-md",
+            medium: "h-9 text-sm",
+            small: "h-8 text-xs"
+        }
+    }
+});
+const numericTextboxInputVariants = cva(`
+        border-0 outline-none ring-0
+        h-full w-full
+        focus-visible:ring-0 shadow-none
+        rounded-none
+    `, {
+    variants: {
+        leftRounded: {
+            full: `
+                    rounded-tl-full rounded-bl-full
+                `,
+            large: `
+                    rounded-tl-lg rounded-bl-lg
+                `,
+            medium: `
+                    rounded-tl-md rounded-bl-md
+                `,
+            none: `
+                    rounded-tl-none rounded-bl-none
+                `,
+            small: `
+                    rounded-tl-sm rounded-bl-sm
+                `
+        },
+        rightRounded: {
+            full: `
+                    rounded-tr-full rounded-br-full
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                `,
+            large: `
+                    rounded-tr-lg rounded-br-lg
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                `,
+            medium: `
+                    rounded-tr-md rounded-br-md
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                `,
+            none: `
+                    rounded-tr-none rounded-br-none
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                `,
+            small: `
+                    rounded-tr-sm rounded-br-sm
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                `
+        }
+    }
+});
+const numericTextboxButtonVariants = cva(`
+        h-full flex flex-col border-l border-input-border
+        overflow-y-hidden
+        [&>button]:flex-1
+        [&>button]:flex
+        [&>button]:items-center
+        [&>button]:p-0
+        [&>button]:rounded-none
+
+        [&>button]:first:rounded-tl-none
+        [&>button]:first:rounded-bl-none
+        [&>button]:first:rounded-br-none
+        [&>button]:first:h-1/2
+        [&>button]:last:rounded-tl-none
+        [&>button]:last:rounded-bl-none
+        [&>button]:last:rounded-tr-none
+        [&>button]:last:h-1/2
+    `, {
+    variants: {
+        size: {
+            large: "min-w-16 w-16",
+            medium: "min-w-10 w-10",
+            small: "min-w-8 w-8"
+        }
+    }
+});
+
+const numericTextboxThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return numericTextboxVariants;
+        default:
+            return numericTextboxVariants; // Default to Mona styles
+    }
+};
+const numericTextboxInputThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return numericTextboxInputVariants;
+        default:
+            return numericTextboxInputVariants; // Default to Mona styles
+    }
+};
+const numericTextboxButtonThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return numericTextboxButtonVariants;
+        default:
+            return numericTextboxButtonVariants; // Default to Mona styles
+    }
+};
+
+class NumericTextBoxComponent {
+    #destroyRef;
+    #focusMonitor;
+    #hostElementRef;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#focusMonitor = inject(FocusMonitor);
+        this.#hostElementRef = inject((ElementRef));
+        this.#themeService = inject(ThemeService);
+        this.beforeInput$ = new Subject();
+        this.classes = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            const classes = numericTextboxThemeVariants(theme)({ rounded, size });
+            const userClass = this.userClass();
+            return twMerge(classes, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.inputClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const hasPrefixTemplate = this.prefixTemplateList().length > 0;
+            const leftRounded = hasPrefixTemplate ? "none" : this.rounded();
+            const rightRounded = this.spinners() ? "none" : this.rounded();
+            const inputVariants = numericTextboxInputThemeVariants(theme)({ leftRounded, rightRounded });
+            return twMerge(inputVariants);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+        this.focused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        this.formattedValue = computed(() => {
+            if (this.focused() && !this.readonly()) {
+                return this.rawInputValue();
+            }
+            return this.formatValueForDisplay(this.value());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+        this.invalidInput = computed(() => this.invalid() || (this.required() && this.value() == null && this.touched()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidInput" }] : /* istanbul ignore next */ []));
+        this.keydown$ = new Subject();
+        this.rawInputValue = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rawInputValue" }] : /* istanbul ignore next */ []));
+        this.spinButtonClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const size = this.size();
+            return numericTextboxButtonThemeVariants(theme)({ size });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spinButtonClasses" }] : /* istanbul ignore next */ []));
+        this.spinButtonIconSize = computed(() => {
+            const size = this.size();
+            return size === "large" ? 20 : size === "medium" ? 16 : 14;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spinButtonIconSize" }] : /* istanbul ignore next */ []));
+        this.spin$ = new Subject();
+        this.spinStop$ = new Subject();
+        this.prefixTemplateList = contentChildren(NumericTextBoxPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.valueChange$ = new Subject();
+        this.valueTextBoxRef = viewChild.required("valueTextBox", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueTextBoxRef" }] : /* istanbul ignore next */ []));
+        this.wheel$ = new Subject();
+        /**
+         * @description ARIA label for the input.
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Number of decimals to show.
+         * @default 0
+         */
+        this.decimals = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the input is disabled.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Formats the value to be displayed in the input when the input is not focused.
+         */
+        this.formatter = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the inner input element is blurred.
+         */
+        this.inputBlur = output();
+        /**
+         * @description Emits when the inner input element is focused.
+         */
+        this.inputFocus = output();
+        /**
+         * @description Emits when the inner input element loses focus.
+         */
+        this.inputFocusOut = output();
+        /**
+         * @description Maximum value that can be entered.
+         */
+        this.maxValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Minimum value that can be entered.
+         */
+        this.minValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the input can be empty.
+         */
+        this.nullable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nullable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the input is readonly.
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the input is required.
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the numeric text box as invalid. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the input.
+         */
+        this.rounded = input(`medium`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the size of the input.
+         */
+        this.size = input(`medium`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the spin buttons are visible.
+         */
+        this.spinners = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spinners" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Step value to increment or decrement the value.
+         */
+        this.step = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Tab index of the input.
+         */
+        this.tabindex = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the numeric text box is interacted with on blur, value change, or spinner update.
+         * The `FormField` directive listens to this to mark the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Sets the touched state of the numeric text box. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Two-way bindable current value of the numeric text box.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                this.setSubscriptions();
+                this.rawInputValue.set(this.formatValueForDisplay(this.value()));
+                this.#focusMonitor
+                    .monitor(this.#hostElementRef, true)
+                    .pipe(takeUntilDestroyed(this.#destroyRef))
+                    .subscribe((focusOrigin) => {
+                    const isFocused = focusOrigin !== null;
+                    this.focused.set(isFocused);
+                    if (isFocused && !this.readonly()) {
+                        const currentValue = this.value();
+                        const rawValue = currentValue?.toString() ?? "";
+                        this.rawInputValue.set(rawValue);
+                    }
+                });
+            }
+        });
+        this.#destroyRef.onDestroy(() => this.#focusMonitor.stopMonitoring(this.#hostElementRef.nativeElement));
+    }
+    static calculate(value, step, type) {
+        const precision = Math.max(NumericTextBoxComponent.getPrecision(value), NumericTextBoxComponent.getPrecision(step));
+        const factor = Math.pow(10, precision);
+        const signFactor = type === "+" ? 1 : -1;
+        const newValue = (value * factor + signFactor * step * factor) / factor;
+        return precision > 0 ? parseFloat(newValue.toFixed(precision)) : newValue;
+    }
+    static getPrecision(value) {
+        const valueString = value.toString();
+        if (valueString.includes(".")) {
+            const parts = valueString.split(".");
+            return parts[1].length;
+        }
+        return 0;
+    }
+    static isNumeric(value) {
+        if (value === "" || value === "-") {
+            return true;
+        }
+        return ((typeof value === "number" || (typeof value === "string" && value.trim() !== "")) && !isNaN(value));
+    }
+    decrease() {
+        const value = this.value();
+        if (value == null) {
+            this.applyRawValue("0");
+        }
+        else {
+            let result = NumericTextBoxComponent.calculate(value, this.step(), "-");
+            const min = this.minValue();
+            if (min != null && result < min) {
+                result = min;
+            }
+            this.applyRawValue(result.toString());
+        }
+        this.focus();
+    }
+    focus() {
+        this.#focusMonitor.focusVia(this.valueTextBoxRef(), "keyboard");
+        rxTimeout(this.#destroyRef, () => {
+            this.valueTextBoxRef().nativeElement.scrollLeft = this.valueTextBoxRef().nativeElement.scrollWidth;
+        });
+    }
+    increase() {
+        const value = this.value();
+        if (value == null) {
+            this.applyRawValue("0");
+        }
+        else {
+            let result = NumericTextBoxComponent.calculate(value, this.step(), "+");
+            const max = this.maxValue();
+            if (max != null && result > max) {
+                result = max;
+            }
+            this.applyRawValue(result.toString());
+        }
+        this.focus();
+    }
+    onBlur(event) {
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget && this.#hostElementRef.nativeElement.contains(relatedTarget)) {
+            return;
+        }
+        const corrected = this.correctValue();
+        if (!corrected) {
+            this.touch.emit();
+        }
+        this.rawInputValue.set(this.formatValueForDisplay(this.value()));
+        this.inputBlur.emit(event);
+    }
+    correctValue() {
+        const value = this.value();
+        const min = this.minValue();
+        const max = this.maxValue();
+        if (value == null) {
+            if (this.nullable()) {
+                this.applyRawValue("");
+            }
+            else if (min != null) {
+                this.applyRawValue(min.toString());
+            }
+            else {
+                this.applyRawValue("0");
+            }
+            return true;
+        }
+        if (min != null && value < min) {
+            this.applyRawValue(min.toString());
+            return true;
+        }
+        if (max != null && value > max) {
+            this.applyRawValue(max.toString());
+            return true;
+        }
+        return false;
+    }
+    formatValueForDisplay(value) {
+        if (value == null) {
+            return "";
+        }
+        const formatter = this.formatter();
+        if (formatter) {
+            return formatter(value);
+        }
+        const decimals = this.decimals();
+        if (decimals > 0) {
+            return value.toFixed(decimals);
+        }
+        return value.toString();
+    }
+    applyRawValue(text) {
+        this.rawInputValue.set(text);
+        this.valueChange$.next(text);
+    }
+    setBeforeInputSubscription() {
+        this.beforeInput$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((event) => {
+            const inputElement = event.target;
+            const insertedText = event.data;
+            if (insertedText == null) {
+                return;
+            }
+            const { value, selectionStart, selectionEnd } = inputElement;
+            if (selectionStart == null || selectionEnd == null) {
+                return;
+            }
+            const proposedValue = value.slice(0, selectionStart) + insertedText + value.slice(selectionEnd);
+            if (proposedValue.lastIndexOf("-") > 0) {
+                event.preventDefault();
+                return;
+            }
+            if ((proposedValue.match(/\./g) || []).length > 1) {
+                event.preventDefault();
+                return;
+            }
+            if (this.decimals() === 0 && proposedValue.includes(".")) {
+                event.preventDefault();
+                return;
+            }
+            if (proposedValue.includes(".")) {
+                const decimalPart = proposedValue.split(".")[1];
+                if (decimalPart && decimalPart.length > this.decimals()) {
+                    event.preventDefault();
+                    return;
+                }
+            }
+            const numericRegex = new RegExp(`^-?\\d*\\.?\\d{0,${this.decimals()}}$`);
+            if (!numericRegex.test(proposedValue)) {
+                event.preventDefault();
+            }
+        });
+    }
+    setInputFocusSubscription() {
+        this.inputFocus.subscribe(() => this.#hostElementRef.nativeElement.focus());
+    }
+    setKeydownSubscription() {
+        this.keydown$
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => !this.readonly() && !this.disabled()))
+            .subscribe((event) => {
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                this.increase();
+                return;
+            }
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                this.decrease();
+            }
+        });
+    }
+    setSpinSubscription() {
+        this.spin$
+            .pipe(filter(() => !this.readonly() && !this.disabled()), switchMap(sign => of(sign).pipe(tap(sign => (sign === "-" ? this.decrease() : this.increase())), delay(300), concatMap(() => timer(0, 30).pipe(tap(() => (sign === "-" ? this.decrease() : this.increase())), takeUntil(this.spinStop$))), takeUntil(this.spinStop$))), takeUntilDestroyed(this.#destroyRef))
+            .subscribe();
+    }
+    setSubscriptions() {
+        this.setValueChangeSubscription();
+        this.setKeydownSubscription();
+        this.setSpinSubscription();
+        this.setWheelSubscription();
+        this.setInputFocusSubscription();
+        this.setBeforeInputSubscription();
+    }
+    setValueChangeSubscription() {
+        this.valueChange$
+            .pipe(takeUntilDestroyed(this.#destroyRef), distinctUntilChanged(), map(v => this.parseValue(v)))
+            .subscribe(value => {
+            this.value.set(value);
+            this.touch.emit();
+        });
+    }
+    setWheelSubscription() {
+        this.wheel$
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => !this.readonly() && !this.disabled()))
+            .subscribe((event) => {
+            event.preventDefault();
+            if (event.deltaY < 0) {
+                this.increase();
+            }
+            else {
+                this.decrease();
+            }
+        });
+    }
+    parseValue(value) {
+        const normalizedValue = value == null ? "" : value;
+        this.rawInputValue.set(normalizedValue);
+        if (normalizedValue === "" || normalizedValue === "-") {
+            return null;
+        }
+        const sanitizedValue = normalizedValue.replace(/,/g, "");
+        if (!NumericTextBoxComponent.isNumeric(sanitizedValue)) {
+            return this.value();
+        }
+        return parseFloat(sanitizedValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-none flex-wrap h-full overflow-hidden border-none\">\r\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n<input\r\n    monaTextBox\r\n    [disabled]=\"disabled()\"\r\n    [required]=\"required()\"\r\n    [type]=\"'text'\"\r\n    inputmode=\"numeric\"\r\n    [readonly]=\"readonly()\"\r\n    [tabIndex]=\"tabindex()\"\r\n    [ngModel]=\"formattedValue()\"\r\n    (ngModelChange)=\"applyRawValue($event)\"\r\n    (keydown)=\"keydown$.next($event)\"\r\n    (focus)=\"inputFocus.emit($event)\"\r\n    (focusout)=\"inputFocusOut.emit($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (beforeinput)=\"beforeInput$.next($event)\"\r\n    (wheel)=\"wheel$.next($event)\"\r\n    [size]=\"size()\"\r\n    [class]=\"inputClasses()\"\r\n    autocomplete=\"off\"\r\n    role=\"spinbutton\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-invalid]=\"invalidInput() || null\"\r\n    [attr.aria-readonly]=\"readonly()\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    [attr.aria-valuenow]=\"value()\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuetext]=\"formattedValue()\"\r\n    [attr.data-spinners]=\"spinners()\"\r\n    #valueTextBox />\r\n@if (spinners()) {\r\n    <div [class]=\"spinButtonClasses()\">\r\n        <button\r\n            monaButton\r\n            [disabled]=\"disabled()\"\r\n            [tabindex]=\"-1\"\r\n            look=\"secondary\"\r\n            [size]=\"size()\"\r\n            (mousedown)=\"$event.preventDefault()\"\r\n            (pointerdown)=\"spin$.next('+')\"\r\n            (pointerup)=\"spinStop$.next()\"\r\n            (pointerleave)=\"spinStop$.next()\"\r\n            aria-label=\"Increase value\">\r\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\r\n        </button>\r\n        <button\r\n            monaButton\r\n            [disabled]=\"disabled()\"\r\n            [tabindex]=\"-1\"\r\n            look=\"secondary\"\r\n            [size]=\"size()\"\r\n            (mousedown)=\"$event.preventDefault()\"\r\n            (pointerdown)=\"spin$.next('-')\"\r\n            (pointerup)=\"spinStop$.next()\"\r\n            (pointerleave)=\"spinStop$.next()\"\r\n            aria-label=\"Decrease value\">\r\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\r\n        </button>\r\n    </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-numeric-text-box", imports: [NgTemplateOutlet, TextBoxDirective, FormsModule, ButtonDirective, LucideChevronUp, LucideChevronDown], host: {
+                        "[class]": "classes()",
+                        "[attr.data-disabled]": "disabled() || null",
+                        "[attr.data-invalid]": "invalidInput() || null",
+                        "[attr.data-readonly]": "readonly() || null",
+                        "[attr.data-required]": "required() || null"
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-none flex-wrap h-full overflow-hidden border-none\">\r\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n<input\r\n    monaTextBox\r\n    [disabled]=\"disabled()\"\r\n    [required]=\"required()\"\r\n    [type]=\"'text'\"\r\n    inputmode=\"numeric\"\r\n    [readonly]=\"readonly()\"\r\n    [tabIndex]=\"tabindex()\"\r\n    [ngModel]=\"formattedValue()\"\r\n    (ngModelChange)=\"applyRawValue($event)\"\r\n    (keydown)=\"keydown$.next($event)\"\r\n    (focus)=\"inputFocus.emit($event)\"\r\n    (focusout)=\"inputFocusOut.emit($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (beforeinput)=\"beforeInput$.next($event)\"\r\n    (wheel)=\"wheel$.next($event)\"\r\n    [size]=\"size()\"\r\n    [class]=\"inputClasses()\"\r\n    autocomplete=\"off\"\r\n    role=\"spinbutton\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-invalid]=\"invalidInput() || null\"\r\n    [attr.aria-readonly]=\"readonly()\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    [attr.aria-valuenow]=\"value()\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuetext]=\"formattedValue()\"\r\n    [attr.data-spinners]=\"spinners()\"\r\n    #valueTextBox />\r\n@if (spinners()) {\r\n    <div [class]=\"spinButtonClasses()\">\r\n        <button\r\n            monaButton\r\n            [disabled]=\"disabled()\"\r\n            [tabindex]=\"-1\"\r\n            look=\"secondary\"\r\n            [size]=\"size()\"\r\n            (mousedown)=\"$event.preventDefault()\"\r\n            (pointerdown)=\"spin$.next('+')\"\r\n            (pointerup)=\"spinStop$.next()\"\r\n            (pointerleave)=\"spinStop$.next()\"\r\n            aria-label=\"Increase value\">\r\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\r\n        </button>\r\n        <button\r\n            monaButton\r\n            [disabled]=\"disabled()\"\r\n            [tabindex]=\"-1\"\r\n            look=\"secondary\"\r\n            [size]=\"size()\"\r\n            (mousedown)=\"$event.preventDefault()\"\r\n            (pointerdown)=\"spin$.next('-')\"\r\n            (pointerup)=\"spinStop$.next()\"\r\n            (pointerleave)=\"spinStop$.next()\"\r\n            aria-label=\"Decrease value\">\r\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\r\n        </button>\r\n    </div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NumericTextBoxPrefixTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], valueTextBoxRef: [{ type: i0.ViewChild, args: ["valueTextBox", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputFocusOut: [{ type: i0.Output, args: ["inputFocusOut"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spinners: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinners", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/numeric-text-box
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-numeric-text-box.mjs.map