Replace search-input-outlined with ha-input-search (#30319)

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -17,7 +17,8 @@ import type {
   NetworkLink,
   NetworkNode,
 } from "../../../../../components/chart/ha-network-graph";
-import "../../../../../components/search-input-outlined";
+import "../../../../../components/input/ha-input-search";
+import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
 import type {
   BluetoothDeviceData,
   BluetoothScannersDetails,
@@ -130,13 +131,7 @@ export class BluetoothNetworkVisualization extends LitElement {
         back-path="/config/bluetooth/dashboard"
       >
         ${this.narrow
-          ? html`<div slot="header">
+          ? html`<div slot="header">${this._renderInputSearch()}</div>`
-              <search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>
-            </div>`
           : nothing}
         <ha-network-graph
           .hass=${this.hass}
@@ -146,19 +141,21 @@ export class BluetoothNetworkVisualization extends LitElement {
           .tooltipFormatter=${this._tooltipFormatter}
           @chart-click=${this._handleChartClick}
         >
-          ${!this.narrow
+          ${!this.narrow ? this._renderInputSearch("search") : nothing}
-            ? html`<search-input-outlined
-                slot="search"
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>`
-            : nothing}
         </ha-network-graph>
       </hass-subpage>
     `;
   }
 
+  private _renderInputSearch(slot = "") {
+    return html`<ha-input-search
+      appearance="outlined"
+      slot=${slot}
+      .value=${this._searchFilter}
+      @input=${this._handleSearchChange}
+    ></ha-input-search>`;
+  }
+
   private _getSearchableAttributes = (nodeId: string): string[] => {
     const attributes: string[] = [];
     const device = this._sourceDevices[nodeId];
@@ -175,8 +172,8 @@ export class BluetoothNetworkVisualization extends LitElement {
     return attributes;
   };
 
-  private _handleSearchChange(ev: CustomEvent): void {
+  private _handleSearchChange(ev: InputEvent): void {
-    this._searchFilter = ev.detail.value;
+    this._searchFilter = (ev.target as HaInputSearch).value ?? "";
   }
 
   private _getRssiColorVar = memoizeOne((rssi: number): string => {
@@ -394,7 +391,7 @@ export class BluetoothNetworkVisualization extends LitElement {
           display: flex;
           align-items: center;
         }
-        search-input-outlined {
+        ha-input-search {
           flex: 1;
         }
       `,

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -10,7 +10,8 @@ import { getDeviceContext } from "../../../../../common/entity/context/get_devic
 import { navigate } from "../../../../../common/navigate";
 import "../../../../../components/chart/ha-network-graph";
 import type { NetworkData } from "../../../../../components/chart/ha-network-graph";
-import "../../../../../components/search-input-outlined";
+import "../../../../../components/input/ha-input-search";
+import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import type { ZHADevice } from "../../../../../data/zha";
 import { fetchDevices, refreshTopology } from "../../../../../data/zha";
@@ -59,13 +60,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
         )}
       >
         ${this.narrow
-          ? html`<div slot="header">
+          ? html`<div slot="header">${this._renderInputSearch()}</div>`
-              <search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>
-            </div>`
           : nothing}
         <ha-network-graph
           .hass=${this.hass}
@@ -75,14 +70,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
           .tooltipFormatter=${this._tooltipFormatter}
           @chart-click=${this._handleChartClick}
         >
-          ${!this.narrow
+          ${!this.narrow ? this._renderInputSearch("search") : nothing}
-            ? html`<search-input-outlined
-                slot="search"
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>`
-            : nothing}
           <ha-icon-button
             slot="button"
             class="refresh-button"
@@ -97,6 +85,15 @@ export class ZHANetworkVisualizationPage extends LitElement {
     `;
   }
 
+  private _renderInputSearch(slot = "") {
+    return html`<ha-input-search
+      appearance="outlined"
+      slot=${slot}
+      .value=${this._searchFilter}
+      @input=${this._handleSearchChange}
+    ></ha-input-search>`;
+  }
+
   private async _fetchData() {
     this._devices = await fetchDevices(this.hass!);
     this._networkData = createZHANetworkChartData(
@@ -130,8 +127,8 @@ export class ZHANetworkVisualizationPage extends LitElement {
     return attributes;
   };
 
-  private _handleSearchChange(ev: CustomEvent): void {
+  private _handleSearchChange(ev: InputEvent): void {
-    this._searchFilter = ev.detail.value;
+    this._searchFilter = (ev.target as HaInputSearch).value ?? "";
   }
 
   private _tooltipFormatter = (params: TopLevelFormatterParams): string => {
@@ -208,7 +205,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
           display: flex;
           align-items: center;
         }
-        search-input-outlined {
+        ha-input-search {
           flex: 1;
         }
       `,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts

@@ -14,7 +14,7 @@ import type {
   NetworkLink,
   NetworkNode,
 } from "../../../../../components/chart/ha-network-graph";
-import "../../../../../components/search-input-outlined";
+import "../../../../../components/input/ha-input-search";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import type {
   ZWaveJSNodeStatisticsUpdatedMessage,
@@ -28,6 +28,7 @@ import {
 import "../../../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
 import type { HomeAssistant, Route } from "../../../../../types";
+import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
 
 @customElement("zwave_js-network-visualization")
 export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
@@ -84,13 +85,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           .configEntryId}"
       >
         ${this.narrow
-          ? html`<div slot="header">
+          ? html`<div slot="header">${this._renderInputSearch()}</div>`
-              <search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>
-            </div>`
           : nothing}
         <ha-network-graph
           .hass=${this.hass}
@@ -103,19 +98,21 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           .tooltipFormatter=${this._tooltipFormatter}
           @chart-click=${this._handleChartClick}
         >
-          ${!this.narrow
+          ${!this.narrow ? this._renderInputSearch("search") : nothing}
-            ? html`<search-input-outlined
-                slot="search"
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>`
-            : nothing}
         </ha-network-graph>
       </hass-subpage>
     `;
   }
 
+  private _renderInputSearch(slot = "") {
+    return html`<ha-input-search
+      appearance="outlined"
+      slot=${slot}
+      .value=${this._searchFilter}
+      @input=${this._handleSearchChange}
+    ></ha-input-search>`;
+  }
+
   private async _fetchNetworkStatus() {
     const network = await fetchZwaveNetworkStatus(this.hass!, {
       entry_id: this.configEntryId,
@@ -149,8 +146,8 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
     return attributes;
   };
 
-  private _handleSearchChange(ev: CustomEvent): void {
+  private _handleSearchChange(ev: InputEvent): void {
-    this._searchFilter = ev.detail.value;
+    this._searchFilter = (ev.target as HaInputSearch).value ?? "";
   }
 
   private _tooltipFormatter = (params: TopLevelFormatterParams): string => {
@@ -382,7 +379,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           display: flex;
           align-items: center;
         }
-        search-input-outlined {
+        ha-input-search {
           flex: 1;
         }
       `,