@besaitech/ng-design-system 0.0.41 → 0.0.42

package/fesm2022/besaitech-ng-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, numberAttribute, viewChildren, afterRenderEffect, viewChild, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -48,6 +48,11 @@ const SDS_ICONS = {
     'chevron-right': '<path d="m9 18 6-6-6-6"/>',
     'chevron-left': '<path d="m15 18-6-6 6-6"/>',
     'chevron-down': '<path d="m6 9 6 6 6-6"/>',
+    // Stepper glyphs for sds-input-number: chevrons for the stacked spinner, plus/minus for the
+    // horizontal/vertical layouts.
+    'chevron-up': '<path d="m18 15-6-6-6 6"/>',
+    plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+    minus: '<path d="M5 12h14"/>',
     'chevrons-left': '<path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/>',
     'chevrons-right': '<path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/>',
     x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
@@ -267,7 +272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".sds-spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;animation:sds-spin .6s linear infinite}@keyframes sds-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let nextId$c = 0;
+let nextId$d = 0;
 const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -280,7 +285,7 @@ const SIZES$a = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$c++}`;
+    inputId = `sds-input-${nextId$d++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -601,6 +606,736 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
+let nextId$c = 0;
+const HEIGHTS = {
+    sm: 'h-9',
+    md: 'h-10',
+    lg: 'h-12',
+};
+const TEXT = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base',
+};
+/**
+ * Numeric input with locale-aware formatting, optional currency, prefix/suffix affixes, min/max/step
+ * boundaries and spinner buttons — the design-system counterpart of PrimeNG's `InputNumber`.
+ *
+ * The value is a `number | null` bound through ControlValueAccessor, so it works with reactive forms
+ * or `[(ngModel)]`: `<sds-input-number [(ngModel)]="amount" mode="currency" currency="EUR" />`.
+ *
+ * The field formats **live as you type**: the currency symbol, grouping separators and prefix/suffix
+ * stay visible on every keystroke, and the caret is kept where it belongs. The value is clamped to
+ * {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
+ */
+class SdsInputNumber {
+    inputId = `sds-input-number-${nextId$c++}`;
+    fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name used when no visible [label] is provided. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** `filled` is a borderless field on a muted ground; `default` is the bordered white field. */
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Read-only: the value is shown and selectable but cannot be typed or stepped. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    // --- Formatting -----------------------------------------------------------
+    mode = input('decimal', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** BCP 47 locale for grouping/decimal symbols (e.g. `fr-FR`). Empty follows the runtime locale. */
+    locale = input('', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /** ISO 4217 code, required when {@link mode} is `currency` (e.g. `EUR`, `USD`). */
+    currency = input('', ...(ngDevMode ? [{ debugName: "currency" }] : []));
+    currencyDisplay = input('symbol', ...(ngDevMode ? [{ debugName: "currencyDisplay" }] : []));
+    /** Thousands/grouping separators. */
+    useGrouping = input(true, ...(ngDevMode ? [{ debugName: "useGrouping", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    minFractionDigits = input(null, ...(ngDevMode ? [{ debugName: "minFractionDigits" }] : []));
+    maxFractionDigits = input(null, ...(ngDevMode ? [{ debugName: "maxFractionDigits" }] : []));
+    /** Text shown before the value (e.g. `↑ `). */
+    prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
+    /** Text shown after the value (e.g. ` kg`, `%`). */
+    suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
+    // --- Boundaries & spinner -------------------------------------------------
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Show the increment/decrement spinner buttons. */
+    showButtons = input(false, ...(ngDevMode ? [{ debugName: "showButtons", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    buttonLayout = input('stacked', ...(ngDevMode ? [{ debugName: "buttonLayout" }] : []));
+    /** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
+    incrementIcon = input(null, ...(ngDevMode ? [{ debugName: "incrementIcon" }] : []));
+    /** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
+    decrementIcon = input(null, ...(ngDevMode ? [{ debugName: "decrementIcon" }] : []));
+    /** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
+    allowEmpty = input(true, ...(ngDevMode ? [{ debugName: "allowEmpty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Accessible names for the icon-only controls. French defaults so existing consumers are unchanged;
+     * translate them in a multi-language app.
+     */
+    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    incrementLabel = input('Augmenter', ...(ngDevMode ? [{ debugName: "incrementLabel" }] : []));
+    decrementLabel = input('Diminuer', ...(ngDevMode ? [{ debugName: "decrementLabel" }] : []));
+    /** The committed numeric value (driven by CVA + user input). */
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    describedBy = computed(() => {
+        if (this.error())
+            return `${this.inputId}-err`;
+        if (this.hint())
+            return `${this.inputId}-hint`;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    clearVisible = computed(() => this.clearable() && this.value() !== null && !this.isDisabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "clearVisible" }] : []));
+    incrementIconName = computed(() => this.incrementIcon() ?? (this.buttonLayout() === 'stacked' ? 'chevron-up' : 'plus'), ...(ngDevMode ? [{ debugName: "incrementIconName" }] : []));
+    decrementIconName = computed(() => this.decrementIcon() ?? (this.buttonLayout() === 'stacked' ? 'chevron-down' : 'minus'), ...(ngDevMode ? [{ debugName: "decrementIconName" }] : []));
+    canIncrement = computed(() => {
+        if (this.isDisabled() || this.readonly())
+            return false;
+        const max = this.max();
+        return max === null || (this.value() ?? this.min() ?? 0) < max;
+    }, ...(ngDevMode ? [{ debugName: "canIncrement" }] : []));
+    canDecrement = computed(() => {
+        if (this.isDisabled() || this.readonly())
+            return false;
+        const min = this.min();
+        return min === null || (this.value() ?? min ?? 0) > min;
+    }, ...(ngDevMode ? [{ debugName: "canDecrement" }] : []));
+    /** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
+    separators = computed(() => {
+        const sample = new Intl.NumberFormat(this.locale() || undefined, {
+            useGrouping: true,
+        }).formatToParts(1234567.8);
+        return {
+            group: sample.find((p) => p.type === 'group')?.value ?? ',',
+            decimal: sample.find((p) => p.type === 'decimal')?.value ?? '.',
+        };
+    }, ...(ngDevMode ? [{ debugName: "separators" }] : []));
+    /** Base Intl options (style/currency/grouping) without any fraction-digit constraints. */
+    baseOptions() {
+        const opts = { useGrouping: this.useGrouping() };
+        if (this.mode() === 'currency') {
+            opts.style = 'currency';
+            opts.currency = this.currency() || 'USD';
+            opts.currencyDisplay = this.currencyDisplay();
+        }
+        else {
+            opts.style = 'decimal';
+        }
+        return opts;
+    }
+    committedOptions = computed(() => {
+        const opts = this.baseOptions();
+        const min = this.minFractionDigits();
+        const max = this.maxFractionDigits();
+        if (min !== null)
+            opts.minimumFractionDigits = min;
+        if (max !== null)
+            opts.maximumFractionDigits = min !== null ? Math.max(max, min) : max;
+        return opts;
+    }, ...(ngDevMode ? [{ debugName: "committedOptions" }] : []));
+    /** The most fraction digits the field will keep — the resolved Intl maximum (2 for USD, 0 for JPY…). */
+    maxFrac = computed(() => {
+        const fallback = this.maxFractionDigits() ?? (this.mode() === 'currency' ? 2 : 3);
+        try {
+            const resolved = new Intl.NumberFormat(this.locale() || undefined, this.committedOptions()).resolvedOptions().maximumFractionDigits;
+            return resolved ?? fallback;
+        }
+        catch {
+            return fallback;
+        }
+    }, ...(ngDevMode ? [{ debugName: "maxFrac" }] : []));
+    wrapperClasses = computed(() => {
+        const vertical = this.buttonLayout() === 'vertical' && this.showButtons();
+        const parts = [
+            'overflow-hidden rounded-control',
+            vertical ? 'flex flex-col' : `flex items-stretch ${HEIGHTS[this.size()]}`,
+        ];
+        if (this.isDisabled())
+            parts.push('opacity-60 cursor-not-allowed');
+        if (this.appearance() === 'filled') {
+            parts.push('border-transparent bg-muted text-ink');
+            parts.push(this.error()
+                ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
+                : 'focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        else {
+            parts.push('bg-white text-ink');
+            parts.push(this.error()
+                ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
+                : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    fieldCellClasses = computed(() => this.buttonLayout() === 'vertical' && this.showButtons() ? HEIGHTS[this.size()] : 'h-full', ...(ngDevMode ? [{ debugName: "fieldCellClasses" }] : []));
+    inputClasses = computed(() => {
+        const parts = [TEXT[this.size()], 'pl-3.5', this.clearVisible() ? 'pr-9' : 'pr-3.5'];
+        if (this.showButtons() && this.buttonLayout() !== 'stacked')
+            parts.push('text-center');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    buttonBase = 'inline-flex shrink-0 items-center justify-center text-ink-soft transition-colors ' +
+        'hover:bg-muted hover:text-ink disabled:cursor-not-allowed disabled:opacity-40 select-none';
+    edgeButtonClasses = computed(() => this.buttonLayout() === 'vertical'
+        ? `${this.buttonBase} ${HEIGHTS[this.size()]} border-border`
+        : `${this.buttonBase} w-10 border-border`, ...(ngDevMode ? [{ debugName: "edgeButtonClasses" }] : []));
+    stackedButtonClasses = computed(() => this.buttonBase, ...(ngDevMode ? [{ debugName: "stackedButtonClasses" }] : []));
+    constructor() {
+        // Reflect the committed value into the field whenever it — or a formatting input — changes from
+        // OUTSIDE typing (initial render, writeValue, a spin while blurred, a currency/locale switch).
+        // While the field is the active element the input handler owns the DOM value and its caret, so this
+        // stands down: gating on the live `document.activeElement` (not a signal) is immune to focus-event
+        // timing, which is what makes live formatting safe.
+        effect(() => {
+            const el = this.fieldRef()?.nativeElement;
+            const v = this.value();
+            // Touch the formatting inputs so a currency/locale/affix change repaints a blurred field.
+            this.committedOptions();
+            this.prefix();
+            this.suffix();
+            if (!el || this.isActive(el))
+                return;
+            el.value = v === null ? '' : this.format(v);
+        });
+    }
+    isActive(el) {
+        return typeof document !== 'undefined' && document.activeElement === el;
+    }
+    /** Paint the committed value into the field imperatively (used by spin/clear/blur). */
+    paintCommitted() {
+        const el = this.fieldRef()?.nativeElement;
+        if (!el)
+            return;
+        const v = this.value();
+        el.value = v === null ? '' : this.format(v);
+    }
+    // --- Formatting / parsing helpers -----------------------------------------
+    /** Format a committed value with the configured min/max fraction digits (used at rest and on blur). */
+    format(n) {
+        try {
+            const body = new Intl.NumberFormat(this.locale() || undefined, this.committedOptions()).format(n);
+            return `${this.prefix()}${body}${this.suffix()}`;
+        }
+        catch {
+            return `${this.prefix()}${n}${this.suffix()}`;
+        }
+    }
+    /**
+     * Format a partially-typed value, keeping exactly the fraction digits the user has entered (so
+     * trailing zeros and a lone decimal separator survive) while still grouping the integer part and
+     * showing the currency symbol / affixes.
+     */
+    formatLive(p) {
+        const locale = this.locale() || undefined;
+        const fracCount = p.fracDigits.length;
+        const num = this.toNumber(p) ?? 0;
+        if (fracCount > 0 || !p.hadDecimal) {
+            try {
+                const body = new Intl.NumberFormat(locale, {
+                    ...this.baseOptions(),
+                    minimumFractionDigits: fracCount,
+                    maximumFractionDigits: fracCount,
+                }).format(num);
+                return `${this.prefix()}${body}${this.suffix()}`;
+            }
+            catch {
+                return `${this.prefix()}${num}${this.suffix()}`;
+            }
+        }
+        // A lone decimal separator was just typed ("1234,"): format the integer, then splice the separator
+        // in right after the integer digits — which, for a trailing-symbol currency, is NOT the string end.
+        const dec = this.separators().decimal;
+        let out = '';
+        let inserted = false;
+        try {
+            const parts = new Intl.NumberFormat(locale, {
+                ...this.baseOptions(),
+                maximumFractionDigits: 0,
+            }).formatToParts(num);
+            parts.forEach((part, i) => {
+                out += part.value;
+                const here = part.type === 'integer' || part.type === 'group';
+                const next = parts[i + 1];
+                const nextHere = next && (next.type === 'integer' || next.type === 'group');
+                if (here && !nextHere && !inserted) {
+                    out += dec;
+                    inserted = true;
+                }
+            });
+        }
+        catch {
+            out = `${num}${dec}`;
+            inserted = true;
+        }
+        if (!inserted)
+            out += dec;
+        return `${this.prefix()}${out}${this.suffix()}`;
+    }
+    toNumber(p) {
+        const s = `${p.negative ? '-' : ''}${p.intDigits || '0'}${p.fracDigits ? '.' + p.fracDigits : ''}`;
+        const n = Number(s);
+        return Number.isFinite(n) ? n : null;
+    }
+    /** Pull the sign / integer / fraction fragments out of a formatted, partially-typed string. */
+    parseInput(raw) {
+        const { group, decimal } = this.separators();
+        let t = raw;
+        const prefix = this.prefix();
+        const suffix = this.suffix();
+        if (prefix && t.startsWith(prefix))
+            t = t.slice(prefix.length);
+        if (suffix && t.endsWith(suffix))
+            t = t.slice(0, t.length - suffix.length);
+        if (group)
+            t = t.split(group).join('');
+        if (decimal && decimal !== '.')
+            t = t.split(decimal).join('.');
+        t = t.replace(/[^0-9.\-]/g, '');
+        const negative = t.includes('-');
+        t = t.replace(/-/g, '');
+        const dot = t.indexOf('.');
+        const hadDecimal = dot !== -1 && this.maxFrac() > 0;
+        let intDigits = (hadDecimal ? t.slice(0, dot) : t.replace(/\./g, '')).replace(/\D/g, '');
+        let fracDigits = hadDecimal ? t.slice(dot + 1).replace(/\D/g, '') : '';
+        // Strip a leading run of zeros ("007" -> "7") but keep a lone "0".
+        intDigits = intDigits.replace(/^0+(?=\d)/, '');
+        fracDigits = fracDigits.slice(0, this.maxFrac());
+        return { negative, intDigits, fracDigits, hadDecimal };
+    }
+    /** Characters that "carry meaning" for caret placement (digits, minus, the decimal separator). */
+    isSignificant(ch) {
+        return (ch >= '0' && ch <= '9') || ch === '-' || ch === this.separators().decimal;
+    }
+    significantBefore(s, upto) {
+        let n = 0;
+        for (let i = 0; i < upto && i < s.length; i++)
+            if (this.isSignificant(s[i]))
+                n++;
+        return n;
+    }
+    /** The caret index in `formatted` that sits just after `target` significant characters. */
+    caretAfter(formatted, target) {
+        if (target <= 0) {
+            for (let i = 0; i < formatted.length; i++)
+                if (this.isSignificant(formatted[i]))
+                    return i;
+            return formatted.length;
+        }
+        let n = 0;
+        for (let i = 0; i < formatted.length; i++) {
+            if (this.isSignificant(formatted[i]) && ++n === target)
+                return i + 1;
+        }
+        return formatted.length;
+    }
+    clamp(n) {
+        const min = this.min();
+        const max = this.max();
+        if (min !== null && n < min)
+            n = min;
+        if (max !== null && n > max)
+            n = max;
+        return n;
+    }
+    /** Trim binary-float drift (0.1 + 0.2) back to a clean decimal. */
+    tidy(n) {
+        return Math.round(n * 1e10) / 1e10;
+    }
+    // --- Interaction ----------------------------------------------------------
+    onInput(event) {
+        const el = event.target;
+        const raw = el.value;
+        const caret = el.selectionStart ?? raw.length;
+        const target = this.significantBefore(raw, caret);
+        const parsed = this.parseInput(raw);
+        if (parsed.intDigits === '' && parsed.fracDigits === '' && !parsed.hadDecimal) {
+            // Nothing numeric left — allow a lone "-" mid-entry, otherwise empty.
+            const text = parsed.negative ? '-' : '';
+            el.value = text;
+            el.setSelectionRange(text.length, text.length);
+            this.value.set(null);
+            this.onChange(null);
+            return;
+        }
+        const num = this.toNumber(parsed);
+        const formatted = this.formatLive(parsed);
+        el.value = formatted;
+        const next = this.caretAfter(formatted, target);
+        el.setSelectionRange(next, next);
+        this.value.set(num);
+        this.onChange(num);
+    }
+    onKeydown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.spin(1);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.spin(-1);
+        }
+    }
+    onBlur() {
+        let v = this.value();
+        if (v === null && !this.allowEmpty())
+            v = this.min() ?? 0;
+        if (v !== null)
+            v = this.clamp(this.tidy(v));
+        // Re-render through the committed formatter (applies min-fraction padding + clamping).
+        this.value.set(v);
+        this.paintCommitted();
+        this.onChange(v);
+        this.onTouched();
+    }
+    spin(direction) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const base = this.value() ?? this.min() ?? 0;
+        const nextValue = this.clamp(this.tidy(base + direction * this.step()));
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+        this.onTouched();
+        // Paint the stepped value ourselves — the effect stands down while the field is focused.
+        const el = this.fieldRef()?.nativeElement;
+        if (el) {
+            const text = this.format(nextValue);
+            el.value = text;
+            if (this.isActive(el))
+                el.setSelectionRange(text.length, text.length);
+        }
+    }
+    clear() {
+        this.value.set(null);
+        this.onChange(null);
+        this.onTouched();
+        const el = this.fieldRef()?.nativeElement;
+        if (el)
+            el.value = '';
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(typeof value === 'number' && Number.isFinite(value) ? value : null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInputNumber, isStandalone: true, selector: "sds-input-number", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, useGrouping: { classPropertyName: "useGrouping", publicName: "useGrouping", isSignal: true, isRequired: false, transformFunction: null }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, buttonLayout: { classPropertyName: "buttonLayout", publicName: "buttonLayout", isSignal: true, isRequired: false, transformFunction: null }, incrementIcon: { classPropertyName: "incrementIcon", publicName: "incrementIcon", isSignal: true, isRequired: false, transformFunction: null }, decrementIcon: { classPropertyName: "decrementIcon", publicName: "decrementIcon", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsInputNumber),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div class="relative border transition-colors" [class]="wrapperClasses()">
+      <!-- Horizontal: minus before the field. Vertical: plus above it. -->
+      @if (showButtons() && buttonLayout() === 'horizontal') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="decrementLabel()"
+          [disabled]="!canDecrement()"
+          class="border-r"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(-1)"
+        >
+          <sds-icon [name]="decrementIconName()" [size]="16" />
+        </button>
+      }
+      @if (showButtons() && buttonLayout() === 'vertical') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="incrementLabel()"
+          [disabled]="!canIncrement()"
+          class="w-full border-b"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(1)"
+        >
+          <sds-icon [name]="incrementIconName()" [size]="16" />
+        </button>
+      }
+
+      <div class="relative flex min-w-0 flex-1 items-center" [class]="fieldCellClasses()">
+        <input
+          #field
+          [id]="inputId"
+          type="text"
+          inputmode="decimal"
+          role="spinbutton"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-valuenow]="value()"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
+          class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+          [class]="inputClasses()"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+        />
+
+        @if (clearVisible()) {
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="clearLabel()"
+            class="absolute right-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:bg-black/5 hover:opacity-100"
+            (mousedown)="$event.preventDefault()"
+            (click)="clear()"
+          >
+            <sds-icon name="x" [size]="15" />
+          </button>
+        }
+      </div>
+
+      <!-- Horizontal: plus after the field. Vertical: minus below it. -->
+      @if (showButtons() && buttonLayout() === 'horizontal') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="incrementLabel()"
+          [disabled]="!canIncrement()"
+          class="border-l"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(1)"
+        >
+          <sds-icon [name]="incrementIconName()" [size]="16" />
+        </button>
+      }
+      @if (showButtons() && buttonLayout() === 'vertical') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="decrementLabel()"
+          [disabled]="!canDecrement()"
+          class="w-full border-t"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(-1)"
+        >
+          <sds-icon [name]="decrementIconName()" [size]="16" />
+        </button>
+      }
+
+      <!-- Stacked: a chevron column at the trailing edge. -->
+      @if (showButtons() && buttonLayout() === 'stacked') {
+        <div class="flex w-9 shrink-0 flex-col divide-y divide-border border-l border-border">
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="incrementLabel()"
+            [disabled]="!canIncrement()"
+            class="min-h-0 flex-1"
+            [class]="stackedButtonClasses()"
+            (mousedown)="$event.preventDefault()"
+            (click)="spin(1)"
+          >
+            <sds-icon [name]="incrementIconName()" [size]="14" />
+          </button>
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="decrementLabel()"
+            [disabled]="!canDecrement()"
+            class="min-h-0 flex-1"
+            [class]="stackedButtonClasses()"
+            (mousedown)="$event.preventDefault()"
+            (click)="spin(-1)"
+          >
+            <sds-icon [name]="decrementIconName()" [size]="14" />
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="inputId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="inputId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInputNumber, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-input-number',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsInputNumber),
+                            multi: true,
+                        },
+                    ],
+                    host: { class: 'block' },
+                    template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div class="relative border transition-colors" [class]="wrapperClasses()">
+      <!-- Horizontal: minus before the field. Vertical: plus above it. -->
+      @if (showButtons() && buttonLayout() === 'horizontal') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="decrementLabel()"
+          [disabled]="!canDecrement()"
+          class="border-r"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(-1)"
+        >
+          <sds-icon [name]="decrementIconName()" [size]="16" />
+        </button>
+      }
+      @if (showButtons() && buttonLayout() === 'vertical') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="incrementLabel()"
+          [disabled]="!canIncrement()"
+          class="w-full border-b"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(1)"
+        >
+          <sds-icon [name]="incrementIconName()" [size]="16" />
+        </button>
+      }
+
+      <div class="relative flex min-w-0 flex-1 items-center" [class]="fieldCellClasses()">
+        <input
+          #field
+          [id]="inputId"
+          type="text"
+          inputmode="decimal"
+          role="spinbutton"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-valuenow]="value()"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
+          class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+          [class]="inputClasses()"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+        />
+
+        @if (clearVisible()) {
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="clearLabel()"
+            class="absolute right-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:bg-black/5 hover:opacity-100"
+            (mousedown)="$event.preventDefault()"
+            (click)="clear()"
+          >
+            <sds-icon name="x" [size]="15" />
+          </button>
+        }
+      </div>
+
+      <!-- Horizontal: plus after the field. Vertical: minus below it. -->
+      @if (showButtons() && buttonLayout() === 'horizontal') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="incrementLabel()"
+          [disabled]="!canIncrement()"
+          class="border-l"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(1)"
+        >
+          <sds-icon [name]="incrementIconName()" [size]="16" />
+        </button>
+      }
+      @if (showButtons() && buttonLayout() === 'vertical') {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="decrementLabel()"
+          [disabled]="!canDecrement()"
+          class="w-full border-t"
+          [class]="edgeButtonClasses()"
+          (mousedown)="$event.preventDefault()"
+          (click)="spin(-1)"
+        >
+          <sds-icon [name]="decrementIconName()" [size]="16" />
+        </button>
+      }
+
+      <!-- Stacked: a chevron column at the trailing edge. -->
+      @if (showButtons() && buttonLayout() === 'stacked') {
+        <div class="flex w-9 shrink-0 flex-col divide-y divide-border border-l border-border">
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="incrementLabel()"
+            [disabled]="!canIncrement()"
+            class="min-h-0 flex-1"
+            [class]="stackedButtonClasses()"
+            (mousedown)="$event.preventDefault()"
+            (click)="spin(1)"
+          >
+            <sds-icon [name]="incrementIconName()" [size]="14" />
+          </button>
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="decrementLabel()"
+            [disabled]="!canDecrement()"
+            class="min-h-0 flex-1"
+            [class]="stackedButtonClasses()"
+            (mousedown)="$event.preventDefault()"
+            (click)="spin(-1)"
+          >
+            <sds-icon [name]="decrementIconName()" [size]="14" />
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="inputId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="inputId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
+
 let nextId$b = 0;
 const SIZES$9 = {
     sm: 'min-h-9 text-sm',
@@ -8640,5 +9375,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsLocalizedInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLocalizedInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map