@ebrains/react 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components-section.entry.esm.js +1 -1
- package/eds-accordion.entry.esm.js +9 -9
- package/eds-alert.entry.esm.js +2 -2
- package/{eds-avatar_34.entry.esm.js → eds-avatar_28.entry.esm.js} +676 -747
- package/eds-breadcrumb.entry.esm.js +179 -0
- package/eds-card-desc_2.entry.esm.js +85 -0
- package/eds-card-generic.entry.esm.js +114 -0
- package/eds-card-project.entry.esm.js +10 -10
- package/eds-card-tags.entry.esm.js +1 -1
- package/eds-card-tool.entry.esm.js +4 -4
- package/eds-code-block.entry.esm.js +7 -7
- package/eds-gauge.entry.esm.js +78 -0
- 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-bookmark.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-external.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-minus.entry.esm.js +1 -1
- package/eds-icon-more.entry.esm.js +1 -1
- package/eds-icon-paper.entry.esm.js +1 -1
- package/eds-icon-plus.entry.esm.js +1 -1
- package/eds-icon-portal.entry.esm.js +1 -1
- package/eds-icon-private.entry.esm.js +1 -1
- package/eds-icon-public.entry.esm.js +1 -1
- package/eds-icon-search.entry.esm.js +1 -1
- package/eds-icon-star.entry.esm.js +1 -1
- package/eds-icon-success.entry.esm.js +1 -1
- package/eds-icon-thumbs-down.entry.esm.js +1 -1
- package/eds-icon-thumbs-up.entry.esm.js +1 -1
- package/eds-icon-tutorial.entry.esm.js +1 -1
- package/eds-icon-twitter.entry.esm.js +1 -1
- package/eds-icon-unknown.entry.esm.js +1 -1
- package/eds-icon-updown.entry.esm.js +1 -1
- package/eds-icon-user.entry.esm.js +1 -1
- package/eds-icon-youtube.entry.esm.js +1 -1
- package/eds-pie.entry.esm.js +131 -0
- package/eds-progress-bar.entry.esm.js +4 -4
- 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-switch.entry.esm.js +5 -5
- package/eds-tooltip.entry.esm.js +41 -0
- package/index.esm2.js +23 -5
- package/package.json +1 -1
- package/token-spacing.entry.esm.js +93 -0
- package/eds-pagination_2.entry.esm.js +0 -493
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement, c as createEvent
|
|
2
|
-
import { p as parseData } from './sharedUtils-a550989c.esm.js';
|
|
1
|
+
import { r as registerInstance, h, g as getElement, c as createEvent } from './index.esm2.js';
|
|
3
2
|
import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
|
|
4
3
|
import { c as cva } from './index-39c58238.esm.js';
|
|
4
|
+
import { p as parseData } from './sharedUtils-a550989c.esm.js';
|
|
5
5
|
import { h as hLogoColor } from './logo-color-7f1fd803.esm.js';
|
|
6
6
|
import { h as hLogoBlack, a as hLogoColorWhite, b as hLogoWhite, c as hLogoWhiteNoBg, v as vLogoColor, d as vLogoBlack, e as vLogoColorWhite, f as vLogoWhite, g as vLogoWhiteNoBg } from './logo-white-no-bg-f382f86f.esm.js';
|
|
7
7
|
import 'react';
|
|
@@ -54,7 +54,7 @@ const EdsAvatar = class {
|
|
|
54
54
|
*/
|
|
55
55
|
render() {
|
|
56
56
|
return h("div", {
|
|
57
|
-
key: '
|
|
57
|
+
key: 'b7eff7ae1a1dea3509041e39316b49b673dbdf17',
|
|
58
58
|
class: this.containerClasses
|
|
59
59
|
}, this.picture ? h("eds-img", {
|
|
60
60
|
src: this.picture,
|
|
@@ -80,183 +80,12 @@ const EdsBlockBreak = class {
|
|
|
80
80
|
}
|
|
81
81
|
render() {
|
|
82
82
|
return h("hr", {
|
|
83
|
-
key: '
|
|
83
|
+
key: 'b604a776cae7edeee189e00af6993b42b57203f0',
|
|
84
84
|
class: `${this.inverse ? 'border-default' : 'border-softer'} my-16 inline-block w-full border-t-2`
|
|
85
85
|
});
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
EdsBlockBreak.style = EdsBlockBreakStyle0;
|
|
89
|
-
const edsBreadcrumbCss = "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}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";
|
|
90
|
-
const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
|
|
91
|
-
const EdsBreadcrumb = class {
|
|
92
|
-
constructor(hostRef) {
|
|
93
|
-
registerInstance(this, hostRef);
|
|
94
|
-
/**
|
|
95
|
-
* Updates the maximum number of visible items and tracks if the screen is small.
|
|
96
|
-
*/
|
|
97
|
-
this.updateScreenSize = () => {
|
|
98
|
-
const width = window.innerWidth;
|
|
99
|
-
if (width < 769) {
|
|
100
|
-
this.maxVisibleItems = 3;
|
|
101
|
-
} else if (width <= 1024) {
|
|
102
|
-
this.maxVisibleItems = 3;
|
|
103
|
-
} else if (width <= 1280) {
|
|
104
|
-
this.maxVisibleItems = 3;
|
|
105
|
-
} else if (width <= 2200) {
|
|
106
|
-
this.maxVisibleItems = 4;
|
|
107
|
-
} else {
|
|
108
|
-
this.maxVisibleItems = 6;
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
this.items = [];
|
|
112
|
-
this.intent = 'ghost';
|
|
113
|
-
this.parsedItems = [];
|
|
114
|
-
this.isSmallScreen = false;
|
|
115
|
-
this.maxVisibleItems = 6;
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* Watches for changes to the `items` prop and parses it.
|
|
119
|
-
*/
|
|
120
|
-
parseItems(newValue) {
|
|
121
|
-
this.parsedItems = parseData(newValue);
|
|
122
|
-
}
|
|
123
|
-
/**
|
|
124
|
-
* Lifecycle method that runs when the component is about to be loaded.
|
|
125
|
-
* It parses the initial `items` prop value.
|
|
126
|
-
*/
|
|
127
|
-
componentWillLoad() {
|
|
128
|
-
this.parseItems(this.items);
|
|
129
|
-
this.updateScreenSize();
|
|
130
|
-
window.addEventListener('resize', this.updateScreenSize);
|
|
131
|
-
}
|
|
132
|
-
disconnectedCallback() {
|
|
133
|
-
window.removeEventListener('resize', this.updateScreenSize);
|
|
134
|
-
}
|
|
135
|
-
/**
|
|
136
|
-
* Lifecycle method that runs when the component has fully loaded.
|
|
137
|
-
* It emits a custom event for each `eds-link` element contained within the breadcrumb.
|
|
138
|
-
*/
|
|
139
|
-
componentDidLoad() {
|
|
140
|
-
var _a;
|
|
141
|
-
const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
|
|
142
|
-
links === null || links === void 0 ? void 0 : links.forEach(link => {
|
|
143
|
-
this.emitContext(link);
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
/**
|
|
147
|
-
* Emits a custom event called `parentContext` for a given link element.
|
|
148
|
-
* This event provides context information about the breadcrumb component.
|
|
149
|
-
*
|
|
150
|
-
* @param linkElement - The link element to which the event will be dispatched.
|
|
151
|
-
*/
|
|
152
|
-
emitContext(linkElement) {
|
|
153
|
-
const event = new CustomEvent('parentContext', {
|
|
154
|
-
detail: {
|
|
155
|
-
componentName: this.el.tagName.toLowerCase(),
|
|
156
|
-
identifier: null
|
|
157
|
-
}
|
|
158
|
-
});
|
|
159
|
-
linkElement.dispatchEvent(event);
|
|
160
|
-
}
|
|
161
|
-
/**
|
|
162
|
-
* Returns breadcrumb items with potential truncation if there are too many.
|
|
163
|
-
* It inserts an ellipsis item where necessary.
|
|
164
|
-
*/
|
|
165
|
-
getTruncatedItems() {
|
|
166
|
-
const totalItems = this.parsedItems.length;
|
|
167
|
-
const ellipsis = {
|
|
168
|
-
label: '...',
|
|
169
|
-
url: '',
|
|
170
|
-
isHidden: true
|
|
171
|
-
};
|
|
172
|
-
if (totalItems > this.maxVisibleItems) {
|
|
173
|
-
const firstItem = this.parsedItems[0];
|
|
174
|
-
const lastItems = this.parsedItems.slice(-2);
|
|
175
|
-
if (this.maxVisibleItems === 3) {
|
|
176
|
-
return [firstItem, ellipsis, ...lastItems];
|
|
177
|
-
} else if (this.maxVisibleItems === 4) {
|
|
178
|
-
const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
|
|
179
|
-
return [firstItem, middleItem, ellipsis, ...lastItems];
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
return this.parsedItems;
|
|
183
|
-
}
|
|
184
|
-
/**
|
|
185
|
-
* Helper to determine the display label and full label.
|
|
186
|
-
* If the label is longer than 15 characters and the item is not the current (last) item,
|
|
187
|
-
* we display a truncated version but use the full label for aria attributes.
|
|
188
|
-
*/
|
|
189
|
-
getLabels(item, isCurrent) {
|
|
190
|
-
if (!isCurrent && item.label.length > 15) {
|
|
191
|
-
return {
|
|
192
|
-
displayLabel: `${item.label.slice(0, 15)}...`,
|
|
193
|
-
fullLabel: item.label
|
|
194
|
-
};
|
|
195
|
-
}
|
|
196
|
-
return {
|
|
197
|
-
displayLabel: item.label,
|
|
198
|
-
fullLabel: item.label
|
|
199
|
-
};
|
|
200
|
-
}
|
|
201
|
-
/**
|
|
202
|
-
* Render method for the breadcrumb component.
|
|
203
|
-
* It creates a navigation element with an ordered list of breadcrumb links.
|
|
204
|
-
* The last link is marked as the current page.
|
|
205
|
-
*/
|
|
206
|
-
render() {
|
|
207
|
-
const itemsToRender = this.getTruncatedItems();
|
|
208
|
-
return h("nav", {
|
|
209
|
-
key: '2651e18e4c157f49e1da2ef93d4f68b9497118e4',
|
|
210
|
-
"aria-label": "Breadcrumb"
|
|
211
|
-
}, h("ol", {
|
|
212
|
-
key: 'd1f5bb18bb35df9455a4c7a566850d59eb657242',
|
|
213
|
-
class: "flex items-center space-x-2"
|
|
214
|
-
}, itemsToRender.map((item, index) => {
|
|
215
|
-
const isLast = index === itemsToRender.length - 1;
|
|
216
|
-
return h("li", {
|
|
217
|
-
class: "flex items-center"
|
|
218
|
-
}, !item.isHidden ? (() => {
|
|
219
|
-
const {
|
|
220
|
-
fullLabel
|
|
221
|
-
} = this.getLabels(item, isLast);
|
|
222
|
-
const linkIntent = isLast ? this.intent === 'strong' ? 'weak' : this.intent === 'weak' ? 'strong' : this.intent : this.intent;
|
|
223
|
-
return h("eds-link", Object.assign({
|
|
224
|
-
label: fullLabel,
|
|
225
|
-
url: item.url,
|
|
226
|
-
intent: linkIntent,
|
|
227
|
-
disabled: isLast,
|
|
228
|
-
current: isLast,
|
|
229
|
-
"aria-label": fullLabel,
|
|
230
|
-
size: "small",
|
|
231
|
-
"icon-small": "false"
|
|
232
|
-
}, isLast ? {
|
|
233
|
-
'aria-current': 'page'
|
|
234
|
-
} : {}));
|
|
235
|
-
})() : h("eds-link", {
|
|
236
|
-
label: "...",
|
|
237
|
-
url: "#",
|
|
238
|
-
intent: "strong",
|
|
239
|
-
current: false,
|
|
240
|
-
"aria-label": "...",
|
|
241
|
-
size: "small",
|
|
242
|
-
"icon-small": "false",
|
|
243
|
-
icon: "chevron-right"
|
|
244
|
-
}), !isLast && !item.isHidden && h("eds-icon-wrapper", {
|
|
245
|
-
icon: "chevron-right",
|
|
246
|
-
class: "w-20 h-20"
|
|
247
|
-
}));
|
|
248
|
-
})));
|
|
249
|
-
}
|
|
250
|
-
get el() {
|
|
251
|
-
return getElement(this);
|
|
252
|
-
}
|
|
253
|
-
static get watchers() {
|
|
254
|
-
return {
|
|
255
|
-
"items": ["parseItems"]
|
|
256
|
-
};
|
|
257
|
-
}
|
|
258
|
-
};
|
|
259
|
-
EdsBreadcrumb.style = EdsBreadcrumbStyle0;
|
|
260
89
|
const edsButtonCss = "*,\n::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\n 1. Change the font styles in all browsers.\n 2. Remove the margin in Firefox and Safari.\n 3. Remove default padding in all browsers.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-size: 100%;\n font-weight: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n margin: 0;\n padding: 0;\n}\n\n/*\n Remove the inheritance of text transform in Edge and Firefox.\n */\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n 1. Correct the inability to style clickable types in iOS and Safari.\n 2. Remove default button styles.\n */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n}\n\np {\n margin: 0;\n}\n\n/*\n Set the default cursor for buttons.\n */\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\n Make sure disabled buttons don't get the pointer cursor.\n */\n:disabled {\n cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0rem;\n}\n\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n\n.-top-8 {\n top: -0.5rem;\n}\n\n.left-0 {\n left: 0rem;\n}\n\n.left-1\\/2 {\n left: 50%;\n}\n\n.left-4 {\n left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n left: 4px;\n}\n\n.right-0 {\n right: 0rem;\n}\n\n.right-4 {\n right: 0.25rem;\n}\n\n.right-8 {\n right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n right: 6px;\n}\n\n.top-0 {\n top: 0rem;\n}\n\n.top-1\\/2 {\n top: 50%;\n}\n\n.m-0 {\n margin: 0rem;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-16 {\n margin-left: -1rem;\n}\n\n.-mr-16 {\n margin-right: -1rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.ml-4 {\n margin-left: 0.25rem;\n}\n\n.ml-64 {\n margin-left: 4rem;\n}\n\n.ml-8 {\n margin-left: 0.5rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mr-4 {\n margin-right: 0.25rem;\n}\n\n.mr-8 {\n margin-right: 0.5rem;\n}\n\n.mr-auto {\n margin-right: auto;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.hidden {\n display: none;\n}\n\n.h-20 {\n height: 1.25rem;\n}\n\n.h-24 {\n height: 1.5rem;\n}\n\n.h-36 {\n height: 2.25rem;\n}\n\n.h-44 {\n height: 2.75rem;\n}\n\n.h-auto {\n height: auto;\n}\n\n.h-full {\n height: 100%;\n}\n\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n min-height: 100vh;\n}\n\n.w-20 {\n width: 1.25rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.flex-none {\n flex: none;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.overflow-x-auto {\n overflow-x: auto;\n}\n\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.break-words {\n overflow-wrap: break-word;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-lg {\n border-radius: 16px;\n}\n\n.rounded-md {\n border-radius: 12px;\n}\n\n.rounded-pill {\n border-radius: 100px;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xxs {\n border-radius: 2px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.p-12 {\n padding: 0.75rem;\n}\n\n.p-6 {\n padding: 0.375rem;\n}\n\n.p-8 {\n padding: 0.5rem;\n}\n\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pl-4 {\n padding-left: 0.25rem;\n}\n\n.pl-8 {\n padding-left: 0.5rem;\n}\n\n.pr-4 {\n padding-right: 0.25rem;\n}\n\n.pr-8 {\n padding-right: 0.5rem;\n}\n\n.\\!text-current {\n color: currentColor !important;\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-current {\n color: currentColor;\n}\n\n.text-default {\n color: var(--black);\n}\n\n.text-inverse {\n color: var(--white);\n}\n\n.text-lightest {\n color: var(--grey-500);\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n\n.\\@container {\n container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n position: absolute;\n}\n\n.after\\:inset-0::after {\n inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n\n.after\\:left-16::after {\n left: 1rem;\n}\n\n.after\\:right-16::after {\n right: 1rem;\n}\n\n.after\\:z-10::after {\n z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}";
|
|
261
90
|
const EdsButtonStyle0 = edsButtonCss;
|
|
262
91
|
const EdsButton = class {
|
|
@@ -399,20 +228,20 @@ const EdsButton = class {
|
|
|
399
228
|
});
|
|
400
229
|
const ElementType = this.elementType;
|
|
401
230
|
return h(ElementType, {
|
|
402
|
-
key: '
|
|
231
|
+
key: 'ecdd901c70578c07ef094aadbcd287588d4ba705',
|
|
403
232
|
"aria-label": this.label || this.ariaLabel || undefined,
|
|
404
233
|
"aria-disabled": this.elementType === 'button' ? this.disabled : undefined,
|
|
405
234
|
disabled: this.elementType === 'button' ? this.disabled : undefined,
|
|
406
235
|
class: `${classes || ''} ${this.extraClass || ''}`,
|
|
407
236
|
onClick: event => this.handleClick(event)
|
|
408
237
|
}, this.label && h("span", {
|
|
409
|
-
key: '
|
|
238
|
+
key: 'af8d0ca1c5c3e54f9db3066931a69d3a5a812666',
|
|
410
239
|
class: this.loading ? 'opacity-0' : ''
|
|
411
240
|
}, this.label), this.loading && h("span", {
|
|
412
|
-
key: '
|
|
241
|
+
key: '29b72c15e80f46e023f829568f58d8a8dca82b78',
|
|
413
242
|
class: "absolute inset-0 flex items-center justify-center"
|
|
414
243
|
}, h("span", {
|
|
415
|
-
key: '
|
|
244
|
+
key: 'bad8bd059b1312ca3f5ab173b1203eb395e9bbd8',
|
|
416
245
|
class: "loader",
|
|
417
246
|
style: {
|
|
418
247
|
border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
|
|
@@ -431,189 +260,6 @@ const EdsButton = class {
|
|
|
431
260
|
}
|
|
432
261
|
};
|
|
433
262
|
EdsButton.style = EdsButtonStyle0;
|
|
434
|
-
const edsCardDescCss = ".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}";
|
|
435
|
-
const EdsCardDescStyle0 = edsCardDescCss;
|
|
436
|
-
const EdsCardDesc = class {
|
|
437
|
-
constructor(hostRef) {
|
|
438
|
-
registerInstance(this, hostRef);
|
|
439
|
-
this.description = undefined;
|
|
440
|
-
this.truncate = true;
|
|
441
|
-
this.truncateLines = '3';
|
|
442
|
-
}
|
|
443
|
-
getTruncateClass() {
|
|
444
|
-
return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
|
|
445
|
-
}
|
|
446
|
-
render() {
|
|
447
|
-
return h("p", {
|
|
448
|
-
key: 'f2eec4a947de74a1e36bb13fdd2bfeb7a9f711b3',
|
|
449
|
-
class: "text-light f-ui-03-light"
|
|
450
|
-
}, h("span", {
|
|
451
|
-
key: '444ffa34c3e8cac12af2f396144fd182d49c6baa',
|
|
452
|
-
class: this.getTruncateClass()
|
|
453
|
-
}, this.description));
|
|
454
|
-
}
|
|
455
|
-
};
|
|
456
|
-
EdsCardDesc.style = EdsCardDescStyle0;
|
|
457
|
-
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}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}";
|
|
458
|
-
const EdsCardGenericStyle0 = edsCardGenericCss;
|
|
459
|
-
const EdsCardGeneric = class {
|
|
460
|
-
constructor(hostRef) {
|
|
461
|
-
registerInstance(this, hostRef);
|
|
462
|
-
this.parentContext = null; // Accepts the entire event detail or null
|
|
463
|
-
this.cardTitle = undefined;
|
|
464
|
-
this.url = undefined;
|
|
465
|
-
this.description = undefined;
|
|
466
|
-
this.image = undefined;
|
|
467
|
-
this.avatar = undefined;
|
|
468
|
-
this.shortAbbreviation = undefined;
|
|
469
|
-
this.headingLevel = 'h3';
|
|
470
|
-
this.tags = [];
|
|
471
|
-
this.tiny = false;
|
|
472
|
-
this.bg = true;
|
|
473
|
-
this.withHover = true;
|
|
474
|
-
this.hierarchy = true;
|
|
475
|
-
this.parsedImage = null;
|
|
476
|
-
}
|
|
477
|
-
componentWillLoad() {
|
|
478
|
-
if (this.image) {
|
|
479
|
-
try {
|
|
480
|
-
if (typeof this.image === 'object') {
|
|
481
|
-
// If image is already an object, assign it directly
|
|
482
|
-
this.parsedImage = this.image;
|
|
483
|
-
} else if (typeof this.image === 'string') {
|
|
484
|
-
// If image is a string, try to parse it
|
|
485
|
-
this.parsedImage = JSON.parse(this.image);
|
|
486
|
-
}
|
|
487
|
-
} catch (error) {
|
|
488
|
-
// eslint-disable-next-line
|
|
489
|
-
console.error('Error parsing image prop:', error);
|
|
490
|
-
this.parsedImage = {}; // Assign a fallback empty object in case of an error
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
handleParentContext(event) {
|
|
495
|
-
if (event.target !== this.el) {
|
|
496
|
-
// Ignore the event if it's not targeted at this specific instance
|
|
497
|
-
return;
|
|
498
|
-
}
|
|
499
|
-
//console.log(event.detail);
|
|
500
|
-
this.parentContext = event.detail;
|
|
501
|
-
event.stopPropagation();
|
|
502
|
-
}
|
|
503
|
-
/**
|
|
504
|
-
* Parses the `tags` prop into an array of link objects.
|
|
505
|
-
* Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
|
|
506
|
-
*
|
|
507
|
-
* @returns {any[]} Array of parsed link objects
|
|
508
|
-
*/
|
|
509
|
-
get parsedTags() {
|
|
510
|
-
return parseData(this.tags);
|
|
511
|
-
}
|
|
512
|
-
articleClasses() {
|
|
513
|
-
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(' ');
|
|
514
|
-
}
|
|
515
|
-
handleClick() {
|
|
516
|
-
var _a;
|
|
517
|
-
sendAnalytics({
|
|
518
|
-
category: 'ui-component',
|
|
519
|
-
parentContext: this.parentContext,
|
|
520
|
-
tag: this.el.tagName.toLowerCase(),
|
|
521
|
-
name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
|
|
522
|
-
action: 'click'
|
|
523
|
-
});
|
|
524
|
-
}
|
|
525
|
-
render() {
|
|
526
|
-
return h("article", {
|
|
527
|
-
key: '440a448c841370838c0c66610bd1266b46f66541',
|
|
528
|
-
class: this.articleClasses(),
|
|
529
|
-
onClick: () => this.handleClick()
|
|
530
|
-
}, h("eds-card-title", {
|
|
531
|
-
key: '292d93a9a993c6dcbfd276097a21d3984b1794c4',
|
|
532
|
-
"heading-level": this.headingLevel,
|
|
533
|
-
titleClass: this.image ? 'f-ui-01' : undefined,
|
|
534
|
-
"card-title": this.cardTitle,
|
|
535
|
-
url: this.url,
|
|
536
|
-
hierarchy: this.hierarchy
|
|
537
|
-
}), this.description && h("eds-card-desc", {
|
|
538
|
-
key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7',
|
|
539
|
-
class: "mt-8",
|
|
540
|
-
"truncate-lines": "3",
|
|
541
|
-
description: this.description
|
|
542
|
-
}), this.parsedImage ? h("eds-img", Object.assign({
|
|
543
|
-
class: "mt-8 block mx-auto"
|
|
544
|
-
}, this.parsedImage)) : this.avatar || this.shortAbbreviation ? h("eds-avatar", {
|
|
545
|
-
class: "order-first mb-12",
|
|
546
|
-
picture: this.avatar,
|
|
547
|
-
initials: this.shortAbbreviation
|
|
548
|
-
}) : null, h("div", {
|
|
549
|
-
key: '40388913b1abb9308f42469956342efdbb48d508',
|
|
550
|
-
class: "flex flex-wrap gap-y-4 gap-x-1"
|
|
551
|
-
}, this.parsedTags.map((tag, index) => h("eds-tag", {
|
|
552
|
-
key: index,
|
|
553
|
-
intent: tag.style,
|
|
554
|
-
label: tag.label
|
|
555
|
-
}))), ' ');
|
|
556
|
-
}
|
|
557
|
-
get el() {
|
|
558
|
-
return getElement(this);
|
|
559
|
-
}
|
|
560
|
-
};
|
|
561
|
-
EdsCardGeneric.style = EdsCardGenericStyle0;
|
|
562
|
-
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}";
|
|
563
|
-
const EdsCardTitleStyle0 = edsCardTitleCss;
|
|
564
|
-
const EdsCardTitle = class {
|
|
565
|
-
constructor(hostRef) {
|
|
566
|
-
registerInstance(this, hostRef);
|
|
567
|
-
this.url = undefined;
|
|
568
|
-
this.titleClass = undefined;
|
|
569
|
-
this.headingLevel = 'h3';
|
|
570
|
-
this.externalLink = false;
|
|
571
|
-
this.cardTitle = undefined;
|
|
572
|
-
this.hierarchy = true;
|
|
573
|
-
}
|
|
574
|
-
/**
|
|
575
|
-
* Dynamically generate the title class based on the heading level.
|
|
576
|
-
*/
|
|
577
|
-
getTitleClass() {
|
|
578
|
-
const levelMap = this.hierarchy ? {
|
|
579
|
-
h1: '05',
|
|
580
|
-
h2: '05',
|
|
581
|
-
h3: '05',
|
|
582
|
-
h4: '05',
|
|
583
|
-
h5: '05',
|
|
584
|
-
h6: '06'
|
|
585
|
-
} : {
|
|
586
|
-
h1: '01',
|
|
587
|
-
h2: '02',
|
|
588
|
-
h3: '03',
|
|
589
|
-
h4: '04',
|
|
590
|
-
h5: '05',
|
|
591
|
-
h6: '06'
|
|
592
|
-
};
|
|
593
|
-
return `f-heading-${levelMap[this.headingLevel]}`;
|
|
594
|
-
}
|
|
595
|
-
/*private getTag() {
|
|
596
|
-
if (this.url) {
|
|
597
|
-
return 'a';
|
|
598
|
-
}
|
|
599
|
-
return 'span';
|
|
600
|
-
}*/
|
|
601
|
-
render() {
|
|
602
|
-
//const Tag = this.getTag();
|
|
603
|
-
const Heading = this.headingLevel;
|
|
604
|
-
return h(Heading, {
|
|
605
|
-
key: '9914950b1581456a3a875ed7383975710c05fa7f',
|
|
606
|
-
class: this.getTitleClass()
|
|
607
|
-
}, h("a", {
|
|
608
|
-
key: '9b3298d8bacd8fbaecd8c714329ef5e6ac7192c7',
|
|
609
|
-
class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",
|
|
610
|
-
href: this.url,
|
|
611
|
-
target: this.externalLink ? '_blank' : undefined,
|
|
612
|
-
rel: this.externalLink ? 'noopener noreferrer' : undefined
|
|
613
|
-
}, this.cardTitle));
|
|
614
|
-
}
|
|
615
|
-
};
|
|
616
|
-
EdsCardTitle.style = EdsCardTitleStyle0;
|
|
617
263
|
const edsDropdownCss = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}";
|
|
618
264
|
const EdsDropdownStyle0 = edsDropdownCss;
|
|
619
265
|
const EdsDropdown = class {
|
|
@@ -726,11 +372,11 @@ const EdsDropdown = class {
|
|
|
726
372
|
*/
|
|
727
373
|
render() {
|
|
728
374
|
return h("div", {
|
|
729
|
-
key: '
|
|
375
|
+
key: 'eb48745937126e580737c1da6787c3f16c06ba9e',
|
|
730
376
|
class: "z-focus relative",
|
|
731
377
|
ref: el => this.dropdownContent = el
|
|
732
378
|
}, h("eds-button", {
|
|
733
|
-
key: '
|
|
379
|
+
key: '3af6863201b1c25ad66e9f8c52d9e13505d742a3',
|
|
734
380
|
label: this.label,
|
|
735
381
|
"aria-label": this.ariaLabel,
|
|
736
382
|
icon: this.icon,
|
|
@@ -739,7 +385,7 @@ const EdsDropdown = class {
|
|
|
739
385
|
"aria-expanded": this.isOpen.toString(),
|
|
740
386
|
"aria-haspopup": "menu"
|
|
741
387
|
}), h("nav", {
|
|
742
|
-
key: '
|
|
388
|
+
key: 'c225074b3fbee543966523f8cd1c146485bc04bd',
|
|
743
389
|
role: "menu",
|
|
744
390
|
class: {
|
|
745
391
|
'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
|
|
@@ -755,7 +401,7 @@ const EdsDropdown = class {
|
|
|
755
401
|
"aria-label": "Dropdown",
|
|
756
402
|
"aria-hidden": !this.isOpen
|
|
757
403
|
}, h("slot", {
|
|
758
|
-
key: '
|
|
404
|
+
key: '6a7ba94045d366d20c6618845692d977f20437e3'
|
|
759
405
|
})));
|
|
760
406
|
}
|
|
761
407
|
get host() {
|
|
@@ -822,30 +468,30 @@ const EdsFooter = class {
|
|
|
822
468
|
key: 'fa09a0dbccb035b1e4f496aa447aca241bcc2415',
|
|
823
469
|
class: "flex items-center gap-x-12"
|
|
824
470
|
}, h("a", {
|
|
825
|
-
key: '
|
|
471
|
+
key: '578d6a8463e65d07278f8328c108ee266cfba2b8',
|
|
826
472
|
target: "_blank",
|
|
827
473
|
rel: "noopener noreferrer",
|
|
828
474
|
class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0",
|
|
829
|
-
href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-
|
|
830
|
-
"aria-label": "Learn about Horizon
|
|
475
|
+
href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en",
|
|
476
|
+
"aria-label": "Learn about Horizon Europe funding"
|
|
831
477
|
}, h("eds-img", {
|
|
832
|
-
key: '
|
|
478
|
+
key: '5b9e987c2ecf62fb4f44c1faacad7c569a149805',
|
|
833
479
|
width: 54,
|
|
834
480
|
height: 41,
|
|
835
481
|
src: "https://www.ebrains.eu/flags/4x3/eu.svg",
|
|
836
482
|
alt: "European Union Flag"
|
|
837
483
|
}))), h("div", {
|
|
838
|
-
key: '
|
|
484
|
+
key: 'df75949c0718b8fb7dd449a6e7df39d332da366f'
|
|
839
485
|
}, h("div", {
|
|
840
|
-
key: '
|
|
486
|
+
key: 'f83d31b16d0601cd456d5cb72e9fa2adb29a2b66',
|
|
841
487
|
class: "f-ui-04 text-light"
|
|
842
488
|
}, h("p", {
|
|
843
|
-
key: '
|
|
489
|
+
key: 'dcdf09d78ca64c5391d56fe5ed69bab987cbf67b'
|
|
844
490
|
}, this.fundedBy), h("div", {
|
|
845
|
-
key: '
|
|
491
|
+
key: 'af279fb5dfdf0a8f1f85e6ce7446dc3a0eeac397',
|
|
846
492
|
class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block"
|
|
847
493
|
}, h("span", {
|
|
848
|
-
key: '
|
|
494
|
+
key: '026b41fa6162ffb6825ccf98364b4caf64b6457a',
|
|
849
495
|
class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4"
|
|
850
496
|
}, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? h("eds-link", {
|
|
851
497
|
label: this.cookiesPreferences,
|
|
@@ -855,7 +501,7 @@ const EdsFooter = class {
|
|
|
855
501
|
this.toggleCookiesConsent();
|
|
856
502
|
}
|
|
857
503
|
}) : null))), h("div", {
|
|
858
|
-
key: '
|
|
504
|
+
key: '27cb561815d6918567ab8cfa1148019aca8aeda0',
|
|
859
505
|
class: "ml-auto pl-12"
|
|
860
506
|
}, this.enableScrollTop ? h("eds-button", {
|
|
861
507
|
id: "backToTop",
|
|
@@ -1048,6 +694,9 @@ const EdsForm = class {
|
|
|
1048
694
|
this.errors = {};
|
|
1049
695
|
this.parsedFields = [];
|
|
1050
696
|
}
|
|
697
|
+
async setData(newData) {
|
|
698
|
+
this.populateFormWithInitData(newData);
|
|
699
|
+
}
|
|
1051
700
|
componentWillLoad() {
|
|
1052
701
|
this.parseFields(this.fields);
|
|
1053
702
|
// Emit context for each eds-link element after the component is fully loaded
|
|
@@ -1224,6 +873,14 @@ const EdsForm = class {
|
|
|
1224
873
|
// Update the errors state and the hasError flag.
|
|
1225
874
|
this.errors = newErrors;
|
|
1226
875
|
this.hasError = Object.keys(newErrors).length > 0;
|
|
876
|
+
// Emit the updated form state.
|
|
877
|
+
this.form.emit({
|
|
878
|
+
event: 'input',
|
|
879
|
+
field: field.name,
|
|
880
|
+
value: target.type === 'checkbox' ? this.values[field.name] : target.value,
|
|
881
|
+
message: `${field.name} updated`
|
|
882
|
+
//data: this.makeFormData()
|
|
883
|
+
});
|
|
1227
884
|
}
|
|
1228
885
|
handleSubmit() {
|
|
1229
886
|
var _a, _b;
|
|
@@ -1285,14 +942,14 @@ const EdsForm = class {
|
|
|
1285
942
|
const hiddenFields = this.parsedFields.filter(field => field.type === 'hidden');
|
|
1286
943
|
const otherFields = this.parsedFields.filter(field => field.type !== 'hidden');
|
|
1287
944
|
return h("form", {
|
|
1288
|
-
key: '
|
|
945
|
+
key: '1418bbac3ea7c994bf363602e6ddd18ed3c6c661',
|
|
1289
946
|
ref: el => this.formEl = el,
|
|
1290
947
|
autocomplete: "on",
|
|
1291
948
|
onSubmit: this.handleSubmit
|
|
1292
949
|
}, h("div", {
|
|
1293
|
-
key: '
|
|
950
|
+
key: 'ae6f05d50a1c32312e585d55f0b5d64b0dd1fc9c'
|
|
1294
951
|
}, h("slot", {
|
|
1295
|
-
key: '
|
|
952
|
+
key: '09c9ddd0d3b77ae9cbcb54389b799af7a6fc6c9e'
|
|
1296
953
|
}), hiddenFields.map((field, index) => h("eds-input", {
|
|
1297
954
|
key: index,
|
|
1298
955
|
type: "hidden",
|
|
@@ -1326,10 +983,10 @@ const EdsForm = class {
|
|
|
1326
983
|
options: field.options
|
|
1327
984
|
});
|
|
1328
985
|
})), this.formBtn && h("div", {
|
|
1329
|
-
key: '
|
|
986
|
+
key: 'af6ce29d25ae2e7c71537618456308891ff8abf4',
|
|
1330
987
|
class: "mt-20"
|
|
1331
988
|
}, h("eds-button", {
|
|
1332
|
-
key: '
|
|
989
|
+
key: '1442f4f6b924533f9aa46bd22e1d0adf69561370',
|
|
1333
990
|
intent: "primary",
|
|
1334
991
|
label: this.formBtnLabel,
|
|
1335
992
|
disabled: this.isSubmitting,
|
|
@@ -1463,77 +1120,6 @@ const EdsFullscreenMenu = class {
|
|
|
1463
1120
|
}
|
|
1464
1121
|
};
|
|
1465
1122
|
EdsFullscreenMenu.style = EdsFullscreenMenuStyle0;
|
|
1466
|
-
const edsGaugeCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.bg-inverse{background-color:var(--white)}.bg-current{background-color:currentColor}.bg-dark{background-color:var(--grey-300)}.bg-darker{background-color:var(--grey-400)}.bg-default{background-color:var(--grey-200)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.inset-0{inset:0rem}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.text-default{color:var(--black)}";
|
|
1467
|
-
const EdsGaugeStyle0 = edsGaugeCss;
|
|
1468
|
-
const BACKGROUND_VARIANTS = {
|
|
1469
|
-
default: '#f2f2f2',
|
|
1470
|
-
dark: '#d8d8d8',
|
|
1471
|
-
strong: '#666666',
|
|
1472
|
-
black: '#000000'
|
|
1473
|
-
};
|
|
1474
|
-
const EdsGauge = class {
|
|
1475
|
-
constructor(hostRef) {
|
|
1476
|
-
registerInstance(this, hostRef);
|
|
1477
|
-
this.size = 100;
|
|
1478
|
-
this.valueMin = 0;
|
|
1479
|
-
this.valueMax = 100;
|
|
1480
|
-
this.value = 60;
|
|
1481
|
-
this.thickness = 0.1;
|
|
1482
|
-
this.variant = 'default';
|
|
1483
|
-
}
|
|
1484
|
-
render() {
|
|
1485
|
-
// Clamp thickness to [0,1]
|
|
1486
|
-
const thicknessClamped = Math.min(Math.max(this.thickness, 0.1), 0.2);
|
|
1487
|
-
// Normalize value within [valueMin, valueMax]
|
|
1488
|
-
const clamped = Math.min(Math.max(this.value, this.valueMin), this.valueMax);
|
|
1489
|
-
const range = this.valueMax - this.valueMin || 1;
|
|
1490
|
-
const ratio = (clamped - this.valueMin) / range;
|
|
1491
|
-
// Use the smaller of width/height as diameter
|
|
1492
|
-
const diameter = this.size;
|
|
1493
|
-
const angle = ratio * 360;
|
|
1494
|
-
const ringThickness = thicknessClamped * diameter;
|
|
1495
|
-
const innerDiameter = diameter - ringThickness * 2;
|
|
1496
|
-
const fontSize = diameter * 0.2;
|
|
1497
|
-
// Determine background color for empty portion
|
|
1498
|
-
const emptyColor = BACKGROUND_VARIANTS[this.variant] || BACKGROUND_VARIANTS.default;
|
|
1499
|
-
const containerStyle = {
|
|
1500
|
-
width: `${diameter}px`,
|
|
1501
|
-
height: `${diameter}px`,
|
|
1502
|
-
background: `conic-gradient(#00e766 0deg ${angle}deg, ${emptyColor} ${angle}deg 360deg)`
|
|
1503
|
-
};
|
|
1504
|
-
const maskStyle = {
|
|
1505
|
-
width: `${innerDiameter}px`,
|
|
1506
|
-
height: `${innerDiameter}px`,
|
|
1507
|
-
top: `${ringThickness}px`,
|
|
1508
|
-
left: `${ringThickness}px`
|
|
1509
|
-
};
|
|
1510
|
-
const textStyle = {
|
|
1511
|
-
fontSize: `${fontSize}px`
|
|
1512
|
-
};
|
|
1513
|
-
return h("div", {
|
|
1514
|
-
key: 'a549808bcd0fc64583f90f284a7b139386e71be7',
|
|
1515
|
-
role: "progressbar",
|
|
1516
|
-
"aria-valuemin": this.valueMin,
|
|
1517
|
-
"aria-valuemax": this.valueMax,
|
|
1518
|
-
"aria-valuenow": clamped,
|
|
1519
|
-
"aria-label": `Gauge value: ${clamped} of ${this.valueMax}`,
|
|
1520
|
-
class: "relative inline-block rounded-full overflow-hidden",
|
|
1521
|
-
style: containerStyle
|
|
1522
|
-
}, h("div", {
|
|
1523
|
-
key: 'c3efb2d512f96e4c3a9371416c6d9bb938cab43e',
|
|
1524
|
-
class: "absolute bg-inverse rounded-full",
|
|
1525
|
-
style: maskStyle
|
|
1526
|
-
}), h("div", {
|
|
1527
|
-
key: '7a6254e22240301b6716a2d6fed785196a39cdd8',
|
|
1528
|
-
class: "absolute inset-0 flex items-center justify-center"
|
|
1529
|
-
}, h("span", {
|
|
1530
|
-
key: '78d8d1b7c442f75947b2813bbb569c566357c121',
|
|
1531
|
-
class: "f-body-01 text-default",
|
|
1532
|
-
style: textStyle
|
|
1533
|
-
}, clamped)));
|
|
1534
|
-
}
|
|
1535
|
-
};
|
|
1536
|
-
EdsGauge.style = EdsGaugeStyle0;
|
|
1537
1123
|
const edsHeaderCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";
|
|
1538
1124
|
const EdsHeaderStyle0 = edsHeaderCss;
|
|
1539
1125
|
const EdsHeader = class {
|
|
@@ -1706,20 +1292,20 @@ const EdsImg = class {
|
|
|
1706
1292
|
imgOpts['decoding'] = 'async';
|
|
1707
1293
|
}
|
|
1708
1294
|
return h("div", {
|
|
1709
|
-
key: '
|
|
1295
|
+
key: '13ed3aa346c99321c609e49ce045b6361921350f',
|
|
1710
1296
|
class: {
|
|
1711
1297
|
'items-center justify-center': true,
|
|
1712
1298
|
'effect-bg-pattern': this.lazyload && this.showBg
|
|
1713
1299
|
}
|
|
1714
1300
|
}, h("picture", {
|
|
1715
|
-
key: '
|
|
1301
|
+
key: '56aa0ed8fd1ef8f9faf6ad576dd05edc34139c9b'
|
|
1716
1302
|
}, this.formats.map(format => h("source", {
|
|
1717
1303
|
type: format.type,
|
|
1718
1304
|
srcSet: format.srcset,
|
|
1719
1305
|
media: format.media,
|
|
1720
1306
|
sizes: this.sizes
|
|
1721
1307
|
})), h("img", Object.assign({
|
|
1722
|
-
key: '
|
|
1308
|
+
key: '78e3ed9adcfe423d48388bf30140f4b70649faf7',
|
|
1723
1309
|
ref: el => this.img = el,
|
|
1724
1310
|
class: {
|
|
1725
1311
|
'effect-opacity object-cover object-center': true,
|
|
@@ -1789,7 +1375,7 @@ const EdsInput = class {
|
|
|
1789
1375
|
const withIcon = !!this.icon;
|
|
1790
1376
|
const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
|
|
1791
1377
|
return h("div", {
|
|
1792
|
-
key: '
|
|
1378
|
+
key: '5c66c14b19aa3d5fc37e7a77a2d1194fa0be9b8c',
|
|
1793
1379
|
class: "relative flex items-center"
|
|
1794
1380
|
}, this.type === 'textarea' ? h("textarea", {
|
|
1795
1381
|
id: this.inputId || this.name,
|
|
@@ -1839,10 +1425,10 @@ const EdsInput = class {
|
|
|
1839
1425
|
onInput: this.handleInput,
|
|
1840
1426
|
onChange: this.handleInput
|
|
1841
1427
|
}), this.maxLength && this.type === 'textarea' && h("span", {
|
|
1842
|
-
key: '
|
|
1428
|
+
key: '4326db3729dea8bbddb7a109a90424aa832aded7',
|
|
1843
1429
|
class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}`
|
|
1844
1430
|
}, this.maxLength), this.icon && h("eds-icon-wrapper", {
|
|
1845
|
-
key: '
|
|
1431
|
+
key: 'df2f5598aedd36b9cb2ce886fb8ea08da58dc5ff',
|
|
1846
1432
|
class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`,
|
|
1847
1433
|
icon: this.icon
|
|
1848
1434
|
}));
|
|
@@ -1946,7 +1532,7 @@ const EdsInputField = class {
|
|
|
1946
1532
|
checked: this.checked
|
|
1947
1533
|
};
|
|
1948
1534
|
return h("div", {
|
|
1949
|
-
key: '
|
|
1535
|
+
key: 'e46f1b26212ee915c2fde3fa0c58a152005d2b50',
|
|
1950
1536
|
class: "space-y-8"
|
|
1951
1537
|
}, this.type === 'checkbox' || this.type === 'radio' ? this.parsedOptions.length > 0 ? h("fieldset", {
|
|
1952
1538
|
class: "space-y-4 mt-8"
|
|
@@ -2018,7 +1604,7 @@ const EdsInputField = class {
|
|
|
2018
1604
|
value: numberValue
|
|
2019
1605
|
}));
|
|
2020
1606
|
})() : h("eds-input", Object.assign({}, inputOpts))), h("eds-input-footer", {
|
|
2021
|
-
key: '
|
|
1607
|
+
key: 'ecf3ee5c0400749f1d89b53edfdee6fe62ca2a32',
|
|
2022
1608
|
id: `${this.name}-footer`,
|
|
2023
1609
|
name: this.name,
|
|
2024
1610
|
message: this.message,
|
|
@@ -2043,26 +1629,26 @@ const EdsInputFooter = class {
|
|
|
2043
1629
|
}
|
|
2044
1630
|
render() {
|
|
2045
1631
|
return h("div", {
|
|
2046
|
-
key: '
|
|
1632
|
+
key: 'd5424778da81d6558246efe97917d3e3ccfa9aaa',
|
|
2047
1633
|
class: "space-y-4 mt-4"
|
|
2048
1634
|
}, this.error && this.errorMessage && h("div", {
|
|
2049
|
-
key: '
|
|
1635
|
+
key: 'e915fc1f4719f48eca5a831ac72913d2f91f633b',
|
|
2050
1636
|
id: `error_${this.name}`,
|
|
2051
1637
|
class: "text-error flex items-center"
|
|
2052
1638
|
}, h("eds-icon-wrapper", {
|
|
2053
|
-
key: '
|
|
1639
|
+
key: '9cc87cfd4955766947a2581604fe1e072f8d82a9',
|
|
2054
1640
|
icon: "warning"
|
|
2055
1641
|
}), h("p", {
|
|
2056
|
-
key: '
|
|
1642
|
+
key: '564a2397fb7e8185e43e1c2be216c76060e7498e',
|
|
2057
1643
|
class: "f-ui-04 ml-4",
|
|
2058
1644
|
innerHTML: this.errorMessage
|
|
2059
1645
|
})), this.message && h("p", {
|
|
2060
|
-
key: '
|
|
1646
|
+
key: '24e0702df7e5c2fe4ef0cc6755159fefe76b70a7',
|
|
2061
1647
|
id: `desc_${this.name}`,
|
|
2062
1648
|
class: "f-ui-05 text-lighter",
|
|
2063
1649
|
innerHTML: this.message
|
|
2064
1650
|
}), this.link && h("a", {
|
|
2065
|
-
key: '
|
|
1651
|
+
key: '9e3720a3ded9d755afd7755104df0942246f1fbe',
|
|
2066
1652
|
href: this.link.url,
|
|
2067
1653
|
class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4"
|
|
2068
1654
|
}, this.link.label));
|
|
@@ -2078,16 +1664,16 @@ const EdsInputLabel = class {
|
|
|
2078
1664
|
}
|
|
2079
1665
|
render() {
|
|
2080
1666
|
return h("label", {
|
|
2081
|
-
key: '
|
|
1667
|
+
key: 'd700690a67a8348836aec27d2ff4f4d4ee18b9c8',
|
|
2082
1668
|
htmlFor: this.name,
|
|
2083
1669
|
class: `input-label ${this.disabled ? 'text-lighter' : ''}`
|
|
2084
1670
|
}, this.label, this.required && h("span", {
|
|
2085
|
-
key: '
|
|
1671
|
+
key: '9b52c053652db132a9bdb2d9fc64c569a529c2d9'
|
|
2086
1672
|
}, h("span", {
|
|
2087
|
-
key: '
|
|
1673
|
+
key: 'cd17268b6048ebaa70dc7f905fc7f7bf3ed3fa34',
|
|
2088
1674
|
"aria-hidden": "true"
|
|
2089
1675
|
}, "*"), h("span", {
|
|
2090
|
-
key: '
|
|
1676
|
+
key: '352d7b5ef080336a5c7b53e0b710d5b0d7aa0efe',
|
|
2091
1677
|
class: "sr-only"
|
|
2092
1678
|
}, "required")));
|
|
2093
1679
|
}
|
|
@@ -2134,10 +1720,10 @@ const EdsInputRange = class {
|
|
|
2134
1720
|
}
|
|
2135
1721
|
render() {
|
|
2136
1722
|
return h("div", {
|
|
2137
|
-
key: '
|
|
1723
|
+
key: '5c55f65e2acd6f4554af7d8ba513c9d9dfd445eb',
|
|
2138
1724
|
class: "relative flex flex-col items-start space-y-2"
|
|
2139
1725
|
}, h("input", {
|
|
2140
|
-
key: '
|
|
1726
|
+
key: '4fcd0d3d978ddba7929958dd22a283c2ba61ee48',
|
|
2141
1727
|
id: this.inputId || this.name,
|
|
2142
1728
|
name: this.name,
|
|
2143
1729
|
min: this.min,
|
|
@@ -2155,7 +1741,7 @@ const EdsInputRange = class {
|
|
|
2155
1741
|
onInput: this.onInput,
|
|
2156
1742
|
onChange: this.onChange
|
|
2157
1743
|
}), h("p", {
|
|
2158
|
-
key: '
|
|
1744
|
+
key: 'c63b223e6af149efb68cabbe5228e77b09ca2168',
|
|
2159
1745
|
id: `desc_${this.name}`,
|
|
2160
1746
|
class: "block f-ui-05 text-lighter"
|
|
2161
1747
|
}, "Current value: ", this.sliderVal));
|
|
@@ -2231,15 +1817,15 @@ const EdsInputSearch = class {
|
|
|
2231
1817
|
}
|
|
2232
1818
|
render() {
|
|
2233
1819
|
return h("div", {
|
|
2234
|
-
key: '
|
|
1820
|
+
key: '27d6871df962e2bd27eac38b1a105142b1b68bab',
|
|
2235
1821
|
class: "relative flex items-center"
|
|
2236
1822
|
}, h("eds-icon-wrapper", {
|
|
2237
|
-
key: '
|
|
1823
|
+
key: 'b4b497cb435c673a550b169dea93fbc7006d0c5e',
|
|
2238
1824
|
icon: "search",
|
|
2239
1825
|
class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest",
|
|
2240
1826
|
"aria-hidden": "true"
|
|
2241
1827
|
}), h("input", {
|
|
2242
|
-
key: '
|
|
1828
|
+
key: '1419cd8f5b8791b5b812c57ba649567e1b6ec0bb',
|
|
2243
1829
|
id: this.inputId || this.name,
|
|
2244
1830
|
name: this.name,
|
|
2245
1831
|
placeholder: this.placeholder,
|
|
@@ -2280,10 +1866,10 @@ const EdsInputSelect = class {
|
|
|
2280
1866
|
const placeholderText = this.placeholder || `Please select ${this.name}`;
|
|
2281
1867
|
const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
|
|
2282
1868
|
return h("div", {
|
|
2283
|
-
key: '
|
|
1869
|
+
key: '80cbdab87f5baa21df5edc857685c3af4dee3a58',
|
|
2284
1870
|
class: "relative"
|
|
2285
1871
|
}, h("select", {
|
|
2286
|
-
key: '
|
|
1872
|
+
key: '4e8f84fd9dbc63df7981898cadc24450f48aa92a',
|
|
2287
1873
|
id: selectId,
|
|
2288
1874
|
name: this.name,
|
|
2289
1875
|
class: {
|
|
@@ -2298,7 +1884,7 @@ const EdsInputSelect = class {
|
|
|
2298
1884
|
required: this.required,
|
|
2299
1885
|
onChange: this.handleChange
|
|
2300
1886
|
}, h("option", {
|
|
2301
|
-
key: '
|
|
1887
|
+
key: '54b90339cae4c5c80711793a8c68c4587e0c2495',
|
|
2302
1888
|
value: "",
|
|
2303
1889
|
disabled: true,
|
|
2304
1890
|
hidden: true
|
|
@@ -2307,10 +1893,10 @@ const EdsInputSelect = class {
|
|
|
2307
1893
|
value: opt.value,
|
|
2308
1894
|
selected: opt.value === this.value
|
|
2309
1895
|
}, opt.label))), h("span", {
|
|
2310
|
-
key: '
|
|
1896
|
+
key: '6c9f0a0606f1d6f282c756f84ace7618584d5fa3',
|
|
2311
1897
|
class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center"
|
|
2312
1898
|
}, h("eds-icon-wrapper", {
|
|
2313
|
-
key: '
|
|
1899
|
+
key: '4524af72468d3b37c01b0252d4b6b2bf7454514e',
|
|
2314
1900
|
class: "w-20 h-20",
|
|
2315
1901
|
icon: "chevron-right"
|
|
2316
1902
|
})));
|
|
@@ -2502,7 +2088,7 @@ const EdsLink = class {
|
|
|
2502
2088
|
const labelClasses = this.hideLabelOnSmallScreen ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
|
|
2503
2089
|
: '';
|
|
2504
2090
|
return h(ComponentType, {
|
|
2505
|
-
key: '
|
|
2091
|
+
key: '8c7ab8b80b9765e83e4e57d59ba1b45fe36f15b7',
|
|
2506
2092
|
class: `${classes || ''} ${this.extraClass || ''}`,
|
|
2507
2093
|
href: !this.disabled ? this.url : undefined,
|
|
2508
2094
|
target: this.external && !this.disabled ? '_blank' : undefined,
|
|
@@ -2513,10 +2099,10 @@ const EdsLink = class {
|
|
|
2513
2099
|
download: this.download ? '' : undefined,
|
|
2514
2100
|
onClick: event => this.handleClick(event)
|
|
2515
2101
|
}, h("span", {
|
|
2516
|
-
key: '
|
|
2102
|
+
key: '94284b425a331f6a56a3e63db89fed5fa1a207c1',
|
|
2517
2103
|
class: "z-1 relative inline-flex items-center justify-center"
|
|
2518
2104
|
}, this.renderLeftIcon(), h("span", {
|
|
2519
|
-
key: '
|
|
2105
|
+
key: '7496886c7c975d6795633c36b9cc8d31673d5a4b',
|
|
2520
2106
|
class: labelClasses
|
|
2521
2107
|
}, this.label), this.renderRightIcon()));
|
|
2522
2108
|
}
|
|
@@ -2587,13 +2173,13 @@ const EdsLogo = class {
|
|
|
2587
2173
|
render() {
|
|
2588
2174
|
const logoContent = this.getLogo();
|
|
2589
2175
|
return h("a", {
|
|
2590
|
-
key: '
|
|
2176
|
+
key: 'ab11d53e1f417221dcca2de441c7b3efa96f99a5',
|
|
2591
2177
|
href: this.href,
|
|
2592
2178
|
onClick: () => this.handleClick(),
|
|
2593
2179
|
class: "eds-logo-wrapper",
|
|
2594
2180
|
"aria-label": this.label
|
|
2595
2181
|
}, h("div", {
|
|
2596
|
-
key: '
|
|
2182
|
+
key: '0d4a6b970788534d34d55b28fe83407ce7c4e00e',
|
|
2597
2183
|
innerHTML: logoContent
|
|
2598
2184
|
}));
|
|
2599
2185
|
}
|
|
@@ -2703,40 +2289,40 @@ const EdsModal = class {
|
|
|
2703
2289
|
// Generate a unique id for the title so we can reference it for aria-labelledby.
|
|
2704
2290
|
const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
|
|
2705
2291
|
return h("div", {
|
|
2706
|
-
key: '
|
|
2292
|
+
key: 'affa340307adc5bdd637696b56a59e3f73cbf7e9',
|
|
2707
2293
|
id: "eds-modal",
|
|
2708
2294
|
class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`,
|
|
2709
2295
|
role: "dialog",
|
|
2710
2296
|
"aria-modal": "true",
|
|
2711
2297
|
"aria-labelledby": titleId
|
|
2712
2298
|
}, this.isOpen && h("div", {
|
|
2713
|
-
key: '
|
|
2299
|
+
key: 'e4359b32052a155f879070deea34fbca2fb67e3b',
|
|
2714
2300
|
class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
|
|
2715
2301
|
,
|
|
2716
2302
|
|
|
2717
2303
|
onClick: () => this.close()
|
|
2718
2304
|
}), h("div", {
|
|
2719
|
-
key: '
|
|
2305
|
+
key: 'ba95f463e8c807e2ac2e900b3167191908ca2f5d',
|
|
2720
2306
|
class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center`
|
|
2721
2307
|
}, h("div", {
|
|
2722
|
-
key: '
|
|
2308
|
+
key: '1fc4649d6ba728745e4f1ed73e8fb8bdac6eda59',
|
|
2723
2309
|
class: `flex justify-between items-center border-b-2 border-softer px-20 py-20 ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}`
|
|
2724
2310
|
}, h("span", {
|
|
2725
|
-
key: '
|
|
2311
|
+
key: '731e7cb6c7aaa36bcda8d1c32bd1b8da9d85f253',
|
|
2726
2312
|
id: titleId,
|
|
2727
2313
|
class: `f-heading-04 ${this.getTruncateClass()}`
|
|
2728
2314
|
}, this.heading), h("eds-button", {
|
|
2729
|
-
key: '
|
|
2315
|
+
key: '89657ac29b27ce173569353f3101e998cb756eec',
|
|
2730
2316
|
intent: "tertiary",
|
|
2731
2317
|
icon: "close",
|
|
2732
2318
|
"aria-label": "Close modal",
|
|
2733
2319
|
onClick: () => this.close(),
|
|
2734
2320
|
"extra-class": "ml-8 text-default"
|
|
2735
2321
|
})), h("div", {
|
|
2736
|
-
key: '
|
|
2322
|
+
key: '2e39edaa1f5cc5389873e203c3e4294de8b56678',
|
|
2737
2323
|
class: "pt-8 px-20 py-20"
|
|
2738
2324
|
}, h("slot", {
|
|
2739
|
-
key: '
|
|
2325
|
+
key: '0fb09f52100042fc5f20f5f443a8f5cff381d944'
|
|
2740
2326
|
}))));
|
|
2741
2327
|
}
|
|
2742
2328
|
get el() {
|
|
@@ -2744,130 +2330,260 @@ const EdsModal = class {
|
|
|
2744
2330
|
}
|
|
2745
2331
|
};
|
|
2746
2332
|
EdsModal.style = EdsModalStyle0;
|
|
2747
|
-
const
|
|
2748
|
-
const
|
|
2749
|
-
const
|
|
2333
|
+
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}}";
|
|
2334
|
+
const EdsPaginationStyle0 = edsPaginationCss;
|
|
2335
|
+
const EdsPagination = class {
|
|
2750
2336
|
constructor(hostRef) {
|
|
2751
2337
|
registerInstance(this, hostRef);
|
|
2752
|
-
this.
|
|
2753
|
-
this.
|
|
2754
|
-
this.
|
|
2755
|
-
this.
|
|
2756
|
-
this.
|
|
2757
|
-
this.
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2338
|
+
this.currentPage = undefined;
|
|
2339
|
+
this.lastPage = undefined;
|
|
2340
|
+
this.perPage = 10;
|
|
2341
|
+
this.total = 0;
|
|
2342
|
+
this.url = '';
|
|
2343
|
+
this.mode = 'default';
|
|
2344
|
+
this.prevLabel = 'Prev';
|
|
2345
|
+
this.nextLabel = 'Next';
|
|
2346
|
+
this.prevUrl = '';
|
|
2347
|
+
this.nextUrl = '';
|
|
2348
|
+
this.links = [];
|
|
2349
|
+
}
|
|
2350
|
+
/** Lifecycle hook to generate pagination links on component load */
|
|
2351
|
+
componentWillLoad() {
|
|
2352
|
+
if (this.mode === 'default') {
|
|
2353
|
+
this.generateLinks();
|
|
2354
|
+
}
|
|
2355
|
+
}
|
|
2356
|
+
componentDidLoad() {
|
|
2357
|
+
// Emit context for each eds-link element after the component is fully loaded
|
|
2358
|
+
const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
|
|
2359
|
+
links.forEach(lnk => {
|
|
2360
|
+
this.emitContext(lnk);
|
|
2361
|
+
});
|
|
2362
|
+
/*if (links.length > 0) {
|
|
2363
|
+
// Emit context for the first link
|
|
2364
|
+
this.emitContext(links[0]);
|
|
2365
|
+
// Emit context for the last link, if it's different from the first
|
|
2366
|
+
if (links.length > 1) {
|
|
2367
|
+
this.emitContext(links[links.length - 1]);
|
|
2766
2368
|
}
|
|
2369
|
+
}*/
|
|
2370
|
+
}
|
|
2371
|
+
/**
|
|
2372
|
+
* Emits a custom event called `parentContext` for a given link element.
|
|
2373
|
+
* This event provides context information about the breadcrumb component.
|
|
2374
|
+
*
|
|
2375
|
+
* @param linkElement - The link element to which the event will be dispatched.
|
|
2376
|
+
*/
|
|
2377
|
+
emitContext(linkElement) {
|
|
2378
|
+
const event = new CustomEvent('parentContext', {
|
|
2379
|
+
detail: {
|
|
2380
|
+
componentName: this.hostEl.tagName.toLowerCase(),
|
|
2381
|
+
identifier: null
|
|
2382
|
+
}
|
|
2383
|
+
});
|
|
2384
|
+
linkElement.dispatchEvent(event);
|
|
2385
|
+
}
|
|
2386
|
+
onPageOrLastPageChange() {
|
|
2387
|
+
if (this.mode === 'default') {
|
|
2388
|
+
this.generateLinks();
|
|
2767
2389
|
}
|
|
2768
|
-
return Array.isArray(this.slices) ? this.slices : [];
|
|
2769
2390
|
}
|
|
2770
|
-
|
|
2771
|
-
|
|
2391
|
+
/**
|
|
2392
|
+
* Checks if the current page is the first page
|
|
2393
|
+
* @returns {boolean} - true if current page is the first page
|
|
2394
|
+
*/
|
|
2395
|
+
isFirstPage() {
|
|
2396
|
+
return this.currentPage === 1;
|
|
2397
|
+
}
|
|
2398
|
+
/**
|
|
2399
|
+
* Checks if the current page is the last page
|
|
2400
|
+
* @returns {boolean} - true if current page is the last page
|
|
2401
|
+
*/
|
|
2402
|
+
isLastPage() {
|
|
2403
|
+
return this.currentPage === this.lastPage;
|
|
2404
|
+
}
|
|
2405
|
+
/**
|
|
2406
|
+
* Generates a pagination link object
|
|
2407
|
+
* @param {number} page - Page number for the link
|
|
2408
|
+
* @returns {Link} - Link object with page details
|
|
2409
|
+
*/
|
|
2410
|
+
generateLink(page) {
|
|
2411
|
+
const urlHasQuery = this.url.includes('?');
|
|
2772
2412
|
return {
|
|
2773
|
-
|
|
2774
|
-
|
|
2413
|
+
ariaLabel: `Page ${page}`,
|
|
2414
|
+
url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
|
|
2415
|
+
label: page.toString(),
|
|
2416
|
+
current: this.currentPage === page,
|
|
2417
|
+
disabled: false
|
|
2775
2418
|
};
|
|
2776
2419
|
}
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2420
|
+
/** Generates pagination links based on the last page and current page */
|
|
2421
|
+
generateLinks() {
|
|
2422
|
+
if (this.lastPage && this.lastPage > 5) {
|
|
2423
|
+
this.links = this.getPaginationGenerator(this.currentPage || 1, this.lastPage).map(page => typeof page === 'number' ? this.generateLink(page) : page);
|
|
2424
|
+
} else if (this.lastPage) {
|
|
2425
|
+
this.links = Array.from({
|
|
2426
|
+
length: this.lastPage
|
|
2427
|
+
}).map((_, i) => this.generateLink(i + 1));
|
|
2428
|
+
}
|
|
2782
2429
|
}
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2430
|
+
/**
|
|
2431
|
+
* Creates a pagination range based on delta, current, and total pages
|
|
2432
|
+
* @param {number} current - Current page number
|
|
2433
|
+
* @param {number} total - Total number of pages
|
|
2434
|
+
* @param {number} delta - Range of pages to display around the current page
|
|
2435
|
+
* @returns {(number | string)[]} - Range of page numbers or ellipses
|
|
2436
|
+
*/
|
|
2437
|
+
getPaginationGenerator(current, total) {
|
|
2438
|
+
const delta = 1; // Show one page before and one after the current page
|
|
2439
|
+
const range = [];
|
|
2440
|
+
if (total <= 5) {
|
|
2441
|
+
// If total pages are 5 or less, show all pages
|
|
2442
|
+
for (let i = 1; i <= total; i++) {
|
|
2443
|
+
range.push(i);
|
|
2444
|
+
}
|
|
2445
|
+
} else {
|
|
2446
|
+
// Always show the first page
|
|
2447
|
+
range.push(1);
|
|
2448
|
+
// Add ellipsis if there’s a gap between the first page and the current range start
|
|
2449
|
+
if (current - delta > 2) {
|
|
2450
|
+
range.push('...');
|
|
2451
|
+
}
|
|
2452
|
+
// Determine range for pages around the current page
|
|
2453
|
+
for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
|
|
2454
|
+
range.push(i);
|
|
2455
|
+
}
|
|
2456
|
+
// Add ellipsis if there’s a gap between the current range end and the last page
|
|
2457
|
+
if (current + delta < total - 1) {
|
|
2458
|
+
range.push('...');
|
|
2459
|
+
}
|
|
2460
|
+
// Always show the last page
|
|
2461
|
+
range.push(total);
|
|
2462
|
+
}
|
|
2463
|
+
return range;
|
|
2464
|
+
}
|
|
2465
|
+
/**
|
|
2466
|
+
* Formats the current page results information for display
|
|
2467
|
+
* @returns {string} - Formatted page result information
|
|
2468
|
+
*/
|
|
2469
|
+
pageResults() {
|
|
2470
|
+
if (this.total > 0) {
|
|
2471
|
+
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}`;
|
|
2472
|
+
}
|
|
2473
|
+
return '';
|
|
2474
|
+
}
|
|
2475
|
+
/**
|
|
2476
|
+
* Handles a page click event, updating the current page and dispatching an event
|
|
2477
|
+
* @param {MouseEvent} event - Click event
|
|
2478
|
+
* @param {number} newPage - New page number
|
|
2479
|
+
*/
|
|
2480
|
+
handlePageClick(event, newPage) {
|
|
2481
|
+
if (this.mode === 'navigator') {
|
|
2482
|
+
return; // No page clicking logic for navigator mode
|
|
2788
2483
|
}
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
const
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
const color = s.color || palette.shift() || 'var(--color-chart-neutral-1)';
|
|
2799
|
-
return Object.assign(Object.assign({}, s), {
|
|
2800
|
-
start,
|
|
2801
|
-
end,
|
|
2802
|
-
color
|
|
2484
|
+
event.preventDefault(); // Prevent default link navigation
|
|
2485
|
+
if (newPage !== this.currentPage) {
|
|
2486
|
+
this.links = this.links.map(link => typeof link === 'object' ? Object.assign(Object.assign({}, link), {
|
|
2487
|
+
current: parseInt(link.label) === newPage
|
|
2488
|
+
}) : link);
|
|
2489
|
+
const pageChangeEvent = new CustomEvent('page', {
|
|
2490
|
+
detail: newPage,
|
|
2491
|
+
bubbles: true,
|
|
2492
|
+
composed: true
|
|
2803
2493
|
});
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
const ariaLabel = processed.map(s => `${s.label}: ${this.display === 'percent' ? `${Math.round(s.value / total * 100)}%` : s.value}`).join(', ');
|
|
2815
|
-
return h(Host, null, h("div", {
|
|
2816
|
-
class: "wrapper"
|
|
2817
|
-
}, h("svg", {
|
|
2818
|
-
width: diameter,
|
|
2819
|
-
height: diameter,
|
|
2820
|
-
role: "img",
|
|
2821
|
-
"aria-label": `Pie chart: ${ariaLabel}`,
|
|
2822
|
-
class: "pie-chart"
|
|
2823
|
-
}, h("title", null, "Pie chart"), h("g", null, processed.map(s => h("path", {
|
|
2824
|
-
key: s.id,
|
|
2825
|
-
d: this.describeArc(radius, radius, outerRadius, s.start, s.end),
|
|
2826
|
-
fill: s.color
|
|
2827
|
-
})), innerRadius > 0 && h("circle", {
|
|
2828
|
-
cx: radius,
|
|
2829
|
-
cy: radius,
|
|
2830
|
-
r: innerRadius,
|
|
2831
|
-
fill: "var(--white)"
|
|
2832
|
-
}), processed.map(s => {
|
|
2833
|
-
const midAngle = s.start + (s.end - s.start) / 2;
|
|
2834
|
-
const {
|
|
2835
|
-
x,
|
|
2836
|
-
y
|
|
2837
|
-
} = this.polarToCartesian(radius, radius, labelRadius, midAngle);
|
|
2838
|
-
const text = this.display === 'percent' ? `${Math.round(s.value / total * 100)}%` : String(s.value);
|
|
2839
|
-
return h("text", {
|
|
2840
|
-
key: s.id,
|
|
2841
|
-
x: x,
|
|
2842
|
-
y: y,
|
|
2843
|
-
class: "f-ui-02",
|
|
2844
|
-
"text-anchor": "middle",
|
|
2845
|
-
"alignment-baseline": "middle"
|
|
2846
|
-
}, text);
|
|
2847
|
-
}))), this.legend && h("ul", {
|
|
2848
|
-
class: "legend",
|
|
2849
|
-
role: "list"
|
|
2850
|
-
}, processed.map(s => h("li", {
|
|
2851
|
-
key: s.id,
|
|
2852
|
-
role: "listitem",
|
|
2853
|
-
tabindex: "0",
|
|
2854
|
-
class: "legend-item"
|
|
2494
|
+
this.hostEl.dispatchEvent(pageChangeEvent);
|
|
2495
|
+
this.currentPage = newPage;
|
|
2496
|
+
}
|
|
2497
|
+
}
|
|
2498
|
+
render() {
|
|
2499
|
+
return h("div", {
|
|
2500
|
+
key: '6377e0187e461bcbeac835dd7cb83e93ef199865'
|
|
2501
|
+
}, this.total > 0 && this.mode === 'default' && h("p", {
|
|
2502
|
+
key: 'ec2a6b6a40c76352743d012c51cda5d7fe1137df',
|
|
2503
|
+
class: "f-ui-03 text-lightest mb-28 w-full text-center"
|
|
2855
2504
|
}, h("span", {
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2505
|
+
key: '3a23e3d156f87167b0dacb4085870958ce19e793',
|
|
2506
|
+
class: "sr-only"
|
|
2507
|
+
}, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
|
|
2508
|
+
"aria-label": "Pagination"
|
|
2509
|
+
}, h("ul", {
|
|
2510
|
+
class: "flex items-center justify-center gap-x-8"
|
|
2511
|
+
}, h("li", {
|
|
2512
|
+
class: "mr-auto"
|
|
2513
|
+
}, h("eds-link", {
|
|
2514
|
+
label: this.prevLabel,
|
|
2515
|
+
url: this.mode === 'navigator' ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
|
|
2516
|
+
: this.isFirstPage() ? '#' : this.generateLink(this.currentPage - 1).url,
|
|
2517
|
+
disabled: this.mode === 'navigator' ? !this.prevUrl // Disable if prevUrl is not provided
|
|
2518
|
+
: this.isFirstPage(),
|
|
2519
|
+
"aria-label": "Previous page",
|
|
2520
|
+
icon: "chevron-left",
|
|
2521
|
+
"icon-pos": "left",
|
|
2522
|
+
size: "small",
|
|
2523
|
+
"icon-small": "true",
|
|
2524
|
+
intent: "strong",
|
|
2525
|
+
"hide-label-on-small-screen": true,
|
|
2526
|
+
class: "!p-8 lg:!pr-12",
|
|
2527
|
+
onClick: event => {
|
|
2528
|
+
if (this.mode === 'default') {
|
|
2529
|
+
if (this.isFirstPage()) {
|
|
2530
|
+
event.preventDefault(); // Prevent click if disabled
|
|
2531
|
+
} else {
|
|
2532
|
+
this.handlePageClick(event, (this.currentPage || 1) - 1);
|
|
2533
|
+
}
|
|
2534
|
+
}
|
|
2535
|
+
}
|
|
2536
|
+
})), this.mode === 'default' && this.links.map((link, index) => h("li", {
|
|
2537
|
+
key: index,
|
|
2538
|
+
class: "f-ui-02 flex h-36 items-center justify-center"
|
|
2539
|
+
}, typeof link === 'string' ? h("span", {
|
|
2540
|
+
class: "flex items-center justify-center"
|
|
2541
|
+
}, link) : h("eds-link", {
|
|
2542
|
+
url: link.url,
|
|
2543
|
+
"aria-label": link.ariaLabel,
|
|
2544
|
+
label: link.label,
|
|
2545
|
+
current: link.current,
|
|
2546
|
+
size: "small",
|
|
2547
|
+
class: "!p-8",
|
|
2548
|
+
intent: link.current ? 'secondary' : 'ghost',
|
|
2549
|
+
onClick: event => this.handlePageClick(event, parseInt(link.label))
|
|
2550
|
+
}))), h("li", {
|
|
2551
|
+
class: "ml-auto"
|
|
2552
|
+
}, h("eds-link", {
|
|
2553
|
+
label: this.nextLabel,
|
|
2554
|
+
url: this.mode === 'navigator' ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
|
|
2555
|
+
: this.isLastPage() ? '#' : this.generateLink(this.currentPage + 1).url,
|
|
2556
|
+
disabled: this.mode === 'navigator' ? !this.nextUrl // Disable if nextUrl is not provided
|
|
2557
|
+
: this.isLastPage(),
|
|
2558
|
+
"aria-label": "Next page",
|
|
2559
|
+
size: "small",
|
|
2560
|
+
"icon-small": "true",
|
|
2561
|
+
icon: "chevron-right",
|
|
2562
|
+
intent: "strong",
|
|
2563
|
+
"hide-label-on-small-screen": true,
|
|
2564
|
+
class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors",
|
|
2565
|
+
onClick: event => {
|
|
2566
|
+
if (this.mode === 'default') {
|
|
2567
|
+
if (this.isLastPage()) {
|
|
2568
|
+
event.preventDefault(); // Prevent click if disabled
|
|
2569
|
+
} else {
|
|
2570
|
+
this.handlePageClick(event, (this.currentPage || 1) + 1);
|
|
2571
|
+
}
|
|
2572
|
+
}
|
|
2859
2573
|
}
|
|
2860
|
-
})
|
|
2861
|
-
|
|
2862
|
-
|
|
2574
|
+
})))) : null);
|
|
2575
|
+
}
|
|
2576
|
+
get hostEl() {
|
|
2577
|
+
return getElement(this);
|
|
2578
|
+
}
|
|
2579
|
+
static get watchers() {
|
|
2580
|
+
return {
|
|
2581
|
+
"currentPage": ["onPageOrLastPageChange"],
|
|
2582
|
+
"lastPage": ["onPageOrLastPageChange"]
|
|
2583
|
+
};
|
|
2863
2584
|
}
|
|
2864
2585
|
};
|
|
2865
|
-
|
|
2866
|
-
EdsPie.PALETTES = {
|
|
2867
|
-
semantic: ['var(--color-chart-accent)', 'var(--color-chart-strong)', 'var(--color-chart-accent-dark)', 'var(--color-chart-lighter)', 'var(--color-chart-accent-light)', 'var(--color-chart-lightest)', 'var(--color-chart-accent-lighter)', 'var(--color-chart-darker)', 'var(--color-chart-accent-lightest)'],
|
|
2868
|
-
mono: ['var(--grey-700)', 'var(--grey-500)', 'var(--grey-300)', 'var(--grey-100)', 'var(--grey-800)', 'var(--grey-600)', 'var(--grey-400)', 'var(--grey-200)', 'var(--grey-900)']
|
|
2869
|
-
};
|
|
2870
|
-
EdsPie.style = EdsPieStyle0;
|
|
2586
|
+
EdsPagination.style = EdsPaginationStyle0;
|
|
2871
2587
|
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}";
|
|
2872
2588
|
const EdsSocialNetworksStyle0 = edsSocialNetworksCss;
|
|
2873
2589
|
const EdsSocialNetworks = class {
|
|
@@ -3022,9 +2738,12 @@ const EdsSteps = class {
|
|
|
3022
2738
|
onClick: () => this.handleStepClick(index)
|
|
3023
2739
|
}, step.title), this.activeStep === index && h("div", {
|
|
3024
2740
|
class: "content"
|
|
2741
|
+
}, h("slot", {
|
|
2742
|
+
name: `step-${index}`
|
|
3025
2743
|
}, h("div", {
|
|
3026
|
-
class:
|
|
3027
|
-
|
|
2744
|
+
class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
|
|
2745
|
+
innerHTML: step.content
|
|
2746
|
+
})), h("eds-button", {
|
|
3028
2747
|
label: index === steps.length - 1 ? 'Finish' : 'Continue',
|
|
3029
2748
|
intent: "primary",
|
|
3030
2749
|
class: "next-btn",
|
|
@@ -3045,9 +2764,12 @@ const EdsSteps = class {
|
|
|
3045
2764
|
key: index
|
|
3046
2765
|
}, h("h3", null, step.title), h("div", {
|
|
3047
2766
|
class: "content"
|
|
2767
|
+
}, h("slot", {
|
|
2768
|
+
name: `step-${index}`
|
|
3048
2769
|
}, h("div", {
|
|
3049
|
-
class:
|
|
3050
|
-
|
|
2770
|
+
class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
|
|
2771
|
+
innerHTML: step.content
|
|
2772
|
+
}))))));
|
|
3051
2773
|
}
|
|
3052
2774
|
get el() {
|
|
3053
2775
|
return getElement(this);
|
|
@@ -3059,7 +2781,7 @@ const EdsSteps = class {
|
|
|
3059
2781
|
}
|
|
3060
2782
|
};
|
|
3061
2783
|
EdsSteps.style = EdsStepsStyle0;
|
|
3062
|
-
const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.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-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)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}";
|
|
2784
|
+
const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.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-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)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}";
|
|
3063
2785
|
const EdsStepsV2Style0 = edsStepsV2Css;
|
|
3064
2786
|
const EdsStepsV2 = class {
|
|
3065
2787
|
constructor(hostRef) {
|
|
@@ -3080,6 +2802,7 @@ const EdsStepsV2 = class {
|
|
|
3080
2802
|
this.steps = [];
|
|
3081
2803
|
this.type = 'static';
|
|
3082
2804
|
this.imageSrc = undefined;
|
|
2805
|
+
this.imageWidth = undefined;
|
|
3083
2806
|
this.bg = true;
|
|
3084
2807
|
this.message = undefined;
|
|
3085
2808
|
this.activeStep = 0;
|
|
@@ -3133,12 +2856,13 @@ const EdsStepsV2 = class {
|
|
|
3133
2856
|
render() {
|
|
3134
2857
|
const steps = this.parsedSteps;
|
|
3135
2858
|
return h("div", {
|
|
3136
|
-
key: '
|
|
2859
|
+
key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52',
|
|
3137
2860
|
class: this.articleClasses()
|
|
3138
2861
|
}, this.imageSrc ? h("div", {
|
|
3139
2862
|
class: "w-full mb-12 rounded-t-lg overflow-hidden border-2"
|
|
3140
2863
|
}, h("eds-img", {
|
|
3141
2864
|
src: this.imageSrc,
|
|
2865
|
+
width: this.imageWidth,
|
|
3142
2866
|
"with-bg": "true",
|
|
3143
2867
|
"lazy-load": "true",
|
|
3144
2868
|
alt: "Step illustration"
|
|
@@ -3149,21 +2873,23 @@ const EdsStepsV2 = class {
|
|
|
3149
2873
|
}, h("span", {
|
|
3150
2874
|
class: "text-inverse f-heading-04 "
|
|
3151
2875
|
}, this.message))), h("div", {
|
|
3152
|
-
key: '
|
|
2876
|
+
key: 'db0618aad7d5986fcb0889f1c439be73f83a00df',
|
|
3153
2877
|
class: "p-8"
|
|
3154
2878
|
}, this.type === 'linear' ? h("div", {
|
|
3155
2879
|
class: "steps"
|
|
3156
2880
|
}, steps.map((step, index) => h("div", {
|
|
3157
|
-
class:
|
|
2881
|
+
class: index === 0 ? 'step' : 'step space-y-16',
|
|
3158
2882
|
key: index
|
|
3159
2883
|
}, h("h3", {
|
|
3160
2884
|
onClick: () => this.handleStepClick(index)
|
|
3161
2885
|
}, step.title), this.activeStep === index && h("div", {
|
|
3162
2886
|
class: "content"
|
|
2887
|
+
}, h("slot", {
|
|
2888
|
+
name: `step-${index}`
|
|
3163
2889
|
}, h("div", {
|
|
3164
|
-
class:
|
|
2890
|
+
class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
|
|
3165
2891
|
innerHTML: step.content
|
|
3166
|
-
}), h("eds-button", {
|
|
2892
|
+
})), h("eds-button", {
|
|
3167
2893
|
label: index === steps.length - 1 ? 'Finish' : 'Continue',
|
|
3168
2894
|
intent: "primary",
|
|
3169
2895
|
class: "next-btn",
|
|
@@ -3185,10 +2911,12 @@ const EdsStepsV2 = class {
|
|
|
3185
2911
|
onClick: () => this.handleStepClick(index)
|
|
3186
2912
|
}, step.title), h("div", {
|
|
3187
2913
|
class: "content"
|
|
2914
|
+
}, h("slot", {
|
|
2915
|
+
name: `step-${index}`
|
|
3188
2916
|
}, h("div", {
|
|
3189
|
-
class:
|
|
2917
|
+
class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
|
|
3190
2918
|
innerHTML: step.content
|
|
3191
|
-
})))))));
|
|
2919
|
+
}))))))));
|
|
3192
2920
|
}
|
|
3193
2921
|
get el() {
|
|
3194
2922
|
return getElement(this);
|
|
@@ -3200,6 +2928,326 @@ const EdsStepsV2 = class {
|
|
|
3200
2928
|
}
|
|
3201
2929
|
};
|
|
3202
2930
|
EdsStepsV2.style = EdsStepsV2Style0;
|
|
2931
|
+
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-8{padding-left:0.5rem;padding-right:0.5rem}.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}";
|
|
2932
|
+
const EdsTableStyle0 = edsTableCss;
|
|
2933
|
+
const EdsTable = class {
|
|
2934
|
+
constructor(hostRef) {
|
|
2935
|
+
registerInstance(this, hostRef);
|
|
2936
|
+
this.rowaction = createEvent(this, "rowaction", 7);
|
|
2937
|
+
this.handleResize = () => {
|
|
2938
|
+
this.updateContainerWidth();
|
|
2939
|
+
};
|
|
2940
|
+
this.data = null;
|
|
2941
|
+
this.endpoint = null;
|
|
2942
|
+
this.config = {};
|
|
2943
|
+
this.rowsPerPage = 10;
|
|
2944
|
+
this.paginationEnabled = true;
|
|
2945
|
+
this.searchEnabled = false;
|
|
2946
|
+
this.hostWidth = undefined;
|
|
2947
|
+
this.columnSize = 'default';
|
|
2948
|
+
this.actions = [];
|
|
2949
|
+
this.actionTemplate = undefined;
|
|
2950
|
+
this.parsedActions = [];
|
|
2951
|
+
this.dataColumns = [];
|
|
2952
|
+
this.tbData = [];
|
|
2953
|
+
this.columns = [];
|
|
2954
|
+
this.currentPage = 1;
|
|
2955
|
+
this.parsedConfig = {};
|
|
2956
|
+
this.totalRows = 0;
|
|
2957
|
+
this.searchQuery = '';
|
|
2958
|
+
this.containerWidth = 0;
|
|
2959
|
+
}
|
|
2960
|
+
handleDataChange() {
|
|
2961
|
+
this.parseData();
|
|
2962
|
+
}
|
|
2963
|
+
handleConfigChange() {
|
|
2964
|
+
this.parseConfig();
|
|
2965
|
+
}
|
|
2966
|
+
handleActionsChange() {
|
|
2967
|
+
try {
|
|
2968
|
+
this.parsedActions = typeof this.actions === 'string' ? JSON.parse(this.actions) : this.actions;
|
|
2969
|
+
} catch (_a) {
|
|
2970
|
+
console.error('Failed to parse actions JSON');
|
|
2971
|
+
this.parsedActions = [];
|
|
2972
|
+
}
|
|
2973
|
+
}
|
|
2974
|
+
componentWillLoad() {
|
|
2975
|
+
this.parseConfig();
|
|
2976
|
+
this.handleActionsChange();
|
|
2977
|
+
this.data ? this.parseData() : this.endpoint && this.fetchData();
|
|
2978
|
+
}
|
|
2979
|
+
componentDidLoad() {
|
|
2980
|
+
this.updateContainerWidth();
|
|
2981
|
+
window.addEventListener('resize', this.handleResize);
|
|
2982
|
+
this.setupPaginationListener();
|
|
2983
|
+
}
|
|
2984
|
+
componentDidUpdate() {
|
|
2985
|
+
this.setupPaginationListener();
|
|
2986
|
+
}
|
|
2987
|
+
disconnectedCallback() {
|
|
2988
|
+
window.removeEventListener('resize', this.handleResize);
|
|
2989
|
+
}
|
|
2990
|
+
updateContainerWidth() {
|
|
2991
|
+
// Use hostWidth prop if provided; otherwise, measure parent element
|
|
2992
|
+
if (this.hostWidth && this.hostWidth.trim() !== '') {
|
|
2993
|
+
this.containerWidth = Number(this.hostWidth);
|
|
2994
|
+
} else if (this.hostEl.parentElement instanceof HTMLElement) {
|
|
2995
|
+
this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
|
|
2996
|
+
} else {
|
|
2997
|
+
this.containerWidth = 400;
|
|
2998
|
+
}
|
|
2999
|
+
}
|
|
3000
|
+
parseData() {
|
|
3001
|
+
try {
|
|
3002
|
+
this.tbData = parseData(this.data);
|
|
3003
|
+
this.totalRows = this.tbData.length;
|
|
3004
|
+
this.updateColumns();
|
|
3005
|
+
this.currentPage = 1;
|
|
3006
|
+
} catch (error) {
|
|
3007
|
+
console.error('Failed to parse data:', error);
|
|
3008
|
+
this.tbData = [];
|
|
3009
|
+
}
|
|
3010
|
+
}
|
|
3011
|
+
parseConfig() {
|
|
3012
|
+
try {
|
|
3013
|
+
this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
|
|
3014
|
+
} catch (error) {
|
|
3015
|
+
console.error('Failed to parse config:', error);
|
|
3016
|
+
this.parsedConfig = {};
|
|
3017
|
+
}
|
|
3018
|
+
}
|
|
3019
|
+
async fetchData() {
|
|
3020
|
+
try {
|
|
3021
|
+
const response = await fetch(this.endpoint);
|
|
3022
|
+
const data = await response.json();
|
|
3023
|
+
this.data = data;
|
|
3024
|
+
} catch (error) {
|
|
3025
|
+
console.error('Failed to fetch data:', error);
|
|
3026
|
+
}
|
|
3027
|
+
}
|
|
3028
|
+
setupPaginationListener() {
|
|
3029
|
+
if (!this.shouldEnablePagination()) {
|
|
3030
|
+
return;
|
|
3031
|
+
}
|
|
3032
|
+
const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
|
|
3033
|
+
if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
|
|
3034
|
+
paginationEl.addEventListener('page', event => this.handlePageChange(event.detail));
|
|
3035
|
+
paginationEl.setAttribute('listener-attached', 'true');
|
|
3036
|
+
}
|
|
3037
|
+
}
|
|
3038
|
+
getFilteredRows() {
|
|
3039
|
+
return this.tbData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
|
|
3040
|
+
}
|
|
3041
|
+
getPaginatedRows() {
|
|
3042
|
+
const filteredRows = this.getFilteredRows();
|
|
3043
|
+
this.totalRows = filteredRows.length;
|
|
3044
|
+
const start = (this.currentPage - 1) * this.rowsPerPage;
|
|
3045
|
+
return filteredRows.slice(start, start + this.rowsPerPage);
|
|
3046
|
+
}
|
|
3047
|
+
handlePageChange(newPage) {
|
|
3048
|
+
this.currentPage = newPage;
|
|
3049
|
+
sendAnalytics({
|
|
3050
|
+
category: 'ui-component',
|
|
3051
|
+
parentContext: null,
|
|
3052
|
+
tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
|
|
3053
|
+
name: `${newPage}` || '',
|
|
3054
|
+
action: 'page'
|
|
3055
|
+
});
|
|
3056
|
+
}
|
|
3057
|
+
handleSearch(event) {
|
|
3058
|
+
this.searchQuery = event.target.value;
|
|
3059
|
+
this.currentPage = 1;
|
|
3060
|
+
}
|
|
3061
|
+
renderCell(value, column) {
|
|
3062
|
+
var _a;
|
|
3063
|
+
const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
|
|
3064
|
+
return format === 'uppercase' ? value === null || value === void 0 ? void 0 : value.toString().toUpperCase() : format === 'svg' ? h("div", {
|
|
3065
|
+
innerHTML: value
|
|
3066
|
+
}) : format === 'bold' ? h("strong", null, value) : format === 'code' ? h("code", null, value) : value;
|
|
3067
|
+
}
|
|
3068
|
+
/**
|
|
3069
|
+
* Renders one action (button or checkbox) for a specific action‐name.
|
|
3070
|
+
* Used by the “Actions” column below.
|
|
3071
|
+
*/
|
|
3072
|
+
renderSingleActionCell(actionName, row) {
|
|
3073
|
+
var _a;
|
|
3074
|
+
const act = this.parsedActions.find(a => a.name === actionName);
|
|
3075
|
+
if (this.actionTemplate) {
|
|
3076
|
+
return this.actionTemplate(row);
|
|
3077
|
+
}
|
|
3078
|
+
const type = act.type || 'button';
|
|
3079
|
+
if (type === 'checkbox') {
|
|
3080
|
+
const boundField = (_a = act.field) !== null && _a !== void 0 ? _a : act.name;
|
|
3081
|
+
const checked = !!row[boundField];
|
|
3082
|
+
return h("eds-input-field", {
|
|
3083
|
+
name: `chc-${actionName}`,
|
|
3084
|
+
label: act.label,
|
|
3085
|
+
type: "checkbox",
|
|
3086
|
+
checked: checked,
|
|
3087
|
+
onChange: e => this.emitAction(act.name, row, e.target.checked)
|
|
3088
|
+
});
|
|
3089
|
+
}
|
|
3090
|
+
return h("eds-link", {
|
|
3091
|
+
label: act.label,
|
|
3092
|
+
intent: "weak",
|
|
3093
|
+
onClick: () => this.emitAction(act.name, row)
|
|
3094
|
+
});
|
|
3095
|
+
}
|
|
3096
|
+
emitAction(actionName, row, checked) {
|
|
3097
|
+
sendAnalytics({
|
|
3098
|
+
category: 'ui-component',
|
|
3099
|
+
parentContext: null,
|
|
3100
|
+
tag: `${this.hostEl.tagName.toLowerCase()}/action`,
|
|
3101
|
+
name: actionName,
|
|
3102
|
+
action: 'click'
|
|
3103
|
+
});
|
|
3104
|
+
this.rowaction.emit({
|
|
3105
|
+
action: actionName,
|
|
3106
|
+
row,
|
|
3107
|
+
checked: !!checked
|
|
3108
|
+
});
|
|
3109
|
+
}
|
|
3110
|
+
shouldEnablePagination() {
|
|
3111
|
+
return this.paginationEnabled && this.totalRows > this.rowsPerPage;
|
|
3112
|
+
}
|
|
3113
|
+
updateColumns() {
|
|
3114
|
+
var _a, _b;
|
|
3115
|
+
// 1) Grab all data‐keys from the first row (if any) as before:
|
|
3116
|
+
this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
|
|
3117
|
+
// 2) Instead of pushing each action.name, we add just a single “actions” column
|
|
3118
|
+
// (you can call it anything; we’ll detect it in render())
|
|
3119
|
+
if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
|
|
3120
|
+
this.columns.push('actions');
|
|
3121
|
+
}
|
|
3122
|
+
}
|
|
3123
|
+
getVisibleColumnsCount() {
|
|
3124
|
+
return this.columns.filter(column => {
|
|
3125
|
+
var _a;
|
|
3126
|
+
return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden);
|
|
3127
|
+
}).length;
|
|
3128
|
+
}
|
|
3129
|
+
divisionFactor() {
|
|
3130
|
+
let divisionFactor = 1;
|
|
3131
|
+
if (this.columnSize === 'medium') {
|
|
3132
|
+
divisionFactor = 2;
|
|
3133
|
+
} else if (this.columnSize === 'large') {
|
|
3134
|
+
divisionFactor = 4;
|
|
3135
|
+
}
|
|
3136
|
+
return divisionFactor;
|
|
3137
|
+
}
|
|
3138
|
+
capitalize(str) {
|
|
3139
|
+
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
|
|
3140
|
+
}
|
|
3141
|
+
render() {
|
|
3142
|
+
const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
|
|
3143
|
+
const visibleColumnsCount = this.getVisibleColumnsCount();
|
|
3144
|
+
const columnWidth = visibleColumnsCount > 0 ? Math.floor(currentContainerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
|
|
3145
|
+
const paginatedRows = this.getPaginatedRows();
|
|
3146
|
+
const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
|
|
3147
|
+
return h("div", {
|
|
3148
|
+
key: '5034177431626ab2bfc5fd0118c006d11a4f6e96'
|
|
3149
|
+
}, this.searchEnabled && h("div", {
|
|
3150
|
+
key: '86e1a6ffc4bed69f290b3a53031341ab276eaf04'
|
|
3151
|
+
}, h("eds-input-field", {
|
|
3152
|
+
key: 1,
|
|
3153
|
+
name: "search",
|
|
3154
|
+
"aria-label": "Search",
|
|
3155
|
+
type: "text",
|
|
3156
|
+
placeholder: "Search...",
|
|
3157
|
+
onInput: event => this.handleSearch(event)
|
|
3158
|
+
})), h("div", {
|
|
3159
|
+
key: 'bc11838d819ecf89c5ba1cc1cfe7ac0af0e82b59',
|
|
3160
|
+
class: "mt-20"
|
|
3161
|
+
}, h("table", {
|
|
3162
|
+
key: '97f16b65eb1d9387e9ca7588184c9e68c1afcc2e',
|
|
3163
|
+
class: "block overflow-x-auto mt-6 p-0"
|
|
3164
|
+
}, h("thead", {
|
|
3165
|
+
key: 'f4d64ada28c225db1b224277513e663a99de1cec'
|
|
3166
|
+
}, h("tr", {
|
|
3167
|
+
key: 'c6a69e159cceada0f7143c0acb787e5c23242ae7',
|
|
3168
|
+
class: "m-0 p-0 border border-softer even:bg-inverse-softer"
|
|
3169
|
+
}, this.columns.map(col => {
|
|
3170
|
+
var _a;
|
|
3171
|
+
// 3) For the “actions” column, override the header to “Actions”
|
|
3172
|
+
if (col === 'actions') {
|
|
3173
|
+
// You can choose a smaller min‐width here if you wish:
|
|
3174
|
+
return h("th", {
|
|
3175
|
+
class: "m-0 py-8 border border-softer f-ui-02 break-words",
|
|
3176
|
+
style: {
|
|
3177
|
+
minWidth: `${columnWidth - 4}px`
|
|
3178
|
+
}
|
|
3179
|
+
}, "Actions");
|
|
3180
|
+
}
|
|
3181
|
+
// Otherwise, render column name or action label if you do want to override:
|
|
3182
|
+
if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
|
|
3183
|
+
return h("th", {
|
|
3184
|
+
class: "m-0 py-8 border border-softer f-ui-02 break-words",
|
|
3185
|
+
style: {
|
|
3186
|
+
minWidth: `${columnWidth - 4}px`
|
|
3187
|
+
}
|
|
3188
|
+
}, this.capitalize(col));
|
|
3189
|
+
}
|
|
3190
|
+
return null;
|
|
3191
|
+
}))), h("tbody", {
|
|
3192
|
+
key: '133af82fdd1f820e853734ab48123cb3db527e15'
|
|
3193
|
+
}, paginatedRows.map(row => h("tr", {
|
|
3194
|
+
class: "m-0 p-0 border border-softer even:bg-inverse-softer"
|
|
3195
|
+
}, this.columns.map(col => {
|
|
3196
|
+
var _a;
|
|
3197
|
+
if (col === 'actions') {
|
|
3198
|
+
// 4) Render ALL actions inside a single <td> for this row:
|
|
3199
|
+
return h("td", {
|
|
3200
|
+
class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell",
|
|
3201
|
+
style: {
|
|
3202
|
+
minWidth: `${columnWidth - 4}px`
|
|
3203
|
+
}
|
|
3204
|
+
}, h("div", {
|
|
3205
|
+
style: {
|
|
3206
|
+
display: 'flex',
|
|
3207
|
+
gap: '0.5rem',
|
|
3208
|
+
justifyContent: 'center',
|
|
3209
|
+
flexWrap: 'wrap'
|
|
3210
|
+
}
|
|
3211
|
+
}, this.parsedActions.map(act => h("span", {
|
|
3212
|
+
style: {
|
|
3213
|
+
whiteSpace: 'nowrap'
|
|
3214
|
+
}
|
|
3215
|
+
}, this.renderSingleActionCell(act.name, row)))));
|
|
3216
|
+
}
|
|
3217
|
+
if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
|
|
3218
|
+
// Regular data cell:
|
|
3219
|
+
return h("td", {
|
|
3220
|
+
class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
|
|
3221
|
+
style: {
|
|
3222
|
+
minWidth: `${columnWidth - 4}px`
|
|
3223
|
+
}
|
|
3224
|
+
}, this.renderCell(row[col], col));
|
|
3225
|
+
}
|
|
3226
|
+
return null;
|
|
3227
|
+
})))))), this.shouldEnablePagination() && h("div", {
|
|
3228
|
+
key: '85032d06cd0ac5dae9b504d423fceba3cd074861',
|
|
3229
|
+
class: "mt-20"
|
|
3230
|
+
}, h("eds-pagination", {
|
|
3231
|
+
key: '8caf6f57960e222c04d45f57a5811cd7bd524f4c',
|
|
3232
|
+
currentPage: this.currentPage,
|
|
3233
|
+
lastPage: lastPage,
|
|
3234
|
+
perPage: this.rowsPerPage,
|
|
3235
|
+
total: this.totalRows,
|
|
3236
|
+
mode: "default"
|
|
3237
|
+
})));
|
|
3238
|
+
}
|
|
3239
|
+
get hostEl() {
|
|
3240
|
+
return getElement(this);
|
|
3241
|
+
}
|
|
3242
|
+
static get watchers() {
|
|
3243
|
+
return {
|
|
3244
|
+
"data": ["handleDataChange", "parseData"],
|
|
3245
|
+
"config": ["handleConfigChange"],
|
|
3246
|
+
"actions": ["handleActionsChange"]
|
|
3247
|
+
};
|
|
3248
|
+
}
|
|
3249
|
+
};
|
|
3250
|
+
EdsTable.style = EdsTableStyle0;
|
|
3203
3251
|
const edsTabsCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(147 197 253 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor;}::before,::after{--tw-content:''}a{color:inherit;text-decoration:inherit}.relative{position:relative}.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)}.whitespace-nowrap{white-space:nowrap}.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)}.focus-visible\\:text-default:focus-visible{color:var(--black)}.hover\\:text-default:hover{color:var(--black)}.border-2{border-width:2px}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:bottom-0::after{bottom:0rem}.after\\:border-0::after{border-width:0px}.after\\:border-b-2::after{border-bottom-width:2px}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:rounded-lg::after{border-radius:16px}.after\\:border-solid::after{border-style:solid}.after\\:border-3::after{border-width:3px}.after\\:border-accent::after{border-color:var(--green-500)}.after\\:opacity-0::after{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:after\\:opacity-100:focus-visible::after{opacity:1}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.rounded-tl-lg{border-top-left-radius:16px}.rounded-tr-lg{border-top-right-radius:16px}.border-l-0{border-left-width:0px}.border-r-0{border-right-width:0px}.pr-28{padding-right:1.75rem}.pl-28{padding-left:1.75rem}.-mr-16{margin-right:-1rem}.-ml-16{margin-left:-1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-12{padding-top:0.75rem;padding-bottom:0.75rem}.after\\:left-16::after{left:1rem}.after\\:right-16::after{right:1rem}.text-lighter{color:var(--grey-600)}.bg-dark{background-color:var(--grey-300)}.hover\\:bg-darker:hover{background-color:var(--grey-400)}.border-soft{border-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.bg-default{background-color:var(--grey-200)}.text-default{color:var(--black)}.z-99{z-index:99}.before\\:bottom-0::before{bottom:0rem}.before\\:h-12::before{height:0.75rem}.before\\:opacity-5::before{opacity:0.05}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:absolute::before{position:absolute}.before\\:-bottom-2::before{bottom:-0.125rem}.after\\:inset-x-0::after{left:0rem;right:0rem}.before\\:inset-x-0::before{left:0rem;right:0rem}.before\\:h-3::before{height:0.1875rem}.before\\:bg-default::before{background-color:var(--grey-200)}.after\\:border-softest::after{border-color:rgba(0, 0, 0, .05)}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.before\\:bg-gradient-y::before{background:linear-gradient(to bottom, transparent, ease-in-out, black)}.scroller-x{-ms-overflow-style:none;scrollbar-width:none}.overflow-x-auto{overflow-x:auto}.max-w-xxxl{max-width:2200px}.z-1{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.pt-8{padding-top:0.5rem}.pr-16{padding-right:1rem}.pl-16{padding-left:1rem}.inline-flex{display:inline-flex}@media (min-width: 900px){.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width: 2200px){.xxxl\\:px-0{padding-left:0rem;padding-right:0rem}}";
|
|
3204
3252
|
const EdsTabsStyle0 = edsTabsCss;
|
|
3205
3253
|
const EdsTabs = class {
|
|
@@ -3388,39 +3436,6 @@ const EdsTag = class {
|
|
|
3388
3436
|
}
|
|
3389
3437
|
};
|
|
3390
3438
|
EdsTag.style = EdsTagStyle0;
|
|
3391
|
-
const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.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)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.bottom-full{bottom:100%}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}";
|
|
3392
|
-
const EdsTooltipStyle0 = edsTooltipCss;
|
|
3393
|
-
const EdsTooltip = class {
|
|
3394
|
-
constructor(hostRef) {
|
|
3395
|
-
registerInstance(this, hostRef);
|
|
3396
|
-
this.content = undefined;
|
|
3397
|
-
}
|
|
3398
|
-
/** fire analytics on every hover */
|
|
3399
|
-
handleHover() {
|
|
3400
|
-
sendAnalytics({
|
|
3401
|
-
category: 'ui-component',
|
|
3402
|
-
tag: this.el.tagName.toLowerCase(),
|
|
3403
|
-
name: this.content.toLowerCase(),
|
|
3404
|
-
action: 'hover'
|
|
3405
|
-
});
|
|
3406
|
-
}
|
|
3407
|
-
render() {
|
|
3408
|
-
return h("div", {
|
|
3409
|
-
key: 'cf17cd61cd5888d6ea12bf6be0fb8c841072b4d6',
|
|
3410
|
-
class: "relative inline-block group"
|
|
3411
|
-
}, h("slot", {
|
|
3412
|
-
key: '7a41d90940fff4e8b887ec4a3240371466f219a5'
|
|
3413
|
-
}), h("div", {
|
|
3414
|
-
key: 'ccf06592f4c977030b0cf54cce48d13889c059f3',
|
|
3415
|
-
class: "absolute bottom-full left-1/2 \n transform -translate-x-1/2 mb-2\n rounded-xs bg-strongest text-inverse \n f-ui-03-light pointer-events-none \n z-10 whitespace-nowrap p-6 opacity-0 transition-opacity duration-150 ease-in-out\n group-hover:opacity-100",
|
|
3416
|
-
role: "tooltip"
|
|
3417
|
-
}, this.content));
|
|
3418
|
-
}
|
|
3419
|
-
get el() {
|
|
3420
|
-
return getElement(this);
|
|
3421
|
-
}
|
|
3422
|
-
};
|
|
3423
|
-
EdsTooltip.style = EdsTooltipStyle0;
|
|
3424
3439
|
const edsUserCss = "hr,p{margin:0}.block{display:block}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.text-default{color:var(--black)}.min-w-\\[280px\\]{min-width:280px}.p-8{padding:0.5rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.gap-y-8{row-gap:0.5rem}.pb-16{padding-bottom:1rem}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1 )}.max-w-full{max-width:100%}.w-full{width:100%}.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-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)}.mt-4{margin-top:0.25rem}.mt-16{margin-top:1rem}";
|
|
3425
3440
|
const EdsUserStyle0 = edsUserCss;
|
|
3426
3441
|
const EdsUser = class {
|
|
@@ -3458,8 +3473,8 @@ const EdsUser = class {
|
|
|
3458
3473
|
key: 'ccc34b3c7b0ab8d515eebfa1962264365d20c788',
|
|
3459
3474
|
class: "flex items-center"
|
|
3460
3475
|
}, h("eds-dropdown", {
|
|
3461
|
-
key: '
|
|
3462
|
-
label: `
|
|
3476
|
+
key: 'dc4920fd442baa9f13d9f2b9a21065b5184eba83',
|
|
3477
|
+
label: `Hi, ${user.preferred_username}`,
|
|
3463
3478
|
intent: "tertiary",
|
|
3464
3479
|
"aria-label": "User Menu",
|
|
3465
3480
|
"dropdown-pos": "right",
|
|
@@ -3467,36 +3482,36 @@ const EdsUser = class {
|
|
|
3467
3482
|
icon: "chevron-down",
|
|
3468
3483
|
class: "text-default"
|
|
3469
3484
|
}, h("div", {
|
|
3470
|
-
key: '
|
|
3485
|
+
key: '0522db7fc229186c645665a4c9eeedc46fb5823b',
|
|
3471
3486
|
class: "min-w-[280px] p-8"
|
|
3472
3487
|
}, h("div", {
|
|
3473
|
-
key: '
|
|
3488
|
+
key: 'af7b9daec713d24f8a1415415d19cdf48905c0cb',
|
|
3474
3489
|
class: "flex gap-x-16"
|
|
3475
3490
|
}, h("eds-avatar", {
|
|
3476
|
-
key: '
|
|
3491
|
+
key: 'c3ea7307d9beb597fe93d3942b7724f8526298ad',
|
|
3477
3492
|
"first-name": user.given_name,
|
|
3478
3493
|
"last-name": user.family_name,
|
|
3479
3494
|
initials: this.initials,
|
|
3480
3495
|
color: "grey"
|
|
3481
3496
|
}), h("div", {
|
|
3482
|
-
key: '
|
|
3497
|
+
key: '7af823b5f38a3d7acf16c633471dcfe74bca5e3c',
|
|
3483
3498
|
class: "max-w-full"
|
|
3484
3499
|
}, user.name && h("p", {
|
|
3485
|
-
key: '
|
|
3500
|
+
key: '5973dfbac0efceeddb0dc211d9c502a1ad3b0dde',
|
|
3486
3501
|
class: "f-ui-01 text-default w-full text-ellipsis"
|
|
3487
3502
|
}, user.name), user.preferred_username && h("p", {
|
|
3488
|
-
key: '
|
|
3503
|
+
key: '5989927760ed2a2d1365661bbdc112a3a3d23bbf',
|
|
3489
3504
|
class: "f-ui-03-light text-light mt-4"
|
|
3490
3505
|
}, user.preferred_username), user.email && h("p", {
|
|
3491
|
-
key: '
|
|
3506
|
+
key: 'ee36be95298c0c7a748537012d48a85884955904',
|
|
3492
3507
|
class: "f-ui-03-light text-light mt-4"
|
|
3493
3508
|
}, user.email))), h("eds-block-break", {
|
|
3494
|
-
key: '
|
|
3509
|
+
key: 'fb3ef5cad6e81f51983e54914412131c3bd4cbc2'
|
|
3495
3510
|
}), h("div", {
|
|
3496
|
-
key: '
|
|
3511
|
+
key: 'e3784f3f4931378bf55d766d4a1cf5e24a75d462',
|
|
3497
3512
|
class: "text-default flex w-full flex-col gap-y-8"
|
|
3498
3513
|
}, h("slot", {
|
|
3499
|
-
key: '
|
|
3514
|
+
key: 'c0052bb56286d9a3fdc686c8407e105499a38084'
|
|
3500
3515
|
}))))));
|
|
3501
3516
|
}
|
|
3502
3517
|
get hostEl() {
|
|
@@ -3504,91 +3519,5 @@ const EdsUser = class {
|
|
|
3504
3519
|
}
|
|
3505
3520
|
};
|
|
3506
3521
|
EdsUser.style = EdsUserStyle0;
|
|
3507
|
-
const TokenSpacing = class {
|
|
3508
|
-
constructor(hostRef) {
|
|
3509
|
-
registerInstance(this, hostRef);
|
|
3510
|
-
}
|
|
3511
|
-
render() {
|
|
3512
|
-
return h("div", {
|
|
3513
|
-
key: 'ad89d21ec01f11c77d85853f7c0dbefd8ea9f07f',
|
|
3514
|
-
class: "w-full"
|
|
3515
|
-
}, h("ul", {
|
|
3516
|
-
key: '6108fb2870c358de8e5c48e6d14f6c1e76af856f',
|
|
3517
|
-
class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
|
|
3518
|
-
}, h("li", {
|
|
3519
|
-
key: 'cd0d1986b416f12164b8d0458262987a445662ca',
|
|
3520
|
-
class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
|
|
3521
|
-
}, h("div", {
|
|
3522
|
-
key: 'f2cfd77fcba601b89605dabf109f599816bb118e',
|
|
3523
|
-
class: "container p-8 item-center border-2 border-soft"
|
|
3524
|
-
}, h("div", {
|
|
3525
|
-
key: '69e4cb5660f5c51d2b9c1ba30a38f3b7decacc58',
|
|
3526
|
-
class: "spacing-sample m-16 bg-strong"
|
|
3527
|
-
}, h("span", {
|
|
3528
|
-
key: '70a07326b0a95655db3aad083637499f5ed4aa73',
|
|
3529
|
-
class: "f-body-01 text-inverse"
|
|
3530
|
-
}, "Margin: 1rem / m-16")))), h("li", {
|
|
3531
|
-
key: '97b8c127e9bbe9af4ec8f6876ebae3f87a52d130',
|
|
3532
|
-
class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
|
|
3533
|
-
}, h("div", {
|
|
3534
|
-
key: '58537d6aa824b489ae9c5150400af21f11f1f447',
|
|
3535
|
-
class: "container p-8 item-center border-2 border-soft"
|
|
3536
|
-
}, h("div", {
|
|
3537
|
-
key: '3f2913d232cb9de1b678b7f7903bef0642ef42df',
|
|
3538
|
-
class: "spacing-sample ml-64 bg-strong"
|
|
3539
|
-
}, h("span", {
|
|
3540
|
-
key: 'fe56d1a501dc219a1bac474b674586609499f3de',
|
|
3541
|
-
class: "f-body-01 text-inverse"
|
|
3542
|
-
}, "Margin Left: 4rem / ml-64")))), h("li", {
|
|
3543
|
-
key: 'e2dee648fd4bce503414d76f3afe64655285523c',
|
|
3544
|
-
class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
|
|
3545
|
-
}, h("div", {
|
|
3546
|
-
key: 'e788fa22248ac92fb8bc89566c5b8a77cf14578f',
|
|
3547
|
-
class: "container p-8 item-center border-2 border-soft"
|
|
3548
|
-
}, h("div", {
|
|
3549
|
-
key: '9629958b453aa831a1d871bb4e846d0926d9e57c',
|
|
3550
|
-
class: "spacing-sample mt-32 bg-strong"
|
|
3551
|
-
}, h("span", {
|
|
3552
|
-
key: '0efde7eaed0fe3e14f476617e7e9bf2e20131f2c',
|
|
3553
|
-
class: "f-body-01 text-inverse"
|
|
3554
|
-
}, "Margin Top: 2rem / mt-32")))), h("li", {
|
|
3555
|
-
key: '6dabfeb0086c784c50843abd12d5a505a56e0933',
|
|
3556
|
-
class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
|
|
3557
|
-
}, h("div", {
|
|
3558
|
-
key: '164e7eec6ed3aad2847c4ede97f4bbfed34138d1',
|
|
3559
|
-
class: "container p-8 item-center border-2 border-soft"
|
|
3560
|
-
}, h("div", {
|
|
3561
|
-
key: '9be99b05ba29204f6163df2c1522e7aa6211bd3d',
|
|
3562
|
-
class: "spacing-sample p-32 bg-strong"
|
|
3563
|
-
}, h("span", {
|
|
3564
|
-
key: 'ae0a7ea74e31ea324015b844848c3d5a68930e8d',
|
|
3565
|
-
class: "f-body-01 text-inverse"
|
|
3566
|
-
}, "Padding: 2rem / p-32")))), h("li", {
|
|
3567
|
-
key: '3804dbfb6a64a1dfd478bd0132ff83f51bcff33e',
|
|
3568
|
-
class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
|
|
3569
|
-
}, h("div", {
|
|
3570
|
-
key: '75c96b0762c3fac8b4de897ab8147b2c5614a360',
|
|
3571
|
-
class: "container p-8 item-center border-2 border-soft"
|
|
3572
|
-
}, h("div", {
|
|
3573
|
-
key: 'd00487531406fa89112bee34e05306c59dc4f497',
|
|
3574
|
-
class: "spacing-sample pt-32 bg-strong"
|
|
3575
|
-
}, h("span", {
|
|
3576
|
-
key: '8a750b7ac07739a71949b236421427b8bb05b067',
|
|
3577
|
-
class: "f-body-01 text-inverse"
|
|
3578
|
-
}, "Padding Top: 2rem / pt-32")))), h("li", {
|
|
3579
|
-
key: '5e5fe43383f13b4377aca7cfb07c97b6ac1dd79b',
|
|
3580
|
-
class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
|
|
3581
|
-
}, h("div", {
|
|
3582
|
-
key: 'ed2ac88c543eba8c580d029ccacb1a8b26c1cae7',
|
|
3583
|
-
class: "container p-8 item-center border-2 border-soft"
|
|
3584
|
-
}, h("div", {
|
|
3585
|
-
key: 'cf9a94b61e598c0ee6da9e771717574b48264333',
|
|
3586
|
-
class: "spacing-sample pl-32 bg-strong"
|
|
3587
|
-
}, h("span", {
|
|
3588
|
-
key: 'a2d3fce66240c6b0d49d1a655c0b5a84be9c630d',
|
|
3589
|
-
class: "f-body-01 text-inverse"
|
|
3590
|
-
}, "Padding Left: 2rem / pl-32"))))));
|
|
3591
|
-
}
|
|
3592
|
-
};
|
|
3593
3522
|
|
|
3594
|
-
export { EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break,
|
|
3523
|
+
export { EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsButton as eds_button, EdsDropdown as eds_dropdown, EdsFooter as eds_footer, EdsForm as eds_form, EdsFullscreenMenu as eds_fullscreen_menu, EdsHeader as eds_header, EdsIconWrapper as eds_icon_wrapper, EdsImg as eds_img, EdsInput as eds_input, EdsInputField as eds_input_field, EdsInputFooter as eds_input_footer, EdsInputLabel as eds_input_label, EdsInputRange as eds_input_range, EdsInputSearch as eds_input_search, EdsInputSelect as eds_input_select, EdsLink as eds_link, EdsLogo as eds_logo, EdsModal as eds_modal, EdsPagination as eds_pagination, EdsSocialNetworks as eds_social_networks, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsTable as eds_table, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsUser as eds_user };
|