@ebrains/components 0.9.3-beta → 1.1.0

package/dist/types/components/eds-avatar/eds-avatar.d.ts

@@ -1,5 +1,5 @@
 /**
- * `EdsAvatar` is a versatile component for displaying user profile representations, including initials or profile pictures.
+ * `EdsAvatar` is a component for displaying user profile representations, including initials or profile pictures.
  * This component is customizable to adapt to various styles and use cases.
  *
  * Key features include:
@@ -8,7 +8,6 @@
  * - Customizable background color, including gradient options.
  * - Configurable shape (rounded or square) and font strength for initials.
  *
- * The avatar component offers flexibility for different user profile displays, supporting use cases from contact lists to detailed profile views.
  */
 export declare class EdsAvatar {
     /**
@@ -28,9 +27,9 @@ export declare class EdsAvatar {
      */
     initials?: string;
     /**
-     * Background color variant for the avatar, which can apply specific gradient or background colors.
+     * Background color: 'grey' for grey background, 'black' for black background with accent text.
      */
-    color?: string;
+    color: 'grey' | 'black';
     /**
      * Flag to render the avatar with rounded (pill) shape if `true`.
      */

package/dist/types/components/eds-avatar/eds-avatar.stories.d.ts

@@ -15,7 +15,8 @@ declare const _default: {
             control: string;
         };
         color: {
-            control: string;
+            type: string;
+            options: string[];
         };
     };
     args: {

package/dist/types/components/eds-block-break/eds-block-break.d.ts

@@ -1,15 +1,10 @@
 /**
  * `EdsBlockBreak` is a divider component designed to render a horizontal line that separates content visually.
- * This component includes customizable styling options to adapt to various layouts and design needs.
- *
- * Key features include:
- * - Configurable additional classes for styling through the `extraClass` prop.
- * - Suitable for dividing sections or breaking content blocks within a page.
  */
 export declare class EdsBlockBreak {
     /**
-     * Additional classes for styling the component.
+     * Whether to use the inverse break style
      */
-    extraClass: string;
+    inverse: boolean;
     render(): any;
 }

package/dist/types/components/eds-button/eds-button.d.ts

@@ -68,7 +68,6 @@ export declare class EdsButton {
      */
     el: HTMLElement;
     private button;
-    private iconCva;
     private parentContext;
     handleParentContext(event: CustomEvent): void;
     private handleClick;

package/dist/types/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.d.ts

@@ -14,11 +14,6 @@ export declare class EdsCardDesc {
      * The description text to be displayed inside the card.
      */
     description: string;
-    /**
-     * A custom CSS class to style the description text.
-     * Default is 'f-ui-03-light'.
-     */
-    descClass: string;
     /**
      * A boolean indicating whether the description should be truncated.
      * Default is `true`.

package/dist/types/components/eds-charts/eds-gauge/eds-gauge.d.ts

@@ -0,0 +1,14 @@
+export declare class EdsGauge {
+    /** Diameter of the pie chart (pixels) */
+    size: number;
+    /** Minimum value (gauge start) */
+    valueMin: number;
+    /** Maximum value (gauge end) */
+    valueMax: number;
+    /** Current value */
+    value: number;
+    /** Thickness of inner mask as fraction of radius (0.1–0.2). Values outside this range will be clamped. */
+    thickness: number;
+    variant: 'default' | 'dark' | 'strong' | 'black';
+    render(): any;
+}

package/dist/types/components/eds-charts/eds-gauge/eds-gauge.stories.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: string;
+            description: string;
+        };
+        valueMin: {
+            control: string;
+            description: string;
+        };
+        valueMax: {
+            control: string;
+            description: string;
+        };
+        value: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        thickness: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        size: number;
+        valueMin: number;
+        valueMax: number;
+        value: number;
+        thickness: number;
+        variant: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

package/dist/types/components/eds-charts/eds-pie/eds-pie.d.ts

@@ -0,0 +1,28 @@
+interface PieSlice {
+    id: string;
+    value: number;
+    label: string;
+    color?: string;
+}
+type DisplayMode = 'value' | 'percent';
+export declare class EdsPie {
+    /** Diameter in pixels */
+    size: number;
+    /** Array or JSON string of slices */
+    slices: PieSlice[] | string;
+    /** Inner-radius fraction (always 0.5-1) */
+    thickness: number;
+    /** Show raw value or percentage */
+    display: DisplayMode;
+    /** Show legend */
+    legend: boolean;
+    /** Color scheme: semantic, brand, or mono */
+    colorScheme: 'semantic' | 'mono';
+    private static MAX_SLICES;
+    private static PALETTES;
+    private parseSlices;
+    private polarToCartesian;
+    private describeArc;
+    render(): any;
+}
+export {};

package/dist/types/components/eds-charts/eds-pie/eds-pie.stories.d.ts

@@ -0,0 +1,60 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: string;
+            description: string;
+        };
+        slices: {
+            control: string;
+            description: string;
+        };
+        thickness: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        display: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        legend: {
+            control: string;
+            description: string;
+        };
+        colorScheme: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        size: number;
+        slices: {
+            id: string;
+            value: number;
+            label: string;
+        }[];
+        thickness: number;
+        display: string;
+        legend: boolean;
+        colorScheme: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};
+export declare const Thickness: {
+    render: (args: any) => string;
+    args: {
+        size: number;
+        thickness: number;
+    };
+};

