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

package/dist/types/eds-docs-ui/eds-logo-variations/eds-logo-variations.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export declare class EdsLogoVariations {
+    /** Active tab index to determine the content to display */
+    tabIndex: number;
+    renderContent(): any;
+    render(): any;
+}

package/dist/types/eds-docs-ui/eds-svg-repository/eds-svg-repository.d.ts

@@ -2,6 +2,8 @@
  * @internal
  */
 export declare class EdsSvgRepository {
+    hostEl: HTMLElement;
     private getSvgData;
+    get hostWidth(): number;
     render(): any;
 }

package/dist/types/eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.d.ts

@@ -1,12 +1,6 @@
 /**
  * @internal
  */
-export declare class LogoVariations {
-    orientation: 'horizontal' | 'vertical';
-    /**
-     * The type of logo variation to display.
-     * Available options: "coloured", "mono", "dark".
-     */
-    type: 'coloured' | 'black' | 'color-white';
+export declare class LogoVariationsHorizontal {
     render(): any;
 }

package/dist/types/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.d.ts

@@ -1,7 +1,7 @@
 /**
  * @internal
  */
-export declare class LogoVariations {
+export declare class LogoVariationsVertical {
     orientation: 'horizontal' | 'vertical';
     /**
      * The type of logo variation to display.

package/dist/types/shared-ui/eds-card-section/eds-card-section.d.ts

@@ -18,7 +18,7 @@ export declare class EdsCardSection {
      * '[{"title": "Card Title", "description": "Description", "avatar": "/path/to/avatar.jpg", "url": "http://example.com"}]'
      * ```
      */
-    cards: string;
+    cards: string | [];
     /**
      * Number of columns to span for each card in the grid layout.
      * This value sets the column span on medium (md) and larger screen sizes.

package/dist/types/shared-ui/eds-card-section/eds-card-section.stories.d.ts

@@ -21,7 +21,47 @@ declare const _default: {
         };
     };
     args: {
-        cards: string;
+        cards: ({
+            title: string;
+            description: string;
+            url: string;
+            avatar: string;
+            shortAbbreviation: string;
+            headingLevel: string;
+            tags: string;
+            tiny: boolean;
+            bg: boolean;
+            withHover: boolean;
+            image: {
+                src: string;
+                alt: string;
+                srcset: string;
+                sizes: string;
+                width: number;
+                height: number;
+                lazyload: boolean;
+            };
+        } | {
+            title: string;
+            description: string;
+            url: string;
+            avatar: string;
+            shortAbbreviation: string;
+            headingLevel: string;
+            tags: string;
+            tiny: boolean;
+            bg: boolean;
+            withHover: boolean;
+            image: {
+                src: string;
+                alt: string;
+                width: number;
+                height: number;
+                lazyload: boolean;
+                srcset?: undefined;
+                sizes?: undefined;
+            };
+        })[];
         cols: number;
         extraClass: string;
     };
@@ -29,5 +69,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
-    render: (args: any) => string;
+    render: (args: any) => HTMLEdsCardSectionElement;
 };

package/dist/types/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.d.ts

@@ -4,7 +4,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * It provides a responsive, full-window overlay menu with navigation links and additional options.
  * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
  *
- * ## Key Features:
+ * ## Key Features
+ *
  * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
  * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
  * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
@@ -15,7 +16,12 @@ export declare class EdsFullscreenMenu {
      * JSON string representing the links for primary navigation.
      * Each link should include `label`, `url`, and optionally an `icon`.
      */
-    links: string;
+    links: string | {
+        label: string;
+        url: string;
+        icon?: string;
+        external?: boolean;
+    }[];
     /**
      * JSON string representing the extra menu links a user wants for smaill screens navigation.
      * Each link should include `label`, `url`.

package/dist/types/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.stories.d.ts

@@ -0,0 +1,29 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        menuEnabled: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+        };
+        headerLinks: {
+            control: string;
+            description: string;
+            defaultValue: {
+                label: string;
+                url: string;
+            }[];
+        };
+        menuLinks: {
+            control: string;
+            description: string;
+            defaultValue: {
+                label: string;
+                url: string;
+            }[];
+        };
+    };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/shared-ui/eds-header/eds-header.d.ts

@@ -22,7 +22,12 @@ export declare class EdsHeader {
      * JSON string representing the links for primary navigation.
      * Each link should include `label`, `url`, and optionally an `icon`.
      */
-    links: string;
+    links: string | {
+        label: string;
+        url: string;
+        icon?: string;
+        external?: boolean;
+    }[];
     /**
      * Determines if the header is rendered in inverse style.
      * When true, the header applies styles suitable for a dark background.
@@ -36,6 +41,7 @@ export declare class EdsHeader {
     /**
      * Flag to enable or disable header menu toggle feature.
      * When true, displays the toggle in the header.
+     * Requires the <eds-fullscreen-menu> to properly work.
      */
     menuEnabled: boolean;
     /**

package/dist/types/shared-ui/eds-header/eds-header.stories.d.ts

@@ -18,6 +18,10 @@ declare const _default: {
             control: string;
             description: string;
         };
+        menuEnabled: {
+            control: string;
+            description: string;
+        };
         inverseHeader: {
             control: string;
             description: string;
@@ -41,7 +45,11 @@ declare const _default: {
     };
     args: {
         homeUrl: string;
-        links: string;
+        links: {
+            label: string;
+            url: string;
+        }[];
+        menuEnabled: boolean;
         inverseHeader: boolean;
         userFeature: boolean;
         keycloakUrl: string;

package/dist/types/shared-ui/eds-social-networks/eds-social-networks.d.ts

@@ -2,7 +2,7 @@
  * Component representing a list of social network links for EBRAINS.
  * Each link directs users to EBRAINS' profiles on various social networks.
  */
-export declare class EdsSocialNetwork {
+export declare class EdsSocialNetworks {
     /**
      * Social Network custom title to display
      */

package/dist/types/shared-ui/eds-social-networks/eds-social-networks.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        title: {
+            control: string;
+            defaultValue: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const CustomTitle: any;

package/dist/types/shared-ui/eds-tabs/eds-tabs.d.ts

@@ -15,7 +15,12 @@ export declare class EdsTabs {
     /** Aria label for the navigation */
     navAriaLabel: string;
     /** JSON string for tabs data */
-    tabs: string;
+    tabs: string | {
+        label: string;
+        url: string;
+        active: boolean;
+        ariaLabel: string;
+    }[];
     /** State to store parsed tabs */
     parsedTabs: Array<{
         label: string;
@@ -32,6 +37,18 @@ export declare class EdsTabs {
     }>;
     tabContainer: HTMLElement;
     componentWillLoad(): void;
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
     parseTabs(): void;
     componentDidLoad(): void;
     private setActiveIndex;

package/dist/types/shared-ui/eds-user/eds-user.d.ts

@@ -38,8 +38,7 @@ export declare class EdsUser {
      */
     authenticated: boolean;
     /**
-     * Indicates whether the user is authenticated.
-     * This is set to `true` if the user is successfully authenticated with Keycloak.
+     * Indicates whether the Keycloak server is available.
      */
     serverAvailable: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "0.2.0-alpha.0",
+  "version": "0.4.0-alpha.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -14,7 +14,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@ebrains/assets":"0.2.0-alpha.0",
-    "@ebrains/svgs":"0.2.0-alpha.0"
+    "@ebrains/assets":"0.3.0-alpha.0",
+    "@ebrains/svgs":"0.3.0-alpha.0"
   }
 }

package/dist/cjs/eds-accordion.cjs.entry.js

@@ -1,93 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f08e4f5c.js');
-
-const edsAccordionCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.min-h-36{min-height:2.25rem}.min-h-44{min-height:2.75rem}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-20{padding-top:1.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.text-left{text-align:left}.text-center{text-align:center}";
-const EdsAccordionStyle0 = edsAccordionCss;
-
-const EdsAccordion = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.accordionChange = index.createEvent(this, "accordionChange", 7);
-        /**
-         * Handles the click event on the accordion header to toggle expansion.
-         * Toggles the `isExpanded` state and emits the `accordionChange` event.
-         */
-        this.handleClick = () => {
-            this.isExpanded = !this.isExpanded;
-            this.accordionChange.emit(this.isExpanded);
-            this.setPanelHeight();
-        };
-        /**
-         * Calculates and sets the panel height based on the content height
-         * and adjusts based on the `shortContent` and `isExpanded` states.
-         */
-        this.setPanelHeight = () => {
-            if (this.childContentRef) {
-                this.shortContent =
-                    this.wrapperRef.scrollWidth > 830 && !this.description
-                        ? this.childContentRef.scrollHeight <= 80
-                        : this.childContentRef.scrollHeight <= 20;
-                this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0;
-            }
-        };
-        this.title = undefined;
-        this.description = undefined;
-        this.switchBg = true;
-        this.expanded = false;
-        this.clampText = true;
-        this.minHeightContent = false;
-        this.isExpanded = this.expanded;
-        this.panelHeight = 0;
-        this.shortContent = false;
-    }
-    /**
-     * Lifecycle method that sets up the initial panel height and adds a resize event listener
-     * to recalculate height on window resize.
-     */
-    componentDidLoad() {
-        this.setPanelHeight();
-        // Emit context for each eds-link element after the component is fully loaded
-        const btn = this.el.shadowRoot.querySelector('eds-button');
-        this.emitContext(btn);
-        window.addEventListener('resize', this.setPanelHeight);
-    }
-    /**
-     * 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) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
-    /**
-     * Lifecycle method that cleans up the resize event listener when the component is removed.
-     */
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.setPanelHeight);
-    }
-    /**
-     * Renders the accordion structure, including header, content, description, and any slotted content.
-     * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
-     */
-    render() {
-        const minHeightContentClass = this.minHeightContent ? 'min-h-56' : '';
-        return (index.h("div", { key: '1f8ea188c4b39f6d1a8d10cdbf43d3df88d1281f', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
-          ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
-          ${this.switchBg ? 'hover:bg-inverse' : ''} 
-          ${minHeightContentClass}` }, index.h("h3", { key: '4490bdc1a18b99850e8db8ae1c38fcb37912ec0d', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), index.h("div", { key: '82df433a9cc6805a735300fd1bb52f41c639c992', class: "ml-auto" }, index.h("eds-button", { key: '9965d5eecfa02fbea08c23c44d325417767f6495', id: "accordionId", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-controls": "accordionId", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), index.h("div", { key: '7ab8d2d07d55fa05c5e5647d1d00d1165f0d40ce', class: `w-full` }, this.description ? (index.h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, index.h("section", { key: 'cb122dd5433d7012cba6f3769f79e92a155c45d7', id: "sectionId", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, index.h("div", { key: '0c2e1d9b38f21f0cb7f50aa3923edcc448418e3f', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, index.h("span", { key: 'd119c88d54e8d5e83d4cc3d4d16d1cd53d689bc7', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, index.h("slot", { key: 'b2a6917ec65bc808389a2d1c77cd1183f00cbaa1' })))))));
-    }
-    get el() { return index.getElement(this); }
-};
-EdsAccordion.style = EdsAccordionStyle0;
-
-exports.eds_accordion = EdsAccordion;

package/dist/cjs/eds-block-break.cjs.entry.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f08e4f5c.js');
-
-const edsBlockBreakCss = ".border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-softest{border-color:rgba(0, 0, 0, .05)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.w-full{width:100%}.border-t-2{border-top-width:2px}";
-const EdsBlockBreakStyle0 = edsBlockBreakCss;
-
-const EdsBlockBreak = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.extraClass = '';
-    }
-    render() {
-        return index.h("hr", { key: '85b5253d4abb77072424452d2ff6a0d631e67652', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
-    }
-};
-EdsBlockBreak.style = EdsBlockBreakStyle0;
-
-exports.eds_block_break = EdsBlockBreak;

package/dist/cjs/eds-breadcrumb.cjs.entry.js

@@ -1,153 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f08e4f5c.js');
-
-const edsBreadcrumbCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";
-const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
-
-const EdsBreadcrumb = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Updates the maximum number of visible items and tracks if the screen is small.
-         */
-        this.updateScreenSize = () => {
-            const width = window.innerWidth;
-            if (width < 769) {
-                this.maxVisibleItems = 3;
-                this.isSmallScreen = true;
-            }
-            else if (width <= 1024) {
-                this.maxVisibleItems = 4;
-                this.isSmallScreen = true;
-            }
-            else {
-                this.maxVisibleItems = 6;
-                this.isSmallScreen = false;
-            }
-        };
-        this.items = [];
-        this.intent = 'ghost';
-        this.parsedItems = [];
-        this.isSmallScreen = false;
-        this.maxVisibleItems = 6;
-    }
-    /**
-     * Watch for changes to the `items` prop and parse it when it changes.
-     * Converts the `items` string into an array of objects if it is a JSON string.
-     * If the format is invalid, it logs an error and sets an empty array.
-     *
-     * @param newValue - The new value for the `items` prop.
-     */
-    parseItems(newValue) {
-        try {
-            if (typeof newValue === 'string') {
-                this.parsedItems = JSON.parse(newValue);
-            }
-            else {
-                this.parsedItems = newValue;
-            }
-        }
-        catch (e) {
-            this.parsedItems = [];
-        }
-    }
-    /**
-     * Lifecycle method that runs when the component is about to be loaded.
-     * It parses the initial `items` prop value.
-     */
-    componentWillLoad() {
-        this.parseItems(this.items);
-        this.updateScreenSize();
-        window.addEventListener('resize', this.updateScreenSize);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.updateScreenSize);
-    }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
-     */
-    componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.el.shadowRoot.querySelectorAll('eds-link');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    /**
-     * 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) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
-    /**
-     * Truncates breadcrumb items based on the maxVisibleItems value.
-     * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
-     */
-    getTruncatedItems() {
-        const totalItems = this.parsedItems.length;
-        if (totalItems > this.maxVisibleItems) {
-            const firstItem = this.parsedItems[0];
-            const lastItems = this.parsedItems.slice(-2);
-            const ellipsis = { label: '...', url: '', isHidden: true };
-            if (this.maxVisibleItems === 3) {
-                return [
-                    this.truncateLabel(firstItem),
-                    ellipsis,
-                    ...lastItems.map((item, index) => (index === lastItems.length - 1 ? item : this.truncateLabel(item)))
-                ];
-            }
-            else if (this.maxVisibleItems === 4) {
-                const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
-                return [
-                    this.truncateLabel(firstItem),
-                    this.truncateLabel(middleItem),
-                    ellipsis,
-                    ...lastItems.map((item, index) => (index === lastItems.length - 1 ? item : this.truncateLabel(item)))
-                ];
-            }
-        }
-        return this.parsedItems.map((item, index) => index === this.parsedItems.length - 1 ? item : this.truncateLabel(item));
-    }
-    /**
-     * Truncates the label of a breadcrumb item to a maximum of 10 characters
-     * if the screen is small.
-     */
-    truncateLabel(item) {
-        if (item.label.length > 15) {
-            return Object.assign(Object.assign({}, item), { label: `${item.label.slice(0, 15)}...` });
-        }
-        return item;
-    }
-    /**
-     * 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.
-     */
-    render() {
-        const itemsToRender = this.getTruncatedItems();
-        return (index.h("nav", { key: 'b3f515670374a7451981638d658f8e37f07ab10c', "aria-label": "Breadcrumb" }, index.h("ol", { key: '999b2035f3c996016e753be3826881a11054e184', class: "flex items-center space-x-2" }, itemsToRender.map((item, index$1) => {
-            const isLast = index$1 === itemsToRender.length - 1;
-            return (index.h("li", { class: "flex items-center" }, !item.isHidden ? (index.h("eds-link", { label: item.label, url: item.url, intent: this.intent, current: isLast, "aria-label": item.label, size: "small", "icon-small": "false" })) : (index.h("span", { class: "truncate px-2 ", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (index.h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
-        }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "items": ["parseItems"]
-    }; }
-};
-EdsBreadcrumb.style = EdsBreadcrumbStyle0;
-
-exports.eds_breadcrumb = EdsBreadcrumb;

package/dist/cjs/eds-footer.cjs.entry.js

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f08e4f5c.js');
-
-const edsFooterCss = "";
-const EdsFooterStyle0 = edsFooterCss;
-
-const EdsFooter = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Scrolls the page smoothly back to the top.
-         * Called when the "Back to top" button is clicked.
-         * @private
-         */
-        this.backToTop = () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        };
-        this.extraClass = '';
-        this.social = false;
-        this.hasCookiesSetUp = false;
-        this.enableScrollTop = false;
-        this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
-        this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
-        this.cookiesPreference = 'Cookies Preferences';
-    }
-    /**
-     * Toggles the cookie preferences popup, if available.
-     * The actual implementation for handling cookie preferences should be defined here.
-     * @private
-     */
-    toggleCookiesPopup() {
-        // Implement logic for handling cookie preferences
-    }
-    /**
-     * Renders the footer component with optional sections and elements,
-     * including social network links, a Horizon Europe funding acknowledgment, and
-     * legal links such as "Cookies Preferences" and copyright information.
-     *
-     * @returns {JSX.Element} The rendered JSX for the footer component.
-     */
-    render() {
-        return (index.h("footer", { key: 'efffa9b96cc2a094255fcb6d08ec45c7c7f09ec4', class: `${this.extraClass} pb-banner` }, this.social ? (index.h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, index.h("div", { class: "container pb-20 xl:pb-40 " }, index.h("div", { class: "grid-layout" }, index.h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, index.h("eds-social-networks", { class: "mt-28" })), index.h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, index.h("div", { key: 'c3942c635dff3dc8cb47a21f20aca52acfaa3e18', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, index.h("div", { key: '57e963272659ce2e63294c969f3724a03aef667e', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, index.h("div", { key: 'c3e5cfe07fe9eb90450f7a87be1b95ed00ef38ce', class: "flex items-center gap-x-12" }, index.h("a", { key: 'b0d0c65115b611f78d2b468559c16eb60f538907', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en" }, index.h("eds-img", { key: '6cb5d067f07b456a8d828f3f42f2730e3e5374e0', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), index.h("div", { key: 'e5b768b0fb96fcdcb786d33fc808368005935491', class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, index.h("p", { key: '777263c2f4bde43d38690f41391eaf8e51d945fa' }, this.fundedBy), index.h("div", { key: 'a415687d08edf8f3e03a6edce9c45f58662c8595', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, index.h("span", { key: 'c0b6498ad4f5e1f4f1945ebb971f9dd81cc74c77', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && (index.h("button", { key: '10133d180bfb0d8a6354ea2cbea318a2c46fc463', class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference)))), index.h("div", { key: '917d0980f91a8c42a75bae301b0a18e3777dd021', class: "ml-auto pl-12" }, this.enableScrollTop ? (index.h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
-    }
-};
-EdsFooter.style = EdsFooterStyle0;
-
-exports.eds_footer = EdsFooter;