codexly-ui 0.14.2 → 0.14.4

package/fesm2022/codexly-ui.mjs

@@ -4505,6 +4505,12 @@ class ClxNumberComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     // ── Internal state ───────────────────────────────────────────────────────
     _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    /** What the native input actually shows while the user is typing — kept separate from _value so
+     *  a trailing "." or "," (valid mid-edit, not yet a complete number) isn't stomped by re-rendering
+     *  the parsed numeric value on every keystroke; see _handleInput's own comment. Resynced from
+     *  _value only on programmatic changes (writeValue, the value() input, +/-, blur), never while the
+     *  user is actively typing a valid partial number. */
+    _displayText = signal('0', ...(ngDevMode ? [{ debugName: "_displayText" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _cvaConnected = false;
@@ -4512,7 +4518,7 @@ class ClxNumberComponent {
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
-            untracked(() => this._value.set(v));
+            untracked(() => { this._value.set(v); this._displayText.set(String(v)); });
     }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     _onTouched = () => { };
@@ -4557,6 +4563,7 @@ class ClxNumberComponent {
     writeValue(val) {
         this._cvaConnected = true;
         this._value.set(val ?? 0);
+        this._displayText.set(String(val ?? 0));
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -4568,9 +4575,44 @@ class ClxNumberComponent {
         this._cvaDisabled.set(disabled);
     }
     // ── Handlers ─────────────────────────────────────────────────────────────
+    /** Allows only digits, a single decimal separator (. or ,) and a leading minus — anything else
+     *  typed (letters, a second dot, a stray minus mid-string) is dropped. This is the type="text"
+     *  replacement for the browser's own type="number" filtering, needed because the native one keys
+     *  off the BROWSER's locale for which decimal separator it accepts and silently rejects the other,
+     *  blocking that key outright for users whose input doesn't match. */
+    _sanitizeTyped(raw) {
+        let out = '';
+        let seenDot = false;
+        for (let i = 0; i < raw.length; i++) {
+            const ch = raw[i];
+            if (ch === '-' && i === 0) {
+                out += ch;
+                continue;
+            }
+            if ((ch === '.' || ch === ',') && !seenDot) {
+                seenDot = true;
+                out += '.';
+                continue;
+            }
+            if (ch >= '0' && ch <= '9') {
+                out += ch;
+            }
+        }
+        return out;
+    }
     _handleInput(event) {
-        const raw = event.target.value;
-        const num = raw === '' ? 0 : parseFloat(raw);
+        const input = event.target;
+        const sanitized = this._sanitizeTyped(input.value);
+        if (sanitized !== input.value)
+            input.value = sanitized;
+        this._displayText.set(sanitized);
+        // A bare "-", "." or a trailing "." (e.g. "2.") is a valid mid-edit state but not yet a
+        // complete number — don't push it through onChange/clamping until it parses, and don't touch
+        // _value (which would re-render _displayText via nothing, since nothing reads _value for the
+        // input anymore, but would desync the two if left stale).
+        if (sanitized === '' || sanitized === '-' || sanitized.endsWith('.'))
+            return;
+        const num = parseFloat(sanitized);
         if (isNaN(num))
             return;
         let clamped = num;
@@ -4580,20 +4622,23 @@ class ClxNumberComponent {
             clamped = Math.min(clamped, this.max());
         this._value.set(clamped);
         this._onChange(clamped);
-        // Reflect the clamp back into the native input immediately — otherwise the DOM would keep
-        // showing the raw out-of-range digits the user typed until blur re-renders the value.
+        // Reflect the clamp back into both the native input and _displayText immediately — otherwise
+        // the DOM would keep showing the raw out-of-range digits the user typed until blur.
         if (clamped !== num) {
-            event.target.value = String(clamped);
+            input.value = String(clamped);
+            this._displayText.set(String(clamped));
         }
     }
     _handleBlur() {
-        // Clamp to min/max on blur
+        // Clamp to min/max on blur, and resolve any incomplete typed state (trailing ".", bare "-")
+        // back to the last valid numeric value.
         let v = this._value();
         if (this.min() !== null)
             v = Math.max(v, this.min());
         if (this.max() !== null)
             v = Math.min(v, this.max());
         this._value.set(v);
+        this._displayText.set(String(v));
         this._onChange(v);
         this._onTouched();
     }
@@ -4621,6 +4666,7 @@ class ClxNumberComponent {
     }
     _applyValue(v) {
         this._value.set(v);
+        this._displayText.set(String(v));
         this._onChange(v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4650,16 +4696,17 @@ class ClxNumberComponent {
           </div>
         }
 
-        <!-- Native number input -->
+        <!-- type="text" + inputmode="decimal" instead of type="number": a native number input
+             rejects a comma decimal separator outright (event.target.value silently becomes '' while
+             the typed text is invalid), which stomps whatever the user typed on every keystroke and
+             resets the caret to 0 — see _handleInput's own comment for the parse side of this fix. -->
         <input
-          type="number"
+          type="text"
+          inputmode="decimal"
           [id]="_inputId"
           [name]="_inputId"
           [class]="_inputClass()"
-          [value]="_value()"
-          [min]="min() ?? ''"
-          [max]="max() ?? ''"
-          [step]="step()"
+          [value]="_displayText()"
           [disabled]="_disabled()"
           [placeholder]="placeholder()"
           (input)="_handleInput($event)"
@@ -4767,16 +4814,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           </div>
         }
 
-        <!-- Native number input -->
+        <!-- type="text" + inputmode="decimal" instead of type="number": a native number input
+             rejects a comma decimal separator outright (event.target.value silently becomes '' while
+             the typed text is invalid), which stomps whatever the user typed on every keystroke and
+             resets the caret to 0 — see _handleInput's own comment for the parse side of this fix. -->
         <input
-          type="number"
+          type="text"
+          inputmode="decimal"
           [id]="_inputId"
           [name]="_inputId"
           [class]="_inputClass()"
-          [value]="_value()"
-          [min]="min() ?? ''"
-          [max]="max() ?? ''"
-          [step]="step()"
+          [value]="_displayText()"
           [disabled]="_disabled()"
           [placeholder]="placeholder()"
           (input)="_handleInput($event)"
@@ -9412,6 +9460,11 @@ class ClxModalService {
                 { provide: CLX_MODAL_SIZE, useValue: size },
             ],
         });
+        // The element that had focus right before opening (typically the button that triggered
+        // this modal) — its own hover/focus tooltip, if any, never receives a real blur otherwise:
+        // focus stays parked on it for as long as the modal is open, so switching OS windows while
+        // it's open can leave a hover-triggered tooltip stuck with no blur/mouseleave to dismiss it.
+        const triggerEl = document.activeElement;
         const { compRef, overlayRef } = this._overlay.mount(component, innerInjector, {
             zIndex: 1000,
             backdrop: hasBackdrop,
@@ -9421,6 +9474,11 @@ class ClxModalService {
         panelEl.style.width = `min(calc(100vw - 2rem), ${maxWidth})`;
         panelEl.style.maxWidth = maxWidth;
         panelEl.style.maxHeight = '90vh';
+        // Move focus into the modal so the trigger element actually blurs (see triggerEl above).
+        // tabIndex -1 + outline:none keeps this a pure focus target, not a visible/tabbable stop.
+        panelEl.tabIndex = -1;
+        panelEl.style.outline = 'none';
+        panelEl.focus();
         // Enter animation
         this._animate.animate(panelEl, {
             animation: animationIn,
@@ -9438,6 +9496,9 @@ class ClxModalService {
                 fillMode: 'forwards',
             }).then(() => {
                 overlayRef.destroy();
+                // Restore focus to whatever opened this modal — standard modal a11y practice, and what
+                // lets that element's tooltip (if any) receive a real blur instead of staying stuck.
+                triggerEl?.focus?.();
                 _resolve(result);
             });
         };