@eui/eds-react 22.0.0-alpha.12 → 22.0.0-alpha.14

package/eds-input-group/eds-input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group.js","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAqC,SAAS,aAAa,CACpG,EAAE,OAAO,GAAG,iBAAiB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAC7D,GAAG;IAEH,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,mBAAmB,SAAS,EAAE,CAAC,CAAC,CAAC,iBAAiB,cAC/D,OAAO,KACb,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-input-group/index.d.ts

@@ -0,0 +1,7 @@
+export { EdsInputGroup } from './eds-input-group.js';
+export type { EdsInputGroupProps } from './eds-input-group.js';
+export { EdsInputGroupAddon } from './eds-input-group-addon.js';
+export type { EdsInputGroupAddonProps } from './eds-input-group-addon.js';
+export { EdsInputGroupAddonItem } from './eds-input-group-addon-item.js';
+export type { EdsInputGroupAddonItemProps } from './eds-input-group-addon-item.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-input-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,YAAY,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,YAAY,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC"}

package/eds-input-group/index.js

@@ -0,0 +1,4 @@
+export { EdsInputGroup } from './eds-input-group.js';
+export { EdsInputGroupAddon } from './eds-input-group-addon.js';
+export { EdsInputGroupAddonItem } from './eds-input-group-addon-item.js';
+//# sourceMappingURL=index.js.map

package/eds-input-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC"}

package/eds-input-icon/eds-input-icon.css

@@ -0,0 +1,44 @@
+/* Pure-React 1:1 port of eds-input-icon.scss (`.eui-21` wrapper dropped, share-ready). */
+
+.eds-input-icon {
+    display: flex;
+    width: 100%;
+}
+
+.eds-input-icon .eds-input-icon-wrapper {
+    align-items: center;
+    display: flex;
+    width: 100%;
+    position: relative;
+}
+
+.eds-input-icon .eds-input-icon__content {
+    display: flex;
+    width: 100%;
+}
+
+.eds-input-icon .eds-input-icon__icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    color: var(--eds-c-foreground-subtle);
+}
+
+/* end position — ::ng-deep .eds-input-text becomes a light-DOM descendant selector */
+.eds-input-icon.eds-input-icon--end .eds-input-text {
+    padding-right: var(--eds-sp-5xl);
+}
+
+.eds-input-icon.eds-input-icon--end .eds-input-icon__icon {
+    right: var(--eds-sp-s);
+}
+
+/* start position */
+.eds-input-icon.eds-input-icon--start .eds-input-text {
+    padding-left: var(--eds-sp-5xl);
+}
+
+.eds-input-icon.eds-input-icon--start .eds-input-icon__icon {
+    left: var(--eds-sp-xs);
+    top: var(--eds-sp-xs);
+}

