@kumori/aurora-wui-components 0.0.306-dev4506.1 → 0.0.306-dev4506.2

package/dist/components/axebow-input/axebow-numeric-format.d.ts

@@ -0,0 +1,15 @@
+export interface TypedNumericText {
+    text: string;
+    value: string;
+    caret: number;
+}
+export interface TypedNumericOptions {
+    integerOnly: boolean;
+    max: number;
+}
+export declare function toNumber(text: unknown): number | null;
+export declare function formatNumericText(raw: string): string;
+export declare function formatNumericValue(value: unknown): string;
+export declare function sanitizeNumericText(text: string, integerOnly: boolean): string;
+export declare function processTypedText(typed: string, caret: number, options: TypedNumericOptions): TypedNumericText;
+//# sourceMappingURL=axebow-numeric-format.d.ts.map

package/dist/components/axebow-input/axebow-numeric-format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axebow-numeric-format.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-numeric-format.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAKrD;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAQrD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAOzD;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,CAS9E;AAeD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,mBAAmB,GAAG,gBAAgB,CAM7G"}

package/dist/components/axebow-input/axebow-numeric-input.d.ts

@@ -11,8 +11,11 @@ export declare class AxebowNumericInput extends AxebowInputBase {
     stepAmount: number;
     fixedField: boolean;
     minWidth?: string;
+    private _text;
+    willUpdate(changed: PropertyValues): void;
     updated(changed: PropertyValues): void;
     protected handleChange(e: Event): void;
+    private _emitValue;
     protected handleKeyDown(e: KeyboardEvent): void;
     private _bumpValue;
     private _renderStepper;

package/dist/components/axebow-input/axebow-numeric-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-numeric-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-numeric-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,yDAAyD,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,qBACa,kBAAmB,SAAQ,eAAe;IACrD,MAAM,CAAC,MAAM,4BAqEX;IAE0B,GAAG,SAA2B;IAC9B,GAAG,SAAK;IACP,WAAW,UAAS;IAErB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,UAAQ;IACpB,UAAU,SAAK;IACd,UAAU,UAAS;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE9C,OAAO,CAAC,OAAO,EAAE,cAAc;IAkC/B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAgB/B,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa;IAMxC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;IA2BtB,MAAM;CAqBP"}
+{"version":3,"file":"axebow-numeric-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-numeric-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,yDAAyD,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,qBACa,kBAAmB,SAAQ,eAAe;IACrD,MAAM,CAAC,MAAM,4BA6DX;IAE0B,GAAG,SAA2B;IAC9B,GAAG,SAAK;IACP,WAAW,UAAS;IAErB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,UAAQ;IACpB,UAAU,SAAK;IACd,UAAU,UAAS;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAErC,OAAO,CAAC,KAAK,CAAM;IAE5B,UAAU,CAAC,OAAO,EAAE,cAAc;IAOlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAkC/B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAkB/B,OAAO,CAAC,UAAU;IAOlB,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa;IASxC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;IA2BtB,MAAM;CAsBP"}

package/dist/index.js

@@ -30,6 +30,7 @@ var axebowTheme = css`
   :host, .theme {
     --axebow-primary: var(--color-primary, #34495e);
     --axebow-primary-light: var(--color-primary-light, #b4cded);
+    --axebow-indigo-blue: var(--color-indigo-blue, #344966);
     --axebow-tertiary: var(--color-tertiary, #006bff);
     --axebow-success: var(--color-success, #0ecd9a);
     --axebow-secondary: var(--color-secondary, #78787a);
@@ -2514,6 +2515,68 @@ var AxebowTextInput = class AxebowTextInput extends AxebowInputBase {
 };
 AxebowTextInput = __decorate([customElement("axebow-text-input")], AxebowTextInput);
 //#endregion
+//#region src/components/axebow-input/axebow-numeric-format.ts
+var DECIMAL_SEPARATOR = ".";
+var THOUSANDS_SEPARATOR = ",";
+var NEGATIVE_SIGN = "-";
+var SIGNIFICANT_CHARACTER = /[\d.-]/;
+function toNumber(text) {
+	const normalized = String(text ?? "").replace(/,/g, "").trim();
+	if (normalized === "") return null;
+	const parsed = Number(normalized);
+	return Number.isFinite(parsed) ? parsed : null;
+}
+function formatNumericText(raw) {
+	const negative = raw.startsWith(NEGATIVE_SIGN);
+	const unsigned = negative ? raw.slice(1) : raw;
+	const separatorIndex = unsigned.indexOf(DECIMAL_SEPARATOR);
+	const integerPart = separatorIndex === -1 ? unsigned : unsigned.slice(0, separatorIndex);
+	const fractionPart = separatorIndex === -1 ? "" : unsigned.slice(separatorIndex);
+	const grouped = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, THOUSANDS_SEPARATOR);
+	return `${negative ? NEGATIVE_SIGN : ""}${grouped}${fractionPart}`;
+}
+function formatNumericValue(value) {
+	const text = String(value ?? "").trim();
+	if (text === "") return "";
+	if (/^-?\d*\.?\d*$/.test(text)) return formatNumericText(text);
+	const parsed = toNumber(text);
+	if (parsed === null) return "";
+	return formatNumericText(parsed.toLocaleString("en-US", {
+		useGrouping: false,
+		maximumFractionDigits: 20
+	}));
+}
+function sanitizeNumericText(text, integerOnly) {
+	const negative = text.trim().startsWith(NEGATIVE_SIGN);
+	const cleaned = text.replace(/[^\d.]/g, "");
+	const separatorIndex = cleaned.indexOf(DECIMAL_SEPARATOR);
+	const integerPart = (separatorIndex === -1 ? cleaned : cleaned.slice(0, separatorIndex)).replace(/^0+(?=\d)/, "");
+	const fractionDigits = separatorIndex === -1 ? "" : cleaned.slice(separatorIndex + 1).replace(/\./g, "");
+	const body = integerOnly || separatorIndex === -1 ? integerPart : `${integerPart}${DECIMAL_SEPARATOR}${fractionDigits}`;
+	return `${negative ? NEGATIVE_SIGN : ""}${body}`;
+}
+function caretInText(typed, caret, text) {
+	const significantBefore = Array.from(typed.slice(0, caret)).filter((character) => SIGNIFICANT_CHARACTER.test(character)).length;
+	let position = 0;
+	let seen = 0;
+	while (position < text.length && seen < significantBefore) {
+		if (SIGNIFICANT_CHARACTER.test(text[position])) seen++;
+		position++;
+	}
+	return position;
+}
+function processTypedText(typed, caret, options) {
+	let raw = sanitizeNumericText(typed, options.integerOnly);
+	const parsed = toNumber(raw);
+	if (options.integerOnly && parsed !== null && parsed > options.max) raw = String(options.max);
+	const text = formatNumericText(raw);
+	return {
+		text,
+		value: toNumber(raw) === null ? "" : raw,
+		caret: caretInText(typed, caret, text)
+	};
+}
+//#endregion
 //#region src/components/axebow-input/axebow-numeric-input.ts
 var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 	constructor(..._args) {
@@ -2524,6 +2587,7 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 		this.showStepper = true;
 		this.stepAmount = 1;
 		this.fixedField = false;
+		this._text = "";
 	}
 	static {
 		this.styles = [...AxebowInputBase.baseStyles, css`
@@ -2531,14 +2595,6 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
         display: block;
         width: 100%;
       }