package/dist/types/components/eds-input-elements/eds-input-select/eds-input-select.d.ts

@@ -1,133 +1,35 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 /**
- * A custom select input component that supports both static and dynamic options.
- *
- * Options can be provided in two formats:
- * 1. Dynamic fetch configuration:
- *    [
- *      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }
- *    ]
- * 2. Static options:
- *    [
- *      { value: "react", label: "React" },
- *      { value: "angular", label: "Angular" },
- *      { value: "vue", label: "Vue.js" },
- *      // etc.
- *    ]
- *
- * The component will automatically fetch data if a dynamic configuration is provided.
+ * `eds-input-select` is a lightweight, presentational select component.
+ * It accepts a static list of { value, label } options and emits a changeEvent when selection changes.
  */
 /**
  * @internal
  */
 export declare class EdsInputSelect {
-    /**
-     * Optional id for the input. If not provided, the component uses the `name` property.
-     */
+    /** Optional id for the select element; defaults to name */
     inputId?: string;
-    /**
-     * The name attribute of the select input. Also used as the fallback id.
-     */
+    /** Name attribute of the select */
     name: string;
-    /**
-     * Placeholder text (not used in the native select, but can be used for custom implementations).
-     */
+    /** Placeholder shown as a disabled hidden option */
     placeholder?: string;
-    /**
-     * If true, the select input will be disabled.
-     */
+    /** Disable the select */
     disabled: boolean;
-    /**
-     * If true, indicates that there is an associated message (help or error).
-     */
+    /** Show associated message (help or error) */
     hasMessage: boolean;
-    /**
-     * If true, the select input is in an error state.
-     */
+    /** Mark field as invalid */
     error: boolean;
-    /**
-     * If true, the select input is marked as required.
-     */
+    /** Mark field as required */
     required: boolean;
-    /**
-     * Options can be provided in two formats:
-     *
-     * 1. Dynamic fetch configuration:
-     *    [
-     *      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }
-     *    ]
-     *
-     * 2. Static options:
-     *    [
-     *      { value: "react", label: "React" },
-     *      { value: "angular", label: "Angular" },
-     *      { value: "vue", label: "Vue.js" },
-     *      // etc.
-     *    ]
-     */
-    options: {
-        [key: string]: any;
-    }[];
-    /**
-     * For static options, this property defines the key used to retrieve the display label.
-     */
-    labelKey: string;
-    /**
-     * For static options, this property defines the key used to retrieve the option value.
-     */
-    valueKey: string;
-    /**
-     * The currently selected value.
-     */
+    /** List of static options: { value, label } */
+    options: Array<{
+        value: string | number;
+        label: string;
+    }>;
+    /** Currently selected value */
     value?: string | number;
-    /**
-     * Holds the list of options to be rendered in the select. This can be either:
-     * - The static options passed in via the `options` prop.
-     * - Or the dynamically fetched options.
-     */
-    dynamicOptions: {
-        [key: string]: any;
-    }[];
-    /**
-     * Indicates whether the component is currently loading dynamic options.
-     */
-    loading: boolean;
-    /**
-     * Internal state that holds the key used to map the option's value.
-     */
-    dynamicValueKey: string;
-    /**
-     * Internal state that holds the key used to map the option's display label.
-     */
-    dynamicLabelKey: string;
-    /**
-     * Flag to indicate if dynamic options have already been fetched.
-     * Prevents duplicate API calls on subsequent updates.
-     */
-    hasFetched: boolean;
-    /**
-     * Emitted when the value of the select input changes.
-     * @event changeEvent
-     */
-    changeEvent: EventEmitter<string | number>;
-    componentWillLoad(): void;
-    /**
-     * Watches for changes in the `options` prop and loads the options accordingly.
-     *
-     * If the first object in the options array contains an "endpoint" key,
-     * the component will fetch options from the specified endpoint using the configured keys.
-     * Otherwise, it will treat the options as static.
-     *
-     * @async
-     */
-    loadOptions(): Promise<void>;
-    /**
-     * Event handler for the select input's change event.
-     * Emits the selected value.
-     *
-     * @param event The change event from the select input.
-     */
-    handleChange: (event: Event) => void;
-    getValueByPath(obj: any, path: any): any;
+    /** Emitted when selection changes */
+    edsselect: EventEmitter<string | number>;
+    private handleChange;
     render(): any;
 }

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