package/eds-input-icon/eds-input-icon.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+/**
+ * `EdsInputIcon` — pure React port of the Angular `eds-input-icon`.
+ *
+ * Container that positions an icon relative to an input field, at the start (left in LTR) or the
+ * end (right in LTR) of the control. Typically wraps an `EdsInputText` plus an `EdsIcon` to add a
+ * visual indicator (search, validation, action trigger).
+ *
+ * The Angular source is **class-based** (`host: { '[class]': 'hostClasses()' }`) rather than
+ * String-Props / reflected attributes, so per the pure-React guide rule 9 the BEM classes are
+ * reproduced verbatim on the root `className` (`eds-input-icon`, `eds-input-icon--start`,
+ * `eds-input-icon--end`) and the ported CSS keeps those class selectors. `edsIconPositionStart`
+ * and `edsIconPositionEnd` are mutually exclusive — when both are true, `end` takes precedence
+ * (matches the Angular `hostClasses()` computation).
+ *
+ * The template projects two slots: bare `<ng-content/>` (the input/control) and
+ * `<ng-content select="eds-icon"/>` (the icon). React has no selector-based projection, so the
+ * icon is passed via the dedicated `icon` prop and the control via `children`.
+ *
+ * @example Icon at start (default)
+ * ```tsx
+ * <EdsInputIcon icon={<EdsIcon icon="magnifying-glass" />}>
+ *   <EdsInputText placeholder="Search…" />
+ * </EdsInputIcon>
+ * ```
+ *
+ * @example Icon at end
+ * ```tsx
+ * <EdsInputIcon edsIconPositionEnd icon={<EdsIcon icon="eye" />}>
+ *   <EdsInputText type="password" />
+ * </EdsInputIcon>
+ * ```
+ */
+export interface EdsInputIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as the `data-e2e`
+     * attribute on the host element.
+     * @default 'eds-input-icon'
+     */
+    e2eAttr?: string;
+    /**
+     * Positions the icon at the start (left in LTR layouts) of the input field. Mutually exclusive
+     * with `edsIconPositionEnd` — when both are true, `end` takes precedence.
+     * @default true
+     */
+    edsIconPositionStart?: boolean;
+    /**
+     * Positions the icon at the end (right in LTR layouts) of the input field. When true, overrides
+     * `edsIconPositionStart` positioning.
+     * @default false
+     */
+    edsIconPositionEnd?: boolean;
+    /** The icon element, projected into the `eds-icon` slot (Angular `<ng-content select="eds-icon"/>`). */
+    icon?: React.ReactNode;
+    /** The input/control element, projected into the default slot (Angular bare `<ng-content/>`). */
+    children?: React.ReactNode;
+}
+export declare const EdsInputIcon: React.ForwardRefExoticComponent<EdsInputIconProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-input-icon.d.ts.map

package/eds-input-icon/eds-input-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-icon.d.ts","sourceRoot":"","sources":["../../src/eds-input-icon/eds-input-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,2FA+BvB,CAAC"}

package/eds-input-icon/eds-input-icon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsInputIcon = React.forwardRef(function EdsInputIcon({ e2eAttr = 'eds-input-icon', edsIconPositionStart = true, edsIconPositionEnd = false, icon, children, className, ...rest }, ref) {
+    // Mirrors the Angular hostClasses() computation: start applies only when start && !end;
+    // end always wins when set.
+    const rootClass = [
+        'eds-input-icon',
+        edsIconPositionStart && !edsIconPositionEnd ? 'eds-input-icon--start' : '',
+        edsIconPositionEnd ? 'eds-input-icon--end' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("span", { ref: ref, className: rootClass, "data-e2e": e2eAttr, ...rest, children: _jsxs("span", { className: "eds-input-icon-wrapper", children: [_jsx("span", { className: "eds-input-icon__content", children: children }), _jsx("span", { className: "eds-input-icon__icon", children: icon })] }) }));
+});
+//# sourceMappingURL=eds-input-icon.js.map

package/eds-input-icon/eds-input-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-icon.js","sourceRoot":"","sources":["../../src/eds-input-icon/eds-input-icon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2D/B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAqC,SAAS,YAAY,CAClG,EACI,OAAO,GAAG,gBAAgB,EAC1B,oBAAoB,GAAG,IAAI,EAC3B,kBAAkB,GAAG,KAAK,EAC1B,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,wFAAwF;IACxF,4BAA4B;IAC5B,MAAM,SAAS,GAAG;QACd,gBAAgB;QAChB,oBAAoB,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;QAC1E,kBAAkB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;QAC/C,SAAS,IAAI,EAAE;KAClB;SACI,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEf,OAAO,CACH,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,cAAY,OAAO,KAAM,IAAI,YAC7D,gBAAM,SAAS,EAAC,wBAAwB,aACpC,eAAM,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAQ,EAC3D,eAAM,SAAS,EAAC,sBAAsB,YAAE,IAAI,GAAQ,IACjD,GACJ,CACV,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-input-icon/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsInputIcon } from './eds-input-icon.js';
+export type { EdsInputIconProps } from './eds-input-icon.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-input-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/eds-input-icon/index.js

