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

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

@@ -47,6 +47,11 @@ export declare class EdsAccordion {
     private wrapperRef;
     /** Reference to the element containing the main content */
     private childContentRef;
+    /**
+     * Lifecycle method that sets up the initial panel height and adds a resize event listener
+     * to recalculate height on window resize.
+     */
+    componentDidLoad(): void;
     /**
      * Handles the click event on the accordion header to toggle expansion.
      * Toggles the `isExpanded` state and emits the `accordionChange` event.
@@ -57,18 +62,6 @@ export declare class EdsAccordion {
      * and adjusts based on the `shortContent` and `isExpanded` states.
      */
     private setPanelHeight;
-    /**
-     * Lifecycle method that sets up the initial panel height and adds a resize event listener
-     * to recalculate height on window resize.
-     */
-    componentDidLoad(): void;
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
-    emitContext(linkElement: HTMLElement): void;
     /**
      * Lifecycle method that cleans up the resize event listener when the component is removed.
      */

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

@@ -43,21 +43,3 @@ export declare const Default: {
         rounded: boolean;
     };
 };
-export declare const WithPicture: {
-    render: (args: any) => string;
-    args: {
-        firstName: string;
-        lastName: string;
-        picture: string;
-        rounded: boolean;
-    };
-};
-export declare const BackgroundColorVariant: {
-    render: (args: any) => string;
-    args: {
-        firstName: string;
-        lastName: string;
-        color: string;
-        rounded: boolean;
-    };
-};

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

@@ -1,3 +1,11 @@
+/**
+ * `eds-card-desc` is a simple component that renders a card description.
+ *
+ * It displays a block of text with optional truncation applied using a CSS line clamp.
+ * You can customize the description styling via the `descClass` property and control
+ * whether or not the text is truncated and to how many lines.
+ *
+ */
 export declare class EdsCardDesc {
     /**
      * The description text to be displayed inside the card.

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

@@ -1,3 +1,7 @@
+export interface Tag {
+    label: string;
+    style: 'accent' | 'default' | 'weak' | 'strong';
+}
 /**
  * `EdsCardGeneric` is a versatile card component designed to display rich content such as titles, descriptions, images, and tags.
  * The card supports various visual configurations, including hover effects, background styling, and compact layout options.
@@ -41,9 +45,9 @@ export declare class EdsCardGeneric {
      */
     headingLevel: string;
     /**
-     * A comma-separated string of tags related to the card content.
+     * Tags related to the card content.
      */
-    tags: any;
+    tags: string | Tag[];
     /**
      * A boolean that determines whether the card should be displayed with a smaller height.
      * If true, the card will use the 'tiny' height class.

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

@@ -2,14 +2,54 @@ import 'prismjs/components/prism-python';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-yaml';
 import 'prismjs/components/prism-css';
+/**
+ * A component that displays a code block with syntax highlighting.
+ *
+ * Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS,
+ * Python, Bash/Shell, and YAML.
+ *
+ * */
 export declare class EdsCodeBlock {
-    /** The code content to display */
+    /**
+     * The code content to display.
+     */
     code: string;
-    /** The language type for syntax highlighting (e.g., 'javascript', 'html', 'css') */
+    /**
+     * The language type for syntax highlighting (e.g., 'javascript', 'html', 'css')
+     * */
     language: string;
-    /** Tooltip text for when the code is copied */
+    /**
+     * Tooltip text for when the code is copied
+     * */
     copied: boolean;
+    /**
+     * Host element reference
+     * */
+    el: HTMLElement;
+    /**
+     * Copies the current code content to the clipboard and sets a temporary copied state.
+     *
+     * @private
+     * @returns {void}
+     */
     private copyToClipboard;
+    /**
+     * Utility function that creates a human-friendly analytics name based on the code and language.
+     * It uses:
+     *  - The language (in uppercase)
+     *  - The number of non-empty lines in the code
+     *  - The first non-empty line of code (truncated to 30 characters, if needed)
+     *
+     * returns A descriptive analytics name.
+     */
+    /**
+     * Returns the syntax-highlighted HTML for the code.
+     * If the provided language is supported by Prism, this method returns the highlighted code.
+     * Otherwise, it logs a warning and returns the raw code.
+     *
+     * @private
+     * @returns {string} The highlighted HTML string for the code block.
+     */
     private getHighlightedCode;
     render(): any;
 }

package/dist/types/components/eds-code-block/eds-code-block.stories.d.ts

@@ -0,0 +1,54 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        code: {
+            control: string;
+            description: string;
+        };
+        language: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        code: string;
+        language: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+    args: {
+        code: string;
+        language: string;
+    };
+};
+export declare const PythonExample: {
+    render: (args: any) => string;
+    args: {
+        code: string;
+        language: string;
+    };
+};
+export declare const BashExample: {
+    render: (args: any) => string;
+    args: {
+        code: string;
+        language: string;
+    };
+};
+export declare const YamlExample: {
+    render: (args: any) => string;
+    args: {
+        code: string;
+        language: string;
+    };
+};
+export declare const UnsupportedLanguage: {
+    render: (args: any) => string;
+    args: {
+        code: string;
+        language: string;
+    };
+};

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

