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

package/dist/collection/components/eds-breadcrump/eds-breadcrump.js

@@ -47,7 +47,7 @@ export class EdsBreadcrumb {
                 this.parsedItems = Array.isArray(parsed) ? parsed : [];
             }
             catch (e) {
-                console.error('Error parsing breadcrumb items:', e);
+                //console.error('Error parsing breadcrumb items:', e);
                 this.parsedItems = [];
             }
         }
@@ -75,9 +75,9 @@ export class EdsBreadcrumb {
      * 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) => {
+        var _a;
+        const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
+        links === null || links === void 0 ? void 0 : links.forEach((link) => {
             this.emitContext(link);
         });
     }
@@ -97,54 +97,49 @@ export class EdsBreadcrumb {
         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.
+     * Returns breadcrumb items with potential truncation if there are too many.
+     * It inserts an ellipsis item where necessary.
      */
     getTruncatedItems() {
         const totalItems = this.parsedItems.length;
+        const ellipsis = { label: '...', url: '', isHidden: true };
         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)))
-                ];
+                return [firstItem, ellipsis, ...lastItems];
             }
             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 [firstItem, middleItem, ellipsis, ...lastItems];
             }
         }
-        return this.parsedItems.map((item, index) => index === this.parsedItems.length - 1 ? item : this.truncateLabel(item));
+        return this.parsedItems;
     }
     /**
-     * Truncates the label of a breadcrumb item to a maximum of 10 characters
-     * if the screen is small.
+     * Helper to determine the display label and full label.
+     * If the label is longer than 15 characters and the item is not the current (last) item,
+     * we display a truncated version but use the full label for aria attributes.
      */
