@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/stencil.config.js

@@ -2,16 +2,8 @@ import { reactOutputTarget } from "@stencil/react-output-target";
 import { vueOutputTarget } from "@stencil/vue-output-target";
 import { angularOutputTarget } from "@stencil/angular-output-target";
 import { inlineSvg } from "stencil-inline-svg";
-import { rollup } from "rollup";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
 export const config = {
-    env: {
-        STORYBOOK_URL: process.env.NX_STORYBOOK_URL,
-        KEYCLOAK_URL: process.env.NX_KEYCLOAK_URL,
-        KEYCLOAK_REALM: process.env.NX_KEYCLOAK_REALM,
-        KEYCLOAK_CLIENT_ID: process.env.NX_KEYCLOAK_CLIENT_ID,
-    },
+    env: {},
     namespace: 'components',
     //taskQueue: 'async',
     sourceMap: false,
@@ -40,29 +32,6 @@ export const config = {
             type: 'dist-custom-elements',
             includeGlobalScripts: false,
         },
-        {
-            type: 'custom',
-            name: 'umd',
-            generator: async () => {
-                console.log('Generating UMD bundle...');
-                // Define the entry point for Rollup.
-                // Adjust the path if needed based on your Stencil output.
-                const inputFile = 'dist/components/components.esm.js';
-                // Create the Rollup bundle.
-                const bundle = await rollup({
-                    input: inputFile,
-                    plugins: [resolve(), commonjs()],
-                });
-                // Write out the bundle in UMD format.
-                await bundle.write({
-                    file: 'dist/eds/components.js',
-                    format: 'umd',
-                    name: 'MyComponents', // Global variable name for the UMD bundle.
-                    sourcemap: true, // Optional: include sourcemaps.
-                });
-                console.log('UMD bundle generated at dist/umd/mycomponents.js');
-            },
-        },
         reactOutputTarget({
             componentCorePackage: '@ebrains/components',
             proxiesFile: '../../../packages/react/src/components.ts',

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

@@ -18,6 +18,7 @@ import chevronRight from '../img/chevron/chevron-right.svg';
 import chevronLeft from '../img/chevron/chevron-left.svg';
 import arrowDiagonal from '../img/arrow/arrow-diagonal-black.svg';
 import arrowRight from '../img/arrow/arrow-right.svg';
+import external from '../img/arrow/arrow-external.svg';
 import twitter from '../img/social/twitter.svg';
 import linkedin from '../img/social/linkedin.svg';
 import facebook from '../img/social/facebook.svg';
@@ -46,4 +47,13 @@ import unknown from '../img/unknown.svg';
 import thumbsUp from '../img/thumbs-up.svg';
 import thumbsDown from '../img/thumbs-down.svg';
 import star from '../img/star.svg';
-export { twitter, linkedin, facebook, youtube, mastodon, bluesky, euSvg, arrowRight, arrowDiagonal, 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, more, failed, filter, group, user, search, success, warning, unknown, thumbsUp, thumbsDown, star };
+import bookmark from '../img/bookmark.svg';
+import minus from '../img/minus.svg';
+import paper from '../img/paper.svg';
+import plus from '../img/plus.svg';
+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';
+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 };

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

@@ -33,20 +33,22 @@ export declare class EdsAccordion {
     @Prop() tiny: boolean = false;*/
     /** Clamps the text when the accordion is collapsed to prevent overflow */
     clampText: boolean;
-    /** Applies a minimum height to the content area for consistent spacing */
-    minHeightContent: boolean;
     /** Internal state to track if the accordion is expanded */
     isExpanded: boolean;
     /** Internal state to dynamically set the panel height for proper expansion and collapse */
     panelHeight: number;
     /** Tracks if the content is considered "short" based on the current layout */
     shortContent: boolean;
+    /** Holds the height of the header (<h3>) element */
+    headerHeight: number;
     /** Event emitted when the accordion toggles, indicating the new expanded/collapsed state */
     accordion: EventEmitter<boolean>;
     /** Reference to the wrapper element for the accordion */
     private wrapperRef;
     /** Reference to the element containing the main content */
     private childContentRef;
+    /** Reference to the header element (h3) */
+    private headerRef;
     /**
      * Lifecycle method that sets up the initial panel height and adds a resize event listener
      * to recalculate height on window resize.

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

@@ -48,7 +48,7 @@ export declare const Default: {
         minHeightContent: boolean;
     };
 };
-export declare const SlotComponent: {
+export declare const WithAlert: {
     render: (args: any) => string;
     args: {
         title: string;

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

@@ -31,6 +31,11 @@ export declare class EdsAlert {
      * The visual intent or style of the alert, indicating the alert type.
      */
     intent: 'default' | 'warning' | 'error' | 'success';
+    /**
+     * The border style of the alert. Defaults to "rounded" (rounded borders).
+     * Set to "normal" to have non-rounded (square) borders.
+     */
+    brd: 'rounded' | 'normal';
     withBtn: boolean;
     /**
      * Reference to the host element.

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

@@ -16,6 +16,11 @@ declare const _default: {
             options: string[];
             description: string;
         };
+        brd: {
+            control: string;
+            options: string[];
+            description: string;
+        };
         pressableLabel: {
             control: string;
             description: string;
@@ -29,6 +34,7 @@ declare const _default: {
         message: string;
         intent: string;
         direction: string;
+        brd: string;
         pressableLabel: string;
         pressableUrl: string;
     };
@@ -40,6 +46,7 @@ export declare const Default: {
         message: string;
         intent: string;
         direction: string;
+        brd: string;
         pressableLabel: string;
         pressableUrl: string;
     };

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

@@ -34,11 +34,9 @@ export declare class EdsAvatar {
     /**
      * Flag to render the avatar with rounded (pill) shape if `true`.
      */
-    rounded: boolean;
     /**
      * Determines if the initials should use a stronger (larger) font style.
      */
-    initialsStrong: boolean;
     /**
      * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
      * @returns {string | undefined} Initials for display in the avatar.

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

@@ -17,12 +17,6 @@ declare const _default: {
         color: {
             control: string;
         };
-        rounded: {
-            control: string;
-        };
-        initialsStrong: {
-            control: string;
-        };
     };
     args: {
         firstName: string;
@@ -30,8 +24,6 @@ declare const _default: {
         picture: string;
         initials: string;
         color: string;
-        rounded: boolean;
-        initialsStrong: boolean;
     };
 };
 export default _default;
@@ -40,6 +32,5 @@ export declare const Default: {
     args: {
         firstName: string;
         lastName: string;
-        rounded: boolean;
     };
 };

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

@@ -5,7 +5,6 @@ declare const _default: {
         items: {
             control: string;
             description: string;
-            defaultValue: string;
         };
         intent: {
             control: string;
@@ -15,7 +14,10 @@ declare const _default: {
         };
     };
     args: {
-        items: string;
+        items: {
+            label: string;
+            url: string;
+        }[];
         intent: string;
     };
 };
@@ -23,7 +25,10 @@ export default _default;
 export declare const Default: {
     render: (args: any) => string;
     args: {
-        items: string;
+        items: {
+            label: string;
+            url: string;
+        }[];
         intent: string;
     };
 };

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

@@ -6,6 +6,9 @@
  * whether or not the text is truncated and to how many lines.
  *
  */
+/**
+ * @internal
+ */
 export declare class EdsCardDesc {
     /**
      * The description text to be displayed inside the card.

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

@@ -5,6 +5,6 @@ export declare class EdsIconArrowDiagonal {
     /**
      * Additional CSS classes to be applied to the icon for styling.
      */
-    addClass: string;
+    class: string;
     render(): any;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,3 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
 /**
  * @internal
  */
@@ -26,7 +25,6 @@ export declare class EdsInput {
      * Reference to the host element.
      */
     el: HTMLElement;
-    changeEvent: EventEmitter;
     onValueChanged(newValue: string | number): void;
     componentWillLoad(): void;
     getInputElement(): HTMLInputElement;

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

@@ -2,9 +2,22 @@
  * @internal
  */
 export declare class EdsInputLabel {
+    /**
+     * The text content of the label.
+     */
     label: string;
+    /**
+     * The value that associates the label to a form control.
+     * This value should match the `id` of the input element.
+     */
     name: string;
+    /**
+     * Indicates whether the associated form control is required.
+     */
     required: boolean;
+    /**
+     * Indicates whether the associated form control is disabled.
+     */
     disabled: boolean;
     render(): any;
 }

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 /**
  * `EdsInputRange` is a specialized input component for range/slide functionality,
  */
@@ -5,21 +6,53 @@
  * @internal
  */
 export declare class EdsInputRange {
+    /**
+     * The name attribute for the input element.
+     */
     name: string;
+    /**
+     * Optional id for the input; defaults to 'range'.
+     */
     inputId?: string;
+    /**
+     * If true, the slider will be disabled.
+     */
     disabled: boolean;
+    /**
+     * If true, the slider is marked as required.
+     */
     required: boolean;
+    /**
+     * Minimum value for the slider.
+     */
     min: number;
+    /**
+     * Maximum value for the slider.
+     */
     max: number;
+    /**
+     * Step for the slider.
+     */
     step: number;
+    /**
+     * The externally provided preset value from init-data.
+     */
+    value?: number;
+    /**
+     * Internal state that drives the input and the displayed "Current value".
+     */
     sliderVal: number;
     /**
      * Reference to the host element.
      */
     el: HTMLElement;
+    edsrange: EventEmitter;
     private inputElement;
+    componentWillLoad(): void;
+    onValueChange(newVal: number): void;
     componentDidLoad(): void;
     getInputElement(): Promise<HTMLInputElement>;
     onInput: (e: Event) => void;
+    onChange: (e: Event) => void;
     render(): any;
 }

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

@@ -7,13 +7,44 @@ import { EventEmitter } from '../../../stencil-public-runtime';
  * @internal
  */
 export declare class EdsInputSearch {
+    /**
+     * The name attribute for the input element.
+     */
     name: string;
+    /**
+     * The id attribute for the input element.
+     * Defaults to 'search-main' if not provided.
+     */
     inputId?: string;
+    /**
+     * Placeholder text for the search input.
+     */
     placeholder: string;
+    /**
+     * The value of the search input.
+     */
     value?: string;
+    /**
+     * If true, the search input will be disabled.
+     */
     disabled: boolean;
+    /**
+     * If true, the search input is marked as required.
+     */
     required: boolean;
+    /**
+     * Additional CSS classes for styling the input.
+     */
     decorate: string;
+    /**
+     * Accessible label for the search input.
+     * This is used for screen readers.
+     */
+    label: string;
+    /**
+     * Event emitted when the search input changes.
+     * Contains the event type ('change') and the current input value.
+     */
     search: EventEmitter<{
         event: 'input' | 'change';
         value: any;
@@ -23,7 +54,15 @@ export declare class EdsInputSearch {
      */
     el: HTMLElement;
     private inputElement;
+    /**
+     * Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
+     * and focus the input element when triggered.
+     *
+     * @param e - The keyboard event.
+     */
+    private keydownListener;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     getInputElement(): Promise<HTMLInputElement>;
     onChange: (e: any) => void;
     render(): any;

package/dist/types/components/eds-input-field/eds-input-field.d.ts

@@ -93,6 +93,9 @@ export declare class EdsInputField {
         value: string | number;
         label: string;
     }[];
+    hostEl: HTMLElement;
+    private handleNativeInput;
+    private handleNativeChange;
     get parsedOptions(): any;
     render(): any;
 }

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

@@ -18,13 +18,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        mode: {
-            control: {
-                type: string;
-            };
-            options: string[];
-            description: string;
-        };
         prevLabel: {
             control: string;
             description: string;
@@ -59,7 +52,6 @@ declare const _default: {
         lastPage: number;
         perPage: number;
         total: number;
-        mode: string;
         prevLabel: string;
         nextLabel: string;
         prevUrl: string;

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

@@ -27,6 +27,23 @@ export declare class EdsSteps {
      * Emits when a step is clicked, providing the step's index.
      */
     step: EventEmitter<number>;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    /**
+     * 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;
+    activeStepChanged(newValue: number): 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;
     private handleStepClick;
     /**
      * Parse the JSON string into an array of steps.

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

@@ -38,7 +38,7 @@ export declare class EdsTable {
      */
     columnSize?: 'default' | 'medium' | 'large';
     /** Internal state for pagination and data */
-    tableData: {
+    tbData: {
         [key: string]: any;
     }[];
     columns: string[];
@@ -51,12 +51,16 @@ export declare class EdsTable {
     };
     totalRows: number;
     searchQuery: string;
+    containerWidth: number;
     hostEl: HTMLElement;
     handleDataChange(): void;
     handleConfigChange(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    private handleResize;
+    private updateContainerWidth;
     private parseData;
     private parseConfig;
     private fetchData;