@ebrains/components 0.9.0-beta → 0.9.1-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +9 -0
  3. package/dist/cjs/components.cjs.js +1 -1
  4. package/dist/cjs/eds-accordion.cjs.entry.js +4 -4
  5. package/dist/cjs/{eds-avatar_24.cjs.entry.js → eds-avatar_26.cjs.entry.js} +186 -5
  6. package/dist/cjs/{eds-card-desc_3.cjs.entry.js → eds-card-desc_2.cjs.entry.js} +0 -35
  7. package/dist/cjs/eds-card-generic.cjs.entry.js +2 -2
  8. package/dist/cjs/eds-matomo-notice.cjs.entry.js +2 -2
  9. package/dist/cjs/eds-modal.cjs.entry.js +5 -5
  10. package/dist/cjs/eds-section-core_2.cjs.entry.js +2 -2
  11. package/dist/cjs/eds-switch.cjs.entry.js +2 -2
  12. package/dist/cjs/eds-tabs.cjs.entry.js +5 -5
  13. package/dist/cjs/eds-timeline.cjs.entry.js +1 -1
  14. package/dist/cjs/index-2f63169d.js +4 -8
  15. package/dist/cjs/loader.cjs.js +1 -1
  16. package/dist/collection/components/eds-accordion/eds-accordion.js +5 -5
  17. package/dist/collection/components/eds-breadcrump/eds-breadcrump.js +8 -1
  18. package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.css +5 -0
  19. package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.js +1 -1
  20. package/dist/collection/components/eds-link/eds-link.css +6 -6
  21. package/dist/collection/components/eds-modal/eds-modal.js +6 -6
  22. package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js +5 -2
  23. package/dist/collection/components/eds-switch/eds-switch.js +3 -3
  24. package/dist/collection/components/eds-tag/eds-tag.css +45 -0
  25. package/dist/collection/components/eds-tag/eds-tag.js +31 -5
  26. package/dist/collection/components/eds-tag/eds-tag.stories.js +11 -4
  27. package/dist/collection/components/eds-timeline/eds-timeline.css +20 -0
  28. package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js +3 -3
  29. package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js +3 -3
  30. package/dist/collection/shared-ui/eds-tabs/eds-tabs.css +20 -0
  31. package/dist/collection/shared-ui/eds-tabs/eds-tabs.js +5 -5
  32. package/dist/collection/shared-ui/eds-user/eds-user.css +20 -0
  33. package/dist/components/components.css +20 -0
  34. package/dist/components/components.esm.js +1 -1
  35. package/dist/components/eds-accordion2.js +5 -5
  36. package/dist/components/eds-breadcrumb.js +8 -1
  37. package/dist/components/eds-card-generic2.js +2 -2
  38. package/dist/components/eds-link2.js +1 -1
  39. package/dist/components/eds-matomo-notice2.js +3 -3
  40. package/dist/components/eds-modal.js +6 -6
  41. package/dist/components/eds-section-heading2.js +2 -2
  42. package/dist/components/eds-social-networks2.js +3 -3
  43. package/dist/components/eds-switch.js +2 -2
  44. package/dist/components/eds-tabs.js +6 -6
  45. package/dist/components/eds-tag2.js +15 -6
  46. package/dist/components/eds-timeline.js +1 -1
  47. package/dist/components/eds-user.js +1 -1
  48. package/dist/components/p-0467ceb5.entry.js +1 -0
  49. package/dist/components/{p-424ba743.entry.js → p-1309a74c.entry.js} +1 -1
  50. package/dist/components/p-4620ebf5.entry.js +1 -0
  51. package/dist/components/{p-bcbc7b7f.entry.js → p-94b1f974.entry.js} +1 -1
  52. package/dist/components/p-b931a634.entry.js +1 -0
  53. package/dist/components/{p-9cbcccf8.entry.js → p-c5c782e7.entry.js} +1 -1
  54. package/dist/components/p-c99745a8.entry.js +1 -0
  55. package/dist/components/p-e42eb100.entry.js +1 -0
  56. package/dist/components/{p-59d963d1.entry.js → p-e710c860.entry.js} +1 -1
  57. package/dist/components/p-f4ce515a.entry.js +1 -0
  58. package/dist/esm/components.js +1 -1
  59. package/dist/esm/eds-accordion.entry.js +4 -4
  60. package/dist/esm/{eds-avatar_24.entry.js → eds-avatar_26.entry.js} +185 -6
  61. package/dist/esm/{eds-card-desc_3.entry.js → eds-card-desc_2.entry.js} +1 -35
  62. package/dist/esm/eds-card-generic.entry.js +2 -2
  63. package/dist/esm/eds-matomo-notice.entry.js +2 -2
  64. package/dist/esm/eds-modal.entry.js +5 -5
  65. package/dist/esm/eds-section-core_2.entry.js +2 -2
  66. package/dist/esm/eds-switch.entry.js +2 -2
  67. package/dist/esm/eds-tabs.entry.js +5 -5
  68. package/dist/esm/eds-timeline.entry.js +1 -1
  69. package/dist/esm/index-8a71b9a7.js +4 -8
  70. package/dist/esm/loader.js +1 -1
  71. package/dist/hydrate/index.js +59 -40
  72. package/dist/hydrate/index.mjs +59 -40
  73. package/dist/stencil.config.js +16 -1
  74. package/dist/types/components/eds-accordion/eds-accordion.d.ts +1 -1
  75. package/dist/types/components/eds-modal/eds-modal.d.ts +1 -1
  76. package/dist/types/components/eds-section/eds-section-heading/eds-section-heading.d.ts +3 -0
  77. package/dist/types/components/eds-switch/eds-switch.d.ts +1 -1
  78. package/dist/types/components/eds-tag/eds-tag.d.ts +5 -1
  79. package/dist/types/components/eds-tag/eds-tag.stories.d.ts +7 -0
  80. package/dist/types/components.d.ts +40 -64
  81. package/dist/types/shared-ui/eds-matomo-notice/eds-matomo-notice.d.ts +1 -1
  82. package/dist/types/shared-ui/eds-social-networks/eds-social-networks.d.ts +1 -1
  83. package/dist/types/shared-ui/eds-tabs/eds-tabs.d.ts +1 -1
  84. package/package.json +3 -3
  85. package/dist/cjs/eds-breadcrumb.cjs.entry.js +0 -139
  86. package/dist/components/p-032f9f64.entry.js +0 -1
  87. package/dist/components/p-058cf100.entry.js +0 -1
  88. package/dist/components/p-1b4e9576.entry.js +0 -1
  89. package/dist/components/p-30a319d5.entry.js +0 -1
  90. package/dist/components/p-85ad681a.entry.js +0 -1
  91. package/dist/components/p-b47d115d.entry.js +0 -1
  92. package/dist/components/p-b55b0091.entry.js +0 -1
  93. package/dist/esm/eds-breadcrumb.entry.js +0 -135
