@ebrains/components 0.6.0-alpha.0 → 0.7.0-alpha.0

package/dist/types/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/.stencil/packages/svgs/src/lib/svgs.d.ts

@@ -43,4 +43,7 @@ import more from '../img/more.svg';
 import user from '../img/user.svg';
 import copy from '../img/copy.svg';
 import unknown from '../img/unknown.svg';
-export { twitter, linkedin, facebook, youtube, mastodon, bluesky, euSvg, arrowRight, arrowDiagonal, chevronUp, chevronDown, chevronRight, chevronLeft, check, clear, close, completed, copy, documentation, download, error, gitlabColor, gitlabBlack, loader, hLogoColor, hLogoBlack, hLogoColorWhite, hLogoWhite, hLogoWhiteNoBg, vLogoColor, vLogoBlack, vLogoColorWhite, vLogoWhite, vLogoWhiteNoBg, vLogoMargins, menu, more, failed, filter, group, user, search, success, warning, unknown };
+import thumbsUp from '../img/thumbs-up.svg';
+import thumbsDown from '../img/thumbs-down.svg';
+import star from '../img/star.svg';
+export { twitter, linkedin, facebook, youtube, mastodon, bluesky, euSvg, arrowRight, arrowDiagonal, chevronUp, chevronDown, chevronRight, chevronLeft, check, clear, close, completed, copy, documentation, download, error, gitlabColor, gitlabBlack, loader, hLogoColor, hLogoBlack, hLogoColorWhite, hLogoWhite, hLogoWhiteNoBg, vLogoColor, vLogoBlack, vLogoColorWhite, vLogoWhite, vLogoWhiteNoBg, vLogoMargins, menu, more, failed, filter, group, user, search, success, warning, unknown, thumbsUp, thumbsDown, star };

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

@@ -7,7 +7,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  *
  * It includes an optional button or link element within the header, which can be customized for additional interactions.
  *
- * The `accordionChange` event is emitted when the accordion's expanded state changes, allowing parent components
+ * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent components
  * to track its open/close status.
  *
  * Key features include:
