@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.
- package/README.md +3 -3
- package/{analytics-44b1416b.esm.js → analytics-d99780e3.esm.js} +2 -2
- package/color-primary-palette_6.entry.esm.js +106 -106
- package/components-section.entry.esm.js +22 -16
- package/correct-use-of-colors.entry.esm.js +33 -33
- package/docs-palettes.entry.esm.js +1 -1
- package/docs-tokens.entry.esm.js +1 -1
- package/eds-accordion.entry.esm.js +2 -2
- package/eds-alert.entry.esm.js +1 -1
- package/eds-app-root.entry.esm.js +4 -4
- package/eds-avatar_34.entry.esm.js +3594 -0
- package/eds-card-project.entry.esm.js +130 -13
- package/eds-card-tool.entry.esm.js +5 -5
- package/eds-cookies-preference.entry.esm.js +2 -2
- package/eds-feedback.entry.esm.js +12 -7
- package/eds-frame.entry.esm.js +6 -6
- package/eds-matomo-notice.entry.esm.js +5 -8
- package/eds-pagination_2.entry.esm.js +10 -10
- package/eds-progress-bar.entry.esm.js +19 -8
- package/eds-rating.entry.esm.js +1 -1
- package/eds-section-core_2.entry.esm.js +5 -5
- package/eds-spinner.entry.esm.js +3 -3
- package/eds-splash-screen.entry.esm.js +87 -0
- package/eds-switch.entry.esm.js +21 -11
- package/eds-timeline.entry.esm.js +5 -5
- package/eds-toast-manager.entry.esm.js +33 -2
- package/eds-toast.entry.esm.js +4 -3
- package/eds-trl.entry.esm.js +2 -2
- package/incorrect-use-of-colors.entry.esm.js +11 -8
- package/index.esm.js +1 -1
- package/index.esm2.js +39 -314
- package/logo-space.entry.esm.js +9 -9
- package/logo-variations-horizontal_2.entry.esm.js +28 -28
- package/logo-variations-tabs.entry.esm.js +1 -1
- package/logo-wrong-usage.entry.esm.js +25 -25
- package/package.json +1 -1
- package/src/components.d.ts +2 -2
- package/src/generated/components.d.ts +1 -1
- package/svg-repository.entry.esm.js +2 -2
- package/token-list_3.entry.esm.js +5 -5
- package/token-ratios.entry.esm.js +3 -3
- package/token-typography.entry.esm.js +2 -2
- package/color-2554aad6.esm.js +0 -122
- package/eds-avatar_27.entry.esm.js +0 -332
- package/eds-card-desc_2.entry.esm.js +0 -86
- package/eds-card-generic.entry.esm.js +0 -114
- package/eds-card-wrapper.entry.esm.js +0 -39
- package/eds-login_2.entry.esm.js +0 -1828
- package/eds-tabs.entry.esm.js +0 -143
- package/eds-tooltip.entry.esm.js +0 -125
- 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 };
|