@@ -13,7 +13,7 @@ const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice e
13
13
  this.__registerHost();
14
14
  this.__attachShadow();
15
15
  this.consent = createEvent(this, "consent", 7);
16
- this.title = 'Analytics Consent';
16
+ this.heading = 'Analytics Consent';
17
17
  this.description = "We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer. However, by opting in today, you're joining a community that shapes our product's future—all while keeping your data completely anonymous.";
18
18
  this.optOutMessage = "You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected.";
19
19
  this.forceShow = false;
@@ -115,12 +115,12 @@ const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice e
115
115
  if (!this.showNotice) {
116
116
  return null;
117
117
  }
118
- return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.title, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
118
+ return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
119
119
  }
120
120
  get el() { return this; }
121
121
  static get style() { return EdsMatomoNoticeStyle0; }
122
122
  }, [1, "eds-matomo-notice", {
123
- "title": [1],
123
+ "heading": [1, "title"],
124
124
  "description": [1],
125
125
  "optOutMessage": [1, "opt-out-message"],
126
126
  "forceShow": [4, "force-show"],
@@ -12,7 +12,7 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
12
12
  this.__registerHost();
13
13
  this.__attachShadow();
14
14
  this.isOpen = false;
15
- this.title = '';
15
+ this.heading = '';
16
16
  this.truncate = true;
17
17
  this.truncateLines = '1';
18
18
  this.position = 'middle';
@@ -51,7 +51,7 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
51
51
  category: 'ui-component',
52
52
  parentContext: null,
53
53
  tag: this.el.tagName.toLowerCase(),
54
- name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
54
+ name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
55
55
  action: 'opened'
56
56
  });
57
57
  }
@@ -65,7 +65,7 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
65
65
  category: 'ui-component',
66
66
  parentContext: null,
67
67
  tag: this.el.tagName.toLowerCase(),
68
- name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
68
+ name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
69
69
  action: 'closed'
70
70
  });
71
71
  }
