@ebrains/react 2.0.0 → 2.1.0

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 (92) hide show
  1. package/clone-dab56639.esm.js +3 -0
  2. package/color-primary-palette_6.entry.esm.js +106 -106
  3. package/components-section.entry.esm.js +1 -1
  4. package/correct-use-of-colors.entry.esm.js +33 -33
  5. package/docs-palettes.entry.esm.js +1 -1
  6. package/docs-tokens.entry.esm.js +1 -1
  7. package/edit-3893a517.esm.js +3 -0
  8. package/eds-accordion_33.entry.esm.js +1123 -0
  9. package/eds-app-root.entry.esm.js +4 -4
  10. package/eds-card-desc_2.entry.esm.js +4 -4
  11. package/eds-card-project.entry.esm.js +10 -10
  12. package/eds-card-tags.entry.esm.js +1 -1
  13. package/eds-card-tool.entry.esm.js +4 -4
  14. package/eds-cookies-preference.entry.esm.js +2 -2
  15. package/eds-feedback.entry.esm.js +5 -5
  16. package/eds-footer.entry.esm.js +20 -14
  17. package/eds-frame.entry.esm.js +4 -4
  18. package/eds-gauge.entry.esm.js +4 -4
  19. package/eds-icon-arrow-diagonal.entry.esm.js +1 -1
  20. package/eds-icon-arrow-right.entry.esm.js +1 -1
  21. package/eds-icon-bin.entry.esm.js +1 -1
  22. package/eds-icon-bluesky.entry.esm.js +1 -1
  23. package/eds-icon-bookmark.entry.esm.js +1 -1
  24. package/eds-icon-chevron-down.entry.esm.js +1 -1
  25. package/eds-icon-chevron-left.entry.esm.js +1 -1
  26. package/eds-icon-chevron-right.entry.esm.js +1 -1
  27. package/eds-icon-chevron-up.entry.esm.js +1 -1
  28. package/eds-icon-clone.entry.esm.js +21 -0
  29. package/eds-icon-close.entry.esm.js +1 -1
  30. package/eds-icon-copy.entry.esm.js +1 -1
  31. package/eds-icon-draft.entry.esm.js +1 -1
  32. package/eds-icon-edit.entry.esm.js +2 -2
  33. package/eds-icon-eu.entry.esm.js +1 -1
  34. package/eds-icon-external.entry.esm.js +1 -1
  35. package/eds-icon-facebook.entry.esm.js +1 -1
  36. package/eds-icon-gitlab.entry.esm.js +1 -1
  37. package/eds-icon-linkedin.entry.esm.js +1 -1
  38. package/eds-icon-loader.entry.esm.js +1 -1
  39. package/eds-icon-mastodon.entry.esm.js +1 -1
  40. package/eds-icon-menu.entry.esm.js +1 -1
  41. package/eds-icon-minus.entry.esm.js +1 -1
  42. package/eds-icon-more.entry.esm.js +1 -1
  43. package/eds-icon-paper.entry.esm.js +1 -1
  44. package/eds-icon-plus.entry.esm.js +1 -1
  45. package/eds-icon-portal.entry.esm.js +1 -1
  46. package/eds-icon-private.entry.esm.js +1 -1
  47. package/eds-icon-public.entry.esm.js +1 -1
  48. package/eds-icon-search.entry.esm.js +1 -1
  49. package/eds-icon-star.entry.esm.js +1 -1
  50. package/eds-icon-start.entry.esm.js +1 -1
  51. package/eds-icon-success.entry.esm.js +1 -1
  52. package/eds-icon-thumbs-down.entry.esm.js +1 -1
  53. package/eds-icon-thumbs-up.entry.esm.js +1 -1
  54. package/eds-icon-tutorial.entry.esm.js +1 -1
  55. package/eds-icon-twitter.entry.esm.js +1 -1
  56. package/eds-icon-unknown.entry.esm.js +1 -1
  57. package/eds-icon-updown.entry.esm.js +1 -1
  58. package/eds-icon-user.entry.esm.js +1 -1
  59. package/eds-icon-view.entry.esm.js +21 -0
  60. package/eds-icon-youtube.entry.esm.js +1 -1
  61. package/eds-modal.entry.esm.js +8 -8
  62. package/eds-progress-bar.entry.esm.js +4 -4
  63. package/eds-section-core_2.entry.esm.js +5 -5
  64. package/eds-social-networks.entry.esm.js +3 -3
  65. package/eds-spinner.entry.esm.js +4 -4
  66. package/eds-timeline.entry.esm.js +4 -4
  67. package/eds-toast-manager.entry.esm.js +1 -1
  68. package/eds-tooltip.entry.esm.js +3 -3
  69. package/eds-trl.entry.esm.js +2 -2
  70. package/incorrect-use-of-colors.entry.esm.js +8 -8
  71. package/index.esm.js +1 -1
  72. package/index.esm2.js +14 -24
  73. package/logo-space.entry.esm.js +9 -9
  74. package/logo-variations-horizontal_2.entry.esm.js +28 -28
  75. package/logo-variations-tabs.entry.esm.js +1 -1
  76. package/logo-wrong-usage.entry.esm.js +25 -25
  77. package/package.json +1 -1
  78. package/src/components.d.ts +1 -0
  79. package/svg-repository.entry.esm.js +8 -4
  80. package/token-list_3.entry.esm.js +5 -5
  81. package/token-ratios.entry.esm.js +3 -3
  82. package/token-spacing.entry.esm.js +26 -26
  83. package/token-typography.entry.esm.js +2 -2
  84. package/view-e900f2d4.esm.js +3 -0
  85. package/edit-1dc8d11b.esm.js +0 -3
  86. package/eds-accordion.entry.esm.js +0 -133
  87. package/eds-alert.entry.esm.js +0 -112
  88. package/eds-avatar_26.entry.esm.js +0 -3409
  89. package/eds-breadcrumb.entry.esm.js +0 -179
  90. package/eds-code-block.entry.esm.js +0 -2290
  91. package/eds-matomo-notice.entry.esm.js +0 -159
  92. package/eds-switch.entry.esm.js +0 -70
