diff --git a/packages/fiori/src/ShellBarSearch.ts b/packages/fiori/src/ShellBarSearch.ts index 743a1e2ab678..db783e1a3e57 100644 --- a/packages/fiori/src/ShellBarSearch.ts +++ b/packages/fiori/src/ShellBarSearch.ts @@ -1,15 +1,18 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; 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 BusyIndicatorSize from "@ui5/webcomponents/dist/types/BusyIndicatorSize.js"; import { SEARCH_FIELD_SEARCH_ICON, SHELLBAR_SEARCH_EXPANDED, SHELLBAR_SEARCH_COLLAPSED, } from "./generated/i18n/i18n-defaults.js"; +import type BusyState from "@ui5/webcomponents/dist/BusyState.js"; /** * @class @@ -38,6 +41,13 @@ class ShellBarSearch extends Search { @property({ type: Boolean }) autoOpen = false; + /** + * Defines the busy state configuration for the search field. + * @public + */ + @slot({ type: HTMLElement, invalidateOnChildChange: true }) + busyState!: Array; + _handleSearchIconPress() { super._handleSearchIconPress(); @@ -98,6 +108,27 @@ class ShellBarSearch extends Search { this.collapsed = true; } } + + /** + * Returns the busy state configuration based on the slotted ui5-busy-state element. + * @private + */ + get busyStateConfig(): { active: boolean; size: `${BusyIndicatorSize}` } { + if (this.busyState.length === 0) { + return { active: false, size: BusyIndicatorSize.M }; + } + + const busyStateElement = this.busyState[0]; + + // If size is Auto, use the component's default (S for collapsed, M for expanded) + const defaultSize = this.collapsed ? BusyIndicatorSize.S : BusyIndicatorSize.M; + const size = busyStateElement.size === "Auto" ? defaultSize : busyStateElement.size; + + return { + active: busyStateElement.active, + size, + }; + } } ShellBarSearch.define(); diff --git a/packages/fiori/src/ShellBarSearchTemplate.tsx b/packages/fiori/src/ShellBarSearchTemplate.tsx index ef5cef85316b..6cc8666395fc 100644 --- a/packages/fiori/src/ShellBarSearchTemplate.tsx +++ b/packages/fiori/src/ShellBarSearchTemplate.tsx @@ -1,3 +1,4 @@ +import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js"; import SearchFieldTemplate from "./SearchFieldTemplate.js"; import type ShellBarSearch from "./ShellBarSearch.js"; import ShellBarSearchPopoverTemplate from "./ShellBarSearchPopoverTemplate.js"; @@ -5,7 +6,15 @@ import ShellBarSearchPopoverTemplate from "./ShellBarSearchPopoverTemplate.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_busy_search_poc.html b/packages/fiori/test/pages/ShellBar_busy_search_poc.html new file mode 100644 index 000000000000..10a76e45bd62 --- /dev/null +++ b/packages/fiori/test/pages/ShellBar_busy_search_poc.html @@ -0,0 +1,161 @@ + + + + + ShellBar - Busy Search POC + + + + + + + + + + +

ShellBar Search with Busy State - POC

+

Pattern: Data provider component pattern with ui5-busy-state

+

Implementation: Abstract ui5-busy-state component provides configuration, BusyIndicator rendered internally

+ +
+

ShellBar with Busy Search (Size: Auto → M)

+

Using size="Auto" lets ShellBarSearch decide the default size (M).

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

Standalone with Size M

+

Explicitly setting size="M".

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

Collapsed with Size S

+

Using size="S" for small busy indicator.

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

With Size L

+

Using size="L" for large busy indicator.

+ +
+ Toggle Busy State +
+ + + + +
+ + + + + diff --git a/packages/main/src/BusyState.ts b/packages/main/src/BusyState.ts new file mode 100644 index 000000000000..ca111ed9dea5 --- /dev/null +++ b/packages/main/src/BusyState.ts @@ -0,0 +1,58 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import type BusyIndicatorSize from "./types/BusyIndicatorSize.js"; + +/** + * @class + * + * ### Overview + * + * The `ui5-busy-state` component is an abstract data provider component that configures + * busy state behavior in other components. It does not render anything itself, but provides + * configuration properties that parent components read to display busy indicators. + * + * ### Usage + * + * This component is meant to be slotted into components that support busy state configuration, + * such as `ui5-shellbar-search`. + * + * ```html + * + * + * + * ``` + * + * ### ES6 Module Import + * + * `import "@ui5/webcomponents/dist/BusyState.js";` + * + * @constructor + * @extends UI5Element + * @public + * @since 2.17.0 + */ +@customElement({ + tag: "ui5-busy-state", +}) +class BusyState extends UI5Element { + /** + * Defines whether the busy state is active. + * @default false + * @public + */ + @property({ type: Boolean }) + active = false; + + /** + * Defines the size of the busy indicator. + * @default "Auto" + * @public + */ + @property() + size: `${BusyIndicatorSize}` = "Auto"; +} + +BusyState.define(); + +export default BusyState; diff --git a/packages/main/src/bundle.esm.ts b/packages/main/src/bundle.esm.ts index 77c873528352..28d961b4c8ca 100644 --- a/packages/main/src/bundle.esm.ts +++ b/packages/main/src/bundle.esm.ts @@ -34,6 +34,7 @@ import AvatarGroup from "./AvatarGroup.js"; import Bar from "./Bar.js"; import Breadcrumbs from "./Breadcrumbs.js"; import BusyIndicator from "./BusyIndicator.js"; +import BusyState from "./BusyState.js"; import Button from "./Button.js"; import ButtonBadge from "./ButtonBadge.js"; import Card from "./Card.js"; diff --git a/packages/main/src/types/BusyIndicatorSize.ts b/packages/main/src/types/BusyIndicatorSize.ts index 31370363434c..f445e7d3ff69 100644 --- a/packages/main/src/types/BusyIndicatorSize.ts +++ b/packages/main/src/types/BusyIndicatorSize.ts @@ -3,6 +3,13 @@ * @public */ enum BusyIndicatorSize { + /** + * automatic size (component decides) + * @public + * @since 2.17.0 + */ + Auto = "Auto", + /** * small size * @public