@@ -98,14 +98,14 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
98
98
  render() {
99
99
  // Generate a unique id for the title so we can reference it for aria-labelledby.
100
100
  const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
101
- return (h("div", { key: 'eb2b985e84912dabea52a9a62eb908087004c958', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'ad47334539d1a8a8694f34ba1e90a38b7dce07ab', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
101
+ return (h("div", { key: '3965b74182a1015d34ebc0d5692ab89de44774e6', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'c0df46234deb0945ba266e8f36a0b3944bd6d7bd', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
102
102
  ,
103
- onClick: () => this.close() })), h("div", { key: '69d449b6ec986b5cfd73e50cc060363236035915', class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '17395806ef17a06b5465174055087178db9f5356', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'daa5d63b73eab57b9b58ca06d0197f1a7002ca15', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '267ee7d1f10819c19af5eed6715465f2ba5f4831', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'fbd3351c851ab1089035117cca2b3ad769c26d18', class: "pt-8" }, h("slot", { key: '9958a61e24320183bef12aef381791f11e421597' })))));
103
+ onClick: () => this.close() })), h("div", { key: '7fd65a4651ca67101b3a3e08ffd439070ccb8a96', class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '80102734c692934c486fd2e2d707286dd5660c69', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'b98138881f6eb4ee1fad3614eda4c91e5349b563', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '82f08e8ec6cbcb291c5d984ae97622d364bff5d0', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: '2ea2fc21a8b734c40b1de4a20025a50f7369d375', class: "pt-8" }, h("slot", { key: 'ca0fa40b4076af9eea37c6b088d26751173e815c' })))));
104
104
  }
105
105
  get el() { return this; }
106
106
  static get style() { return EdsModalStyle0; }
107
107
  }, [1, "eds-modal", {
108
- "title": [1],
108
+ "heading": [1, "title"],
109
109
  "truncate": [4],
110
110
  "truncateLines": [1, "truncate-lines"],
111
111
  "position": [1],
@@ -26,12 +26,12 @@ const EdsSectionHeading = /*@__PURE__*/ proxyCustomElement(class EdsSectionHeadi
26
26
  render() {
27
27
  const TagType = this.tag; // Dynamically set tag type for the container
28
28
  const HeadingTag = this.headingLevel; // Dynamically set heading level
29
- return (h(TagType, { key: '961a672dc3b656b0a308131a2d334aca51df77f6', class: {
29
+ return (h(TagType, { key: '346654c0118e056276162b42723c6c163712ab4f', class: {
30
30
  'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
31
31
  container: this.withContainer,
32
32
  'pt-48': this.spacingLarge,
33
33
  'pt-28': !this.spacingLarge
34
- } }, h(HeadingTag, { key: '42eb2ccfba8c83cf140967e39fead6ebddc3a279', class: this.getHeadingClass() }, this.sectionTitle)));
34
+ } }, h(HeadingTag, { key: 'c7d17fc22b3926495c799da0bc8bde7dc949e46a', class: this.getHeadingClass() }, this.sectionTitle)));
35
35
  }
36
36
  }, [0, "eds-section-heading", {
37
37
  "sectionTitle": [1, "section-title"],
@@ -49,7 +49,7 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
49
49
  icon: 'bluesky'
50
50
  }
51
51
  ];
52
- this.title = 'Follow EBRAINS to keep up-to-date';
52
+ this.heading = 'Follow EBRAINS to keep up-to-date';
53
53
  }
54
54
  /**
55
55
  * Renders the component's HTML structure with links to EBRAINS social profiles.
@@ -58,11 +58,11 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
58
58
  * @returns {JSX.Element} The rendered JSX for the component.
59
59
  */
60
60
  render() {
61
- return (h("div", { key: '213e6e637f2097165429ed584fb24b0251826627' }, h("p", { key: '060717f30e5ecb2e8128933b761b058eafc7ce6a', class: "f-ui-02" }, this.title), h("ul", { key: '7d8cbd7a92d8785058be18899e42da7495eedfc5', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
61
+ return (h("div", { key: '830f2648d282b24630f9266bc07dcf9d1fb528de' }, h("p", { key: '14d58e971d0ca585376d21400258742d2067471d', class: "f-ui-02" }, this.heading), h("ul", { key: 'd5ff24b6dbcfa25bae9b863b64e635e5c838db50', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
62
62
  }
63
63
  static get style() { return EdsSocialNetworksStyle0; }
64
64
  }, [1, "eds-social-networks", {
65
- "title": [1]
65
+ "heading": [1, "title"]
66
66
  }]);
67
67
  function defineCustomElement() {
68
68
  if (typeof customElements === "undefined") {
@@ -8,13 +8,13 @@ const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTM
8
8
  super();
9
9
  this.__registerHost();
10
10
  this.__attachShadow();
11
- this.change = createEvent(this, "change", 7);
11
+ this.toggle = createEvent(this, "toggle", 7);
12
12
  this.toggleSwitch = () => {
13
13
  if (this.disabled) {
14
14
  return;
15
15
  }
16
16
  this.checked = !this.checked;
17
- this.change.emit(this.checked);
17
+ this.toggle.emit(this.checked);
18
18
  };
19
19
  this.checked = false;
20
20
  this.disabled = false;