@@ -1,159 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
2
- import { m as matomoOptIn, a as matomoOptOut } from './analytics-d99780e3.esm.js';
3
- import 'react';
4
- import 'react/jsx-runtime';
5
- import 'react-dom';
6
-
7
- const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
8
- const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
9
- const EdsMatomoNotice = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- this.consent = createEvent(this, "consent", 7);
13
- this.heading = 'Analytics Consent';
14
- 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.";
15
- 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.";
16
- this.forceShow = false;
17
- this.showNotice = true;
18
- }
19
- /**
20
- * Listens for global custom events to open the matomo-consent.
21
- */
22
- toggleCookiesConsent() {
23
- this.showNotice = !this.showNotice;
24
- }
25
- /**
26
- * Checks if the consent cookie exists.
27
- */
28
- hasCookieConsent() {
29
- return !!document.cookie.split('; ').find(row => row.startsWith('mtm_consent='));
30
- }
31
- /**
32
- * Checks if the user has opted out after has opted in.
33
- */
34
- optedOut() {
35
- return !!document.cookie.split('; ').find(row => row.startsWith('mtm_consent_removed'));
36
- }
37
- /**
38
- * Generate a unique storage key based on appId or the app's domain.
39
- */
40
- getStorageKey() {
41
- return `${window.location.host}-matomo-deferred`;
42
- }
43
- /**
44
- * Check cookies and sessionStorage (unless forceShow is true) to decide if the notice should be shown.
45
- */
46
- componentWillLoad() {
47
- // If a decision has been made previously (opted in or out), don't show the notice.
48
- const consentGiven = localStorage.getItem(`${window.location.host}-matomo-consent-given`);
49
- if (consentGiven === 'out' || this.optedOut()) {
50
- this.showNotice = false;
51
- return;
52
- }
53
- if (this.forceShow) {
54
- // If forceShow is true, always show the notice
55
- this.showNotice = true;
56
- } else {
57
- // If user has already consented, hide the notice
58
- // eslint-disable-next-line
59
- if (this.hasCookieConsent()) {
60
- this.showNotice = false;
61
- } else {
62
- // Otherwise check if user deferred in this session
63
- const sessionDeferred = sessionStorage.getItem(this.getStorageKey());
64
- this.showNotice = !sessionDeferred;
65
- }
66
- }
67
- }
68
- componentDidLoad() {
69
- const btns = this.el.shadowRoot.querySelectorAll('eds-button');
70
- btns.forEach(b => {
71
- this.emitContext(b);
72
- });
73
- }
74
- emitContext(linkElement) {
75
- const event = new CustomEvent('parentContext', {
76
- detail: {
77
- componentName: this.el.tagName.toLowerCase(),
78
- identifier: null
79
- }
80
- });
81
- linkElement.dispatchEvent(event);
82
- }
83
- optInAnalytics() {
84
- matomoOptIn();
85
- localStorage.removeItem(`${window.location.host}-matomo-consent-given`);
86
- this.hideNotice();
87
- this.consent.emit('in');
88
- }
89
- optOutAnalytics() {
90
- matomoOptOut();
91
- this.hideNotice();
92
- this.consent.emit('out');
93
- }
94
- noThanks() {
95
- matomoOptOut();
96
- localStorage.setItem(`${window.location.host}-matomo-consent-given`, 'out');
97
- this.hideNotice();
98
- this.consent.emit('out');
99
- }
100
- /*private deferDecision() {
101
- sessionStorage.setItem(this.getStorageKey(), 'true');
102
- this.hideNotice();
103
- this.consent.emit('defer');
104
- }*/
105
- keepMeIn() {
106
- this.hideNotice();
107
- }
108
- hideNotice() {
109
- this.showNotice = false;
110
- }
111
- render() {
112
- if (!this.showNotice) {
113
- return null;
114
- }
115
- return h("div", {
116
- 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"
117
- }, h("eds-accordion", {
118
- title: this.heading,
119
- description: this.hasCookieConsent() ? this.optOutMessage : this.description,
120
- switchBg: true,
121
- expanded: true
122
- }, this.hasCookieConsent() ? h("div", {
123
- class: "flex items-center gap-4"
124
- }, this.optedOut() ? h("eds-button", {
125
- intent: "primary",
126
- label: "Opt me in again",
127
- "aria-label": "Opt me in again",
128
- onClick: () => this.optInAnalytics()
129
- }) : h("eds-button", {
130
- intent: "primary",
131
- label: "Keep Me In",
132
- "aria-label": "Keep Me In",
133
- onClick: () => this.keepMeIn()
134
- }), h("eds-button", {
135
- intent: "ghostInverse",
136
- label: "Opt-out",
137
- "aria-label": "Opt-out from analytics",
138
- onClick: () => this.optOutAnalytics()
139
- })) : h("div", {
140
- class: "flex items-center gap-4"
141
- }, h("eds-button", {
142
- intent: "primary",
143
- label: "I agree",
144
- "aria-label": "Opt-in for analytics",
145
- onClick: () => this.optInAnalytics()
146
- }), h("eds-button", {
147
- intent: "ghost",
148
- label: "No, thanks",
149
- "aria-label": "Opt-out from analytics",
150
- onClick: () => this.noThanks()
151
- }))));
152
- }
153
- get el() {
154
- return getElement(this);
155
- }
156
- };
157
- EdsMatomoNotice.style = EdsMatomoNoticeStyle0;
158
-
159
- export { EdsMatomoNotice as eds_matomo_notice };
@@ -1,70 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
2
- import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
3
- import 'react';
4
- import 'react/jsx-runtime';
5
- import 'react-dom';
6
-
7
- const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{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)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}";
8
- const EdsSwitchStyle0 = edsSwitchCss;
9
- const EdsSwitch = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- this.uiswitch = createEvent(this, "uiswitch", 7);
13
- this.toggleSwitch = () => {
14
- if (this.disabled) {
15
- return;
16
- }
17
- this.checked = !this.checked;
18
- this.uiswitch.emit({
19
- value: this.checked
20
- });
21
- sendAnalytics({
22
- category: 'ui-component',
23
- tag: this.el.tagName.toLowerCase(),
24
- name: this.checked ? this.labelOn : this.labelOff || '',
25
- action: 'checked'
26
- });
27
- };
28
- this.checked = false;
29
- this.disabled = false;
30
- this.labelOn = '';
31
- this.labelOff = '';
32
- }
33
- render() {
34
- // Compute an accessible name based on state.
35
- const accessibleLabel = this.labelOn || this.labelOff ? this.checked ? this.labelOn : this.labelOff : 'Toggle switch';
36
- return h("div", {
37
- key: '1de6f7afd451f5d0276b62ef7bbf817f132e4440',
38
- class: "switch-container"
39
- }, this.labelOff && h("span", {
40
- key: 'd2d1017d7d26537eb2e65fa74b1f86453edc93d2',
41
- class: "switch-label switch-label--off mr-8"
42
- }, this.labelOff), h("button", {
43
- key: 'ade3ba909f5744a2b87238da52fcc33f600721cf',
44
- type: "button",
45
- role: "switch",
46
- "aria-checked": this.checked ? 'true' : 'false',
47
- "aria-disabled": this.disabled ? 'true' : 'false',
48
- "aria-label": accessibleLabel,
49
- class: {
50
- switch: true,
51
- 'switch--checked': this.checked,
52
- 'switch--disabled': this.disabled
53
- },
54
- onClick: this.toggleSwitch,
55
- disabled: this.disabled
56
- }, h("span", {
57
- key: '64034f73021623f63523c7bb52ec5233ad291c55',
58
- class: "switch-handle"
59
- })), this.labelOn && h("span", {
60
- key: 'a96a35565ac28ed6a27855b90b180f15adb0e711',
61
- class: "switch-label switch-label--on ml-8"
62
- }, this.labelOn));
63
- }
64
- get el() {
65
- return getElement(this);
66
- }
67
- };
68
- EdsSwitch.style = EdsSwitchStyle0;
69
-
70
- export { EdsSwitch as eds_switch };