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

package/eds-input-group/eds-input-group-addon.css

@@ -0,0 +1,87 @@
+/* Pure-React 1:1 port of eds-input-group-addon.scss.
+   `.eui-21` wrapper dropped; `::ng-deep` collapses to plain descendant/child combinators
+   (React is light DOM, so no encapsulation boundary to pierce). */
+
+.eds-input-group-addon {
+    align-items: stretch;
+    display: flex;
+    position: relative;
+    width: 100%;
+}
+
+/* Border merging: collapse double borders between adjacent children */
+.eds-input-group-addon > :not(:first-child) {
+    margin-left: calc(-1 * var(--eds-bw-xs));
+}
+
+/* --- Addon items --- */
+.eds-input-group-addon > .eds-input-group-addon-item:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--eds-br-s);
+    border-bottom-left-radius: var(--eds-br-s);
+}
+
+.eds-input-group-addon > .eds-input-group-addon-item:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--eds-br-s);
+    border-bottom-right-radius: var(--eds-br-s);
+}
+
+.eds-input-group-addon > .eds-input-group-addon-item:not(:first-child):not(:last-child) {
+    border-radius: 0;
+}
+
+/* --- Inputs/selects (direct or nested in clearable wrapper) --- */
+/* First child */
+.eds-input-group-addon > :first-child:not(.eds-input-group-addon-item):not(.eds-button) input,
+.eds-input-group-addon > :first-child:not(.eds-input-group-addon-item):not(.eds-button) select,
+.eds-input-group-addon > :first-child.eds-input-text {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: var(--eds-br-s) !important;
+    border-bottom-left-radius: var(--eds-br-s) !important;
+}
+
+/* Last child */
+.eds-input-group-addon > :last-child:not(.eds-input-group-addon-item):not(.eds-button) input,
+.eds-input-group-addon > :last-child:not(.eds-input-group-addon-item):not(.eds-button) select,
+.eds-input-group-addon > :last-child.eds-input-text {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: var(--eds-br-s) !important;
+    border-bottom-right-radius: var(--eds-br-s) !important;
+}
+
+/* Middle child */
+.eds-input-group-addon > :not(:first-child):not(:last-child):not(.eds-input-group-addon-item):not(.eds-button) input,
+.eds-input-group-addon > :not(:first-child):not(:last-child):not(.eds-input-group-addon-item):not(.eds-button) select,
+.eds-input-group-addon > :not(:first-child):not(:last-child).eds-input-text {
+    border-radius: 0 !important;
+}
+
+/* --- Buttons (direct children, e.g. datepicker calendar button) --- */
+.eds-input-group-addon > .eds-button:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: var(--eds-br-s) !important;
+    border-bottom-left-radius: var(--eds-br-s) !important;
+}
+
+.eds-input-group-addon > .eds-button:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: var(--eds-br-s) !important;
+    border-bottom-right-radius: var(--eds-br-s) !important;
+}
+
+.eds-input-group-addon > .eds-button:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+}
+
+/* Ensure focused element appears above adjacent items */
+.eds-input-group-addon > :focus-within,
+.eds-input-group-addon > :focus {
+    z-index: 1;
+}

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * `EdsInputGroupAddon` — pure React port of the Angular `eds-input-group-addon`.
+ *
+ * A horizontal row that groups a control with leading/trailing addon items (icons, prefixes,
+ * buttons, selects), collapsing the double borders between adjacent children and rounding only the
+ * outer corners. The rendered element IS the component (a `<div>` flex row) — no extra wrapper.
+ *
+ * The Angular source sets a static host class (`eds-input-group-addon`) and reflects only a
+ * `data-e2e` attribute; there are no variant axes. The template is a bare `<ng-content/>`, so the
+ * projected children (addon items, inputs, selects, buttons) render directly into the host and the
+ * CSS keys its border-merging rules off their position and class.
+ *
+ * @example
+ * ```tsx
+ * <EdsInputGroupAddon>
+ *   <EdsInputGroupAddonItem>@</EdsInputGroupAddonItem>
+ *   <EdsInputText placeholder="username" />
+ * </EdsInputGroupAddon>
+ * ```
+ */
+export interface EdsInputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as the `data-e2e`
+     * attribute on the host element. @default 'eds-input-group-addon'
+     */
+    e2eAttr?: string;
+    /** The addon items and control elements projected into the row. */
+    children?: React.ReactNode;
+}
+export declare const EdsInputGroupAddon: React.ForwardRefExoticComponent<EdsInputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-input-group-addon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group-addon.d.ts","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group-addon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,gGAa9B,CAAC"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsInputGroupAddon = React.forwardRef(function EdsInputGroupAddon({ e2eAttr = 'eds-input-group-addon', children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-input-group-addon ${className}` : 'eds-input-group-addon', "data-e2e": e2eAttr, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-input-group-addon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group-addon.js","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group-addon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgC/B,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAC9C,SAAS,kBAAkB,CAAC,EAAE,OAAO,GAAG,uBAAuB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAChG,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,yBAAyB,SAAS,EAAE,CAAC,CAAC,CAAC,uBAAuB,cAC3E,OAAO,KACb,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-input-group/eds-input-group.css

@@ -0,0 +1,18 @@
+/* Pure-React 1:1 port of eds-input-group.scss (`.eui-21` wrapper dropped, share-ready). */
+
+.eds-input-group {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: var(--eds-sp-3xs);
+    margin-bottom: var(--eds-sp-m);
+    position: relative;
+    width: 100%;
+}
+
+/* base.media(base.$eds-bkp-mobile) — mobile range (< 768px) */
+@media (max-width: 767px) {
+    .eds-input-group.row {
+        flex-direction: column;
+    }
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+/**
+ * `EdsInputGroup` — pure React port of the Angular `eds-input-group`.
+ *
+ * A vertical layout container for a form field: it stacks a label, control (input/select/addon
+ * row), hints and error/validation messages with consistent spacing. The rendered element IS the
+ * component (a `<div>` flex column) — no extra wrapper.
+ *
+ * The Angular source computes a static host class (`hostClasses()` always returns
+ * `'eds-input-group'`) and reflects only a `data-e2e` attribute; there are no variant axes. The
+ * template is a bare `<ng-content/>`, so all children project directly into the host.
+ *
+ * @example
+ * ```tsx
+ * <EdsInputGroup>
+ *   <label className="eds-label">Email</label>
+ *   <EdsInputText placeholder="you@example.com" />
+ * </EdsInputGroup>
+ * ```
+ */
+export interface EdsInputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as the `data-e2e`
+     * attribute on the host element. @default 'eds-input-group'
+     */
+    e2eAttr?: string;
+    /** The label, control and message elements projected into the group. */
+    children?: React.ReactNode;
+}
+export declare const EdsInputGroup: React.ForwardRefExoticComponent<EdsInputGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-input-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group.d.ts","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,2FAcxB,CAAC"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsInputGroup = React.forwardRef(function EdsInputGroup({ e2eAttr = 'eds-input-group', children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-input-group ${className}` : 'eds-input-group', "data-e2e": e2eAttr, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-input-group.js.map

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"}