diff --git a/packages/fiori/src/ShellBarSearch.ts b/packages/fiori/src/ShellBarSearch.ts index 743a1e2ab678..be47a266ef1d 100644 --- a/packages/fiori/src/ShellBarSearch.ts +++ b/packages/fiori/src/ShellBarSearch.ts @@ -4,6 +4,7 @@ import Search from "./Search.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import ShellBarSearchTemplate from "./ShellBarSearchTemplate.js"; import ShellBarSearchCss from "./generated/themes/ShellBarSearch.css.js"; +import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js"; import { SEARCH_FIELD_SEARCH_ICON, @@ -27,6 +28,9 @@ import { Search.styles, ShellBarSearchCss, ], + dependencies: [ + BusyIndicator, + ], }) class ShellBarSearch extends Search { @@ -38,6 +42,14 @@ class ShellBarSearch extends Search { @property({ type: Boolean }) autoOpen = false; + /** + * Indicates whether the search field is in busy state. + * @default false + * @public + */ + @property({ type: Boolean }) + busy = false; + _handleSearchIconPress() { super._handleSearchIconPress(); diff --git a/packages/fiori/src/ShellBarSearchTemplate.tsx b/packages/fiori/src/ShellBarSearchTemplate.tsx index ef5cef85316b..b376f3396199 100644 --- a/packages/fiori/src/ShellBarSearchTemplate.tsx +++ b/packages/fiori/src/ShellBarSearchTemplate.tsx @@ -1,11 +1,14 @@ import SearchFieldTemplate from "./SearchFieldTemplate.js"; import type ShellBarSearch from "./ShellBarSearch.js"; import ShellBarSearchPopoverTemplate from "./ShellBarSearchPopoverTemplate.js"; +import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js"; export default function ShellBarSearchTemplate(this: ShellBarSearch) { return ( <> - { SearchFieldTemplate.call(this) } + + { SearchFieldTemplate.call(this) } + { ShellBarSearchPopoverTemplate.call(this) } ); diff --git a/packages/fiori/test/pages/ShellBar_with_busy_search.html b/packages/fiori/test/pages/ShellBar_with_busy_search.html new file mode 100644 index 000000000000..2ef73635d4ee --- /dev/null +++ b/packages/fiori/test/pages/ShellBar_with_busy_search.html @@ -0,0 +1,93 @@ + + + + + ShellBar - Busy Search Demo + + + + + + + + + + +
+

ShellBar with Busy Search - POC

+

This demo shows ShellBarSearch with internal BusyIndicator wrapping using the busy property.

+ +
+ Toggle Busy State +
+ + + + + + + + +
+ +
+

Standalone ShellBarSearch with Busy

+

ShellBarSearch outside of ShellBar for easier testing.

+ +
+ Toggle Busy State +
+ + + +
+ + + + +