@openremote/or-asset-tree 1.8.0-snapshot.20250725120000 → 1.8.0-snapshot.20250725123024

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/lib/style.js CHANGED
@@ -1,312 +1,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
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
+ `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openremote/or-asset-tree",
3
- "version": "1.8.0-snapshot.20250725120000",
3
+ "version": "1.8.0-snapshot.20250725123024",
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.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",
22
+ "@openremote/core": "1.8.0-snapshot.20250725123024",
23
+ "@openremote/model": "1.8.0-snapshot.20250725123024",
24
+ "@openremote/or-icon": "1.8.0-snapshot.20250725123024",
25
+ "@openremote/or-mwc-components": "1.8.0-snapshot.20250725123024",
26
+ "@openremote/or-translate": "1.8.0-snapshot.20250725123024",
27
+ "@openremote/rest": "1.8.0-snapshot.20250725123024",
28
28
  "lit": "^2.0.2",
29
29
  "moment": "^2.29.4"
30
30
  },
31
31
  "devDependencies": {
32
- "@openremote/util": "1.8.0-snapshot.20250725120000"
32
+ "@openremote/util": "1.8.0-snapshot.20250725123024"
33
33
  },
34
34
  "publishConfig": {
35
35
  "access": "public"