+ `;
+ }
+
+ protected _onTimeframeMenuSelect(ev: CustomEvent) {
+ const type = ev.detail.value.type as "prefix" | "window";
+ const value = ev.detail.value.value;
+ if(type === "prefix") {
+ // Handle time prefix
+ this.timeframe = undefined; // remove any custom start & end times
+ this.timePrefixKey = value;
+ } else {
+ // Handle time window
+ this.timeframe = undefined; // remove any custom start & end times
+ this.timeWindowKey = value;
+ }
+ }
+
protected async _onTreeSelectionChanged(event: OrAssetTreeSelectionEvent) {
// Need to fully load the asset
if (!manager.events) {
@@ -1071,14 +1055,18 @@ export class OrChart extends translate(i18next)(LitElement) {
}
protected _openTimeDialog(startTimestamp?: number, endTimestamp?: number) {
- const startRef: Ref = createRef();
- const endRef: Ref = createRef();
+ const startRef: Ref = createRef();
+ const endRef: Ref = createRef();
showDialog(new OrMwcDialog()
.setHeading(i18next.t('timeframe'))
.setContent(() => html`
-
-
-
+
+
+
+
+
+
+
`)
.setActions([{
diff --git a/ui/component/or-dashboard-builder/package.json b/ui/component/or-dashboard-builder/package.json
index a24563cad5..1f7b272305 100644
--- a/ui/component/or-dashboard-builder/package.json
+++ b/ui/component/or-dashboard-builder/package.json
@@ -37,6 +37,7 @@
"@openremote/or-map": "workspace:*",
"@openremote/or-mwc-components": "workspace:*",
"@openremote/or-translate": "workspace:*",
+ "@openremote/or-vaadin-components": "workspace:*",
"@openremote/rest": "workspace:*",
"gridstack": "^12.4.2",
"lit": "^3.3.1",
diff --git a/ui/component/or-dashboard-builder/src/controls/dashboard-refresh-controls.ts b/ui/component/or-dashboard-builder/src/controls/dashboard-refresh-controls.ts
index 600bfa7be1..bad72a4569 100644
--- a/ui/component/or-dashboard-builder/src/controls/dashboard-refresh-controls.ts
+++ b/ui/component/or-dashboard-builder/src/controls/dashboard-refresh-controls.ts
@@ -1,11 +1,27 @@
-import {InputType} from "@openremote/or-mwc-components/or-mwc-input";
-import {ListItem} from "@openremote/or-mwc-components/or-mwc-list";
-import {getContentWithMenuTemplate} from "@openremote/or-mwc-components/or-mwc-menu";
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {html, LitElement, PropertyValues, TemplateResult} from "lit";
import {customElement, property} from "lit/decorators.js";
import {when} from "lit/directives/when.js";
import {DashboardRefreshInterval} from "@openremote/model";
-import {i18next} from "@openremote/or-translate";
+import {createMenuBarItem, MenuBarItem} from "@openremote/or-vaadin-components/or-vaadin-menu-bar";
export function intervalToMillis(interval: DashboardRefreshInterval): number | undefined {
switch (interval) {
@@ -58,32 +74,17 @@ export class DashboardRefreshControls extends LitElement {
protected render(): TemplateResult {
const intervalOptions: string[] = this.getRefreshOptions();
- const value = this.getIntervalString(this.interval);
+ const menuItems: MenuBarItem[] = [{
+ component: createMenuBarItem(when(this.interval === DashboardRefreshInterval.OFF,
+ () => html``,
+ () => html``)
+ ),
+ children: intervalOptions.map(o => ({interval: o, component: createMenuBarItem(html``)}))
+ }]
return html`
-
+ this.onIntervalSelect(intervalOptions, ev.detail.value.interval as string)}
+ >
`;
}
diff --git a/ui/component/or-dashboard-builder/src/index.ts b/ui/component/or-dashboard-builder/src/index.ts
index 13af519828..e334206e0d 100644
--- a/ui/component/or-dashboard-builder/src/index.ts
+++ b/ui/component/or-dashboard-builder/src/index.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, LitElement, PropertyValues, unsafeCSS} from "lit";
import {customElement, property, query, state} from "lit/decorators.js";
import {when} from 'lit/directives/when.js';
@@ -8,7 +27,6 @@ import "./or-dashboard-preview";
import "./or-dashboard-widgetsettings";
import "./or-dashboard-boardsettings";
import "./controls/dashboard-refresh-controls";
-import {InputType, OrInputChangedEvent} from '@openremote/or-mwc-components/or-mwc-input';
import "@openremote/or-icon";
import {style} from "./style";
import {ClientRole, Dashboard, DashboardAccess, DashboardRefreshInterval, DashboardScalingPreset, DashboardScreenPreset, DashboardTemplate, DashboardWidget} from "@openremote/model";
@@ -34,6 +52,7 @@ import {AttributeInputWidget} from "./widgets/attribute-input-widget";
import {TableWidget} from "./widgets/table-widget";
import {GatewayWidget} from "./widgets/gateway-widget";
import {BarChartWidget} from "./widgets/barchart-widget";
+import {OrVaadinTextField} from "@openremote/or-vaadin-components/or-vaadin-text-field";
// language=CSS
const styling = css`
@@ -71,6 +90,8 @@ const styling = css`
border-bottom: 1px solid ${unsafeCSS(DefaultColor5)};
}
#header-title {
+ display: flex;
+ align-items: baseline;
font-size: 18px;
}
#header-title > or-icon {
@@ -105,10 +126,6 @@ const styling = css`
font-weight: bold;
color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
}
- #fullscreen-header-title > or-mwc-input {
- margin-right: 4px;
- --or-icon-fill: ${unsafeCSS(DefaultColor3)};
- }
#fullscreen-header-actions {
flex: 1 1 auto;
text-align: right;
@@ -496,10 +513,13 @@ export class OrDashboardBuilder extends translate(i18next)(LitElement) {
}
}
- changeDashboardName(value: string) {
+ _onDashboardNameChanged(ev: Event) {
+ const elem = ev.currentTarget as OrVaadinTextField;
+ if(!elem?.checkValidity()) {
+ return;
+ }
if(this.selectedDashboard != null) {
- const dashboard = this.selectedDashboard;
- dashboard.displayName = value;
+ this.selectedDashboard.displayName = elem.value;
this.requestUpdate("selectedDashboard");
}
}
@@ -602,32 +622,38 @@ export class OrDashboardBuilder extends translate(i18next)(LitElement) {
diff --git a/ui/component/or-dashboard-builder/src/or-dashboard-boardsettings.ts b/ui/component/or-dashboard-builder/src/or-dashboard-boardsettings.ts
index abb39c2e4f..2c51337083 100644
--- a/ui/component/or-dashboard-builder/src/or-dashboard-boardsettings.ts
+++ b/ui/component/or-dashboard-builder/src/or-dashboard-boardsettings.ts
@@ -1,12 +1,32 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {Dashboard, DashboardAccess, DashboardRefreshInterval, DashboardScalingPreset, DashboardScreenPreset} from "@openremote/model";
import {css, html, LitElement} from "lit";
import {customElement, property} from "lit/decorators.js";
-import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import {style} from './style';
import {i18next, translate} from "@openremote/or-translate";
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import {when} from "lit/directives/when.js";
import {dashboardAccessToString, scalingPresetToString, sortScreenPresets} from ".";
+import {OrVaadinSelect, SelectItem} from "@openremote/or-vaadin-components/or-vaadin-select";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
//language=css
const boardSettingsStyling = css`
@@ -57,12 +77,9 @@ export class OrDashboardBoardsettings extends translate(i18next)(LitElement) {
protected render() {
if (this.dashboard.template?.screenPresets != null) {
const screenPresets = sortScreenPresets(this.dashboard.template.screenPresets, true);
- const accessOptions = [DashboardAccess.PRIVATE, DashboardAccess.SHARED, DashboardAccess.PUBLIC].map((access) => ({key: access, value: dashboardAccessToString(access)}));
- const refreshIntervalOptions = [DashboardRefreshInterval.OFF, DashboardRefreshInterval.ONE_MIN, DashboardRefreshInterval.FIVE_MIN, DashboardRefreshInterval.QUARTER, DashboardRefreshInterval.ONE_HOUR].map(interval => ({key: interval, value: `dashboard.interval.${interval.toLowerCase()}`}))
- const scalingPresets: { key: DashboardScalingPreset, value: string }[] = [];
- [DashboardScalingPreset.KEEP_LAYOUT, DashboardScalingPreset.WRAP_TO_SINGLE_COLUMN, /*DashboardScalingPreset.REDIRECT,*/ DashboardScalingPreset.BLOCK_DEVICE].forEach((preset: DashboardScalingPreset) => {
- scalingPresets.push({key: preset, value: scalingPresetToString(preset)});
- });
+ const accessOptions: SelectItem[] = [DashboardAccess.PRIVATE, DashboardAccess.SHARED, DashboardAccess.PUBLIC].map((access) => ({value: access, label: dashboardAccessToString(access)}));
+ const refreshIntervalOptions: SelectItem[] = [DashboardRefreshInterval.OFF, DashboardRefreshInterval.ONE_MIN, DashboardRefreshInterval.FIVE_MIN, DashboardRefreshInterval.QUARTER, DashboardRefreshInterval.ONE_HOUR].map(interval => ({value: interval, label: i18next.t(`dashboard.interval.${interval.toLowerCase()}`)}))
+ const scalingPresets: SelectItem[] = [DashboardScalingPreset.KEEP_LAYOUT, DashboardScalingPreset.WRAP_TO_SINGLE_COLUMN, /*DashboardScalingPreset.REDIRECT,*/ DashboardScalingPreset.BLOCK_DEVICE].map((preset) => ({value: preset, label: scalingPresetToString(preset)}));
return html`
@@ -70,15 +87,11 @@ export class OrDashboardBoardsettings extends translate(i18next)(LitElement) {
`
})}
diff --git a/ui/component/or-dashboard-builder/src/or-dashboard-browser.ts b/ui/component/or-dashboard-builder/src/or-dashboard-browser.ts
index 9ffc8f7cd5..de6877f25b 100644
--- a/ui/component/or-dashboard-builder/src/or-dashboard-browser.ts
+++ b/ui/component/or-dashboard-builder/src/or-dashboard-browser.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {GridStack, GridStackNode} from "gridstack";
import {css, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
import {customElement, property, query, state} from "lit/decorators.js";
diff --git a/ui/component/or-dashboard-builder/src/or-dashboard-engine.ts b/ui/component/or-dashboard-builder/src/or-dashboard-engine.ts
index 30f551d4fa..ad5b8445b6 100644
--- a/ui/component/or-dashboard-builder/src/or-dashboard-engine.ts
+++ b/ui/component/or-dashboard-builder/src/or-dashboard-engine.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import { GridStackEngine, GridStackNode, GridStackMoveOpts } from 'gridstack';
export class OrDashboardEngine extends GridStackEngine {
diff --git a/ui/component/or-dashboard-builder/src/or-dashboard-keyhandler.ts b/ui/component/or-dashboard-builder/src/or-dashboard-keyhandler.ts
index b21bb3259e..71fa277d01 100644
--- a/ui/component/or-dashboard-builder/src/or-dashboard-keyhandler.ts
+++ b/ui/component/or-dashboard-builder/src/or-dashboard-keyhandler.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import { EventEmitter } from "events";
// Inspired by or-rules flow editor Input class
diff --git a/ui/component/or-dashboard-builder/src/or-dashboard-preview.ts b/ui/component/or-dashboard-builder/src/or-dashboard-preview.ts
index f5a228e200..f10097c77f 100644
--- a/ui/component/or-dashboard-builder/src/or-dashboard-preview.ts
+++ b/ui/component/or-dashboard-builder/src/or-dashboard-preview.ts
@@ -1,23 +1,42 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import manager, {DefaultColor4, DefaultColor5} from "@openremote/core";
-import {css, html, LitElement, TemplateResult, unsafeCSS} from "lit";
+import {css, html, LitElement, unsafeCSS} from "lit";
import {customElement, property, state} from "lit/decorators.js";
import {style} from "./style";
import "./or-dashboard-widgetcontainer";
import debounce from "lodash.debounce";
import {DashboardGridItem, DashboardScalingPreset, DashboardScreenPreset, DashboardTemplate, DashboardWidget} from "@openremote/model";
import {getActivePreset} from "./index";
-import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import "@openremote/or-components/or-loading-indicator";
import {repeat} from 'lit/directives/repeat.js';
import {GridItemHTMLElement, GridStack, GridStackElement, GridStackNode} from "gridstack";
import {showSnackbar} from "@openremote/or-mwc-components/or-mwc-snackbar";
-import {i18next, translate} from "@openremote/or-translate";
import {when} from "lit/directives/when.js";
-import {cache} from "lit/directives/cache.js";
import {guard} from "lit/directives/guard.js";
import {OrDashboardEngine} from "./or-dashboard-engine";
import {WidgetService} from "./service/widget-service";
import {OrDashboardWidgetContainer} from "./or-dashboard-widgetcontainer";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
+import {OrVaadinSelect, SelectItem} from "@openremote/or-vaadin-components/or-vaadin-select";
+import {i18next, translate} from "@openremote/or-translate";
// TODO: Add webpack/rollup to build so consumers aren't forced to use the same tooling
const gridcss = require('gridstack/dist/gridstack.min.css');
@@ -38,7 +57,7 @@ const editorStyling = css`
padding: 24px;
display: flex;
justify-content: center;
- align-items: center;
+ align-items: baseline;
}
/* Margins on view options */
#fit-btn { margin-right: 10px; }
@@ -507,25 +526,52 @@ export class OrDashboardPreview extends translate(i18next)(LitElement) {
` : undefined}
${this.rerenderActive ? html`
diff --git a/ui/component/or-dashboard-builder/src/or-dashboard-tree.ts b/ui/component/or-dashboard-builder/src/or-dashboard-tree.ts
index 2044adbcd6..88764af6b6 100644
--- a/ui/component/or-dashboard-builder/src/or-dashboard-tree.ts
+++ b/ui/component/or-dashboard-builder/src/or-dashboard-tree.ts
@@ -1,6 +1,24 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, LitElement, PropertyValues} from 'lit';
import {customElement, property} from 'lit/decorators.js';
-import {InputType} from '@openremote/or-mwc-components/or-mwc-input';
import '@openremote/or-icon';
import {style} from './style';
import {Dashboard} from '@openremote/model';
@@ -13,6 +31,7 @@ import {showSnackbar} from '@openremote/or-mwc-components/or-mwc-snackbar';
import {style as OrAssetTreeStyle} from '@openremote/or-asset-tree';
import {DashboardService, DashboardSizeOption} from './service/dashboard-service';
import {isAxiosError} from '@openremote/rest';
+import {when} from "lit/directives/when.js";
// language=css
const treeStyling = css`
@@ -224,34 +243,30 @@ export class OrDashboardTree extends translate(i18next)(LitElement) {
${this.showControls ? html`
diff --git a/ui/component/or-dashboard-builder/src/or-dashboard-widgetcontainer.ts b/ui/component/or-dashboard-builder/src/or-dashboard-widgetcontainer.ts
index 56233bf140..0bc471992e 100644
--- a/ui/component/or-dashboard-builder/src/or-dashboard-widgetcontainer.ts
+++ b/ui/component/or-dashboard-builder/src/or-dashboard-widgetcontainer.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {html, LitElement, PropertyValues} from "lit";
import {customElement, property, query, state} from "lit/decorators.js";
import {when} from "lit/directives/when.js";
diff --git a/ui/component/or-dashboard-builder/src/or-dashboard-widgetsettings.ts b/ui/component/or-dashboard-builder/src/or-dashboard-widgetsettings.ts
index 6425d3f2d6..ffd565c8f3 100644
--- a/ui/component/or-dashboard-builder/src/or-dashboard-widgetsettings.ts
+++ b/ui/component/or-dashboard-builder/src/or-dashboard-widgetsettings.ts
@@ -1,14 +1,33 @@
-import {Asset, DashboardWidget } from "@openremote/model";
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+import {DashboardWidget} from "@openremote/model";
import {html, LitElement, TemplateResult, unsafeCSS } from "lit";
import { customElement, property, state } from "lit/decorators.js";
-import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
import {style} from './style';
-import { i18next, translate } from "@openremote/or-translate";
import { until } from "lit/directives/until.js";
import {WidgetService} from "./service/widget-service";
import {WidgetSettings, WidgetSettingsChangedEvent} from "./util/widget-settings";
import {WidgetManifest} from "./util/or-widget";
import { guard } from "lit/directives/guard.js";
+import {OrVaadinTextField} from "@openremote/or-vaadin-components/or-vaadin-text-field";
+import {i18next, translate} from "@openremote/or-translate";
const tableStyle = require("@material/data-table/dist/mdc.data-table.css");
@@ -38,12 +57,13 @@ export class OrDashboardWidgetsettings extends translate(i18next)(LitElement) {
protected render() {
return html`
-
${guard([this.selectedWidget], () => html`
diff --git a/ui/component/or-dashboard-builder/src/panels/assettypes-panel.ts b/ui/component/or-dashboard-builder/src/panels/assettypes-panel.ts
index 6c52055753..9ead581255 100644
--- a/ui/component/or-dashboard-builder/src/panels/assettypes-panel.ts
+++ b/ui/component/or-dashboard-builder/src/panels/assettypes-panel.ts
@@ -1,15 +1,36 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, LitElement, PropertyValues, TemplateResult} from "lit";
import {customElement, property, state} from "lit/decorators.js";
import {AssetDescriptor, AssetModelUtil, AssetTypeInfo} from "@openremote/model";
-import {getContentWithMenuTemplate} from "@openremote/or-mwc-components/or-mwc-menu";
import {i18next} from "@openremote/or-translate";
-import {ListItem} from "@openremote/or-mwc-components/or-mwc-list";
import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import {Util} from "@openremote/core";
import {when} from "lit/directives/when.js";
import {createRef, Ref, ref} from 'lit/directives/ref.js';
import {AssetTreeConfig, OrAssetTree} from "@openremote/or-asset-tree";
import {OrMwcDialog, showDialog} from "@openremote/or-mwc-components/or-mwc-dialog";
+import {ComboBoxLitRenderer, comboBoxRenderer, OrVaadinComboBox} from "@openremote/or-vaadin-components/or-vaadin-combo-box";
+import {OrVaadinMultiSelectComboBox} from "@openremote/or-vaadin-components/or-vaadin-multi-select-combo-box";
+import {ListItem} from "@openremote/or-vaadin-components/or-vaadin-list-box";
+import { styleMap } from "lit/directives/style-map.js";
export class AssetTypeSelectEvent extends CustomEvent {
@@ -55,7 +76,7 @@ export class AttributeNamesSelectEvent extends CustomEvent {
public static readonly NAME = "attributenames-select";
- constructor(attributeNames: string | string[]) {
+ constructor(attributeNames: string[]) {
super(AttributeNamesSelectEvent.NAME, {
bubbles: true,
composed: true,
@@ -105,7 +126,7 @@ export class AssettypesPanel extends LitElement {
protected assetIds: undefined | string | string[];
@property() // names of selected attributes; either undefined, a single entry, or multi select
- protected attributeNames: undefined | string | string[];
+ protected attributeNames: undefined | string[];
/* ----------- */
@@ -138,29 +159,24 @@ export class AssettypesPanel extends LitElement {
}
protected render(): TemplateResult {
+ const assetTypeItems = this.mapDescriptors(this._loadedAssetTypes) as ListItem[];
+ const selected = this.assetType ? assetTypeItems.find(i => i.value === this.assetType) : undefined;
+ const itemRenderer: ComboBoxLitRenderer = (listItem: ListItem) => html`
+
`;
@@ -214,42 +234,11 @@ export class AssettypesPanel extends LitElement {
/* ----------- */
- protected getAssetTypeTemplate(): TemplateResult {
- if (this.assetType) {
- const descriptor: AssetDescriptor | undefined = this._loadedAssetTypes.find((at: AssetDescriptor) => at.name === this.assetType);
- if (descriptor) {
- return this.getSelectedHeader(descriptor);
- } else {
- return this.getSelectHeader();
- }
- } else {
- return this.getSelectHeader();
- }
- }
-
- protected getSelectHeader(): TemplateResult {
- return html`
-
-
- `;
- }
-
- protected getSelectedHeader(descriptor: AssetDescriptor): TemplateResult {
- return html`
-
-
- `;
- }
-
protected mapDescriptors(descriptors: AssetDescriptor[], withNoneValue?: ListItem): ListItem[] {
const items: ListItem[] = descriptors.map((descriptor) => {
return {
styleMap: {
- "--or-icon-fill": descriptor.colour ? "#" + descriptor.colour : "unset"
+ "color": descriptor.colour ? "#" + descriptor.colour : "unset"
},
icon: descriptor.icon,
text: Util.getAssetTypeLabel(descriptor),
diff --git a/ui/component/or-dashboard-builder/src/panels/attributes-panel.ts b/ui/component/or-dashboard-builder/src/panels/attributes-panel.ts
index ef0a1c0c2e..8c9de4e378 100644
--- a/ui/component/or-dashboard-builder/src/panels/attributes-panel.ts
+++ b/ui/component/or-dashboard-builder/src/panels/attributes-panel.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, CSSResult, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
import {customElement, property, state} from "lit/decorators.js";
import {Asset, AssetDescriptor, AssetModelUtil, Attribute, AttributeRef} from "@openremote/model";
@@ -8,7 +27,6 @@ import {guard} from "lit/directives/guard.js";
import {styleMap} from "lit/directives/style-map.js";
import {i18next} from "@openremote/or-translate";
import "@openremote/or-translate";
-import {InputType} from "@openremote/or-mwc-components/or-mwc-input";
import manager, {DefaultColor5, Util} from "@openremote/core";
import {getAssetDescriptorIconTemplate} from "@openremote/or-icon";
import {OrAssetAttributePicker, OrAssetAttributePickerPickedEvent} from "@openremote/or-attribute-picker";
@@ -308,10 +326,10 @@ export class AttributesPanel extends LitElement {
`)}
-
-
+ this.openAttributeSelector(this.attributeRefs, this.multi, this.onlyDataAttrs, this.attributeFilter)}>
+
+
+
`;
}
diff --git a/ui/component/or-dashboard-builder/src/panels/thresholds-panel.ts b/ui/component/or-dashboard-builder/src/panels/thresholds-panel.ts
index cc7d252ddf..efc4e121f8 100644
--- a/ui/component/or-dashboard-builder/src/panels/thresholds-panel.ts
+++ b/ui/component/or-dashboard-builder/src/panels/thresholds-panel.ts
@@ -1,9 +1,30 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import {css, CSSResult, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
import {customElement, property} from "lit/decorators.js";
import {ifDefined} from "lit/directives/if-defined.js";
import {DefaultColor5} from "@openremote/core";
import {style} from "../style";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
+import {OrVaadinTextField} from "@openremote/or-vaadin-components/or-vaadin-text-field";
export class ThresholdChangeEvent extends CustomEvent<[number, string][]> {
@@ -49,7 +70,7 @@ const styling = css`
#thresholds-list {
display: flex;
flex-direction: column;
- gap: 12px;
+ gap: 8px;
}
.threshold-list-item {
@@ -147,16 +168,15 @@ export class ThresholdsPanel extends LitElement {
}}"
>
`
diff --git a/ui/component/or-dashboard-builder/src/service/dashboard-service.ts b/ui/component/or-dashboard-builder/src/service/dashboard-service.ts
index 2bf2820280..ec4757ee1f 100644
--- a/ui/component/or-dashboard-builder/src/service/dashboard-service.ts
+++ b/ui/component/or-dashboard-builder/src/service/dashboard-service.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {Dashboard, DashboardRefreshInterval, DashboardScalingPreset, DashboardScreenPreset} from "@openremote/model";
import manager, {Util} from "@openremote/core";
import {i18next} from "@openremote/or-translate";
diff --git a/ui/component/or-dashboard-builder/src/service/widget-service.ts b/ui/component/or-dashboard-builder/src/service/widget-service.ts
index 28b7b0ae6e..635ffc9de3 100644
--- a/ui/component/or-dashboard-builder/src/service/widget-service.ts
+++ b/ui/component/or-dashboard-builder/src/service/widget-service.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {DashboardWidget} from "@openremote/model";
import {widgetTypes} from "../index";
import {WidgetConfig} from "../util/widget-config";
diff --git a/ui/component/or-dashboard-builder/src/settings/attribute-input-settings.ts b/ui/component/or-dashboard-builder/src/settings/attribute-input-settings.ts
index fade9eb01e..066b37be41 100644
--- a/ui/component/or-dashboard-builder/src/settings/attribute-input-settings.ts
+++ b/ui/component/or-dashboard-builder/src/settings/attribute-input-settings.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, TemplateResult } from "lit";
import { customElement } from "lit/decorators.js";
import {AttributeInputWidgetConfig} from "../widgets/attribute-input-widget";
diff --git a/ui/component/or-dashboard-builder/src/settings/barchart-settings.ts b/ui/component/or-dashboard-builder/src/settings/barchart-settings.ts
index 3b44440735..4db50d18cd 100644
--- a/ui/component/or-dashboard-builder/src/settings/barchart-settings.ts
+++ b/ui/component/or-dashboard-builder/src/settings/barchart-settings.ts
@@ -30,6 +30,7 @@ import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-m
import {when} from "lit/directives/when.js";
import moment from "moment/moment";
import {ListItem, ListType, OrMwcList} from "@openremote/or-mwc-components/or-mwc-list";
+import {OrVaadinSelect, SelectItem} from "@openremote/or-vaadin-components/or-vaadin-select";
import {showDialog, OrMwcDialog} from "@openremote/or-mwc-components/or-mwc-dialog";
import {BarChartAttributeConfig, BarChartInterval, IntervalConfig, OrAttributeBarChart} from "@openremote/or-attribute-barchart";
import {OrChart} from "@openremote/or-chart";
@@ -37,6 +38,7 @@ import {getAssetDescriptorIconTemplate} from "@openremote/or-icon";
import {createRef, Ref, ref} from "lit/directives/ref.js";
import {AttributesChartPanel} from "../panels/attributes-chart-panel";
import debounce from "lodash.debounce";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
const styling = css`
.switch-container {
@@ -146,8 +148,9 @@ export class BarChartSettings extends WidgetSettings {
}
];
};
- const timeWindowOpts = Array.from(this.timeWindowOptions.keys()).map(o => ([o, i18next.t(o.toLowerCase())] as [string, string]));
- const intervalOpts = Array.from(this.intervalOptions.keys()).map(o => ([o, i18next.t(`intervalBy${o.toLowerCase()}`)] as [string, string]));
+ const timePrefixOpts: SelectItem[] = this.timePrefixOptions.map(o => ({ value: o, label: i18next.t(o) }))
+ const timeWindowOpts: SelectItem[] = Array.from(this.timeWindowOptions.keys()).map(o => ({ value: o, label: i18next.t(o.toLowerCase()) }));
+ const intervalOpts: SelectItem[] = Array.from(this.intervalOptions.keys()).map(o => ({ value: o, label: i18next.t(`intervalBy${o.toLowerCase()}`)}));
return html`
@@ -164,18 +167,18 @@ export class BarChartSettings extends WidgetSettings {
${this.getSamplingOptionsTemplate(this.widgetConfig.datapointQuery.type)}
@@ -304,14 +329,15 @@ export class ChartSettings extends WidgetSettings {
switch (type) {
case "interval": {
const intervalQuery = this.widgetConfig.datapointQuery as AssetDatapointIntervalQuery;
- const formulaOptions = [AssetDatapointIntervalQueryFormula.AVG, AssetDatapointIntervalQueryFormula.MIN, AssetDatapointIntervalQueryFormula.MAX];
+ const formulaOptions: SelectItem[] = [AssetDatapointIntervalQueryFormula.AVG, AssetDatapointIntervalQueryFormula.MIN, AssetDatapointIntervalQueryFormula.MAX]
+ .map(o => ({value: o, label: i18next.t(o)}));
return html`
-
+ {
+ intervalQuery.formula = (ev.currentTarget as OrVaadinSelect).value as any;
+ this.notifyConfigUpdate();
+ }}>
+
+
`;
}
default:
@@ -471,9 +497,9 @@ export class ChartSettings extends WidgetSettings {
}
}
- protected onTimePrefixSelect(ev: OrInputChangedEvent) {
+ protected onTimePrefixSelect(ev: Event) {
let oldValue = this.widgetConfig.defaultTimePresetKey;
- const newPrefix = ev.detail.value.toString();
+ const newPrefix = (ev.currentTarget as OrVaadinSelect).value;
const prefixOptions = this.timePrefixOptions;
if(!prefixOptions.find(o => oldValue.includes(o))) {
oldValue = Array.from(this.timeWindowOptions.keys())[0]; // Old value was invalid, so we replace it in full
@@ -485,9 +511,9 @@ export class ChartSettings extends WidgetSettings {
this.notifyConfigUpdate();
}
- protected onTimeWindowSelect(ev: OrInputChangedEvent) {
+ protected onTimeWindowSelect(ev: Event) {
let oldValue = this.widgetConfig.defaultTimePresetKey;
- const newWindow = ev.detail.value.toString();
+ const newWindow = (ev.currentTarget as OrVaadinSelect).value;
const windowOptions = Array.from(this.timeWindowOptions.keys()).sort((a, b) => b.length - a.length);
if(!windowOptions.find(o => oldValue.includes(o))) {
oldValue = this.timePrefixOptions[0]; // Old value was invalid, so we replace it in full
@@ -536,16 +562,20 @@ export class ChartSettings extends WidgetSettings {
this.notifyConfigUpdate();
}
- protected onMinMaxValueChange(axis: 'left' | 'right', type: 'min' | 'max', ev: OrInputChangedEvent) {
- this.setAxisMinMaxValue(axis, type, ev.detail.value);
+ protected onMinMaxValueChange(axis: 'left' | 'right', type: 'min' | 'max', ev: Event) {
+ const elem = ev.currentTarget as OrVaadinNumberField;
+ if(elem.checkValidity()) {
+ this.setAxisMinMaxValue(axis, type, Number(elem.value));
+ }
}
protected onMinMaxValueToggle(axis: 'left' | 'right', type: 'min' | 'max', ev: OrInputChangedEvent) {
this.setAxisMinMaxValue(axis, type, (ev.detail.value ? (type === 'min' ? 0 : 100) : undefined));
}
- protected onSamplingQueryChange(ev: OrInputChangedEvent) {
- this.widgetConfig.datapointQuery.type = this.samplingOptions.get(ev.detail.value)! as any;
+ protected onSamplingQueryChange(ev: Event) {
+ const elem = ev.currentTarget as OrVaadinSelect;
+ this.widgetConfig.datapointQuery.type = elem.value as any;
this.notifyConfigUpdate();
}
}
diff --git a/ui/component/or-dashboard-builder/src/settings/gateway-settings.ts b/ui/component/or-dashboard-builder/src/settings/gateway-settings.ts
index 773c0b603e..23ff8d9eae 100644
--- a/ui/component/or-dashboard-builder/src/settings/gateway-settings.ts
+++ b/ui/component/or-dashboard-builder/src/settings/gateway-settings.ts
@@ -1,12 +1,32 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import { customElement } from "lit/decorators.js";
import {WidgetSettings} from "../util/widget-settings";
import {TemplateResult, html} from "lit";
-import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
import {i18next} from "@openremote/or-translate";
import {Asset, AssetQuery, AttributeRef, GatewayTunnelInfoType} from "@openremote/model";
import {GatewayWidgetConfig} from "../widgets/gateway-widget";
import {Task} from "@lit/task";
import manager from "@openremote/core";
+import {OrVaadinSelect, SelectItem} from "@openremote/or-vaadin-components/or-vaadin-select";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
@customElement("gateway-settings")
export class GatewaySettings extends WidgetSettings {
@@ -23,6 +43,7 @@ export class GatewaySettings extends WidgetSettings {
protected render(): TemplateResult {
const disabled = !this.widgetConfig.gatewayId;
+ const tunnelTypeItems: SelectItem[] = this.GATEWAY_TUNNEL_TYPES.map(t => ({value: t, label: i18next.t(t)}));
return html`
@@ -30,75 +51,71 @@ export class GatewaySettings extends WidgetSettings {
`;
}
- protected _onAssetSelect(ev: OrInputChangedEvent): void {
- this.widgetConfig.gatewayId = ev.detail.value;
- this.widgetConfig.attributeRefs = [{id: ev.detail.value, name: undefined} as AttributeRef]; // Add to attributeRefs object, so the backend is aware of asset permissions
+ protected _onAssetSelect(ev: Event): void {
+ const elem = ev.currentTarget as OrVaadinSelect;
+ this.widgetConfig.gatewayId = elem.value;
+ this.widgetConfig.attributeRefs = [{id: elem.value, name: undefined} as AttributeRef]; // Add to attributeRefs object, so the backend is aware of asset permissions
this.notifyConfigUpdate();
}
- protected _onTunnelTypeSelect(ev: OrInputChangedEvent) {
- this.widgetConfig.type = ev.detail.value;
+ protected _onTunnelTypeSelect(ev: Event) {
+ this.widgetConfig.type = (ev.currentTarget as OrVaadinSelect).value as GatewayTunnelInfoType;
this.notifyConfigUpdate();
}
- protected _onTunnelTargetSelect(ev: OrInputChangedEvent) {
- this.widgetConfig.target = ev.detail.value;
+ protected _onTunnelTargetSelect(ev: Event) {
+ this.widgetConfig.target = (ev.currentTarget as HTMLInputElement).value;
this.notifyConfigUpdate();
}
- protected _onTunnelTargetPortSelect(ev: OrInputChangedEvent) {
- this.widgetConfig.targetPort = ev.detail.value;
- this.notifyConfigUpdate();
+ protected _onTunnelTargetPortSelect(ev: Event) {
+ const elem = ev.currentTarget as OrVaadinNumberField;
+ if(elem.checkValidity()) {
+ this.widgetConfig.targetPort = Number(elem.value);
+ this.notifyConfigUpdate();
+ }
}
diff --git a/ui/component/or-dashboard-builder/src/settings/gauge-settings.ts b/ui/component/or-dashboard-builder/src/settings/gauge-settings.ts
index 6e375023c4..9c06206cc7 100644
--- a/ui/component/or-dashboard-builder/src/settings/gauge-settings.ts
+++ b/ui/component/or-dashboard-builder/src/settings/gauge-settings.ts
@@ -1,12 +1,30 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {html, TemplateResult} from "lit";
import {customElement} from "lit/decorators.js";
import {WidgetSettings} from "../util/widget-settings";
-import {i18next} from "@openremote/or-translate";
import {GaugeWidgetConfig} from "../widgets/gauge-widget";
import {AttributesSelectEvent} from "../panels/attributes-panel";
import {Attribute} from "@openremote/model";
-import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
import {ThresholdChangeEvent} from "../panels/thresholds-panel";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
@customElement("gauge-settings")
export class GaugeSettings extends WidgetSettings {
@@ -31,17 +49,20 @@ export class GaugeSettings extends WidgetSettings {
@@ -69,26 +90,31 @@ export class GaugeSettings extends WidgetSettings {
this.notifyConfigUpdate();
}
- protected onMinMaxValueChange(type: 'min' | 'max', ev: OrInputChangedEvent) {
+ protected onMinMaxValueChange(type: 'min' | 'max', ev: Event) {
+ const elem = ev.currentTarget as OrVaadinNumberField;
+ if(!elem.checkValidity()) {
+ return;
+ }
+ const newValue = Number(elem.value);
switch (type) {
case "max": {
- this.widgetConfig.max = ev.detail.value;
+ this.widgetConfig.max = newValue;
// Make sure every threshold value is not higher than what is allowed.
const sortedThresholds = this.widgetConfig.thresholds.sort((x, y) => y[0] - x[0]);
sortedThresholds.forEach((t, index) => {
- t[0] = Math.max(Math.min(t[0], (ev.detail.value - index - 1)), this.widgetConfig.min);
+ t[0] = Math.max(Math.min(t[0], (newValue - index - 1)), this.widgetConfig.min);
});
break;
}
case "min": {
- this.widgetConfig.min = ev.detail.value;
+ this.widgetConfig.min = newValue;
// Update the lowest (locked) threshold value to minimum value, and make sure every threshold value is not lower than what is allowed.
const sortedThresholds = this.widgetConfig.thresholds.sort((x, y) => (x[0] < y[0]) ? -1 : 1);
- sortedThresholds[0][0] = ev.detail.value;
+ sortedThresholds[0][0] = newValue;
sortedThresholds.forEach((t, index) => {
- t[0] = Math.min(Math.max(t[0], (ev.detail.value + index)), this.widgetConfig.max);
+ t[0] = Math.min(Math.max(t[0], (newValue + index)), this.widgetConfig.max);
})
break;
}
@@ -96,9 +122,12 @@ export class GaugeSettings extends WidgetSettings {
this.notifyConfigUpdate();
}
- protected onDecimalsChange(ev: OrInputChangedEvent) {
- this.widgetConfig.decimals = ev.detail.value;
- this.notifyConfigUpdate();
+ protected onDecimalsChange(ev: Event) {
+ const elem = ev.currentTarget as OrVaadinNumberField;
+ if(elem.checkValidity()) {
+ this.widgetConfig.decimals = Number(elem.value);
+ this.notifyConfigUpdate();
+ }
}
protected onThresholdChange(ev: ThresholdChangeEvent) {
diff --git a/ui/component/or-dashboard-builder/src/settings/image-settings.ts b/ui/component/or-dashboard-builder/src/settings/image-settings.ts
index 8be12c3acd..fefc0cd577 100644
--- a/ui/component/or-dashboard-builder/src/settings/image-settings.ts
+++ b/ui/component/or-dashboard-builder/src/settings/image-settings.ts
@@ -1,14 +1,33 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, PropertyValues, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement} from "lit/decorators.js";
import {ImageWidgetConfig} from "../widgets/image-widget";
-import {i18next} from "@openremote/or-translate";
import {AttributesSelectEvent} from "../panels/attributes-panel";
-import {Asset, AssetModelUtil, AttributeRef} from "@openremote/model";
+import {AssetModelUtil} from "@openremote/model";
import { map } from "lit/directives/map.js";
-import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
import {Util} from "@openremote/core";
import { when } from "lit/directives/when.js";
import {AssetWidgetSettings} from "../util/or-asset-widget";
+import {OrVaadinTextField} from "@openremote/or-vaadin-components/or-vaadin-text-field";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
const styling = css`
#marker-container {
@@ -68,11 +87,9 @@ export class ImageSettings extends AssetWidgetSettings {
-
`;
@@ -158,15 +177,19 @@ export class ImageSettings extends AssetWidgetSettings {
}
}
- protected onCoordinateUpdate(index: number, coordinate: 'x' | 'y', value: number) {
+ protected onCoordinateUpdate(index: number, coordinate: 'x' | 'y', ev: Event) {
+ const elem = ev.currentTarget as OrVaadinNumberField;
+ if(!elem.checkValidity()) {
+ return;
+ }
let coords = this.widgetConfig.markers[index].coordinates;
if(!coords) {
coords = [0, 0];
}
if(coordinate === 'x') {
- coords[0] = value;
+ coords[0] = Number(elem.value);
} else if(coordinate === 'y') {
- coords[1] = value;
+ coords[1] = Number(elem.value);
}
this.widgetConfig.markers[index].coordinates = coords;
this.notifyConfigUpdate();
diff --git a/ui/component/or-dashboard-builder/src/settings/kpi-settings.ts b/ui/component/or-dashboard-builder/src/settings/kpi-settings.ts
index a6390cb54b..84d9330cd0 100644
--- a/ui/component/or-dashboard-builder/src/settings/kpi-settings.ts
+++ b/ui/component/or-dashboard-builder/src/settings/kpi-settings.ts
@@ -1,11 +1,32 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, TemplateResult } from "lit";
import { customElement } from "lit/decorators.js";
import {AssetWidgetSettings} from "../util/or-asset-widget";
import {i18next} from "@openremote/or-translate";
import {KpiWidgetConfig} from "../widgets/kpi-widget";
import {AttributesSelectEvent} from "../panels/attributes-panel";
-import {Attribute, AttributeRef} from "@openremote/model";
+import {Attribute} from "@openremote/model";
import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+import {OrVaadinSelect} from "@openremote/or-vaadin-components/or-vaadin-select";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
const styling = css`
.switchMwcInputContainer {
@@ -40,11 +61,10 @@ export class KpiSettings extends AssetWidgetSettings {
@@ -83,8 +104,8 @@ export class KpiSettings extends AssetWidgetSettings {
this.notifyConfigUpdate();
}
- protected onTimeframeSelect(ev: OrInputChangedEvent) {
- this.widgetConfig.period = ev.detail.value;
+ protected onTimeframeSelect(ev: Event) {
+ this.widgetConfig.period = (ev.currentTarget as OrVaadinSelect).value as any;
this.notifyConfigUpdate();
}
@@ -93,14 +114,17 @@ export class KpiSettings extends AssetWidgetSettings {
this.notifyConfigUpdate();
}
- protected onDeltaFormatSelect(ev: OrInputChangedEvent) {
- this.widgetConfig.deltaFormat = ev.detail.value;
+ protected onDeltaFormatSelect(ev: Event) {
+ this.widgetConfig.deltaFormat = (ev.currentTarget as OrVaadinSelect).value as any;
this.notifyConfigUpdate();
}
- protected onDecimalsChange(ev: OrInputChangedEvent) {
- this.widgetConfig.decimals = ev.detail.value;
- this.notifyConfigUpdate();
+ protected onDecimalsChange(ev: Event) {
+ const elem = ev.currentTarget as OrVaadinNumberField;
+ if(elem.checkValidity()) {
+ this.widgetConfig.decimals = Number(elem.value);
+ this.notifyConfigUpdate();
+ }
}
}
diff --git a/ui/component/or-dashboard-builder/src/settings/map-settings.ts b/ui/component/or-dashboard-builder/src/settings/map-settings.ts
index cde1d1c0ec..de269d7a84 100644
--- a/ui/component/or-dashboard-builder/src/settings/map-settings.ts
+++ b/ui/component/or-dashboard-builder/src/settings/map-settings.ts
@@ -1,7 +1,25 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, TemplateResult} from "lit";
import {customElement} from "lit/decorators.js";
import {AssetWidgetSettings} from "../util/or-asset-widget";
-import {i18next} from "@openremote/or-translate";
import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import {MapWidgetConfig} from "../widgets/map-widget";
import {LngLatLike, MapMarkerColours, LngLat} from "@openremote/or-map";
@@ -12,6 +30,8 @@ import {AssetIdsSelectEvent, AssetTypeSelectEvent, AssetAllOfTypeSwitchEvent, As
import manager from "@openremote/core";
import {showSnackbar} from "@openremote/or-mwc-components/or-mwc-snackbar";
import {BoolColorsChangeEvent, TextColorsChangeEvent, ThresholdChangeEvent} from "../panels/thresholds-panel";
+import {OrVaadinNumberField} from "@openremote/or-vaadin-components/or-vaadin-number-field";
+import {OrVaadinTextField} from "@openremote/or-vaadin-components/or-vaadin-text-field";
const styling = css`
.switchMwcInputContainer {
@@ -49,19 +69,14 @@ export class MapSettings extends AssetWidgetSettings {
@@ -87,8 +106,9 @@ export class TableSettings extends AssetWidgetSettings {
this.notifyConfigUpdate();
}
- protected onTableSizeSelect(ev: OrInputChangedEvent) {
- const value = ev.detail.value || 10;
+ protected onTableSizeSelect(ev: Event) {
+ const elem = ev.currentTarget as OrVaadinSelect;
+ const value = Number(elem.value || 10);
this.widgetConfig.tableSize = value;
if(value !== 10) {
this.widgetConfig.tableOptions = [value];
diff --git a/ui/component/or-dashboard-builder/src/style.ts b/ui/component/or-dashboard-builder/src/style.ts
index 360101d03a..4a4ab8b9c6 100644
--- a/ui/component/or-dashboard-builder/src/style.ts
+++ b/ui/component/or-dashboard-builder/src/style.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import { css, unsafeCSS } from "lit";
import {DefaultColor1, DefaultColor2, DefaultColor4, DefaultColor5} from "@openremote/core";
diff --git a/ui/component/or-dashboard-builder/src/util/or-asset-widget.ts b/ui/component/or-dashboard-builder/src/util/or-asset-widget.ts
index c33fccca00..a17288ef28 100644
--- a/ui/component/or-dashboard-builder/src/util/or-asset-widget.ts
+++ b/ui/component/or-dashboard-builder/src/util/or-asset-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {OrWidget} from "./or-widget";
import {Asset, AssetQuery, Attribute, AttributeRef} from "@openremote/model";
import { state } from "lit/decorators.js";
diff --git a/ui/component/or-dashboard-builder/src/util/or-widget.ts b/ui/component/or-dashboard-builder/src/util/or-widget.ts
index 2bd0f7f18f..406a937832 100644
--- a/ui/component/or-dashboard-builder/src/util/or-widget.ts
+++ b/ui/component/or-dashboard-builder/src/util/or-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {CSSResult, LitElement, TemplateResult } from "lit";
import { property } from "lit/decorators.js";
import {WidgetConfig} from "./widget-config";
diff --git a/ui/component/or-dashboard-builder/src/util/settings-panel.ts b/ui/component/or-dashboard-builder/src/util/settings-panel.ts
index ed7ed6644d..92df537199 100644
--- a/ui/component/or-dashboard-builder/src/util/settings-panel.ts
+++ b/ui/component/or-dashboard-builder/src/util/settings-panel.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators.js";
import { until } from "lit/directives/until.js";
diff --git a/ui/component/or-dashboard-builder/src/util/widget-config.ts b/ui/component/or-dashboard-builder/src/util/widget-config.ts
index de61082ccc..e5e8c35833 100644
--- a/ui/component/or-dashboard-builder/src/util/widget-config.ts
+++ b/ui/component/or-dashboard-builder/src/util/widget-config.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {AttributeRef} from "@openremote/model";
/**
diff --git a/ui/component/or-dashboard-builder/src/util/widget-settings.ts b/ui/component/or-dashboard-builder/src/util/widget-settings.ts
index fdaa2ca42f..5d1929337a 100644
--- a/ui/component/or-dashboard-builder/src/util/widget-settings.ts
+++ b/ui/component/or-dashboard-builder/src/util/widget-settings.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {LitElement, PropertyValues, TemplateResult } from "lit";
import { property } from "lit/decorators.js";
import {WidgetConfig} from "./widget-config";
diff --git a/ui/component/or-dashboard-builder/src/widgets/attribute-input-widget.ts b/ui/component/or-dashboard-builder/src/widgets/attribute-input-widget.ts
index 925a0cde6c..83fbebee35 100644
--- a/ui/component/or-dashboard-builder/src/widgets/attribute-input-widget.ts
+++ b/ui/component/or-dashboard-builder/src/widgets/attribute-input-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, PropertyValues, TemplateResult } from "lit";
import {OrAssetWidget} from "../util/or-asset-widget";
import {AssetWidgetConfig} from "../util/widget-config";
diff --git a/ui/component/or-dashboard-builder/src/widgets/chart-widget.ts b/ui/component/or-dashboard-builder/src/widgets/chart-widget.ts
index 56cbb9106e..b3292347bb 100644
--- a/ui/component/or-dashboard-builder/src/widgets/chart-widget.ts
+++ b/ui/component/or-dashboard-builder/src/widgets/chart-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {AssetDatapointLTTBQuery, AssetDatapointQueryUnion, Attribute, AttributeRef} from "@openremote/model";
import {html, PropertyValues, TemplateResult } from "lit";
import { when } from "lit/directives/when.js";
diff --git a/ui/component/or-dashboard-builder/src/widgets/gateway-widget.ts b/ui/component/or-dashboard-builder/src/widgets/gateway-widget.ts
index 976aa44fc5..8482a4d3d6 100644
--- a/ui/component/or-dashboard-builder/src/widgets/gateway-widget.ts
+++ b/ui/component/or-dashboard-builder/src/widgets/gateway-widget.ts
@@ -1,10 +1,28 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {customElement, state} from "lit/decorators.js";
import {OrWidget, WidgetManifest} from "../util/or-widget";
import {css, html, PropertyValues, TemplateResult} from "lit";
import {WidgetSettings} from "../util/widget-settings";
-import {AssetWidgetConfig, WidgetConfig} from "../util/widget-config";
+import {AssetWidgetConfig} from "../util/widget-config";
import {GatewaySettings} from "../settings/gateway-settings";
-import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import {GatewayTunnelInfo, GatewayTunnelInfoType} from "@openremote/model";
import manager from "@openremote/core";
import {when} from "lit/directives/when.js";
@@ -141,19 +159,22 @@ export class GatewayWidget extends OrWidget {
if (this._activeTunnel) {
return html`
@@ -161,9 +182,9 @@ export class GatewayWidget extends OrWidget {
`;
} else {
return html`
-
+ this._onStartTunnelClick(ev)}>
+
+
`;
}
})}
@@ -175,7 +196,7 @@ export class GatewayWidget extends OrWidget {
/**
* HTML callback function when 'copy address' button is pressed for a TCP tunnel.
*/
- protected _onCopyTunnelAddressClick(ev: OrInputChangedEvent) {
+ protected _onCopyTunnelAddressClick(_ev: Event) {
if (this._isConfigComplete(this.widgetConfig)) {
const tunnelInfo = this._getTunnelInfoByConfig(this.widgetConfig);
const address = this._getTunnelAddress(tunnelInfo);
@@ -196,21 +217,21 @@ export class GatewayWidget extends OrWidget {
/**
* HTML callback function when 'start' button is pressed, meant to create / start a new tunnel.
*/
- protected _onStartTunnelClick(ev: OrInputChangedEvent) {
+ protected _onStartTunnelClick(_ev: Event) {
this._tryStartTunnel(this.widgetConfig);
}
/**
* HTML callback function when 'stop' button is pressed, meant to destroy the active tunnel.
*/
- protected _onStopTunnelClick(ev: OrInputChangedEvent) {
+ protected _onStopTunnelClick(_ev: Event) {
this._tryStopTunnel(this.widgetConfig);
}
/**
* HTML callback function when 'open' button is pressed, meant to start using the tunnel.
*/
- protected _onTunnelNavigateClick(ev: OrInputChangedEvent, activeTunnel?: GatewayTunnelInfo) {
+ protected _onTunnelNavigateClick(_ev: Event, activeTunnel?: GatewayTunnelInfo) {
if(activeTunnel) {
this._navigateToTunnel(activeTunnel);
} else {
diff --git a/ui/component/or-dashboard-builder/src/widgets/gauge-widget.ts b/ui/component/or-dashboard-builder/src/widgets/gauge-widget.ts
index 4ba96f5efc..55529f157b 100644
--- a/ui/component/or-dashboard-builder/src/widgets/gauge-widget.ts
+++ b/ui/component/or-dashboard-builder/src/widgets/gauge-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {html, css, TemplateResult} from "lit";
import {customElement, state} from "lit/decorators.js";
import {OrAssetWidget} from "../util/or-asset-widget";
diff --git a/ui/component/or-dashboard-builder/src/widgets/image-widget.ts b/ui/component/or-dashboard-builder/src/widgets/image-widget.ts
index be1f9ae6ca..280fc13687 100644
--- a/ui/component/or-dashboard-builder/src/widgets/image-widget.ts
+++ b/ui/component/or-dashboard-builder/src/widgets/image-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {AssetWidgetConfig} from "../util/widget-config";
import {AssetModelUtil, Attribute, AttributeRef, WellknownValueTypes} from "@openremote/model";
import {OrWidget, WidgetManifest} from "../util/or-widget";
diff --git a/ui/component/or-dashboard-builder/src/widgets/kpi-widget.ts b/ui/component/or-dashboard-builder/src/widgets/kpi-widget.ts
index 6316f44237..09dab4ed89 100644
--- a/ui/component/or-dashboard-builder/src/widgets/kpi-widget.ts
+++ b/ui/component/or-dashboard-builder/src/widgets/kpi-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import { customElement, state } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import {OrAssetWidget} from "../util/or-asset-widget";
diff --git a/ui/component/or-dashboard-builder/src/widgets/map-widget.ts b/ui/component/or-dashboard-builder/src/widgets/map-widget.ts
index 808fcead6b..f41f424ea4 100644
--- a/ui/component/or-dashboard-builder/src/widgets/map-widget.ts
+++ b/ui/component/or-dashboard-builder/src/widgets/map-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {html, PropertyValues, TemplateResult} from "lit";
import {customElement, query, state} from "lit/decorators.js";
import {OrAssetWidget} from "../util/or-asset-widget";
diff --git a/ui/component/or-dashboard-builder/src/widgets/table-widget.ts b/ui/component/or-dashboard-builder/src/widgets/table-widget.ts
index fa10bc70be..9724502455 100644
--- a/ui/component/or-dashboard-builder/src/widgets/table-widget.ts
+++ b/ui/component/or-dashboard-builder/src/widgets/table-widget.ts
@@ -1,3 +1,22 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {css, html, PropertyValues, TemplateResult } from "lit";
import { customElement } from "lit/decorators.js";
import {OrAssetWidget} from "../util/or-asset-widget";
diff --git a/ui/component/or-json-forms/package.json b/ui/component/or-json-forms/package.json
index b3e83f81cd..ed216a2913 100644
--- a/ui/component/or-json-forms/package.json
+++ b/ui/component/or-json-forms/package.json
@@ -27,6 +27,7 @@
"@openremote/or-components": "workspace:*",
"@openremote/or-mwc-components": "workspace:*",
"@openremote/or-translate": "workspace:*",
+ "@openremote/or-vaadin-components": "workspace:*",
"ajv": "^8.8.2",
"lit": "^3.3.1"
},
diff --git a/ui/component/or-json-forms/src/controls/control-array-element.ts b/ui/component/or-json-forms/src/controls/control-array-element.ts
index de03bd2f2f..7d3e28ec9d 100644
--- a/ui/component/or-json-forms/src/controls/control-array-element.ts
+++ b/ui/component/or-json-forms/src/controls/control-array-element.ts
@@ -11,12 +11,13 @@ import {
import {css, html, PropertyValues, TemplateResult, unsafeCSS} from "lit";
import {customElement, property} from "lit/decorators.js";
import {CombinatorInfo, controlWithoutLabel, getCombinatorInfos, getTemplateFromProps, showJsonEditor} from "../util";
-import {InputType, OrMwcInput} from "@openremote/or-mwc-components/or-mwc-input";
import {i18next} from "@openremote/or-translate";
import {OrMwcDialog, showDialog} from "@openremote/or-mwc-components/or-mwc-dialog";
import "@openremote/or-mwc-components/or-mwc-list";
import {addItemOrParameterDialogStyle, baseStyle, panelStyle} from "../styles";
import {ListItem, OrMwcListChangedEvent} from "@openremote/or-mwc-components/or-mwc-list";
+import {OrVaadinButton} from "@openremote/or-vaadin-components/or-vaadin-button";
+import "@openremote/or-vaadin-components/or-vaadin-button";
import {DefaultColor4, DefaultColor5} from "@openremote/core";
import {ControlBaseElement} from "./control-base-element";
import {getTemplateWrapper} from "../index";
@@ -165,7 +166,12 @@ export class ControlArrayElement extends ControlBaseElement {
`;
}
diff --git a/ui/component/or-map/src/or-map-asset-card.ts b/ui/component/or-map/src/or-map-asset-card.ts
index 40a71385dc..c252a8d5ba 100644
--- a/ui/component/or-map/src/or-map-asset-card.ts
+++ b/ui/component/or-map/src/or-map-asset-card.ts
@@ -1,10 +1,4 @@
-import {
- CSSResultGroup,
- html,
- LitElement,
- PropertyValues,
- TemplateResult
-} from "lit";
+import {CSSResultGroup, html, LitElement, PropertyValues, TemplateResult} from "lit";
import {customElement, property} from "lit/decorators.js";
import { classMap } from 'lit-html/directives/class-map.js';
import {
@@ -20,7 +14,6 @@ import {
import manager, {subscribe, Util} from "@openremote/core";
import "@openremote/or-icon";
import {mapAssetCardStyle} from "./style";
-import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
import { getMarkerIconAndColorFromAssetType } from "./util";
import {getMarkerConfigAttributeName, MapMarkerAssetConfig} from "./markers/or-map-marker-asset";
@@ -177,7 +170,10 @@ export class OrMapAssetCard extends subscribe(manager)(LitElement) {
${cardConfig && cardConfig.hideViewAsset ? html`` : html`
`}
diff --git a/ui/component/or-map/tsconfig.json b/ui/component/or-map/tsconfig.json
index 104c7eef38..e9bfba522a 100644
--- a/ui/component/or-map/tsconfig.json
+++ b/ui/component/or-map/tsconfig.json
@@ -14,6 +14,7 @@
{ "path": "../model" },
{ "path": "../or-translate" },
{ "path": "../or-mwc-components" },
- { "path": "../or-icon" }
+ { "path": "../or-icon" },
+ { "path": "../or-vaadin-components" }
]
}
diff --git a/ui/component/or-mwc-components/src/or-mwc-dialog.ts b/ui/component/or-mwc-components/src/or-mwc-dialog.ts
index 4bc99f7b7a..3a91921b64 100644
--- a/ui/component/or-mwc-components/src/or-mwc-dialog.ts
+++ b/ui/component/or-mwc-components/src/or-mwc-dialog.ts
@@ -157,6 +157,7 @@ const style = css`
}
.dialog-container {
+ font-family: inherit; /* Disables Material UI font family, and prioritizes our own */
display: flex;
flex-direction: row;
}
diff --git a/ui/component/or-mwc-components/src/or-mwc-input.ts b/ui/component/or-mwc-components/src/or-mwc-input.ts
index d672231a4a..4fd2bf76a3 100644
--- a/ui/component/or-mwc-components/src/or-mwc-input.ts
+++ b/ui/component/or-mwc-components/src/or-mwc-input.ts
@@ -1,6 +1,5 @@
import {css, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
import {customElement, property, state} from "lit/decorators.js";
-import {Ref, ref, createRef} from "lit/directives/ref.js";
import {classMap} from "lit/directives/class-map.js";
import {ifDefined} from "lit/directives/if-defined.js";
import {when} from 'lit/directives/when.js';
@@ -20,36 +19,23 @@ import {DefaultColor4, DefaultColor5, DefaultColor8, Util} from "@openremote/cor
import "@openremote/or-icon";
import {OrIcon} from "@openremote/or-icon";
import {
- AssetDescriptor,
- Attribute,
- AttributeDescriptor,
- MetaHolder,
- NameHolder,
- NameValueHolder,
- ValueConstraint,
+ Attribute, AttributeDescriptor,
+ MetaHolder, NameValueHolder,
ValueConstraintAllowedValues,
ValueConstraintFuture,
- ValueConstraintFutureOrPresent,
- ValueConstraintMax,
- ValueConstraintMin,
+ ValueConstraintFutureOrPresent, ValueConstraintMax, ValueConstraintMin,
ValueConstraintNotBlank,
ValueConstraintNotEmpty,
- ValueConstraintNotNull,
- ValueConstraintPast,
- ValueConstraintPastOrPresent,
- ValueConstraintPattern,
+ ValueConstraintNotNull, ValueConstraintPast, ValueConstraintPastOrPresent, ValueConstraintPattern,
ValueConstraintSize,
- ValueDescriptor,
- ValueDescriptorHolder,
- ValueFormat,
- ValueFormatStyleRepresentation,
- ValueHolder,
- WellknownMetaItems,
- WellknownValueTypes
+ ValueFormatStyleRepresentation, WellknownMetaItems, WellknownValueTypes
} from "@openremote/model";
+import type {AssetDescriptor, NameHolder,
+ ValueConstraint, ValueDescriptor, ValueDescriptorHolder, ValueFormat, ValueHolder} from "@openremote/model";
import {getItemTemplate, getListTemplate, ListItem, ListType} from "./or-mwc-list";
import { i18next } from "@openremote/or-translate";
-import { styleMap } from "lit/directives/style-map.js";
+import {styleMap} from "lit/directives/style-map.js";
+import {createRef, Ref, ref} from "lit/directives/ref.js";
// TODO: Add webpack/rollup to build so consumers aren't forced to use the same tooling
const buttonStyle = require("@material/button/dist/mdc.button.css");
@@ -69,6 +55,7 @@ const menuSurfaceStyle = require("@material/menu-surface/dist/mdc.menu-surface.c
const menuStyle = require("@material/menu/dist/mdc.menu.css");
const sliderStyle = require("@material/slider/dist/mdc.slider.css");
+/** @deprecated Please use `or-vaadin-input` instead. */
export class OrInputChangedEvent extends CustomEvent {
public static readonly NAME = "or-mwc-input-changed";
@@ -86,6 +73,7 @@ export class OrInputChangedEvent extends CustomEvent
}
}
+/** @deprecated Please use `or-vaadin-input` instead. */
export interface OrInputChangedEventDetail {
value?: any;
previousValue?: any;
@@ -98,6 +86,7 @@ declare global {
}
}
+/** @deprecated Please use `or-vaadin-input` instead. */
export enum InputType {
BUTTON = "button",
BUTTON_TOGGLE = "button-toggle",
@@ -131,6 +120,7 @@ export enum InputType {
DURATION_PERIOD = "duration-period"
}
+/** @deprecated Please use `or-vaadin-input` instead. */
export interface ValueInputProviderOptions {
label?: string;
required?: boolean;
@@ -144,6 +134,7 @@ export interface ValueInputProviderOptions {
inputType?: InputType;
}
+/** @deprecated Please use `or-vaadin-input` instead. */
export interface ValueInputProvider {
templateFunction: ValueInputTemplateFunction;
supportsHelperText: boolean;
@@ -152,8 +143,10 @@ export interface ValueInputProvider {
validator?: () => boolean;
}
+/** @deprecated Please use `or-vaadin-input` instead. */
export type ValueInputTemplateFunction = ((value: any, focused: boolean, loading: boolean, sending: boolean, error: boolean, helperText: string | undefined) => TemplateResult | PromiseLike) | undefined;
+/** @deprecated Please use `or-vaadin-input` instead */
export type ValueInputProviderGenerator = (assetDescriptor: AssetDescriptor | string, valueHolder: NameHolder & ValueHolder | undefined, valueHolderDescriptor: ValueDescriptorHolder | undefined, valueDescriptor: ValueDescriptor, valueChangeNotifier: (value: OrInputChangedEventDetail & { errors?: boolean } | undefined) => void, options: ValueInputProviderOptions) => ValueInputProvider;
function inputTypeSupportsButton(inputType: InputType): boolean {
@@ -214,263 +207,6 @@ export const SUPPORTED_WELLKNOWN_VALUE_TYPES = [
export type SupportedWellknownValueTypes = typeof SUPPORTED_WELLKNOWN_VALUE_TYPES[number];
-export const getValueHolderInputTemplateProvider: ValueInputProviderGenerator = (assetDescriptor, valueHolder, valueHolderDescriptor, valueDescriptor, valueChangeNotifier, options) => {
-
- let inputType: InputType | undefined = options.inputType;
- let step: number | undefined;
- let pattern: string | undefined;
- let min: any;
- let max: any;
- let multiple: any;
- let required: boolean | undefined;
- let selectOptions: [string, string][] | undefined;
- let valueConverter: (v: any) => any | undefined;
- const styles = {} as any;
-
- const assetType = typeof assetDescriptor === "string" ? assetDescriptor : assetDescriptor.name;
- const constraints: ValueConstraint[] = (valueHolder && ((valueHolder as MetaHolder).meta) || (valueDescriptor && (valueDescriptor as MetaHolder).meta) ? Util.getAttributeValueConstraints(valueHolder as Attribute, valueHolderDescriptor as AttributeDescriptor, assetType) : Util.getMetaValueConstraints(valueHolder as NameValueHolder, valueHolderDescriptor as AttributeDescriptor, assetType)) || [];
- const format: ValueFormat | undefined = (valueHolder && ((valueHolder as MetaHolder).meta) || (valueDescriptor && (valueDescriptor as MetaHolder).meta) ? Util.getAttributeValueFormat(valueHolder as Attribute, valueHolderDescriptor as AttributeDescriptor, assetType) : Util.getMetaValueFormat(valueHolder as Attribute, valueHolderDescriptor as AttributeDescriptor, assetType));
-
- // Enforces which value types are supported making SUPPORTED_WELLKNOWN_VALUE_TYPES the single source of truth through type checking
- let _exhaustiveTypeCheck: never
- const valueType = valueDescriptor.name as SupportedWellknownValueTypes;
-
- // Determine input type
- if (!inputType) {
- switch (valueType) {
- case WellknownValueTypes.TEXT:
- case WellknownValueTypes.EMAIL:
- case WellknownValueTypes.UUID:
- case WellknownValueTypes.ASSETID:
- case WellknownValueTypes.HOSTORIPADDRESS:
- case WellknownValueTypes.IPADDRESS:
- inputType = Util.getMetaValue(WellknownMetaItems.MULTILINE, valueHolder, valueHolderDescriptor) === true ? InputType.TEXTAREA : InputType.TEXT;
- break;
- case WellknownValueTypes.BOOLEAN:
- if (format && format.asNumber) {
- inputType = InputType.NUMBER;
- step = 1;
- min = 0;
- max = 1;
- valueConverter = (v) => !!v;
- break;
- }
- if (format && (format.asOnOff || format.asOpenClosed)) {
- inputType = InputType.SWITCH;
- } else {
- inputType = InputType.CHECKBOX;
- }
-
- if (format && format.asMomentary || (Util.getMetaValue(WellknownMetaItems.MOMENTARY, valueHolder, valueHolderDescriptor) === true) ) {
- inputType = InputType.BUTTON_MOMENTARY;
- }
- break;
- case WellknownValueTypes.BIGNUMBER:
- case WellknownValueTypes.NUMBER:
- case WellknownValueTypes.POSITIVEINTEGER:
- case WellknownValueTypes.POSITIVENUMBER:
- case WellknownValueTypes.LONG:
- case WellknownValueTypes.INTEGER:
- case WellknownValueTypes.BYTE:
- case WellknownValueTypes.INTEGERBYTE:
- case WellknownValueTypes.DIRECTION:
- case WellknownValueTypes.TCPIPPORTNUMBER:
- if (valueDescriptor.name === WellknownValueTypes.BYTE || valueDescriptor.name === WellknownValueTypes.INTEGERBYTE) {
- min = 0;
- max = 255;
- step = 1;
- } else if (valueDescriptor.name === WellknownValueTypes.INTEGER || valueDescriptor.name === WellknownValueTypes.LONG) {
- step = 1;
- }
- if (format && format.asDate) {
- inputType = InputType.DATETIME;
- } else if (format && format.asBoolean) {
- inputType = InputType.CHECKBOX;
- valueConverter = (v) => v ? 1 : 0;
- } else if (format && format.asSlider) {
- inputType = InputType.RANGE;
- } else {
- inputType = InputType.NUMBER;
- }
- break;
- case WellknownValueTypes.BIGINTEGER:
- inputType = InputType.BIG_INT;
- step = 1;
- break;
- case WellknownValueTypes.COLOURRGB:
- inputType = InputType.COLOUR;
- break;
- case WellknownValueTypes.DATEANDTIME:
- case WellknownValueTypes.TIMESTAMP:
- case WellknownValueTypes.TIMESTAMPISO8601:
- inputType = InputType.DATETIME;
- break;
- case WellknownValueTypes.CRONEXPRESSION:
- inputType = InputType.CRON;
- break;
- case WellknownValueTypes.TIMEDURATIONISO8601:
- inputType = InputType.DURATION_TIME;
- break;
- case WellknownValueTypes.PERIODDURATIONISO8601:
- inputType = InputType.DURATION_PERIOD;
- break;
- case WellknownValueTypes.TIMEANDPERIODDURATIONISO8601:
- inputType = InputType.DURATION;
- break;
- case WellknownValueTypes.JSONOBJECT:
- inputType = InputType.JSON_OBJECT;
- break;
- default: _exhaustiveTypeCheck = valueType;
- }
-
- if (valueDescriptor.arrayDimensions && valueDescriptor.arrayDimensions > 0) {
- inputType = InputType.JSON;
- }
- }
-
- if (!inputType) {
- switch (valueDescriptor.jsonType) {
- case "number":
- case "bigint":
- inputType = InputType.NUMBER;
- break;
- case "boolean":
- inputType = InputType.CHECKBOX;
- break;
- case "string":
- inputType = InputType.TEXT;
- break;
- case "date":
- inputType = InputType.DATETIME;
- break;
- }
- }
-
- if (!inputType) {
- inputType = InputType.JSON;
- }
-
- // Apply any constraints
- const sizeConstraint = constraints && constraints.find(c => c.type === "size") as ValueConstraintSize;
- const patternConstraint = constraints && constraints.find(c => c.type === "pattern") as ValueConstraintPattern;
- const minConstraint = constraints && constraints.find(c => c.type === "min") as ValueConstraintMin;
- const maxConstraint = constraints && constraints.find(c => c.type === "max") as ValueConstraintMax;
- const allowedValuesConstraint = constraints && constraints.find(c => c.type === "allowedValues") as ValueConstraintAllowedValues;
- const pastConstraint = constraints && constraints.find(c => c.type === "past") as ValueConstraintPast;
- const pastOrPresentConstraint = constraints && constraints.find(c => c.type === "pastOrPresent") as ValueConstraintPastOrPresent;
- const futureConstraint = constraints && constraints.find(c => c.type === "future") as ValueConstraintFuture;
- const futureOrPresentConstraint = constraints && constraints.find(c => c.type === "futureOrPresent") as ValueConstraintFutureOrPresent;
- const notEmptyConstraint = constraints && constraints.find(c => c.type === "notEmpty") as ValueConstraintNotEmpty;
- const notBlankConstraint = constraints && constraints.find(c => c.type === "notBlank") as ValueConstraintNotBlank;
- const notNullConstraint = constraints && constraints.find(c => c.type === "notNull") as ValueConstraintNotNull;
-
- if (sizeConstraint) {
- min = sizeConstraint.min;
- max = sizeConstraint.max;
- }
- if (sizeConstraint) {
- min = sizeConstraint.min;
- max = sizeConstraint.max;
- }
- if (minConstraint) {
- min = minConstraint.min;
- }
- if (maxConstraint) {
- max = maxConstraint.max;
- }
- if (patternConstraint) {
- pattern = patternConstraint.regexp;
- }
- if (notNullConstraint) {
- required = true;
- }
- if (notBlankConstraint && !pattern) {
- pattern = "\\S+";
- } else if (notEmptyConstraint && !pattern) {
- pattern = ".+";
- }
- if (allowedValuesConstraint && allowedValuesConstraint.allowedValues) {
- const allowedLabels = allowedValuesConstraint.allowedValueNames && allowedValuesConstraint.allowedValueNames.length === allowedValuesConstraint.allowedValues.length ? allowedValuesConstraint.allowedValueNames : undefined;
- selectOptions = allowedValuesConstraint.allowedValues.map((v, i) => {
- let label = allowedLabels ? allowedLabels[i] : "" + v;
- label = Util.getAllowedValueLabel(label)!;
- return [v, label || "" + v];
- });
- inputType = InputType.SELECT;
-
- if (valueDescriptor.arrayDimensions && valueDescriptor.arrayDimensions > 0) {
- multiple = true;
- }
- }
-
- if (inputType === InputType.DATETIME) {
- if (pastConstraint || pastOrPresentConstraint) {
- min = undefined;
- max = new Date();
- } else if (futureConstraint || futureOrPresentConstraint) {
- min = new Date();
- max = undefined;
- }
-
- // Refine the input type based on formatting
- if (format) {
- if (format.timeStyle && !format.dateStyle) {
- inputType = InputType.TIME;
- } else if (format.dateStyle && !format.timeStyle) {
- inputType = InputType.DATE;
- }
- }
- }
-
- if (inputType === InputType.NUMBER && format && format.resolution) {
- step = format.resolution;
- }
-
- if (inputType === InputType.COLOUR) {
- styles.marginLeft = "24px"
- }
-
- const supportsHelperText = inputTypeSupportsHelperText(inputType);
- const supportsLabel = inputTypeSupportsLabel(inputType);
- const supportsSendButton = inputTypeSupportsButton(inputType);
- const readonly = options.readonly;
- required = required || options.required;
- const comfortable = options.comfortable;
- const resizeVertical = options.resizeVertical;
- const inputRef: Ref = createRef();
-
- const templateFunction: ValueInputTemplateFunction = (value, focused, loading, sending, error, helperText) => {
-
- const disabled = options.disabled || loading || sending;
- const label = supportsLabel ? options.label : undefined;
-
- return html``
- };
-
- return {
- templateFunction: templateFunction,
- supportsHelperText: supportsHelperText,
- supportsSendButton: supportsSendButton,
- supportsLabel: supportsLabel,
- validator: () => {
- if (!inputRef.value) {
- return false;
- }
- return inputRef.value.checkValidity();
- }
- };
-}
-
// language=CSS
const style = css`
@@ -675,6 +411,9 @@ const style = css`
}
`;
+/**
+ * @deprecated Not actively maintained anymore. We're slowly migrating towards `or-vaadin-input` instead.
+ */
@customElement("or-mwc-input")
export class OrMwcInput extends LitElement {
diff --git a/ui/component/or-mwc-components/test/or-mwc-input.test.ts b/ui/component/or-mwc-components/test/or-mwc-input.test.ts
index 5f40e33594..9fcbbfcf9d 100644
--- a/ui/component/or-mwc-components/test/or-mwc-input.test.ts
+++ b/ui/component/or-mwc-components/test/or-mwc-input.test.ts
@@ -28,7 +28,7 @@ ct("Switch should switch", async ({ mount }) => {
});
const locator = component.getByRole("switch", { name: "switch" });
await expect(locator).not.toBeChecked();
- await component.click();
+ await component.getByText("switch").click();
await expect(locator).toBeChecked();
});
diff --git a/ui/component/or-rules/package.json b/ui/component/or-rules/package.json
index 555f5d76e0..4f7f25d795 100644
--- a/ui/component/or-rules/package.json
+++ b/ui/component/or-rules/package.json
@@ -33,6 +33,7 @@
"@openremote/or-scheduler": "workspace:*",
"@openremote/or-translate": "workspace:*",
"@openremote/or-tree-menu": "workspace:*",
+ "@openremote/or-vaadin-components": "workspace:*",
"@openremote/rest": "workspace:*",
"ace-builds": "^1.41.0",
"iso-639-1": "^3.1.3",
diff --git a/ui/component/or-rules/src/index.ts b/ui/component/or-rules/src/index.ts
index 069df146fc..57510f2d88 100644
--- a/ui/component/or-rules/src/index.ts
+++ b/ui/component/or-rules/src/index.ts
@@ -17,7 +17,7 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see .
*/
-import {css, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
+import {css, html, LitElement, TemplateResult, unsafeCSS} from "lit";
import {customElement, property, query, state} from "lit/decorators.js";
import manager, {
DefaultBoxShadow,
@@ -58,7 +58,7 @@ import "./or-rule-tree";
import "./flow-viewer/flow-viewer";
import {OrRuleViewer} from "./or-rule-viewer";
import {RecurrenceOption} from "./json-viewer/or-rule-then-otherwise";
-import {ValueInputProviderGenerator} from "@openremote/or-mwc-components/or-mwc-input";
+import type {ValueInputProviderGenerator} from "@openremote/or-mwc-components/or-mwc-input";
import {showOkCancelDialog} from "@openremote/or-mwc-components/or-mwc-dialog";
import {showSnackbar} from "@openremote/or-mwc-components/or-mwc-snackbar";
import {OrRuleTree, RuleTreeNode} from "./or-rule-tree";
diff --git a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-alarm.ts b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-alarm.ts
index b265418772..5901e23fe1 100644
--- a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-alarm.ts
+++ b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-alarm.ts
@@ -20,7 +20,6 @@
import {html, LitElement, css} from "lit";
import {customElement, property} from "lit/decorators.js";
import "@openremote/or-mwc-components/or-mwc-input";
-import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import {
RuleActionAlarm,
Alarm,
@@ -28,6 +27,7 @@ import {
} from "@openremote/model";
import { OrRulesJsonRuleChangedEvent } from "../or-rule-json-viewer";
import {i18next} from "@openremote/or-translate";
+import {OrVaadinSelect} from "@openremote/or-vaadin-components/or-vaadin-select";
@customElement("or-rule-form-alarm")
export class OrRuleFormAlarm extends LitElement {
@@ -40,7 +40,10 @@ export class OrRuleFormAlarm extends LitElement {
static get styles() {
return css`
- or-mwc-input {
+ #form-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
margin-bottom: 20px;
min-width: 420px;
width: 100%;
@@ -56,19 +59,24 @@ export class OrRuleFormAlarm extends LitElement {
options.unshift({value: undefined, label: i18next.t("none")})
return html`
-
+
+ this.setActionAlarmName((ev.currentTarget as HTMLInputElement).value, "title")}>
+
+
+ this.setActionAlarmName((ev.currentTarget as HTMLInputElement).value, "content")}>
+
+
+ {
+ const value = (ev.currentTarget as OrVaadinSelect).value;
+ this.action.assigneeId = value;
+ this.setActionAlarmName(value, undefined);
+ }}>
+
+
+
`
}
diff --git a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-email-message.ts b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-email-message.ts
index ea1cd16478..f8c7a00acc 100644
--- a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-email-message.ts
+++ b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-email-message.ts
@@ -1,10 +1,29 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
import {html, LitElement, css} from "lit";
import {customElement, property} from "lit/decorators.js";
import {i18next, translate} from "@openremote/or-translate"
-import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import {EmailNotificationMessage} from "@openremote/model";
import { OrRulesJsonRuleChangedEvent } from "../or-rule-json-viewer";
import "@openremote/or-mwc-components/or-mwc-input";
+import {OrVaadinTextField} from "@openremote/or-vaadin-components/or-vaadin-text-field";
@customElement("or-rule-form-email-message")
export class OrRuleFormEmailMessage extends translate(i18next)(LitElement) {
@@ -14,7 +33,10 @@ export class OrRuleFormEmailMessage extends translate(i18next)(LitElement) {
static get styles() {
return css`
- or-mwc-input {
+ #form-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
margin-bottom: 20px;
min-width: 420px;
width: 100%;
@@ -28,10 +50,16 @@ export class OrRuleFormEmailMessage extends translate(i18next)(LitElement) {
}
return html`
-
+
+ this.setActionNotificationName((ev.currentTarget as HTMLInputElement).value, "subject")}>
+
+
+ this.setActionNotificationName((ev.currentTarget as HTMLInputElement).value, "html")}>
+
+
+
`
}
diff --git a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-localized.ts b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-localized.ts
index 35a43d7761..bcf7b1ca56 100644
--- a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-localized.ts
+++ b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-localized.ts
@@ -1,8 +1,7 @@
import {i18next, translate} from "@openremote/or-translate";
-import {LitElement, PropertyValues, TemplateResult, css, html} from "lit";
+import {LitElement, TemplateResult, css, html} from "lit";
import {customElement, property, state} from "lit/decorators.js";
import {AbstractNotificationMessageUnion, LocalizedNotificationMessage} from "@openremote/model";
-import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
import {showSnackbar} from "@openremote/or-mwc-components/or-mwc-snackbar";
import {OrRulesJsonRuleChangedEvent} from "../or-rule-json-viewer";
import {when} from "lit/directives/when.js";
@@ -12,6 +11,7 @@ import "./or-rule-form-email-message";
import "./or-rule-form-push-notification";
import ISO6391 from "iso-639-1";
import {DefaultColor6} from "@openremote/core";
+import { SelectItem } from "@openremote/or-vaadin-components/or-vaadin-select";
@customElement("or-rule-form-localized")
export class OrRuleFormLocalized extends translate(i18next)(LitElement) {
@@ -39,7 +39,7 @@ export class OrRuleFormLocalized extends translate(i18next)(LitElement) {
static get styles() {
return css`
- or-mwc-input {
+ or-vaadin-select {
margin-bottom: 20px;
min-width: 420px;
width: 100%;
@@ -81,10 +81,9 @@ export class OrRuleFormLocalized extends translate(i18next)(LitElement) {
*/
protected async _getWrongLanguageTemplate(): Promise {
return html`
-
+ this._fixDefaultLanguage()}>
+
+
`;
}
@@ -110,12 +109,12 @@ export class OrRuleFormLocalized extends translate(i18next)(LitElement) {
* Based on {@link languageCodes}, it lists all languages of the ISO6391 specification.
*/
protected async _getLanguageSelectForm(selected: string, languageCodes: string[] = [this._selectedLanguage], divider = true): Promise {
- const languages = languageCodes.map(key => [key, ISO6391.getName(key)]);
+ const languages: SelectItem[] = languageCodes.map(key => ({value: key, label: ISO6391.getName(key)}));
return html`
-
+ this._onLanguageChange(ev)}
+ >
${when(divider, () => html`
`)}
@@ -125,8 +124,11 @@ export class OrRuleFormLocalized extends translate(i18next)(LitElement) {
/**
* HTML callback for when the selected language changes.
*/
- protected _onLanguageChange(ev: OrInputChangedEvent) {
- this._selectedLanguage = ev.detail.value;
+ protected _onLanguageChange(ev: Event) {
+ const elem = ev.currentTarget as HTMLInputElement;
+ if(elem.checkValidity()) {
+ this._selectedLanguage = elem.value;
+ }
}
/**
diff --git a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-push-notification.ts b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-push-notification.ts
index 641a37ecf6..e0b17f6212 100644
--- a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-push-notification.ts
+++ b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-push-notification.ts
@@ -1,5 +1,5 @@
import {html, LitElement, css, TemplateResult} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import {customElement, property, query} from "lit/decorators.js";
import "@openremote/or-mwc-components/or-mwc-input";
import {i18next, translate} from "@openremote/or-translate"
import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
@@ -14,13 +14,28 @@ export class OrRuleFormPushNotification extends translate(i18next)(LitElement) {
@property({type: Object})
public message?: PushNotificationMessage;
+ @query("#push-title")
+ protected _pushTitleElem?: HTMLInputElement;
+
+ @query("#push-body")
+ protected _pushBodyElem?: HTMLInputElement;
+
+ @query("#push-url")
+ protected _pushUrlElem?: HTMLInputElement;
+
+ @query("#push-button1")
+ protected _pushButton1Elem?: HTMLInputElement;
+
+ @query("#push-button2")
+ protected _pushButton2Elem?: HTMLInputElement;
+
static get styles() {
return css`
.input-small {
min-width: auto;
}
- or-mwc-input {
+ or-vaadin-text-field, or-vaadin-text-area {
margin-bottom: 20px;
min-width: 420px;
width: 100%;
@@ -46,28 +61,22 @@ export class OrRuleFormPushNotification extends translate(i18next)(LitElement) {
* Internal function that returns a form for configuring a {@link PushNotificationMessage}.
* {@link onchange} is a callback function can be used to process changes before they are applied.
*/
- protected async _getPushNotificationForm(message: PushNotificationMessage, onchange = async (_ev: OrInputChangedEvent, msg?: PushNotificationMessage) => msg!): Promise {
+ protected async _getPushNotificationForm(message: PushNotificationMessage, onchange = async (ev: Event, msg?: PushNotificationMessage) => msg!): Promise {
return html`
`;
@@ -99,26 +104,32 @@ export class OrRuleFormPushNotification extends translate(i18next)(LitElement) {
/**
* HTML callback function when the subject of a notification message has changed.
*/
- protected _onTitleChange(ev: OrInputChangedEvent, message: PushNotificationMessage) {
- message.title = ev.detail.value;
- this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+ protected _onTitleChange(elem: HTMLInputElement, message: PushNotificationMessage) {
+ if(elem.checkValidity()) {
+ message.title = elem.value;
+ this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+ }
}
/**
* HTML callback function when the body of a notification message has changed.
*/
- protected _onBodyChange(ev: OrInputChangedEvent, message: PushNotificationMessage) {
- message.body = ev.detail.value;
- this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+ protected _onBodyChange(elem: HTMLInputElement, message: PushNotificationMessage) {
+ if(elem.checkValidity()) {
+ message.body = elem.value;
+ this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+ }
}
/**
* HTML callback function when the "click here to open URL" of a notification has changed.
*/
- protected _onActionUrlChange(ev: OrInputChangedEvent, message: PushNotificationMessage) {
- message.action = message.action || {};
- message.action.url = ev.detail.value;
- this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+ protected _onActionUrlChange(elem: HTMLInputElement, message: PushNotificationMessage) {
+ if(elem.checkValidity()) {
+ message.action = message.action || {};
+ message.action.url = elem.value;
+ this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+ }
}
/**
@@ -133,11 +144,13 @@ export class OrRuleFormPushNotification extends translate(i18next)(LitElement) {
/**
* HTML callback function when any button text of the notification has changed.
*/
- protected _onButtonTitleChange(ev: OrInputChangedEvent, key: number, message: PushNotificationMessage) {
- message.buttons = message.buttons || [];
- message.buttons[key] = {
- title: ev.detail.value
- } as PushNotificationButton;
- this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+ protected _onButtonTitleChange(elem: HTMLInputElement, key: number, message: PushNotificationMessage) {
+ if(elem.checkValidity()) {
+ message.buttons = message.buttons || [];
+ message.buttons[key] = {
+ title: elem.value
+ } as PushNotificationButton;
+ this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+ }
}
}
diff --git a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-webhook.ts b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-webhook.ts
index c48e1acc20..eab1790f9e 100644
--- a/ui/component/or-rules/src/json-viewer/forms/or-rule-form-webhook.ts
+++ b/ui/component/or-rules/src/json-viewer/forms/or-rule-form-webhook.ts
@@ -11,6 +11,8 @@ import {css, html, LitElement, TemplateResult} from "lit";
import {customElement, property, state} from "lit/decorators.js";
import {when} from 'lit/directives/when.js';
import {OrRulesJsonRuleChangedEvent} from "../or-rule-json-viewer";
+import {OrVaadinSelect, SelectItem} from "@openremote/or-vaadin-components/or-vaadin-select";
+import {OrVaadinTextField} from "@openremote/or-vaadin-components/or-vaadin-text-field";
//language=css
@@ -57,14 +59,6 @@ export class OrRuleFormWebhook extends LitElement {
// Util
- getAuthMethod(webhook: Webhook): string | undefined {
- if (webhook.oAuthGrant != undefined) {
- return this.authMethodOptions.get(webhook.oAuthGrant.grant_type);
- } else {
- return this.authMethodOptions.get("username_password");
- }
- }
-
getOAuthGrant(authMethodKey: string): OAuthGrant | undefined {
if (authMethodKey == 'client_credentials' || authMethodKey == 'password') {
return {grant_type: authMethodKey} as OAuthGrant;
@@ -95,20 +89,21 @@ export class OrRuleFormWebhook extends LitElement {
`, () => html`