@ebrains/react 0.6.0-alpha.0 → 0.7.0-alpha.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/color-primary-palette_6.entry.esm.js +106 -106
- package/correct-use-of-colors.entry.esm.js +33 -33
- package/eds-accordion_22.entry.esm.js +269 -0
- package/eds-app-root.entry.esm.js +53 -0
- package/eds-avatar_4.entry.esm.js +185 -0
- package/eds-breadcrumb.entry.esm.js +4 -15
- package/eds-card-generic.entry.esm.js +114 -0
- package/eds-card-section.entry.esm.js +56 -0
- package/eds-components-section.entry.esm.js +1 -1
- package/eds-cookies-preference.entry.esm.js +2 -2
- package/eds-docs-palettes.entry.esm.js +1 -1
- package/eds-docs-tokens.entry.esm.js +1 -1
- package/{eds-dropdown_2.entry.esm.js → eds-dropdown.entry.esm.js} +19 -98
- package/eds-feedback.entry.esm.js +82 -0
- package/eds-form.entry.esm.js +253 -253
- package/eds-frame.entry.esm.js +34 -33
- package/eds-icon-arrow-diagonal.entry.esm.js +1 -1
- package/eds-icon-arrow-right.entry.esm.js +1 -1
- package/eds-icon-bluesky.entry.esm.js +1 -1
- package/eds-icon-chevron-down.entry.esm.js +1 -1
- package/eds-icon-chevron-left.entry.esm.js +1 -1
- package/eds-icon-chevron-right.entry.esm.js +1 -1
- package/eds-icon-chevron-up.entry.esm.js +1 -1
- package/eds-icon-close.entry.esm.js +1 -1
- package/eds-icon-copy.entry.esm.js +1 -1
- package/eds-icon-eu.entry.esm.js +1 -1
- package/eds-icon-facebook.entry.esm.js +1 -1
- package/eds-icon-gitlab.entry.esm.js +1 -1
- package/eds-icon-linkedin.entry.esm.js +1 -1
- package/eds-icon-loader.entry.esm.js +1 -1
- package/eds-icon-mastodon.entry.esm.js +1 -1
- package/eds-icon-menu.entry.esm.js +1 -1
- package/eds-icon-more.entry.esm.js +1 -1
- package/eds-icon-search.entry.esm.js +1 -1
- package/eds-icon-star.entry.esm.js +21 -0
- package/eds-icon-success.entry.esm.js +1 -1
- package/eds-icon-thumbs-down.entry.esm.js +21 -0
- package/eds-icon-thumbs-up.entry.esm.js +21 -0
- package/eds-icon-twitter.entry.esm.js +1 -1
- package/eds-icon-user.entry.esm.js +1 -1
- package/eds-icon-youtube.entry.esm.js +1 -1
- package/{keycloak-d502ec16.esm.js → eds-login_2.entry.esm.js} +172 -1
- package/eds-logo-variations.entry.esm.js +1 -1
- package/eds-modal.entry.esm.js +22 -9
- package/eds-progress-bar.entry.esm.js +2 -2
- package/eds-rating.entry.esm.js +37 -37
- package/eds-section-core_2.entry.esm.js +5 -5
- package/eds-spinner.entry.esm.js +67 -0
- package/eds-steps.entry.esm.js +8 -17
- package/eds-svg-repository.entry.esm.js +8 -2
- package/eds-switch.entry.esm.js +5 -5
- package/eds-tabs.entry.esm.js +14 -26
- package/eds-timeline.entry.esm.js +6 -23
- package/eds-toast-manager.entry.esm.js +62 -0
- package/eds-toast.entry.esm.js +92 -0
- package/eds-tooltip.entry.esm.js +3 -3
- package/eds-trl.entry.esm.js +2 -2
- package/eds-user.entry.esm.js +64 -87
- package/eds-vertical-stepper.entry.esm.js +5 -5
- package/formUtils-ac68474d.esm.js +247 -0
- package/incorrect-use-of-colors.entry.esm.js +7 -7
- package/index.esm.js +1 -1
- package/index.esm2.js +46 -46
- package/logo-space.entry.esm.js +4 -4
- package/logo-variations-horizontal_2.entry.esm.js +26 -26
- package/logo-wrong-usage.entry.esm.js +37 -37
- package/package.json +1 -1
- package/sharedUtils-a550989c.esm.js +17 -0
- package/src/components.d.ts +4 -1
- package/star-0da9b5e9.esm.js +5 -0
- package/thumbs-down-a18fd049.esm.js +5 -0
- package/thumbs-up-c19a71bc.esm.js +6 -0
- package/token-list_3.entry.esm.js +5 -5
- package/token-ratios.entry.esm.js +3 -3
- package/token-spacing.entry.esm.js +26 -26
- package/token-typography.entry.esm.js +2 -2
- package/eds-accordion_13.entry.esm.js +0 -1064
- package/eds-block-break.entry.esm.js +0 -22
- package/eds-footer.entry.esm.js +0 -102
- package/eds-fullscreen-menu.entry.esm.js +0 -143
- package/eds-header.entry.esm.js +0 -130
- package/eds-input_7.entry.esm.js +0 -529
- package/eds-link.entry.esm.js +0 -204
- package/eds-login.entry.esm.js +0 -97
- package/eds-logo.entry.esm.js +0 -87
- package/eds-navigator.entry.esm.js +0 -72
- package/eds-pagination_2.entry.esm.js +0 -472
- package/eds-social-networks.entry.esm.js +0 -74
- package/eds-tab.entry.esm.js +0 -41
- package/eds-tabs-content.entry.esm.js +0 -145
|
@@ -1,472 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement } from './index.esm2.js';
|
|
2
|
-
import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
|
|
3
|
-
import 'react';
|
|
4
|
-
import 'react/jsx-runtime';
|
|
5
|
-
import 'react-dom';
|
|
6
|
-
|
|
7
|
-
const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-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)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.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)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
|
|
8
|
-
const EdsPaginationStyle0 = edsPaginationCss;
|
|
9
|
-
const EdsPagination = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
registerInstance(this, hostRef);
|
|
12
|
-
this.currentPage = undefined;
|
|
13
|
-
this.lastPage = undefined;
|
|
14
|
-
this.perPage = 10;
|
|
15
|
-
this.total = 0;
|
|
16
|
-
this.url = '';
|
|
17
|
-
this.mode = 'default';
|
|
18
|
-
this.prevLabel = 'Prev';
|
|
19
|
-
this.nextLabel = 'Next';
|
|
20
|
-
this.prevUrl = '';
|
|
21
|
-
this.nextUrl = '';
|
|
22
|
-
this.links = [];
|
|
23
|
-
}
|
|
24
|
-
/** Lifecycle hook to generate pagination links on component load */
|
|
25
|
-
componentWillLoad() {
|
|
26
|
-
if (this.mode === 'default') {
|
|
27
|
-
this.generateLinks();
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
componentDidLoad() {
|
|
31
|
-
// Emit context for each eds-link element after the component is fully loaded
|
|
32
|
-
const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
|
|
33
|
-
links.forEach(lnk => {
|
|
34
|
-
this.emitContext(lnk);
|
|
35
|
-
});
|
|
36
|
-
/*if (links.length > 0) {
|
|
37
|
-
// Emit context for the first link
|
|
38
|
-
this.emitContext(links[0]);
|
|
39
|
-
// Emit context for the last link, if it's different from the first
|
|
40
|
-
if (links.length > 1) {
|
|
41
|
-
this.emitContext(links[links.length - 1]);
|
|
42
|
-
}
|
|
43
|
-
}*/
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Emits a custom event called `parentContext` for a given link element.
|
|
47
|
-
* This event provides context information about the breadcrumb component.
|
|
48
|
-
*
|
|
49
|
-
* @param linkElement - The link element to which the event will be dispatched.
|
|
50
|
-
*/
|
|
51
|
-
emitContext(linkElement) {
|
|
52
|
-
const event = new CustomEvent('parentContext', {
|
|
53
|
-
detail: {
|
|
54
|
-
componentName: this.hostEl.tagName.toLowerCase(),
|
|
55
|
-
identifier: null
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
linkElement.dispatchEvent(event);
|
|
59
|
-
}
|
|
60
|
-
onPageOrLastPageChange() {
|
|
61
|
-
if (this.mode === 'default') {
|
|
62
|
-
this.generateLinks();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* Checks if the current page is the first page
|
|
67
|
-
* @returns {boolean} - true if current page is the first page
|
|
68
|
-
*/
|
|
69
|
-
isFirstPage() {
|
|
70
|
-
return this.currentPage === 1;
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* Checks if the current page is the last page
|
|
74
|
-
* @returns {boolean} - true if current page is the last page
|
|
75
|
-
*/
|
|
76
|
-
isLastPage() {
|
|
77
|
-
return this.currentPage === this.lastPage;
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* Generates a pagination link object
|
|
81
|
-
* @param {number} page - Page number for the link
|
|
82
|
-
* @returns {Link} - Link object with page details
|
|
83
|
-
*/
|
|
84
|
-
generateLink(page) {
|
|
85
|
-
const urlHasQuery = this.url.includes('?');
|
|
86
|
-
return {
|
|
87
|
-
ariaLabel: `Page ${page}`,
|
|
88
|
-
url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
|
|
89
|
-
label: page.toString(),
|
|
90
|
-
current: this.currentPage === page,
|
|
91
|
-
disabled: false
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
/** Generates pagination links based on the last page and current page */
|
|
95
|
-
generateLinks() {
|
|
96
|
-
if (this.lastPage && this.lastPage > 5) {
|
|
97
|
-
this.links = this.getPaginationGenerator(this.currentPage || 1, this.lastPage).map(page => typeof page === 'number' ? this.generateLink(page) : page);
|
|
98
|
-
} else if (this.lastPage) {
|
|
99
|
-
this.links = Array.from({
|
|
100
|
-
length: this.lastPage
|
|
101
|
-
}).map((_, i) => this.generateLink(i + 1));
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
/**
|
|
105
|
-
* Creates a pagination range based on delta, current, and total pages
|
|
106
|
-
* @param {number} current - Current page number
|
|
107
|
-
* @param {number} total - Total number of pages
|
|
108
|
-
* @param {number} delta - Range of pages to display around the current page
|
|
109
|
-
* @returns {(number | string)[]} - Range of page numbers or ellipses
|
|
110
|
-
*/
|
|
111
|
-
getPaginationGenerator(current, total) {
|
|
112
|
-
const delta = 1; // Show one page before and one after the current page
|
|
113
|
-
const range = [];
|
|
114
|
-
if (total <= 5) {
|
|
115
|
-
// If total pages are 5 or less, show all pages
|
|
116
|
-
for (let i = 1; i <= total; i++) {
|
|
117
|
-
range.push(i);
|
|
118
|
-
}
|
|
119
|
-
} else {
|
|
120
|
-
// Always show the first page
|
|
121
|
-
range.push(1);
|
|
122
|
-
// Add ellipsis if there’s a gap between the first page and the current range start
|
|
123
|
-
if (current - delta > 2) {
|
|
124
|
-
range.push('...');
|
|
125
|
-
}
|
|
126
|
-
// Determine range for pages around the current page
|
|
127
|
-
for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
|
|
128
|
-
range.push(i);
|
|
129
|
-
}
|
|
130
|
-
// Add ellipsis if there’s a gap between the current range end and the last page
|
|
131
|
-
if (current + delta < total - 1) {
|
|
132
|
-
range.push('...');
|
|
133
|
-
}
|
|
134
|
-
// Always show the last page
|
|
135
|
-
range.push(total);
|
|
136
|
-
}
|
|
137
|
-
return range;
|
|
138
|
-
}
|
|
139
|
-
/**
|
|
140
|
-
* Formats the current page results information for display
|
|
141
|
-
* @returns {string} - Formatted page result information
|
|
142
|
-
*/
|
|
143
|
-
pageResults() {
|
|
144
|
-
if (this.total > 0) {
|
|
145
|
-
return this.total > this.perPage ? `${this.perPage * ((this.currentPage || 1) - 1) + 1} - ${this.perPage * (this.currentPage || 1) >= this.total ? this.total : this.perPage * (this.currentPage || 1)} of ${this.total}` : `${this.total}`;
|
|
146
|
-
}
|
|
147
|
-
return '';
|
|
148
|
-
}
|
|
149
|
-
/**
|
|
150
|
-
* Handles a page click event, updating the current page and dispatching an event
|
|
151
|
-
* @param {MouseEvent} event - Click event
|
|
152
|
-
* @param {number} newPage - New page number
|
|
153
|
-
*/
|
|
154
|
-
handlePageClick(event, newPage) {
|
|
155
|
-
if (this.mode === 'navigator') {
|
|
156
|
-
return; // No page clicking logic for navigator mode
|
|
157
|
-
}
|
|
158
|
-
event.preventDefault(); // Prevent default link navigation
|
|
159
|
-
if (newPage !== this.currentPage) {
|
|
160
|
-
this.links = this.links.map(link => typeof link === 'object' ? Object.assign(Object.assign({}, link), {
|
|
161
|
-
current: parseInt(link.label) === newPage
|
|
162
|
-
}) : link);
|
|
163
|
-
const pageChangeEvent = new CustomEvent('pageChange', {
|
|
164
|
-
detail: newPage,
|
|
165
|
-
bubbles: true,
|
|
166
|
-
composed: true
|
|
167
|
-
});
|
|
168
|
-
this.hostEl.dispatchEvent(pageChangeEvent);
|
|
169
|
-
this.currentPage = newPage;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
render() {
|
|
173
|
-
return h("div", {
|
|
174
|
-
key: '8c8418eec263acc153a928b752775458f897504f'
|
|
175
|
-
}, this.total > 0 && this.mode === 'default' && h("p", {
|
|
176
|
-
key: '02a5a69772a4812f10b29e8df117b72df210614d',
|
|
177
|
-
class: "f-ui-03 text-lightest mb-28 w-full text-center"
|
|
178
|
-
}, h("span", {
|
|
179
|
-
key: 'ef9804843100c722643c24e31a05f86f2d55efa0',
|
|
180
|
-
class: "sr-only"
|
|
181
|
-
}, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
|
|
182
|
-
"aria-label": "Pagination"
|
|
183
|
-
}, h("ul", {
|
|
184
|
-
class: "flex items-center justify-center gap-x-8"
|
|
185
|
-
}, h("li", {
|
|
186
|
-
class: "mr-auto"
|
|
187
|
-
}, h("eds-link", {
|
|
188
|
-
label: this.prevLabel,
|
|
189
|
-
url: this.mode === 'navigator' ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
|
|
190
|
-
: this.isFirstPage() ? '#' : this.generateLink(this.currentPage - 1).url,
|
|
191
|
-
disabled: this.mode === 'navigator' ? !this.prevUrl // Disable if prevUrl is not provided
|
|
192
|
-
: this.isFirstPage(),
|
|
193
|
-
"aria-label": "Previous page",
|
|
194
|
-
icon: "chevron-left",
|
|
195
|
-
"icon-pos": "left",
|
|
196
|
-
size: "small",
|
|
197
|
-
"icon-small": "true",
|
|
198
|
-
intent: "strong",
|
|
199
|
-
"hide-label-on-small-screen": true,
|
|
200
|
-
class: "!p-8 lg:!pr-12",
|
|
201
|
-
onClick: event => {
|
|
202
|
-
if (this.mode === 'default') {
|
|
203
|
-
if (this.isFirstPage()) {
|
|
204
|
-
event.preventDefault(); // Prevent click if disabled
|
|
205
|
-
} else {
|
|
206
|
-
this.handlePageClick(event, (this.currentPage || 1) - 1);
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
})), this.mode === 'default' && this.links.map((link, index) => h("li", {
|
|
211
|
-
key: index,
|
|
212
|
-
class: "f-ui-02 flex h-36 items-center justify-center"
|
|
213
|
-
}, typeof link === 'string' ? h("span", {
|
|
214
|
-
class: "flex items-center justify-center"
|
|
215
|
-
}, link) : h("eds-link", {
|
|
216
|
-
url: link.url,
|
|
217
|
-
"aria-label": link.ariaLabel,
|
|
218
|
-
label: link.label,
|
|
219
|
-
current: link.current,
|
|
220
|
-
size: "small",
|
|
221
|
-
class: "!p-8",
|
|
222
|
-
intent: link.current ? 'secondary' : 'ghost',
|
|
223
|
-
onClick: event => this.handlePageClick(event, parseInt(link.label))
|
|
224
|
-
}))), h("li", {
|
|
225
|
-
class: "ml-auto"
|
|
226
|
-
}, h("eds-link", {
|
|
227
|
-
label: this.nextLabel,
|
|
228
|
-
url: this.mode === 'navigator' ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
|
|
229
|
-
: this.isLastPage() ? '#' : this.generateLink(this.currentPage + 1).url,
|
|
230
|
-
disabled: this.mode === 'navigator' ? !this.nextUrl // Disable if nextUrl is not provided
|
|
231
|
-
: this.isLastPage(),
|
|
232
|
-
"aria-label": "Next page",
|
|
233
|
-
size: "small",
|
|
234
|
-
"icon-small": "true",
|
|
235
|
-
icon: "chevron-right",
|
|
236
|
-
intent: "strong",
|
|
237
|
-
"hide-label-on-small-screen": true,
|
|
238
|
-
class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors",
|
|
239
|
-
onClick: event => {
|
|
240
|
-
if (this.mode === 'default') {
|
|
241
|
-
if (this.isLastPage()) {
|
|
242
|
-
event.preventDefault(); // Prevent click if disabled
|
|
243
|
-
} else {
|
|
244
|
-
this.handlePageClick(event, (this.currentPage || 1) + 1);
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
})))) : null);
|
|
249
|
-
}
|
|
250
|
-
get hostEl() {
|
|
251
|
-
return getElement(this);
|
|
252
|
-
}
|
|
253
|
-
static get watchers() {
|
|
254
|
-
return {
|
|
255
|
-
"currentPage": ["onPageOrLastPageChange"],
|
|
256
|
-
"lastPage": ["onPageOrLastPageChange"]
|
|
257
|
-
};
|
|
258
|
-
}
|
|
259
|
-
};
|
|
260
|
-
EdsPagination.style = EdsPaginationStyle0;
|
|
261
|
-
const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
|
|
262
|
-
const EdsTableStyle0 = edsTableCss;
|
|
263
|
-
const EdsTable = class {
|
|
264
|
-
constructor(hostRef) {
|
|
265
|
-
registerInstance(this, hostRef);
|
|
266
|
-
this.data = null;
|
|
267
|
-
this.endpoint = null;
|
|
268
|
-
this.config = {};
|
|
269
|
-
this.rowsPerPage = 10;
|
|
270
|
-
this.paginationEnabled = true;
|
|
271
|
-
this.searchEnabled = false;
|
|
272
|
-
this.hostWidth = undefined;
|
|
273
|
-
this.columnSize = 'default';
|
|
274
|
-
this.tableData = [];
|
|
275
|
-
this.columns = [];
|
|
276
|
-
this.currentPage = 1;
|
|
277
|
-
this.parsedConfig = {};
|
|
278
|
-
this.totalRows = 0;
|
|
279
|
-
this.searchQuery = '';
|
|
280
|
-
}
|
|
281
|
-
handleDataChange() {
|
|
282
|
-
this.parseData();
|
|
283
|
-
}
|
|
284
|
-
handleConfigChange() {
|
|
285
|
-
this.parseConfig();
|
|
286
|
-
}
|
|
287
|
-
componentWillLoad() {
|
|
288
|
-
this.parseConfig();
|
|
289
|
-
this.data ? this.parseData() : this.endpoint && this.fetchData();
|
|
290
|
-
}
|
|
291
|
-
componentDidLoad() {
|
|
292
|
-
this.setupPaginationListener();
|
|
293
|
-
}
|
|
294
|
-
componentDidUpdate() {
|
|
295
|
-
this.setupPaginationListener();
|
|
296
|
-
}
|
|
297
|
-
parseData() {
|
|
298
|
-
try {
|
|
299
|
-
this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
|
|
300
|
-
this.totalRows = this.tableData.length;
|
|
301
|
-
this.updateColumns();
|
|
302
|
-
this.currentPage = 1;
|
|
303
|
-
} catch (error) {
|
|
304
|
-
// eslint-disable-next-line
|
|
305
|
-
console.error('Failed to parse data:', error);
|
|
306
|
-
this.tableData = [];
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
parseConfig() {
|
|
310
|
-
try {
|
|
311
|
-
this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
|
|
312
|
-
} catch (error) {
|
|
313
|
-
// eslint-disable-next-line
|
|
314
|
-
console.error('Failed to parse config:', error);
|
|
315
|
-
this.parsedConfig = {};
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
async fetchData() {
|
|
319
|
-
try {
|
|
320
|
-
const response = await fetch(this.endpoint);
|
|
321
|
-
const data = await response.json();
|
|
322
|
-
this.data = data;
|
|
323
|
-
} catch (error) {
|
|
324
|
-
// eslint-disable-next-line
|
|
325
|
-
console.error('Failed to fetch data:', error);
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
setupPaginationListener() {
|
|
329
|
-
if (!this.shouldEnablePagination()) {
|
|
330
|
-
return;
|
|
331
|
-
}
|
|
332
|
-
const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
|
|
333
|
-
if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
|
|
334
|
-
paginationEl.addEventListener('pageChange', event => this.handlePageChange(event.detail));
|
|
335
|
-
paginationEl.setAttribute('listener-attached', 'true');
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
getFilteredRows() {
|
|
339
|
-
return this.tableData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
|
|
340
|
-
}
|
|
341
|
-
getPaginatedRows() {
|
|
342
|
-
const filteredRows = this.getFilteredRows();
|
|
343
|
-
this.totalRows = filteredRows.length;
|
|
344
|
-
const start = (this.currentPage - 1) * this.rowsPerPage;
|
|
345
|
-
return filteredRows.slice(start, start + this.rowsPerPage);
|
|
346
|
-
}
|
|
347
|
-
handlePageChange(newPage) {
|
|
348
|
-
this.currentPage = newPage;
|
|
349
|
-
sendAnalytics({
|
|
350
|
-
category: 'ui-component',
|
|
351
|
-
parentContext: null,
|
|
352
|
-
tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
|
|
353
|
-
name: `${newPage}` || '',
|
|
354
|
-
action: 'page'
|
|
355
|
-
});
|
|
356
|
-
}
|
|
357
|
-
handleSearch(event) {
|
|
358
|
-
this.searchQuery = event.target.value;
|
|
359
|
-
this.currentPage = 1;
|
|
360
|
-
/*sendAnalytics({
|
|
361
|
-
category: 'ui-component',
|
|
362
|
-
parentContext: null,
|
|
363
|
-
tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
|
|
364
|
-
name: `${this.searchQuery}` || '',
|
|
365
|
-
action: 'page'
|
|
366
|
-
});*/
|
|
367
|
-
}
|
|
368
|
-
renderCell(value, column) {
|
|
369
|
-
var _a;
|
|
370
|
-
const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
|
|
371
|
-
return format === 'uppercase' ? value === null || value === void 0 ? void 0 : value.toString().toUpperCase() : format === 'svg' ? h("div", {
|
|
372
|
-
innerHTML: value
|
|
373
|
-
}) : format === 'bold' ? h("strong", null, value) : format === 'code' ? h("code", null, value) : value;
|
|
374
|
-
}
|
|
375
|
-
shouldEnablePagination() {
|
|
376
|
-
return this.paginationEnabled && this.totalRows > this.rowsPerPage;
|
|
377
|
-
}
|
|
378
|
-
updateColumns() {
|
|
379
|
-
this.columns = this.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
|
|
380
|
-
}
|
|
381
|
-
getVisibleColumnsCount() {
|
|
382
|
-
return this.columns.filter(column => {
|
|
383
|
-
var _a;
|
|
384
|
-
return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden);
|
|
385
|
-
}).length;
|
|
386
|
-
}
|
|
387
|
-
divisionFactor() {
|
|
388
|
-
let divisionFactor = 1;
|
|
389
|
-
if (this.columnSize === 'medium') {
|
|
390
|
-
divisionFactor = 2;
|
|
391
|
-
} else if (this.columnSize === 'large') {
|
|
392
|
-
divisionFactor = 4;
|
|
393
|
-
}
|
|
394
|
-
return divisionFactor;
|
|
395
|
-
}
|
|
396
|
-
render() {
|
|
397
|
-
// Get the paginated rows and calculate the last page.
|
|
398
|
-
const paginatedRows = this.getPaginatedRows();
|
|
399
|
-
const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
|
|
400
|
-
// Determine the number of visible columns (i.e., those not hidden via config)
|
|
401
|
-
const visibleColumnsCount = this.getVisibleColumnsCount();
|
|
402
|
-
/// Calculate container width based on the optional prop or parent's measured width.
|
|
403
|
-
const containerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.hostEl.parentElement instanceof HTMLElement ? this.hostEl.parentElement.getBoundingClientRect().width : this.hostEl.getRootNode().host instanceof HTMLElement ? this.hostEl.getRootNode().host.getBoundingClientRect().width : 400;
|
|
404
|
-
const columnWidth = visibleColumnsCount > 0 ? Math.floor(containerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
|
|
405
|
-
return h("div", {
|
|
406
|
-
key: '66ca59804bc8054655ed0d942104516fe4cd259b'
|
|
407
|
-
}, this.searchEnabled && h("div", {
|
|
408
|
-
key: 'df7267fc443da042e4b6ff81ded5800a2213bd73'
|
|
409
|
-
}, h("eds-input-field", {
|
|
410
|
-
key: 1,
|
|
411
|
-
name: "search",
|
|
412
|
-
"aria-label": "Search",
|
|
413
|
-
type: "text",
|
|
414
|
-
placeholder: "Search...",
|
|
415
|
-
// @ts-ignore
|
|
416
|
-
onInput: event => this.handleSearch(event)
|
|
417
|
-
})), h("div", {
|
|
418
|
-
key: '80ac1fcb3802f9f5d5eabe016fb7345b88908b36',
|
|
419
|
-
class: "mt-20"
|
|
420
|
-
}, h("table", {
|
|
421
|
-
key: '09acf39378b1a4c8bfe40b496ec6bf71a2d761ca',
|
|
422
|
-
class: "block overflow-x-auto mt-6 p-0"
|
|
423
|
-
}, h("thead", {
|
|
424
|
-
key: '8b844806cfef10d1a59da54a385ee8ed6c167050'
|
|
425
|
-
}, h("tr", {
|
|
426
|
-
key: '1b3cff91bdaf225e9f3b337e245cd80ad4772b6a',
|
|
427
|
-
class: "m-0 p-0 border border-softer even:bg-inverse-softer"
|
|
428
|
-
}, this.columns.map(column => {
|
|
429
|
-
var _a;
|
|
430
|
-
return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("th", {
|
|
431
|
-
class: "m-0 py-8 border border-softer f-ui-02 break-words",
|
|
432
|
-
style: {
|
|
433
|
-
minWidth: `${columnWidth - 5}px`
|
|
434
|
-
}
|
|
435
|
-
}, column);
|
|
436
|
-
}))), h("tbody", {
|
|
437
|
-
key: '93dfd3abd196779c288f85bb6a357ad3e9c01418'
|
|
438
|
-
}, paginatedRows.map(row => h("tr", {
|
|
439
|
-
class: "m-0 p-0 border border-softer even:bg-inverse-softer"
|
|
440
|
-
}, this.columns.map(column => {
|
|
441
|
-
var _a;
|
|
442
|
-
return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("td", {
|
|
443
|
-
class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
|
|
444
|
-
style: {
|
|
445
|
-
minWidth: `${columnWidth - 5}px`
|
|
446
|
-
}
|
|
447
|
-
}, this.renderCell(row[column], column));
|
|
448
|
-
})))))), this.shouldEnablePagination() && h("div", {
|
|
449
|
-
key: '516b65d78a9ea91060c1dfcb3306bbd3ac2c6f58',
|
|
450
|
-
class: "mt-20"
|
|
451
|
-
}, h("eds-pagination", {
|
|
452
|
-
key: 'abe3a593827d99437a06e204ea9d8ef92f80aba7',
|
|
453
|
-
currentPage: this.currentPage,
|
|
454
|
-
lastPage: lastPage,
|
|
455
|
-
perPage: this.rowsPerPage,
|
|
456
|
-
total: this.totalRows,
|
|
457
|
-
mode: "default"
|
|
458
|
-
})));
|
|
459
|
-
}
|
|
460
|
-
get hostEl() {
|
|
461
|
-
return getElement(this);
|
|
462
|
-
}
|
|
463
|
-
static get watchers() {
|
|
464
|
-
return {
|
|
465
|
-
"data": ["handleDataChange", "parseData"],
|
|
466
|
-
"config": ["handleConfigChange"]
|
|
467
|
-
};
|
|
468
|
-
}
|
|
469
|
-
};
|
|
470
|
-
EdsTable.style = EdsTableStyle0;
|
|
471
|
-
|
|
472
|
-
export { EdsPagination as eds_pagination, EdsTable as eds_table };
|
|
@@ -1,74 +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 edsSocialNetworksCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.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{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
|
|
7
|
-
const EdsSocialNetworksStyle0 = edsSocialNetworksCss;
|
|
8
|
-
const EdsSocialNetworks = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
11
|
-
/**
|
|
12
|
-
* Array of social network objects, each containing label, URL, and icon.
|
|
13
|
-
* These are used to render the social network links.
|
|
14
|
-
*
|
|
15
|
-
* @private
|
|
16
|
-
* @type {SocialNetworks[]}
|
|
17
|
-
*/
|
|
18
|
-
this.socialNetworks = [{
|
|
19
|
-
label: 'Twitter',
|
|
20
|
-
url: 'https://twitter.com/ebrains_eu',
|
|
21
|
-
icon: 'twitter'
|
|
22
|
-
}, {
|
|
23
|
-
label: 'Linkedin',
|
|
24
|
-
url: 'https://www.linkedin.com/company/ebrains-eu/about/',
|
|
25
|
-
icon: 'linkedin'
|
|
26
|
-
}, {
|
|
27
|
-
label: 'Facebook',
|
|
28
|
-
url: 'https://www.facebook.com/people/Ebrains_eu/100046659909324/',
|
|
29
|
-
icon: 'facebook'
|
|
30
|
-
}, {
|
|
31
|
-
label: 'Youtube',
|
|
32
|
-
url: 'https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ',
|
|
33
|
-
icon: 'youtube'
|
|
34
|
-
}, {
|
|
35
|
-
label: 'Mastodon',
|
|
36
|
-
url: 'https://mastodon.social/@ebrains',
|
|
37
|
-
icon: 'mastodon'
|
|
38
|
-
}, {
|
|
39
|
-
label: 'Bluesky',
|
|
40
|
-
url: 'https://bsky.app/profile/ebrains.bsky.social',
|
|
41
|
-
icon: 'bluesky'
|
|
42
|
-
}];
|
|
43
|
-
this.title = 'Follow EBRAINS to keep up-to-date';
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Renders the component's HTML structure with links to EBRAINS social profiles.
|
|
47
|
-
* Each social network link uses the `eds-link` component with specific classes and styles.
|
|
48
|
-
*
|
|
49
|
-
* @returns {JSX.Element} The rendered JSX for the component.
|
|
50
|
-
*/
|
|
51
|
-
render() {
|
|
52
|
-
return h("div", {
|
|
53
|
-
key: '9efc31261e88c70f9c808251124178d807140594'
|
|
54
|
-
}, h("p", {
|
|
55
|
-
key: '383101de2aaba05e1024f3ba86d788ad5d92173c',
|
|
56
|
-
class: "f-ui-02"
|
|
57
|
-
}, this.title), h("ul", {
|
|
58
|
-
key: 'e27243a4e7b8aab085c4ef091d67df57dba70664',
|
|
59
|
-
class: "mt-12 flex gap-4"
|
|
60
|
-
}, this.socialNetworks.map((network, index) => h("li", {
|
|
61
|
-
key: index
|
|
62
|
-
}, h("eds-link", {
|
|
63
|
-
"extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm",
|
|
64
|
-
external: true,
|
|
65
|
-
"aria-label": network.label,
|
|
66
|
-
url: network.url,
|
|
67
|
-
icon: network.icon,
|
|
68
|
-
intent: "strong"
|
|
69
|
-
})))));
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
EdsSocialNetworks.style = EdsSocialNetworksStyle0;
|
|
73
|
-
|
|
74
|
-
export { EdsSocialNetworks as eds_social_networks };
|
package/eds-tab.entry.esm.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index.esm2.js';
|
|
2
|
-
import { c as cva } from './index-39c58238.esm.js';
|
|
3
|
-
import 'react';
|
|
4
|
-
import 'react/jsx-runtime';
|
|
5
|
-
import 'react-dom';
|
|
6
|
-
|
|
7
|
-
const EdsTab = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
registerInstance(this, hostRef);
|
|
10
|
-
this.tabCva = cva(['cursor-pointer',
|
|
11
|
-
//'px-16 py-12',
|
|
12
|
-
//'border-b-2',
|
|
13
|
-
'text-gray-700', 'hover:text-black', 'focus:outline-none', 'focus-visible:ring'], {
|
|
14
|
-
variants: {
|
|
15
|
-
active: {
|
|
16
|
-
true: 'border-blue-500 font-bold text-blue-600',
|
|
17
|
-
false: 'border-transparent'
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
defaultVariants: {
|
|
21
|
-
active: false
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
this.label = undefined;
|
|
25
|
-
this.url = undefined;
|
|
26
|
-
this.active = false;
|
|
27
|
-
this.ariaLabel = undefined;
|
|
28
|
-
}
|
|
29
|
-
render() {
|
|
30
|
-
return h("a", {
|
|
31
|
-
key: 'a55be2a07e554ab13a0d7e913710382d6126da57',
|
|
32
|
-
"aria-label": this.label,
|
|
33
|
-
"aria-current": this.active,
|
|
34
|
-
class: this.tabCva({
|
|
35
|
-
active: this.active
|
|
36
|
-
})
|
|
37
|
-
}, this.label);
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export { EdsTab as eds_tab };
|