@ebrains/components 1.1.0 → 1.2.0

package/dist/types/components/eds-input-field/eds-input-field.d.ts

@@ -1,103 +1,78 @@
-/**
- * `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.
- */
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class EdsInputField {
-    /**
-     * 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 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 placeholder text for the input element.
-     */
+    /** Placeholder text for the input field. */
     placeholder?: string;
-    /**
-     * If `true`, disables the input field.
-     */
+    /** If `true`, the input is disabled. */
     disabled: boolean;
-    /**
-     * The `onChange` event handler for the input element.
-     */
-    onChange?: (event: Event) => void;
-    /**
-     * The `onInput` event handler for the input element.
-     */
-    onInput?: (event: InputEvent) => void;
-    /**
-     * The type of the input element. Defaults to `text`.
-     * Supported types: `text`, `checkbox`, `radio`, `select`, `file`, `search`, etc.
-     */
-    type: string;
-    /**
-     * If `true`, the input field is required.
-     */
+    /** If `true`, the input is required. */
     required: boolean;
-    /**
-     * The label text for the input field.
-     */
+    /** Label text for the input field. */
     label?: string;
-    /**
-     * 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;
-    /**
-     * 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;
     };
-    /**
-     * An additional message displayed below the input field.
-     */
+    /** Message shown below the input (e.g., additional info or validation message). */
     message?: string;
-    /**
-     * If `true`, marks the input field as having an error.
-     */
+    /** If `true`, renders the input with error styles. */
     error: boolean;
-    /**
-     * If `true`, the input field is checked (for `checkbox` or `radio` types).
-     */
+    /** If `true`, the checkbox/radio is checked. */
     checked?: boolean;
-    /**
-     * The error message displayed when validation fails.
-     */
+    /** Error message text shown when validation fails. */
     errorMessage?: string;
-    /**
-     * The value of the input field.
-     */
+    /** The value of the input. Can be `string` or `number`. */
     value?: string | number;
-    /**
-     * The maximum length of the input value (for `text` types).
-     */
+    /** The maximum allowed length for text input. */
     maxLength?: number;
     /**
-     * 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;
     }[];
+    /** Type of the input: e.g., `text`, `checkbox`, `select`, `range`, etc. */
+    type: string;
+    /**
+     * Native `onChange` handler for React/Vue wrappers.
+     * Enables use without manually attaching DOM event listeners.
+     */
+    onChangeNative?: (event: Event) => void;
+    /**
+     * Native `onInput` handler for React/Vue wrappers.
+     * Enables use without manually attaching DOM event listeners.
+     */
+    onInput?: (event: InputEvent) => void;
     /**
-     * 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;
+    /**
+     * Emits on every user input (key press, typing, etc.).
+     * Use `event.detail.value` to access the new value.
+     */
+    edsinput: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Emits on blur or change event (e.g., selecting an option, leaving the field).
+     * Use `event.detail.value` to access the final value.
+     */
+    edschange: EventEmitter<{
+        value: string;
+    }>;
+    /** Reference to the host element. */
     hostEl: HTMLElement;
     private shouldEmitValue;
     private handleNativeInput;

package/dist/types/components.d.ts

@@ -7,16 +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";
-import { VNode } from "./stencil-public-runtime";
 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 { VNode } from "./stencil-public-runtime";
 export namespace Components {
     interface ColorPrimaryPalette {
     }
@@ -1078,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;
     }
@@ -1905,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;
@@ -2615,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;
@@ -4313,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;
     }
@@ -5492,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/package.json

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