@@ -105,13 +105,6 @@ export declare class EdsDropdown {
      * Initializes focusable items within the dropdown.
      */
     componentDidLoad(): void;
-    /**
-     * Emits a custom event called `parentContext` for a given button element.
-     * Provides context information about the dropdown component.
-     *
-     * @param linkElement - The button element to which the event will be dispatched.
-     */
-    emitContext(linkElement: HTMLElement): void;
     /**
      * Renders the dropdown component and displays its content when open.
      * @returns {JSX.Element} The rendered dropdown component.

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

@@ -14,10 +14,6 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * This component is ideal for implementing complex forms with specific validation and submission behaviors.
  */
 export declare class EdsForm {
-    /**
-     * If `true`, displays a small alert for messages.
-     */
-    smallAlert?: boolean;
     /**
      * If `true`, includes the current form URL in the submission data.
      */
@@ -60,7 +56,7 @@ export declare class EdsForm {
      * ]
      * ```
      */
-    fields: string;
+    fields: string | any[];
     values: {
         [key: string]: any;
     };
@@ -102,6 +98,7 @@ export declare class EdsForm {
     el: HTMLElement;
     isAuthenticated: boolean;
     authUser: any;
+    parsedFields: any[];
     onAuthStatusChanged(event: CustomEvent<any>): void;
     private formEl;
     componentDidLoad(): void;
@@ -115,6 +112,6 @@ export declare class EdsForm {
     handleChange: (e: Event, field: any) => void;
     handleSubmit: (e: Event) => Promise<void>;
     getFormData(): Promise<FormData>;
-    get parseFields(): any;
+    parseFields(newValue: string | any[]): void;
     render(): any;
 }

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

@@ -31,11 +31,6 @@ declare const _default: {
             description: string;
             defaultValue: boolean;
         };
-        smallAlert: {
-            control: string;
-            description: string;
-            defaultValue: boolean;
-        };
         setFormUrl: {
             control: string;
             description: string;

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

@@ -41,5 +41,3 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
-export declare const SmallFrame: any;
-export declare const ErrorState: any;

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

@@ -17,6 +17,9 @@ import { EventEmitter } from '../../../stencil-public-runtime';
  *
  * The component will automatically fetch data if a dynamic configuration is provided.
  */
+/**
+ * @internal
+ */
 export declare class EdsInputSelect {
     /**
      * Optional id for the input. If not provided, the component uses the `name` property.

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

@@ -74,7 +74,7 @@ export declare class EdsLink {
      */
     el: HTMLElement;
     private parentContext;
-    handleBreadcrumbContext(event: CustomEvent): void;
+    handleParentContext(event: CustomEvent): void;
     private handleClick;
     private getLinkSize;
     private renderLeftIcon;

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

@@ -27,11 +27,29 @@ export declare class EdsModal {
      * Default is 3 lines.
      */
     truncateLines: string;
+    /**
+     * Specifies the position of the modal.
+     *
+     * Acceptable values are:
+     * - `"middle"` (default): The modal is centered both vertically and horizontally.
+     * - `"top"`: The modal is positioned near the top of the viewport.
+     * - `"bottom"`: The modal is positioned near the bottom of the viewport.
+     * - `"left"`: The modal is positioned on the left side of the viewport, centered vertically.
+     * - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.
+     */
+    position: 'middle' | 'top' | 'bottom' | 'left' | 'right';
     /**
      * Reference to the host element.
      */
     el: HTMLElement;
     private getTruncateClass;
+    /**
+     * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
+     *
+     * @private
+     * @returns {string} The concatenated CSS classes for modal positioning.
+     */
+    private getModalPositionClasses;
     /**
      * Opens the modal.
      */
@@ -52,9 +70,6 @@ export declare class EdsModal {
     /**
      * 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-modal/eds-modal.stories.d.ts

@@ -7,6 +7,15 @@ declare const _default: {
             description: string;
             defaultValue: string;
         };
+        position: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        title: string;
+        position: string;
     };
 };
 export default _default;

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

@@ -11,7 +11,7 @@ export declare class EdsRating {
     /**
      * Mapping of text to star ratings.
      */
-    textMapping: string | any;
+    textMapping: string | string[];
     /**
      * Current selected rating value.
      */
@@ -21,12 +21,10 @@ export declare class EdsRating {
      */
     ratingChange: EventEmitter<number>;
     /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
+     * Parses the `textMapping` prop into an array of strings.
+     * Returns an empty array if parsing fails.
      */
-    get parsedMappings(): any[];
+    get parsedMappings(): string[];
     /**
      * Handles the click event on a star.
      * @param rating - The selected rating value.

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

@@ -23,4 +23,3 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
-export declare const WithForm: any;

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

@@ -31,11 +31,11 @@ export declare class EdsTable {
     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.
-   */
+     * 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: {

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

@@ -18,6 +18,15 @@ export declare class EdsToast {
     visible: boolean;
     el: HTMLElement;
     private dismissTimeout;
+    /**
+     * Lifecycle method that sets up the initial panel height and adds a resize event listener
+     * to recalculate height on window resize.
+     */
+    componentDidLoad(): void;
+    /**
+     * Emits a custom event called `parentContext` for a given button element.
+     */
+    emitContext(linkElement: HTMLElement): void;
     /**
      * Dismisses the toast.
      */