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(