@openremote/or-data-viewer 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001

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/index.js CHANGED
@@ -1,25 +1,237 @@
1
- var OrDataViewer_1,__decorate=this&&this.__decorate||function(e,t,r,i){var a,o=arguments.length,n=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,i);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(n=(o<3?a(n):o>3?a(t,r,n):a(t,r))||n);return o>3&&n&&Object.defineProperty(t,r,n),n};import{html as e,LitElement as t}from"lit";import{customElement as r,property as i}from"lit/decorators.js";import"@openremote/or-chart";import"@openremote/or-translate";import{translate as a}from"@openremote/or-translate";import"@openremote/or-components/or-panel";import{OrChartEvent as o}from"@openremote/or-chart";import{style as n}from"./style";import l from"i18next";import{styleMap as s}from"lit/directives/style-map.js";import{classMap as p}from"lit/directives/class-map.js";import"@openremote/or-attribute-card";import d from"@openremote/core";export class OrDataViewerRenderCompleteEvent extends CustomEvent{constructor(){super(OrDataViewerRenderCompleteEvent.NAME,{bubbles:!0,composed:!0})}}OrDataViewerRenderCompleteEvent.NAME="or-data-viewer-render-complete-event";export class OrDataViewerConfigInvalidEvent extends CustomEvent{constructor(){super(OrDataViewerConfigInvalidEvent.NAME,{bubbles:!0,composed:!0})}}OrDataViewerConfigInvalidEvent.NAME="or-data-viewer-config-invalid-event";let OrDataViewer=OrDataViewer_1=class extends a(l)(t){static get styles(){return[n]}static generateGrid(e){if(e){let t=e.querySelector("#container");if(t){let r=parseInt(window.getComputedStyle(t).getPropertyValue("grid-auto-rows"),10),i=parseInt(window.getComputedStyle(t).getPropertyValue("grid-row-gap"),10),a=e.querySelectorAll(".panel");a&&a.forEach(e=>{let t=e.querySelector(".panel-content-wrapper");if(t){let a=Math.ceil((t.getBoundingClientRect().height+i)/(r+i));e.style.gridRowEnd="span "+a}})}}}constructor(){super(),this._loading=!1,this._resizeHandler=()=>{OrDataViewer_1.generateGrid(this.shadowRoot)},this.addEventListener(o.NAME,()=>OrDataViewer_1.generateGrid(this.shadowRoot))}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._resizeHandler)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._resizeHandler)}refresh(){this.realm=d.displayRealm}getPanel(t,r){let i=this.getPanelContent(t,r);return i?e`
2
- <div class=${p({panel:!0,mobileHidden:!0===r.hideOnMobile})} id="${t}-panel" style="${r&&r.panelStyles?s(r.panelStyles):""}">
3
- <div class="panel-content-wrapper">
4
- ${r&&"chart"===r.type?e`
5
- <div class="panel-title">
6
- <or-translate value="${t}"></or-translate>
7
- </div>
8
- `:""}
9
-
10
- <div class="panel-content">
11
- ${i}
12
- </div>
13
- </div>
14
- </div>
15
- `:e``}getPanelContent(t,r){let i;if(!r.hide&&this.config)return this.realm=d.displayRealm,r&&"chart"===r.type&&(i=e`<or-chart id="chart" panelName="${t}" .config="${this.config.chartConfig}" .realm="${this.realm}"></or-chart>`),r&&"kpi"===r.type&&(i=e`
16
- <or-attribute-card panelName="${t}" .config="${this.config.chartConfig}" .realm="${this.realm}"></or-attribute-card>
17
- `),i}render(){return this._loading?e`
18
- <div class="msg"><or-translate value="loading"></or-translate></div>
19
- `:(this.config||(this.config=Object.assign({},OrDataViewer_1.DEFAULT_CONFIG)),e`
20
- <div id="wrapper">
21
- <div id="container" style="${this.config.viewerStyles?s(this.config.viewerStyles):""}">
22
- ${this.renderConfig()}
23
- </div>
24
- </div>
25
- `)}renderConfig(){let e=this.config?this.config:OrDataViewer_1.DEFAULT_CONFIG;try{return Object.entries(e.panels).map(([e,t])=>this.getPanel(e,t))}catch(t){return console.warn("OR data viewer config is invalid"),this.config=void 0,this.dispatchEvent(new OrDataViewerConfigInvalidEvent),Object.entries((e=OrDataViewer_1.DEFAULT_CONFIG).panels).map(([e,t])=>this.getPanel(e,t))}}updated(e){super.updated(e),e.has("realm")&&this.refresh(),this.updateComplete.then(()=>{this.dispatchEvent(new OrDataViewerRenderCompleteEvent),OrDataViewer_1.generateGrid(this.shadowRoot)})}};OrDataViewer.DEFAULT_PANEL_TYPE="chart",OrDataViewer.DEFAULT_CONFIG={viewerStyles:{},panels:{chart:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}},kpi1:{type:"kpi",hideOnMobile:!1},kpi2:{type:"kpi",hideOnMobile:!1},kpi3:{type:"kpi",hideOnMobile:!1},kpi4:{type:"kpi",hideOnMobile:!1},kpi5:{type:"kpi",hideOnMobile:!1},kpi6:{type:"kpi",hideOnMobile:!1},kpi7:{type:"kpi",hideOnMobile:!1},kpi8:{type:"kpi",hideOnMobile:!1},chart2:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}},chart3:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}}}},__decorate([i()],OrDataViewer.prototype,"config",void 0),__decorate([i({type:Array,attribute:!1})],OrDataViewer.prototype,"_assets",void 0),__decorate([i()],OrDataViewer.prototype,"_loading",void 0),__decorate([i()],OrDataViewer.prototype,"realm",void 0),OrDataViewer=OrDataViewer_1=__decorate([r("or-data-viewer")],OrDataViewer);export{OrDataViewer};
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var OrDataViewer_1;
8
+ import { html, LitElement } from "lit";
9
+ import { customElement, property } from "lit/decorators.js";
10
+ import "@openremote/or-chart";
11
+ import "@openremote/or-translate";
12
+ import { translate } from "@openremote/or-translate";
13
+ import "@openremote/or-components/or-panel";
14
+ import { OrChartEvent } from "@openremote/or-chart";
15
+ import { style } from "./style";
16
+ import i18next from "i18next";
17
+ import { styleMap } from "lit/directives/style-map.js";
18
+ import { classMap } from "lit/directives/class-map.js";
19
+ import "@openremote/or-attribute-card";
20
+ import manager from "@openremote/core";
21
+ export class OrDataViewerRenderCompleteEvent extends CustomEvent {
22
+ constructor() {
23
+ super(OrDataViewerRenderCompleteEvent.NAME, {
24
+ bubbles: true,
25
+ composed: true
26
+ });
27
+ }
28
+ }
29
+ OrDataViewerRenderCompleteEvent.NAME = "or-data-viewer-render-complete-event";
30
+ export class OrDataViewerConfigInvalidEvent extends CustomEvent {
31
+ constructor() {
32
+ super(OrDataViewerConfigInvalidEvent.NAME, {
33
+ bubbles: true,
34
+ composed: true
35
+ });
36
+ }
37
+ }
38
+ OrDataViewerConfigInvalidEvent.NAME = "or-data-viewer-config-invalid-event";
39
+ let OrDataViewer = OrDataViewer_1 = class OrDataViewer extends translate(i18next)(LitElement) {
40
+ static get styles() {
41
+ return [
42
+ style
43
+ ];
44
+ }
45
+ static generateGrid(shadowRoot) {
46
+ if (shadowRoot) {
47
+ const grid = shadowRoot.querySelector("#container");
48
+ if (grid) {
49
+ const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue("grid-auto-rows"), 10);
50
+ const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue("grid-row-gap"), 10);
51
+ const items = shadowRoot.querySelectorAll(".panel");
52
+ if (items) {
53
+ items.forEach((item) => {
54
+ const content = item.querySelector(".panel-content-wrapper");
55
+ if (content) {
56
+ const rowSpan = Math.ceil((content.getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
57
+ item.style.gridRowEnd = "span " + rowSpan;
58
+ }
59
+ });
60
+ }
61
+ }
62
+ }
63
+ }
64
+ constructor() {
65
+ super();
66
+ this._loading = false;
67
+ this._resizeHandler = () => {
68
+ OrDataViewer_1.generateGrid(this.shadowRoot);
69
+ };
70
+ this.addEventListener(OrChartEvent.NAME, () => OrDataViewer_1.generateGrid(this.shadowRoot));
71
+ }
72
+ connectedCallback() {
73
+ super.connectedCallback();
74
+ window.addEventListener("resize", this._resizeHandler);
75
+ }
76
+ disconnectedCallback() {
77
+ super.disconnectedCallback();
78
+ window.removeEventListener("resize", this._resizeHandler);
79
+ }
80
+ refresh() {
81
+ this.realm = manager.displayRealm;
82
+ }
83
+ getPanel(name, panelConfig) {
84
+ const content = this.getPanelContent(name, panelConfig);
85
+ if (!content) {
86
+ return html ``;
87
+ }
88
+ return html `
89
+ <div class=${classMap({ panel: true, mobileHidden: panelConfig.hideOnMobile === true })} id="${name}-panel" style="${panelConfig && panelConfig.panelStyles ? styleMap(panelConfig.panelStyles) : ""}">
90
+ <div class="panel-content-wrapper">
91
+ ${(panelConfig && panelConfig.type === "chart") ? html `
92
+ <div class="panel-title">
93
+ <or-translate value="${name}"></or-translate>
94
+ </div>
95
+ ` : ``}
96
+
97
+ <div class="panel-content">
98
+ ${content}
99
+ </div>
100
+ </div>
101
+ </div>
102
+ `;
103
+ }
104
+ getPanelContent(panelName, panelConfig) {
105
+ if (panelConfig.hide || !this.config) {
106
+ return;
107
+ }
108
+ this.realm = manager.displayRealm;
109
+ let content;
110
+ if (panelConfig && panelConfig.type === "chart") {
111
+ content = html `<or-chart id="chart" panelName="${panelName}" .config="${this.config.chartConfig}" .realm="${this.realm}"></or-chart>`;
112
+ }
113
+ if (panelConfig && panelConfig.type === "kpi") {
114
+ content = html `
115
+ <or-attribute-card panelName="${panelName}" .config="${this.config.chartConfig}" .realm="${this.realm}"></or-attribute-card>
116
+ `;
117
+ }
118
+ return content;
119
+ }
120
+ render() {
121
+ if (this._loading) {
122
+ return html `
123
+ <div class="msg"><or-translate value="loading"></or-translate></div>
124
+ `;
125
+ }
126
+ if (!this.config) {
127
+ this.config = Object.assign({}, OrDataViewer_1.DEFAULT_CONFIG);
128
+ }
129
+ return html `
130
+ <div id="wrapper">
131
+ <div id="container" style="${this.config.viewerStyles ? styleMap(this.config.viewerStyles) : ""}">
132
+ ${this.renderConfig()}
133
+ </div>
134
+ </div>
135
+ `;
136
+ }
137
+ renderConfig() {
138
+ const hasConfig = !!this.config;
139
+ let config = hasConfig ? this.config : OrDataViewer_1.DEFAULT_CONFIG;
140
+ try {
141
+ return Object.entries(config.panels).map(([name, panelConfig]) => this.getPanel(name, panelConfig));
142
+ }
143
+ catch (e) {
144
+ console.warn("OR data viewer config is invalid");
145
+ this.config = undefined;
146
+ this.dispatchEvent(new OrDataViewerConfigInvalidEvent());
147
+ config = OrDataViewer_1.DEFAULT_CONFIG;
148
+ return Object.entries(config.panels).map(([name, panelConfig]) => this.getPanel(name, panelConfig));
149
+ }
150
+ }
151
+ updated(_changedProperties) {
152
+ super.updated(_changedProperties);
153
+ if (_changedProperties.has("realm")) {
154
+ this.refresh();
155
+ }
156
+ this.updateComplete.then(() => {
157
+ this.dispatchEvent(new OrDataViewerRenderCompleteEvent());
158
+ OrDataViewer_1.generateGrid(this.shadowRoot);
159
+ });
160
+ }
161
+ };
162
+ OrDataViewer.DEFAULT_PANEL_TYPE = "chart";
163
+ OrDataViewer.DEFAULT_CONFIG = {
164
+ viewerStyles: {},
165
+ panels: {
166
+ chart: {
167
+ type: "chart",
168
+ hideOnMobile: true,
169
+ panelStyles: {
170
+ gridColumn: "1 / -1"
171
+ }
172
+ },
173
+ kpi1: {
174
+ type: "kpi",
175
+ hideOnMobile: false
176
+ },
177
+ kpi2: {
178
+ type: "kpi",
179
+ hideOnMobile: false
180
+ },
181
+ kpi3: {
182
+ type: "kpi",
183
+ hideOnMobile: false
184
+ },
185
+ kpi4: {
186
+ type: "kpi",
187
+ hideOnMobile: false
188
+ },
189
+ kpi5: {
190
+ type: "kpi",
191
+ hideOnMobile: false
192
+ },
193
+ kpi6: {
194
+ type: "kpi",
195
+ hideOnMobile: false
196
+ },
197
+ kpi7: {
198
+ type: "kpi",
199
+ hideOnMobile: false
200
+ },
201
+ kpi8: {
202
+ type: "kpi",
203
+ hideOnMobile: false
204
+ },
205
+ chart2: {
206
+ type: "chart",
207
+ hideOnMobile: true,
208
+ panelStyles: {
209
+ gridColumn: "1 / -1"
210
+ }
211
+ },
212
+ chart3: {
213
+ type: "chart",
214
+ hideOnMobile: true,
215
+ panelStyles: {
216
+ gridColumn: "1 / -1"
217
+ }
218
+ }
219
+ }
220
+ };
221
+ __decorate([
222
+ property()
223
+ ], OrDataViewer.prototype, "config", void 0);
224
+ __decorate([
225
+ property({ type: Array, attribute: false })
226
+ ], OrDataViewer.prototype, "_assets", void 0);
227
+ __decorate([
228
+ property()
229
+ ], OrDataViewer.prototype, "_loading", void 0);
230
+ __decorate([
231
+ property()
232
+ ], OrDataViewer.prototype, "realm", void 0);
233
+ OrDataViewer = OrDataViewer_1 = __decorate([
234
+ customElement("or-data-viewer")
235
+ ], OrDataViewer);
236
+ export { OrDataViewer };
237
+ //# sourceMappingURL=index.js.map
package/lib/style.js CHANGED
@@ -1,154 +1,158 @@
1
- import{css as e,unsafeCSS as r}from"lit";import{DefaultColor1 as a,DefaultColor2 as o,DefaultColor3 as i,DefaultColor5 as t}from"@openremote/core";export const style=e`
2
-
3
- :host {
4
- --internal-or-asset-viewer-background-color: var(--or-asset-viewer-background-color, var(--or-app-color2, ${r(o)}));
5
- --internal-or-asset-viewer-panel-margin: var(--or-asset-viewer-panel-margin, 20px);
6
- --internal-or-asset-viewer-panel-padding: var(--or-asset-viewer-panel-padding, 24px);
7
- --internal-or-asset-viewer-text-color: var(--or-asset-viewer-text-color, var(--or-app-color3, ${r(i)}));
8
- --internal-or-asset-viewer-title-text-color: var(--or-asset-viewer-title-text-color, var(--or-app-color3, ${r(i)}));
9
- --internal-or-asset-viewer-panel-color: var(--or-asset-viewer-panel-color, var(--or-app-color1, ${r(a)}));
10
- --internal-or-asset-viewer-line-color: var(--or-asset-viewer-line-color, var(--or-app-color5, ${r(t)}));
11
-
12
- height: 100%;
13
- width: 100%;
14
- background-color: var(--internal-or-asset-viewer-background-color);
15
- }
16
-
17
- *[hidden] {
18
- display: none;
19
- }
20
-
21
- #container {
22
- width: 100%;
23
- box-sizing: border-box;
24
- display: grid;
25
- margin: auto;
26
- padding: 20px 20px;
27
- grid-gap: 10px;
28
- grid-template-columns: repeat(auto-fill, minmax(calc(25% - 8px), 1fr));
29
- grid-auto-rows: 5px;
30
-
31
- -webkit-animation: fadein 0.3s; /* Safari, Chrome and Opera > 12.1 */
32
- -moz-animation: fadein 0.3s; /* Firefox < 16 */
33
- -ms-animation: fadein 0.3s; /* Internet Explorer */
34
- -o-animation: fadein 0.3s; /* Opera < 12.1 */
35
- animation: fadein 0.3s;
36
- }
37
-
38
- @keyframes fadein {
39
- from { opacity: 0; }
40
- to { opacity: 1; }
41
- }
42
-
43
- /* Firefox < 16 */
44
- @-moz-keyframes fadein {
45
- from { opacity: 0; }
46
- to { opacity: 1; }
47
- }
48
-
49
- /* Safari, Chrome and Opera > 12.1 */
50
- @-webkit-keyframes fadein {
51
- from { opacity: 0; }
52
- to { opacity: 1; }
53
- }
54
-
55
- /* Internet Explorer */
56
- @-ms-keyframes fadein {
57
- from { opacity: 0; }
58
- to { opacity: 1; }
59
- }
60
-
61
- /* Opera < 12.1 */
62
- @-o-keyframes fadein {
63
- from { opacity: 0; }
64
- to { opacity: 1; }
65
- }
66
-
67
- .panel {
68
- background-color: var(--internal-or-asset-viewer-panel-color);
69
- border: 1px solid #e5e5e5;
70
- border-radius: 5px;
71
- max-width: 100%;
72
- }
73
-
74
- .panel-content-wrapper {
75
- padding: var(--internal-or-asset-viewer-panel-padding);
76
- }
77
-
78
- .panel-content {
79
- display: flex;
80
- flex-wrap: wrap;
81
- }
82
-
83
- .panel-title {
84
- text-transform: uppercase;
85
- font-weight: bolder;
86
- line-height: 1em;
87
- color: var(--internal-or-asset-viewer-title-text-color);
88
- margin-bottom: 25px;
89
- flex: 0 0 auto;
90
- }
91
-
92
- .field {
93
- margin: 10px 0;
94
- width: 100%;
95
- flex: 0 0 auto;
96
- min-height: 50px;
97
- }
98
-
99
- .field > * {
100
- width: 100%;
101
- box-sizing: border-box;
102
- }
103
-
104
- .msg {
105
- display: flex;
106
- justify-content: center;
107
- align-items: center;
108
- text-align: center;
109
- height: 100%;
110
- }
111
-
112
- .back-navigation {
113
- display: none;
114
- cursor: pointer;
115
- }
116
-
117
- @media screen and (max-width: 1024px) {
118
- #container {
119
- grid-template-columns: repeat(auto-fill, minmax(calc(50% - 8px), 1fr));
120
- }
121
- }
122
-
123
- @media screen and (max-width: 769px) {
124
- .back-navigation {
125
- display: block;
126
- }
127
-
128
- .mobileHidden {
129
- display: none;
130
- }
131
-
132
- #container {
133
- grid-auto-rows: auto;
134
- }
135
-
136
- .panel {
137
- border-radius: 0;
138
- border-right: none;
139
- border-left: none;
140
- }
141
-
142
- #chart-panel {
143
- grid-row-start: 1;
144
- }
145
-
146
-
147
- #container {
148
- grid-template-columns: 100% !important;
149
- padding: 20px 0;
150
- }
151
-
152
-
153
- }
154
- `;
1
+ import { css, unsafeCSS } from "lit";
2
+ import { DefaultColor1, DefaultColor2, DefaultColor3, DefaultColor5 } from "@openremote/core";
3
+ // language=CSS
4
+ export const style = css `
5
+
6
+ :host {
7
+ --internal-or-asset-viewer-background-color: var(--or-asset-viewer-background-color, var(--or-app-color2, ${unsafeCSS(DefaultColor2)}));
8
+ --internal-or-asset-viewer-panel-margin: var(--or-asset-viewer-panel-margin, 20px);
9
+ --internal-or-asset-viewer-panel-padding: var(--or-asset-viewer-panel-padding, 24px);
10
+ --internal-or-asset-viewer-text-color: var(--or-asset-viewer-text-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)}));
11
+ --internal-or-asset-viewer-title-text-color: var(--or-asset-viewer-title-text-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)}));
12
+ --internal-or-asset-viewer-panel-color: var(--or-asset-viewer-panel-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
13
+ --internal-or-asset-viewer-line-color: var(--or-asset-viewer-line-color, var(--or-app-color5, ${unsafeCSS(DefaultColor5)}));
14
+
15
+ height: 100%;
16
+ width: 100%;
17
+ background-color: var(--internal-or-asset-viewer-background-color);
18
+ }
19
+
20
+ *[hidden] {
21
+ display: none;
22
+ }
23
+
24
+ #container {
25
+ width: 100%;
26
+ box-sizing: border-box;
27
+ display: grid;
28
+ margin: auto;
29
+ padding: 20px 20px;
30
+ grid-gap: 10px;
31
+ grid-template-columns: repeat(auto-fill, minmax(calc(25% - 8px), 1fr));
32
+ grid-auto-rows: 5px;
33
+
34
+ -webkit-animation: fadein 0.3s; /* Safari, Chrome and Opera > 12.1 */
35
+ -moz-animation: fadein 0.3s; /* Firefox < 16 */
36
+ -ms-animation: fadein 0.3s; /* Internet Explorer */
37
+ -o-animation: fadein 0.3s; /* Opera < 12.1 */
38
+ animation: fadein 0.3s;
39
+ }
40
+
41
+ @keyframes fadein {
42
+ from { opacity: 0; }
43
+ to { opacity: 1; }
44
+ }
45
+
46
+ /* Firefox < 16 */
47
+ @-moz-keyframes fadein {
48
+ from { opacity: 0; }
49
+ to { opacity: 1; }
50
+ }
51
+
52
+ /* Safari, Chrome and Opera > 12.1 */
53
+ @-webkit-keyframes fadein {
54
+ from { opacity: 0; }
55
+ to { opacity: 1; }
56
+ }
57
+
58
+ /* Internet Explorer */
59
+ @-ms-keyframes fadein {
60
+ from { opacity: 0; }
61
+ to { opacity: 1; }
62
+ }
63
+
64
+ /* Opera < 12.1 */
65
+ @-o-keyframes fadein {
66
+ from { opacity: 0; }
67
+ to { opacity: 1; }
68
+ }
69
+
70
+ .panel {
71
+ background-color: var(--internal-or-asset-viewer-panel-color);
72
+ border: 1px solid #e5e5e5;
73
+ border-radius: 5px;
74
+ max-width: 100%;
75
+ }
76
+
77
+ .panel-content-wrapper {
78
+ padding: var(--internal-or-asset-viewer-panel-padding);
79
+ }
80
+
81
+ .panel-content {
82
+ display: flex;
83
+ flex-wrap: wrap;
84
+ }
85
+
86
+ .panel-title {
87
+ text-transform: uppercase;
88
+ font-weight: bolder;
89
+ line-height: 1em;
90
+ color: var(--internal-or-asset-viewer-title-text-color);
91
+ margin-bottom: 25px;
92
+ flex: 0 0 auto;
93
+ }
94
+
95
+ .field {
96
+ margin: 10px 0;
97
+ width: 100%;
98
+ flex: 0 0 auto;
99
+ min-height: 50px;
100
+ }
101
+
102
+ .field > * {
103
+ width: 100%;
104
+ box-sizing: border-box;
105
+ }
106
+
107
+ .msg {
108
+ display: flex;
109
+ justify-content: center;
110
+ align-items: center;
111
+ text-align: center;
112
+ height: 100%;
113
+ }
114
+
115
+ .back-navigation {
116
+ display: none;
117
+ cursor: pointer;
118
+ }
119
+
120
+ @media screen and (max-width: 1024px) {
121
+ #container {
122
+ grid-template-columns: repeat(auto-fill, minmax(calc(50% - 8px), 1fr));
123
+ }
124
+ }
125
+
126
+ @media screen and (max-width: 769px) {
127
+ .back-navigation {
128
+ display: block;
129
+ }
130
+
131
+ .mobileHidden {
132
+ display: none;
133
+ }
134
+
135
+ #container {
136
+ grid-auto-rows: auto;
137
+ }
138
+
139
+ .panel {
140
+ border-radius: 0;
141
+ border-right: none;
142
+ border-left: none;
143
+ }
144
+
145
+ #chart-panel {
146
+ grid-row-start: 1;
147
+ }
148
+
149
+
150
+ #container {
151
+ grid-template-columns: 100% !important;
152
+ padding: 20px 0;
153
+ }
154
+
155
+
156
+ }
157
+ `;
158
+ //# sourceMappingURL=style.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openremote/or-data-viewer",
3
- "version": "1.8.0-snapshot.20250725074716",
3
+ "version": "1.8.0-snapshot.20250725120001",
4
4
  "description": "OpenRemote data Viewer",
