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

package/dist/esm/eds-avatar_4.entry.js

@@ -0,0 +1,180 @@
+import { r as registerInstance, h } from './index-e96badea.js';
+import { g as gradientBGColorVariants } from './color-2554aad6.js';
+import { c as cva } from './index-39c58238.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 EdsAvatarStyle0 = edsAvatarCss;
+
+const EdsAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.firstName = 'User';
+        this.lastName = 'Avatar';
+        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
+                    ? 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 (h("div", { key: '47ee5ffd12c0f90c536dea77b3ffa9120d67f37f', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+    }
+};
+EdsAvatar.style = EdsAvatarStyle0;
+
+const edsCardDescCss = ".f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.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}";
+const EdsCardDescStyle0 = edsCardDescCss;
+
+const EdsCardDesc = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.description = undefined;
+        this.descClass = 'f-ui-03-light';
+        this.truncate = true;
+        this.truncateLines = '3';
+    }
+    getTruncateClass() {
+        return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+    }
+    render() {
+        return (h("p", { key: '71495cbd6ef4e7d66c4c22a37f8120624ecf57fb', class: `text-light ${this.descClass}` }, h("span", { key: '8708178f7b48cc1f31aac749f50fe92b72c39ab8', class: this.getTruncateClass() }, this.description)));
+    }
+};
+EdsCardDesc.style = EdsCardDescStyle0;
+
+const edsCardTitleCss = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.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)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}";
+const EdsCardTitleStyle0 = edsCardTitleCss;
+
+const EdsCardTitle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.url = undefined;
+        this.titleClass = undefined;
+        this.headingLevel = 'h3';
+        this.externalLink = false;
+        this.cardTitle = undefined;
+        this.hierarchy = true;
+    }
+    /**
+     * Dynamically generate the title class based on the heading level.
+     */
+    getTitleClass() {
+        const levelMap = this.hierarchy
+            ? {
+                h1: '05',
+                h2: '05',
+                h3: '05',
+                h4: '05',
+                h5: '05',
+                h6: '06'
+            }
+            : {
+                h1: '01',
+                h2: '02',
+                h3: '03',
+                h4: '04',
+                h5: '05',
+                h6: '06'
+            };
+        return `f-heading-${levelMap[this.headingLevel]}`;
+    }
+    /*private getTag() {
+      if (this.url) {
+        return 'a';
+      }
+      return 'span';
+    }*/
+    render() {
+        //const Tag = this.getTag();
+        const Heading = this.headingLevel;
+        return (h(Heading, { key: 'bb97dc6dd53adda14ef251b2ec32952791438986', class: this.getTitleClass() }, h("a", { key: '37b6ac0668257d27fb3f03a6225a2d48e1fd1f79', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
+    }
+};
+EdsCardTitle.style = EdsCardTitleStyle0;
+
+const edsTagCss = ".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";
+const EdsTagStyle0 = edsTagCss;
+
+// Define the CVA for the tag styles
+const tagStyles = cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'], // Base classes
+{
+    variants: {
+        intent: {
+            default: 'border-default',
+            strong: 'text-inverse bg-strongest border-default',
+            accent: 'text-[#0034CB] border-[#0034CB]',
+            weak: 'text-light bg-strongest-soft border-transparent',
+            inverse: 'border-inverse text-inverse',
+            'inverse-strong': 'bg-inverse border-inverse text-lighter'
+        }
+    },
+    defaultVariants: {
+        intent: 'default'
+    }
+});
+const EdsTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.label = undefined;
+        this.ariaLabel = '';
+        this.intent = 'default';
+    }
+    /**
+     * Render the component.
+     * @returns The rendered HTML for the tag component with the applied styles and label.
+     */
+    render() {
+        var _a;
+        const classes = tagStyles({ intent: this.intent });
+        const accessibleLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.length) ? this.ariaLabel : this.label;
+        return (h("span", { key: '6a517f42aeb641c95d96ecd6c3090a317a3195c6', class: classes, "aria-label": accessibleLabel }, this.label));
+    }
+};
+EdsTag.style = EdsTagStyle0;
+
+export { EdsAvatar as eds_avatar, EdsCardDesc as eds_card_desc, EdsCardTitle as eds_card_title, EdsTag as eds_tag };

package/dist/esm/eds-card-generic.entry.js

