@ebrains/components 2.3.1 → 2.4.0

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

@@ -55,11 +55,11 @@ import portal from '../img/portal.svg';
 import privat from '../img/private.svg';
 import pub from '../img/public.svg';
 import tutorial from '../img/tutotial.svg';
-import upDonw from '../img/up-and-down.svg';
+import upDown from '../img/up-and-down.svg';
 import bin from '../img/bin.svg';
 import start from '../img/start.svg';
 import draft from '../img/draft.svg';
 import edit from '../img/edit.svg';
 import view from '../img/view.svg';
 import clone from '../img/clone.svg';
-export { twitter, linkedin, facebook, youtube, mastodon, bluesky, euSvg, arrowRight, arrowDiagonal, bookmark, 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, minus, more, failed, filter, group, plus, paper, privat, pub, portal, user, upDonw, search, success, tutorial, warning, unknown, thumbsUp, thumbsDown, star, external, bin, start, draft, edit, view, clone };
+export { twitter, linkedin, facebook, youtube, mastodon, bluesky, euSvg, arrowRight, arrowDiagonal, bookmark, 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, minus, more, failed, filter, group, plus, paper, privat, pub, portal, user, upDown, search, success, tutorial, warning, unknown, thumbsUp, thumbsDown, star, external, bin, start, draft, edit, view, clone };

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

