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

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

@@ -32,11 +32,11 @@ export declare class EdsAlert {
      */
     intent: 'default' | 'warning' | 'error' | 'success';
     withBtn: boolean;
-    componentWillLoad(): void;
     /**
      * Reference to the host element.
      */
     el: HTMLElement;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     emitContext(linkElement: HTMLElement): void;
     render(): any;

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

@@ -36,11 +36,11 @@ export declare class EdsBreadcrumb {
      */
     parsedItems: Link[];
     /**
-     * Tracks the current screen size to adjust the breadcrumb rendering dynamically.
+     * Tracks if the screen is small.
      */
     isSmallScreen: boolean;
     /**
-     * Tracks the current screen size to adjust breadcrumb rendering.
+     * Tracks the maximum number of visible breadcrumb items.
      */
     maxVisibleItems: number;
     /**
@@ -74,19 +74,20 @@ export declare class EdsBreadcrumb {
      */
     emitContext(linkElement: HTMLElement): void;
     /**
-     * Truncates breadcrumb items based on the maxVisibleItems value.
-     * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
+     * Returns breadcrumb items with potential truncation if there are too many.
+     * It inserts an ellipsis item where necessary.
      */
     getTruncatedItems(): RenderableLink[];
     /**
-     * Truncates the label of a breadcrumb item to a maximum of 10 characters
-     * if the screen is small.
+     * Helper to determine the display label and full label.
+     * If the label is longer than 15 characters and the item is not the current (last) item,
+     * we display a truncated version but use the full label for aria attributes.
      */
-    truncateLabel(item: Link): Link;
+    private getLabels;
     /**
      * Render method for the breadcrumb component.
      * It creates a navigation element with an ordered list of breadcrumb links.
-     * The last link is disabled and marked as the current page.
+     * The last link is marked as the current page.
      */
     render(): any;
 }

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

@@ -18,12 +18,13 @@ export declare class EdsButton {
     label: string;
     /**
      * The accessible aria-label for the button, used when there is no visible label.
+     * Default is "Button" to ensure icon-only buttons are announced properly.
      */
-    ariaLabel: string | null;
+    ariaLabel: string;
     /**
      * The HTML element type for the button (e.g., 'button', 'a'). Default is 'button'.
      */
-    elementType: string;
+    elementType: 'button' | 'a';
     /**
      * The visual intent or style of the button.
      * Options include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'.

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

@@ -102,7 +102,6 @@ export declare class EdsForm {
     onAuthStatusChanged(event: CustomEvent<any>): void;
     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[];

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

@@ -24,8 +24,9 @@ export declare class EdsImg {
     src: string;
     /**
      * The alternative text for the image.
+     * Defaults to an empty string so that decorative images are ignored by assistive technologies.
      */
-    alt?: string;
+    alt: string;
     /**
      * The width of the image in pixels.
      */
@@ -65,6 +66,7 @@ export declare class EdsImg {
     img: HTMLImageElement | null;
     componentDidLoad(): void;
     handleLoad: () => void;
+    handleError: () => void;
     handleTransitionEnd: () => void;
     render(): any;
 }

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

@@ -100,6 +100,11 @@ export declare class EdsInputSelect {
      * 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
@@ -123,5 +128,6 @@ export declare class EdsInputSelect {
      * @param event The change event from the select input.
      */
     handleChange: (event: Event) => void;
+    getValueByPath(obj: any, path: any): any;
     render(): any;
 }

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

@@ -33,6 +33,7 @@ export declare class EdsLogo {
      * `'color' | 'black' | 'color-white' | 'white'`
      */
     type: 'color' | 'black' | 'color-white' | 'white' | 'no-bg';
+    label: string;
     /**
      * Reference to the host element of this component.
      */

package/dist/types/components/eds-matomo-notice/eds-matomo-notice.d.ts

@@ -0,0 +1,53 @@
+export declare class EdsMatomoNotice {
+    /**
+     * The title displayed in the notice.
+     */
+    title: string;
+    /**
+     * The description displayed in the notice.
+     */
+    description: string;
+    /**
+     * The Analytics Defer message displayed.
+     */
+    deferMsgToast: string;
+    /**
+     * The Analytics Opt In message displayed.
+     */
+    optInMsgToast: string;
+    /**
+     * The Analytics Opt Out message displayed.
+     */
+    optOutMsgToast: string;
+    /**
+     * When true, the notice is forced to show regardless of cookies/session.
+     */
+    forceShow: boolean;
+    /**
+     * Controls whether the notice is displayed.
+     */
+    showNotice: boolean;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    /**
+     * Checks if the consent cookie exists.
+     */
+    private hasCookieConsent;
+    /**
+     * Generate a unique storage key based on appId or the app's domain.
+     */
+    private getStorageKey;
+    /**
+     * Check cookies and sessionStorage (unless forceShow is true) to decide if the notice should be shown.
+     */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    emitContext(linkElement: HTMLElement): void;
+    private optInAnalytics;
+    private optOutAnalytics;
+    private deferDecision;
+    private hideNotice;
+    render(): any;
+}

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

@@ -63,13 +63,8 @@ export declare class EdsModal {
      */
     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.
+     * Closes the modal when the Escape key is pressed.
      */
+    handleKeyDown(event: KeyboardEvent): void;
     render(): any;
 }

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

@@ -5,7 +5,7 @@ export declare class EdsRating {
      */
     stars: number;
     /**
-     * The label text for the input field.
+     * The label text for the rating component.
      */
     label?: string;
     /**
@@ -22,7 +22,6 @@ export declare class EdsRating {
     ratingChange: EventEmitter<number>;
     /**
      * Parses the `textMapping` prop into an array of strings.
-     * Returns an empty array if parsing fails.
      */
     get parsedMappings(): string[];
     /**

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

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface Step {
+    title: string;
+    content?: string;
+}
+export declare class EdsSteps {
+    /**
+     * JSON string containing an array of step objects.
+     * Example:
+     * '[
+     *   { "title": "Get Access...", "content": "To participate..." },
+     *   { "title": "Subscribe...", "content": "Technical Coordination..." },
+     *   { "title": "Confirm Your Subscription" }
+     * ]'
+     */
+    steps: string | Step[];
+    /**
+     * The type of stepper. Default is "static" (all steps visible, no buttons).
+     * If set to "linear", then only one step is visible at a time with navigation.
+     */
+    type: 'static' | 'linear';
+    /**
+     * The index of the currently active step (used in linear mode).
+     */
+    activeStep: number;
+    /**
+     * Emits when a step is clicked, providing the step's index.
+     */
+    stepClick: EventEmitter<number>;
+    private handleStepClick;
+    /**
+     * Parse the JSON string into an array of steps.
+     */
+    private get parsedSteps();
+    private handleNext;
+    private handleBack;
+    render(): any;
+}

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

@@ -0,0 +1,34 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        type: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            mapping: {
+                static: string;
+                linear: string;
+            };
+            description: string;
+        };
+        steps: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+    };
+    args: {
+        type: string;
+        steps: {
+            title: string;
+            content: string;
+        }[];
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

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

@@ -0,0 +1,22 @@
+export interface Step {
+    label: string;
+    description: string;
+}
+export declare class EdsVerticalStepper {
+    /**
+     * JSON string containing an array of steps.
+     * Example:
+     * '[
+     *   { "label": "Select campaign settings", "description": "For each ad campaign..." },
+     *   { "label": "Create an ad group", "description": "An ad group contains one or more ads..." },
+     *   { "label": "Create an ad", "description": "Try out different ad text..." }
+     * ]'
+     */
+    steps: string;
+    activeStep: number;
+    private get parsedSteps();
+    private handleNext;
+    private handleBack;
+    private handleReset;
+    render(): any;
+}

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

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class EdsSwitch {
+    /**
+     * Indicates whether the switch is checked.
+     */
+    checked: boolean;
+    /**
+     * Disables the switch if true.
+     */
+    disabled: boolean;
+    /**
+     * Label to display when the switch is ON.
+     */
+    labelOn: string;
+    /**
+     * Label to display when the switch is OFF.
+     */
+    labelOff: string;
+    /**
+     * Emitted when the switch is toggled.
+     */
+    change: EventEmitter<boolean>;
+    private toggleSwitch;
+    render(): any;
+}

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

@@ -0,0 +1,32 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        checked: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        labelOn: {
+            control: string;
+            description: string;
+        };
+        labelOff: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        checked: boolean;
+        disabled: boolean;
+        labelOn: string;
+        labelOff: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

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

@@ -1,34 +1,15 @@
 /**
  * `EdsTag` is a stylized label component designed to display short, categorical information.
- * The component supports multiple visual styles to fit different use cases, such as accent or inverse styling.
- *
- * Key Features:
- * - Configurable appearance through `intent` prop with options for various styles (default, strong, accent, weak, inverse, inverse-strong).
- * - Displays a label passed as the `label` prop, required for defining the content of the tag.
- *
- * This component is useful for creating distinguishable tags or labels with consistent styling.
+ * It supports multiple visual styles defined by the `intent` prop.
  */
 export declare class EdsTag {
     /**
      * The label to be displayed inside the tag.
-     * This prop is required.
      */
     label: string;
     /**
      * The visual style or intent of the tag.
-     * Options include:
-     * - 'default': The standard appearance.
-     * - 'strong': Strong emphasis with inverse text color.
-     * - 'accent': Accent color with a blue text and border.
-     * - 'weak': A softer look with lighter text and transparent border.
-     * - 'inverse': Inverse style with border and text inversion.
-     * - 'inverse-strong': Strong inverse with lighter text.
-     * Defaults to 'default'.
      */
     intent: 'default' | 'strong' | 'accent' | 'weak' | 'inverse' | 'inverse-strong';
-    /**
-     * Render the component.
-     * @returns The rendered HTML for the tag component with the applied styles and label.
-     */
     render(): any;
 }

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

@@ -18,15 +18,14 @@ 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.
+     * This event provides context information about the toast component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
      */
-    emitContext(linkElement: HTMLElement): void;
+    emitContext(btnElement: HTMLElement): void;
     /**
      * Dismisses the toast.
      */