5
5
  "customElements": "custom-elements.json",
6
6
  "main": "dist/umd/index.bundle.js",
@@ -18,22 +18,22 @@
18
18
  "author": "OpenRemote",
19
19
  "license": "AGPL-3.0-or-later",
20
20
  "dependencies": {
21
- "@openremote/core": "1.8.0-snapshot.20250725074716",
22
- "@openremote/model": "1.8.0-snapshot.20250725074716",
23
- "@openremote/or-attribute-card": "1.8.0-snapshot.20250725074716",
24
- "@openremote/or-attribute-history": "1.8.0-snapshot.20250725074716",
25
- "@openremote/or-attribute-input": "1.8.0-snapshot.20250725074716",
26
- "@openremote/or-chart": "1.8.0-snapshot.20250725074716",
27
- "@openremote/or-components": "1.8.0-snapshot.20250725074716",
28
- "@openremote/or-icon": "1.8.0-snapshot.20250725074716",
29
- "@openremote/or-map": "1.8.0-snapshot.20250725074716",
30
- "@openremote/or-mwc-components": "1.8.0-snapshot.20250725074716",
31
- "@openremote/or-translate": "1.8.0-snapshot.20250725074716",
32
- "@openremote/rest": "1.8.0-snapshot.20250725074716",
21
+ "@openremote/core": "1.8.0-snapshot.20250725120001",
22
+ "@openremote/model": "1.8.0-snapshot.20250725120001",
23
+ "@openremote/or-attribute-card": "1.8.0-snapshot.20250725120001",
24
+ "@openremote/or-attribute-history": "1.8.0-snapshot.20250725120001",
25
+ "@openremote/or-attribute-input": "1.8.0-snapshot.20250725120001",
26
+ "@openremote/or-chart": "1.8.0-snapshot.20250725120001",
27
+ "@openremote/or-components": "1.8.0-snapshot.20250725120001",
28
+ "@openremote/or-icon": "1.8.0-snapshot.20250725120001",
29
+ "@openremote/or-map": "1.8.0-snapshot.20250725120001",
30
+ "@openremote/or-mwc-components": "1.8.0-snapshot.20250725120001",
31
+ "@openremote/or-translate": "1.8.0-snapshot.20250725120001",
32
+ "@openremote/rest": "1.8.0-snapshot.20250725120001",
33
33
  "lit": "^2.0.2"
34
34
  },
35
35
  "devDependencies": {
36
- "@openremote/util": "1.8.0-snapshot.20250725074716"
36
+ "@openremote/util": "1.8.0-snapshot.20250725120001"
37
37
  },
38
38
  "publishConfig": {
39
39
  "access": "public"