@ebrains/components 2.0.0 → 2.2.0

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

@@ -60,4 +60,6 @@ import bin from '../img/bin.svg';
 import start from '../img/start.svg';
 import draft from '../img/draft.svg';
 import edit from '../img/edit.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 };
+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 };

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * `EdsAlert` is a versatile alert component designed for displaying contextual messages.
  * This component offers various configuration options to support different use cases, making it ideal for notifying users of information, warnings, errors, or successes.
@@ -37,6 +38,10 @@ export declare class EdsAlert {
      */
     brd: 'rounded' | 'normal';
     withBtn: boolean;
+    /**
+     * Emitted when the alert action button is clicked (for non-URL actions).
+     */
+    edsalert: EventEmitter<void>;
     /**
      * Reference to the host element.
      */
@@ -44,5 +49,6 @@ export declare class EdsAlert {
     componentWillLoad(): void;
     componentDidLoad(): void;
     emitContext(linkElement: HTMLElement): void;
+    private handleAction;
     render(): any;
 }

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

@@ -71,5 +71,6 @@ export declare class EdsButton {
     private parentContext;
     handleParentContext(event: CustomEvent): void;
     private handleClick;
+    private handleKeyDown;
     render(): any;
 }

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

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

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

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

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

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

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

@@ -76,6 +76,7 @@ export declare class EdsLink {
     private parentContext;
     handleParentContext(event: CustomEvent): void;
     private handleClick;
+    private handleKeyDown;
     private getLinkSize;
     private renderLeftIcon;
     private renderRightIcon;

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

@@ -0,0 +1,28 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        question: {
+            control: string;
+            description: string;
+        };
+        leftLabel: {
+            control: string;
+            description: string;
+        };
+        rightLabel: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        question: string;
+        leftLabel: string;
+        rightLabel: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+    args: {};
+};

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

@@ -0,0 +1,20 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class EdsNps {
+    /** The question prompt for the NPS scale. */
+    question: string;
+    /** Label displayed under the min value. */
+    leftLabel: string;
+    /** Label displayed under the max value. */
+    rightLabel: string;
+    /** Currently selected NPS value. */
+    selectedValue: number;
+    /** Event emitted when the NPS value changes. */
+    nps: EventEmitter<number>;
+    el: HTMLElement;
+    private min;
+    private max;
+    private handleClick;
+    private handleKeyNav;
+    private activateRadio;
+    render(): any;
+}

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

@@ -17,6 +17,8 @@ interface Link {
  * - Supports two display modes: "default" (shows numbered page links) and "navigator" (shows Previous/Next buttons).
  * - Emits a `page` event when the page is changed in "default" mode.
  * - Automatically generates pagination links based on the `currentPage` and `lastPage`.
+ * - Full keyboard navigation support with arrow keys, Home, End
+ * - Proper ARIA labels and screen reader support
  *
  * This component is designed for flexible and accessible pagination controls, suitable for various display needs.
  */
@@ -33,6 +35,8 @@ export declare class EdsPagination {
     url: string;
     /** Mode of pagination display - 'default' shows page numbers, 'navigator' shows Previous/Next buttons only */
     mode: 'default' | 'navigator';
+    /** Whether to use buttons (for JavaScript pagination) or links (for URL navigation) */
+    useButtons: boolean;
     /** Label for the previous button in navigator mode */
     prevLabel: string;
     /** Label for the next button in navigator mode */
@@ -43,6 +47,8 @@ export declare class EdsPagination {
     nextUrl: string;
     /** List of links generated for pagination */
     links: (Link | string)[];
+    /** Currently focused pagination item index for keyboard navigation */
+    focusedIndex: number;
     /** Reference to the host element */
     hostEl: HTMLElement;
     /** Lifecycle hook to generate pagination links on component load */
@@ -50,12 +56,28 @@ export declare class EdsPagination {
     componentDidLoad(): void;
     /**
      * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
+     * This event provides context information about the pagination component.
      *
      * @param linkElement - The link element to which the event will be dispatched.
      */
     emitContext(linkElement: HTMLElement): void;
     onPageOrLastPageChange(): void;
+    /**
+     * Handles keyboard navigation within the pagination
+     */
+    private handleKeyDown;
+    /**
+     * Gets all navigable pagination items for keyboard navigation
+     */
+    private getNavigableItems;
+    /**
+     * Focuses a specific pagination item by index
+     */
+    private focusPaginationItem;
+    /**
+     * Handles focus events for pagination items
+     */
+    private handleItemFocus;
     /**
      * Checks if the current page is the first page
      * @returns {boolean} - true if current page is the first page
@@ -78,7 +100,6 @@ export declare class EdsPagination {
      * Creates a pagination range based on delta, current, and total pages
      * @param {number} current - Current page number
      * @param {number} total - Total number of pages
-     * @param {number} delta - Range of pages to display around the current page
      * @returns {(number | string)[]} - Range of page numbers or ellipses
      */
     private getPaginationGenerator;

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

@@ -20,6 +20,7 @@ export declare class EdsRating {
      * Reference to the host element.
      */
     el: HTMLElement;
+    private buttonRefs;
     /**
      * Lifecycle method that runs when the component has fully loaded.
      * It emits a custom event for each `eds-button` element contained within the breadcrumb.
@@ -36,6 +37,7 @@ export declare class EdsRating {
      * Handles the click event on a star.
      * @param rating - The selected rating value.
      */
-    handleClick(rating: number): void;
+    onSelect(rating: number): void;
+    private handleKeyNav;
     render(): any;
 }

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

@@ -24,5 +24,6 @@ export declare class EdsSwitch {
     }>;
     el: HTMLElement;
     private toggleSwitch;
+    private handleKeyDown;
     render(): any;
 }

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

@@ -36,12 +36,15 @@ export interface TableAction {
     type?: 'button' | 'checkbox';
     /** optional: field in row to bind checkbox state */
     field?: string;
+    /** optional: icon name for the action */
+    icon?: string;
+    /** if true, always render the label on the button (no tooltip) */
+    showLabel?: boolean;
 }
 /**
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
  *
  * Key Features:
- * - Accepts static data or fetches dynamic data from an endpoint.
  * - Configurable columns with options to hide or apply text formatting (uppercase, bold, or code).
  * - Pagination support with adjustable rows per page.
  * - Searchable content for easier data filtering.
@@ -53,8 +56,6 @@ export declare class EdsTable {
     data: string | {
         [key: string]: any;
     }[] | null;
-    /** Endpoint to fetch data dynamically */
-    endpoint: string | null;
     /** Config object to hide or format columns */
     config: string | {
         [key: string]: {
@@ -77,10 +78,24 @@ export declare class EdsTable {
      */
     columnSize?: 'default' | 'medium' | 'large';
     /**
-     * Array of actions to render in each row.
-     * Each action should have:
-     *  - `name`: a unique key (e.g. "view", "delete")
-     *  - `label`: what shows in the button (or you could pass an icon name here)
+     * Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.
+     *
+     * Each action object may include:
+     *  - `name`       (string; required)  — unique action key, e.g. `"view"`, `"delete"`.
+     *  - `label`      (string; required)  — text shown on the button, or used as the tooltip/aria-label when icon-only.
+     *  - `type`       ("button" | "checkbox"; optional) — whether to render a standard button (default) or a checkbox.
+     *  - `icon`       (string; optional)  — name of the icon to display in icon-only mode.
+     *  - `field`      (string; optional)  — for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).
+     *  - `showLabel`  (boolean; optional) — if `true`, render the full `label` instead of an icon + tooltip.
+     *
+     * When you pass JSON, make sure field names match exactly:
+     * ```html
+     * actions='[
+     *   { "name":"view",  "label":"View",  "icon":"eye" },
+     *   { "name":"edit",  "label":"Edit",  "icon":"pencil", "showLabel":true },
+     *   { "name":"del",   "label":"Delete","type":"checkbox", "field":"selected" }
+     * ]'
+     * ```
      */
     actions: string | TableAction[];
     /**
@@ -125,7 +140,6 @@ export declare class EdsTable {
     private updateContainerWidth;
     private parseData;
     private parseConfig;
-    private fetchData;
     private setupPaginationListener;
     private getFilteredRows;
     private getPaginatedRows;
@@ -143,5 +157,6 @@ export declare class EdsTable {
     private getVisibleColumnsCount;
     private divisionFactor;
     private capitalize;
+    private onActionKeyDown;
     render(): any;
 }

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

@@ -90,10 +90,15 @@ export declare const Default: {
 export declare const WithActions: {
     render: (args: any) => import("lit-html").TemplateResult<1>;
     args: {
-        actions: {
+        actions: ({
             name: string;
             label: string;
-        }[];
+            icon: string;
+        } | {
+            name: string;
+            label: string;
+            icon?: undefined;
+        })[];
         data: {
             name: string;
             age: number;