@eui/eds-wc 21.4.2-snapshot-1787820086373
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/package.json +242 -0
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @eui/eds-wc
|
|
2
|
+
|
|
3
|
+
Lit-based Web Components implementing the EDS (Europa Design System) component library.
|
|
4
|
+
|
|
5
|
+
These components mirror the API and visual output of `@eui/eds` Angular components but are framework-agnostic, built with [Lit](https://lit.dev/).
|
|
6
|
+
|
|
7
|
+
## Prerequisites
|
|
8
|
+
|
|
9
|
+
This package requires the EDS design tokens (CSS custom properties) to be loaded. Include the `@eui/eds-styles` stylesheet in your page:
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<link rel="stylesheet" href="path/to/@eui/eds-styles/dist/styles/eds.css" />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
The host page must also have the `eui-21` class on an ancestor element for tokens to resolve.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @eui/eds-wc
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<script type="module">
|
|
27
|
+
import '@eui/eds-wc';
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<!-- Icon -->
|
|
31
|
+
<eds-wc-icon icon="star" size="m" color="primary"></eds-wc-icon>
|
|
32
|
+
|
|
33
|
+
<!-- Badge -->
|
|
34
|
+
<eds-wc-badge color="critical" size="s">5</eds-wc-badge>
|
|
35
|
+
|
|
36
|
+
<!-- Tag -->
|
|
37
|
+
<eds-wc-tag color="success" size="m">Active</eds-wc-tag>
|
|
38
|
+
|
|
39
|
+
<!-- Button -->
|
|
40
|
+
<eds-wc-button type="primary" color="primary" size="m">Click me</eds-wc-button>
|
|
41
|
+
|
|
42
|
+
<!-- Alert -->
|
|
43
|
+
<eds-wc-alert color="info" closeable>
|
|
44
|
+
<span slot="title">Heads up</span>
|
|
45
|
+
This is an informational alert.
|
|
46
|
+
</eds-wc-alert>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Components
|
|
50
|
+
|
|
51
|
+
| Component | Tag | Angular equivalent |
|
|
52
|
+
|-----------|-----|--------------------|
|
|
53
|
+
| Icon | `<eds-wc-icon>` | `<eds-icon>` |
|
|
54
|
+
| Badge | `<eds-wc-badge>` | `<eds-badge>` |
|
|
55
|
+
| Tag | `<eds-wc-tag>` | `<eds-tag>` |
|
|
56
|
+
| Button | `<eds-wc-button>` | `<button edsButton>` |
|
|
57
|
+
| Alert | `<eds-wc-alert>` | `<eds-alert>` |
|
|
58
|
+
|
|
59
|
+
## Tree-shaking
|
|
60
|
+
|
|
61
|
+
Import individual components for smaller bundles:
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
import '@eui/eds-wc/eds-button';
|
|
65
|
+
import '@eui/eds-wc/eds-icon';
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Design tokens
|
|
69
|
+
|
|
70
|
+
All components consume EDS CSS custom properties (`--eds-*`). No styles are hardcoded — visual output is driven entirely by the loaded EDS theme.
|
package/package.json
ADDED
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@eui/eds-wc",
|
|
3
|
+
"version": "21.4.2-snapshot-1787820086373",
|
|
4
|
+
"description": "EDS Web Components — Lit-based web component wrappers of @eui/eds design system components",
|
|
5
|
+
"homepage": "https://eui.ecdevops.eu",
|
|
6
|
+
"author": "ec.europa.eui@gmail.com",
|
|
7
|
+
"license": "EUPL-1.1",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"main": "./dist/index.js",
|
|
10
|
+
"module": "./dist/index.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"default": "./dist/index.js"
|
|
16
|
+
},
|
|
17
|
+
"./eds-icon": {
|
|
18
|
+
"types": "./dist/eds-icon/index.d.ts",
|
|
19
|
+
"default": "./dist/eds-icon/index.js"
|
|
20
|
+
},
|
|
21
|
+
"./eds-badge": {
|
|
22
|
+
"types": "./dist/eds-badge/index.d.ts",
|
|
23
|
+
"default": "./dist/eds-badge/index.js"
|
|
24
|
+
},
|
|
25
|
+
"./eds-tag": {
|
|
26
|
+
"types": "./dist/eds-tag/index.d.ts",
|
|
27
|
+
"default": "./dist/eds-tag/index.js"
|
|
28
|
+
},
|
|
29
|
+
"./eds-button": {
|
|
30
|
+
"types": "./dist/eds-button/index.d.ts",
|
|
31
|
+
"default": "./dist/eds-button/index.js"
|
|
32
|
+
},
|
|
33
|
+
"./eds-alert": {
|
|
34
|
+
"types": "./dist/eds-alert/index.d.ts",
|
|
35
|
+
"default": "./dist/eds-alert/index.js"
|
|
36
|
+
},
|
|
37
|
+
"./shared": {
|
|
38
|
+
"types": "./dist/shared/index.d.ts",
|
|
39
|
+
"default": "./dist/shared/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./eds-icon-button": {
|
|
42
|
+
"types": "./dist/eds-icon-button/index.d.ts",
|
|
43
|
+
"default": "./dist/eds-icon-button/index.js"
|
|
44
|
+
},
|
|
45
|
+
"./eds-tooltip": {
|
|
46
|
+
"types": "./dist/eds-tooltip/index.d.ts",
|
|
47
|
+
"default": "./dist/eds-tooltip/index.js"
|
|
48
|
+
},
|
|
49
|
+
"./eds-chip": {
|
|
50
|
+
"types": "./dist/eds-chip/index.d.ts",
|
|
51
|
+
"default": "./dist/eds-chip/index.js"
|
|
52
|
+
},
|
|
53
|
+
"./eds-tabs": {
|
|
54
|
+
"types": "./dist/eds-tabs/index.d.ts",
|
|
55
|
+
"default": "./dist/eds-tabs/index.js"
|
|
56
|
+
},
|
|
57
|
+
"./eds-progress-bar": {
|
|
58
|
+
"types": "./dist/eds-progress-bar/index.d.ts",
|
|
59
|
+
"default": "./dist/eds-progress-bar/index.js"
|
|
60
|
+
},
|
|
61
|
+
"./eds-toggle": {
|
|
62
|
+
"types": "./dist/eds-toggle/index.d.ts",
|
|
63
|
+
"default": "./dist/eds-toggle/index.js"
|
|
64
|
+
},
|
|
65
|
+
"./eds-card": {
|
|
66
|
+
"types": "./dist/eds-card/index.d.ts",
|
|
67
|
+
"default": "./dist/eds-card/index.js"
|
|
68
|
+
},
|
|
69
|
+
"./eds-accordion": {
|
|
70
|
+
"types": "./dist/eds-accordion/index.d.ts",
|
|
71
|
+
"default": "./dist/eds-accordion/index.js"
|
|
72
|
+
},
|
|
73
|
+
"./eds-avatar": {
|
|
74
|
+
"types": "./dist/eds-avatar/index.d.ts",
|
|
75
|
+
"default": "./dist/eds-avatar/index.js"
|
|
76
|
+
},
|
|
77
|
+
"./eds-skeleton": {
|
|
78
|
+
"types": "./dist/eds-skeleton/index.d.ts",
|
|
79
|
+
"default": "./dist/eds-skeleton/index.js"
|
|
80
|
+
},
|
|
81
|
+
"./eds-progress-circle": {
|
|
82
|
+
"types": "./dist/eds-progress-circle/index.d.ts",
|
|
83
|
+
"default": "./dist/eds-progress-circle/index.js"
|
|
84
|
+
},
|
|
85
|
+
"./eds-feedback-message": {
|
|
86
|
+
"types": "./dist/eds-feedback-message/index.d.ts",
|
|
87
|
+
"default": "./dist/eds-feedback-message/index.js"
|
|
88
|
+
},
|
|
89
|
+
"./eds-input-text": {
|
|
90
|
+
"types": "./dist/eds-input-text/index.d.ts",
|
|
91
|
+
"default": "./dist/eds-input-text/index.js"
|
|
92
|
+
},
|
|
93
|
+
"./eds-input-checkbox": {
|
|
94
|
+
"types": "./dist/eds-input-checkbox/index.d.ts",
|
|
95
|
+
"default": "./dist/eds-input-checkbox/index.js"
|
|
96
|
+
},
|
|
97
|
+
"./eds-input-radio": {
|
|
98
|
+
"types": "./dist/eds-input-radio/index.d.ts",
|
|
99
|
+
"default": "./dist/eds-input-radio/index.js"
|
|
100
|
+
},
|
|
101
|
+
"./eds-select": {
|
|
102
|
+
"types": "./dist/eds-select/index.d.ts",
|
|
103
|
+
"default": "./dist/eds-select/index.js"
|
|
104
|
+
},
|
|
105
|
+
"./eds-rating": {
|
|
106
|
+
"types": "./dist/eds-rating/index.d.ts",
|
|
107
|
+
"default": "./dist/eds-rating/index.js"
|
|
108
|
+
},
|
|
109
|
+
"./eds-empty-state": {
|
|
110
|
+
"types": "./dist/eds-empty-state/index.d.ts",
|
|
111
|
+
"default": "./dist/eds-empty-state/index.js"
|
|
112
|
+
},
|
|
113
|
+
"./eds-textarea": {
|
|
114
|
+
"types": "./dist/eds-textarea/index.d.ts",
|
|
115
|
+
"default": "./dist/eds-textarea/index.js"
|
|
116
|
+
},
|
|
117
|
+
"./eds-label": {
|
|
118
|
+
"types": "./dist/eds-label/index.d.ts",
|
|
119
|
+
"default": "./dist/eds-label/index.js"
|
|
120
|
+
},
|
|
121
|
+
"./eds-fieldset": {
|
|
122
|
+
"types": "./dist/eds-fieldset/index.d.ts",
|
|
123
|
+
"default": "./dist/eds-fieldset/index.js"
|
|
124
|
+
},
|
|
125
|
+
"./eds-blockquote": {
|
|
126
|
+
"types": "./dist/eds-blockquote/index.d.ts",
|
|
127
|
+
"default": "./dist/eds-blockquote/index.js"
|
|
128
|
+
},
|
|
129
|
+
"./eds-list": {
|
|
130
|
+
"types": "./dist/eds-list/index.d.ts",
|
|
131
|
+
"default": "./dist/eds-list/index.js"
|
|
132
|
+
},
|
|
133
|
+
"./eds-date-block": {
|
|
134
|
+
"types": "./dist/eds-date-block/index.d.ts",
|
|
135
|
+
"default": "./dist/eds-date-block/index.js"
|
|
136
|
+
},
|
|
137
|
+
"./eds-breadcrumb": {
|
|
138
|
+
"types": "./dist/eds-breadcrumb/index.d.ts",
|
|
139
|
+
"default": "./dist/eds-breadcrumb/index.js"
|
|
140
|
+
},
|
|
141
|
+
"./eds-paginator": {
|
|
142
|
+
"types": "./dist/eds-paginator/index.d.ts",
|
|
143
|
+
"default": "./dist/eds-paginator/index.js"
|
|
144
|
+
},
|
|
145
|
+
"./eds-wizard": {
|
|
146
|
+
"types": "./dist/eds-wizard/index.d.ts",
|
|
147
|
+
"default": "./dist/eds-wizard/index.js"
|
|
148
|
+
},
|
|
149
|
+
"./eds-timeline": {
|
|
150
|
+
"types": "./dist/eds-timeline/index.d.ts",
|
|
151
|
+
"default": "./dist/eds-timeline/index.js"
|
|
152
|
+
},
|
|
153
|
+
"./eds-block-content": {
|
|
154
|
+
"types": "./dist/eds-block-content/index.d.ts",
|
|
155
|
+
"default": "./dist/eds-block-content/index.js"
|
|
156
|
+
},
|
|
157
|
+
"./eds-banner": {
|
|
158
|
+
"types": "./dist/eds-banner/index.d.ts",
|
|
159
|
+
"default": "./dist/eds-banner/index.js"
|
|
160
|
+
},
|
|
161
|
+
"./eds-input-number": {
|
|
162
|
+
"types": "./dist/eds-input-number/index.d.ts",
|
|
163
|
+
"default": "./dist/eds-input-number/index.js"
|
|
164
|
+
},
|
|
165
|
+
"./eds-slider": {
|
|
166
|
+
"types": "./dist/eds-slider/index.d.ts",
|
|
167
|
+
"default": "./dist/eds-slider/index.js"
|
|
168
|
+
},
|
|
169
|
+
"./eds-tag-group": {
|
|
170
|
+
"types": "./dist/eds-tag-group/index.d.ts",
|
|
171
|
+
"default": "./dist/eds-tag-group/index.js"
|
|
172
|
+
},
|
|
173
|
+
"./eds-icon-toggle": {
|
|
174
|
+
"types": "./dist/eds-icon-toggle/index.d.ts",
|
|
175
|
+
"default": "./dist/eds-icon-toggle/index.js"
|
|
176
|
+
},
|
|
177
|
+
"./eds-button-group": {
|
|
178
|
+
"types": "./dist/eds-button-group/index.d.ts",
|
|
179
|
+
"default": "./dist/eds-button-group/index.js"
|
|
180
|
+
},
|
|
181
|
+
"./eds-fab-button": {
|
|
182
|
+
"types": "./dist/eds-fab-button/index.d.ts",
|
|
183
|
+
"default": "./dist/eds-fab-button/index.js"
|
|
184
|
+
},
|
|
185
|
+
"./eds-page": {
|
|
186
|
+
"types": "./dist/eds-page/index.d.ts",
|
|
187
|
+
"default": "./dist/eds-page/index.js"
|
|
188
|
+
},
|
|
189
|
+
"./eds-block-document": {
|
|
190
|
+
"types": "./dist/eds-block-document/index.d.ts",
|
|
191
|
+
"default": "./dist/eds-block-document/index.js"
|
|
192
|
+
},
|
|
193
|
+
"./eds-dimmer": {
|
|
194
|
+
"types": "./dist/eds-dimmer/index.d.ts",
|
|
195
|
+
"default": "./dist/eds-dimmer/index.js"
|
|
196
|
+
},
|
|
197
|
+
"./eds-disable-content": {
|
|
198
|
+
"types": "./dist/eds-disable-content/index.d.ts",
|
|
199
|
+
"default": "./dist/eds-disable-content/index.js"
|
|
200
|
+
},
|
|
201
|
+
"./eds-input-button": {
|
|
202
|
+
"types": "./dist/eds-input-button/index.d.ts",
|
|
203
|
+
"default": "./dist/eds-input-button/index.js"
|
|
204
|
+
},
|
|
205
|
+
"./eds-input-group": {
|
|
206
|
+
"types": "./dist/eds-input-group/index.d.ts",
|
|
207
|
+
"default": "./dist/eds-input-group/index.js"
|
|
208
|
+
},
|
|
209
|
+
"./eds-input-icon": {
|
|
210
|
+
"types": "./dist/eds-input-icon/index.d.ts",
|
|
211
|
+
"default": "./dist/eds-input-icon/index.js"
|
|
212
|
+
},
|
|
213
|
+
"./eds-chip-list": {
|
|
214
|
+
"types": "./dist/eds-chip-list/index.d.ts",
|
|
215
|
+
"default": "./dist/eds-chip-list/index.js"
|
|
216
|
+
},
|
|
217
|
+
"./eds-carousel": {
|
|
218
|
+
"types": "./dist/eds-carousel/index.d.ts",
|
|
219
|
+
"default": "./dist/eds-carousel/index.js"
|
|
220
|
+
},
|
|
221
|
+
"./eds-discussion-thread": {
|
|
222
|
+
"types": "./dist/eds-discussion-thread/index.d.ts",
|
|
223
|
+
"default": "./dist/eds-discussion-thread/index.js"
|
|
224
|
+
},
|
|
225
|
+
"./eds-file-upload": {
|
|
226
|
+
"types": "./dist/eds-file-upload/index.d.ts",
|
|
227
|
+
"default": "./dist/eds-file-upload/index.js"
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
"files": [
|
|
231
|
+
"dist",
|
|
232
|
+
"!dist/**/*.spec.*"
|
|
233
|
+
],
|
|
234
|
+
"engines": {
|
|
235
|
+
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
|
|
236
|
+
},
|
|
237
|
+
"repository": {
|
|
238
|
+
"type": "git",
|
|
239
|
+
"url": "https://sdlc.webcloud.ec.europa.eu/csdr/eui/eui.git"
|
|
240
|
+
},
|
|
241
|
+
"tag": "snapshot"
|
|
242
|
+
}
|