@openremote/or-map 1.13.0 → 1.13.1

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.
@@ -1788,7 +1788,7 @@
1788
1788
  {
1789
1789
  "kind": "variable",
1790
1790
  "name": "style",
1791
- "default": "css` :host { --internal-or-map-width: var(--or-map-width, 100%); --internal-or-map-min-height: var(--or-map-min-height, 300px); --internal-or-map-marker-transform: var(--or-map-marker-transform, translate(-16px, -29px)); --internal-or-map-marker-width: var(--or-map-marker-width, 32px); --internal-or-map-marker-height: var(--or-map-marker-height, 32px); --internal-or-map-marker-color: var(--or-map-marker-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)})); --internal-or-map-marker-stroke: var(--or-map-marker-stroke, none); --internal-or-map-marker-icon-color: var(--or-map-marker-icon-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)})); --internal-or-map-marker-icon-stroke: var(--or-map-marker-icon-stroke, none); --internal-or-map-marker-icon-width: var(--or-map-marker-icon-width, 16px); --internal-or-map-marker-icon-height: var(--or-map-marker-icon-height, 16px); --internal-or-map-marker-icon-transform: var(--or-map-marker-icon-transform, translate(-50%, -14px)); --internal-or-map-marker-active-transform: var(--or-map-marker-active-transform, translate(-24px, -44px)); --internal-or-map-marker-active-width: var(--or-map-marker-active-width, 48px); --internal-or-map-marker-active-height: var(--or-map-marker-active-height, 48px); --internal-or-map-marker-active-color: var(--or-map-marker-active-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)})); --internal-or-map-marker-active-stroke: var(--or-map-marker-active-stroke, 2px); --internal-or-map-marker-icon-active-color: var(--or-map-marker-icon-active-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)})); --internal-or-map-marker-icon-active-stroke: var(--or-map-marker-icon-active-stroke, none); --internal-or-map-marker-icon-active-width: var(--or-map-marker-icon-active-width, 24px); --internal-or-map-marker-icon-active-height: var(--or-map-marker-icon-active-height, 24px); --internal-or-map-marker-icon-active-transform: var(--or-map-marker-icon-active-transform, translate(-50%, -20px)); display: block; overflow: hidden; min-height: var(--internal-or-map-min-height); width: var(--internal-or-map-width); } canvas { outline: none !important; } :host([hidden]) { display: none; } slot { display: none; } #container { position: relative; width: 100%; height: 100%; } #map { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .mapboxgl-ctrl-geocoder, .maplibregl-ctrl-geocoder--input { width: calc(100% - 20px) } /* Prevents overflow from elements outside the map component (like menu overlays). See #1844 */ .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right { z-index: 1; } .leaflet-marker-icon, .maplibregl-marker, .mapboxgl-marker { pointer-events: none !important; } .or-map-marker { position: absolute; /* This makes mapboxJS behave like mapboxGL */ } .or-map-marker.active { z-index: 1; } .marker-container { position: relative; cursor: pointer; transform: var(--internal-or-map-marker-transform); --or-icon-fill: var(--internal-or-map-marker-color); --or-icon-width: var(--internal-or-map-marker-width); --or-icon-height: var(--internal-or-map-marker-height); --or-icon-stroke: var(--internal-or-map-marker-stroke); } .or-map-marker.active .marker-container { transform: var(--internal-or-map-marker-active-transform); --or-icon-fill: var(--internal-or-map-marker-active-color); --or-icon-width: var(--internal-or-map-marker-active-width); --or-icon-height: var(--internal-or-map-marker-active-height); --or-icon-stroke: var(--internal-or-map-marker-active-stroke); } .or-map-marker.interactive .marker-container { pointer-events: all; } .or-map-marker-default.interactive .marker-container { pointer-events: none; --or-icon-pointer-events: visible; } .or-map-marker .marker-icon { position: absolute; left: 50%; top: 50%; z-index: 1000; --or-icon-fill: var(--internal-or-map-marker-icon-color); --or-icon-stroke: var(--internal-or-map-marker-icon-stroke); --or-icon-width: var(--internal-or-map-marker-icon-width); --or-icon-height: var(--internal-or-map-marker-icon-height); transform: var(--internal-or-map-marker-icon-transform); } .or-map-marker.active .marker-icon { transform: var(--internal-or-map-marker-icon-active-transform); --or-icon-fill: var(--internal-or-map-marker-icon-active-color); --or-icon-stroke: var(--internal-or-map-marker-icon-active-stroke); --or-icon-width: var(--internal-or-map-marker-icon-active-width); --or-icon-height: var(--internal-or-map-marker-icon-active-height); } #openremote { position: absolute; bottom: 25px; right: 5px; height: 20px; width: 20px; cursor: pointer; } #openremote img { height: 20px; width: 20px; } @media only screen and (max-width: 640px) { #openremote { bottom: 40px; right: 12px; } } `"
1791
+ "default": "css` :host { --internal-or-map-width: var(--or-map-width, 100%); --internal-or-map-min-height: var(--or-map-min-height, 300px); --internal-or-map-marker-transform: var(--or-map-marker-transform, translate(-16px, -29px)); --internal-or-map-marker-width: var(--or-map-marker-width, 32px); --internal-or-map-marker-height: var(--or-map-marker-height, 32px); --internal-or-map-marker-color: var(--or-map-marker-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)})); --internal-or-map-marker-stroke: var(--or-map-marker-stroke, none); --internal-or-map-marker-icon-color: var(--or-map-marker-icon-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)})); --internal-or-map-marker-icon-stroke: var(--or-map-marker-icon-stroke, none); --internal-or-map-marker-icon-width: var(--or-map-marker-icon-width, 16px); --internal-or-map-marker-icon-height: var(--or-map-marker-icon-height, 16px); --internal-or-map-marker-icon-transform: var(--or-map-marker-icon-transform, translate(-50%, -14px)); --internal-or-map-marker-active-transform: var(--or-map-marker-active-transform, translate(-24px, -44px)); --internal-or-map-marker-active-width: var(--or-map-marker-active-width, 48px); --internal-or-map-marker-active-height: var(--or-map-marker-active-height, 48px); --internal-or-map-marker-active-color: var(--or-map-marker-active-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)})); --internal-or-map-marker-active-stroke: var(--or-map-marker-active-stroke, 2px); --internal-or-map-marker-icon-active-color: var(--or-map-marker-icon-active-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)})); --internal-or-map-marker-icon-active-stroke: var(--or-map-marker-icon-active-stroke, none); --internal-or-map-marker-icon-active-width: var(--or-map-marker-icon-active-width, 24px); --internal-or-map-marker-icon-active-height: var(--or-map-marker-icon-active-height, 24px); --internal-or-map-marker-icon-active-transform: var(--or-map-marker-icon-active-transform, translate(-50%, -20px)); display: flex; overflow: hidden; min-height: var(--internal-or-map-min-height); width: var(--internal-or-map-width); } canvas { outline: none !important; } :host([hidden]) { display: none; } slot { display: none; } #container { position: relative; /* * Setting height/width through percentages doesn't work for WebKit browsers as the parent * element's height property resolves to 0 when it's the :host element of a web components' * shadow-dom. */ flex: 1 1 auto; } #map { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .mapboxgl-ctrl-geocoder, .maplibregl-ctrl-geocoder--input { width: calc(100% - 20px) } /* Prevents overflow from elements outside the map component (like menu overlays). See #1844 */ .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right { z-index: 1; } .leaflet-marker-icon, .maplibregl-marker, .mapboxgl-marker { pointer-events: none !important; } .or-map-marker { position: absolute; /* This makes mapboxJS behave like mapboxGL */ } .or-map-marker.active { z-index: 1; } .marker-container { position: relative; cursor: pointer; transform: var(--internal-or-map-marker-transform); --or-icon-fill: var(--internal-or-map-marker-color); --or-icon-width: var(--internal-or-map-marker-width); --or-icon-height: var(--internal-or-map-marker-height); --or-icon-stroke: var(--internal-or-map-marker-stroke); } .or-map-marker.active .marker-container { transform: var(--internal-or-map-marker-active-transform); --or-icon-fill: var(--internal-or-map-marker-active-color); --or-icon-width: var(--internal-or-map-marker-active-width); --or-icon-height: var(--internal-or-map-marker-active-height); --or-icon-stroke: var(--internal-or-map-marker-active-stroke); } .or-map-marker.interactive .marker-container { pointer-events: all; } .or-map-marker-default.interactive .marker-container { pointer-events: none; --or-icon-pointer-events: visible; } .or-map-marker .marker-icon { position: absolute; left: 50%; top: 50%; z-index: 1000; --or-icon-fill: var(--internal-or-map-marker-icon-color); --or-icon-stroke: var(--internal-or-map-marker-icon-stroke); --or-icon-width: var(--internal-or-map-marker-icon-width); --or-icon-height: var(--internal-or-map-marker-icon-height); transform: var(--internal-or-map-marker-icon-transform); } .or-map-marker.active .marker-icon { transform: var(--internal-or-map-marker-icon-active-transform); --or-icon-fill: var(--internal-or-map-marker-icon-active-color); --or-icon-stroke: var(--internal-or-map-marker-icon-active-stroke); --or-icon-width: var(--internal-or-map-marker-icon-active-width); --or-icon-height: var(--internal-or-map-marker-icon-active-height); } #openremote { position: absolute; bottom: 25px; right: 5px; height: 20px; width: 20px; cursor: pointer; } #openremote img { height: 20px; width: 20px; } @media only screen and (max-width: 640px) { #openremote { bottom: 40px; right: 12px; } } `"
1792
1792
  },