@@ -42,7 +42,7 @@ export declare class EdsAccordion {
     /** Tracks if the content is considered "short" based on the current layout */
     shortContent: boolean;
     /** Event emitted when the accordion toggles, indicating the new expanded/collapsed state */
-    accordionChange: EventEmitter<boolean>;
+    accordion: EventEmitter<boolean>;
     /** Reference to the wrapper element for the accordion */
     private wrapperRef;
     /** Reference to the element containing the main content */
@@ -54,7 +54,7 @@ export declare class EdsAccordion {
     componentDidLoad(): void;
     /**
      * Handles the click event on the accordion header to toggle expansion.
-     * Toggles the `isExpanded` state and emits the `accordionChange` event.
+     * Toggles the `isExpanded` state and emits the `accordion` event.
      */
     private handleClick;
     /**

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * `EdsDropdown` is a versatile dropdown component that provides a list of items
  * that appear upon clicking the dropdown button. It supports various customization options,
@@ -76,6 +77,10 @@ export declare class EdsDropdown {
      * Reference to the host element.
      */
     host: HTMLElement;
+    /** Event emitted when the dropdown toggles, indicating the new expanded/collapsed state */
+    dropdown: EventEmitter<{
+        expanded: boolean;
+    }>;
     private dropdownContent?;
     private focusableItems;
     /**

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

@@ -1,4 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+interface User {
+    token: string;
+    email: string;
+    name: string;
+    [key: string]: any;
+}
 /**
  * `EdsForm` is a comprehensive form component designed to handle form submission with validation,
  * error handling, and customizable fields. It offers several options for handling alerts and
@@ -57,15 +63,31 @@ export declare class EdsForm {
      * ```
      */
     fields: string | any[];
-    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
      * This useful when the component is used as Survey and more types.
      */
     coupleAuth: boolean;
+    /**
+     * The user object containing user information.
+     * This is populated after a successful authentication.
+     */
+    user?: User;
+    /**
+     * Whether the form is in draft mode.
+     * Meaning it will attempt to post each input change invalidated.
+     */
+    draft?: boolean;
+    /**
+     * The draft data the form will attempt to populate in the provided fields.
+     */
+    draftData: {
+        [key: string]: any;
+    };
+    values: {
+        [key: string]: any;
+    };
     /**
      * Tracks whether the form was successfully submitted.
      */
@@ -88,29 +110,39 @@ export declare class EdsForm {
      * The alert message displayed after form submission or validation.
      */
     alertMessage: string | null;
-    /**
-     * Emits an event when the form's submission state changes.
-     */
-    formSubmitting: EventEmitter<boolean>;
+    isAuthenticated: boolean;
+    parsedFields: any[];
+    form: EventEmitter<{
+        event: 'input' | 'change' | 'submit';
+        validated?: boolean;
+        field?: string;
+        value?: any;
+        message?: string;
+        success?: boolean;
+        data: any;
+    }>;
     /**
      * Reference to the host element.
      */
     el: HTMLElement;
-    isAuthenticated: boolean;
-    authUser: any;
-    parsedFields: any[];
-    onAuthStatusChanged(event: CustomEvent<any>): void;
     private formEl;
-    componentDidLoad(): void;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): Promise<void>;
+    get shouldFormAcceptDraft(): boolean;
+    get shouldFormProcessDraft(): boolean;
+    parseFields(newValue: string | any[]): void;
+    loadDraft(): 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[];
     validateForm(): void;
-    private findFieldElement;
-    handleChange: (e: Event, field: any) => void;
-    handleSubmit: (e: Event) => Promise<void>;
-    getFormData(): Promise<FormData>;
-    parseFields(newValue: string | any[]): void;
+    populateFormWithDraftData(draftData: {
+        [key: string]: any;
+    }): void;
+    getFormData(): FormData;
+    handleChange(e: Event, field: any): void;
+    handleInput(e: Event, field: any): void;
+    handleSubmit(e: Event): Promise<void>;
+    postFormDataWithoutValidation(): Promise<void>;
     render(): any;
 }
+export {};

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

@@ -0,0 +1,99 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `EdsFormV2` is a comprehensive form component designed to handle form submission with validation,
+ * error handling, and customizable fields.
+ *
+ * Key Features:
+ * - Configurable validation for fields, including dynamic field validation.
+ * - Optionally includes a submit button, which can display a loading state during submission.
+ * - Supports file upload, hidden fields, and dynamic field parsing.
+ * - Emits `form` event when the form is submitting/validating or there are field updates.
+ *
+ * This component is ideal for implementing complex forms with specific validation and submission behaviors.
+ */
+export declare class EdsFormV2 {
+    /**
+     * The name of the form, used for grouping inputs and identifying the form.
+     */
+    name: string;
+    /**
+     * If `true`, includes the current form URL in the submission data.
+     */
+    setFormUrl?: boolean;
+    /**
+     * If `true`, includes a submit button in the form.
+     */
+    formBtn?: boolean;
+    /**
+     * If `true`, includes a submit button in the form.
+     */
+    formBtnLabel?: string;
+    /**
+     * The message displayed when the form submission fails.
+     */
+    errorMessage?: string;
+    /**
+     * A JSON string representing the fields in the form.
+     * Example:
+     * ```json
+     * [
+     *   { "name": "email", "label": "Email", "type": "text", "required": true },
+     *   { "name": "password", "label": "Password", "type": "password", "required": true }
+     * ]
+     * ```
+     */
+    fields: string | any[];
+    /**
+     * The init data the form will attempt to populate in the provided fields.
+     */
+    initData: {
+        [key: string]: any;
+    };
+    values: {
+        [key: string]: any;
+    };
+    /**
+     * Indicates whether the form is currently submitting.
+     */
+    isSubmitting: boolean;
+    /**
+     * Tracks whether the form has any errors.
+     */
+    hasError: boolean;
+    /**
+     * A dictionary of field names and their corresponding error messages.
+     */
+    errors: {
+        [key: string]: string[];
+    };
+    parsedFields: any[];
+    form: EventEmitter<{
+        event: 'input' | 'change' | 'submit';
+        validated?: boolean;
+        field?: string;
+        value?: any;
+        message?: string;
+        success?: boolean;
+        data: any;
+    }>;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    private formEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    get shouldFormProcessInitData(): boolean;
+    parseFields(newValue: string | any[]): void;
+    emitContext(linkElement: HTMLElement): void;
+    isFieldVisible(field: any): boolean;
+    validateForm(): void;
+    populateFormWithInitData(initData: {
+        [key: string]: any;
+    }): void;
+    getFormData(): FormData;
+    handleChange(e: Event, field: any): void;
+    handleInput(e: Event, field: any): void;
+    handleSubmit(): void;
+    render(): any;
+}

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

@@ -0,0 +1,27 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        name: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+        fields: {
+            control: string;
+            description: string;
+        };
+        formBtn: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+        };
+        formBtnLabel: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components/eds-icons/eds-icon-star/eds-icon-star.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconStar {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-thumbs-down/eds-icon-thumbs-down.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconThumbsDown {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-thumbs-up/eds-icon-thumbs-up.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconThumbsUp {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 /**
  * `EdsInputSearch` is a specialized input component for search functionality,
  * integrating a search icon on the left and a shortcut indicator on the right.
@@ -12,6 +13,11 @@ export declare class EdsInputSearch {
     value?: string;
     disabled: boolean;
     required: boolean;
+    decorate: string;
+    search: EventEmitter<{
+        event: 'input' | 'change';
+        value: any;
+    }>;
     /**
      * Reference to the host element.
      */
@@ -19,7 +25,6 @@ export declare class EdsInputSearch {
     private inputElement;
     componentDidLoad(): void;
     getInputElement(): Promise<HTMLInputElement>;
-    onInput: (e: any) => void;
     onChange: (e: any) => void;
     render(): any;
 }

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

@@ -62,6 +62,14 @@ export declare class EdsModal {
      * Toggles the modal open or closed.
      */
     toggle(): Promise<void>;
+    /**
+     * Listens for global custom events to open the modal.
+     */
+    handleGlobalOpen(): void;
+    /**
+     * Listens for global custom events to close the modal.
+     */
+    handleGlobalClose(): void;
     /**
      * Closes the modal when the Escape key is pressed.
      */

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

@@ -15,7 +15,7 @@ interface Link {
  *
  * Key Features:
  * - Supports two display modes: "default" (shows numbered page links) and "navigator" (shows Previous/Next buttons).
- * - Emits a `pageChange` event when the page is changed in "default" mode.
+ * - Emits a `page` event when the page is changed in "default" mode.
  * - Automatically generates pagination links based on the `currentPage` and `lastPage`.
  *
  * This component is designed for flexible and accessible pagination controls, suitable for various display needs.

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

@@ -1,17 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class EdsRating {
     /**
-     * Number of stars in the rating system.
-     */
-    stars: number;
-    /**
-     * The label text for the rating component.
+     * The type of icon to display. Can be "stars" or "thumbs".
      */
-    label?: string;
+    ratingType: 'star' | 'thumbs-up' | 'thumbs-down';
     /**
-     * Mapping of text to star ratings.
+     * Number of stars in the rating system.
      */
-    textMapping: string | string[];
+    ratingCount: number;
     /**
      * Current selected rating value.
      */
@@ -19,11 +15,23 @@ export declare class EdsRating {
     /**
      * Event emitted when the rating is changed.
      */
-    ratingChange: EventEmitter<number>;
+    rating: EventEmitter<number>;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    /**
+     * 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;
     /**
-     * Parses the `textMapping` prop into an array of strings.
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
      */
-    get parsedMappings(): string[];
+    emitContext(btnElement: HTMLElement): void;
     /**
      * Handles the click event on a star.
      * @param rating - The selected rating value.

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

@@ -2,50 +2,36 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        stars: {
+        type: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        count: {
             control: {
                 type: string;
                 min: number;
             };
             description: string;
         };
-        label: {
-            control: string;
-            description: string;
-        };
-        textMapping: {
-            control: string;
-            description: string;
-        };
     };
     args: {
-        stars: number;
-        label: string;
-        textMapping: string[];
+        type: string;
+        count: number;
     };
 };
 export default _default;
 export declare const Default: {
     render: (args: any) => string;
     args: {
-        stars: number;
-        label: string;
-        textMapping: string[];
-    };
-};
-export declare const CustomTextMapping: {
-    render: (args: any) => string;
-    args: {
-        stars: number;
-        label: string;
-        textMapping: string[];
+        type: string;
+        count: number;
     };
 };
-export declare const TenStars: {
+export declare const TenItems: {
     render: (args: any) => string;
     args: {
-        stars: number;
-        label: string;
-        textMapping: string[];
+        type: string;
+        count: number;
     };
 };

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

@@ -0,0 +1,27 @@
+export declare class EdsSpinner {
+    /**
+     * Size of the spinner (e.g., "3rem", "50px").
+     */
+    size: string;
+    /**
+     * Border thickness of the spinner.
+     */
+    thickness: string;
+    /**
+     * Color for the spinner's border.
+     */
+    borderColor: string;
+    /**
+     * Color for the spinner's bottom border.
+     */
+    bottomColor: string;
+    /**
+     * Background overlay color.
+     */
+    background: string;
+    /**
+     * When true, the spinner covers the entire viewport.
+     */
+    fullscreen: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,42 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: string;
+            description: string;
+        };
+        thickness: {
+            control: string;
+            description: string;
+        };
+        borderColor: {
+            control: string;
+            description: string;
+        };
+        bottomColor: {
+            control: string;
+            description: string;
+        };
+        background: {
+            control: string;
+            description: string;
+        };
+        fullscreen: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        size: string;
+        thickness: string;
+        borderColor: string;
+        bottomColor: string;
+        background: string;
+        fullscreen: boolean;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

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

@@ -26,7 +26,7 @@ export declare class EdsSteps {
     /**
      * Emits when a step is clicked, providing the step's index.
      */
-    stepClick: EventEmitter<number>;
+    step: EventEmitter<number>;
     private handleStepClick;
     /**
      * Parse the JSON string into an array of steps.

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

@@ -32,6 +32,10 @@ declare const _default: {
             };
             description: string;
         };
+        columnSize: {
+            control: string;
+            options: string[];
+        };
     };
     args: {
         data: {
@@ -53,6 +57,7 @@ declare const _default: {
         rowsPerPage: number;
         paginationEnabled: boolean;
         searchEnabled: boolean;
+        columnSize: string;
     };
 };
 export default _default;
@@ -76,6 +81,7 @@ export declare const Default: {
         paginationEnabled: boolean;
         searchEnabled: boolean;
         endpoint: string;
+        columnSize: string;
     };
 };
 export declare const WithEndpoint: {