@ebrains/components 1.0.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/eds-table/eds-table.d.ts

@@ -1,3 +1,42 @@
+/**
+ * <eds-table
+      table-data='[
+        { "Property": "username", "Type": "string", "Required": "Yes" },
+        { "Property": "password", "Type": "string", "Required": "Yes" },
+        { "Property": "email", "Type": "string", "Required": "No" }
+      ]'
+      config='{
+        "Type": { "format": "uppercase" },
+        "Property": { "format": "code" },
+        "Required": { "hidden": true }
+      }'
+      actions='[
+        { "name": "view",  "label": "View"  },
+        { "name": "edit",  "label": "Edit"  },
+        { "name": "delete", "type": "checkbox" }
+      ]'
+    ></eds-table>
+
+    <script>
+      const table = document.querySelector('eds-table');
+      table.addEventListener('rowaction', e => {
+        const { action, row } = e.detail;
+        console.log(e.detail)
+        // etc.
+      });
+    </script>
+ */
+import { VNode, EventEmitter } from '../../stencil-public-runtime';
+export interface TableAction {
+    /** unique action key */
+    name: string;
+    /** button label or checkbox aria-label */
+    label: string;
+    /** 'button' (default) or 'checkbox' */
+    type?: 'button' | 'checkbox';
+    /** optional: field in row to bind checkbox state */
+    field?: string;
+}
 /**
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
  *
@@ -37,6 +76,22 @@ export declare class EdsTable {
      * - 'large' divides that result by 4.
      */
     columnSize?: 'default' | 'medium' | 'large';
+    /**
+     * 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: 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;
+    /** Parsed actions as array */
+    parsedActions: TableAction[];
+    /** Just the original data keys (no action columns) */
+    dataColumns: string[];
     /** Internal state for pagination and data */
     tbData: {
         [key: string]: any;
@@ -53,8 +108,15 @@ export declare class EdsTable {
     searchQuery: string;
     containerWidth: number;
     hostEl: HTMLElement;
+    /** Define the event with the payload type */
+    rowaction: EventEmitter<{
+        action: string;
+        row: any;
+        checked: boolean;
+    }>;
     handleDataChange(): void;
     handleConfigChange(): void;
+    handleActionsChange(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
@@ -70,9 +132,16 @@ export declare class EdsTable {
     private handlePageChange;
     private handleSearch;
     private renderCell;
+    /**
+     * Renders one action (button or checkbox) for a specific action‐name.
+     * Used by the “Actions” column below.
+     */
+    private renderSingleActionCell;
+    private emitAction;
     private shouldEnablePagination;
     private updateColumns;
     private getVisibleColumnsCount;
     private divisionFactor;
+    private capitalize;
     render(): any;
 }