@ebrains/components 0.0.1-alpha.0 → 0.3.0-alpha.0

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

@@ -18,7 +18,12 @@ export declare class EdsCardSection {
      * '[{"title": "Card Title", "description": "Description", "avatar": "/path/to/avatar.jpg", "url": "http://example.com"}]'
      * ```
      */
-    cards: string;
+    cards: string | {
+        title: string;
+        description: string;
+        tags: string;
+        url: 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

@@ -28,6 +28,25 @@ declare const _default: {
     parameters: {};
 };
 export default _default;
-export declare const Default: {
+export declare const WithString: {
     render: (args: any) => string;
 };
+export declare const WithObject: {
+    render: (args: any) => HTMLEdsCardSectionElement;
+    args: {
+        cards: {
+            title: string;
+            description: string;
+            tags: string;
+            url: string;
+        }[];
+        cols: number;
+        extraClass: string;
+    };
+    argTypes: {
+        cards: {
+            control: string;
+            description: string;
+        };
+    };
+};

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.0.1-alpha.0",
+  "version": "0.3.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.0.1-alpha.0",
-    "@ebrains/svgs":"0.0.1-alpha.0"
+    "@ebrains/assets":"0.3.0-alpha.0",
+    "@ebrains/svgs":"0.3.0-alpha.0"
   }
 }

package/dist/cjs/color-primary-palette.cjs.entry.js

@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-383d2951.js');
-
-const ColorPrimaryPalette = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // Primary palette data
-        this.colors = [
-            {
-                rgb: 'R156 G225 B66',
-                cmyk: 'C52 M0 Y98 K0',
-                hex: '#9CE142',
-                pantoneC: 'PANTONE 367 C',
-                pantoneU: 'PANTONE 374 U',
-                background: '#9CE142'
-            },
-            {
-                rgb: 'R0 G201 B89',
-                cmyk: 'C75 M0 Y80 K0',
-                hex: '#00C959',
-                pantoneC: 'PANTONE 7480 C',
-                pantoneU: 'PANTONE 7481 U',
-                background: '#00C959'
-            },
-            {
-                rgb: 'R0 G165 B149',
-                cmyk: 'C78 M8 Y49 K0',
-                hex: '#00A595',
-                pantoneC: 'PANTONE 3272 C',
-                pantoneU: 'PANTONE 3275 U',
-                background: '#00A595'
-            }
-        ];
-    }
-    render() {
-        return (index.h("ul", { key: '153e3c0f00db6f824cb0f43b420645bcbd66632f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
-    }
-};
-
-exports.color_primary_palette = ColorPrimaryPalette;

package/dist/cjs/color-secondary-palette.cjs.entry.js

@@ -1,68 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-383d2951.js');
-
-const ColorSecondaryPalette = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // Secondary palette data
-        this.colors = [
-            {
-                rgb: 'R63 G169 B245',
-                cmyk: 'C68 M13 Y0 K0',
-                hex: '#3FA9F5',
-                pantoneC: 'PANTONE 298 C',
-                pantoneU: 'PANTONE 298 U',
-                background: '#3FA9F5'
-            },
-            {
-                rgb: 'R6 G68 B244',
-                cmyk: 'C92 M60 Y0 K0',
-                hex: '#0644F4',
-                pantoneC: 'PANTONE 2728 C',
-                pantoneU: 'PANTONE 2935 U',
-                background: '#0644F4'
-            },
-            {
-                rgb: 'R196 G97 B255',
-                cmyk: 'C52 M67 Y0 K0',
-                hex: '#C461FF',
-                pantoneC: 'PANTONE 252 C',
-                pantoneU: 'PANTONE 252 U',
-                background: '#C461FF'
-            },
-            {
-                rgb: 'R93 G61 B249',
-                cmyk: 'C83 M78 Y0 K0',
-                hex: '#5D3DF9',
-                pantoneC: 'PANTONE 266 C',
-                pantoneU: 'PANTONE 2735 U',
-                background: '#5D3DF9'
-            },
-            {
-                rgb: 'R255 G165 B67',
-                cmyk: 'C0 M43 Y76 K0',
-                hex: '#FFA543',
-                pantoneC: 'PANTONE 804 C',
-                pantoneU: 'PANTONE 136 U',
-                background: '#FFA543'
-            },
-            {
-                rgb: 'R255 G77 B104',
-                cmyk: 'C0 M81 Y42 K0',
-                hex: '#FF4D68',
-                pantoneC: 'PANTONE 1785 C',
-                pantoneU: 'PANTONE 185 U',
-                background: '#FF4D68'
-            }
-        ];
-        this.show = undefined;
-    }
-    render() {
-        return (index.h("ul", { key: 'b0af2cdf6524cf79ef8d28f37533d1f84812f174', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC), index.h("span", { class: "f-body-02" }, color.pantoneU))))))));
-    }
-};
-
-exports.color_secondary_palette = ColorSecondaryPalette;

package/dist/cjs/color-support-palette.cjs.entry.js

@@ -1,59 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-383d2951.js');
-
-const ColorSupportPalette = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // Support palette data
-        this.colors = [
-            {
-                rgb: 'R20 G20 B20',
-                cmyk: 'C78 M69 Y61 K87',
-                hex: '#141414',
-                pantoneC: '',
-                pantoneU: '',
-                background: '#141414'
-            },
-            {
-                rgb: 'R56 G56 B56',
-                cmyk: 'C68 M58 Y55 K63',
-                hex: '#383838',
-                pantoneC: 'PANTONE 447 C',
-                pantoneU: 'PANTONE Neutral Black U',
-                background: '#383838'
-            },
-            {
-                rgb: 'R204 G204 B204',
-                cmyk: 'C23 M17 Y18 K0',
-                hex: '#CCCCCC',
-                pantoneC: 'PANTONE Cool Gray 2 C',
-                pantoneU: 'PANTONE Cool Gray 2 U',
-                background: '#CCCCCC'
-            },
-            {
-                rgb: 'R230 G230 B230',
-                cmyk: 'C12 M8 Y9 K0',
-                hex: '#E6E6E6',
-                pantoneC: 'PANTONE 663 C',
-                pantoneU: 'PANTONE 649 U',
-                background: '#E6E6E6'
-            },
-            {
-                rgb: 'R255 G255 B255',
-                cmyk: 'C0 M0 Y0 K0',
-                hex: '#FFFFFF',
-                pantoneC: '',
-                pantoneU: '',
-                background: '#FFFFFF'
-            }
-        ];
-    }
-    render() {
-        return (index.h("ul", { key: 'c58041047c7d7993ac4e936051d40e1e8dda5263', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.rgb), index.h("span", { class: "f-body-02 w-full" }, color.cmyk), index.h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), index.h("div", { class: "grid" }, index.h("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), index.h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
-    }
-};
-
-exports.color_support_palette = ColorSupportPalette;

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

@@ -1,73 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-383d2951.js');
-const index$1 = require('./index-96a4261e.js');
-require('./index-1ff5f25c.js');
-
-const edsAvatarCss = ".border-inside {\n    position: relative;\n\n    &::after {\n        pointer-events: none;\n    }\n\n    &::after {\n        position: absolute;\n    }\n\n    &::after {\n        inset: 0rem;\n    }\n\n    &::after {\n        z-index: 1;\n    }\n\n    &::after {\n        border-radius: 8px;\n    }\n\n    &::after {\n        border-width: 1px;\n    }\n\n    &::after {\n        border-width: 2px;\n    }\n\n    &::after {\n        border: 2px solid rgba(0, 0, 0, .1);\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.border-inside-pill {\n    &::after {\n        border-radius: 100px;\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.border-inside-inverse {\n    &::after {\n        border: 2px solid rgba(255, 255, 255, 0.3);\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.aspect-1x1 {\n    aspect-ratio: 1/1;\n}\n\n.flex {\n    display: flex;\n}\n\n.inline-flex {\n    display: inline-flex;\n}\n\n.items-center {\n    align-items: center;\n}\n\n.justify-center {\n    justify-content: center;\n}\n\n.overflow-hidden {\n    overflow: hidden;\n}\n\n.px-4 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n}\n\n.rounded-pill {\n    border-radius: 100px;\n}\n\n.rounded-sm {\n    border-radius: 8px;\n}\n\n.rounded-xs {\n    border-radius: 4px;\n}\n\n\n.bg-dark {\n    background-color: var(--grey-300);\n}\n\n.bg-darker {\n    background-color: var(--grey-400);\n}\n\n.bg-stronger {\n    background-color: var(--grey-900);\n}\n\n.bg-strongest {\n    background-color: var(--black);\n}\n\n.text-accent {\n    color: var(--green-500);\n}\n\n.text-default {\n    color: var(--black);\n}\n\n.\\!no-underline {\n    text-decoration-line: none !important;\n}\n\n.f-ui-01 {\n    font-family: var(--f-ui-01-fontFamily);\n    font-weight: var(--f-ui-01-fontWeight);\n    font-size: var(--f-ui-01-fontSize);\n    line-height: var(--f-ui-01-lineHeight);\n    letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.w-32 {\n    width: 2rem;\n}\n\n.w-44 {\n    width: 2.75rem;\n}\n\n.w-\\[54px\\] {\n    width: 54px;\n}";
-
-const EdsAvatar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.firstName = undefined;
-        this.lastName = undefined;
-        this.picture = undefined;
-        this.initials = undefined;
-        this.color = undefined;
-        this.rounded = false;
-        this.initialsStrong = false;
-    }
-    /**
-     * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
-     * @returns {string | undefined} Initials for display in the avatar.
-     */
-    get computedInitials() {
-        if (this.initials) {
-            return (this.initials.match(/.{1,3}/g) || [])[0] || '';
-        }
-        else if (this.firstName && this.lastName) {
-            return `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase();
-        }
-        return undefined;
-    }
-    /**
-     * Computes the CSS classes for the avatar container based on provided props like `rounded`, `color`, and `picture`.
-     * @returns {string} List of CSS classes to apply to the avatar container.
-     */
-    get containerClasses() {
-        return [
-            'border-inside',
-            'aspect-1x1',
-            'flex',
-            'items-center',
-            'justify-center',
-            'overflow-hidden',
-            this.picture ? '' : 'px-4',
-            this.rounded ? 'rounded-pill border-inside-pill w-32' : 'w-[54px] rounded-sm',
-            this.color ? 'border-inside-inverse' : '',
-            this.color === 'grey'
-                ? 'bg-dark'
-                : this.color && !this.picture
-                    ? index$1.gradientBGColorVariants({
-                        color: this.color,
-                        direction: 'top',
-                        pseudo: false
-                    })
-                    : !this.picture
-                        ? 'bg-strongest text-accent'
-                        : ''
-        ].join(' ');
-    }
-    /**
-     * Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
-     * @returns {JSX.Element} The rendered avatar component.
-     */
-    render() {
-        return (index.h("div", { key: '716279a35cc9235da991563d5f84d2dedbdae001', class: this.containerClasses }, this.picture ? (index.h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (index.h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
-    }
-};
-EdsAvatar.style = edsAvatarCss;
-
-exports.eds_avatar = EdsAvatar;

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

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-383d2951.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 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 = edsBlockBreakCss;
-
-exports.eds_block_break = EdsBlockBreak;

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

@@ -1,152 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-383d2951.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 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 = edsBreadcrumbCss;
-
-exports.eds_breadcrumb = EdsBreadcrumb;