@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -7,8 +7,7 @@ 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 { themeControlSurfaceClasses, rxTimeout } from '@nanahoshi/mona-ui/internal';
 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';
@@ -26,26 +25,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-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
+const numericTextboxThemeVariants = cva(`
+        flex w-full min-w-0 items-center
+        overflow-hidden p-0
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control)
+        outline-none
+        selection:bg-primary selection:text-primary-foreground
+        transition-[color,box-shadow,border] duration-300 ease-in-out
+        placeholder:text-muted-foreground
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:border-disabled-border
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
+        data-[disabled='true']:shadow-none
+        data-[readonly='true']:cursor-default
+
+        focus-within:border-focus-indicator
+        focus-within:ring-2 focus-within:ring-focus-indicator/35
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-within:border-error
+        data-[invalid='true']:focus-within:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -62,132 +66,103 @@ const numericTextboxVariants = cva(`
         }
     }
 });
-const numericTextboxInputVariants = cva(`
-        border-0 outline-none ring-0
-        h-full w-full
-        focus-visible:ring-0 shadow-none
-        rounded-none
+const numericTextboxInputThemeVariants = cva(`
+        h-full w-full
+        bg-transparent
+        border-0 shadow-none
+        rounded-none
+        outline-none ring-0
+        focus-visible:border-transparent focus-visible:ring-0
     `, {
     variants: {
         leftRounded: {
-            full: `
-                    rounded-tl-full rounded-bl-full
+            full: `
+                    rounded-tl-full rounded-bl-full
                 `,
-            large: `
-                    rounded-tl-lg rounded-bl-lg
+            large: `
+                    rounded-tl-lg rounded-bl-lg
                 `,
-            medium: `
-                    rounded-tl-md rounded-bl-md
+            medium: `
+                    rounded-tl-md rounded-bl-md
                 `,
-            none: `
-                    rounded-tl-none rounded-bl-none
+            none: `
+                    rounded-tl-none rounded-bl-none
                 `,
-            small: `
-                    rounded-tl-sm rounded-bl-sm
+            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
+            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
+            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
+            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
+            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
+            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
+const numericTextboxButtonThemeVariants = cva(`
+        flex h-full flex-col
+        overflow-y-hidden
+        border-s border-border-subtle
+
+        [&>button]:flex [&>button]:flex-1 [&>button]:items-center
+        [&>button]:rounded-none [&>button]:p-0
+        [&>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"
+            large: "w-16 min-w-16",
+            medium: "w-10 min-w-10",
+            small: "w-8 min-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 classes = numericTextboxThemeVariants({ 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 });
+            const inputVariants = numericTextboxInputThemeVariants({ leftRounded, rightRounded });
             return twMerge(inputVariants);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
@@ -206,9 +181,8 @@ class NumericTextBoxComponent {
         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 });
+            return numericTextboxButtonThemeVariants({ size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "spinButtonClasses" }] : /* istanbul ignore next */ []));
         this.spinButtonIconSize = computed(() => {
@@ -570,7 +544,7 @@ class NumericTextBoxComponent {
         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]" }] }); }
+    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) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\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,
@@ -580,7 +554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[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" }]
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\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"] }] } });