@ebrains/components 2.3.0 → 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/{shared-ui → 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/{shared-ui → components}/eds-fullscreen-menu/eds-fullscreen-menu.d.ts

@@ -68,10 +68,13 @@ export declare class EdsFullscreenMenu {
      * ```
      */
     handleToggleMenu(event: CustomEvent<boolean>): void;
+    onKeydown(e: KeyboardEvent): void;
     /** Opens the menu */
     openMenu(): void;
     /** Closes the menu */
     closeMenu(): void;
+    open(): Promise<void>;
+    close(): Promise<void>;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     handleResize(): void;

package/dist/types/{shared-ui → components}/eds-header/eds-header.d.ts

@@ -51,9 +51,7 @@ export declare class EdsHeader {
      * Controls the visibility of the fullscreen user menu.
      */
     isUserMenuOpen: boolean;
-    isAuthenticated: boolean;
     hostEl: HTMLElement;
-    onAuthStatusChanged(event: CustomEvent<any>): void;
     /** Event to signal toggle menu action */
     toggleheadermenu: EventEmitter<boolean>;
     componentDidLoad(): void;

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

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface Step {
+    title: string;
+    content?: string;
+}
+export declare class EdsSteps {
+    /** Steps data as array or JSON string. */
+    steps: string | Step[];
+    /** Stepper mode. */
+    type: 'static' | 'linear';
+    /** Orientation (applies to linear mode visuals). */
+    orientation: 'vertical' | 'horizontal';
+    /** Labels */
+    nextLabel: string;
+    backLabel: string;
+    finishLabel: string;
+    /**
+     * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+     * @attr disable-next
+     */
+    disableNext: boolean | boolean[] | string;
+    /** Heading level for step titles. */
+    headingLevel: 'h3' | 'h4' | 'h5';
+    /**
+     * 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;
+    step: EventEmitter<number>;
+    finished: EventEmitter<void>;
+    next: EventEmitter<number>;
+    back: EventEmitter<number>;
+    /** Reference to the host element */
+    el: HTMLElement;
+    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/{shared-ui → 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

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface Step {
+    title: string;
+    content?: string;
+}
+export declare class EdsStepsV2 {
+    /** JSON string or array of steps: { title, content? } */
+    steps: string | Step[];
+    /** Stepper mode */
+    type: 'static' | 'linear';
+    /** Orientation (applies to linear visuals) */
+    orientation: 'vertical' | 'horizontal';
+    /** Optional illustration */
+    imageSrc?: string;
+    imageWidth?: number;
+    message?: string;
+    /** Labels */
+    nextLabel: string;
+    backLabel: string;
+    finishLabel: string;
+    /**
+     * 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';
+    /** Current step index (linear mode) */
+    activeStep: number;
+    /** Fired whenever the active step changes. Payload: current step index. */
+    step: EventEmitter<number>;
+    /** Fired when user clicks Finish on the last step. */
+    finished: EventEmitter<void>;
+    /** Fired before advancing, with the target step index. */
+    next: EventEmitter<number>;
+    /** Fired before going back, with the target step index. */
+    back: EventEmitter<number>;
+    /** Host element */
+    el: HTMLElement;
+    handleDisableNextChange(newValue: boolean | boolean[] | string): void;
+    activeStepChanged(newValue: number): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    emitContext(linkElement: HTMLElement): void;
+    articleClasses(): string;
+    private get parsedSteps();
+    private isStepDisabled;
+    private isNextDisabledFor;
+    private handleTitleClick;
+    private handleNext;
+    private handleBack;
+    private renderHeading;
+    /** Render horizontal indicator item */
+    private renderHorizontalIndicator;
+    render(): any;
+}

package/dist/types/{shared-ui → 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;
 }