@@ -0,0 +1,100 @@
+import { r as registerInstance, h, g as getElement } from './index-e96badea.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.js';
+
+const edsCardGenericCss = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}";
+const EdsCardGenericStyle0 = edsCardGenericCss;
+
+const EdsCardGeneric = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.parentContext = null; // Accepts the entire event detail or null
+        this.cardTitle = undefined;
+        this.url = undefined;
+        this.description = undefined;
+        this.image = undefined;
+        this.avatar = undefined;
+        this.shortAbbreviation = undefined;
+        this.headingLevel = 'h3';
+        this.tags = [];
+        this.tiny = false;
+        this.bg = true;
+        this.withHover = true;
+        this.hierarchy = true;
+        this.parsedImage = null;
+    }
+    componentWillLoad() {
+        if (this.image) {
+            try {
+                if (typeof this.image === 'object') {
+                    // If image is already an object, assign it directly
+                    this.parsedImage = this.image;
+                }
+                else if (typeof this.image === 'string') {
+                    // If image is a string, try to parse it
+                    this.parsedImage = JSON.parse(this.image);
+                }
+            }
+            catch (error) {
+                // eslint-disable-next-line
+                console.error('Error parsing image prop:', error);
+                this.parsedImage = {}; // Assign a fallback empty object in case of an error
+            }
+        }
+    }
+    handleParentContext(event) {
+        if (event.target !== this.el) {
+            // Ignore the event if it's not targeted at this specific instance
+            return;
+        }
+        //console.log(event.detail);
+        this.parentContext = event.detail;
+        event.stopPropagation();
+    }
+    /**
+     * Parses the `tags` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedTags() {
+        if (typeof this.tags === 'object') {
+            return this.tags;
+        }
+        else if (typeof this.tags === 'string') {
+            try {
+                return JSON.parse(this.tags);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing tags prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    articleClasses() {
+        return [
+            this.description ? (this.tiny ? 'min-h-120' : 'min-h-156') : 'h-auto',
+            this.bg ? 'bg-inverse' : 'bg-default',
+            this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
+            'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
+        ].join(' ');
+    }
+    handleClick() {
+        var _a;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: this.parentContext,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (h("article", { key: 'dcb7cea87bfb52f8886f7ee3dbc3484d615bc00c', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '94dd6ff2679ce9ac4d25ec921cd1162b1584e4fd', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '433c4fe3a518153d89d48af54455286fa415a688', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '97b75afb4b8de1183d4b212054ff556ba3db8fcb', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
+    }
+    get el() { return getElement(this); }
+};
+EdsCardGeneric.style = EdsCardGenericStyle0;
+
+export { EdsCardGeneric as eds_card_generic };

package/dist/esm/eds-card-project.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-e96badea.js';
-import { s as sendAnalytics, g as gradientBGColorVariants } from './color-bb472c37.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.js';
+import { g as gradientBGColorVariants } from './color-2554aad6.js';
 import './index-39c58238.js';
 
 const EdsCardProject = class {
@@ -55,7 +56,7 @@ const EdsCardProject = class {
             this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'
         ].join(' ');
         const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
-        return (h("article", { key: '6af49754300ded8748ac3f40175e262480054969', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '91e8501312957c44d9dc075f2ec3a9e5a5d425cb', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '44e3cf2d67255bb5669b6c721741ed060ba599e7', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: '0cf1d124b975e4d7223bab58db0d5861d348ceb2', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '85e1158691ae876bc0f3c6d0c5557f394ae935cb', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '9ffdc9f14709600b623c3a5f878b2700864ced79', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", { key: 'ecc5e55430df355c13420add9969855d1d54c27f', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '97de7a06a13d9843cb18fe4eb19303f436e2ce16', class: imageClasses }, h("div", { key: '532d3c8252316a68976b4587c3d5b63167c0c598', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '37ee3dbbc99ec8c9139b0a89f9c725768eac5f6d', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (h("article", { key: '98c5dbd033ec05d08965559e00f32d9fe18698ef', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: 'e083c43e38c3c24fcd996a90267f7cd92d3651b3', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '37de1e46023b533fd8595a3077c4e68c11fb01af', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'ee31ae2804d2c17c82e8f4c0c3269ac8254331df', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: 'c6f74ba9b5b522f713e25d3339f541efa68cdddd', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: 'ab18e55046777cf4a4f58ebd057641db9b9e0328', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", { key: '3714ee86a74dce7f33a8f953fd726db349ba9271', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '2818d15f7ab671b7b2dfb34ec3085b390150f38d', class: imageClasses }, h("div", { key: '5166feef3674631298f699449b956655f38f0db9', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '86555a43491da5b2aa3b287e539e603a2c2adaf3', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/eds-card-section.entry.js

@@ -43,7 +43,7 @@ const EdsCardSection = class {
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (h("section", { key: 'da139da167230819e494a6426c2431f209a2e557', class: "w-full" }, h("ul", { key: '3e8affe5c9aee91c4487480c72c437339265101a', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+        return (h("section", { key: '1f221e1ec7c3cdd0e3aed18f6f930c2c5456c64b', class: "w-full" }, h("ul", { key: '36f984994bb2dc247475c20422f7e6e7da7d058d', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
     }
 };
 EdsCardSection.style = EdsCardSectionStyle0;

package/dist/esm/eds-card-tags.entry.js

@@ -10,7 +10,7 @@ const EdsCardTags = class {
         this.tags = [];
     }
     render() {
-        return (h("div", { key: '60a129de62d45736eba0884cc24c9738f3a0f55c', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
+        return (h("div", { key: '272d53abb9be9086881cb2f8e99f7fb7aae1bb59', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
     }
 };
 EdsCardTags.style = EdsCardTagsStyle0;

package/dist/esm/eds-card-tool.entry.js

@@ -1,6 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-e96badea.js';
-import { s as sendAnalytics } from './color-bb472c37.js';
-import './index-39c58238.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.js';
 
 const edsCardToolCss = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}";
 const EdsCardToolStyle0 = edsCardToolCss;
@@ -67,7 +66,7 @@ const EdsCardTool = class {
         });
     }
     render() {
-        return (h("article", { key: 'b46c0464688e45ab29f5b58b6cd2e22ed28e1034', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: 'a4da791280db14754b445b1a52e33cc9a25f765e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '86f7c6c80b83f244ba7d07d820d5793e1dda2933', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '46307b57160f908aa7066b2a636c4db38e0e7a8e', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
+        return (h("article", { key: 'da61b384e966b148cd1f77eec59671bc4d92e259', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '00702d032bc25f52b2a2c98255ceb60a1d314f4d', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: 'd2b135ed422fb64f142af71330dc666e2f0c2b1f', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '54111e90175754cb0c1f2eb339e86926914ca0e7', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/eds-card-wrapper.entry.js

@@ -20,7 +20,7 @@ const EdsCardWrapper = class {
             this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
             'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
         ].join(' ');
-        return (h("article", { key: '7c12b1d147f061e189b5dda5d517ec4eae0c3691', class: articleClasses }, h("slot", { key: 'f506bad73ed38ae36931f88f7d7c5f5d94705e4f' }), this.hasSlot('footer') && (h("div", { key: '783f480be269e4a2f61aa8d4396e757fe41bfcc6', class: "mt-auto" }, h("slot", { key: 'f07ddaa2d930518a5c8ac82efab3cb0dd6647bdd', name: "footer" })))));
+        return (h("article", { key: 'f21cc9703011026652765b399e2b87b1ef80d220', class: articleClasses }, h("slot", { key: '9a37adad73d2d49edcc9ca9222d5b188202c5612' }), this.hasSlot('footer') && (h("div", { key: '87addfc052ed4ae33736724fbd8fbc8aca873b4d', class: "mt-auto" }, h("slot", { key: '2e48677f42ac2aa951bc1a82afa9291fea3ddd72', name: "footer" })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/eds-code-block.entry.js

@@ -2472,11 +2472,11 @@ const EdsCodeBlock = class {
             return Prism$1.highlight(this.code, Prism$1.languages[this.language], this.language);
         }
         // eslint-disable-next-line
-        console.warn(`Unsupported or missing language: ${this.language}`);
+        //console.warn(`Unsupported or missing language: ${this.language}`);
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: '00eba9265ee17605f699d1e5606013b68e900b29', class: "relative bg-stronger rounded-sm" }, h("div", { key: '1192584f04de5ff74e91c88597a3360b92053456', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '3666b6529a16a8cc64f448527db4ddee08f977a3', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: 'f222d95a2e548429f6c4de96a7646e3cef1f360f', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '8c539deda773909c01a41eb04ee51380c0a9c4bb', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '99541dedb32c543da5e780ffee4460333fbb3724', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '4e6ae6fcfae3de8c1fe5ad9d22309e0c8bee0c2c', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: 'cb379e82bcf71345945b0b88397650ecd4992770', class: "relative bg-stronger rounded-sm" }, h("div", { key: '945046d4fd747cd64a83155b421a897e380cc612', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '3f6c7e996101f0bb83fb8c9e6991a205a0b268c8', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '8ad9beb61058f29e688f6777233c61f7fb3ccfe8', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a4f9a07906e1c2d9febb7ae789a3eed76dc422e9', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'e31339126dd3cc885511aaa2bdf6f06f3a113c74', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '7efacd276f26a00f0f61793f6b8748259e1614b5', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/eds-components-section.entry.js

@@ -32,7 +32,11 @@ const EdsDocsInstallation = () => (h("div", null,
     h("div", { class: "my-8" },
         h("eds-code-block", { code: "npm install @ebrains/assets", language: "html", "copy-label": "Copy Code" })),
     h("div", { class: "my-8" },
-        h("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" }))));
+        h("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" })),
+    h("div", { class: "my-8" },
+        h("eds-code-block", { code: "npm install @ebrains/vue", language: "html", "copy-label": "Copy Code" })),
+    h("div", { class: "my-8" },
+        h("eds-code-block", { code: "npm install @ebrains/angular", language: "html", "copy-label": "Copy Code" }))));
 
 const EdsDocsReact = () => (h("div", null,
     h("h2", null, "React Wrappers"),
@@ -40,7 +44,7 @@ const EdsDocsReact = () => (h("div", null,
     h("div", { class: "my-8" },
         h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" })),
     h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" },
-        h("eds-code-block", { code: '\nimport { EdsHeader } from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  \n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    \n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    const handleTabChange = (\n      event: CustomEvent<{ index: number; name: string }>,\n    ) => {\n      console.log(event.detail);\n      setActiveTabIndex(event.detail.index);\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n    document.addEventListener("tabChange", handleTabChange as EventListener);\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n      document.removeEventListener(\n        "tabChange",\n        handleTabChange as EventListener,\n      );\n    };\n  }, []); // Empty dependency array ensures this runs only once after mounting\n\n  return (\n    <div id="main">\n      <EdsHeader\n        home-url="/"\n        user-feature={false}\n        keycloak-url="http://localhost:8080"\n        keycloak-realm="nigeor-realm"\n        keycloak-client-id="stencil-app"\n        links="[\n            { "label": "About", "url": "/about" },\n            { "label": "Focus Areas", "url": "/focus-areas" },\n            { "label": "News & Events", "url": "/news-and-events" },\n            { "label": "Contact", "url": "/contact" }\n          ]"\n      ></EdsHeader>\n\n      <div> \n        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n', language: "javascript", "copy-label": "Copy Code" }))));
+        h("eds-code-block", { code: '\nimport {\n  EdsHeader,\n  EdsFullscreenMenu,\n  EdsUser\n} from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n  // Add any other properties your user object might have\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n    };\n  }, []);\n\n  return (\n    <div>\n      <EdsHeader\n        homeUrl="/"\n        menuEnabled={true}\n        inverseHeader={false}\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      >\n        <div className="px-16">\n          <EdsUser\n            keycloak-url="http://localhost:8080"\n            keycloak-realm="nigeor-realm"\n            keycloak-client-id="stencil-app"\n          ></EdsUser>\n        </div>\n      </EdsHeader>\n\n      <EdsFullscreenMenu\n        home-url="/"\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      ></EdsFullscreenMenu>\n      \n      <div>\n        User is{" "}\n        {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n\n      <div id="main"></div>\n    </div>\n  );\n}\n\nexport default App;\n\n', language: "javascript", "copy-label": "Copy Code" }))));
 
 const EdsDocsVue = () => (h("div", null,
     h("h2", null, "Vue Wrappers"),
@@ -105,7 +109,7 @@ const EdsComponentsSection = class {
         }
     }
     render() {
-        return h("div", { key: 'ce34514ab73daa5baa011bda56a13d6197f8bfd0', class: "container" }, this.renderContent());
+        return h("div", { key: '7e582a0eeafc2687229454532b5a7f66f91c1856', class: "container" }, this.renderContent());
     }
 };
 

package/dist/esm/eds-docs-palettes.entry.js

@@ -16,7 +16,7 @@ const EdsDocsPalettes = class {
         }
     }
     render() {
-        return h("div", { key: '42f0a4598c64661d98054522e88366ec591a2cb3', class: "container" }, this.renderContent());
+        return h("div", { key: 'e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a', class: "container" }, this.renderContent());
     }
 };
 

package/dist/esm/eds-docs-tokens.entry.js

@@ -24,7 +24,7 @@ const EdsDocsContent = class {
         }
     }
     render() {
-        return h("div", { key: '10708d591c4077e4e1fe94073322f01121253bdb', class: "container" }, this.renderContent());
+        return h("div", { key: 'b140f7650e5e01711dc0778b04af83f9d004efc7', class: "container" }, this.renderContent());
     }
 };
 

package/dist/esm/eds-dropdown_2.entry.js

@@ -0,0 +1,153 @@
+import { r as registerInstance, h, g as getElement } from './index-e96badea.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.js';
+
+const edsDropdownCss = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}";
+const EdsDropdownStyle0 = edsDropdownCss;
+
+const EdsDropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.focusableItems = [];
+        /**
+         * Toggles the visibility of the dropdown and manages focus.
+         */
+        this.handleClick = () => {
+            var _a;
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.focusIndex = 0;
+                this.focusItem();
+            }
+            else {
+                this.closeDropdown();
+            }
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.host.tagName.toLowerCase(),
+                name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+                action: this.isOpen ? 'expanded' : 'collapsed'
+            });
+        };
+        this.icon = 'chevron-down';
+        this.label = undefined;
+        this.rounded = false;
+        this.ariaLabel = 'Open dropdown';
+        this.asNav = true;
+        this.dropdownPos = 'left';
+        this.dropdownOffset = true;
+        this.intent = 'tertiary';
+        this.isOpen = false;
+        this.focusIndex = -1;
+    }
+    /**
+     * Closes the dropdown when a click occurs outside of it.
+     * @param {Event} e - The click event.
+     */
+    handleWindowClick(e) {
+        if (!this.host.contains(e.target)) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Handles keyboard navigation and accessibility within the dropdown.
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    handleKeyDown(event) {
+        if (this.isOpen) {
+            const key = event.key;
+            switch (key) {
+                case 'Tab':
+                    this.closeDropdown();
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.focusIndex = (this.focusIndex - 1 + this.focusableItems.length) % this.focusableItems.length;
+                    this.focusItem();
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length;
+                    this.focusItem();
+                    break;
+            }
+        }
+    }
+    /**
+     * Closes the dropdown and resets focus.
+     */
+    closeDropdown() {
+        this.isOpen = false;
+        this.focusIndex = -1;
+    }
+    /**
+     * Sets focus on the currently selected item in the dropdown.
+     */
+    focusItem() {
+        var _a;
+        (_a = this.focusableItems[this.focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Lifecycle method that runs after the component has been added to the DOM.
+     * Initializes focusable items within the dropdown.
+     */
+    componentDidLoad() {
+        var _a;
+        this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
+    }
+    /**
+     * Renders the dropdown component and displays its content when open.
+     * @returns {JSX.Element} The rendered dropdown component.
+     */
+    render() {
+        return (h("div", { key: '84f4cea78ea1c40c7897a356fe03ac83922fccb8', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '99dc51632dc82830054502a2d6d77d9fcefe9337', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: 'a63613a7ecf709fd1d22d77da4b2d286905fef3e', role: "menu", class: {
+                'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
+                'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
+                'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
+                'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
+                'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
+                'rounded-lg': this.rounded
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'dda70b865ed03dc7ad36a32934587bbcb0a16c1b' }))));
+    }
+    get host() { return getElement(this); }
+};
+EdsDropdown.style = EdsDropdownStyle0;
+
+const EdsUserModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.user = undefined;
+        this.links = undefined;
+        this.onLogout = undefined;
+        this.parsedUser = {};
+        this.parsedLinks = [];
+    }
+    parseUserProp(newValue) {
+        this.parsedUser = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    }
+    parseLinksProp(newValue) {
+        this.parsedLinks = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    }
+    componentWillLoad() {
+        this.parseUserProp(this.user);
+        this.parseLinksProp(this.links);
+    }
+    get initials() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const initials = `${((_b = (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.lastname) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
+        return initials || ((_g = (_f = (_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.fullname) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
+    }
+    get hasLogout() {
+        return typeof this.onLogout === 'function';
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        return (h("div", { key: '4a80335b6a59b9653130ca75a6e42c04fce68f4f', class: "min-w-[280px] p-8" }, h("div", { key: '9c97f6be46216587692d4852174cecfaacb70593', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: 'c778f6bdfb21068ca7c2deff6e298f61af6dbc67', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), h("div", { key: '7f453546c9cc54597069abb3e4b50312fe7bf364', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: '34e080ef159535820c09378701de0e6f4fd96009', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && h("p", { key: '2f85764e7d015dc3f3b22ca8a07126f8f57216ef', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && h("p", { key: '002dec51e979c29f2343f55e004449e4cee4075c', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: '740b78c504257fb755ba7ba04dd25f023d37ed33', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: 'ac307937bdd3fc86cce502e5eeb3e922d931f418', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: 'bdd0f1ef62ac78ffb1b40ed6873475df360cec66', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), this.hasLogout && (h("eds-link", { key: 'd73016ad71f3b356b7fb7d0a2a84124eabb05da5', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
+    }
+    static get watchers() { return {
+        "user": ["parseUserProp"],
+        "links": ["parseLinksProp"]
+    }; }
+};
+
+export { EdsDropdown as eds_dropdown, EdsUserModal as eds_user_modal };