@vaadin/map 24.8.4 → 25.0.0-alpha10
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/package.json +13 -14
- package/src/styles/vaadin-map-base-styles.js +415 -0
- package/{theme/lumo/vaadin-lit-map.js → src/styles/vaadin-map-core-styles.d.ts} +3 -2
- package/src/{vaadin-map-styles.js → styles/vaadin-map-core-styles.js} +2 -2
- package/src/vaadin-map.js +18 -7
- package/theme/lumo/vaadin-map-styles.js +2 -9
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
- package/src/vaadin-lit-map.js +0 -48
- package/theme/lumo/vaadin-lit-map.d.ts +0 -12
- package/theme/material/vaadin-lit-map.d.ts +0 -12
- package/theme/material/vaadin-lit-map.js +0 -12
- package/theme/material/vaadin-map-styles.d.ts +0 -13
- package/theme/material/vaadin-map-styles.js +0 -152
- package/theme/material/vaadin-map.d.ts +0 -12
- package/theme/material/vaadin-map.js +0 -12
- package/vaadin-lit-map.d.ts +0 -1
- package/vaadin-lit-map.js +0 -2
- /package/src/{vaadin-map-styles.d.ts → styles/vaadin-map-base-styles.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/map",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
+
"!src/styles/*-base-styles.d.ts",
|
|
25
|
+
"!src/styles/*-base-styles.js",
|
|
24
26
|
"theme",
|
|
25
27
|
"vaadin-*.d.ts",
|
|
26
28
|
"vaadin-*.js",
|
|
@@ -31,24 +33,21 @@
|
|
|
31
33
|
"Vaadin",
|
|
32
34
|
"vaadin-map",
|
|
33
35
|
"web-components",
|
|
34
|
-
"web-component"
|
|
35
|
-
"polymer"
|
|
36
|
+
"web-component"
|
|
36
37
|
],
|
|
37
38
|
"dependencies": {
|
|
38
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@
|
|
40
|
-
"@vaadin/
|
|
41
|
-
"@vaadin/
|
|
42
|
-
"@vaadin/vaadin-
|
|
43
|
-
"@vaadin/vaadin-material-styles": "~24.8.4",
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "~24.8.4",
|
|
40
|
+
"@vaadin/a11y-base": "25.0.0-alpha10",
|
|
41
|
+
"@vaadin/component-base": "25.0.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
|
|
45
44
|
"lit": "^3.0.0",
|
|
46
|
-
"ol": "6.
|
|
45
|
+
"ol": "10.6.0"
|
|
47
46
|
},
|
|
48
47
|
"devDependencies": {
|
|
49
|
-
"@vaadin/chai-plugins": "
|
|
50
|
-
"@vaadin/test-runner-commands": "
|
|
51
|
-
"@vaadin/testing-helpers": "^
|
|
48
|
+
"@vaadin/chai-plugins": "25.0.0-alpha10",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha10",
|
|
50
|
+
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
51
|
"sinon": "^18.0.0"
|
|
53
52
|
},
|
|
54
53
|
"cvdlName": "vaadin-map",
|
|
@@ -56,5 +55,5 @@
|
|
|
56
55
|
"web-types.json",
|
|
57
56
|
"web-types.lit.json"
|
|
58
57
|
],
|
|
59
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
|
|
60
59
|
}
|
|
@@ -0,0 +1,415 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
+
*
|
|
5
|
+
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
+
*
|
|
7
|
+
*
|
|
8
|
+
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
+
* license.
|
|
10
|
+
*/
|
|
11
|
+
import '@vaadin/component-base/src/style-props.js';
|
|
12
|
+
import { css } from 'lit';
|
|
13
|
+
|
|
14
|
+
export const mapStyles = css`
|
|
15
|
+
:host {
|
|
16
|
+
display: block;
|
|
17
|
+
height: 400px;
|
|
18
|
+
flex: 1 1 auto;
|
|
19
|
+
align-self: stretch;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:host([hidden]) {
|
|
24
|
+
display: none !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host([focus-ring]) {
|
|
28
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
:host(:not([theme~='no-border'])) {
|
|
32
|
+
border-radius: var(--vaadin-map-border-radius, var(--vaadin-radius-m));
|
|
33
|
+
position: relative;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
:host(:not([theme~='no-border']))::before {
|
|
37
|
+
content: '';
|
|
38
|
+
position: absolute;
|
|
39
|
+
inset: 0;
|
|
40
|
+
border: 1px solid var(--vaadin-map-border-color, var(--vaadin-border-color));
|
|
41
|
+
border-radius: inherit;
|
|
42
|
+
z-index: 1;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
#map {
|
|
47
|
+
width: 100%;
|
|
48
|
+
height: 100%;
|
|
49
|
+
outline: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
#map,
|
|
53
|
+
.ol-viewport,
|
|
54
|
+
.ol-layers {
|
|
55
|
+
border-radius: inherit;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
#map:fullscreen {
|
|
60
|
+
border-radius: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
#map:-webkit-full-screen {
|
|
64
|
+
border-radius: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Functional styles, copied from 'ol/ol.css' */
|
|
68
|
+
|
|
69
|
+
.ol-box {
|
|
70
|
+
box-sizing: border-box;
|
|
71
|
+
border-radius: 2px;
|
|
72
|
+
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
73
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
74
|
+
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.ol-unsupported {
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.ol-viewport,
|
|
82
|
+
.ol-unselectable {
|
|
83
|
+
-webkit-touch-callout: none;
|
|
84
|
+
-webkit-user-select: none;
|
|
85
|
+
user-select: none;
|
|
86
|
+
-webkit-tap-highlight-color: transparent;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.ol-viewport canvas {
|
|
90
|
+
all: unset;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.ol-selectable {
|
|
94
|
+
-webkit-touch-callout: default;
|
|
95
|
+
-webkit-user-select: text;
|
|
96
|
+
user-select: text;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ol-grabbing {
|
|
100
|
+
cursor: grabbing;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.ol-grab {
|
|
104
|
+
cursor: move;
|
|
105
|
+
cursor: grab;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Control positioning and styling */
|
|
109
|
+
|
|
110
|
+
.ol-overlaycontainer-stopevent {
|
|
111
|
+
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
|
|
112
|
+
display: grid;
|
|
113
|
+
grid-template-columns: min-content 1fr min-content;
|
|
114
|
+
grid-template-rows: min-content 1fr min-content min-content min-content min-content;
|
|
115
|
+
padding: var(--vaadin-map-controls-inset, 4px);
|
|
116
|
+
box-sizing: border-box;
|
|
117
|
+
grid-template-areas:
|
|
118
|
+
'scale mouse-position fullscreen'
|
|
119
|
+
'overview-map . zoom-extent'
|
|
120
|
+
'overview-map . compass'
|
|
121
|
+
'overview-map . zoom-slider'
|
|
122
|
+
'overview-map . zoom'
|
|
123
|
+
'overview-map attribution attribution';
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.ol-mouse-position {
|
|
127
|
+
grid-area: mouse-position;
|
|
128
|
+
align-self: start;
|
|
129
|
+
text-align: center;
|
|
130
|
+
font-size: 0.625em;
|
|
131
|
+
color: #000;
|
|
132
|
+
filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ol-scale-line,
|
|
136
|
+
.ol-scale-bar {
|
|
137
|
+
grid-area: scale;
|
|
138
|
+
position: relative;
|
|
139
|
+
pointer-events: none !important;
|
|
140
|
+
color: #000;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.ol-scale-line-inner {
|
|
144
|
+
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
145
|
+
border-top: none;
|
|
146
|
+
font-size: 0.625em;
|
|
147
|
+
text-align: center;
|
|
148
|
+
will-change: contents, width, filter;
|
|
149
|
+
transition: all 0.25s;
|
|
150
|
+
filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.ol-scale-bar-inner {
|
|
154
|
+
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
155
|
+
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
|
|
156
|
+
overflow: hidden;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.ol-scale-step-marker {
|
|
160
|
+
display: none;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.ol-scale-step-text {
|
|
164
|
+
position: absolute;
|
|
165
|
+
top: 12px;
|
|
166
|
+
font-size: 0.625em;
|
|
167
|
+
color: #000;
|
|
168
|
+
filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.ol-scale-text {
|
|
174
|
+
position: absolute;
|
|
175
|
+
font-size: 0.625em;
|
|
176
|
+
top: 32px;
|
|
177
|
+
color: #000;
|
|
178
|
+
white-space: nowrap;
|
|
179
|
+
filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.ol-scale-singlebar {
|
|
183
|
+
height: 4px;
|
|
184
|
+
opacity: 0.5;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.ol-control {
|
|
188
|
+
margin: 4px;
|
|
189
|
+
border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.ol-control button {
|
|
193
|
+
appearance: none;
|
|
194
|
+
display: block;
|
|
195
|
+
border: 0;
|
|
196
|
+
margin: 0;
|
|
197
|
+
padding: 0;
|
|
198
|
+
color: inherit;
|
|
199
|
+
font: inherit;
|
|
200
|
+
width: var(--vaadin-map-control-size, 24px);
|
|
201
|
+
height: var(--vaadin-map-control-size, 24px);
|
|
202
|
+
border-radius: inherit;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.ol-control button::-moz-focus-inner {
|
|
206
|
+
border: none;
|
|
207
|
+
padding: 0;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.ol-compass {
|
|
211
|
+
grid-area: compass;
|
|
212
|
+
display: block;
|
|
213
|
+
will-change: transform;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.ol-zoom {
|
|
217
|
+
grid-area: zoom;
|
|
218
|
+
display: flex;
|
|
219
|
+
flex-direction: column;
|
|
220
|
+
gap: 2px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.ol-attribution {
|
|
224
|
+
grid-area: attribution;
|
|
225
|
+
margin-inline-start: auto !important;
|
|
226
|
+
display: flex;
|
|
227
|
+
flex-flow: row-reverse;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.ol-attribution.ol-uncollapsible {
|
|
231
|
+
margin-inline-end: calc(var(--vaadin-map-controls-inset, 4px) * -1);
|
|
232
|
+
margin-block-end: calc(var(--vaadin-map-controls-inset, 4px) * -1);
|
|
233
|
+
border-radius: var(--vaadin-radius) 0 0 0;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.ol-attribution button span:empty::before {
|
|
237
|
+
content: var(--vaadin-map-icon-attribution-collapse, '\\25B8');
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.ol-attribution.ol-collapsed button span:empty::before {
|
|
241
|
+
content: var(--vaadin-map-icon-attribution-expand, '\\2139');
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.ol-attribution ul {
|
|
245
|
+
display: flex;
|
|
246
|
+
align-items: center;
|
|
247
|
+
gap: 1em;
|
|
248
|
+
list-style: none;
|
|
249
|
+
margin: 0;
|
|
250
|
+
color: var(--vaadin-map-attribution-color, var(--vaadin-color-subtle));
|
|
251
|
+
padding: var(--vaadin-padding-container);
|
|
252
|
+
font-size: 0.8em;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.ol-attribution.ol-collapsed ul {
|
|
256
|
+
display: none;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.ol-attribution.ol-uncollapsible button {
|
|
260
|
+
display: none;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.ol-rotate {
|
|
264
|
+
grid-area: compass;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.ol-compass:empty::before {
|
|
268
|
+
mask-image: var(--_vaadin-icon-arrow-up);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.ol-full-screen {
|
|
272
|
+
grid-area: fullscreen;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.ol-full-screen button:empty::before {
|
|
276
|
+
mask-image: var(--_vaadin-icon-fullscreen);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.ol-full-screen .ol-full-screen-true:empty::before {
|
|
280
|
+
mask-image: var(--_vaadin-icon-cross);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.ol-overviewmap {
|
|
284
|
+
grid-area: overview-map;
|
|
285
|
+
align-self: end;
|
|
286
|
+
width: max-content;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.ol-overviewmap-map {
|
|
290
|
+
height: 160px;
|
|
291
|
+
width: 160px;
|
|
292
|
+
margin: 4px;
|
|
293
|
+
border: 0;
|
|
294
|
+
border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius));
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.ol-overviewmap:not(.ol-uncollapsible) .ol-overviewmap-map {
|
|
298
|
+
margin-bottom: 0;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
|
|
302
|
+
.ol-overviewmap.ol-uncollapsible button {
|
|
303
|
+
display: none;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.ol-overviewmap-box {
|
|
307
|
+
border: 1px dashed rgba(0, 0, 0, 0.5);
|
|
308
|
+
filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
|
|
309
|
+
will-change: filter;
|
|
310
|
+
cursor: move;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.ol-zoomslider {
|
|
314
|
+
grid-area: zoom-slider;
|
|
315
|
+
height: 128px;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.ol-zoomslider button {
|
|
319
|
+
position: relative;
|
|
320
|
+
height: 8px;
|
|
321
|
+
display: block;
|
|
322
|
+
border-radius: inherit;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.ol-zoom-extent {
|
|
326
|
+
grid-area: zoom-extent;
|
|
327
|
+
align-self: end;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* icons & controls styles */
|
|
331
|
+
.ol-overviewmap button span:empty {
|
|
332
|
+
display: contents;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.ol-overviewmap button span:empty::before {
|
|
336
|
+
mask-image: var(--vaadin-map-icon-overview-map-collapse, var(--_vaadin-icon-chevron-down));
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.ol-overviewmap.ol-collapsed button {
|
|
340
|
+
rotate: 180deg;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.ol-overviewmap button span:empty::before,
|
|
344
|
+
.ol-zoom-in:empty::before,
|
|
345
|
+
.ol-zoom-out:empty::before,
|
|
346
|
+
.ol-compass:empty::before,
|
|
347
|
+
.ol-full-screen button:empty::before,
|
|
348
|
+
.ol-full-screen-true:empty::before {
|
|
349
|
+
content: '';
|
|
350
|
+
display: block;
|
|
351
|
+
background: currentColor;
|
|
352
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
353
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
354
|
+
flex: none;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.ol-zoom-in:empty::before {
|
|
358
|
+
mask-image: var(--vaadin-map-icon-zoom-in, var(--_vaadin-icon-plus));
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.ol-zoom-out:empty::before {
|
|
362
|
+
mask-image: var(--vaadin-map-icon-zoom-out, var(--_vaadin-icon-minus));
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.ol-zoom button.ol-zoom-in {
|
|
366
|
+
border-bottom-left-radius: 0;
|
|
367
|
+
border-bottom-right-radius: 0;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.ol-zoom button.ol-zoom-out {
|
|
371
|
+
border-top-left-radius: 0;
|
|
372
|
+
border-top-right-radius: 0;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.ol-control button,
|
|
376
|
+
.ol-attribution:not(.ol-uncollapsible) ul {
|
|
377
|
+
transition: 0.15s opacity;
|
|
378
|
+
background: var(--vaadin-map-control-background, var(--vaadin-background-color));
|
|
379
|
+
color: var(--vaadin-map-control-color, var(--vaadin-subtle));
|
|
380
|
+
opacity: 0.65;
|
|
381
|
+
display: flex;
|
|
382
|
+
align-items: center;
|
|
383
|
+
justify-content: center;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.ol-control:not(.ol-uncollapsible):hover {
|
|
387
|
+
box-shadow: var(--vaadin-map-control-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2));
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.ol-attribution a {
|
|
391
|
+
color: inherit;
|
|
392
|
+
cursor: pointer;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.ol-control:hover button,
|
|
396
|
+
.ol-control button:focus,
|
|
397
|
+
.ol-attribution:hover ul {
|
|
398
|
+
opacity: 1;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.ol-control button:hover {
|
|
402
|
+
color: var(--vaadin-map-control-color-hover, var(--vaadin-color));
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.ol-control button:focus-visible {
|
|
406
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.ol-overviewmap:not(.ol-collapsed),
|
|
410
|
+
.ol-overviewmap:not(.ol-collapsed):hover {
|
|
411
|
+
background: var(--vaadin-map-control-background, var(--vaadin-background-color));
|
|
412
|
+
box-shadow: var(--vaadin-map-control-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2));
|
|
413
|
+
transition: 0.15s box-shadow;
|
|
414
|
+
}
|
|
415
|
+
`;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
-
import { css } from '
|
|
11
|
+
import { css } from 'lit';
|
|
12
12
|
|
|
13
13
|
export const mapStyles = css`
|
|
14
14
|
:host {
|
|
@@ -169,7 +169,7 @@ export const mapStyles = css`
|
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
.ol-control button {
|
|
172
|
-
|
|
172
|
+
appearance: none;
|
|
173
173
|
border: 0;
|
|
174
174
|
margin: 0;
|
|
175
175
|
padding: 0;
|
package/src/vaadin-map.js
CHANGED
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
-
import { html,
|
|
11
|
+
import { html, LitElement } from 'lit';
|
|
12
12
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
13
13
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
14
|
-
import {
|
|
14
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
15
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
16
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
17
|
+
import { mapStyles } from './styles/vaadin-map-core-styles.js';
|
|
15
18
|
import { MapMixin } from './vaadin-map-mixin.js';
|
|
16
|
-
import { mapStyles } from './vaadin-map-styles.js';
|
|
17
|
-
|
|
18
|
-
registerStyles('vaadin-map', mapStyles, { moduleId: 'vaadin-map-styles' });
|
|
19
19
|
|
|
20
20
|
/**
|
|
21
21
|
* `vaadin-map` is a web component for displaying web maps.
|
|
@@ -57,7 +57,7 @@ registerStyles('vaadin-map', mapStyles, { moduleId: 'vaadin-map-styles' });
|
|
|
57
57
|
* @mixes ThemableMixin
|
|
58
58
|
* @mixes ElementMixin
|
|
59
59
|
*/
|
|
60
|
-
class Map extends MapMixin(ThemableMixin(ElementMixin(
|
|
60
|
+
class Map extends MapMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
61
61
|
static get is() {
|
|
62
62
|
return 'vaadin-map';
|
|
63
63
|
}
|
|
@@ -66,7 +66,18 @@ class Map extends MapMixin(ThemableMixin(ElementMixin(PolymerElement))) {
|
|
|
66
66
|
return 'vaadin-map';
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
static get
|
|
69
|
+
static get styles() {
|
|
70
|
+
return mapStyles;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
static get lumoInjector() {
|
|
74
|
+
return {
|
|
75
|
+
includeBaseStyles: true,
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/** @protected */
|
|
80
|
+
render() {
|
|
70
81
|
return html``;
|
|
71
82
|
}
|
|
72
83
|
}
|
|
@@ -34,12 +34,12 @@ registerStyles(
|
|
|
34
34
|
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
:host(:not([theme~='
|
|
37
|
+
:host(:not([theme~='no-border'])) {
|
|
38
38
|
border-radius: var(--lumo-border-radius-l);
|
|
39
39
|
position: relative;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
:host(:not([theme~='
|
|
42
|
+
:host(:not([theme~='no-border']))::before {
|
|
43
43
|
content: '';
|
|
44
44
|
position: absolute;
|
|
45
45
|
inset: 0;
|
|
@@ -107,13 +107,6 @@ registerStyles(
|
|
|
107
107
|
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
@supports not selector(:focus-visible) {
|
|
111
|
-
.ol-control button:focus {
|
|
112
|
-
outline: none;
|
|
113
|
-
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
110
|
.ol-control button:focus-visible {
|
|
118
111
|
outline: none;
|
|
119
112
|
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
package/web-types.json
CHANGED
package/web-types.lit.json
CHANGED
package/src/vaadin-lit-map.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import { html, LitElement } from 'lit';
|
|
12
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
13
|
-
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
14
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
15
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
|
|
16
|
-
import { MapMixin } from './vaadin-map-mixin.js';
|
|
17
|
-
import { mapStyles } from './vaadin-map-styles.js';
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* LitElement based version of `<vaadin-map>` web component.
|
|
21
|
-
*
|
|
22
|
-
* ## Disclaimer
|
|
23
|
-
*
|
|
24
|
-
* This component is an experiment and not yet a part of Vaadin platform.
|
|
25
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
26
|
-
*/
|
|
27
|
-
class Map extends MapMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
|
|
28
|
-
static get is() {
|
|
29
|
-
return 'vaadin-map';
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
static get cvdlName() {
|
|
33
|
-
return 'vaadin-map';
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
static get styles() {
|
|
37
|
-
return mapStyles;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/** @protected */
|
|
41
|
-
render() {
|
|
42
|
-
return html``;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
defineCustomElement(Map);
|
|
47
|
-
|
|
48
|
-
export { Map };
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import './vaadin-map-styles.js';
|
|
12
|
-
import '../../src/vaadin-lit-map.js';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import './vaadin-map-styles.js';
|
|
12
|
-
import '../../src/vaadin-lit-map.js';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import './vaadin-map-styles.js';
|
|
12
|
-
import '../../src/vaadin-lit-map.js';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
12
|
-
import '@vaadin/vaadin-material-styles/shadow.js';
|
|
13
|
-
import '@vaadin/vaadin-material-styles/typography.js';
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
12
|
-
import '@vaadin/vaadin-material-styles/shadow.js';
|
|
13
|
-
import '@vaadin/vaadin-material-styles/typography.js';
|
|
14
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
|
-
|
|
16
|
-
registerStyles(
|
|
17
|
-
'vaadin-map',
|
|
18
|
-
css`
|
|
19
|
-
:host {
|
|
20
|
-
font-family: var(--material-font-family);
|
|
21
|
-
font-size: var(--material-body-font-size);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:host(:not([theme~='borderless'])) {
|
|
25
|
-
border-radius: 4px;
|
|
26
|
-
border: 1px solid var(--material-divider-color);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
:host([focus-ring]) {
|
|
30
|
-
box-shadow: 0 0 0 2px var(--material-primary-color);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.ol-control {
|
|
34
|
-
border-radius: 4px;
|
|
35
|
-
transition: 0.1s box-shadow;
|
|
36
|
-
box-shadow: var(--material-shadow-elevation-2dp);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.ol-control:hover {
|
|
40
|
-
background-color: var(--material-background-color);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.ol-control:not(.ol-uncollapsible):hover {
|
|
44
|
-
box-shadow: var(--material-shadow-elevation-4dp);
|
|
45
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.ol-control button {
|
|
49
|
-
width: 2em;
|
|
50
|
-
height: 2em;
|
|
51
|
-
background-color: var(--material-background-color);
|
|
52
|
-
border-radius: inherit;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.ol-control button,
|
|
56
|
-
.ol-attribution:not(.ol-uncollapsible) ul {
|
|
57
|
-
color: var(--material-secondary-text-color);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.ol-control:hover button,
|
|
61
|
-
.ol-attribution:hover ul {
|
|
62
|
-
color: var(--material-body-text-color);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.ol-control button:hover {
|
|
66
|
-
color: var(--material-primary-text-color);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.ol-control button:active {
|
|
70
|
-
background-color: var(--material-secondary-background-color);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
@supports not selector(:focus-visible) {
|
|
74
|
-
.ol-control button:focus {
|
|
75
|
-
outline: none;
|
|
76
|
-
box-shadow: 0 0 0 2px var(--material-primary-color);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.ol-control button:focus-visible {
|
|
81
|
-
outline: none;
|
|
82
|
-
box-shadow: 0 0 0 2px var(--material-primary-color);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.ol-zoom {
|
|
86
|
-
gap: 1px;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
button.ol-zoom-in {
|
|
90
|
-
border-bottom-left-radius: 0;
|
|
91
|
-
border-bottom-right-radius: 0;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
button.ol-zoom-out {
|
|
95
|
-
border-top-left-radius: 0;
|
|
96
|
-
border-top-right-radius: 0;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.ol-attribution.ol-uncollapsible {
|
|
100
|
-
border-radius: 4px 0 0;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.ol-attribution ul {
|
|
104
|
-
font-size: var(--material-caption-font-size);
|
|
105
|
-
cursor: default;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.ol-attribution:not(.ol-uncollapsible) ul {
|
|
109
|
-
background-color: var(--material-background-color);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.ol-attribution a {
|
|
113
|
-
color: inherit;
|
|
114
|
-
cursor: pointer;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.ol-scale-bar-inner {
|
|
118
|
-
border-radius: 4px;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.ol-full-screen {
|
|
122
|
-
height: 2em;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.ol-overviewmap:not(.ol-collapsed),
|
|
126
|
-
.ol-overviewmap:not(.ol-collapsed):hover {
|
|
127
|
-
background-color: var(--material-background-color);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.ol-overviewmap-map {
|
|
131
|
-
margin: 2px;
|
|
132
|
-
border: 0;
|
|
133
|
-
border-radius: 2px;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.ol-zoomslider,
|
|
137
|
-
.ol-zoomslider:not(.ol-uncollapsible):hover {
|
|
138
|
-
box-shadow: none;
|
|
139
|
-
overflow: visible;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.ol-zoomslider button {
|
|
143
|
-
height: 16px;
|
|
144
|
-
box-shadow: var(--material-shadow-elevation-2dp);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.ol-zoomslider:hover button {
|
|
148
|
-
box-shadow: var(--material-shadow-elevation-4dp);
|
|
149
|
-
}
|
|
150
|
-
`,
|
|
151
|
-
{ moduleId: 'material-map' },
|
|
152
|
-
);
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import './vaadin-map-styles.js';
|
|
12
|
-
import '../../src/vaadin-map.js';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import './vaadin-map-styles.js';
|
|
12
|
-
import '../../src/vaadin-map.js';
|
package/vaadin-lit-map.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './vaadin-map.js';
|
package/vaadin-lit-map.js
DELETED
|
File without changes
|