Replace search-input-outlined with ha-input-search in network visualization pages

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

@@ -17,7 +17,7 @@ import type {
   NetworkLink,
   NetworkNode,
 } from "../../../../../components/chart/ha-network-graph";
-import "../../../../../components/search-input-outlined";
+import "../../../../../components/input/ha-input-search";
 import type {
   BluetoothDeviceData,
   BluetoothScannersDetails,
@@ -131,11 +131,11 @@ export class BluetoothNetworkVisualization extends LitElement {
       >
         ${this.narrow
           ? html`<div slot="header">
-              <search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._searchFilter}
+                @input=${this._handleSearchChange}
+              ></ha-input-search>
             </div>`
           : nothing}
         <ha-network-graph
@@ -147,12 +147,12 @@ export class BluetoothNetworkVisualization extends LitElement {
           @chart-click=${this._handleChartClick}
         >
           ${!this.narrow
-            ? html`<search-input-outlined
+            ? html`<ha-input-search
                 slot="search"
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>`
+                appearance="outlined"
+                .value=${this._searchFilter}
+                @input=${this._handleSearchChange}
+              ></ha-input-search>`
             : nothing}
         </ha-network-graph>
       </hass-subpage>
@@ -175,8 +175,8 @@ export class BluetoothNetworkVisualization extends LitElement {
     return attributes;
   };
 
-  private _handleSearchChange(ev: CustomEvent): void {
-    this._searchFilter = ev.detail.value;
+  private _handleSearchChange(ev: InputEvent): void {
+    this._searchFilter = (ev.target as HTMLInputElement).value ?? "";
   }
 
   private _getRssiColorVar = memoizeOne((rssi: number): string => {
@@ -394,7 +394,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,7 @@ 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 { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import type { ZHADevice } from "../../../../../data/zha";
 import { fetchDevices, refreshTopology } from "../../../../../data/zha";
@@ -60,11 +60,11 @@ export class ZHANetworkVisualizationPage extends LitElement {
       >
         ${this.narrow
           ? html`<div slot="header">
-              <search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._searchFilter}
+                @input=${this._handleSearchChange}
+              ></ha-input-search>
             </div>`
           : nothing}
         <ha-network-graph
@@ -76,12 +76,12 @@ export class ZHANetworkVisualizationPage extends LitElement {
           @chart-click=${this._handleChartClick}
         >
           ${!this.narrow
-            ? html`<search-input-outlined
+            ? html`<ha-input-search
                 slot="search"
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>`
+                appearance="outlined"
+                .value=${this._searchFilter}
+                @input=${this._handleSearchChange}
+              ></ha-input-search>`
             : nothing}
           <ha-icon-button
             slot="button"
@@ -130,8 +130,8 @@ export class ZHANetworkVisualizationPage extends LitElement {
     return attributes;
   };
 
-  private _handleSearchChange(ev: CustomEvent): void {
-    this._searchFilter = ev.detail.value;
+  private _handleSearchChange(ev: InputEvent): void {
+    this._searchFilter = (ev.target as HTMLInputElement).value ?? "";
   }
 
   private _tooltipFormatter = (params: TopLevelFormatterParams): string => {
@@ -208,7 +208,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,
@@ -85,11 +85,11 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
       >
         ${this.narrow
           ? html`<div slot="header">
-              <search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._searchFilter}
+                @input=${this._handleSearchChange}
+              ></ha-input-search>
             </div>`
           : nothing}
         <ha-network-graph
@@ -104,12 +104,12 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           @chart-click=${this._handleChartClick}
         >
           ${!this.narrow
-            ? html`<search-input-outlined
+            ? html`<ha-input-search
                 slot="search"
-                .hass=${this.hass}
-                .filter=${this._searchFilter}
-                @value-changed=${this._handleSearchChange}
-              ></search-input-outlined>`
+                appearance="outlined"
+                .value=${this._searchFilter}
+                @input=${this._handleSearchChange}
+              ></ha-input-search>`
             : nothing}
         </ha-network-graph>
       </hass-subpage>
@@ -149,8 +149,8 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
     return attributes;
   };
 
-  private _handleSearchChange(ev: CustomEvent): void {
-    this._searchFilter = ev.detail.value;
+  private _handleSearchChange(ev: InputEvent): void {
+    this._searchFilter = (ev.target as HTMLInputElement).value ?? "";
   }
 
   private _tooltipFormatter = (params: TopLevelFormatterParams): string => {
@@ -382,7 +382,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           display: flex;
           align-items: center;
         }
-        search-input-outlined {
+        ha-input-search {
           flex: 1;
         }
       `,