-    truncateLabel(item) {
-        if (item.label.length > 15) {
-            return Object.assign(Object.assign({}, item), { label: `${item.label.slice(0, 15)}...` });
+    getLabels(item, isCurrent) {
+        if (!isCurrent && item.label.length > 15) {
+            return { displayLabel: `${item.label.slice(0, 15)}...`, fullLabel: item.label };
         }
-        return item;
+        return { displayLabel: item.label, fullLabel: item.label };
     }
     /**
      * 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.
+     * The last link is marked as the current page.
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: '1491f7e548ba859e0661129de2ec320552a2bb42', "aria-label": "Breadcrumb" }, h("ol", { key: '93525aad588295e9f2a3f02d143824c7c58ea512', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: 'd177957e1b3218c21991bbdc9636a8e32befe990', "aria-label": "Breadcrumb" }, h("ol", { key: 'd10336ddee99b9fb84d17e53093c57c6a025982f', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
-            return (h("li", { class: "flex items-center" }, !item.isHidden ? (h("eds-link", { label: item.label, url: item.url, intent: this.intent, current: isLast, "aria-label": item.label, size: "small", "icon-small": "false" })) : (h("span", { class: "truncate px-2 ", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+            return (h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
+                const { displayLabel, fullLabel } = this.getLabels(item, isLast);
+                return (h("eds-link", Object.assign({ label: displayLabel, url: item.url, intent: this.intent, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
+            })()) : (h("span", { class: "truncate px-2", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
         }))));
     }
     static get is() { return "eds-breadcrumb"; }

package/dist/collection/components/eds-button/eds-button.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
+import { sendAnalytics } from "../../utils/analytics";
 import { cva } from "class-variance-authority";
 /**
  * `EdsButton` is a versatile button component designed for a range of actions and interactions in applications.
@@ -166,9 +166,8 @@ export class EdsButton {
                 iconOnly: false
             }
         });
-        this.parentContext = null; // Accepts the entire event detail or null
         this.label = undefined;
-        this.ariaLabel = undefined;
+        this.ariaLabel = 'Button';
         this.elementType = 'button';
         this.intent = 'secondary';
         this.loading = false;
@@ -181,15 +180,19 @@ export class EdsButton {
         this.extraClass = undefined;
         this.triggerClick = undefined;
     }
-    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();
+    /*private parentContext: ParentContextDetail | null = null; // Accepts the entire event detail or null
+  
+    @Listen('parentContext')
+    handleParentContext(event: CustomEvent) {
+      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();
     }
+    */
     handleClick(event) {
         var _a, _b;
         if (this.disabled) {
@@ -199,7 +202,7 @@ export class EdsButton {
         }
         sendAnalytics({
             category: 'ui-component',
-            parentContext: this.parentContext,
+            parentContext: null,
             tag: this.el.tagName.toLowerCase(),
             name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ((_b = this.ariaLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
             action: 'click'
@@ -226,7 +229,7 @@ export class EdsButton {
             show: !this.loading
         });
         const ElementType = this.elementType;
-        return (h(ElementType, { key: '1053db0332f574db35e58453d789567eaf235d30', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: 'ff95b889b008075d46b89a1d23e51ad8afa20918', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '942f3fffcaef08defd3d0ef0dbb275b9d189c907', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '91e53dcee9d4f2a842ea922498c9da7f15ffe109', class: "loader", style: {
+        return (h(ElementType, { key: '52cda715164eeca59e35b45f617a2d6d1b05a94c', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: '866cd0272d9f381b3ecb892e588c860ca8b41051', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: 'fcba01e3404724869c59f4e21bd5db459643d840', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'e44955e5641e757e66eb4961097fb4d60e4def7c', class: "loader", style: {
                 border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
                 borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
             } }))), this.icon ? h("eds-icon-wrapper", { class: iconClasses, icon: this.icon }) : null));
@@ -266,7 +269,7 @@ export class EdsButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | null",
+                    "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
@@ -274,10 +277,11 @@ export class EdsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The accessible aria-label for the button, used when there is no visible label."
+                    "text": "The accessible aria-label for the button, used when there is no visible label.\nDefault is \"Button\" to ensure icon-only buttons are announced properly."
                 },
                 "attribute": "aria-label",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'Button'"
             },
             "elementType": {
                 "type": "string",
@@ -475,13 +479,4 @@ export class EdsButton {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "parentContext",
-                "method": "handleParentContext",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.js

@@ -1,4 +1,12 @@
 import { h } from "@stencil/core";
+/**
+ * `eds-card-desc` is a simple component that renders a card description.
+ *
+ * It displays a block of text with optional truncation applied using a CSS line clamp.
+ * You can customize the description styling via the `descClass` property and control
+ * whether or not the text is truncated and to how many lines.
+ *
+ */
 export class EdsCardDesc {
     constructor() {
         this.description = undefined;
@@ -10,7 +18,7 @@ export class EdsCardDesc {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: '017c115ebff999c74cff1eaeb5c63f97e0f6554d', class: `text-light ${this.descClass}` }, h("span", { key: 'f87b9b3d593e417ef351882f426d24c0b206ccab', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: '71495cbd6ef4e7d66c4c22a37f8120624ecf57fb', class: `text-light ${this.descClass}` }, h("span", { key: '8708178f7b48cc1f31aac749f50fe92b72c39ab8', class: this.getTruncateClass() }, this.description)));
     }
     static get is() { return "eds-card-desc"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.js

@@ -8,7 +8,7 @@ export class EdsCardTags {
         this.tags = [];
     }
     render() {
-        return (h("div", { key: 'b201dc6df5e809d828a055fb5f01fe798e228361', 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 })))));
     }
     static get is() { return "eds-card-tags"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js

@@ -43,7 +43,7 @@ export class EdsCardTitle {
     render() {
         //const Tag = this.getTag();
         const Heading = this.headingLevel;
-        return (h(Heading, { key: '8aee3bcb0e04508dd21a03ea0f695e040f37c767', class: this.getTitleClass() }, h("a", { key: 'c5fa27fe86037ed6b039c156aecdf1acc9c7c8bc', 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)));
+        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)));
     }
     static get is() { return "eds-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-wrapper/eds-card-wrapper.js

@@ -21,7 +21,7 @@ export class EdsCardWrapper {
             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: 'c52f6ad7873050c052b8c0e68b2c812d74f2ddf1', class: articleClasses }, h("slot", { key: 'dac6f9fe339c8baa191ee2fd622332ddf25ec08d' }), this.hasSlot('footer') && (h("div", { key: '301862515ba88f320d1af722bec6120bc3e7d723', class: "mt-auto" }, h("slot", { key: '85d939150663a4586934413c9965aa92a9babeef', 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" })))));
     }
     static get is() { return "eds-card-wrapper"; }
     static get properties() {

package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.js

@@ -1,4 +1,4 @@
-import { sendAnalytics } from "../../../../../../../../packages/utils/src/index";
+import { sendAnalytics } from "../../../utils/analytics";
 import { h } from "@stencil/core";
 /**
  * `EdsCardGeneric` is a versatile card component designed to display rich content such as titles, descriptions, images, and tags.
@@ -22,7 +22,7 @@ export class EdsCardGeneric {
         this.avatar = undefined;
         this.shortAbbreviation = undefined;
         this.headingLevel = 'h3';
-        this.tags = '';
+        this.tags = [];
         this.tiny = false;
         this.bg = true;
         this.withHover = true;
@@ -98,7 +98,7 @@ export class EdsCardGeneric {
         });
     }
     render() {
-        return (h("article", { key: '17d1f00f232a4436756fa3846684bbae8c716036', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: 'd99ee1716c4e308a3ea446f0f7cedfaeac30f2ed', "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: 'c5bdc76e68a8d660609630aa8184ec3a9508ab61', 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: 'fa993e3c60d357eb0d9a63e612bdd2bf026e7a85', 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: '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 })))), ' '));
     }
     static get is() { return "eds-card-generic"; }
     static get encapsulation() { return "shadow"; }
@@ -235,22 +235,28 @@ export class EdsCardGeneric {
                 "defaultValue": "'h3'"
             },
             "tags": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "string | Tag[]",
+                    "resolved": "Tag[] | string",
+                    "references": {
+                        "Tag": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-cards/eds-card-generic/eds-card-generic.tsx",
+                            "id": "../../../packages/components/src/components/eds-cards/eds-card-generic/eds-card-generic.tsx::Tag"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A comma-separated string of tags related to the card content."
+                    "text": "Tags related to the card content."
                 },
                 "attribute": "tags",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "[]"
             },
             "tiny": {
                 "type": "boolean",

package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.stories.js

@@ -54,7 +54,7 @@ export default {
     },
     args: {
         cardTitle: 'Sample Card Title',
-        url: 'https://example.com',
+        url: '#',
         description: 'This is a sample description for the card.',
         headingLevel: 'h3',
         tags: [

package/dist/collection/components/eds-cards/eds-card-project/eds-card-project.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { sendAnalytics, gradientBGColorVariants } from "../../../../../../../../packages/utils/src/index";
+import { sendAnalytics } from "../../../utils/analytics";
+import { gradientBGColorVariants } from "../../../utils/color";
 /**
  * @internal
  */
@@ -55,7 +56,7 @@ export class EdsCardProject {
             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)))))));
     }
     static get is() { return "eds-card-project"; }
     static get properties() {

package/dist/collection/components/eds-cards/eds-card-tool/eds-card-tool.js

@@ -1,4 +1,4 @@
-import { sendAnalytics } from "../../../../../../../../packages/utils/src/index";
+import { sendAnalytics } from "../../../utils/analytics";
 import { h } from "@stencil/core";
 /**
  * @internal
@@ -64,7 +64,7 @@ export class EdsCardTool {
         });
     }
     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 }))))));
     }
     static get is() { return "eds-card-tool"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-code-block/eds-code-block.js

@@ -5,28 +5,82 @@ import "prismjs/components/prism-bash"; // Add support for Bash/Shell
 import "prismjs/components/prism-yaml"; // Add YAML support
 //import 'prismjs/components/prism-html';
 import "prismjs/components/prism-css";
+//import { sendAnalytics } from '../../utils/analytics';
+/**
+ * A component that displays a code block with syntax highlighting.
+ *
+ * Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS,
+ * Python, Bash/Shell, and YAML.
+ *
+ * */
 export class EdsCodeBlock {
     constructor() {
         this.code = undefined;
         this.language = undefined;
         this.copied = false;
     }
+    /**
+     * Copies the current code content to the clipboard and sets a temporary copied state.
+     *
+     * @private
+     * @returns {void}
+     */
     copyToClipboard() {
         navigator.clipboard.writeText(this.code).then(() => {
             this.copied = true;
+            /*const analyticsName = this.createHumanFriendlyAnalyticsName(this.code, this.language);
+            sendAnalytics({
+              category: 'ui-component',
+              parentContext: null,
+              tag: this.el.tagName.toLowerCase(),
+              name: analyticsName || '',
+              action: 'copy'
+            });*/
             setTimeout(() => (this.copied = false), 2000);
         });
     }
+    /**
+     * Utility function that creates a human-friendly analytics name based on the code and language.
+     * It uses:
+     *  - The language (in uppercase)
+     *  - The number of non-empty lines in the code
+     *  - The first non-empty line of code (truncated to 30 characters, if needed)
+     *
+     * returns A descriptive analytics name.
+     */
+    /*private createHumanFriendlyAnalyticsName(code: string, language: string): string {
+      // Count non-empty lines
+      const lines = code.split('\n').filter(line => line.trim() !== '').length;
+      
+      // Find the first non-empty line and trim it
+      let firstNonEmptyLine = code.split('\n').find(line => line.trim() !== '');
+      firstNonEmptyLine = firstNonEmptyLine ? firstNonEmptyLine.trim() : '';
+  
+      // Truncate the snippet if it’s too long
+      if (firstNonEmptyLine.length > 30) {
+        firstNonEmptyLine = firstNonEmptyLine.substring(0, 30) + '...';
+      }
+  
+      return `CodeBlock:${language.toLowerCase()}|${lines}-line(s)|${firstNonEmptyLine.toLowerCase()}`;
+    }*/
+    /**
+     * Returns the syntax-highlighted HTML for the code.
+     * If the provided language is supported by Prism, this method returns the highlighted code.
+     * Otherwise, it logs a warning and returns the raw code.
+     *
+     * @private
+     * @returns {string} The highlighted HTML string for the code block.
+     */
     getHighlightedCode() {
         if (this.language && Prism.languages[this.language]) {
             return Prism.highlight(this.code, Prism.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: 'a99c0c8b9546b80bb3f9e21cd53c29540e8b6e06', class: "relative bg-stronger rounded-sm" }, h("div", { key: '5856f9d30bb52f791e0d8bb03a6438bc01247f66', 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: 'dfb0f69dbbd1032ace5afb7fe98d899816f36610', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: 'b399384638265f9fcc9a824c47fe73c75bcade33', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '47c2d00b2cf86b99522dbc438726e0fc57fb6a44', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '038321e9d3d2a38963857ab8b719653f3e8385e3', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '72be161dd9781d9bc2f4d9495969175f34c19249', 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() })))));
     }
     static get is() { return "eds-code-block"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +108,7 @@ export class EdsCodeBlock {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The code content to display"
+                    "text": "The code content to display."
                 },
                 "attribute": "code",
                 "reflect": false
@@ -83,4 +137,5 @@ export class EdsCodeBlock {
             "copied": {}
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/eds-code-block/eds-code-block.stories.js

@@ -0,0 +1,78 @@
+export default {
+    title: 'Components/CodeBlock',
+    component: 'eds-code-block',
+    argTypes: {
+        code: {
+            control: 'text',
+            description: 'The code content to display in the code block.'
+        },
+        language: {
+            control: 'text',
+            description: 'The language type for syntax highlighting (e.g., "javascript", "python", "bash", "yaml").'
+        }
+    },
+    args: {
+        code: "const greeting = 'Hello, world!';\nconsole.log(greeting);",
+        language: 'javascript'
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: "const greeting = 'Hello, world!';\nconsole.log(greeting);",
+        language: 'javascript'
+    }
+};
+export const PythonExample = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: "def hello_world():\n    print('Hello, world!')",
+        language: 'python'
+    }
+};
+export const BashExample = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: '#!/bin/bash\necho "Hello, world!"',
+        language: 'bash'
+    }
+};
+export const YamlExample = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: 'greeting: "Hello, world!"',
+        language: 'yaml'
+    }
+};
+export const UnsupportedLanguage = {
+    render: (args) => `
+      <eds-code-block 
+        code="${args.code}" 
+        language="${args.language}"
+      ></eds-code-block>
+    `,
+    args: {
+        code: 'This is a code block with an unsupported language. It will render without syntax highlighting.',
+        language: 'unknown'
+    }
+};

