@ebrains/components 1.0.0 → 1.2.0

package/dist/types/components.d.ts

@@ -7,12 +7,16 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 import { Card } from "./shared-ui/eds-card-section/eds-card-section";
+import { Event, VNode } from "./stencil-public-runtime";
 import { Step } from "./shared-ui/eds-steps/eds-steps";
 import { Step as Step1 } from "./shared-ui/eds-steps-v2/eds-steps-v2";
+import { TableAction } from "./components/eds-table/eds-table";
 export { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 export { Card } from "./shared-ui/eds-card-section/eds-card-section";
+export { Event, VNode } from "./stencil-public-runtime";
 export { Step } from "./shared-ui/eds-steps/eds-steps";
 export { Step as Step1 } from "./shared-ui/eds-steps-v2/eds-steps-v2";
+export { TableAction } from "./components/eds-table/eds-table";
 export namespace Components {
     interface ColorPrimaryPalette {
     }
@@ -659,6 +663,7 @@ export namespace Components {
           * The name of the form, used for grouping inputs and identifying the form.
          */
         "name": string;
+        "setData": (newData: { [key: string]: any; }) => Promise<void>;
         /**
           * If `true`, includes the current form URL in the submission data.
          */
@@ -1073,94 +1078,85 @@ export namespace Components {
         "type": string;
         "value"?: string | number;
     }
-    /**
-     * `EdsInputField` is a versatile form input component that supports various input types and customization options.
-     * Key Features:
-     * - Supports multiple input types (text, checkbox, radio, select, file) with corresponding behaviors and styling.
-     * - Provides options for validation, including required fields and max length.
-     * - Allows custom messages and error handling with `message` and `errorMessage` props.
-     * - Offers additional features like icons, labels, links, and hints to enhance user experience.
-     * This component provides a structured and configurable form input with additional features to suit various input requirements.
-     */
     interface EdsInputField {
         /**
-          * If `true`, the input field is checked (for `checkbox` or `radio` types).
+          * If `true`, the checkbox/radio is checked.
          */
         "checked"?: boolean;
         /**
-          * If `true`, disables the input field.
+          * If `true`, the input is disabled.
          */
         "disabled": boolean;
         /**
-          * If `true`, marks the input field as having an error.
+          * If `true`, renders the input with error styles.
          */
         "error": boolean;
         /**
-          * The error message displayed when validation fails.
+          * Error message text shown when validation fails.
          */
         "errorMessage"?: string;
         /**
-          * Control whether the component emits value events (`oninput` / `onchange`). Defaults to `true`. Password fields are always suppressed for security.
+          * If `true`, emits `edsChange` and `edsInput` events for external usage. Set to `false` to disable value emission entirely.
          */
         "exposeValueEvents": boolean;
         /**
-          * A short hint displayed alongside the input field.
+          * Optional hint displayed next to the label.
          */
         "hint"?: string;
         /**
-          * The icon name to be displayed within the input field.
+          * Optional icon name to display inside the input.
          */
         "icon"?: string;
         /**
-          * The unique `id` for the input element. Defaults to the `name` attribute if not provided.
+          * The `id` attribute of the internal input element. Defaults to `name` if not set.
          */
         "inputId"?: string;
         /**
-          * The label text for the input field.
+          * Label text for the input field.
          */
         "label"?: string;
         /**
-          * A link object containing the URL and label to display alongside the input field.
+          * Optional link associated with the input (for help or docs).
          */
         "link"?: { url: string; label: string };
         /**
-          * The maximum length of the input value (for `text` types).
+          * The maximum allowed length for text input.
          */
         "maxLength"?: number;
         /**
-          * An additional message displayed below the input field.
+          * Message shown below the input (e.g., additional info or validation message).
          */
         "message"?: string;
         /**
-          * The `name` attribute for the input element. Required for form submissions.
+          * The `name` attribute of the input element. Required for form submission.
          */
         "name": string;
         /**
-          * The `onChange` event handler for the input element.
+          * Native `onChange` handler for React/Vue wrappers. Enables use without manually attaching DOM event listeners.
          */
-        "onChange"?: (event: Event) => void;
+        "onChangeNative"?: (event: Event) => void;
         /**
-          * The `onInput` event handler for the input element.
+          * Native `onInput` handler for React/Vue wrappers. Enables use without manually attaching DOM event listeners.
          */
         "onInput"?: (event: InputEvent) => void;
         /**
-          * Options for `checkbox`, `radio`, or `select` inputs. Can be a JSON string or an array of objects.
+          * Options for select, checkbox, radio, or range inputs. Can be a JSON string or an array of `{ value, label }` objects.
          */
         "options"?: string | { value: string | number; label: string }[];
         /**
-          * The placeholder text for the input element.
+          * Placeholder text for the input field.
          */
         "placeholder"?: string;
         /**
-          * If `true`, the input field is required.
+          * If `true`, the input is required.
          */
         "required": boolean;
         /**
-          * The type of the input element. Defaults to `text`. Supported types: `text`, `checkbox`, `radio`, `select`, `file`, `search`, etc.
+          * Type of the input: e.g., `text`, `checkbox`, `select`, `range`, etc.
          */
         "type": string;
         /**
-          * The value of the input field.
+          * The value of the input. Can be `string` or `number`.
          */
         "value"?: string | number;
     }
@@ -1652,6 +1648,10 @@ export namespace Components {
           * Optional image source to display above the steps.
          */
         "imageSrc"?: string;
+        /**
+          * Optional image width for the eds-img component.
+         */
+        "imageWidth"?: number;
         /**
           * Optional message to display inside the placeholder if no image is provided.
          */
@@ -1693,6 +1693,14 @@ export namespace Components {
      * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
      */
     interface EdsTable {
+        /**
+          * Optional: allow the consumer to supply a full JSX render‐prop instead of simple name/label pairs. If provided, this takes priority.
+         */
+        "actionTemplate"?: (row: any) => VNode;
+        /**
+          * Array of actions to render in each row. Each action should have:  - `name`: a unique key (e.g. "view", "delete")  - `label`: what shows in the button (or you could pass an icon name here)
+         */
+        "actions": string | TableAction[];
         /**
           * Optional property to control the column sizing mode. - 'default' uses containerWidth / visibleColumns. - 'medium' divides that result by 2. - 'large' divides that result by 4.
          */
@@ -1888,6 +1896,10 @@ export interface EdsHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsHeaderElement;
 }
+export interface EdsInputFieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEdsInputFieldElement;
+}
 export interface EdsInputRangeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsInputRangeElement;
@@ -1924,6 +1936,10 @@ export interface EdsSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsSwitchElement;
 }
+export interface EdsTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEdsTableElement;
+}
 export interface EdsTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsTabsElement;
@@ -2594,16 +2610,19 @@ declare global {
         prototype: HTMLEdsInputElement;
         new (): HTMLEdsInputElement;
     };
-    /**
-     * `EdsInputField` is a versatile form input component that supports various input types and customization options.
-     * Key Features:
-     * - Supports multiple input types (text, checkbox, radio, select, file) with corresponding behaviors and styling.
-     * - Provides options for validation, including required fields and max length.
-     * - Allows custom messages and error handling with `message` and `errorMessage` props.
-     * - Offers additional features like icons, labels, links, and hints to enhance user experience.
-     * This component provides a structured and configurable form input with additional features to suit various input requirements.
-     */
+    interface HTMLEdsInputFieldElementEventMap {
+        "edsinput": { value: string };
+        "edschange": { value: string };
+    }
     interface HTMLEdsInputFieldElement extends Components.EdsInputField, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLEdsInputFieldElementEventMap>(type: K, listener: (this: HTMLEdsInputFieldElement, ev: EdsInputFieldCustomEvent<HTMLEdsInputFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLEdsInputFieldElementEventMap>(type: K, listener: (this: HTMLEdsInputFieldElement, ev: EdsInputFieldCustomEvent<HTMLEdsInputFieldElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLEdsInputFieldElement: {
         prototype: HTMLEdsInputFieldElement;
@@ -2879,6 +2898,9 @@ declare global {
         prototype: HTMLEdsSwitchElement;
         new (): HTMLEdsSwitchElement;
     };
+    interface HTMLEdsTableElementEventMap {
+        "rowaction": { action: string; row: any; checked: boolean };
+    }
     /**
      * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
      * Key Features:
@@ -2889,6 +2911,14 @@ declare global {
      * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
      */
     interface HTMLEdsTableElement extends Components.EdsTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLEdsTableElementEventMap>(type: K, listener: (this: HTMLEdsTableElement, ev: EdsTableCustomEvent<HTMLEdsTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLEdsTableElementEventMap>(type: K, listener: (this: HTMLEdsTableElement, ev: EdsTableCustomEvent<HTMLEdsTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLEdsTableElement: {
         prototype: HTMLEdsTableElement;
@@ -4281,94 +4311,93 @@ declare namespace LocalJSX {
         "type"?: string;
         "value"?: string | number;
     }
-    /**
-     * `EdsInputField` is a versatile form input component that supports various input types and customization options.
-     * Key Features:
-     * - Supports multiple input types (text, checkbox, radio, select, file) with corresponding behaviors and styling.
-     * - Provides options for validation, including required fields and max length.
-     * - Allows custom messages and error handling with `message` and `errorMessage` props.
-     * - Offers additional features like icons, labels, links, and hints to enhance user experience.
-     * This component provides a structured and configurable form input with additional features to suit various input requirements.
-     */
     interface EdsInputField {
         /**
-          * If `true`, the input field is checked (for `checkbox` or `radio` types).
+          * If `true`, the checkbox/radio is checked.
          */
         "checked"?: boolean;
         /**
-          * If `true`, disables the input field.
+          * If `true`, the input is disabled.
          */
         "disabled"?: boolean;
         /**
-          * If `true`, marks the input field as having an error.
+          * If `true`, renders the input with error styles.
          */
         "error"?: boolean;
         /**
-          * The error message displayed when validation fails.
+          * Error message text shown when validation fails.
          */
         "errorMessage"?: string;
         /**
-          * Control whether the component emits value events (`oninput` / `onchange`). Defaults to `true`. Password fields are always suppressed for security.
+          * If `true`, emits `edsChange` and `edsInput` events for external usage. Set to `false` to disable value emission entirely.
          */
         "exposeValueEvents"?: boolean;
         /**
-          * A short hint displayed alongside the input field.
+          * Optional hint displayed next to the label.
          */
         "hint"?: string;
         /**
-          * The icon name to be displayed within the input field.
+          * Optional icon name to display inside the input.
          */
         "icon"?: string;
         /**
-          * The unique `id` for the input element. Defaults to the `name` attribute if not provided.
+          * The `id` attribute of the internal input element. Defaults to `name` if not set.
          */
         "inputId"?: string;
         /**
-          * The label text for the input field.
+          * Label text for the input field.
          */
         "label"?: string;
         /**
-          * A link object containing the URL and label to display alongside the input field.
+          * Optional link associated with the input (for help or docs).
          */
         "link"?: { url: string; label: string };
         /**
-          * The maximum length of the input value (for `text` types).
+          * The maximum allowed length for text input.
          */
         "maxLength"?: number;
         /**
-          * An additional message displayed below the input field.
+          * Message shown below the input (e.g., additional info or validation message).
          */
         "message"?: string;
         /**
-          * The `name` attribute for the input element. Required for form submissions.
+          * The `name` attribute of the input element. Required for form submission.
          */
         "name": string;
         /**
-          * The `onChange` event handler for the input element.
+          * Native `onChange` handler for React/Vue wrappers. Enables use without manually attaching DOM event listeners.
+         */
+        "onChangeNative"?: (event: Event) => void;
+        /**
+          * Emits on blur or change event (e.g., selecting an option, leaving the field). Use `event.detail.value` to access the final value.
+         */
+        "onEdschange"?: (event: EdsInputFieldCustomEvent<{ value: string }>) => void;
+        /**
+          * Emits on every user input (key press, typing, etc.). Use `event.detail.value` to access the new value.
          */
-        "onChange"?: (event: Event) => void;
+        "onEdsinput"?: (event: EdsInputFieldCustomEvent<{ value: string }>) => void;
         /**
-          * The `onInput` event handler for the input element.
+          * Native `onInput` handler for React/Vue wrappers. Enables use without manually attaching DOM event listeners.
          */
         "onInput"?: (event: InputEvent) => void;
         /**
-          * Options for `checkbox`, `radio`, or `select` inputs. Can be a JSON string or an array of objects.
+          * Options for select, checkbox, radio, or range inputs. Can be a JSON string or an array of `{ value, label }` objects.
          */
         "options"?: string | { value: string | number; label: string }[];
         /**
-          * The placeholder text for the input element.
+          * Placeholder text for the input field.
          */
         "placeholder"?: string;
         /**
-          * If `true`, the input field is required.
+          * If `true`, the input is required.
          */
         "required"?: boolean;
         /**
-          * The type of the input element. Defaults to `text`. Supported types: `text`, `checkbox`, `radio`, `select`, `file`, `search`, etc.
+          * Type of the input: e.g., `text`, `checkbox`, `select`, `range`, etc.
          */
         "type"?: string;
         /**
-          * The value of the input field.
+          * The value of the input. Can be `string` or `number`.
          */
         "value"?: string | number;
     }
@@ -4869,6 +4898,10 @@ declare namespace LocalJSX {
           * Optional image source to display above the steps.
          */
         "imageSrc"?: string;
+        /**
+          * Optional image width for the eds-img component.
+         */
+        "imageWidth"?: number;
         /**
           * Optional message to display inside the placeholder if no image is provided.
          */
@@ -4918,6 +4951,14 @@ declare namespace LocalJSX {
      * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
      */
     interface EdsTable {
+        /**
+          * Optional: allow the consumer to supply a full JSX render‐prop instead of simple name/label pairs. If provided, this takes priority.
+         */
+        "actionTemplate"?: (row: any) => VNode;
+        /**
+          * Array of actions to render in each row. Each action should have:  - `name`: a unique key (e.g. "view", "delete")  - `label`: what shows in the button (or you could pass an icon name here)
+         */
+        "actions"?: string | TableAction[];
         /**
           * Optional property to control the column sizing mode. - 'default' uses containerWidth / visibleColumns. - 'medium' divides that result by 2. - 'large' divides that result by 4.
          */
@@ -4941,6 +4982,10 @@ declare namespace LocalJSX {
          */
         "endpoint"?: string | null;
         "hostWidth"?: string;
+        /**
+          * Define the event with the payload type
+         */
+        "onRowaction"?: (event: EdsTableCustomEvent<{ action: string; row: any; checked: boolean }>) => void;
         /**
           * Enable or disable pagination explicitly
          */
@@ -5444,15 +5489,6 @@ declare module "@stencil/core" {
              */
             "eds-img": LocalJSX.EdsImg & JSXBase.HTMLAttributes<HTMLEdsImgElement>;
             "eds-input": LocalJSX.EdsInput & JSXBase.HTMLAttributes<HTMLEdsInputElement>;
-            /**
-             * `EdsInputField` is a versatile form input component that supports various input types and customization options.
-             * Key Features:
-             * - Supports multiple input types (text, checkbox, radio, select, file) with corresponding behaviors and styling.
-             * - Provides options for validation, including required fields and max length.
-             * - Allows custom messages and error handling with `message` and `errorMessage` props.
-             * - Offers additional features like icons, labels, links, and hints to enhance user experience.
-             * This component provides a structured and configurable form input with additional features to suit various input requirements.
-             */
             "eds-input-field": LocalJSX.EdsInputField & JSXBase.HTMLAttributes<HTMLEdsInputFieldElement>;
             "eds-input-footer": LocalJSX.EdsInputFooter & JSXBase.HTMLAttributes<HTMLEdsInputFooterElement>;
             "eds-input-label": LocalJSX.EdsInputLabel & JSXBase.HTMLAttributes<HTMLEdsInputLabelElement>;

package/dist/types/shared-ui/eds-form/eds-form.d.ts

@@ -80,6 +80,9 @@ export declare class EdsForm {
      */
     el: HTMLElement;
     private formEl;
+    setData(newData: {
+        [key: string]: any;
+    }): Promise<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
     get shouldFormProcessInitData(): boolean;

package/dist/types/shared-ui/eds-steps-v2/eds-steps-v2.d.ts

@@ -22,6 +22,8 @@ export declare class EdsStepsV2 {
      * Optional image source to display above the steps.
      */
     imageSrc?: string;
+    /** Optional image width for the eds-img component. */
+    imageWidth?: number;
     /**
      * If true, apply a background class to the container.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",