@vaadin/map 25.0.0-alpha1 → 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 +12 -10
- package/src/styles/vaadin-map-base-styles.js +415 -0
- package/src/styles/vaadin-map-core-styles.d.ts +13 -0
- package/src/{vaadin-map-styles.js → styles/vaadin-map-core-styles.js} +2 -2
- package/src/vaadin-map.js +9 -2
- 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-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": "25.0.0-
|
|
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",
|
|
@@ -35,17 +37,17 @@
|
|
|
35
37
|
],
|
|
36
38
|
"dependencies": {
|
|
37
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
39
|
-
"@vaadin/component-base": "25.0.0-
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
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",
|
|
42
44
|
"lit": "^3.0.0",
|
|
43
|
-
"ol": "6.
|
|
45
|
+
"ol": "10.6.0"
|
|
44
46
|
},
|
|
45
47
|
"devDependencies": {
|
|
46
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
47
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
48
|
-
"@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",
|
|
49
51
|
"sinon": "^18.0.0"
|
|
50
52
|
},
|
|
51
53
|
"cvdlName": "vaadin-map",
|
|
@@ -53,5 +55,5 @@
|
|
|
53
55
|
"web-types.json",
|
|
54
56
|
"web-types.lit.json"
|
|
55
57
|
],
|
|
56
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
|
|
57
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
|
+
`;
|
|
@@ -0,0 +1,13 @@
|
|
|
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 type { CSSResult } from 'lit';
|
|
12
|
+
|
|
13
|
+
export const mapStyles: CSSResult;
|
|
@@ -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
|
@@ -12,9 +12,10 @@ 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
14
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
15
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
15
16
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
17
|
+
import { mapStyles } from './styles/vaadin-map-core-styles.js';
|
|
16
18
|
import { MapMixin } from './vaadin-map-mixin.js';
|
|
17
|
-
import { mapStyles } from './vaadin-map-styles.js';
|
|
18
19
|
|
|
19
20
|
/**
|
|
20
21
|
* `vaadin-map` is a web component for displaying web maps.
|
|
@@ -56,7 +57,7 @@ import { mapStyles } from './vaadin-map-styles.js';
|
|
|
56
57
|
* @mixes ThemableMixin
|
|
57
58
|
* @mixes ElementMixin
|
|
58
59
|
*/
|
|
59
|
-
class Map extends MapMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
|
|
60
|
+
class Map extends MapMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
60
61
|
static get is() {
|
|
61
62
|
return 'vaadin-map';
|
|
62
63
|
}
|
|
@@ -69,6 +70,12 @@ class Map extends MapMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))
|
|
|
69
70
|
return mapStyles;
|
|
70
71
|
}
|
|
71
72
|
|
|
73
|
+
static get lumoInjector() {
|
|
74
|
+
return {
|
|
75
|
+
includeBaseStyles: true,
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
72
79
|
/** @protected */
|
|
73
80
|
render() {
|
|
74
81
|
return html``;
|
|
@@ -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
|
File without changes
|