@ebrains/react 0.9.3-beta → 1.0.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 (51) hide show
  1. package/README.md +3 -3
  2. package/{analytics-44b1416b.esm.js → analytics-d99780e3.esm.js} +2 -2
  3. package/color-primary-palette_6.entry.esm.js +106 -106
  4. package/components-section.entry.esm.js +22 -16
  5. package/correct-use-of-colors.entry.esm.js +33 -33
  6. package/docs-palettes.entry.esm.js +1 -1
  7. package/docs-tokens.entry.esm.js +1 -1
  8. package/eds-accordion.entry.esm.js +2 -2
  9. package/eds-alert.entry.esm.js +1 -1
  10. package/eds-app-root.entry.esm.js +4 -4
  11. package/eds-avatar_34.entry.esm.js +3594 -0
  12. package/eds-card-project.entry.esm.js +130 -13
  13. package/eds-card-tool.entry.esm.js +5 -5
  14. package/eds-cookies-preference.entry.esm.js +2 -2
  15. package/eds-feedback.entry.esm.js +12 -7
  16. package/eds-frame.entry.esm.js +6 -6
  17. package/eds-matomo-notice.entry.esm.js +5 -8
  18. package/eds-pagination_2.entry.esm.js +10 -10
  19. package/eds-progress-bar.entry.esm.js +19 -8
  20. package/eds-rating.entry.esm.js +1 -1
  21. package/eds-section-core_2.entry.esm.js +5 -5
  22. package/eds-spinner.entry.esm.js +3 -3
  23. package/eds-splash-screen.entry.esm.js +87 -0
  24. package/eds-switch.entry.esm.js +21 -11
  25. package/eds-timeline.entry.esm.js +5 -5
  26. package/eds-toast-manager.entry.esm.js +33 -2
  27. package/eds-toast.entry.esm.js +4 -3
  28. package/eds-trl.entry.esm.js +2 -2
  29. package/incorrect-use-of-colors.entry.esm.js +11 -8
  30. package/index.esm.js +1 -1
  31. package/index.esm2.js +39 -314
  32. package/logo-space.entry.esm.js +9 -9
  33. package/logo-variations-horizontal_2.entry.esm.js +28 -28
  34. package/logo-variations-tabs.entry.esm.js +1 -1
  35. package/logo-wrong-usage.entry.esm.js +25 -25
  36. package/package.json +1 -1
  37. package/src/components.d.ts +2 -2
  38. package/src/generated/components.d.ts +1 -1
  39. package/svg-repository.entry.esm.js +2 -2
  40. package/token-list_3.entry.esm.js +5 -5
  41. package/token-ratios.entry.esm.js +3 -3
  42. package/token-typography.entry.esm.js +2 -2
  43. package/color-2554aad6.esm.js +0 -122
  44. package/eds-avatar_27.entry.esm.js +0 -332
  45. package/eds-card-desc_2.entry.esm.js +0 -86
  46. package/eds-card-generic.entry.esm.js +0 -114
  47. package/eds-card-wrapper.entry.esm.js +0 -39
  48. package/eds-login_2.entry.esm.js +0 -1828
  49. package/eds-tabs.entry.esm.js +0 -143
  50. package/eds-tooltip.entry.esm.js +0 -125
  51. package/toastManager-d9eee791.esm.js +0 -34