-      sl-input::part(input)::-webkit-outer-spin-button,
-      sl-input::part(input)::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-      sl-input::part(input) {
-        -moz-appearance: textfield;
-      }
       :host(.axebow-fixed-width) sl-input {
         width: var(--axebow-input-width) !important;
       }
@@ -2594,6 +2650,10 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
       }
     `];
 	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("value") && toNumber(this.value) !== toNumber(this._text)) this._text = formatNumericValue(this.value);
+	}
 	updated(changed) {
 		super.updated(changed);
 		if (changed.has("fixedWidth")) if (this.fixedWidth) {
@@ -2621,28 +2681,43 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 	}
 	handleChange(e) {
 		if (this.disabled) return;
-		if (this.integerOnly) {
-			const target = e.target;
-			let truncated = Math.trunc(Number(target.value));
-			if (truncated > this.max) truncated = this.max;
-			target.value = truncated.toString();
-			this.value = target.value;
-			this.callback?.(e);
-			return;
+		const input = e.target;
+		const typed = input.value;
+		const { text, value, caret } = processTypedText(typed, input.input?.selectionStart ?? typed.length, {
+			integerOnly: this.integerOnly,
+			max: this.max
+		});
+		if (text !== typed) {
+			const hasFocus = input.shadowRoot?.activeElement === input.input;
+			input.value = text;
+			if (hasFocus) input.updateComplete.then(() => input.setSelectionRange(caret, caret));
 		}
-		super.handleChange(e);
+		this._text = text;
+		this.value = value;
+		this._emitValue(value);
+	}
+	_emitValue(value) {
+		const source = document.createElement("input");
+		source.value = value;
+		source.addEventListener("input", (event) => this.callback?.(event), { once: true });
+		source.dispatchEvent(new Event("input"));
 	}
 	handleKeyDown(e) {
-		if (this.integerOnly && (e.key === "." || e.key === "," || e.key === "e" || e.key === "E")) e.preventDefault();
+		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			e.preventDefault();
+			this._bumpValue(e.key === "ArrowUp" ? 1 : -1);
+			return;
+		}
+		if (this.integerOnly && e.key === ".") e.preventDefault();
 	}
 	_bumpValue(sign) {
 		if (this.disabled) return;
 		const step = this.integerOnly ? Math.trunc(this.stepAmount) || 1 : this.stepAmount;
-		const current = Number(this.value) || 0;
+		const current = toNumber(this.value) ?? 0;
 		const next = Math.min(this.max, Math.max(this.min, current + sign * step));
 		const input = this.renderRoot.querySelector("sl-input");
 		if (!input) return;
-		input.value = next.toString();
+		input.value = formatNumericValue(next);
 		input.dispatchEvent(new Event("sl-input", {
 			bubbles: true,
 			composed: true
@@ -2650,7 +2725,7 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 	}
 	_renderStepper() {
 		if (!this.showStepper) return "";
-		const current = Number(this.value) || 0;
+		const current = toNumber(this.value) ?? 0;
 		return html`
       <div slot="suffix" class="axebow-numeric-stepper">
         <button