@@ -58,7 +58,6 @@ export declare class EdsButton {
      * A boolean indicating whether a smaller icon size should be used.
      */
     iconSmall?: boolean;
-    extraClass?: string;
     /**
      * Custom click handler passed to the button.
      */

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

@@ -112,6 +112,7 @@ export declare class EdsForm {
     parseGroups(newVal: string | any[]): void;
     emitContext(linkElement: HTMLElement): void;
     isFieldVisible(field: any): boolean;
+    private normalizeValue;
     validateForm(): void;
     populateFormWithInitData(initData: {
         [key: string]: any;

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

@@ -68,7 +68,6 @@ export declare class EdsLink {
      * If true, the label will be hidden on smaller screens.
      */
     hideLabelOnSmallScreen: boolean;
-    extraClass?: string;
     /**
      * Reference to the host element.
      */

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

@@ -6,15 +6,17 @@ export declare class EdsNps {
     leftLabel: string;
     /** Label displayed under the max value. */
     rightLabel: string;
-    /** Currently selected NPS value. */
+    /** Currently selected NPS value (null means none selected yet). */
     selectedValue: number;
     /** Event emitted when the NPS value changes. */
     nps: EventEmitter<number>;
     el: HTMLElement;
     private min;
     private max;
-    private handleClick;
+    private btnRefs;
+    private onSelect;
     private handleKeyNav;
-    private activateRadio;
+    /** Move visual highlight & roving tabindex; optionally commit selection */
+    private setActiveByIndex;
     render(): any;
 }

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SidebarItem {
+    id: string;
+    title: string;
+    url?: string;
+    children?: SidebarItem[];
+    open?: boolean;
+    active?: boolean;
+}
+export declare class EdsSidebar {
+    /**
+     * Sidebar items data structure
+     * Can be passed as JSON string in HTML or as object via JavaScript
+     */
+    items: SidebarItem[] | string;
+    /**
+     * Theme variant: 'default' or 'minimal'
+     */
+    theme: 'default' | 'minimal' | 'ebrains';
+    /**
+     * Current active URL for routing
+     */
+    activeUrl: string;
+    /**
+     * Enable/disable routing behavior
+     */
+    enableRouting: boolean;
+    /**
+     * Maximum nesting level to display
+     */
+    maxLevel: number;
+    openItems: Set<string>;
+    parsedItems: SidebarItem[];
+    el: HTMLElement;
+    /**
+     * Event emitted when the routing is changed.
+     */
+    sidebar: EventEmitter<string>;
+    componentWillLoad(): void;
+    handleItemsChange(newItems: SidebarItem[] | string): void;
+    handleActiveUrlChange(): void;
+    private parseItems;
+    private initializeOpenItems;
+    private hasActiveDescendant;
+    private toggleItem;
+    private navigate;
+    private handleItemClick;
+    private renderItem;
+    render(): any;
+}

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

@@ -0,0 +1,98 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        theme: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            mapping: {
+                default: string;
+                minimal: string;
+                ebrains: string;
+            };
+            description: string;
+        };
+        items: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        activeUrl: {
+            control: string;
+            description: string;
+        };
+        maxLevel: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+    };
+    args: {
+        theme: string;
+        items: ({
+            id: string;
+            title: string;
+            url: string;
+            children?: undefined;
+        } | {
+            id: string;
+            title: string;
+            children: {
+                id: string;
+                title: string;
+                url: string;
+            }[];
+            url?: undefined;
+        })[];
+        activeUrl: string;
+        maxLevel: number;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};
+export declare const MinimalTheme: {
+    args: {
+        theme: string;
+        activeUrl: string;
+    };
+    render: (args: any) => string;
+};
+export declare const EbrainsTheme: {
+    args: {
+        theme: string;
+        activeUrl: string;
+    };
+    render: (args: any) => string;
+};
+export declare const DeepNesting: {
+    args: {
+        items: {
+            id: string;
+            title: string;
+            children: {
+                id: string;
+                title: string;
+                children: {
+                    id: string;
+                    title: string;
+                    children: {
+                        id: string;
+                        title: string;
+                        url: string;
+                    }[];
+                }[];
+            }[];
+        }[];
+        activeUrl: string;
+        maxLevel: number;
+    };
+    render: (args: any) => string;
+};

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

@@ -4,101 +4,50 @@ export interface Step {
     content?: string;
 }
 export declare class EdsSteps {
-    /**
-     * Steps data as an **array** or **JSON string** of objects:
-     * `{ title: string; content?: string }`.
-     *
-     * In static mode, all steps and their content render.
-     * In linear mode, only the active step renders its content.
-     *
-     * @default []
-     */
+    /** Steps data as array or JSON string. */
     steps: string | Step[];
-    /**
-     * Stepper mode.
-     * - `static`: all steps are visible (no navigation controls)
-     * - `linear`: one step at a time with Back/Next/Finish controls
-     *
-     * @default "static"
-     */
+    /** Stepper mode. */
     type: 'static' | 'linear';
-    /**
-     * Label for the **Next** button (linear mode).
-     * @default "Next"
-     * @attr next-label
-     */
+    /** Orientation (applies to linear mode visuals). */
+    orientation: 'vertical' | 'horizontal';
+    /** Labels */
     nextLabel: string;
-    /**
-     * Label for the **Back** button (linear mode).
-     * @default "Back"
-     * @attr back-label
-     */
     backLabel: string;
-    /**
-     * Label for the **Finish** button on the **last step** (linear mode).
-     * @default "Finish"
-     * @attr finish-label
-     */
     finishLabel: string;
     /**
-     * If `true`, disables **Next/Finish** and prevents advancing.
-     * Useful for gating progression until validation passes.
-     *
-     * @default false
+     * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
      * @attr disable-next
      */
-    disableNext: boolean | boolean[];
-    /**
-     * Semantic heading tag used for each step title.
-     * Accepted values: `"h3" | "h4" | "h5"`.
-     *
-     * @default "h4"
-     * @attr heading-level
-     */
+    disableNext: boolean | boolean[] | string;
+    /** Heading level for step titles. */
     headingLevel: 'h3' | 'h4' | 'h5';
     /**
-     * Index of the currently active step (linear mode).
-     * Starts at `0`.
+     * Allow collapsing the active title (accordion-like) in **non-linear** vertical mode.
+     * Ignored in linear mode to prevent content hiding.
      */
+    collapsibleTitles: boolean;
+    handleDisableNextChange(newValue: boolean | boolean[] | string): void;
+    /** Index of the currently active step (linear mode). Starts at `0`. */
     activeStep: number;
-    /**
-     * Fired whenever the active step changes.
-     * Payload: the **current step index**.
-     *
-     * @event step
-     */
     step: EventEmitter<number>;
-    /**
-     * Fired when the user clicks **Finish** on the **last** step.
-     *
-     * @event finished
-     */
     finished: EventEmitter<void>;
-    /**
-     * Fired when the user clicks **Next** (before advancing),
-     * with the **target** step index (current + 1).
-     *
-     * @event next
-     */
     next: EventEmitter<number>;
-    /**
-     * Fired when the user clicks **Back** (before going back),
-     * with the **target** step index (current - 1).
-     *
-     * @event back
-     */
     back: EventEmitter<number>;
     /** Reference to the host element */
     el: HTMLElement;
-    private handleTitleClick;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     activeStepChanged(newValue: number): void;
     emitContext(linkElement: HTMLElement): void;
     private get parsedSteps();
+    private isStepDisabled;
     private isNextDisabledFor;
+    private handleTitleClick;
     private handleNext;
     private handleBack;
     /** Render the semantic heading element as a clickable control only in linear mode */
     private renderHeading;
+    /** Render horizontal step indicator */
+    private renderHorizontalIndicator;
     render(): any;
 }

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

@@ -13,6 +13,13 @@ declare const _default: {
             };
             description: string;
         };
+        orientation: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
         steps: {
             control: {
                 type: string;
@@ -46,6 +53,7 @@ declare const _default: {
     };
     args: {
         type: string;
+        orientation: string;
         steps: {
             title: string;
             content: string;
@@ -64,12 +72,21 @@ export declare const Default: {
 export declare const Linear: {
     args: {
         type: string;
+        orientation: string;
+    };
+    render: (args: any) => string;
+};
+export declare const LinearHorizontal: {
+    args: {
+        type: string;
+        orientation: string;
     };
     render: (args: any) => string;
 };
 export declare const LinearBlocked: {
     args: {
         type: string;
+        orientation: string;
         disableNext: boolean;
     };
     render: (args: any) => string;
@@ -77,6 +94,7 @@ export declare const LinearBlocked: {
 export declare const CustomLabels: {
     args: {
         type: string;
+        orientation: string;
         nextLabel: string;
         backLabel: string;
         finishLabel: string;

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

@@ -4,81 +4,53 @@ export interface Step {
     content?: string;
 }
 export declare class EdsStepsV2 {
-    /**
-     * JSON string or an array of step objects.
-     * Each object should have a `title` and optional `content` property.
-     */
+    /** JSON string or array of steps: { title, content? } */
     steps: string | Step[];
-    /**
-     * The type of stepper:
-     * - `"static"`: shows all steps with their content.
-     * - `"linear"`: shows only one step at a time with navigation controls.
-     * @default "static"
-     */
+    /** Stepper mode */
     type: 'static' | 'linear';
-    /** Optional image source to display above the steps. */
+    /** Orientation (applies to linear visuals) */
+    orientation: 'vertical' | 'horizontal';
+    /** Optional illustration */
     imageSrc?: string;
-    /** Optional image width for the `eds-img` component. */
     imageWidth?: number;
-    /** If true, apply an inverse background to the container. */
-    bg: boolean;
-    /** Optional message to display inside the placeholder if no image is provided. */
     message?: string;
-    /** Label text for the "Next" button. */
+    /** Labels */
     nextLabel: string;
-    /** Label text for the "Back" button. */
     backLabel: string;
-    /** Label text for the "Finish" button (last step in linear mode). */
     finishLabel: string;
-    /** If true, disables the "Next" button to block progression. */
-    disableNext: boolean;
     /**
-     * Heading level to use for each step title.
-     * @default "h4"
+     * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+     * @attr disable-next
      */
+    disableNext: boolean | boolean[] | string;
+    /** Heading level for titles */
     headingLevel: 'h3' | 'h4' | 'h5';
-    /**
-     * The index of the currently active step (used in linear mode).
-     */
+    /** Current step index (linear mode) */
     activeStep: number;
-    /**
-     * Emitted when the active step changes.
-     * @event step
-     * @payload {number} The index of the new active step.
-     */
+    /** Fired whenever the active step changes. Payload: current step index. */
     step: EventEmitter<number>;
-    /**
-     * Emitted when the "Finish" button is clicked (last step in linear mode).
-     * @event finished
-     */
+    /** Fired when user clicks Finish on the last step. */
     finished: EventEmitter<void>;
-    /**
-     * Emitted when the "Next" button is clicked.
-     * @event next
-     * @payload {number} The target step index.
-     */
+    /** Fired before advancing, with the target step index. */
     next: EventEmitter<number>;
-    /**
-     * Emitted when the "Back" button is clicked.
-     * @event back
-     * @payload {number} The target step index.
-     */
+    /** Fired before going back, with the target step index. */
     back: EventEmitter<number>;
-    /** Reference to the host element. */
+    /** Host element */
     el: HTMLElement;
-    private handleTitleClick;
-    componentDidLoad(): void;
+    handleDisableNextChange(newValue: boolean | boolean[] | string): void;
     activeStepChanged(newValue: number): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     emitContext(linkElement: HTMLElement): void;
     articleClasses(): string;
-    /**
-     * Parses the steps property into an array of Step objects.
-     */
     private get parsedSteps();
+    private isStepDisabled;
+    private isNextDisabledFor;
+    private handleTitleClick;
     private handleNext;
     private handleBack;
-    private isNextDisabledForCurrent;
-    /** Render the semantic heading element */
     private renderHeading;
+    /** Render horizontal indicator item */
+    private renderHorizontalIndicator;
     render(): any;
 }

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

@@ -10,6 +10,13 @@ declare const _default: {
                 content: string;
             }[];
         };
+        orientation: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
         type: {
             control: string;
             options: string[];
@@ -60,6 +67,7 @@ declare const _default: {
             title: string;
             content: string;
         }[];
+        orientation: string;
         type: string;
         imageSrc: string;
         bg: boolean;

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

@@ -103,6 +103,10 @@ export declare class EdsTable {
      * instead of simple name/label pairs. If provided, this takes priority.
      */
     actionTemplate?: (row: any) => VNode;
+    /** Enable or disable column sorting */
+    sortingEnabled: boolean;
+    /** Theme for table styling - 'default' or 'color' for alternating row colors */
+    theme: 'default' | 'color';
     /** Parsed actions as array */
     parsedActions: TableAction[];
     /** Just the original data keys (no action columns) */
@@ -122,6 +126,8 @@ export declare class EdsTable {
     totalRows: number;
     searchQuery: string;
     containerWidth: number;
+    sortColumn: string | null;
+    sortDirection: 'asc' | 'desc';
     hostEl: HTMLElement;
     /** Define the event with the payload type */
     rowaction: EventEmitter<{
@@ -158,5 +164,7 @@ export declare class EdsTable {
     private divisionFactor;
     private capitalize;
     private onActionKeyDown;
+    private handleSort;
+    private getSortedRows;
     render(): any;
 }