@@ -1,86 +0,0 @@
1
- import { r as registerInstance, h } from './index.esm2.js';
2
- import 'react';
3
- import 'react/jsx-runtime';
4
- import 'react-dom';
5
-
6
- 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}";
7
- const EdsCardDescStyle0 = edsCardDescCss;
8
- const EdsCardDesc = class {
9
- constructor(hostRef) {
10
- registerInstance(this, hostRef);
11
- this.description = undefined;
12
- this.descClass = 'f-ui-03-light';
13
- this.truncate = true;
14
- this.truncateLines = '3';
15
- }
16
- getTruncateClass() {
17
- return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
18
- }
19
- render() {
20
- return h("p", {
21
- key: '3ea345f69bed29135df8231c79eaea0f06e813df',
22
- class: `text-light ${this.descClass}`
23
- }, h("span", {
24
- key: '99c383485ec0852be81a05fe0999cb429fee4a27',
25
- class: this.getTruncateClass()
26
- }, this.description));
27
- }
28
- };
29
- EdsCardDesc.style = EdsCardDescStyle0;
30
- 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}";
31
- const EdsCardTitleStyle0 = edsCardTitleCss;
32
- const EdsCardTitle = class {
33
- constructor(hostRef) {
34
- registerInstance(this, hostRef);
35
- this.url = undefined;
36
- this.titleClass = undefined;
37
- this.headingLevel = 'h3';
38
- this.externalLink = false;
39
- this.cardTitle = undefined;
40
- this.hierarchy = true;
41
- }
42
- /**
43
- * Dynamically generate the title class based on the heading level.
44
- */
45
- getTitleClass() {
46
- const levelMap = this.hierarchy ? {
47
- h1: '05',
48
- h2: '05',
49
- h3: '05',
50
- h4: '05',
51
- h5: '05',
52
- h6: '06'
53
- } : {
54
- h1: '01',
55
- h2: '02',
56
- h3: '03',
57
- h4: '04',
58
- h5: '05',
59
- h6: '06'
60
- };
61
- return `f-heading-${levelMap[this.headingLevel]}`;
62
- }
63
- /*private getTag() {
64
- if (this.url) {
65
- return 'a';
66
- }
67
- return 'span';
68
- }*/
69
- render() {
70
- //const Tag = this.getTag();
71
- const Heading = this.headingLevel;
72
- return h(Heading, {
73
- key: '9914950b1581456a3a875ed7383975710c05fa7f',
74
- class: this.getTitleClass()
75
- }, h("a", {
76
- key: '9b3298d8bacd8fbaecd8c714329ef5e6ac7192c7',
77
- class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",
78
- href: this.url,
79
- target: this.externalLink ? '_blank' : undefined,
80
- rel: this.externalLink ? 'noopener noreferrer' : undefined
81
- }, this.cardTitle));
82
- }
83
- };
84
- EdsCardTitle.style = EdsCardTitleStyle0;
85
-
86
- export { EdsCardDesc as eds_card_desc, EdsCardTitle as eds_card_title };
@@ -1,114 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index.esm2.js';
2
- import { p as parseData } from './sharedUtils-a550989c.esm.js';
3
- import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
4
- import 'react';
5
- import 'react/jsx-runtime';
6
- import 'react-dom';
7
-
8
- 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-x-1{-moz-column-gap:0.0625rem;column-gap:0.0625rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}";
9
- const EdsCardGenericStyle0 = edsCardGenericCss;
10
- const EdsCardGeneric = class {
11
- constructor(hostRef) {
12
- registerInstance(this, hostRef);
13
- this.parentContext = null; // Accepts the entire event detail or null
14
- this.cardTitle = undefined;
15
- this.url = undefined;
16
- this.description = undefined;
17
- this.image = undefined;
18
- this.avatar = undefined;
19
- this.shortAbbreviation = undefined;
20
- this.headingLevel = 'h3';
21
- this.tags = [];
22
- this.tiny = false;
23
- this.bg = true;
24
- this.withHover = true;
25
- this.hierarchy = true;
26
- this.parsedImage = null;
27
- }
28
- componentWillLoad() {
29
- if (this.image) {
30
- try {
31
- if (typeof this.image === 'object') {
32
- // If image is already an object, assign it directly
33
- this.parsedImage = this.image;
34
- } else if (typeof this.image === 'string') {
35
- // If image is a string, try to parse it
36
- this.parsedImage = JSON.parse(this.image);
37
- }
38
- } catch (error) {
39
- // eslint-disable-next-line
40
- console.error('Error parsing image prop:', error);
41
- this.parsedImage = {}; // Assign a fallback empty object in case of an error
42
- }
43
- }
44
- }
45
- handleParentContext(event) {
46
- if (event.target !== this.el) {
47
- // Ignore the event if it's not targeted at this specific instance
48
- return;
49
- }
50
- //console.log(event.detail);
51
- this.parentContext = event.detail;
52
- event.stopPropagation();
53
- }
54
- /**
55
- * Parses the `tags` prop into an array of link objects.
56
- * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
57
- *
58
- * @returns {any[]} Array of parsed link objects
59
- */
60
- get parsedTags() {
61
- return parseData(this.tags);
62
- }
63
- articleClasses() {
64
- 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(' ');
65
- }
66
- handleClick() {
67
- var _a;
68
- sendAnalytics({
69
- category: 'ui-component',
70
- parentContext: this.parentContext,
71
- tag: this.el.tagName.toLowerCase(),
72
- name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
73
- action: 'click'
74
- });
75
- }
76
- render() {
77
- return h("article", {
78
- key: '440a448c841370838c0c66610bd1266b46f66541',
79
- class: this.articleClasses(),
80
- onClick: () => this.handleClick()
81
- }, h("eds-card-title", {
82
- key: '292d93a9a993c6dcbfd276097a21d3984b1794c4',
83
- "heading-level": this.headingLevel,
84
- titleClass: this.image ? 'f-ui-01' : undefined,
85
- "card-title": this.cardTitle,
86
- url: this.url,
87
- hierarchy: this.hierarchy
88
- }), this.description && h("eds-card-desc", {
89
- key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7',
90
- class: "mt-8",
91
- "truncate-lines": "3",
92
- description: this.description
93
- }), this.parsedImage ? h("eds-img", Object.assign({
94
- class: "mt-8"
95
- }, this.parsedImage)) : this.avatar || this.shortAbbreviation ? h("eds-avatar", {
96
- class: "order-first mb-12",
97
- picture: this.avatar,
98
- initials: this.shortAbbreviation
99
- }) : null, h("div", {
100
- key: '8bdcbbe2982a450843e9ada727e3f6eb62872ae1',
101
- class: "flex flex-wrap gap-y-4 gap-x-1"
102
- }, this.parsedTags.map((tag, index) => h("eds-tag", {
103
- key: index,
104
- intent: tag.style,
105
- label: tag.label
106
- }))), ' ');
107
- }
108
- get el() {
109
- return getElement(this);
110
- }
111
- };
112
- EdsCardGeneric.style = EdsCardGenericStyle0;
113
-
114
- export { EdsCardGeneric as eds_card_generic };
@@ -1,39 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index.esm2.js';
2
- import 'react';
3
- import 'react/jsx-runtime';
4
- import 'react-dom';
5
-
6
- const EdsCardWrapper = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.tiny = false;
10
- this.withBg = true;
11
- this.withHover = true;
12
- }
13
- hasSlot(name) {
14
- if (name) {
15
- return !!this.el.querySelector(`[slot="${name}"]`);
16
- }
17
- return !!this.el.querySelector(':not([slot])');
18
- }
19
- render() {
20
- const articleClasses = [this.tiny ? 'min-h-120' : 'min-h-156', this.withBg ? '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(' ');
21
- return h("article", {
22
- key: '7a191039487c388e752c964c8fd47fb397943994',
23
- class: articleClasses
24
- }, h("slot", {
25
- key: 'ac497c9f36089467abcb6b52e3e356405616dfd6'
26
- }), this.hasSlot('footer') && h("div", {
27
- key: 'eba2425d01514dffa83ec4b4fdfe1878719addd8',
28
- class: "mt-auto"
29
- }, h("slot", {
30
- key: '57f799838be78cdc8b61b9071d68f913b8eef51b',
31
- name: "footer"
32
- })));
33
- }
34
- get el() {
35
- return getElement(this);
36
- }
37
- };
38
-
39
- export { EdsCardWrapper as eds_card_wrapper };