@salesforce/ui-bundle-template-feature-angular-object-search 12.5.4

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/date-range-picker/date-range-picker.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+} from '@angular/core';
+import { NgClass } from '@angular/common';
+import { HlmDatePickerImports } from '@spartan-ng/styles/date-picker';
+import type { AppFieldSize } from '../field-size';
+
+export interface DateRange<D> {
+	start: D | null;
+	end: D | null;
+}
+
+@Component({
+	selector: 'app-date-range-picker',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmDatePickerImports, NgClass],
+	host: { class: 'block min-w-0' },
+	templateUrl: './date-range-picker.html',
+})
+export class DateRangePickerComponent {
+	readonly value = model<DateRange<Date> | null>(null);
+	readonly label = input<string>('');
+	readonly startPlaceholder = input<string>('Start');
+	readonly endPlaceholder = input<string>('End');
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly readonly = input(false, { transform: booleanAttribute });
+	readonly size = input<AppFieldSize>('default');
+	readonly min = input<Date | null>(null);
+	readonly max = input<Date | null>(null);
+
+	private static _uid = 0;
+	protected readonly labelId = `app-date-range-picker-${DateRangePickerComponent._uid++}`;
+
+	protected readonly wrapperClasses = computed(() => {
+		const cls: string[] = [];
+		const s = this.size();
+		if (s === 'sm')
+			cls.push('[&_[data-slot=input-group]]:h-6', '[&_[data-slot=input-group]]:text-xs');
+		if (s === 'lg')
+			cls.push('[&_[data-slot=input-group]]:h-10', '[&_[data-slot=input-group]]:text-lg');
+		return cls;
+	});
+
+	protected dateRange(): [Date, Date] | undefined {
+		const v = this.value();
+		if (v?.start && v?.end) return [v.start, v.end];
+		return undefined;
+	}
+
+	protected onRangeChange(range: [Date | null, Date | null] | null): void {
+		if (!range) {
+			this.value.set(null);
+			return;
+		}
+		this.value.set({ start: range[0], end: range[1] });
+	}
+}
+
+export const DateRangePickerImports = [DateRangePickerComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/dialog/dialog.html

@@ -0,0 +1,20 @@
+<hlm-dialog
+	[state]="open() ? 'open' : 'closed'"
+	[disableClose]="!closeOnBackdrop()"
+	[aria-label]="ariaLabel()"
+	[aria-labelledby]="ariaLabelledby()"
+	(stateChanged)="onStateChanged($event)"
+>
+	<button hlmDialogTrigger type="button" class="hidden" aria-label="Open dialog"></button>
+	<hlm-dialog-content *hlmDialogPortal>
+		<div hlmDialogHeader>
+			<ng-content select="[header]" />
+		</div>
+		<div class="text-sm">
+			<ng-content />
+		</div>
+		<div hlmDialogFooter>
+			<ng-content select="[footer]" />
+		</div>
+	</hlm-dialog-content>
+</hlm-dialog>

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/dialog/dialog.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
+import { HlmDialogImports } from '@spartan-ng/styles/dialog';
+
+@Component({
+	selector: 'app-dialog',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmDialogImports],
+	templateUrl: './dialog.html',
+})
+export class DialogComponent {
+	readonly open = model<boolean>(false);
+	readonly closeOnBackdrop = input<boolean>(true);
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+	readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });
+	readonly closed = output<void>();
+
+	show(): void {
+		this.open.set(true);
+	}
+
+	close(): void {
+		if (this.open()) {
+			this.open.set(false);
+			this.closed.emit();
+		}
+	}
+
+	protected onStateChanged(state: 'open' | 'closed'): void {
+		if (state === 'closed' && this.open()) {
+			this.close();
+		}
+	}
+}
+
+export const DialogImports = [DialogComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/dropdown-menu/dropdown-menu.html

@@ -0,0 +1,20 @@
+<button
+	[hlmDropdownMenuTrigger]="menuTpl"
+	[align]="align()"
+	[side]="side()"
+	type="button"
+	[class]="triggerClass()"
+	[attr.aria-label]="ariaLabel()"
+>
+	<ng-content select="[trigger]" />
+</button>
+<ng-template #menuTpl>
+	<div
+		hlmDropdownMenu
+		appDropdownMenuInjector
+		#menuInjector="appDropdownMenuInjector"
+		[sideOffset]="sideOffset()"
+	>
+		<ng-container *ngTemplateOutlet="content().templateRef; injector: menuInjector.injector" />
+	</div>
+</ng-template>

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/dropdown-menu/dropdown-menu.ts

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { CdkMenuItem } from '@angular/cdk/menu';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	Directive,
+	inject,
+	Injector,
+	input,
+	TemplateRef,
+	contentChild,
+} from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
+import type { MenuAlign, MenuSide } from '@spartan-ng/brain/core';
+import {
+	HlmDropdownMenu,
+	HlmDropdownMenuItem,
+	HlmDropdownMenuLabel,
+	HlmDropdownMenuSeparator,
+	HlmDropdownMenuTrigger,
+} from '@spartan-ng/styles/dropdown-menu';
+
+// `appDropdownMenuItem` must be a directive (not a component) so it can be applied
+// directly to the feature's own `<a>`/`<button>`, preserving native ENTER→click for
+// `routerLink` and keyboard nav.
+// Marker for the projected menu body. Consumers declare their items inside
+// `<ng-template appDropdownMenuContent>` so the template can be rendered *inside*
+// the `hlmDropdownMenu` (CdkMenu) with that element's injector — otherwise the
+// items resolve DI at their declaration site and can't find `cdk-menu-stack`.
+@Directive({ selector: '[appDropdownMenuContent]' })
+export class DropdownMenuContentDirective {
+	readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+// Captures the node injector of the `hlmDropdownMenu` element (which carries the
+// `cdk-menu-stack` provider) so the projected content can inherit it.
+@Directive({ selector: '[appDropdownMenuInjector]', exportAs: 'appDropdownMenuInjector' })
+export class DropdownMenuInjectorDirective {
+	readonly injector = inject(Injector);
+}
+
+@Component({
+	selector: 'app-dropdown-menu',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		HlmDropdownMenuTrigger,
+		HlmDropdownMenu,
+		NgTemplateOutlet,
+		DropdownMenuInjectorDirective,
+	],
+	templateUrl: './dropdown-menu.html',
+})
+export class DropdownMenuComponent {
+	readonly align = input<MenuAlign>('start');
+	readonly side = input<MenuSide>('bottom');
+	readonly sideOffset = input<number>(1);
+	readonly triggerClass = input<string>('');
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+
+	protected readonly content = contentChild.required(DropdownMenuContentDirective);
+}
+
+@Directive({
+	selector: 'a[appDropdownMenuItem], button[appDropdownMenuItem]',
+	hostDirectives: [{ directive: HlmDropdownMenuItem, inputs: ['disabled', 'variant', 'inset'] }],
+})
+export class DropdownMenuItemDirective {
+	// outputFromObservable workaround: a parent hostDirective can't re-export a host
+	// directive's output directly (raises NG2017), so bridge it via CdkMenuItem's observable.
+	readonly triggered = outputFromObservable(inject(CdkMenuItem).triggered);
+}
+
+@Component({
+	selector: 'app-dropdown-menu-label',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: HlmDropdownMenuLabel, inputs: ['inset'] }],
+	template: '<ng-content />',
+})
+export class DropdownMenuLabelComponent {}
+
+@Component({
+	selector: 'app-dropdown-menu-separator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmDropdownMenuSeparator],
+	template: '',
+})
+export class DropdownMenuSeparatorComponent {}
+
+export const DropdownMenuImports = [
+	DropdownMenuComponent,
+	DropdownMenuContentDirective,
+	DropdownMenuItemDirective,
+	DropdownMenuLabelComponent,
+	DropdownMenuSeparatorComponent,
+] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/field/field.html

