@ebrains/react 0.9.1-beta → 0.9.2-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.
- package/.babelrc +12 -0
- package/package.json +2 -6
- package/project.json +10 -0
- package/rollup.config.js +43 -0
- package/src/components.ts +49 -0
- package/src/generated/components.ts +47 -0
- package/src/generated/react-component-lib/attachProps.ts +125 -0
- package/src/generated/react-component-lib/case.ts +7 -0
- package/src/generated/react-component-lib/createComponent.tsx +106 -0
- package/src/generated/react-component-lib/createOverlayComponent.tsx +142 -0
- package/src/generated/react-component-lib/dev.ts +14 -0
- package/src/generated/react-component-lib/index.tsx +50 -0
- package/src/generated/react-component-lib/interfaces.ts +34 -0
- package/src/generated/react-component-lib/utils/attachProps.ts +125 -0
- package/src/generated/react-component-lib/utils/case.ts +7 -0
- package/src/generated/react-component-lib/utils/dev.ts +14 -0
- package/src/generated/react-component-lib/utils/index.tsx +50 -0
- package/src/react-component-lib/attachProps.ts +125 -0
- package/src/react-component-lib/case.ts +7 -0
- package/src/react-component-lib/createComponent.tsx +106 -0
- package/src/react-component-lib/createOverlayComponent.tsx +142 -0
- package/src/react-component-lib/dev.ts +14 -0
- package/src/react-component-lib/index.tsx +50 -0
- package/src/react-component-lib/interfaces.ts +34 -0
- package/src/react-component-lib/utils/attachProps.ts +125 -0
- package/src/react-component-lib/utils/case.ts +7 -0
- package/src/react-component-lib/utils/index.tsx +50 -0
- package/tsconfig.json +17 -0
- package/tsconfig.lib.json +23 -0
- package/analytics-44b1416b.esm.js +0 -55
- package/arrow-diagonal-black-8f0494c3.esm.js +0 -3
- package/arrow-right-9322ba8a.esm.js +0 -5
- package/bluesky-cc5edd2d.esm.js +0 -14
- package/bookmark-c200037c.esm.js +0 -16
- package/chevron-down-6144c823.esm.js +0 -12
- package/chevron-left-ca6c66e1.esm.js +0 -11
- package/chevron-right-b88ed2d4.esm.js +0 -5
- package/chevron-up-c66bd477.esm.js +0 -12
- package/close-87fc0d63.esm.js +0 -5
- package/color-2554aad6.esm.js +0 -122
- package/color-primary-palette_6.entry.esm.js +0 -778
- package/components-section.entry.esm.js +0 -165
- package/copy-03b72cb6.esm.js +0 -5
- package/correct-use-of-colors.entry.esm.js +0 -243
- package/docs-palettes.entry.esm.js +0 -29
- package/docs-tokens.entry.esm.js +0 -45
- package/eds-accordion.entry.esm.js +0 -132
- package/eds-alert.entry.esm.js +0 -112
- package/eds-app-root.entry.esm.js +0 -53
- package/eds-avatar_26.entry.esm.js +0 -306
- package/eds-card-desc_2.entry.esm.js +0 -86
- package/eds-card-generic.entry.esm.js +0 -114
- package/eds-card-project.entry.esm.js +0 -93
- package/eds-card-section.entry.esm.js +0 -56
- package/eds-card-tags.entry.esm.js +0 -27
- package/eds-card-tool.entry.esm.js +0 -105
- package/eds-card-wrapper.entry.esm.js +0 -39
- package/eds-code-block.entry.esm.js +0 -2290
- package/eds-cookies-preference.entry.esm.js +0 -47
- package/eds-feedback.entry.esm.js +0 -82
- package/eds-frame.entry.esm.js +0 -112
- package/eds-icon-arrow-diagonal.entry.esm.js +0 -21
- package/eds-icon-arrow-right.entry.esm.js +0 -21
- package/eds-icon-bluesky.entry.esm.js +0 -21
- package/eds-icon-bookmark.entry.esm.js +0 -21
- package/eds-icon-chevron-down.entry.esm.js +0 -21
- package/eds-icon-chevron-left.entry.esm.js +0 -21
- package/eds-icon-chevron-right.entry.esm.js +0 -21
- package/eds-icon-chevron-up.entry.esm.js +0 -21
- package/eds-icon-close.entry.esm.js +0 -21
- package/eds-icon-copy.entry.esm.js +0 -21
- package/eds-icon-eu.entry.esm.js +0 -21
- package/eds-icon-external.entry.esm.js +0 -21
- package/eds-icon-facebook.entry.esm.js +0 -21
- package/eds-icon-gitlab.entry.esm.js +0 -21
- package/eds-icon-linkedin.entry.esm.js +0 -21
- package/eds-icon-loader.entry.esm.js +0 -21
- package/eds-icon-mastodon.entry.esm.js +0 -21
- package/eds-icon-menu.entry.esm.js +0 -21
- package/eds-icon-minus.entry.esm.js +0 -21
- package/eds-icon-more.entry.esm.js +0 -21
- package/eds-icon-paper.entry.esm.js +0 -21
- package/eds-icon-plus.entry.esm.js +0 -21
- package/eds-icon-portal.entry.esm.js +0 -21
- package/eds-icon-private.entry.esm.js +0 -21
- package/eds-icon-public.entry.esm.js +0 -21
- package/eds-icon-search.entry.esm.js +0 -21
- package/eds-icon-star.entry.esm.js +0 -21
- package/eds-icon-success.entry.esm.js +0 -21
- package/eds-icon-thumbs-down.entry.esm.js +0 -21
- package/eds-icon-thumbs-up.entry.esm.js +0 -21
- package/eds-icon-tutorial.entry.esm.js +0 -21
- package/eds-icon-twitter.entry.esm.js +0 -21
- package/eds-icon-unknown.entry.esm.js +0 -21
- package/eds-icon-updown.entry.esm.js +0 -21
- package/eds-icon-user.entry.esm.js +0 -21
- package/eds-icon-youtube.entry.esm.js +0 -21
- package/eds-login_2.entry.esm.js +0 -1828
- package/eds-matomo-notice.entry.esm.js +0 -162
- package/eds-modal.entry.esm.js +0 -142
- package/eds-pagination_2.entry.esm.js +0 -493
- package/eds-progress-bar.entry.esm.js +0 -41
- package/eds-rating.entry.esm.js +0 -79
- package/eds-section-core_2.entry.esm.js +0 -69
- package/eds-spinner.entry.esm.js +0 -67
- package/eds-switch.entry.esm.js +0 -58
- package/eds-tabs.entry.esm.js +0 -143
- package/eds-timeline.entry.esm.js +0 -117
- package/eds-toast-manager.entry.esm.js +0 -62
- package/eds-toast.entry.esm.js +0 -92
- package/eds-tooltip.entry.esm.js +0 -125
- package/eds-trl.entry.esm.js +0 -68
- package/eu-9ddde93a.esm.js +0 -30
- package/facebook-9cb5c17f.esm.js +0 -14
- package/incorrect-use-of-colors.entry.esm.js +0 -71
- package/index-39c58238.esm.js +0 -58
- package/index.esm.d.ts +0 -1
- package/index.esm.js +0 -4
- package/index.esm2.js +0 -4836
- package/linkedin-e8650abb.esm.js +0 -28
- package/loader-c9628637.esm.js +0 -30
- package/logo-color-7f1fd803.esm.js +0 -115
- package/logo-color-margins-ff8ce71b.esm.js +0 -118
- package/logo-space.entry.esm.js +0 -48
- package/logo-variations-horizontal_2.entry.esm.js +0 -123
- package/logo-variations-tabs.entry.esm.js +0 -29
- package/logo-white-no-bg-f382f86f.esm.js +0 -1021
- package/logo-wrong-usage.entry.esm.js +0 -101
- package/mastodon-3703ec61.esm.js +0 -14
- package/menu-340ea948.esm.js +0 -11
- package/minus-b30a7c71.esm.js +0 -11
- package/mono-53f70232.esm.js +0 -11
- package/more-4449d549.esm.js +0 -13
- package/paper-8e74ea31.esm.js +0 -15
- package/plus-89c07be2.esm.js +0 -12
- package/portal-d6c8ce56.esm.js +0 -18
- package/private-1c25ff8e.esm.js +0 -25
- package/public-d4d8c585.esm.js +0 -16
- package/search-fbcd79c2.esm.js +0 -12
- package/sharedUtils-a550989c.esm.js +0 -17
- package/src/components.d.ts +0 -40
- package/src/generated/components.d.ts +0 -38
- package/src/generated/react-component-lib/attachProps.d.ts +0 -16
- package/src/generated/react-component-lib/case.d.ts +0 -2
- package/src/generated/react-component-lib/createComponent.d.ts +0 -10
- package/src/generated/react-component-lib/createOverlayComponent.d.ts +0 -21
- package/src/generated/react-component-lib/dev.d.ts +0 -2
- package/src/generated/react-component-lib/interfaces.d.ts +0 -29
- package/src/generated/react-component-lib/utils/attachProps.d.ts +0 -16
- package/src/generated/react-component-lib/utils/case.d.ts +0 -2
- package/src/generated/react-component-lib/utils/dev.d.ts +0 -2
- package/src/generated/react-component-lib/utils/index.d.ts +0 -10
- package/src/react-component-lib/attachProps.d.ts +0 -16
- package/src/react-component-lib/case.d.ts +0 -2
- package/src/react-component-lib/createComponent.d.ts +0 -10
- package/src/react-component-lib/createOverlayComponent.d.ts +0 -21
- package/src/react-component-lib/dev.d.ts +0 -2
- package/src/react-component-lib/interfaces.d.ts +0 -29
- package/src/react-component-lib/utils/attachProps.d.ts +0 -16
- package/src/react-component-lib/utils/case.d.ts +0 -2
- package/src/react-component-lib/utils/index.d.ts +0 -10
- package/star-0da9b5e9.esm.js +0 -5
- package/success-443809da.esm.js +0 -18
- package/svg-repository.entry.esm.js +0 -337
- package/thumbs-down-a18fd049.esm.js +0 -5
- package/thumbs-up-c19a71bc.esm.js +0 -6
- package/toastManager-d9eee791.esm.js +0 -34
- package/token-list_3.entry.esm.js +0 -385
- package/token-ratios.entry.esm.js +0 -49
- package/token-typography.entry.esm.js +0 -267
- package/tutotial-150ee1fd.esm.js +0 -27
- package/twitter-ac21b505.esm.js +0 -14
- package/unknown-ed01a24c.esm.js +0 -22
- package/up-and-down-d747abee.esm.js +0 -12
- package/user-71ebdc15.esm.js +0 -16
- package/youtube-efbfbdc4.esm.js +0 -14
- /package/src/generated/react-component-lib/{index.d.ts → index.ts} +0 -0
- /package/src/{index.d.ts → index.ts} +0 -0
- /package/src/react-component-lib/{index.d.ts → index.ts} +0 -0
|
@@ -1,493 +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 { p as parseData } from './sharedUtils-a550989c.esm.js';
|
|
4
|
-
import 'react';
|
|
5
|
-
import 'react/jsx-runtime';
|
|
6
|
-
import 'react-dom';
|
|
7
|
-
|
|
8
|
-
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}}";
|
|
9
|
-
const EdsPaginationStyle0 = edsPaginationCss;
|
|
10
|
-
const EdsPagination = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
registerInstance(this, hostRef);
|
|
13
|
-
this.currentPage = undefined;
|
|
14
|
-
this.lastPage = undefined;
|
|
15
|
-
this.perPage = 10;
|
|
16
|
-
this.total = 0;
|
|
17
|
-
this.url = '';
|
|
18
|
-
this.mode = 'default';
|
|
19
|
-
this.prevLabel = 'Prev';
|
|
20
|
-
this.nextLabel = 'Next';
|
|
21
|
-
this.prevUrl = '';
|
|
22
|
-
this.nextUrl = '';
|
|
23
|
-
this.links = [];
|
|
24
|
-
}
|
|
25
|
-
/** Lifecycle hook to generate pagination links on component load */
|
|
26
|
-
componentWillLoad() {
|
|
27
|
-
if (this.mode === 'default') {
|
|
28
|
-
this.generateLinks();
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
componentDidLoad() {
|
|
32
|
-
// Emit context for each eds-link element after the component is fully loaded
|
|
33
|
-
const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
|
|
34
|
-
links.forEach(lnk => {
|
|
35
|
-
this.emitContext(lnk);
|
|
36
|
-
});
|
|
37
|
-
/*if (links.length > 0) {
|
|
38
|
-
// Emit context for the first link
|
|
39
|
-
this.emitContext(links[0]);
|
|
40
|
-
// Emit context for the last link, if it's different from the first
|
|
41
|
-
if (links.length > 1) {
|
|
42
|
-
this.emitContext(links[links.length - 1]);
|
|
43
|
-
}
|
|
44
|
-
}*/
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* Emits a custom event called `parentContext` for a given link element.
|
|
48
|
-
* This event provides context information about the breadcrumb component.
|
|
49
|
-
*
|
|
50
|
-
* @param linkElement - The link element to which the event will be dispatched.
|
|
51
|
-
*/
|
|
52
|
-
emitContext(linkElement) {
|
|
53
|
-
const event = new CustomEvent('parentContext', {
|
|
54
|
-
detail: {
|
|
55
|
-
componentName: this.hostEl.tagName.toLowerCase(),
|
|
56
|
-
identifier: null
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
linkElement.dispatchEvent(event);
|
|
60
|
-
}
|
|
61
|
-
onPageOrLastPageChange() {
|
|
62
|
-
if (this.mode === 'default') {
|
|
63
|
-
this.generateLinks();
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* Checks if the current page is the first page
|
|
68
|
-
* @returns {boolean} - true if current page is the first page
|
|
69
|
-
*/
|
|
70
|
-
isFirstPage() {
|
|
71
|
-
return this.currentPage === 1;
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* Checks if the current page is the last page
|
|
75
|
-
* @returns {boolean} - true if current page is the last page
|
|
76
|
-
*/
|
|
77
|
-
isLastPage() {
|
|
78
|
-
return this.currentPage === this.lastPage;
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* Generates a pagination link object
|
|
82
|
-
* @param {number} page - Page number for the link
|
|
83
|
-
* @returns {Link} - Link object with page details
|
|
84
|
-
*/
|
|
85
|
-
generateLink(page) {
|
|
86
|
-
const urlHasQuery = this.url.includes('?');
|
|
87
|
-
return {
|
|
88
|
-
ariaLabel: `Page ${page}`,
|
|
89
|
-
url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
|
|
90
|
-
label: page.toString(),
|
|
91
|
-
current: this.currentPage === page,
|
|
92
|
-
disabled: false
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
/** Generates pagination links based on the last page and current page */
|
|
96
|
-
generateLinks() {
|
|
97
|
-
if (this.lastPage && this.lastPage > 5) {
|
|
98
|
-
this.links = this.getPaginationGenerator(this.currentPage || 1, this.lastPage).map(page => typeof page === 'number' ? this.generateLink(page) : page);
|
|
99
|
-
} else if (this.lastPage) {
|
|
100
|
-
this.links = Array.from({
|
|
101
|
-
length: this.lastPage
|
|
102
|
-
}).map((_, i) => this.generateLink(i + 1));
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* Creates a pagination range based on delta, current, and total pages
|
|
107
|
-
* @param {number} current - Current page number
|
|
108
|
-
* @param {number} total - Total number of pages
|
|
109
|
-
* @param {number} delta - Range of pages to display around the current page
|
|
110
|
-
* @returns {(number | string)[]} - Range of page numbers or ellipses
|
|
111
|
-
*/
|
|
112
|
-
getPaginationGenerator(current, total) {
|
|
113
|
-
const delta = 1; // Show one page before and one after the current page
|
|
114
|
-
const range = [];
|
|
115
|
-
if (total <= 5) {
|
|
116
|
-
// If total pages are 5 or less, show all pages
|
|
117
|
-
for (let i = 1; i <= total; i++) {
|
|
118
|
-
range.push(i);
|
|
119
|
-
}
|
|
120
|
-
} else {
|
|
121
|
-
// Always show the first page
|
|
122
|
-
range.push(1);
|
|
123
|
-
// Add ellipsis if there’s a gap between the first page and the current range start
|
|
124
|
-
if (current - delta > 2) {
|
|
125
|
-
range.push('...');
|
|
126
|
-
}
|
|
127
|
-
// Determine range for pages around the current page
|
|
128
|
-
for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
|
|
129
|
-
range.push(i);
|
|
130
|
-
}
|
|
131
|
-
// Add ellipsis if there’s a gap between the current range end and the last page
|
|
132
|
-
if (current + delta < total - 1) {
|
|
133
|
-
range.push('...');
|
|
134
|
-
}
|
|
135
|
-
// Always show the last page
|
|
136
|
-
range.push(total);
|
|
137
|
-
}
|
|
138
|
-
return range;
|
|
139
|
-
}
|
|
140
|
-
/**
|
|
141
|
-
* Formats the current page results information for display
|
|
142
|
-
* @returns {string} - Formatted page result information
|
|
143
|
-
*/
|
|
144
|
-
pageResults() {
|
|
145
|
-
if (this.total > 0) {
|
|
146
|
-
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}`;
|
|
147
|
-
}
|
|
148
|
-
return '';
|
|
149
|
-
}
|
|
150
|
-
/**
|
|
151
|
-
* Handles a page click event, updating the current page and dispatching an event
|
|
152
|
-
* @param {MouseEvent} event - Click event
|
|
153
|
-
* @param {number} newPage - New page number
|
|
154
|
-
*/
|
|
155
|
-
handlePageClick(event, newPage) {
|
|
156
|
-
if (this.mode === 'navigator') {
|
|
157
|
-
return; // No page clicking logic for navigator mode
|
|
158
|
-
}
|
|
159
|
-
event.preventDefault(); // Prevent default link navigation
|
|
160
|
-
if (newPage !== this.currentPage) {
|
|
161
|
-
this.links = this.links.map(link => typeof link === 'object' ? Object.assign(Object.assign({}, link), {
|
|
162
|
-
current: parseInt(link.label) === newPage
|
|
163
|
-
}) : link);
|
|
164
|
-
const pageChangeEvent = new CustomEvent('page', {
|
|
165
|
-
detail: newPage,
|
|
166
|
-
bubbles: true,
|
|
167
|
-
composed: true
|
|
168
|
-
});
|
|
169
|
-
this.hostEl.dispatchEvent(pageChangeEvent);
|
|
170
|
-
this.currentPage = newPage;
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
render() {
|
|
174
|
-
return h("div", {
|
|
175
|
-
key: 'b33415e05457ccc78ea3744a1baa9affbf38ca4a'
|
|
176
|
-
}, this.total > 0 && this.mode === 'default' && h("p", {
|
|
177
|
-
key: 'e555e94a3fd13cf0d57108bd2cca3fb97cd0c688',
|
|
178
|
-
class: "f-ui-03 text-lightest mb-28 w-full text-center"
|
|
179
|
-
}, h("span", {
|
|
180
|
-
key: 'c63f1d5aa6154a23d714c74dcd9a0a75b68df579',
|
|
181
|
-
class: "sr-only"
|
|
182
|
-
}, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
|
|
183
|
-
"aria-label": "Pagination"
|
|
184
|
-
}, h("ul", {
|
|
185
|
-
class: "flex items-center justify-center gap-x-8"
|
|
186
|
-
}, h("li", {
|
|
187
|
-
class: "mr-auto"
|
|
188
|
-
}, h("eds-link", {
|
|
189
|
-
label: this.prevLabel,
|
|
190
|
-
url: this.mode === 'navigator' ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
|
|
191
|
-
: this.isFirstPage() ? '#' : this.generateLink(this.currentPage - 1).url,
|
|
192
|
-
disabled: this.mode === 'navigator' ? !this.prevUrl // Disable if prevUrl is not provided
|
|
193
|
-
: this.isFirstPage(),
|
|
194
|
-
"aria-label": "Previous page",
|
|
195
|
-
icon: "chevron-left",
|
|
196
|
-
"icon-pos": "left",
|
|
197
|
-
size: "small",
|
|
198
|
-
"icon-small": "true",
|
|
199
|
-
intent: "strong",
|
|
200
|
-
"hide-label-on-small-screen": true,
|
|
201
|
-
class: "!p-8 lg:!pr-12",
|
|
202
|
-
onClick: event => {
|
|
203
|
-
if (this.mode === 'default') {
|
|
204
|
-
if (this.isFirstPage()) {
|
|
205
|
-
event.preventDefault(); // Prevent click if disabled
|
|
206
|
-
} else {
|
|
207
|
-
this.handlePageClick(event, (this.currentPage || 1) - 1);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
})), this.mode === 'default' && this.links.map((link, index) => h("li", {
|
|
212
|
-
key: index,
|
|
213
|
-
class: "f-ui-02 flex h-36 items-center justify-center"
|
|
214
|
-
}, typeof link === 'string' ? h("span", {
|
|
215
|
-
class: "flex items-center justify-center"
|
|
216
|
-
}, link) : h("eds-link", {
|
|
217
|
-
url: link.url,
|
|
218
|
-
"aria-label": link.ariaLabel,
|
|
219
|
-
label: link.label,
|
|
220
|
-
current: link.current,
|
|
221
|
-
size: "small",
|
|
222
|
-
class: "!p-8",
|
|
223
|
-
intent: link.current ? 'secondary' : 'ghost',
|
|
224
|
-
onClick: event => this.handlePageClick(event, parseInt(link.label))
|
|
225
|
-
}))), h("li", {
|
|
226
|
-
class: "ml-auto"
|
|
227
|
-
}, h("eds-link", {
|
|
228
|
-
label: this.nextLabel,
|
|
229
|
-
url: this.mode === 'navigator' ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
|
|
230
|
-
: this.isLastPage() ? '#' : this.generateLink(this.currentPage + 1).url,
|
|
231
|
-
disabled: this.mode === 'navigator' ? !this.nextUrl // Disable if nextUrl is not provided
|
|
232
|
-
: this.isLastPage(),
|
|
233
|
-
"aria-label": "Next page",
|
|
234
|
-
size: "small",
|
|
235
|
-
"icon-small": "true",
|
|
236
|
-
icon: "chevron-right",
|
|
237
|
-
intent: "strong",
|
|
238
|
-
"hide-label-on-small-screen": true,
|
|
239
|
-
class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors",
|
|
240
|
-
onClick: event => {
|
|
241
|
-
if (this.mode === 'default') {
|
|
242
|
-
if (this.isLastPage()) {
|
|
243
|
-
event.preventDefault(); // Prevent click if disabled
|
|
244
|
-
} else {
|
|
245
|
-
this.handlePageClick(event, (this.currentPage || 1) + 1);
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
})))) : null);
|
|
250
|
-
}
|
|
251
|
-
get hostEl() {
|
|
252
|
-
return getElement(this);
|
|
253
|
-
}
|
|
254
|
-
static get watchers() {
|
|
255
|
-
return {
|
|
256
|
-
"currentPage": ["onPageOrLastPageChange"],
|
|
257
|
-
"lastPage": ["onPageOrLastPageChange"]
|
|
258
|
-
};
|
|
259
|
-
}
|
|
260
|
-
};
|
|
261
|
-
EdsPagination.style = EdsPaginationStyle0;
|
|
262
|
-
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}";
|
|
263
|
-
const EdsTableStyle0 = edsTableCss;
|
|
264
|
-
const EdsTable = class {
|
|
265
|
-
constructor(hostRef) {
|
|
266
|
-
registerInstance(this, hostRef);
|
|
267
|
-
this.handleResize = () => {
|
|
268
|
-
this.updateContainerWidth();
|
|
269
|
-
};
|
|
270
|
-
this.data = null;
|
|
271
|
-
this.endpoint = null;
|
|
272
|
-
this.config = {};
|
|
273
|
-
this.rowsPerPage = 10;
|
|
274
|
-
this.paginationEnabled = true;
|
|
275
|
-
this.searchEnabled = false;
|
|
276
|
-
this.hostWidth = undefined;
|
|
277
|
-
this.columnSize = 'default';
|
|
278
|
-
this.tbData = [];
|
|
279
|
-
this.columns = [];
|
|
280
|
-
this.currentPage = 1;
|
|
281
|
-
this.parsedConfig = {};
|
|
282
|
-
this.totalRows = 0;
|
|
283
|
-
this.searchQuery = '';
|
|
284
|
-
this.containerWidth = 0;
|
|
285
|
-
}
|
|
286
|
-
handleDataChange() {
|
|
287
|
-
this.parseData();
|
|
288
|
-
}
|
|
289
|
-
handleConfigChange() {
|
|
290
|
-
this.parseConfig();
|
|
291
|
-
}
|
|
292
|
-
componentWillLoad() {
|
|
293
|
-
this.parseConfig();
|
|
294
|
-
this.data ? this.parseData() : this.endpoint && this.fetchData();
|
|
295
|
-
}
|
|
296
|
-
componentDidLoad() {
|
|
297
|
-
this.updateContainerWidth();
|
|
298
|
-
window.addEventListener('resize', this.handleResize);
|
|
299
|
-
this.setupPaginationListener();
|
|
300
|
-
}
|
|
301
|
-
componentDidUpdate() {
|
|
302
|
-
this.setupPaginationListener();
|
|
303
|
-
}
|
|
304
|
-
disconnectedCallback() {
|
|
305
|
-
window.removeEventListener('resize', this.handleResize);
|
|
306
|
-
}
|
|
307
|
-
updateContainerWidth() {
|
|
308
|
-
// Use hostWidth prop if provided; otherwise, measure parent element
|
|
309
|
-
if (this.hostWidth && this.hostWidth.trim() !== '') {
|
|
310
|
-
this.containerWidth = Number(this.hostWidth);
|
|
311
|
-
} else if (this.hostEl.parentElement instanceof HTMLElement) {
|
|
312
|
-
this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
|
|
313
|
-
} else {
|
|
314
|
-
this.containerWidth = 400;
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
parseData() {
|
|
318
|
-
try {
|
|
319
|
-
this.tbData = parseData(this.data);
|
|
320
|
-
//this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
|
|
321
|
-
this.totalRows = this.tbData.length;
|
|
322
|
-
this.updateColumns();
|
|
323
|
-
this.currentPage = 1;
|
|
324
|
-
} catch (error) {
|
|
325
|
-
// eslint-disable-next-line
|
|
326
|
-
console.error('Failed to parse data:', error);
|
|
327
|
-
this.tbData = [];
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
parseConfig() {
|
|
331
|
-
try {
|
|
332
|
-
//this.parsedConfig = parseData(this.config);
|
|
333
|
-
this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
|
|
334
|
-
} catch (error) {
|
|
335
|
-
// eslint-disable-next-line
|
|
336
|
-
console.error('Failed to parse config:', error);
|
|
337
|
-
this.parsedConfig = {};
|
|
338
|
-
}
|
|
339
|
-
}
|
|
340
|
-
async fetchData() {
|
|
341
|
-
try {
|
|
342
|
-
const response = await fetch(this.endpoint);
|
|
343
|
-
const data = await response.json();
|
|
344
|
-
this.data = data;
|
|
345
|
-
} catch (error) {
|
|
346
|
-
// eslint-disable-next-line
|
|
347
|
-
console.error('Failed to fetch data:', error);
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
setupPaginationListener() {
|
|
351
|
-
if (!this.shouldEnablePagination()) {
|
|
352
|
-
return;
|
|
353
|
-
}
|
|
354
|
-
const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
|
|
355
|
-
if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
|
|
356
|
-
paginationEl.addEventListener('page', event => this.handlePageChange(event.detail));
|
|
357
|
-
paginationEl.setAttribute('listener-attached', 'true');
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
getFilteredRows() {
|
|
361
|
-
return this.tbData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
|
|
362
|
-
}
|
|
363
|
-
getPaginatedRows() {
|
|
364
|
-
const filteredRows = this.getFilteredRows();
|
|
365
|
-
this.totalRows = filteredRows.length;
|
|
366
|
-
const start = (this.currentPage - 1) * this.rowsPerPage;
|
|
367
|
-
return filteredRows.slice(start, start + this.rowsPerPage);
|
|
368
|
-
}
|
|
369
|
-
handlePageChange(newPage) {
|
|
370
|
-
this.currentPage = newPage;
|
|
371
|
-
sendAnalytics({
|
|
372
|
-
category: 'ui-component',
|
|
373
|
-
parentContext: null,
|
|
374
|
-
tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
|
|
375
|
-
name: `${newPage}` || '',
|
|
376
|
-
action: 'page'
|
|
377
|
-
});
|
|
378
|
-
}
|
|
379
|
-
handleSearch(event) {
|
|
380
|
-
this.searchQuery = event.target.value;
|
|
381
|
-
this.currentPage = 1;
|
|
382
|
-
/*sendAnalytics({
|
|
383
|
-
category: 'ui-component',
|
|
384
|
-
parentContext: null,
|
|
385
|
-
tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
|
|
386
|
-
name: `${this.searchQuery}` || '',
|
|
387
|
-
action: 'page'
|
|
388
|
-
});*/
|
|
389
|
-
}
|
|
390
|
-
renderCell(value, column) {
|
|
391
|
-
var _a;
|
|
392
|
-
const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
|
|
393
|
-
return format === 'uppercase' ? value === null || value === void 0 ? void 0 : value.toString().toUpperCase() : format === 'svg' ? h("div", {
|
|
394
|
-
innerHTML: value
|
|
395
|
-
}) : format === 'bold' ? h("strong", null, value) : format === 'code' ? h("code", null, value) : value;
|
|
396
|
-
}
|
|
397
|
-
shouldEnablePagination() {
|
|
398
|
-
return this.paginationEnabled && this.totalRows > this.rowsPerPage;
|
|
399
|
-
}
|
|
400
|
-
updateColumns() {
|
|
401
|
-
this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
|
|
402
|
-
}
|
|
403
|
-
getVisibleColumnsCount() {
|
|
404
|
-
return this.columns.filter(column => {
|
|
405
|
-
var _a;
|
|
406
|
-
return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden);
|
|
407
|
-
}).length;
|
|
408
|
-
}
|
|
409
|
-
divisionFactor() {
|
|
410
|
-
let divisionFactor = 1;
|
|
411
|
-
if (this.columnSize === 'medium') {
|
|
412
|
-
divisionFactor = 2;
|
|
413
|
-
} else if (this.columnSize === 'large') {
|
|
414
|
-
divisionFactor = 4;
|
|
415
|
-
}
|
|
416
|
-
return divisionFactor;
|
|
417
|
-
}
|
|
418
|
-
render() {
|
|
419
|
-
// Use containerWidth state that is updated on resize.
|
|
420
|
-
const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
|
|
421
|
-
// Calculate the number of visible columns and the column width.
|
|
422
|
-
const visibleColumnsCount = this.getVisibleColumnsCount();
|
|
423
|
-
const columnWidth = visibleColumnsCount > 0 ? Math.floor(currentContainerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
|
|
424
|
-
const paginatedRows = this.getPaginatedRows();
|
|
425
|
-
const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
|
|
426
|
-
return h("div", {
|
|
427
|
-
key: '43add2309d8e2c85c98676709cd87fc07e4de017'
|
|
428
|
-
}, this.searchEnabled && h("div", {
|
|
429
|
-
key: '1213d8aaa8a2402bd1705e03375d17f570877d5e'
|
|
430
|
-
}, h("eds-input-field", {
|
|
431
|
-
key: 1,
|
|
432
|
-
name: "search",
|
|
433
|
-
"aria-label": "Search",
|
|
434
|
-
type: "text",
|
|
435
|
-
placeholder: "Search...",
|
|
436
|
-
// @ts-ignore
|
|
437
|
-
onInput: event => this.handleSearch(event)
|
|
438
|
-
})), h("div", {
|
|
439
|
-
key: 'a2ec6392ed99a527e4de46a9018bc1ea9b383ecb',
|
|
440
|
-
class: "mt-20"
|
|
441
|
-
}, h("table", {
|
|
442
|
-
key: 'ef79ce872f0cb1439dd6a7987f24cac005ac23ea',
|
|
443
|
-
class: "block overflow-x-auto mt-6 p-0"
|
|
444
|
-
}, h("thead", {
|
|
445
|
-
key: '0853a09e45f748b4bc85e319cbb08efd97426617'
|
|
446
|
-
}, h("tr", {
|
|
447
|
-
key: '64e114ae3661a027e9ab744ba45801d98f2faee9',
|
|
448
|
-
class: "m-0 p-0 border border-softer even:bg-inverse-softer"
|
|
449
|
-
}, this.columns.map(column => {
|
|
450
|
-
var _a;
|
|
451
|
-
return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("th", {
|
|
452
|
-
class: "m-0 py-8 border border-softer f-ui-02 break-words",
|
|
453
|
-
style: {
|
|
454
|
-
minWidth: `${columnWidth - 4}px`
|
|
455
|
-
}
|
|
456
|
-
}, column);
|
|
457
|
-
}))), h("tbody", {
|
|
458
|
-
key: '1afd468551bab11221bbfc70d0f19f4e105e7432'
|
|
459
|
-
}, paginatedRows.map(row => h("tr", {
|
|
460
|
-
class: "m-0 p-0 border border-softer even:bg-inverse-softer"
|
|
461
|
-
}, this.columns.map(column => {
|
|
462
|
-
var _a;
|
|
463
|
-
return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("td", {
|
|
464
|
-
class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
|
|
465
|
-
style: {
|
|
466
|
-
minWidth: `${columnWidth - 4}px`
|
|
467
|
-
}
|
|
468
|
-
}, this.renderCell(row[column], column));
|
|
469
|
-
})))))), this.shouldEnablePagination() && h("div", {
|
|
470
|
-
key: 'c415ded700580eec2464a72a1659bd8be5bcacb3',
|
|
471
|
-
class: "mt-20"
|
|
472
|
-
}, h("eds-pagination", {
|
|
473
|
-
key: '81088574b7c7fd254e07761ceed6cd1d69c2f2ed',
|
|
474
|
-
currentPage: this.currentPage,
|
|
475
|
-
lastPage: lastPage,
|
|
476
|
-
perPage: this.rowsPerPage,
|
|
477
|
-
total: this.totalRows,
|
|
478
|
-
mode: "default"
|
|
479
|
-
})));
|
|
480
|
-
}
|
|
481
|
-
get hostEl() {
|
|
482
|
-
return getElement(this);
|
|
483
|
-
}
|
|
484
|
-
static get watchers() {
|
|
485
|
-
return {
|
|
486
|
-
"data": ["handleDataChange", "parseData"],
|
|
487
|
-
"config": ["handleConfigChange"]
|
|
488
|
-
};
|
|
489
|
-
}
|
|
490
|
-
};
|
|
491
|
-
EdsTable.style = EdsTableStyle0;
|
|
492
|
-
|
|
493
|
-
export { EdsPagination as eds_pagination, EdsTable as eds_table };
|
|
@@ -1,41 +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 edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}";
|
|
7
|
-
const EdsProgressBarStyle0 = edsProgressBarCss;
|
|
8
|
-
const EdsProgressBar = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
11
|
-
this.value = 0;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* Method to update the progress value externally.
|
|
15
|
-
* @param newValue The new progress value (0-100).
|
|
16
|
-
*/
|
|
17
|
-
async updateValue(newValue) {
|
|
18
|
-
this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
|
|
19
|
-
}
|
|
20
|
-
render() {
|
|
21
|
-
const progressValue = this.value;
|
|
22
|
-
return h("div", {
|
|
23
|
-
key: '9a7fa42058034305b22818d464e7b633d7831d67',
|
|
24
|
-
role: "progressbar",
|
|
25
|
-
"aria-valuemin": "0",
|
|
26
|
-
"aria-valuemax": "100",
|
|
27
|
-
"aria-valuenow": progressValue,
|
|
28
|
-
"aria-valuetext": `${progressValue}%`,
|
|
29
|
-
class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden"
|
|
30
|
-
}, h("div", {
|
|
31
|
-
key: '90b0ac9a538b575a30163c0dbbf437e1cfe8ce39',
|
|
32
|
-
class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`,
|
|
33
|
-
style: {
|
|
34
|
-
width: `${progressValue}%`
|
|
35
|
-
}
|
|
36
|
-
}, progressValue, "%"));
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
EdsProgressBar.style = EdsProgressBarStyle0;
|
|
40
|
-
|
|
41
|
-
export { EdsProgressBar as eds_progress_bar };
|
package/eds-rating.entry.esm.js
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
|
|
2
|
-
import 'react';
|
|
3
|
-
import 'react/jsx-runtime';
|
|
4
|
-
import 'react-dom';
|
|
5
|
-
|
|
6
|
-
const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
|
|
7
|
-
const EdsRatingStyle0 = edsRatingCss;
|
|
8
|
-
const EdsRating = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
11
|
-
this.rating = createEvent(this, "rating", 7);
|
|
12
|
-
this.ratingType = 'star';
|
|
13
|
-
this.ratingCount = 5;
|
|
14
|
-
this.selectedRating = 0;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Lifecycle method that runs when the component has fully loaded.
|
|
18
|
-
* It emits a custom event for each `eds-button` element contained within the breadcrumb.
|
|
19
|
-
*/
|
|
20
|
-
componentDidLoad() {
|
|
21
|
-
const btns = this.el.shadowRoot.querySelectorAll('eds-button');
|
|
22
|
-
btns.forEach(btn => {
|
|
23
|
-
this.emitContext(btn);
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Emits a custom event called `parentContext` for a given link element.
|
|
28
|
-
* This event provides context information about the breadcrumb component.
|
|
29
|
-
*
|
|
30
|
-
* @param btnElement - The link element to which the event will be dispatched.
|
|
31
|
-
*/
|
|
32
|
-
emitContext(btnElement) {
|
|
33
|
-
const event = new CustomEvent('parentContext', {
|
|
34
|
-
detail: {
|
|
35
|
-
componentName: this.el.tagName.toLowerCase(),
|
|
36
|
-
identifier: this.selectedRating
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
btnElement.dispatchEvent(event);
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* Handles the click event on a star.
|
|
43
|
-
* @param rating - The selected rating value.
|
|
44
|
-
*/
|
|
45
|
-
handleClick(rating) {
|
|
46
|
-
this.selectedRating = rating;
|
|
47
|
-
this.rating.emit(rating);
|
|
48
|
-
}
|
|
49
|
-
render() {
|
|
50
|
-
return h("div", {
|
|
51
|
-
key: '2ab4f3dbc4cc3dd5272143e99c67b23086b03e18',
|
|
52
|
-
role: "radiogroup",
|
|
53
|
-
class: "stars flex space-x-1 my-8"
|
|
54
|
-
}, Array.from({
|
|
55
|
-
length: this.ratingCount
|
|
56
|
-
}, (_, index) => {
|
|
57
|
-
const starRating = index + 1;
|
|
58
|
-
const isSelected = starRating <= this.selectedRating;
|
|
59
|
-
// Use the mapping text if available; otherwise, fall back to a generic label.
|
|
60
|
-
return h("eds-button", {
|
|
61
|
-
icon: this.ratingType,
|
|
62
|
-
role: "radio",
|
|
63
|
-
"aria-checked": isSelected ? 'true' : 'false',
|
|
64
|
-
"aria-label": this.ratingType,
|
|
65
|
-
onClick: () => this.handleClick(starRating),
|
|
66
|
-
tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1,
|
|
67
|
-
intent: isSelected ? 'primary' : 'ghost',
|
|
68
|
-
size: "large",
|
|
69
|
-
"extra-class": "p-2" // Optional padding or styling for the star button
|
|
70
|
-
});
|
|
71
|
-
}));
|
|
72
|
-
}
|
|
73
|
-
get el() {
|
|
74
|
-
return getElement(this);
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
EdsRating.style = EdsRatingStyle0;
|
|
78
|
-
|
|
79
|
-
export { EdsRating as eds_rating };
|
|
@@ -1,69 +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 edsSectionCoreCss = "";
|
|
7
|
-
const EdsSectionCoreStyle0 = edsSectionCoreCss;
|
|
8
|
-
const EdsSectionCore = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
11
|
-
this.tag = 'section';
|
|
12
|
-
this.sectionTitle = '';
|
|
13
|
-
this.headingLevel = 'h2';
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
const TagType = this.tag; // Set dynamic tag type (div or section)
|
|
17
|
-
return h(TagType, {
|
|
18
|
-
key: '39c4280156ca46b83538de499baa9b152360b1b4'
|
|
19
|
-
}, h("eds-section-heading", {
|
|
20
|
-
key: '34da742e606f0e9bb485faac8aba1519eccc8934',
|
|
21
|
-
headingLevel: this.headingLevel,
|
|
22
|
-
sectionTitle: this.sectionTitle
|
|
23
|
-
}), h("slot", {
|
|
24
|
-
key: '517b8ecc112565e8c6bb0bf85b02525deaa6f9df'
|
|
25
|
-
}));
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
EdsSectionCore.style = EdsSectionCoreStyle0;
|
|
29
|
-
const EdsSectionHeading = class {
|
|
30
|
-
constructor(hostRef) {
|
|
31
|
-
registerInstance(this, hostRef);
|
|
32
|
-
this.sectionTitle = undefined;
|
|
33
|
-
this.withContainer = true;
|
|
34
|
-
this.headingLevel = 'h2';
|
|
35
|
-
this.tag = 'div';
|
|
36
|
-
this.spacingLarge = false;
|
|
37
|
-
}
|
|
38
|
-
getHeadingClass() {
|
|
39
|
-
// Map heading levels to their respective classes
|
|
40
|
-
const headingClasses = {
|
|
41
|
-
h1: 'f-heading-01',
|
|
42
|
-
h2: 'f-heading-02',
|
|
43
|
-
h3: 'f-heading-03',
|
|
44
|
-
h4: 'f-heading-04',
|
|
45
|
-
h5: 'f-heading-05',
|
|
46
|
-
h6: 'f-heading-06'
|
|
47
|
-
};
|
|
48
|
-
// Return the class based on the heading level
|
|
49
|
-
return headingClasses[this.headingLevel];
|
|
50
|
-
}
|
|
51
|
-
render() {
|
|
52
|
-
const TagType = this.tag; // Dynamically set tag type for the container
|
|
53
|
-
const HeadingTag = this.headingLevel; // Dynamically set heading level
|
|
54
|
-
return h(TagType, {
|
|
55
|
-
key: '346654c0118e056276162b42723c6c163712ab4f',
|
|
56
|
-
class: {
|
|
57
|
-
'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
|
|
58
|
-
container: this.withContainer,
|
|
59
|
-
'pt-48': this.spacingLarge,
|
|
60
|
-
'pt-28': !this.spacingLarge
|
|
61
|
-
}
|
|
62
|
-
}, h(HeadingTag, {
|
|
63
|
-
key: 'c7d17fc22b3926495c799da0bc8bde7dc949e46a',
|
|
64
|
-
class: this.getHeadingClass()
|
|
65
|
-
}, this.sectionTitle));
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
export { EdsSectionCore as eds_section_core, EdsSectionHeading as eds_section_heading };
|