@openremote/or-json-forms 1.8.0-snapshot.20250725070921 → 1.8.0-snapshot.20250725120000
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 +113 -113
- package/custom-elements.json +2 -2
- package/dist/umd/index.js +1105 -1105
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/index.orbundle.js +1163 -1163
- package/dist/umd/index.orbundle.js.map +1 -1
- package/lib/base-element.js +57 -1
- package/lib/controls/control-array-element.js +277 -83
- package/lib/controls/control-base-element.js +48 -1
- package/lib/controls/control-input-element.js +157 -20
- package/lib/index.js +141 -7
- package/lib/layouts/layout-base-element.js +29 -1
- package/lib/layouts/layout-vertical-element.js +340 -128
- package/lib/standard-renderers.js +188 -12
- package/lib/styles.js +156 -148
- package/lib/util.js +291 -23
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
# @openremote/or-map \<or-map\>
|
|
2
|
-
[![NPM Version][npm-image]][npm-url]
|
|
3
|
-
[![Linux Build][travis-image]][travis-url]
|
|
4
|
-
[![Test Coverage][coveralls-image]][coveralls-url]
|
|
5
|
-
|
|
6
|
-
Web Component for displaying a Mapbox map; either raster or vector (default). This component requires an OpenRemote
|
|
7
|
-
Manager to retrieve map settings and tiles.
|
|
8
|
-
|
|
9
|
-
## Install
|
|
10
|
-
```bash
|
|
11
|
-
npm i @openremote/or-map
|
|
12
|
-
yarn add @openremote/or-map
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Usage
|
|
16
|
-
For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
|
|
17
|
-
|
|
18
|
-
```$html
|
|
19
|
-
<or-map center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;" />
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
For a raster map (raster tile serving in the OpenRemote Manager must be properly configured):
|
|
23
|
-
|
|
24
|
-
```$html
|
|
25
|
-
<or-map type="RASTER" center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;" />
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
The center and zoom are optional overrides for the defaults that will be defined in the `mapsettings` loaded from the
|
|
29
|
-
OpenRemote Manager; each realm can have different `mapsettings` with a fallback to the default.
|
|
30
|
-
|
|
31
|
-
Markers can be added via markup as children:
|
|
32
|
-
|
|
33
|
-
```$html
|
|
34
|
-
<or-map id="vectorMap" center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;">
|
|
35
|
-
<or-map-marker id="demo-marker" lng="5.454250" class="marker" icon="or:logo-plain"></or-map-marker>
|
|
36
|
-
</or-map>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
Or programmatically:
|
|
40
|
-
|
|
41
|
-
```$typescript
|
|
42
|
-
const vectorMap = docuemnt.getElementById("vectorMap");
|
|
43
|
-
const assetMarker = document.createElement("or-map-marker-asset");
|
|
44
|
-
assetMarker.setAttribute("asset", apartment1.id!);
|
|
45
|
-
vectorMap.appendChild(assetMarker);
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
There are two types of built in markers:
|
|
49
|
-
|
|
50
|
-
### \<or-map-marker\>
|
|
51
|
-
This is a basic marker and the base class for any other markers and it has the following attributes:
|
|
52
|
-
|
|
53
|
-
* lat*
|
|
54
|
-
* lng*
|
|
55
|
-
* visible (show/hide the marker)
|
|
56
|
-
* icon (uses `or-icon` to render an icon inside the default marker)
|
|
57
|
-
* interactive (sets pointer events for the marker)
|
|
58
|
-
|
|
59
|
-
*required
|
|
60
|
-
|
|
61
|
-
The visual content of the marker can be controlled by adding child content to the `or-map-marker` element; any child
|
|
62
|
-
content is rendered inside a `div`. If no children are specified then the default marker will be used. Subclasses can
|
|
63
|
-
override the `createMarkerContent()` method to control the look of the marker.
|
|
64
|
-
|
|
65
|
-
### \<or-map-marker-asset\>
|
|
66
|
-
This links the marker to an Asset in the OpenRemote Manager by using the `asset-mixin` and adds the following attribute:
|
|
67
|
-
|
|
68
|
-
* asset* (ID of the Asset to link)
|
|
69
|
-
|
|
70
|
-
*required
|
|
71
|
-
|
|
72
|
-
The Asset must be valid, accessible and must have a valid `location` attribute otherwise no marker will be shown. By
|
|
73
|
-
default the `AssetType` is used to set the icon of the marker but this can be controlled by setting the `assetTypeAsIcon`
|
|
74
|
-
property.
|
|
75
|
-
|
|
76
|
-
### Styling
|
|
77
|
-
All styling is done through CSS, the following CSS variables can be used:
|
|
78
|
-
|
|
79
|
-
```$css
|
|
80
|
-
--or-map-marker-fill (default: #1D5632)
|
|
81
|
-
--or-map-marker-stroke (default: none)
|
|
82
|
-
--or-map-marker-width (default: 48px)
|
|
83
|
-
--or-map-marker-height (default: 48px)
|
|
84
|
-
--or-map-marker-transform (default: translate(-24px, -45px))
|
|
85
|
-
|
|
86
|
-
--or-map-marker-icon-fill (default: #FFF)
|
|
87
|
-
--or-map-marker-icon-stroke (default: none)
|
|
88
|
-
--or-map-marker-icon-width (default: 24px)
|
|
89
|
-
--or-map-marker-icon-height (default: 24px)
|
|
90
|
-
--or-map-marker-icon-transform (default: translate(-50%, -19px))
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### Events
|
|
94
|
-
The following DOM events may be fired by the component and markers:
|
|
95
|
-
|
|
96
|
-
* `click` - Standard click event is fired when the map itself is clicked
|
|
97
|
-
* `OrMapMarkerEvent.CLICKED` - A map marker has been clicked; details contains the clicked `marker`
|
|
98
|
-
* `OrMapMarkerEvent.CHANGED` - A map marker has been modified; details contains the changed `marker` and name of changed
|
|
99
|
-
`property`
|
|
100
|
-
|
|
101
|
-
## Supported Browsers
|
|
102
|
-
The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
|
|
103
|
-
Internet Explorer 11 is also supported.
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
## License
|
|
107
|
-
[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
|
|
108
|
-
|
|
109
|
-
[npm-image]: https://img.shields.io/npm/v/live-xxx.svg
|
|
110
|
-
[npm-url]: https://npmjs.org/package/@openremote/or-map
|
|
111
|
-
[travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
|
|
112
|
-
[travis-url]: https://travis-ci.org/live-js/live-xxx
|
|
113
|
-
[coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
|
|
1
|
+
# @openremote/or-map \<or-map\>
|
|
2
|
+
[![NPM Version][npm-image]][npm-url]
|
|
3
|
+
[![Linux Build][travis-image]][travis-url]
|
|
4
|
+
[![Test Coverage][coveralls-image]][coveralls-url]
|
|
5
|
+
|
|
6
|
+
Web Component for displaying a Mapbox map; either raster or vector (default). This component requires an OpenRemote
|
|
7
|
+
Manager to retrieve map settings and tiles.
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
```bash
|
|
11
|
+
npm i @openremote/or-map
|
|
12
|
+
yarn add @openremote/or-map
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
|
|
17
|
+
|
|
18
|
+
```$html
|
|
19
|
+
<or-map center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;" />
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
For a raster map (raster tile serving in the OpenRemote Manager must be properly configured):
|
|
23
|
+
|
|
24
|
+
```$html
|
|
25
|
+
<or-map type="RASTER" center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;" />
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
The center and zoom are optional overrides for the defaults that will be defined in the `mapsettings` loaded from the
|
|
29
|
+
OpenRemote Manager; each realm can have different `mapsettings` with a fallback to the default.
|
|
30
|
+
|
|
31
|
+
Markers can be added via markup as children:
|
|
32
|
+
|
|
33
|
+
```$html
|
|
34
|
+
<or-map id="vectorMap" center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;">
|
|
35
|
+
<or-map-marker id="demo-marker" lng="5.454250" class="marker" icon="or:logo-plain"></or-map-marker>
|
|
36
|
+
</or-map>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Or programmatically:
|
|
40
|
+
|
|
41
|
+
```$typescript
|
|
42
|
+
const vectorMap = docuemnt.getElementById("vectorMap");
|
|
43
|
+
const assetMarker = document.createElement("or-map-marker-asset");
|
|
44
|
+
assetMarker.setAttribute("asset", apartment1.id!);
|
|
45
|
+
vectorMap.appendChild(assetMarker);
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
There are two types of built in markers:
|
|
49
|
+
|
|
50
|
+
### \<or-map-marker\>
|
|
51
|
+
This is a basic marker and the base class for any other markers and it has the following attributes:
|
|
52
|
+
|
|
53
|
+
* lat*
|
|
54
|
+
* lng*
|
|
55
|
+
* visible (show/hide the marker)
|
|
56
|
+
* icon (uses `or-icon` to render an icon inside the default marker)
|
|
57
|
+
* interactive (sets pointer events for the marker)
|
|
58
|
+
|
|
59
|
+
*required
|
|
60
|
+
|
|
61
|
+
The visual content of the marker can be controlled by adding child content to the `or-map-marker` element; any child
|
|
62
|
+
content is rendered inside a `div`. If no children are specified then the default marker will be used. Subclasses can
|
|
63
|
+
override the `createMarkerContent()` method to control the look of the marker.
|
|
64
|
+
|
|
65
|
+
### \<or-map-marker-asset\>
|
|
66
|
+
This links the marker to an Asset in the OpenRemote Manager by using the `asset-mixin` and adds the following attribute:
|
|
67
|
+
|
|
68
|
+
* asset* (ID of the Asset to link)
|
|
69
|
+
|
|
70
|
+
*required
|
|
71
|
+
|
|
72
|
+
The Asset must be valid, accessible and must have a valid `location` attribute otherwise no marker will be shown. By
|
|
73
|
+
default the `AssetType` is used to set the icon of the marker but this can be controlled by setting the `assetTypeAsIcon`
|
|
74
|
+
property.
|
|
75
|
+
|
|
76
|
+
### Styling
|
|
77
|
+
All styling is done through CSS, the following CSS variables can be used:
|
|
78
|
+
|
|
79
|
+
```$css
|
|
80
|
+
--or-map-marker-fill (default: #1D5632)
|
|
81
|
+
--or-map-marker-stroke (default: none)
|
|
82
|
+
--or-map-marker-width (default: 48px)
|
|
83
|
+
--or-map-marker-height (default: 48px)
|
|
84
|
+
--or-map-marker-transform (default: translate(-24px, -45px))
|
|
85
|
+
|
|
86
|
+
--or-map-marker-icon-fill (default: #FFF)
|
|
87
|
+
--or-map-marker-icon-stroke (default: none)
|
|
88
|
+
--or-map-marker-icon-width (default: 24px)
|
|
89
|
+
--or-map-marker-icon-height (default: 24px)
|
|
90
|
+
--or-map-marker-icon-transform (default: translate(-50%, -19px))
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Events
|
|
94
|
+
The following DOM events may be fired by the component and markers:
|
|
95
|
+
|
|
96
|
+
* `click` - Standard click event is fired when the map itself is clicked
|
|
97
|
+
* `OrMapMarkerEvent.CLICKED` - A map marker has been clicked; details contains the clicked `marker`
|
|
98
|
+
* `OrMapMarkerEvent.CHANGED` - A map marker has been modified; details contains the changed `marker` and name of changed
|
|
99
|
+
`property`
|
|
100
|
+
|
|
101
|
+
## Supported Browsers
|
|
102
|
+
The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
|
|
103
|
+
Internet Explorer 11 is also supported.
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
## License
|
|
107
|
+
[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
|
|
108
|
+
|
|
109
|
+
[npm-image]: https://img.shields.io/npm/v/live-xxx.svg
|
|
110
|
+
[npm-url]: https://npmjs.org/package/@openremote/or-map
|
|
111
|
+
[travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
|
|
112
|
+
[travis-url]: https://travis-ci.org/live-js/live-xxx
|
|
113
|
+
[coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
|
|
114
114
|
[coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master
|
package/custom-elements.json
CHANGED
|
@@ -1003,7 +1003,7 @@
|
|
|
1003
1003
|
}
|
|
1004
1004
|
}
|
|
1005
1005
|
],
|
|
1006
|
-
"description": "For a given anyOf schema array this will try and extract a common const property which can be used as a discriminator\nwhen creating instances"
|
|
1006
|
+
"description": "For a given anyOf schema array this will try and extract a common const property which can be used as a discriminator\r\nwhen creating instances"
|
|
1007
1007
|
},
|
|
1008
1008
|
{
|
|
1009
1009
|
"kind": "function",
|
|
@@ -1120,7 +1120,7 @@
|
|
|
1120
1120
|
}
|
|
1121
1121
|
}
|
|
1122
1122
|
],
|
|
1123
|
-
"description": "Copied from eclipse source code to inject global definitions into the validating schema otherwise AJV will fail\nto compile the schema - not perfect but works for our cases"
|
|
1123
|
+
"description": "Copied from eclipse source code to inject global definitions into the validating schema otherwise AJV will fail\r\nto compile the schema - not perfect but works for our cases"
|
|
1124
1124
|
},
|
|
1125
1125
|
{
|
|
1126
1126
|
"kind": "function",
|