@openremote/or-asset-tree 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.
Files changed (12) hide show
  1. package/README.md +30 -30
  2. package/custom-elements.json +1 -1
  3. package/dist/umd/index.bundle.js +1191 -1191
  4. package/dist/umd/index.bundle.js.map +1 -1
  5. package/dist/umd/index.js +1191 -1191
  6. package/dist/umd/index.js.map +1 -1
  7. package/dist/umd/index.orbundle.js +1250 -1250
  8. package/dist/umd/index.orbundle.js.map +1 -1
  9. package/lib/index.js +1704 -99
  10. package/lib/or-add-asset-dialog.js +318 -148
  11. package/lib/style.js +312 -306
  12. package/package.json +8 -8
package/lib/style.js CHANGED
@@ -1,306 +1,312 @@
1
- import{css as e,unsafeCSS as r}from"lit";import{DefaultColor1 as t,DefaultColor2 as o,DefaultColor4 as a,DefaultColor5 as n,DefaultColor8 as i}from"@openremote/core";import{mdiChevronRight as l}from"@mdi/js";import{mdiChevronDown as s}from"@mdi/js";export const style=e`
2
-
3
- :host {
4
- --internal-or-asset-tree-header-color: var(--or-asset-tree-header-color, var(--or-app-color4, ${r(a)}));
5
- --internal-or-asset-tree-header-text-color: var(--or-asset-tree-header-text-color, var(--or-app-color8, ${r(i)}));
6
- --internal-or-asset-tree-header-menu-background-color: var(--or-asset-tree-header-menu-background-color, var(--internal-or-asset-tree-header-text-color));
7
- --internal-or-asset-tree-header-menu-text-color: var(--or-asset-tree-header-menu-text-color, inherit);
8
- --internal-or-asset-tree-header-height: var(--or-asset-tree-header-height, 48px);
9
- --internal-or-asset-tree-background-color: var(--or-asset-tree-background-color, var(--or-app-color1, ${r(t)}));
10
- --internal-or-asset-tree-text-color: var(--or-asset-tree-text-color, inherit);
11
- --internal-or-asset-tree-item-height: var(--or-asset-tree-item-height, 24px);
12
- --internal-or-asset-tree-item-padding: var(--or-asset-tree-item-padding, 10px);
13
- --internal-or-asset-tree-selected-background-color: var(--or-asset-tree-selected-background-color, var(--or-app-color2, ${r(o)}));
14
- --internal-or-asset-tree-selected-color: var(--or-asset-tree-selected-color, var(--or-app-color4, ${r(a)}));
15
- --internal-or-asset-tree-button-color: var(--or-asset-tree-button-color, var(--or-app-color4, ${r(a)}));
16
- --internal-or-asset-tree-line-color: var(--or-asset-tree-line-color, var(--or-app-color5, ${r(n)}));
17
-
18
- display: flex;
19
- flex-direction: column;
20
- height: 100%;
21
- width: 100%;
22
- background-color: var(--internal-or-asset-tree-background-color);
23
- }
24
-
25
- *[hidden] {
26
- display: none;
27
- }
28
-
29
- button {
30
- background-color: var(--internal-or-asset-tree-button-color);
31
- color: var(--internal-or-asset-tree-background-color);
32
- --or-icon-width: 20px;
33
- --or-icon-height: 20px;
34
- --or-icon-fill: var(--internal-or-asset-tree-background-color);
35
- border: none;
36
- padding: 0 6px;
37
- display: inline-block;
38
- cursor: pointer;
39
- opacity: 0.8;
40
- }
41
-
42
- button:focus, button:hover {
43
- outline: 0;
44
- opacity: 1;
45
- }
46
-
47
- #header {
48
- background-color: var(--internal-or-asset-tree-header-color);
49
- display: flex;
50
- align-items: center;
51
- width: 100%;
52
- height: var(--internal-or-asset-tree-header-height);
53
- border-bottom: 1px solid ${r(n)};
54
- z-index: 1000;
55
- line-height: var(--internal-or-asset-tree-header-height);
56
- color: var(--internal-or-asset-tree-header-text-color);
57
- --or-icon-fill: var(--internal-or-asset-tree-header-text-color);
58
- }
59
-
60
- #title-container {
61
- flex: 1 0 auto;
62
- flex-direction: row;
63
- text-transform: capitalize;
64
- padding-left: 15px;
65
- }
66
-
67
- #title {
68
- font-weight: 500;
69
- font-size: 16px;
70
- }
71
-
72
- #realm-picker {
73
- outline: none;
74
- margin-left: 5px;
75
- text-transform: none;
76
- font-size: 14px;
77
- }
78
-
79
- #header-btns {
80
- display: flex;
81
- flex-direction: row;
82
- padding-right: 5px;
83
- }
84
-
85
- #list-container {
86
- flex: 1 1 auto;
87
- overflow: auto;
88
- font-size: 14px;
89
- }
90
-
91
- #list {
92
- margin: 0;
93
- color: var(--internal-or-asset-tree-text-color);
94
- padding: 0;
95
- }
96
-
97
- #list, ol {
98
- list-style-type: none;
99
- }
100
-
101
- li ol {
102
- padding: 0;
103
- }
104
-
105
- #list li:not([data-expanded]) > ol {
106
- display: none;
107
- }
108
-
109
- #list li[data-selected] > .node-container, #list li > .node-container:hover {
110
- background-color: var(--internal-or-asset-tree-selected-background-color);
111
- }
112
-
113
- #list li[data-selected] > .node-container {
114
- border-left-color: var(--internal-or-asset-tree-selected-color);
115
- }
116
-
117
- .asset-list-element .over {
118
- background-color: ${r(n)};
119
- }
120
-
121
- .in-between-element {
122
- position: relative;
123
- height: 2px;
124
- }
125
- .in-between-element.over {
126
- padding: 5px 0;
127
- margin: -5px 0;
128
- }
129
- .end-element {
130
- height: 44px;
131
- }
132
-
133
- .node-container {
134
- display: flex;
135
- border-left: 4px solid transparent;
136
- user-select: none;
137
- cursor: pointer;
138
- height: var(--internal-or-asset-tree-item-height);
139
- line-height: var(--internal-or-asset-tree-item-height);
140
- padding-top: var(--internal-or-asset-tree-item-padding);
141
- padding-bottom: var(--internal-or-asset-tree-item-padding);
142
- }
143
-
144
- .node-container > * {
145
- flex: 0 0 auto;
146
- }
147
-
148
- .expander {
149
- width: 36px;
150
- height: 100%;
151
- display: inline-block;
152
- background-repeat: no-repeat;
153
- background-size: 18px;
154
- background-position: center;
155
-
156
- margin-left: -4px;
157
- border-left: 4px solid transparent;
158
- }
159
-
160
- .expander[data-expandable] {
161
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgb(204, 204, 204)' viewBox='0 0 24 24'%3E%3Cpath d='${r(l)}'/%3E%3C/svg%3E");
162
- }
163
-
164
- .expander[data-expandable]:hover {
165
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='${r(l)}'/%3E%3C/svg%3E");
166
- }
167
-
168
- li[data-expanded] > .node-container .expander {
169
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='${r(s)}'/%3E%3C/svg%3E") !important;
170
- }
171
-
172
- .node-name {
173
- margin: -4px 0;
174
- flex: 1 0 auto;
175
- display: flex;
176
- align-items: center;
177
- }
178
-
179
- .node-name > span {
180
- vertical-align: middle;
181
- }
182
-
183
- .node-name > or-icon {
184
- --or-icon-width: 18px;
185
- --or-icon-height: 18px;
186
- margin-right: 8px;
187
- }
188
-
189
- #loading {
190
- flex: 1 0 auto;
191
- display: inline-flex;
192
- align-items: center;
193
- text-align: center;
194
- margin: 0 auto;
195
- font-size: 14px;
196
- }
197
-
198
- @media only screen and (min-width: 768px){
199
- .expander {
200
- width: 26px;
201
- }
202
- }
203
-
204
- .mdc-list-item__graphic {
205
- margin-left: auto;
206
- display: flex;
207
- margin-right: 5px;
208
- }
209
-
210
- .mdc-checkbox {
211
- display: flex;
212
- height: 100%;
213
- align-items: center;
214
- }
215
-
216
- .mdc-checkbox or-icon {
217
- height: 15px;
218
- width: auto;
219
- color: var(--internal-or-asset-tree-line-color);
220
- }
221
- .mdc-checkbox or-icon.mdc-checkbox--parent {
222
- height: 17px;
223
- }
224
-
225
- .mdc-checkbox or-icon[icon="checkbox-marked"],
226
- .mdc-checkbox or-icon[icon="checkbox-multiple-marked"],
227
- .mdc-checkbox or-icon[icon="checkbox-multiple-marked-outline"] {
228
- color: var(--internal-or-asset-tree-selected-color);
229
- }
230
-
231
- #asset-tree-filter {
232
- display: flex;
233
- align-items: center;
234
- position: relative;
235
- background-color: var(--internal-or-asset-tree-selected-background-color);
236
- }
237
-
238
- #filterInput {
239
- padding: 7px 12px 7px 7px;
240
- }
241
-
242
- #filterAssetTypeDownIcon {
243
- width: 16px;
244
- height: 16px;
245
- position: absolute;
246
- right: 20px;
247
- padding-right: 14px;
248
- cursor: pointer;
249
- }
250
-
251
- #filterSettingsIcon {
252
- cursor: pointer;
253
- margin-right: 12px;
254
- }
255
-
256
- #asset-tree-filter-setting {
257
- position: absolute;
258
- background-color: var(--internal-or-asset-tree-background-color);
259
- top: calc(var(--internal-or-asset-tree-header-height) + var(--internal-or-header-height, 50px) - 1px);
260
- display: none;
261
- width: 300px;
262
- z-index: 100;
263
- box-shadow: rgb(0 0 0 / 21%) 0px 1px 3px 0px;
264
- box-sizing: border-box;
265
- padding: 10px;
266
- }
267
-
268
- #asset-tree-filter-setting .advanced-filter {
269
- display: flex;
270
- flex-direction: column;
271
- }
272
-
273
- #asset-tree-filter-setting.visible {
274
- display: block;
275
- }
276
-
277
- .filterAssetType {
278
- display: flex;
279
- align-items: center;
280
- }
281
-
282
- #clearIconContainer.visible {
283
- display: block;
284
- }
285
-
286
- #noAssetsFound {
287
- flex: 1 0 auto;
288
- display: inline-flex;
289
- align-items: center;
290
- text-align: center;
291
- margin: 0 auto;
292
- font-size: 14px;
293
- }
294
-
295
- .filterMatching {
296
- color: #808080;
297
- }
298
-
299
- .draggable {
300
- cursor: pointer;
301
- }
302
-
303
- .draggable:active[draggable="true"] {
304
- cursor: grabbing;
305
- }
306
- `;
1
+ import { css, unsafeCSS } from "lit";
2
+ import { DefaultColor1, DefaultColor2, DefaultColor4, DefaultColor5, DefaultColor8 } from "@openremote/core";
3
+ import { mdiChevronRight } from "@mdi/js";
4
+ import { mdiChevronDown } from "@mdi/js";
5
+ // language=CSS
6
+ export const style = css `
7
+
8
+ :host {
9
+ --internal-or-asset-tree-header-color: var(--or-asset-tree-header-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
10
+ --internal-or-asset-tree-header-text-color: var(--or-asset-tree-header-text-color, var(--or-app-color8, ${unsafeCSS(DefaultColor8)}));
11
+ --internal-or-asset-tree-header-menu-background-color: var(--or-asset-tree-header-menu-background-color, var(--internal-or-asset-tree-header-text-color));
12
+ --internal-or-asset-tree-header-menu-text-color: var(--or-asset-tree-header-menu-text-color, inherit);
13
+ --internal-or-asset-tree-header-height: var(--or-asset-tree-header-height, 48px);
14
+ --internal-or-asset-tree-background-color: var(--or-asset-tree-background-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
15
+ --internal-or-asset-tree-text-color: var(--or-asset-tree-text-color, inherit);
16
+ --internal-or-asset-tree-item-height: var(--or-asset-tree-item-height, 24px);
17
+ --internal-or-asset-tree-item-padding: var(--or-asset-tree-item-padding, 10px);
18
+ --internal-or-asset-tree-selected-background-color: var(--or-asset-tree-selected-background-color, var(--or-app-color2, ${unsafeCSS(DefaultColor2)}));
19
+ --internal-or-asset-tree-selected-color: var(--or-asset-tree-selected-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
20
+ --internal-or-asset-tree-button-color: var(--or-asset-tree-button-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
21
+ --internal-or-asset-tree-line-color: var(--or-asset-tree-line-color, var(--or-app-color5, ${unsafeCSS(DefaultColor5)}));
22
+
23
+ display: flex;
24
+ flex-direction: column;
25
+ height: 100%;
26
+ width: 100%;
27
+ background-color: var(--internal-or-asset-tree-background-color);
28
+ }
29
+
30
+ *[hidden] {
31
+ display: none;
32
+ }
33
+
34
+ button {
35
+ background-color: var(--internal-or-asset-tree-button-color);
36
+ color: var(--internal-or-asset-tree-background-color);
37
+ --or-icon-width: 20px;
38
+ --or-icon-height: 20px;
39
+ --or-icon-fill: var(--internal-or-asset-tree-background-color);
40
+ border: none;
41
+ padding: 0 6px;
42
+ display: inline-block;
43
+ cursor: pointer;
44
+ opacity: 0.8;
45
+ }
46
+
47
+ button:focus, button:hover {
48
+ outline: 0;
49
+ opacity: 1;
50
+ }
51
+
52
+ #header {
53
+ background-color: var(--internal-or-asset-tree-header-color);
54
+ display: flex;
55
+ align-items: center;
56
+ width: 100%;
57
+ height: var(--internal-or-asset-tree-header-height);
58
+ border-bottom: 1px solid ${unsafeCSS(DefaultColor5)};
59
+ z-index: 1000;
60
+ line-height: var(--internal-or-asset-tree-header-height);
61
+ color: var(--internal-or-asset-tree-header-text-color);
62
+ --or-icon-fill: var(--internal-or-asset-tree-header-text-color);
63
+ }
64
+
65
+ #title-container {
66
+ flex: 1 0 auto;
67
+ flex-direction: row;
68
+ text-transform: capitalize;
69
+ padding-left: 15px;
70
+ }
71
+
72
+ #title {
73
+ font-weight: 500;
74
+ font-size: 16px;
75
+ }
76
+
77
+ #realm-picker {
78
+ outline: none;
79
+ margin-left: 5px;
80
+ text-transform: none;
81
+ font-size: 14px;
82
+ }
83
+
84
+ #header-btns {
85
+ display: flex;
86
+ flex-direction: row;
87
+ padding-right: 5px;
88
+ }
89
+
90
+ #list-container {
91
+ flex: 1 1 auto;
92
+ overflow: auto;
93
+ font-size: 14px;
94
+ }
95
+
96
+ #list {
97
+ margin: 0;
98
+ color: var(--internal-or-asset-tree-text-color);
99
+ padding: 0;
100
+ }
101
+
102
+ #list, ol {
103
+ list-style-type: none;
104
+ }
105
+
106
+ li ol {
107
+ padding: 0;
108
+ }
109
+
110
+ #list li:not([data-expanded]) > ol {
111
+ display: none;
112
+ }
113
+
114
+ #list li[data-selected] > .node-container, #list li > .node-container:hover {
115
+ background-color: var(--internal-or-asset-tree-selected-background-color);
116
+ }
117
+
118
+ #list li[data-selected] > .node-container {
119
+ border-left-color: var(--internal-or-asset-tree-selected-color);
120
+ }
121
+
122
+ .asset-list-element .over {
123
+ background-color: ${unsafeCSS(DefaultColor5)};
124
+ }
125
+
126
+ .in-between-element {
127
+ position: relative;
128
+ height: 2px;
129
+ }
130
+ .in-between-element.over {
131
+ padding: 5px 0;
132
+ margin: -5px 0;
133
+ }
134
+ .end-element {
135
+ height: 44px;
136
+ }
137
+
138
+ .node-container {
139
+ display: flex;
140
+ border-left: 4px solid transparent;
141
+ user-select: none;
142
+ cursor: pointer;
143
+ height: var(--internal-or-asset-tree-item-height);
144
+ line-height: var(--internal-or-asset-tree-item-height);
145
+ padding-top: var(--internal-or-asset-tree-item-padding);
146
+ padding-bottom: var(--internal-or-asset-tree-item-padding);
147
+ }
148
+
149
+ .node-container > * {
150
+ flex: 0 0 auto;
151
+ }
152
+
153
+ .expander {
154
+ width: 36px;
155
+ height: 100%;
156
+ display: inline-block;
157
+ background-repeat: no-repeat;
158
+ background-size: 18px;
159
+ background-position: center;
160
+
161
+ margin-left: -4px;
162
+ border-left: 4px solid transparent;
163
+ }
164
+
165
+ .expander[data-expandable] {
166
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgb(204, 204, 204)' viewBox='0 0 24 24'%3E%3Cpath d='${unsafeCSS(mdiChevronRight)}'/%3E%3C/svg%3E");
167
+ }
168
+
169
+ .expander[data-expandable]:hover {
170
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='${unsafeCSS(mdiChevronRight)}'/%3E%3C/svg%3E");
171
+ }
172
+
173
+ li[data-expanded] > .node-container .expander {
174
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='${unsafeCSS(mdiChevronDown)}'/%3E%3C/svg%3E") !important;
175
+ }
176
+
177
+ .node-name {
178
+ margin: -4px 0;
179
+ flex: 1 0 auto;
180
+ display: flex;
181
+ align-items: center;
182
+ }
183
+
184
+ .node-name > span {
185
+ vertical-align: middle;
186
+ }
187
+
188
+ .node-name > or-icon {
189
+ --or-icon-width: 18px;
190
+ --or-icon-height: 18px;
191
+ margin-right: 8px;
192
+ }
193
+
194
+ #loading {
195
+ flex: 1 0 auto;
196
+ display: inline-flex;
197
+ align-items: center;
198
+ text-align: center;
199
+ margin: 0 auto;
200
+ font-size: 14px;
201
+ }
202
+
203
+ @media only screen and (min-width: 768px){
204
+ .expander {
205
+ width: 26px;
206
+ }
207
+ }
208
+
209
+ .mdc-list-item__graphic {
210
+ margin-left: auto;
211
+ display: flex;
212
+ margin-right: 5px;
213
+ }
214
+
215
+ .mdc-checkbox {
216
+ display: flex;
217
+ height: 100%;
218
+ align-items: center;
219
+ }
220
+
221
+ .mdc-checkbox or-icon {
222
+ height: 15px;
223
+ width: auto;
224
+ color: var(--internal-or-asset-tree-line-color);
225
+ }
226
+ .mdc-checkbox or-icon.mdc-checkbox--parent {
227
+ height: 17px;
228
+ }
229
+
230
+ .mdc-checkbox or-icon[icon="checkbox-marked"],
231
+ .mdc-checkbox or-icon[icon="checkbox-multiple-marked"],
232
+ .mdc-checkbox or-icon[icon="checkbox-multiple-marked-outline"] {
233
+ color: var(--internal-or-asset-tree-selected-color);
234
+ }
235
+
236
+ #asset-tree-filter {
237
+ display: flex;
238
+ align-items: center;
239
+ position: relative;
240
+ background-color: var(--internal-or-asset-tree-selected-background-color);
241
+ }
242
+
243
+ #filterInput {
244
+ padding: 7px 12px 7px 7px;
245
+ }
246
+
247
+ #filterAssetTypeDownIcon {
248
+ width: 16px;
249
+ height: 16px;
250
+ position: absolute;
251
+ right: 20px;
252
+ padding-right: 14px;
253
+ cursor: pointer;
254
+ }
255
+
256
+ #filterSettingsIcon {
257
+ cursor: pointer;
258
+ margin-right: 12px;
259
+ }
260
+
261
+ #asset-tree-filter-setting {
262
+ position: absolute;
263
+ background-color: var(--internal-or-asset-tree-background-color);
264
+ top: calc(var(--internal-or-asset-tree-header-height) + var(--internal-or-header-height, 50px) - 1px);
265
+ display: none;
266
+ width: 300px;
267
+ z-index: 100;
268
+ box-shadow: rgb(0 0 0 / 21%) 0px 1px 3px 0px;
269
+ box-sizing: border-box;
270
+ padding: 10px;
271
+ }
272
+
273
+ #asset-tree-filter-setting .advanced-filter {
274
+ display: flex;
275
+ flex-direction: column;
276
+ }
277
+
278
+ #asset-tree-filter-setting.visible {
279
+ display: block;
280
+ }
281
+
282
+ .filterAssetType {
283
+ display: flex;
284
+ align-items: center;
285
+ }
286
+
287
+ #clearIconContainer.visible {
288
+ display: block;
289
+ }
290
+
291
+ #noAssetsFound {
292
+ flex: 1 0 auto;
293
+ display: inline-flex;
294
+ align-items: center;
295
+ text-align: center;
296
+ margin: 0 auto;
297
+ font-size: 14px;
298
+ }
299
+
300
+ .filterMatching {
301
+ color: #808080;
302
+ }
303
+
304
+ .draggable {
305
+ cursor: pointer;
306
+ }
307
+
308
+ .draggable:active[draggable="true"] {
309
+ cursor: grabbing;
310
+ }
311
+ `;
312
+ //# sourceMappingURL=style.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openremote/or-asset-tree",
3
- "version": "1.8.0-snapshot.20250725070921",
3
+ "version": "1.8.0-snapshot.20250725120000",
4
4
  "description": "OpenRemote Asset Tree",