1793
1793
  {
1794
1794
  "kind": "variable",
@@ -95,13 +95,12 @@ ${l.shaderPreludeCode.vertexSource}`,define:l.shaderDefine},defaultProjectionDat
95
95
  --internal-or-map-marker-icon-active-width: var(--or-map-marker-icon-active-width, 24px);
96
96
  --internal-or-map-marker-icon-active-height: var(--or-map-marker-icon-active-height, 24px);
97
97
  --internal-or-map-marker-icon-active-transform: var(--or-map-marker-icon-active-transform, translate(-50%, -20px));
98
- display: block;
98
+ display: flex;
99
99
  overflow: hidden;
100
-
101
100
  min-height: var(--internal-or-map-min-height);
102
101
  width: var(--internal-or-map-width);
103
102
  }
104
-
103
+
105
104
  canvas {
106
105
  outline: none !important;
107
106
  }
@@ -113,13 +112,17 @@ ${l.shaderPreludeCode.vertexSource}`,define:l.shaderDefine},defaultProjectionDat
113
112
  slot {
114
113
  display: none;
115
114
  }
116
-
115
+
117
116
  #container {
118
117
  position: relative;
119
- width: 100%;
120
- height: 100%;
118
+ /*
119
+ * Setting height/width through percentages doesn't work for WebKit browsers as the parent
120
+ * element's height property resolves to 0 when it's the :host element of a web components'
121
+ * shadow-dom.
122
+ */
123
+ flex: 1 1 auto;
121
124
  }
122
-
125
+
123
126
  #map {
124
127
  position: absolute;
125
128
  left: 0;