@vaadin/map 25.0.0-alpha6 → 25.0.0-alpha8

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/map",
3
- "version": "25.0.0-alpha6",
3
+ "version": "25.0.0-alpha8",
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,16 +37,16 @@
35
37
  ],
36
38
  "dependencies": {
37
39
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.0.0-alpha6",
39
- "@vaadin/component-base": "25.0.0-alpha6",
40
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
41
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
40
+ "@vaadin/a11y-base": "25.0.0-alpha8",
41
+ "@vaadin/component-base": "25.0.0-alpha8",
42
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
43
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
42
44
  "lit": "^3.0.0",
43
45
  "ol": "10.6.0"
44
46
  },
45
47
  "devDependencies": {
46
- "@vaadin/chai-plugins": "25.0.0-alpha6",
47
- "@vaadin/test-runner-commands": "25.0.0-alpha6",
48
+ "@vaadin/chai-plugins": "25.0.0-alpha8",
49
+ "@vaadin/test-runner-commands": "25.0.0-alpha8",
48
50
  "@vaadin/testing-helpers": "^2.0.0",
49
51
  "sinon": "^18.0.0"
50
52
  },
@@ -53,5 +55,5 @@
53
55
  "web-types.json",
54
56
  "web-types.lit.json"
55
57
  ],
56
- "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
58
+ "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
57
59
  }
@@ -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;
@@ -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
+ `;
package/src/vaadin-map.js CHANGED
@@ -57,7 +57,7 @@ import { MapMixin } from './vaadin-map-mixin.js';
57
57
  * @mixes ThemableMixin
58
58
  * @mixes ElementMixin
59
59
  */
60
- class Map extends MapMixin(ThemableMixin(ElementMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
60
+ class Map extends MapMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
61
61
  static get is() {
62
62
  return 'vaadin-map';
63
63
  }
@@ -70,6 +70,12 @@ class Map extends MapMixin(ThemableMixin(ElementMixin(LumoInjectionMixin(Polylit
70
70
  return mapStyles;
71
71
  }
72
72
 
73
+ static get lumoInjector() {
74
+ return {
75
+ includeBaseStyles: true,
76
+ };
77
+ }
78
+
73
79
  /** @protected */
74
80
  render() {
75
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~='borderless'])) {
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~='borderless']))::before {
42
+ :host(:not([theme~='no-border']))::before {
43
43
  content: '';
44
44
  position: absolute;
45
45
  inset: 0;
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/map",
4
- "version": "25.0.0-alpha6",
4
+ "version": "25.0.0-alpha8",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/map",
4
- "version": "25.0.0-alpha6",
4
+ "version": "25.0.0-alpha8",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {