@salesforce/ui-bundle-template-feature-angular-search 0.0.0-stage → 12.14.0

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/api/search-response.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import { getAdapter } from "../adapters/registry";
+import type { RunSearchOutcome, SourceRequest, SourceResult } from "../types/search-result.types";
+
+/** Minimal shape of a GraphQL error we can attribute to a source by path. */
+export interface GraphQLErrorLike {
+	message?: string | null;
+	path?: Array<string | number> | null;
+}
+
+const GENERIC_SOURCE_ERROR = "Search failed for this source.";
+
+/**
+ * Attributes GraphQL errors to a source by matching the error `path` against
+ * the adapter's location for that source. When no path matches, returns a
+ * generic per-source message rather than echoing unrelated sources' errors.
+ */
+function attributeError(request: SourceRequest, errors: GraphQLErrorLike[]): string {
+	const prefix = getAdapter(request.source.kind).errorPath(request);
+
+	const matched = errors.filter((e) => {
+		const path = e.path;
+		if (!path || path.length < prefix.length) return false;
+		return prefix.every((segment, i) => path[i] === segment);
+	});
+
+	if (matched.length === 0) return GENERIC_SOURCE_ERROR;
+
+	const message = matched
+		.map((e) => e.message)
+		.filter((m): m is string => !!m)
+		.join("; ");
+	return message || GENERIC_SOURCE_ERROR;
+}
+
+/**
+ * Parses each source's subtree via its adapter. A source whose subtree is
+ * absent gets an attributed error when the response reported GraphQL errors,
+ * and is otherwise left out of both maps (an empty result, not a failure).
+ * Never throws for partial failures.
+ */
+export function parseSearchResponse(
+	requests: SourceRequest[],
+	root: Record<string, unknown>,
+	gqlErrors: GraphQLErrorLike[],
+): RunSearchOutcome {
+	const results: Record<string, SourceResult> = {};
+	const errors: Record<string, string> = {};
+
+	for (const request of requests) {
+		const key = request.source.key;
+		let parsed: SourceResult | null = null;
+		try {
+			parsed = getAdapter(request.source.kind).parseResponse(root, request);
+		} catch {
+			// An adapter that throws parsing its own subtree is a per-source failure.
+			parsed = null;
+		}
+
+		if (parsed != null) {
+			results[key] = parsed;
+		} else if (gqlErrors.length > 0) {
+			errors[key] = attributeError(request, gqlErrors);
+		}
+	}
+
+	return { results, errors };
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/api/search.service.spec.ts

@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import { TestBed } from "@angular/core/testing";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { DataClient } from "../../../api/data-client.service";
+import { SearchService } from "./search.service";
+import type { SObjectSourceConfig } from "../types/search-config.types";
+import type { SourceRequest } from "../types/search-result.types";
+
+const accounts: SObjectSourceConfig = {
+	kind: "sobject",
+	key: "accounts",
+	label: "Accounts",
+	objectName: "Account",
+	displayFields: ["Name"],
+	searchableFields: ["Name"],
+};
+
+const request: SourceRequest = {
+	source: accounts,
+	q: "acme",
+	filters: [],
+	sort: null,
+	pageSize: 10,
+	afterCursor: undefined,
+};
+
+describe("SearchService", () => {
+	let service: SearchService;
+	let execute: ReturnType<typeof vi.fn>;
+
+	beforeEach(() => {
+		execute = vi.fn();
+		TestBed.configureTestingModule({
+			providers: [{ provide: DataClient, useValue: { execute } }],
+		});
+		service = TestBed.inject(SearchService);
+	});
+
+	describe("runSearch", () => {
+		it("executes the combined document and parses the response", async () => {
+			execute.mockResolvedValue({
+				uiapi: {
+					query: {
+						accounts: {
+							edges: [{ node: { Id: "001" } }],
+							pageInfo: {
+								hasNextPage: true,
+								hasPreviousPage: false,
+								startCursor: "s",
+								endCursor: "e",
+							},
+							totalCount: 12,
+						},
+					},
+				},
+			});
+
+			const outcome = await service.runSearch([request]);
+
+			const [document, variables] = execute.mock.calls[0];
+			expect(document).toContain("accounts: Account(");
+			expect(variables).toMatchObject({ accounts_first: 10 });
+			expect(outcome.results["accounts"].nodes).toEqual([{ Id: "001" }]);
+			expect(outcome.results["accounts"].pageInfo?.endCursor).toBe("e");
+			expect(outcome.results["accounts"].totalCount).toBe(12);
+		});
+
+		it("rejects on a whole-request failure", async () => {
+			execute.mockRejectedValue(new Error("Network timeout"));
+
+			await expect(service.runSearch([request])).rejects.toThrow("Network timeout");
+		});
+	});
+
+	describe("fetchDistinctValues", () => {
+		it("extracts distinct values and prefers label over displayValue", async () => {
+			execute.mockResolvedValue({
+				uiapi: {
+					aggregate: {
+						Account: {
+							edges: [
+								{ node: { aggregate: { Industry: { value: "Tech", label: "Technology" } } } },
+								{ node: { aggregate: { Industry: { value: "Bank", displayValue: "Banking" } } } },
+								{ node: { aggregate: { Industry: { value: "Raw" } } } },
+								{ node: { aggregate: { Industry: { value: "" } } } },
+								{ node: { aggregate: { Industry: { value: null } } } },
+							],
+						},
+					},
+				},
+			});
+
+			const options = await service.fetchDistinctValues("Account", "Industry");
+
+			expect(execute.mock.calls[0][0]).toContain("Account(groupBy: { Industry: { group: true } })");
+			expect(options).toEqual([
+				{ value: "Tech", label: "Technology" },
+				{ value: "Bank", label: "Banking" },
+				{ value: "Raw", label: "Raw" },
+			]);
+		});
+
+		it("returns an empty list when the aggregate is missing", async () => {
+			execute.mockResolvedValue({ uiapi: {} });
+
+			expect(await service.fetchDistinctValues("Account", "Industry")).toEqual([]);
+		});
+
+		it("rejects invalid identifiers without calling the client", async () => {
+			await expect(service.fetchDistinctValues("Account", "bad field")).rejects.toThrow(
+				/Invalid fieldName/,
+			);
+			await expect(service.fetchDistinctValues("Bad-Object", "Industry")).rejects.toThrow(
+				/Invalid objectName/,
+			);
+			expect(execute).not.toHaveBeenCalled();
+		});
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/api/search.service.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import { Injectable, inject } from "@angular/core";
+import { DataClient } from "../../../api/data-client.service";
+import { buildSearchQuery } from "../query/build-search-query";
+import type { PicklistOption } from "../types/filter.types";
+import type { RunSearchOutcome, SourceRequest } from "../types/search-result.types";
+import { assertValidIdentifier } from "../utils/identifier";
+import { parseSearchResponse } from "./search-response";
+
+/**
+ * Executes multi-source search and distinct-value queries through the base
+ * `DataClient`.
+ */
+@Injectable({ providedIn: "root" })
+export class SearchService {
+	private readonly dataClient = inject(DataClient);
+
+	/**
+	 * Runs one combined multi-source GraphQL request and parses each source via
+	 * its adapter. Rejects on a whole-request failure.
+	 */
+	async runSearch(requests: SourceRequest[]): Promise<RunSearchOutcome> {
+		const { document, variables } = buildSearchQuery(requests);
+		const root = await this.dataClient.execute<Record<string, unknown>>(document, variables);
+		return parseSearchResponse(requests, root, []);
+	}
+
+	/**
+	 * Fetches the distinct values of a picklist field through the uiapi aggregate
+	 * `groupBy` query.
+	 */
+	async fetchDistinctValues(objectName: string, fieldName: string): Promise<PicklistOption[]> {
+		assertValidIdentifier(objectName, "objectName");
+		assertValidIdentifier(fieldName, "fieldName");
+
+		const document = `query DistinctValues {
+		uiapi {
+			aggregate {
+				${objectName}(groupBy: { ${fieldName}: { group: true } }) {
+					edges {
+						node {
+							aggregate @optional {
+								${fieldName} @optional {
+									value
+									displayValue
+									label
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}`;
+
+		const root = await this.dataClient.execute<Record<string, unknown>>(document);
+
+		const aggregate = (root["uiapi"] as Record<string, unknown> | undefined)?.["aggregate"] as
+			Record<string, unknown> | undefined;
+		const objectAgg = aggregate?.[objectName] as
+			{ edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> } | undefined;
+		const edges = objectAgg?.edges ?? [];
+
+		return edges
+			.map((edge) => {
+				const field = edge?.node?.aggregate?.[fieldName] as
+					| { value?: string | null; displayValue?: string | null; label?: string | null }
+					| undefined;
+				const value = field?.value;
+				if (value == null || value === "") return null;
+				return { value, label: field?.label ?? field?.displayValue ?? value };
+			})
+			.filter((opt): opt is PicklistOption => opt !== null);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/active-filters/active-filters.html

@@ -0,0 +1,23 @@
+@if (chips().length > 0) {
+<div class="flex flex-wrap gap-2" role="group" aria-label="Active filters">
+	@for (chip of chips(); track chip.field) {
+	<app-button
+		appearance="outlined"
+		size="sm"
+		iconEnd="close"
+		[ariaLabel]="'Remove filter ' + chip.label"
+		(clicked)="removeFilter.emit(chip.field)"
+	>
+		{{ chip.label }}
+	</app-button>
+	}
+	<app-button
+		appearance="destructive"
+		size="sm"
+		ariaLabel="Clear all filters"
+		(clicked)="clearAll.emit()"
+	>
+		Clear all
+	</app-button>
+</div>
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/active-filters/active-filters.spec.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { ButtonComponent } from "../../../../components/ui/button/button";
+import type { ActiveFilterValue, FilterFieldConfig } from "../../types/filter.types";
+import { ActiveFiltersComponent, formatFilterLabel } from "./active-filters";
+
+describe("formatFilterLabel", () => {
+	const f = (o: Partial<ActiveFilterValue>): ActiveFilterValue => ({
+		field: "X",
+		label: "X",
+		type: "text",
+		...o,
+	});
+
+	it("formats each filter type", () => {
+		expect(formatFilterLabel(f({ value: "a" }))).toBe("X: a");
+		expect(formatFilterLabel(f({ type: "boolean", value: "true" }))).toBe("X: Yes");
+		expect(formatFilterLabel(f({ type: "numeric", min: "1", max: "5" }))).toBe("X: 1 - 5");
+		expect(formatFilterLabel(f({ type: "numeric", min: "1" }))).toBe("X: >= 1");
+		expect(formatFilterLabel(f({ type: "numeric", max: "5" }))).toBe("X: <= 5");
+		expect(formatFilterLabel(f({ type: "daterange", min: "a", max: "b" }))).toBe("X: a to b");
+		expect(formatFilterLabel(f({ type: "date", min: "a" }))).toBe("X: from a");
+		expect(formatFilterLabel(f({ type: "date", max: "b" }))).toBe("X: until b");
+		expect(formatFilterLabel(f({ type: "multipicklist", value: "a,b,c" }))).toBe("X: 3 selected");
+	});
+
+	it("resolves picklist values to option labels", () => {
+		const cfg: FilterFieldConfig = {
+			field: "X",
+			label: "Industry",
+			type: "picklist",
+			options: [{ value: "tech", label: "Technology" }],
+		};
+		expect(formatFilterLabel(f({ type: "picklist", value: "tech" }), cfg)).toBe(
+			"Industry: Technology",
+		);
+	});
+});
+
+describe("ActiveFiltersComponent", () => {
+	function setup(filters: ActiveFilterValue[]) {
+		const fixture = TestBed.createComponent(ActiveFiltersComponent);
+		fixture.componentRef.setInput("filters", filters);
+		const removed: string[] = [];
+		let cleared = 0;
+		fixture.componentInstance.removeFilter.subscribe((v) => removed.push(v));
+		fixture.componentInstance.clearAll.subscribe(() => cleared++);
+		fixture.detectChanges();
+		const buttons = () => fixture.debugElement.queryAll(By.directive(ButtonComponent));
+		return { fixture, buttons, removed, cleared: () => cleared };
+	}
+
+	it("renders nothing without filters", () => {
+		expect(setup([]).buttons()).toHaveLength(0);
+	});
+
+	it("emits removeFilter with the field and clearAll", () => {
+		const { buttons, removed, cleared } = setup([
+			{ field: "Name", label: "Name", type: "text", value: "a" },
+		]);
+		const all = buttons();
+		expect(all).toHaveLength(2);
+		all[0].componentInstance.clicked.emit(new MouseEvent("click"));
+		all[1].componentInstance.clicked.emit(new MouseEvent("click"));
+		expect(removed).toEqual(["Name"]);
+		expect(cleared()).toBe(1);
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/active-filters/active-filters.ts

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { ButtonComponent } from "../../../../components/ui/button/button";
+import type { ActiveFilterValue, FilterFieldConfig } from "../../types/filter.types";
+
+/** Maps a picklist value to its configured option label, falling back to the raw value. */
+function optionLabel(config: FilterFieldConfig | undefined, value: string): string {
+	return config?.options?.find((o) => o.value === value)?.label ?? value;
+}
+
+/**
+ * Formats the display label for one active filter chip. Mirrors the React
+ * `formatFilterLabel`, resolving picklist values to option labels via `config`.
+ */
+export function formatFilterLabel(filter: ActiveFilterValue, config?: FilterFieldConfig): string {
+	const { type, value, min, max } = filter;
+	const label = config?.label ?? filter.label;
+	switch (type) {
+		case "text":
+			return `${label}: ${value}`;
+		case "picklist":
+			return `${label}: ${optionLabel(config, value ?? "")}`;
+		case "multipicklist": {
+			const values = value ? value.split(",") : [];
+			if (values.length <= 2) {
+				return `${label}: ${values.map((v) => optionLabel(config, v)).join(", ")}`;
+			}
+			return `${label}: ${values.length} selected`;
+		}
+		case "boolean":
+			return `${label}: ${value === "true" ? "Yes" : "No"}`;
+		case "numeric": {
+			if (min && max) return `${label}: ${min} - ${max}`;
+			if (min) return `${label}: >= ${min}`;
+			return `${label}: <= ${max}`;
+		}
+		case "date":
+		case "datetime":
+		case "daterange":
+		case "datetimerange": {
+			if (min && max) return `${label}: ${min} to ${max}`;
+			if (min) return `${label}: from ${min}`;
+			return `${label}: until ${max}`;
+		}
+		default:
+			return label;
+	}
+}
+
+/**
+ * State-agnostic removable-chip strip for the active filters. Clicking a chip
+ * emits `removeFilter` with its field; `Clear all` emits `clearAll`.
+ */
+@Component({
+	selector: "app-active-filters",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent],
+	templateUrl: "./active-filters.html",
+})
+export class ActiveFiltersComponent {
+	readonly filters = input.required<ActiveFilterValue[]>();
+	readonly configs = input<FilterFieldConfig[]>([]);
+	readonly removeFilter = output<string>();
+	readonly clearAll = output<void>();
+
+	protected readonly chips = computed(() => {
+		const byField = new Map(this.configs().map((c) => [c.field, c]));
+		return this.filters().map((f) => ({
+			field: f.field,
+			label: formatFilterLabel(f, byField.get(f.field)),
+		}));
+	});
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/filter-panel/default-filter-panel.html

@@ -0,0 +1,49 @@
+@for (field of fields(); track field.config.field) { @switch (field.kind) { @case ('text') {
+<app-text-filter
+	[label]="field.config.label"
+	[placeholder]="field.config.placeholder"
+	[helpText]="field.config.helpText"
+	[value]="valueOf(field.config.field)"
+	(valueChange)="onChange(field.config, $event)"
+/>
+} @case ('picklist') {
+<app-select-filter
+	[label]="field.config.label"
+	[options]="field.options"
+	[helpText]="field.config.helpText"
+	[value]="valueOf(field.config.field)"
+	(valueChange)="onChange(field.config, $event)"
+/>
+} @case ('multipicklist') {
+<app-multi-select-filter
+	[label]="field.config.label"
+	[options]="field.options"
+	[helpText]="field.config.helpText"
+	[value]="valueOf(field.config.field)"
+	(valueChange)="onChange(field.config, $event)"
+/>
+} @case ('numeric') {
+<app-numeric-range-filter
+	[label]="field.config.label"
+	[min]="field.config.min"
+	[max]="field.config.max"
+	[helpText]="field.config.helpText"
+	[value]="valueOf(field.config.field)"
+	(valueChange)="onChange(field.config, $event)"
+/>
+} @case ('boolean') {
+<app-boolean-filter
+	[label]="field.config.label"
+	[helpText]="field.config.helpText"
+	[value]="valueOf(field.config.field)"
+	(valueChange)="onChange(field.config, $event)"
+/>
+} @case ('date') {
+<app-date-range-filter
+	[label]="field.config.label"
+	[mode]="field.config.dateMode ?? 'comparison'"
+	[helpText]="field.config.helpText"
+	[value]="valueOf(field.config.field)"
+	(valueChange)="onChange(field.config, $event)"
+/>
+} } }

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/filter-panel/default-filter-panel.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+import { BooleanFilterComponent } from "../../filters/boolean-filter";
+import { DateRangeFilterComponent } from "../../filters/date-range-filter";
+import type { FilterValue } from "../../filters/filter-types";
+import { MultiSelectFilterComponent } from "../../filters/multi-select-filter";
+import { NumericRangeFilterComponent } from "../../filters/numeric-range-filter";
+import { SelectFilterComponent } from "../../filters/select-filter";
+import { TextFilterComponent } from "../../filters/text-filter";
+import { SearchStateService } from "../../state/search-state.service";
+import type { FilterFieldConfig, FilterFieldType, PicklistOption } from "../../types/filter.types";
+import type { SourceConfig } from "../../types/search-config.types";
+
+type FilterKind = "text" | "picklist" | "multipicklist" | "numeric" | "boolean" | "date";
+
+interface FilterField {
+	config: FilterFieldConfig;
+	kind: FilterKind;
+	options: readonly PicklistOption[];
+}
+
+/** The date-family types share one input; its chrome follows `dateMode`. */
+function filterKind(type: FilterFieldType): FilterKind {
+	switch (type) {
+		case "date":
+		case "daterange":
+		case "datetime":
+		case "datetimerange":
+			return "date";
+		default:
+			return type;
+	}
+}
+
+/**
+ * One input per `source.filterBy` entry, picked by `FilterFieldType`:
+ *
+ * - text -> text; picklist / multipicklist -> select / multi-select (inline
+ *   `options`, else the distinct values fetched from the org)
+ * - numeric -> numeric range; boolean -> yes/no
+ * - date / daterange / datetime / datetimerange -> date filter whose
+ *   Between / After / Before chrome follows `dateMode`
+ *
+ * Reads and writes through the surrounding {@link SearchStateService}.
+ */
+@Component({
+	selector: "app-default-filter-panel",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		TextFilterComponent,
+		SelectFilterComponent,
+		MultiSelectFilterComponent,
+		NumericRangeFilterComponent,
+		BooleanFilterComponent,
+		DateRangeFilterComponent,
+	],
+	host: { class: "contents" },
+	templateUrl: "./default-filter-panel.html",
+})
+export class DefaultFilterPanelComponent {
+	private readonly state = inject(SearchStateService);
+
+	readonly source = input.required<SourceConfig>();
+
+	protected readonly fields = computed<FilterField[]>(() => {
+		const source = this.source();
+		return (source.filterBy ?? []).map((config) => {
+			const needsOptions = config.type === "picklist" || config.type === "multipicklist";
+			const options =
+				config.options ??
+				(needsOptions ? this.state.distinctOptions(source.objectName, config.field)() : []);
+			return { config, kind: filterKind(config.type), options };
+		});
+	});
+
+	protected valueOf(field: string): FilterValue | undefined {
+		return this.state.filterValue(this.source().key, field);
+	}
+
+	protected onChange(config: FilterFieldConfig, value: FilterValue | undefined): void {
+		this.state.setFilterValue(this.source().key, config, value);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/filter-panel/filter-box.html

@@ -0,0 +1,13 @@
+@if (hasFields()) {
+<section class="rounded-md border p-3 space-y-3" [attr.aria-labelledby]="headingId">
+	<div class="flex items-center justify-between">
+		<h2 class="text-sm font-semibold" [id]="headingId">Filters</h2>
+		@if (hasActive()) {
+		<app-button appearance="text" size="sm" (clicked)="reset()"> Reset </app-button>
+		}
+	</div>
+	<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+		<app-default-filter-panel [source]="source()" />
+	</div>
+</section>
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/filter-panel/filter-box.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+import { ButtonComponent } from "../../../../components/ui/button/button";
+import { SearchStateService } from "../../state/search-state.service";
+import type { SourceConfig } from "../../types/search-config.types";
+import { DefaultFilterPanelComponent } from "./default-filter-panel";
+
+let nextId = 0;
+
+/**
+ * Bordered "Filters" box for one source: heading, a reset button that clears
+ * only that source's filters (React's `FilterResetButton`), and the default
+ * filter inputs. Renders nothing when the source declares no `filterBy`.
+ */
+@Component({
+	selector: "app-filter-box",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent, DefaultFilterPanelComponent],
+	templateUrl: "./filter-box.html",
+})
+export class FilterBoxComponent {
+	private readonly state = inject(SearchStateService);
+
+	readonly source = input.required<SourceConfig>();
+
+	protected readonly headingId = `search-filters-${nextId++}`;
+	protected readonly hasFields = computed(() => (this.source().filterBy?.length ?? 0) > 0);
+	protected readonly hasActive = computed(
+		() => (this.state.sources()[this.source().key]?.filters.length ?? 0) > 0,
+	);
+
+	protected reset(): void {
+		this.state.clearFilters(this.source().key);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/global-search-box/global-search-box.html

@@ -0,0 +1,16 @@
+<form role="search" (submit)="submit($event)">
+	<div class="flex gap-2">
+		<app-input
+			class="flex-1"
+			type="search"
+			icon="search"
+			[ariaLabel]="label()"
+			[ariaDescribedby]="hintId"
+			[placeholder]="placeholder()"
+			[value]="text()"
+			(valueChange)="text.set($event)"
+		/>
+		<app-button type="submit" [disabled]="!canSearch()">{{ submitLabel() }}</app-button>
+	</div>
+	<p [id]="hintId" class="sr-only">{{ hint() }}</p>
+</form>