5
5
  "customElements": "custom-elements.json",
6
6
  "main": "dist/umd/index.bundle.js",
@@ -19,17 +19,17 @@
19
19
  "license": "AGPL-3.0-or-later",
20
20
  "dependencies": {
21
21
  "@mdi/js": "^5.9.55",
22
- "@openremote/core": "1.8.0-snapshot.20250725070921",
23
- "@openremote/model": "1.8.0-snapshot.20250725070921",
24
- "@openremote/or-icon": "1.8.0-snapshot.20250725070921",
25
- "@openremote/or-mwc-components": "1.8.0-snapshot.20250725070921",
26
- "@openremote/or-translate": "1.8.0-snapshot.20250725070921",
27
- "@openremote/rest": "1.8.0-snapshot.20250725070921",
22
+ "@openremote/core": "1.8.0-snapshot.20250725120000",
23
+ "@openremote/model": "1.8.0-snapshot.20250725120000",
24
+ "@openremote/or-icon": "1.8.0-snapshot.20250725120000",
25
+ "@openremote/or-mwc-components": "1.8.0-snapshot.20250725120000",
26
+ "@openremote/or-translate": "1.8.0-snapshot.20250725120000",
27
+ "@openremote/rest": "1.8.0-snapshot.20250725120000",
28
28
  "lit": "^2.0.2",
29
29
  "moment": "^2.29.4"
30
30
  },
31
31
  "devDependencies": {
32
- "@openremote/util": "1.8.0-snapshot.20250725070921"
32
+ "@openremote/util": "1.8.0-snapshot.20250725120000"
33
33
  },
34
34
  "publishConfig": {
35
35
  "access": "public"