package/dist/collection/components/eds-dropdown/eds-dropdown.js

@@ -1,3 +1,4 @@
+import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 /**
  * `EdsDropdown` is a versatile dropdown component that provides a list of items
@@ -19,6 +20,7 @@ export class EdsDropdown {
          * Toggles the visibility of the dropdown and manages focus.
          */
         this.handleClick = () => {
+            var _a;
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
                 this.focusIndex = 0;
@@ -27,6 +29,13 @@ export class EdsDropdown {
             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;
@@ -93,39 +102,20 @@ export class EdsDropdown {
     componentDidLoad() {
         var _a;
         this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
-        const btns = this.host.shadowRoot.querySelectorAll('eds-button');
-        btns.forEach((btn) => {
-            this.emitContext(btn);
-        });
-    }
-    /**
-     * Emits a custom event called `parentContext` for a given button element.
-     * Provides context information about the dropdown component.
-     *
-     * @param linkElement - The button element to which the event will be dispatched.
-     */
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.host.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
     }
     /**
      * Renders the dropdown component and displays its content when open.
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: 'd49e23ee208cfb000baba83795899487e4d94af7', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '6647007c34b47558873e470890893ae4f8e18b5c', 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: '41bbd4e2bf02345393aaa97101b2c3aca2fa4085', class: {
+        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: '714bad9f5a8ddf6d5ea246044a83b0a5102494c4' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'dda70b865ed03dc7ad36a32934587bbcb0a16c1b' }))));
     }
     static get is() { return "eds-dropdown"; }
     static get encapsulation() { return "shadow"; }