@@ -0,0 +1,15 @@
+@if (label()) {
+	<label hlmFieldLabel [for]="htmlFor() ?? undefined">
+		{{ label() }}
+		@if (required()) {
+			<span aria-hidden="true" class="text-destructive">*</span>
+		}
+	</label>
+}
+@if (description()) {
+	<p hlmFieldDescription>{{ description() }}</p>
+}
+<ng-content />
+@if (error()) {
+	<hlm-field-error [forceShow]="true">{{ error() }}</hlm-field-error>
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/field/field.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmField, HlmFieldImports } from '@spartan-ng/styles/field';
+
+@Component({
+	selector: 'app-field',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmFieldImports],
+	hostDirectives: [HlmField],
+	host: {
+		'data-slot': 'field',
+		'[attr.data-invalid]': 'error() ? true : null',
+	},
+	templateUrl: './field.html',
+})
+export class FieldComponent {
+	readonly label = input<string>('');
+	readonly description = input<string>('');
+	readonly error = input<string | null>(null);
+	readonly required = input(false, { transform: booleanAttribute });
+	readonly htmlFor = input<string | null>(null);
+}
+
+export const FieldImports = [FieldComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/field-appearance.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Form-field visual treatment: `outline` = bordered (default), `fill` = borderless muted background. */
+export type AppFieldAppearance = 'outline' | 'fill';

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/field-size.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Form-field height scale: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+export type AppFieldSize = 'sm' | 'default' | 'lg';

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/icon/icon.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+	lucideArrowDown,
+	lucideArrowUp,
+	lucideCheck,
+	lucideChevronDown,
+	lucideChevronRight,
+	lucideCircleAlert,
+	lucideFileQuestion,
+	lucideGlobe,
+	lucideListFilter,
+	lucideLogIn,
+	lucideLogOut,
+	lucideSearch,
+	lucideSearchX,
+	lucideUser,
+	lucideUserPen,
+	lucideUserPlus,
+	lucideX,
+} from '@ng-icons/lucide';
+
+export const APP_ICONS = {
+	error: lucideCircleAlert,
+	close: lucideX,
+	person: lucideUser,
+	login: lucideLogIn,
+	logout: lucideLogOut,
+	editProfile: lucideUserPen,
+	personAdd: lucideUserPlus,
+	search: lucideSearch,
+	filter: lucideListFilter,
+	chevronRight: lucideChevronRight,
+	chevronDown: lucideChevronDown,
+	arrowUp: lucideArrowUp,
+	arrowDown: lucideArrowDown,
+	noResults: lucideSearchX,
+	notFound: lucideFileQuestion,
+	globe: lucideGlobe,
+	check: lucideCheck,
+} as const;
+
+export type AppIconName = keyof typeof APP_ICONS;
+
+@Component({
+	selector: 'app-icon',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgIcon],
+	providers: [provideIcons(APP_ICONS)],
+	host: {
+		'[class]': 'classes()',
+		'[attr.aria-label]': 'ariaLabel()',
+		'[attr.aria-hidden]': 'ariaLabel() ? null : true',
+	},
+	template: '<ng-icon [name]="name()" [size]="size()" />',
+})
+export class IconComponent {
+	readonly name = input.required<AppIconName>();
+	readonly size = input<string>('1rem');
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+	// Non-size utilities (color, margin) still pass through to the host.
+	readonly classes = input<string>('', { alias: 'class' });
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/input/input.html

@@ -0,0 +1,34 @@
+<div class="w-full space-y-1.5">
+	@if (label()) {
+		<label hlmLabel [for]="resolvedId()">{{ label() }}</label>
+	}
+	<hlm-input-group [class]="groupClasses()">
+		@if (icon(); as leadingIcon) {
+			<hlm-input-group-addon>
+				<app-icon [name]="leadingIcon" class="flex items-end" aria-hidden="true" />
+			</hlm-input-group-addon>
+		}
+		<input
+			hlmInputGroupInput
+			[type]="type()"
+			[placeholder]="placeholder()"
+			[disabled]="disabled()"
+			[id]="resolvedId()"
+			[attr.aria-label]="ariaLabel() || null"
+			[attr.aria-describedby]="describedBy()"
+			[attr.aria-invalid]="error() || null"
+			[attr.data-matches-spartan-invalid]="error() || null"
+			[(ngModel)]="value"
+		/>
+		@if (iconEnd(); as trailingIcon) {
+			<hlm-input-group-addon align="inline-end">
+				<app-icon [name]="trailingIcon" class="flex items-end" aria-hidden="true" />
+			</hlm-input-group-addon>
+		}
+	</hlm-input-group>
+	@if (error() && errorMessage()) {
+		<p [id]="errorId()" class="text-sm text-destructive" role="alert" aria-live="polite">
+			{{ errorMessage() }}
+		</p>
+	}
+</div>

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/input/input.ts

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HlmInputGroupImports } from '@spartan-ng/styles/input-group';
+import { HlmLabelImports } from '@spartan-ng/styles/label';
+import type { AppFieldSize } from '../field-size';
+import type { AppFieldAppearance } from '../field-appearance';
+import { IconComponent, type AppIconName } from '../icon/icon';
+
+const SIZE_CLASSES: Record<AppFieldSize, string> = {
+	sm: 'h-6 text-xs',
+	default: 'h-8',
+	lg: 'h-10',
+};
+
+const APPEARANCE_CLASSES: Record<AppFieldAppearance, string> = {
+	outline: '',
+	fill: 'border-transparent bg-muted',
+};
+
+@Component({
+	selector: 'app-input',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [FormsModule, HlmInputGroupImports, HlmLabelImports, IconComponent],
+	host: { class: 'block min-w-0' },
+	templateUrl: './input.html',
+})
+export class InputComponent {
+	readonly value = model<string>('');
+	readonly placeholder = input<string>('');
+	readonly label = input<string>('');
+	readonly type = input<string>('text');
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly appearance = input<AppFieldAppearance>('outline');
+	readonly error = input(false, { transform: booleanAttribute });
+	readonly errorMessage = input<string>('');
+	readonly size = input<AppFieldSize>('default');
+	readonly id = input<string>('');
+	readonly ariaDescribedby = input<string>('');
+	// Accessible name for inputs with no visible <label> (e.g. an icon-only
+	// search box); harmless when a label is present.
+	readonly ariaLabel = input<string>('');
+	// Optional leading/trailing icons. When set the input renders inside an
+	// input-group so the icon sits inside the shared border.
+	readonly icon = input<AppIconName | ''>('');
+	readonly iconEnd = input<AppIconName | ''>('');
+
+	private static _uid = 0;
+	private readonly _autoId = `app-input-${InputComponent._uid++}`;
+	protected readonly resolvedId = computed(() => this.id() || this._autoId);
+	protected readonly errorId = computed(() => `${this.resolvedId()}-error`);
+
+	// Link the error message to the input via aria-describedby (merged with any
+	// caller-supplied ids) so screen readers announce it; null when absent.
+	protected readonly describedBy = computed(() => {
+		const ids = [this.ariaDescribedby(), this.error() && this.errorMessage() ? this.errorId() : '']
+			.filter(Boolean)
+			.join(' ');
+		return ids || null;
+	});
+
+	// Size + appearance apply to the input-group wrapper, which owns the border.
+	protected readonly groupClasses = computed(() =>
+		[SIZE_CLASSES[this.size()], APPEARANCE_CLASSES[this.appearance()]].filter(Boolean).join(' '),
+	);
+}
+
+export const InputImports = [InputComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/label/label.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmLabelImports } from '@spartan-ng/styles/label';
+
+@Component({
+	selector: 'app-label',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmLabelImports],
+	template: `
+		<label hlmLabel [for]="for() ?? undefined" class="mb-1.5 block"><ng-content /></label>
+	`,
+})
+export class LabelComponent {
+	readonly for = input<string | null | undefined>(undefined);
+}
+
+export const LabelImports = [LabelComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/paginator/paginator.html

@@ -0,0 +1,74 @@
+@if (!hidePageSize()) {
+	<div class="flex items-center gap-2">
+		<span [id]="pageSizeLabelId" class="text-muted-foreground text-nowrap">Items per page:</span>
+		@if (pageSizeOptions().length > 0) {
+			<select
+				class="h-8 rounded-md border border-input bg-background px-2 text-sm"
+				[attr.aria-labelledby]="pageSizeLabelId"
+				[disabled]="disabled()"
+				(change)="onPageSizeChange($event)"
+			>
+				@for (opt of pageSizeOptions(); track opt) {
+					<option [value]="opt" [selected]="opt === pageSize()">{{ opt }}</option>
+				}
+			</select>
+		} @else {
+			<span class="text-muted-foreground">{{ pageSize() }}</span>
+		}
+	</div>
+}
+<div class="text-muted-foreground text-nowrap">
+	{{ rangeLabel() }}
+</div>
+<nav hlmPagination class="w-auto mx-0">
+	<ul hlmPaginationContent>
+		@if (showFirstLastButtons()) {
+			<li hlmPaginationItem>
+				<button
+					type="button"
+					class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+					[disabled]="disabled() || clampedPageIndex() === 0"
+					(click)="goToPage(0)"
+					aria-label="First page"
+				>
+					<ng-icon name="lucideChevronFirst" size="16" />
+				</button>
+			</li>
+		}
+		<li hlmPaginationItem>
+			<button
+				type="button"
+				class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+				[disabled]="disabled() || clampedPageIndex() === 0"
+				(click)="goToPage(clampedPageIndex() - 1)"
+				aria-label="Previous page"
+			>
+				<ng-icon name="lucideChevronLeft" size="16" />
+			</button>
+		</li>
+		<li hlmPaginationItem>
+			<button
+				type="button"
+				class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+				[disabled]="disabled() || clampedPageIndex() >= lastPage()"
+				(click)="goToPage(clampedPageIndex() + 1)"
+				aria-label="Next page"
+			>
+				<ng-icon name="lucideChevronRight" size="16" />
+			</button>
+		</li>
+		@if (showFirstLastButtons()) {
+			<li hlmPaginationItem>
+				<button
+					type="button"
+					class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+					[disabled]="disabled() || clampedPageIndex() >= lastPage()"
+					(click)="goToPage(lastPage())"
+					aria-label="Last page"
+				>
+					<ng-icon name="lucideChevronLast" size="16" />
+				</button>
+			</li>
+		}
+	</ul>
+</nav>