@@ -2678,15 +2753,16 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 		const content = html`
       <div class="${this.hasError ? "input-error" : ""}">
         <sl-input
-          type="number"
+          type="text"
+          inputmode="${this.integerOnly ? "numeric" : "decimal"}"
+          autocomplete="off"
           placeholder="${this.placeholder}"
           @sl-input="${this.handleChange}"
           @keydown="${this.handleKeyDown}"
-          .value="${live(this.value)}"
+          .value="${live(this._text)}"
           ?disabled="${this.disabled}"
           max=${this.max}
           min=${this.min}
-          step=${this.integerOnly ? "1" : "any"}
         >
           ${this._renderStepper()}
         </sl-input>
@@ -2704,6 +2780,7 @@ __decorate([property({ type: Boolean })], AxebowNumericInput.prototype, "showSte
 __decorate([property({ type: Number })], AxebowNumericInput.prototype, "stepAmount", void 0);
 __decorate([property({ type: Boolean })], AxebowNumericInput.prototype, "fixedField", void 0);
 __decorate([property({ type: String })], AxebowNumericInput.prototype, "minWidth", void 0);
+__decorate([state()], AxebowNumericInput.prototype, "_text", void 0);
 AxebowNumericInput = __decorate([customElement("axebow-numeric-input")], AxebowNumericInput);
 //#endregion
 //#region src/components/axebow-input/axebow-checkbox-input.ts