diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
index f417a6de69..de215f4fc8 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
@@ -16,13 +16,14 @@ import "../../../../../components/buttons/ha-progress-button";
import type { HaProgressButton } from "../../../../../components/buttons/ha-progress-button";
import "../../../../../components/ha-alert";
import "../../../../../components/ha-card";
+import "../../../../../components/ha-generic-picker";
import "../../../../../components/ha-list-item";
+import type { PickerComboBoxItem } from "../../../../../components/ha-picker-combo-box";
import "../../../../../components/ha-select";
import "../../../../../components/ha-selector/ha-selector-boolean";
import "../../../../../components/ha-settings-row";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/ha-textfield";
-import "../../../../../components/ha-combo-box";
import type {
ZWaveJSNodeCapabilities,
ZWaveJSNodeConfigParam,
@@ -329,19 +330,22 @@ class ZWaveJSNodeConfig extends LitElement {
) {
return html`
${labelAndDescription}
-
-
+
`;
}
return html`${labelAndDescription}
@@ -363,7 +367,10 @@ class ZWaveJSNodeConfig extends LitElement {
`;
}
- if (item.configuration_value_type === "enumerated") {
+ if (
+ item.configuration_value_type === "enumerated" &&
+ Object.keys(item.metadata.states).length < 5
+ ) {
return html`
${labelAndDescription}
`;
}
+ if (item.configuration_value_type === "enumerated") {
+ return html`
+ ${labelAndDescription}
+
+
+ `;
+ }
return html`${labelAndDescription}
${item.value}
`;
@@ -429,15 +458,23 @@ class ZWaveJSNodeConfig extends LitElement {
}
private _dropdownSelected(ev) {
+ this._handleEnumeratedPickerValueChanged(ev, ev.target.value);
+ }
+
+ private _pickerValueChanged(ev) {
+ this._handleEnumeratedPickerValueChanged(ev, ev.detail.value);
+ }
+
+ private _handleEnumeratedPickerValueChanged(ev, value: string) {
if (ev.target === undefined || this._config![ev.target.key] === undefined) {
return;
}
- if (this._config![ev.target.key].value?.toString() === ev.target.value) {
+ if (this._config![ev.target.key].value?.toString() === value) {
return;
}
this._setResult(ev.target.key, undefined);
- this._updateConfigParameter(ev.target, Number(ev.target.value));
+ this._updateConfigParameter(ev.target, Number(value));
}
private _numericInputChanged(ev) {
@@ -474,11 +511,36 @@ class ZWaveJSNodeConfig extends LitElement {
this._updateConfigParameter(ev.target, value);
}
- private _getComboBoxOptions = memoizeOne((states: Record) =>
- Object.entries(states).map(([value, label]) => ({
- value,
- label: `${value} - ${label}`,
- }))
+ private _getEnumeratedPickerItems = memoizeOne(
+ (states: Record) => {
+ const items: PickerComboBoxItem[] = Object.entries(states).map(
+ ([value, label]) => ({
+ id: value,
+ primary: label,
+ sorting_label: `${label}_${value}`,
+ })
+ );
+ return () => items;
+ }
+ );
+
+ private _enumeratedPickerValueRenderer = memoizeOne(
+ (states: Record) => (value: string) =>
+ html`${states[value] || value}`
+ );
+
+ private _getManualEntryItems = memoizeOne(
+ (states: Record) => {
+ const items: PickerComboBoxItem[] = Object.entries(states).map(
+ ([value, label]) => ({
+ id: value,
+ primary: `${label}`,
+ secondary: value,
+ sorting_label: `${label}_${value}`,
+ })
+ );
+ return () => items;
+ }
);
private _getComboBoxValueChangedCallback(