@ebrains/components 0.0.1-alpha.0 → 0.3.0-alpha.0

package/dist/stencil.config.js

@@ -39,13 +39,14 @@ export const config = {
         },
         reactOutputTarget({
             componentCorePackage: '@ebrains/components',
-            proxiesFile: '../../../packages/react/src/generated/components.ts',
-            includeDefineCustomElements: true //not use to build it
+            proxiesFile: '../../../packages/react/src/components.ts',
+            includeDefineCustomElements: true
         }),
         vueOutputTarget({
             componentCorePackage: '@ebrains/components',
             proxiesFile: '../../../packages/vue/src/generated/components.ts',
-            //includeDefineCustomElements: true, //not use to build it
+            //includeImportCustomElements: true,
+            includeDefineCustomElements: true, //not use to build it
         }),
         angularOutputTarget({
             componentCorePackage: '@ebrains/components',

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

@@ -44,9 +44,9 @@ export declare class EdsAccordion {
     /** Event emitted when the accordion toggles, indicating the new expanded/collapsed state */
     accordionChange: EventEmitter<boolean>;
     /** Reference to the wrapper element for the accordion */
-    wrapperRef: HTMLDivElement;
+    private wrapperRef;
     /** Reference to the element containing the main content */
-    childContentRef: HTMLDivElement;
+    private childContentRef;
     /**
      * Handles the click event on the accordion header to toggle expansion.
      * Toggles the `isExpanded` state and emits the `accordionChange` event.

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

@@ -48,11 +48,7 @@ export declare class EdsBreadcrumb {
      */
     el: HTMLElement;
     /**
-     * Watch for changes to the `items` prop and parse it when it changes.
-     * Converts the `items` string into an array of objects if it is a JSON string.
-     * If the format is invalid, it logs an error and sets an empty array.
-     *
-     * @param newValue - The new value for the `items` prop.
+     * Watches for changes to the `items` prop and parses it.
      */
     parseItems(newValue: string | Link[]): void;
     /**

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

@@ -15,7 +15,7 @@ export declare class EdsButton {
     /**
      * The label text to be displayed inside the button.
      */
-    label?: string;
+    label: string;
     /**
      * The accessible aria-label for the button, used when there is no visible label.
      */
@@ -28,7 +28,7 @@ export declare class EdsButton {
      * The visual intent or style of the button.
      * Options include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'.
      */
-    intent?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse';
+    intent: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse';
     /**
      * A boolean indicating whether the button is in a loading state.
      */

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

@@ -74,6 +74,8 @@ export declare class EdsCardGeneric {
      */
     parsedImage: any;
     componentWillLoad(): void;
+    private parentContext;
+    handleParentContext(event: CustomEvent): void;
     /**
      * Parses the `tags` prop into an array of link objects.
      * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.

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

@@ -38,6 +38,10 @@ export declare class EdsForm {
      * The message displayed when the form submission fails.
      */
     errorMessage?: string;
+    /**
+     * The message displayed when the form submission fails.
+     */
+    submitBtnHintMessage?: string;
     /**
      * The API endpoint where the form data will be submitted.
      */
@@ -57,6 +61,9 @@ export declare class EdsForm {
      * ```
      */
     fields: string;
+    values: {
+        [key: string]: any;
+    };
     /**
      * Couping Auth and Submit button state
      * Submit button's state (disabled) is coupled with the Users' auth state - if user auth true then submit btn is enabled
@@ -99,6 +106,7 @@ export declare class EdsForm {
     private formEl;
     componentDidLoad(): void;
     emitContext(linkElement: HTMLElement): void;
+    isFieldVisible(field: any): boolean;
     validateField(name: string, value: string | number, type: string, required: boolean, maxLength?: number): string[];
     validateFieldGroup(name: string, _type: string, required: boolean): string[];
     validateSingleBox(name: string, required: boolean): string[];

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

@@ -1,21 +1,124 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 /**
- * @internal
+ * 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.
  */
 export declare class EdsInputSelect {
+    /**
+     * Optional id for the input. If not provided, the component uses the `name` property.
+     */
     inputId?: string;
+    /**
+     * The name attribute of the select input. Also used as the fallback id.
+     */
     name: string;
+    /**
+     * Placeholder text (not used in the native select, but can be used for custom implementations).
+     */
     placeholder?: string;
+    /**
+     * If true, the select input will be disabled.
+     */
     disabled: boolean;
+    /**
+     * If true, indicates that there is an associated message (help or error).
+     */
     hasMessage: boolean;
+    /**
+     * If true, the select input is in an error state.
+     */
     error: boolean;
+    /**
+     * If true, the select input is marked 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: {
-        label: string;
-        value: string;
+        [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.
+     */
     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;
+    /**
+     * 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;
     render(): any;
 }

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

@@ -27,6 +27,10 @@ export declare class EdsModal {
      * Default is 3 lines.
      */
     truncateLines: string;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
     private getTruncateClass;
     /**
      * Opens the modal.
@@ -40,5 +44,17 @@ export declare class EdsModal {
      * Toggles the modal open or closed.
      */
     toggle(): Promise<void>;
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad(): void;
+    /**
+     * Emits a custom event called `parentContext` for a given button element.
+     * This event provides context information about the eds-modal component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
+     */
+    emitContext(btnElement: HTMLElement): void;
     render(): any;
 }

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

@@ -29,6 +29,14 @@ export declare class EdsTable {
     paginationEnabled: boolean;
     /** Enable or disable search input for filtering */
     searchEnabled: boolean;
+    hostWidth?: string;
+    /**
+   * Optional property to control the column sizing mode.
+   * - 'default' uses containerWidth / visibleColumns.
+   * - 'medium' divides that result by 2.
+   * - 'large' divides that result by 4.
+   */
+    columnSize?: 'default' | 'medium' | 'large';
     /** Internal state for pagination and data */
     tableData: {
         [key: string]: any;
@@ -61,6 +69,6 @@ export declare class EdsTable {
     private shouldEnablePagination;
     private updateColumns;
     private getVisibleColumnsCount;
-    private minWidth;
+    private divisionFactor;
     render(): any;
 }

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

@@ -58,73 +58,6 @@ declare const _default: {
 export default _default;
 export declare const Default: {
     render: (args: any) => string;
-};
-export declare const WithHiddenColumn: {
-    render: (args: any) => string;
-    args: {
-        data: {
-            Property: string;
-            Type: string;
-            Required: string;
-        }[];
-        config: {
-            Required: {
-                hidden: boolean;
-            };
-        };
-    };
-};
-export declare const WithEndpoint: {
-    render: (args: any) => string;
-    args: {
-        endpoint: string;
-    };
-};
-export declare const WithCustomFormats: {
-    render: (args: any) => string;
-    args: {
-        data: {
-            Property: string;
-            Type: string;
-            Role: string;
-        }[];
-        config: {
-            Property: {
-                format: string;
-            };
-            Type: {
-                format: string;
-            };
-            Role: {
-                format: string;
-            };
-        };
-    };
-};
-export declare const BasicPagination: {
-    render: (args: any) => string;
-    args: {
-        rowsPerPage: number;
-        paginationEnabled: boolean;
-    };
-};
-export declare const CustomRowsPerPage: {
-    render: (args: any) => string;
-    args: {
-        rowsPerPage: number;
-        paginationEnabled: boolean;
-    };
-};
-export declare const CustomRowsPerPageEndpoint: {
-    render: (args: any) => string;
-    args: {
-        rowsPerPage: number;
-        paginationEnabled: boolean;
-        endpoint: string;
-    };
-};
-export declare const CompleteExample: {
-    render: (args: any) => string;
     args: {
         data: {
             name: string;
@@ -145,3 +78,9 @@ export declare const CompleteExample: {
         endpoint: string;
     };
 };
+export declare const WithEndpoint: {
+    render: (args: any) => string;
+    args: {
+        endpoint: string;
+    };
+};

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

@@ -0,0 +1,26 @@
+export declare class EdsTimeline {
+    /**
+     * Accepts a JSON string or object of timeline events.
+     */
+    events: string | any[];
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    selectedEvent: any;
+    parsedEvents: Array<{
+        id: number;
+        title: string;
+        category: string;
+        description: string;
+        fullDescription: string;
+        completed: boolean;
+    }>;
+    parseEvents(newValue: string | any[]): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    emitContext(cardElement: HTMLElement): void;
+    private modalRef;
+    private handleEventClick;
+    render(): any;
+}

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

@@ -0,0 +1,24 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        events: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+    args: {
+        events: {
+            id: string;
+            title: string;
+            category: string;
+            description: string;
+            fullDescription: string;
+            completed: boolean;
+        }[];
+    };
+};

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

@@ -0,0 +1,12 @@
+/**
+ * @internal
+ */
+export declare class EdsTrl {
+    /**
+     * Accepts a JSON string or an array of application objects.
+     */
+    applications: string | any[];
+    private getParsedApplications;
+    private calculateProgress;
+    render(): any;
+}