@@ -0,0 +1,2 @@
+export { EdsInputIcon } from './eds-input-icon.js';
+//# sourceMappingURL=index.js.map

package/eds-input-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-input-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/eds-input-number/eds-input-number.css

@@ -0,0 +1,156 @@
+/**
+ * eds-input-number.css — 1:1 pure-React port of eds-input-number.scss.
+ *
+ * The Angular file is `@include base.eds-ellipsis(); @include base.eds-input();` on
+ * `:host.eds-input-number`, plus the readonly/clearable/loading overrides. The `eui-21` wrapper
+ * is dropped (share-ready). SCSS mixins are inlined per the guide's Part 2:
+ *   - base.eds-ellipsis()   -> overflow/text-overflow/white-space
+ *   - base.eds-input()      -> the full input reset + focus-visible + placeholder + readonly +
+ *                              disabled + invalid + loading declarations
+ *   - base.eds-focus-visible() (nested in eds-input) -> :focus-visible:not([readonly]) outline
+ *
+ * The Angular component is class-based (`host: { '[class]': 'hostClasses()' }`), so variant/state
+ * selectors stay as BEM classes (`.eds-input-number--invalid` etc.), not `data-*` (guide rule 9).
+ * The clearable icon / loading spinner (injected via inline styles by the host directives at
+ * runtime) are ported to real CSS classes since React renders them as light-DOM elements.
+ */
+
+/* --- base.eds-ellipsis() + base.eds-input() on .eds-input-number --- */
+.eds-input-number {
+    /* eds-ellipsis() */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    /* eds-input() */
+    font: var(--eds-f-paragraph-m);
+    appearance: none;
+    background-color: var(--eds-c-surface-elevation);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+    border-radius: var(--eds-br-s);
+    box-shadow: none;
+    color: var(--eds-c-foreground-default);
+    min-height: var(--eds-si-3xl);
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    width: 100%;
+}
+
+/* eds-focus-visible() (nested in eds-input mixin) */
+.eds-input-number:focus-visible:not([readonly]) {
+    outline: 2px solid var(--eds-c-border-primary) !important;
+    outline-offset: -2px !important;
+    transition: none;
+}
+
+.eds-input-number:not([hidden]) {
+    display: block;
+}
+
+.eds-input-number::placeholder {
+    color: var(--eds-c-foreground-subtler);
+    opacity: 1;
+}
+
+/* Readonly (from eds-input mixin) */
+.eds-input-number[readonly] {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+    pointer-events: none;
+}
+
+/* Disabled (from eds-input mixin) */
+.eds-input-number:disabled:not([readonly]),
+.eds-input-number--disabled:not([readonly]) {
+    background-color: var(--eds-c-suface-disabled);
+    border-color: var(--eds-c-border-disabled);
+    color: var(--eds-c-foreground-subtler);
+    pointer-events: none;
+}
+
+/* Invalid (reflected as the --invalid class by hostClasses()) */
+.eds-input-number--invalid {
+    border-color: var(--eds-c-border-critical);
+}
+
+/* --- component-specific overrides (from eds-input-number.scss) --- */
+
+/* Readonly: keep pointer events, hide placeholder */
+.eds-input-number[readonly] {
+    pointer-events: auto;
+}
+
+.eds-input-number[readonly]::placeholder {
+    color: transparent;
+}
+
+/* Clearable padding */
+.eds-input-number--clearable {
+    padding-right: calc(var(--eds-sp-s) + 24px);
+}
+
+/* Loading padding (alone) */
+.eds-input-number--loading:not(.eds-input-number--clearable) {
+    padding-right: calc(var(--eds-sp-s) + 28px);
+}
+
+/* Both clearable + loading */
+.eds-input-number--loading.eds-input-number--clearable {
+    padding-right: calc(var(--eds-sp-s) + 28px);
+}
+
+/* --- wrapper + injected icons (ported from the host directives' runtime DOM) --- */
+
+/* Wrapper the clearable/loading directives build at runtime */
+.eds-input-number__wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+}
+
+/* Clear icon (EdsClearableDirective inline styles ported to CSS) */
+.eds-clearable-icon {
+    position: absolute;
+    right: var(--eds-sp-s);
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    color: var(--eds-c-foreground-subtle);
+    border-radius: var(--eds-br-xs);
+    padding: 2px;
+    outline: none;
+}
+
+.eds-clearable-icon:focus-visible {
+    outline: 2px solid var(--eds-c-border-focus, #0e47cb);
+    outline-offset: 1px;
+}
+
+/* Loading spinner (EdsLoadingDirective inline styles ported to CSS) */
+.eds-input-number--loading-icon {
+    position: absolute;
+    right: var(--eds-sp-s);
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    border: 3px solid var(--eds-c-border-neutral);
+    border-top-color: var(--eds-c-border-primary);
+    border-radius: 50%;
+    animation: eds-spin 0.6s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes eds-spin {
+    from {
+        transform: translateY(-50%) rotate(0deg);
+    }
+    to {
+        transform: translateY(-50%) rotate(360deg);
+    }
+}

package/eds-input-number/eds-input-number.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+export interface EdsInputNumberProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'min' | 'max'> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as `data-e2e`.
+     * @default 'eds-input-number'
+     */
+    e2eAttr?: string;
+    /**
+     * Controls whether the input is disabled. Reflected as the native `disabled` attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls whether the input is readonly. Reflected as the native `readonly` attribute.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Controls whether the input shows an invalid/error state. Reflected as the
+     * `eds-input-number--invalid` class (mirrors the Angular `isInvalid` input / NgControl state).
+     * @default false
+     */
+    invalid?: boolean;
+    /** Minimum allowed value. Enforced on blur. */
+    min?: number;
+    /** Maximum allowed value. Enforced on blur. */
+    max?: number;
+    /**
+     * Number of digits allowed after the decimal point.
+     * @default 0
+     */
+    fractionDigits?: number;
+    /**
+     * Whether to fill the decimal part with trailing zeros.
+     * @default false
+     */
+    fillFraction?: boolean;
+    /**
+     * Disables thousand grouping. Number is displayed plain.
+     * @default false
+     */
+    noFormat?: boolean;
+    /**
+     * BCP 47 locale used for group/decimal separators (replaces Angular's injected `LOCALE_ID`).
+     * @default 'en'
+     */
+    locale?: string;
+    /**
+     * Adds a clear (✕) button that appears when the input has content and is cleared on click /
+     * Enter (mirrors `EdsClearableDirective`). Hidden while readonly, disabled, or loading.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Displays a loading spinner inside the input and forces it readonly while active
+     * (mirrors `EdsLoadingDirective`).
+     * @default false
+     */
+    loading?: boolean;
+    /** Controlled numeric value. When provided the input is controlled (React semantics). */
+    value?: number | null;
+    /** Initial numeric value for an uncontrolled input. */
+    defaultValue?: number | null;
+    /**
+     * Fired with the parsed numeric value (or `null` for empty/partial input) whenever it changes
+     * (mirrors the Angular CVA `onChange`).
+     */
+    onValueChange?: (value: number | null) => void;
+    /** Fired on every keystroke with the raw DOM event (the formatted text is on the target). */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** Fired when the input loses focus (mirrors the Angular host `(blur)` → CVA `onTouched`). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** Fired when the clearable button clears the value (mirrors the directive's `clear` event). */
+    onClear?: () => void;
+}
+export declare const EdsInputNumber: React.ForwardRefExoticComponent<EdsInputNumberProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=eds-input-number.d.ts.map

package/eds-input-number/eds-input-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-number.d.ts","sourceRoot":"","sources":["../../src/eds-input-number/eds-input-number.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B,MAAM,WAAW,mBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;IAChH;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,8FAA8F;IAC9F,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,8FA2UzB,CAAC"}

package/eds-input-number/eds-input-number.js

@@ -0,0 +1,251 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+/**
+ * `EdsInputNumber` — pure React port of the Angular `eds-input-number`.
+ *
+ * The Angular source is a directive on a native `<input>` (`selector: 'input[edsInputNumber]'`,
+ * empty `template`) providing locale-aware number formatting with thousand grouping, decimal
+ * precision, min/max enforcement (on blur), input filtering (keydown), paste sanitizing, and
+ * `inputmode="decimal"`. So the rendered **root element IS an `<input>`** — no wrapper element
+ * unless `clearable`/`loading` is active (mirrors the two composed host directives).
+ *
+ * It is a `ControlValueAccessor` (Angular forms). React has no CVA, so this exposes a standard
+ * React form API: **controlled** via `value` (a `number`) + `onValueChange`, or **uncontrolled**
+ * via `defaultValue`. There is no forms-integration shim — flagged for React forms-API design
+ * review. The parsed numeric value (or `null` for empty/partial input) is delivered through
+ * `onValueChange`; the raw formatted text is delivered through the standard `onChange` event.
+ *
+ * The Angular component is **class-based** (`host: { '[class]': 'hostClasses()' }`), so per the
+ * pure-React guide rule 9 the BEM classes are reproduced verbatim on the root `className`
+ * (`eds-input-number`, `eds-input-number--invalid`) and the ported CSS keeps those class
+ * selectors. Angular's invalid state is `_ngControl.invalid && touched` when bound to a form
+ * control, or the `isInvalid` input otherwise; React has no NgControl, so `invalid` is the single
+ * input driving the `eds-input-number--invalid` class.
+ *
+ * The Angular component composes `EdsClearableDirective` (`edsClearable`) and `EdsLoadingDirective`
+ * (`edsLoading`) — reimplemented the same way as `EdsInputText`: when `clearable`/`loading` is
+ * active the component renders the `position:relative` flex wrapper + clear icon / loading spinner;
+ * otherwise it renders a bare `<input>`.
+ *
+ * @example Controlled
+ * ```tsx
+ * const [v, setV] = React.useState<number | null>(0);
+ * <EdsInputNumber value={v ?? undefined} fractionDigits={2} onValueChange={setV} />
+ * ```
+ *
+ * @example Uncontrolled, min/max
+ * ```tsx
+ * <EdsInputNumber defaultValue={50} min={0} max={100} />
+ * ```
+ */
+/** Locale group/decimal separators, matching Angular's `getLocaleConfig`. */
+function getLocaleConfig(locale) {
+    const parts = new Intl.NumberFormat(locale, { useGrouping: true }).formatToParts(10000.1);
+    return {
+        group: parts.find((p) => p.type === 'group')?.value || '',
+        decimal: parts.find((p) => p.type === 'decimal')?.value || '.',
+    };
+}
+export const EdsInputNumber = React.forwardRef(function EdsInputNumber({ e2eAttr = 'eds-input-number', disabled = false, readonly = false, invalid = false, min, max, fractionDigits = 0, fillFraction = false, noFormat = false, locale = 'en', clearable = false, loading = false, value, defaultValue, onValueChange, onChange, onBlur, onClear, className, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    const localeConfig = useMemo(() => getLocaleConfig(locale || 'en'), [locale]);
+    // Internal ref to the input so the clear handler / clearable-visibility / cursor restore can
+    // read the current DOM value; merged with the forwarded ref.
+    const innerRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        innerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // --- number formatting helpers (1:1 with the Angular private methods) ---
+    const formatNumber = useCallback((rawValue) => {
+        if (!rawValue) {
+            return '';
+        }
+        const num = parseFloat(rawValue);
+        if (isNaN(num) && rawValue !== '-' && rawValue !== '.') {
+            return rawValue;
+        }
+        if (rawValue === '-' || rawValue === '.') {
+            return rawValue;
+        }
+        const parts = rawValue.split('.');
+        let integerPart = parts[0] || '0';
+        let decimalPart = parts.length > 1 ? parts[1] : '';
+        const isNegative = integerPart.startsWith('-');
+        if (isNegative) {
+            integerPart = integerPart.substring(1);
+        }
+        if (decimalPart.length > fractionDigits && fractionDigits > 0) {
+            decimalPart = decimalPart.substring(0, fractionDigits);
+        }
+        if (fillFraction && fractionDigits > 0) {
+            decimalPart = decimalPart.padEnd(fractionDigits, '0');
+        }
+        if (!noFormat) {
+            integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, localeConfig.group);
+        }
+        let result = isNegative ? '-' + integerPart : integerPart;
+        if (decimalPart || (parts.length > 1 && fractionDigits > 0)) {
+            result += localeConfig.decimal + decimalPart;
+        }
+        return result;
+    }, [fractionDigits, fillFraction, noFormat, localeConfig]);
+    const extractRawValue = useCallback((formattedValue) => {
+        if (!formattedValue) {
+            return '';
+        }
+        let raw = formattedValue;
+        if (localeConfig.group) {
+            raw = raw.split(localeConfig.group).join('');
+        }
+        raw = raw.split(localeConfig.decimal).join('.');
+        raw = raw.replace(/[^\d.-]/g, '');
+        if (raw.indexOf('-') > 0) {
+            raw = raw.replace(/-/g, '');
+        }
+        const dotIndex = raw.indexOf('.');
+        if (dotIndex !== -1) {
+            raw = raw.substring(0, dotIndex + 1) + raw.substring(dotIndex + 1).replace(/\./g, '');
+        }
+        return raw;
+    }, [localeConfig]);
+    const parseToOutput = useCallback((rawValue) => {
+        if (!rawValue || rawValue === '-' || rawValue === '.') {
+            return null;
+        }
+        const num = parseFloat(rawValue);
+        return isNaN(num) ? null : num;
+    }, []);
+    // Raw (unformatted) numeric string mirroring the Angular `_rawValue` field.
+    const initialRaw = defaultValue === null || defaultValue === undefined ? '' : defaultValue.toString();
+    const rawValueRef = useRef(initialRaw);
+    // Uncontrolled display value (formatted). For the controlled case the display is derived from
+    // the `value` prop on each render.
+    const [uncontrolledDisplay, setUncontrolledDisplay] = useState(() => formatNumber(initialRaw));
+    const controlledDisplay = useMemo(() => {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        return formatNumber(value.toString());
+    }, [value, formatNumber]);
+    const displayValue = isControlled ? controlledDisplay : uncontrolledDisplay;
+    // Current raw string for clearable visibility.
+    const currentRaw = isControlled
+        ? value === null || value === undefined
+            ? ''
+            : value.toString()
+        : rawValueRef.current;
+    // Loading forces readonly (matches EdsLoadingDirective._show setting the readonly attribute).
+    const effectiveReadonly = readonly || loading;
+    const showClearIcon = clearable && !loading && !effectiveReadonly && !disabled && currentRaw.length > 0;
+    const rootClass = useMemo(() => ['eds-input-number', invalid ? 'eds-input-number--invalid' : '', clearable ? 'eds-input-number--clearable' : '', loading ? 'eds-input-number--loading' : '', className ?? '']
+        .filter(Boolean)
+        .join(' '), [invalid, clearable, loading, className]);
+    // --- event handlers (1:1 with the Angular host bindings) ---
+    const handleInput = useCallback((event) => {
+        const target = event.target;
+        const cursorPos = target.selectionStart;
+        const raw = extractRawValue(target.value);
+        rawValueRef.current = raw;
+        const formatted = formatNumber(raw);
+        const lengthDiff = formatted.length - target.value.length;
+        target.value = formatted;
+        if (cursorPos !== null) {
+            const newPos = Math.max(0, cursorPos + lengthDiff);
+            target.setSelectionRange(newPos, newPos);
+        }
+        if (!isControlled) {
+            setUncontrolledDisplay(formatted);
+        }
+        onValueChange?.(parseToOutput(raw));
+        onChange?.(event);
+    }, [extractRawValue, formatNumber, parseToOutput, isControlled, onValueChange, onChange]);
+    const handleBlur = useCallback((event) => {
+        onBlur?.(event);
+        if (rawValueRef.current === '') {
+            return;
+        }
+        let numericValue = parseFloat(rawValueRef.current);
+        if (min !== undefined && !isNaN(min) && numericValue < min) {
+            numericValue = min;
+        }
+        if (max !== undefined && !isNaN(max) && numericValue > max) {
+            numericValue = max;
+        }
+        rawValueRef.current = numericValue.toString();
+        const formatted = formatNumber(rawValueRef.current);
+        const node = innerRef.current;
+        if (node) {
+            node.value = formatted;
+        }
+        if (!isControlled) {
+            setUncontrolledDisplay(formatted);
+        }
+        onValueChange?.(parseToOutput(rawValueRef.current));
+    }, [min, max, formatNumber, parseToOutput, isControlled, onValueChange, onBlur]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.ctrlKey || event.altKey || event.metaKey || event.key.length > 1) {
+            return;
+        }
+        const allowedChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        if (fractionDigits > 0) {
+            allowedChars.push(localeConfig.decimal);
+            allowedChars.push('.');
+        }
+        if (min === undefined || isNaN(min) || min < 0) {
+            allowedChars.push('-');
+        }
+        if (!allowedChars.includes(event.key)) {
+            event.preventDefault();
+        }
+    }, [fractionDigits, localeConfig, min]);
+    const handlePaste = useCallback((event) => {
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text') || '';
+        const cleaned = extractRawValue(pastedText);
+        if (cleaned) {
+            rawValueRef.current = cleaned;
+            const formatted = formatNumber(cleaned);
+            const node = innerRef.current;
+            if (node) {
+                node.value = formatted;
+            }
+            if (!isControlled) {
+                setUncontrolledDisplay(formatted);
+            }
+            onValueChange?.(parseToOutput(cleaned));
+        }
+    }, [extractRawValue, formatNumber, parseToOutput, isControlled, onValueChange]);
+    const handleClear = useCallback(() => {
+        rawValueRef.current = '';
+        const node = innerRef.current;
+        if (node) {
+            node.value = '';
+            node.focus();
+        }
+        if (!isControlled) {
+            setUncontrolledDisplay('');
+        }
+        onValueChange?.(null);
+        onClear?.();
+    }, [isControlled, onValueChange, onClear]);
+    const displayProps = isControlled ? { value: displayValue } : { defaultValue: displayValue };
+    const input = (_jsx("input", { ref: setRefs, type: "text", inputMode: "decimal", className: rootClass, "data-e2e": e2eAttr, disabled: disabled, readOnly: effectiveReadonly, "aria-invalid": invalid || undefined, onChange: handleInput, onBlur: handleBlur, onKeyDown: handleKeyDown, onPaste: handlePaste, ...displayProps, ...rest }));
+    // Bare input when neither clearable nor loading is active — the host element IS the component.
+    if (!clearable && !loading) {
+        return input;
+    }
+    return (_jsxs("div", { className: "eds-input-number__wrapper", children: [input, showClearIcon && (_jsx("span", { className: "eds-clearable-icon", role: "button", tabIndex: 0, "aria-label": "Clear input", onClick: handleClear, onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        handleClear();
+                    }
+                }, children: '\u2715' })), loading && _jsx("span", { className: "eds-input-number--loading-icon", "aria-hidden": "true" })] }));
+});
+//# sourceMappingURL=eds-input-number.js.map