@@ -93,7 +93,13 @@ export declare class EdsInputField {
         value: string | number;
         label: string;
     }[];
+    /**
+     * Control whether the component emits value events (`oninput` / `onchange`).
+     * Defaults to `true`. Password fields are always suppressed for security.
+     */
+    exposeValueEvents: boolean;
     hostEl: HTMLElement;
+    private shouldEmitValue;
     private handleNativeInput;
     private handleNativeChange;
     get parsedOptions(): any;

package/dist/types/components/eds-progress-bar/eds-progress-bar.d.ts

@@ -1,8 +1,8 @@
 export declare class EdsProgressBar {
-    /**
-     * The progress value (0-100).
-     */
+    /** The progress value (0-100). */
     value: number;
+    /** Whether to render with rounded corners. */
+    rounded: boolean;
     /**
      * Method to update the progress value externally.
      * @param newValue The new progress value (0-100).

package/dist/types/components/eds-progress-bar/eds-progress-bar.stories.d.ts

@@ -10,6 +10,9 @@ declare const _default: {
             };
             description: string;
         };
+        rounded: {
+            control: string;
+        };
     };
     args: {
         value: number;

package/dist/types/components/eds-section/eds-section-core/eds-section-core.d.ts

@@ -8,6 +8,9 @@
  *
  * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
  */
+/**
+ * @internal
+ */
 export declare class EdsSectionCore {
     /**
      * The HTML tag to be used for the section. Can be either 'div' or 'section'.

package/dist/types/components/eds-switch/eds-switch.d.ts

@@ -19,7 +19,8 @@ export declare class EdsSwitch {
     /**
      * Emitted when the switch is toggled.
      */
-    toggle: EventEmitter<boolean>;
+    uiswitch: EventEmitter<boolean>;
+    el: HTMLElement;
     private toggleSwitch;
     render(): any;
 }

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

package/dist/types/components/eds-table/eds-table.stories.d.ts

@@ -10,10 +10,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        endpoint: {
-            control: string;
-            description: string;
-        };
         rowsPerPage: {
             control: {
                 type: string;
@@ -80,13 +76,9 @@ export declare const Default: {
         rowsPerPage: number;
         paginationEnabled: boolean;
         searchEnabled: boolean;
-        endpoint: string;
         columnSize: string;
     };
 };
 export declare const WithEndpoint: {
     render: (args: any) => string;
-    args: {
-        endpoint: string;
-    };
 };

package/dist/types/components/eds-timeline/eds-timeline.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @internal
+ */
 export declare class EdsTimeline {
     /**
      * Accepts a JSON string or object of timeline events.

package/dist/types/components/eds-toast/eds-toast.d.ts

@@ -9,9 +9,10 @@ export declare class EdsToast {
     intent: 'default' | 'success' | 'error' | 'warning';
     /**
      * Determines the duration before the toast auto-dismisses (in milliseconds).
-     * Defaults to 5000ms (5 seconds).
+     * If set, the toast will auto-dismiss and show a close button.
+     * If not set (or set to 0), it will persist without a close button.
      */
-    duration: number;
+    duration?: number;
     /**
      * Internal state to control visibility of the toast.
      */

package/dist/types/components/eds-tooltip/eds-tooltip.d.ts

@@ -6,42 +6,8 @@ export declare class EdsTooltip {
      * The content of the tooltip.
      */
     content?: string;
-    /**
-     * The preferred position of the tooltip (`above`, `below`, `left`, `right`).
-     */
-    position: 'above' | 'below';
-    /**
-     * The visibility state of the tooltip.
-     */
-    isVisible: boolean;
-    /**
-     * Tracks if the tooltip's position has been calculated.
-     */
-    isPositioned: boolean;
-    /**
-     * Tooltip style to dynamically position the element.
-     */
-    tooltipStyle: {
-        top: string;
-        left: string;
-        transform: string;
-    };
     el: HTMLElement;
-    /**
-     * Show the tooltip and update its position.
-     */
-    showTooltip(): Promise<void>;
-    /**
-     * Hide the tooltip.
-     */
-    hideTooltip(): void;
-    /**
-     * Hide the tooltip when the `Escape` key is pressed.
-     */
-    handleKeyPress(event: KeyboardEvent): void;
-    /**
-     * Update the tooltip's position dynamically based on the slotted element's dimensions and position.
-     */
-    private updateTooltipPosition;
+    /** fire analytics on every hover */
+    handleHover(): void;
     render(): any;
 }