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

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/date-picker/hlm-month-year-input.ts

@@ -0,0 +1,105 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCalendar, lucideX } from '@ng-icons/lucide';
+import {
+	BrnDateInput,
+	type BrnDatePickerTriggerBase,
+	provideBrnDatePickerTrigger,
+} from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
+import { HlmInputGroup, HlmInputGroupImports } from '@spartan-ng/styles/input-group';
+import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
+
+@Component({
+	selector: 'hlm-month-year-input',
+	imports: [HlmInputGroupImports, NgIcon],
+	providers: [
+		provideIcons({ lucideCalendar, lucideX }),
+		provideBrnDatePickerTrigger(HlmMonthYearInput),
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmInputGroup],
+	template: `
+		<input
+			#input
+			hlmInputGroupInput
+			[value]="_inputValue()"
+			[id]="inputId()"
+			[placeholder]="placeholder()"
+			[disabled]="_disabled()"
+			[forceInvalid]="forceInvalid()"
+			[attr.aria-invalid]="_ariaInvalid()"
+			[attr.data-invalid]="_ariaInvalid()"
+			[attr.data-touched]="_touched?.() ? 'true' : null"
+			[attr.data-dirty]="_dirty?.() ? 'true' : null"
+			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
+			(click)="_handleClick()"
+			(keydown.arrowDown)="_open()"
+			(keydown.enter)="_handleEnter($event)"
+			(input)="_handleInputChange($event)"
+			(focus)="_handleFocus()"
+			(blur)="_handleBlur()"
+		/>
+		<hlm-input-group-addon align="inline-end">
+			@if (_showClearButton()) {
+				<button
+					hlmInputGroupButton
+					size="icon-xs"
+					variant="ghost"
+					[attr.aria-label]="clearAriaLabel()"
+					(click)="_clear()"
+					[disabled]="_disabled()"
+				>
+					<ng-icon name="lucideX" />
+				</button>
+			}
+			<button
+				hlmInputGroupButton
+				size="icon-xs"
+				[attr.aria-label]="calendarAriaLabel()"
+				(click)="_popover().open()"
+				[disabled]="_disabled()"
+			>
+				<ng-icon name="lucideCalendar" />
+			</button>
+		</hlm-input-group-addon>
+	`,
+})
+export class HlmMonthYearInput<T> extends BrnDateInput<T> implements BrnDatePickerTriggerBase {
+	private readonly _config = injectHlmMonthYearPickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = computed(
+		() => this.forceInvalid() || this._fieldControl?.spartanInvalid(),
+	);
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
+
+	/**
+	 * Parses input text into a date value. Return `null` for invalid
+	 * input - the picker's date is cleared while the text is preserved so
+	 * the user can fix it.
+	 *
+	 * Defaults to `parseDate` from `HlmMonthYearPickerConfig`.
+	 */
+	public readonly parseDate = input<(value: string) => T | null>(this._config.parseDate);
+
+	/**
+	 * Formats the current date into the input/edit format shown while the
+	 * input is focused. On blur the picker's display format is restored.
+	 *
+	 * Defaults to `formatInputDate` from `HlmMonthYearPickerConfig`.
+	 */
+	public readonly formatInputDate = input<(date: T) => string>(this._config.formatInputDate);
+
+	protected override parseValue(value: string): T | null {
+		return this.parseDate()(value);
+	}
+
+	protected override formatInputValue(value: T): string {
+		return this.formatInputDate()(value);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/date-picker/hlm-month-year-picker.token.ts

@@ -0,0 +1,89 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmMonthYearPickerConfig<T> {
+	/**
+	 * If true, the date picker will close when a date is selected.
+	 */
+	autoCloseOnSelect: boolean;
+
+	/**
+	 * Defines how the date should be displayed in the UI.
+	 *
+	 * @param date
+	 * @returns formatted date
+	 */
+	formatDate: (date: T) => string;
+
+	/**
+	 * Defines how the date should be displayed while the input is focused,
+	 * i.e. the format the user is expected to type in.
+	 *
+	 * @param date
+	 * @returns formatted date in the input/edit format
+	 */
+	formatInputDate: (date: T) => string;
+
+	/**
+	 * Defines how the date should be transformed before saving to model/form.
+	 *
+	 * @param date
+	 * @returns transformed date
+	 */
+	transformDate: (date: T) => T;
+
+	/**
+	 * Parse a user-entered string into a date.
+	 *
+	 * @param value the raw string from the input
+	 * @returns the parsed date, or `null` when the value can't be parsed
+	 */
+	parseDate: (value: string) => T | null;
+}
+
+const mmYYYY = <T>(date: T) => {
+	if (!(date instanceof Date)) return `${date}`;
+
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const year = date.getFullYear();
+
+	return `${month}/${year}`;
+};
+
+function getDefaultConfig<T>(): HlmMonthYearPickerConfig<T> {
+	return {
+		formatDate: mmYYYY,
+		formatInputDate: mmYYYY,
+		transformDate: (date) => date,
+		parseDate: (value) => {
+			if (typeof value !== 'string') return null;
+
+			const match = value.match(/^(\d{2})\/(\d{4})$/);
+			if (!match) return null;
+
+			const month = Number(match[1]);
+			const year = Number(match[2]);
+
+			if (month < 1 || month > 12) return null;
+
+			const date = new Date(year, month - 1, 1);
+
+			return date as T;
+		},
+		autoCloseOnSelect: false,
+	};
+}
+
+const HlmMonthYearPickerConfigToken = new InjectionToken<HlmMonthYearPickerConfig<unknown>>(
+	'HlmMonthYearPickerConfig',
+);
+
+export function provideHlmMonthYearPickerConfig<T>(
+	config: Partial<HlmMonthYearPickerConfig<T>>,
+): ValueProvider {
+	return { provide: HlmMonthYearPickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmMonthYearPickerConfig<T>(): HlmMonthYearPickerConfig<T> {
+	const injectedConfig = inject(HlmMonthYearPickerConfigToken, { optional: true });
+	return injectedConfig ? (injectedConfig as HlmMonthYearPickerConfig<T>) : getDefaultConfig();
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/date-picker/hlm-month-year-picker.ts

@@ -0,0 +1,196 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	contentChild,
+	forwardRef,
+	input,
+	linkedSignal,
+	output,
+	signal,
+	viewChild,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+	type BrnDatePickerBase,
+	BrnDatePickerTriggerToken,
+	provideBrnDatePicker,
+} from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
+import { BrnPopover, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
+import { HlmCalendarImports } from '@spartan-ng/styles/calendar';
+import { HlmPopoverImports } from '@spartan-ng/styles/popover';
+import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
+
+export const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => HlmMonthYearPicker),
+	multi: true,
+};
+@Component({
+	selector: 'hlm-month-year-picker',
+	imports: [HlmPopoverImports, HlmCalendarImports],
+	providers: [
+		HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR,
+		provideBrnDatePicker(HlmMonthYearPicker),
+		provideBrnLabelable(HlmMonthYearPicker),
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnFieldControl],
+	host: { class: 'block' },
+	template: `
+		<hlm-popover
+			[align]="align()"
+			sideOffset="5"
+			[state]="_popoverState()"
+			(stateChanged)="_onStateChange($event)"
+		>
+			<ng-content />
+
+			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+				<ng-content select="[hlmDatePickerHeader]" />
+				<hlm-month-year-calendar
+					class="rounded-none border-0"
+					[date]="_mutableDate()"
+					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
+					[min]="minDate()"
+					[max]="maxDate()"
+					[disabled]="_disabled()"
+					(dateChange)="_handleChange($event)"
+				/>
+				<ng-content select="[hlmDatePickerFooter]" />
+			</hlm-popover-content>
+		</hlm-popover>
+	`,
+})
+export class HlmMonthYearPicker<T> implements BrnDatePickerBase<T>, ControlValueAccessor {
+	private readonly _config = injectHlmMonthYearPickerConfig<T>();
+
+	public readonly popover = viewChild.required(BrnPopover);
+
+	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
+
+	public readonly align = input<BrnPopoverAlign>('center');
+
+	/** The minimum date that can be selected.*/
+	public readonly minDate = input<T>();
+
+	/** The maximum date that can be selected. */
+	public readonly maxDate = input<T>();
+
+	/** Determine if the date picker is disabled. */
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/** The selected value. */
+	public readonly date = input<T>();
+
+	/** The date the calendar focuses on first open when no date is selected. */
+	public readonly defaultFocusedDate = input<T>();
+
+	protected readonly _mutableDate = linkedSignal(this.date);
+
+	/** If true, the date picker will close when a date is selected. */
+	public readonly autoCloseOnSelect = input<boolean, BooleanInput>(this._config.autoCloseOnSelect, {
+		transform: booleanAttribute,
+	});
+
+	/** Defines how the date should be displayed in the UI.  */
+	public readonly formatDate = input<(date: T) => string>(this._config.formatDate);
+
+	/** Defines how the date should be transformed before saving to model/form. */
+	public readonly transformDate = input<(date: T) => T>(this._config.transformDate);
+
+	protected readonly _popoverState = signal<BrnOverlayState | null>(null);
+
+	protected readonly _disabled = linkedSignal(this.disabled);
+
+	/** @internal The disabled state as a readonly signal */
+	public readonly disabledState = this._disabled.asReadonly();
+
+	public readonly formattedDate = computed(() => {
+		const date = this._mutableDate();
+		return date ? this.formatDate()(date) : undefined;
+	});
+
+	public readonly dateChange = output<T | null>();
+
+	public readonly labelableId = computed(() => this._trigger()?.triggerId());
+
+	public readonly hasDate = computed(() => !!this._mutableDate());
+
+	/** @internal The current raw value, used by inputs to reformat on focus. */
+	public readonly value = computed(() => this._mutableDate() ?? null);
+
+	protected _onChange?: ChangeFn<T | null>;
+	protected _onTouched?: TouchFn;
+
+	protected _onStateChange(state: BrnOverlayState) {
+		this._popoverState.set(state);
+		if (state === 'closed') this._onTouched?.();
+	}
+
+	protected _handleChange(value: T | undefined) {
+		if (this._disabled()) return;
+		this.updateDate(value ?? null);
+
+		if (this.autoCloseOnSelect()) {
+			this._popoverState.set('closed');
+		}
+	}
+
+	/**
+	 * Commit a date to the picker. Updates the internal model, notifies form
+	 * controls, and emits `dateChange`. Unlike `_handleChange`, this does not
+	 * close the popover - it's intended to be called from a text input that
+	 * is parsing user-entered values while typing.
+	 */
+	public updateDate(value: T | null) {
+		if (this._disabled()) return;
+		const transformedDate = value != null ? this.transformDate()(value) : undefined;
+
+		this._mutableDate.set(transformedDate);
+		this._onChange?.(transformedDate ?? null);
+		this.dateChange.emit(transformedDate ?? null);
+	}
+
+	/** CONTROL VALUE ACCESSOR */
+	public writeValue(value: T | null): void {
+		this._mutableDate.set(value ? this.transformDate()(value) : undefined);
+	}
+
+	public registerOnChange(fn: ChangeFn<T | null>): void {
+		this._onChange = fn;
+	}
+
+	public registerOnTouched(fn: TouchFn): void {
+		this._onTouched = fn;
+	}
+
+	public touched(): void {
+		this._onTouched?.();
+	}
+
+	public setDisabledState(isDisabled: boolean): void {
+		this._disabled.set(isDisabled);
+	}
+
+	public open() {
+		this._popoverState.set('open');
+	}
+
+	public close() {
+		this._popoverState.set('closed');
+	}
+
+	public reset() {
+		this._mutableDate.set(undefined);
+		this._onChange?.(null);
+		this.dateChange.emit(null);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/date-picker/index.ts

@@ -0,0 +1,38 @@
+import { HlmDateMultiInput } from './hlm-date-multi-input';
+import { HlmDatePicker } from './hlm-date-picker';
+import { HlmDatePickerAnchor } from './hlm-date-picker-anchor';
+import { HlmDatePickerInput } from './hlm-date-picker-input';
+import { HlmDatePickerMulti } from './hlm-date-picker-multi';
+import { HlmDatePickerTrigger } from './hlm-date-picker-trigger';
+import { HlmDateRangeInput } from './hlm-date-range-input';
+import { HlmDateRangePicker } from './hlm-date-range-picker';
+import { HlmMonthYearInput } from './hlm-month-year-input';
+import { HlmMonthYearPicker } from './hlm-month-year-picker';
+
+export * from './hlm-date-multi-input';
+export * from './hlm-date-picker';
+export * from './hlm-date-picker-anchor';
+export * from './hlm-date-picker-input';
+export * from './hlm-date-picker-multi';
+export * from './hlm-date-picker-multi.token';
+export * from './hlm-date-picker-trigger';
+export * from './hlm-date-picker.token';
+export * from './hlm-date-range-input';
+export * from './hlm-date-range-picker';
+export * from './hlm-date-range-picker.token';
+export * from './hlm-month-year-input';
+export * from './hlm-month-year-picker';
+export * from './hlm-month-year-picker.token';
+
+export const HlmDatePickerImports = [
+	HlmDatePicker,
+	HlmDatePickerAnchor,
+	HlmDatePickerInput,
+	HlmDatePickerMulti,
+	HlmDateMultiInput,
+	HlmDateRangeInput,
+	HlmDateRangePicker,
+	HlmDatePickerTrigger,
+	HlmMonthYearPicker,
+	HlmMonthYearInput,
+] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-close.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnDialogClose } from '@spartan-ng/brain/dialog';
+
+@Directive({
+	selector: 'button[hlmDialogClose]',
+	hostDirectives: [BrnDialogClose],
+	host: { 'data-slot': 'dialog-close' },
+})
+export class HlmDialogClose {}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-content.ts

@@ -0,0 +1,74 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import type { ComponentType } from '@angular/cdk/portal';
+import { NgComponentOutlet } from '@angular/common';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	inject,
+	input,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';
+import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
+import { HlmButton } from '@spartan-ng/styles/button';
+
+import { classes } from '@spartan-ng/styles/utils';
+import { HlmDialogClose } from './hlm-dialog-close';
+
+type HlmDialogContentContext = {
+	$component?: ComponentType<unknown>;
+	$dynamicComponentClass?: string;
+	$showCloseButton?: boolean;
+};
+
+@Component({
+	selector: 'hlm-dialog-content',
+	imports: [NgComponentOutlet, HlmButton, HlmDialogClose, NgIcon],
+	providers: [provideIcons({ lucideX })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'dialog-content',
+		'[attr.data-state]': 'state()',
+	},
+	template: `
+		@if (component) {
+			<ng-container [ngComponentOutlet]="component" />
+		} @else {
+			<ng-content />
+		}
+
+		@if (showCloseButton()) {
+			<button hlmBtn variant="ghost" size="icon-sm" class="absolute end-2 top-2" hlmDialogClose>
+				<span class="sr-only">close</span>
+				<ng-icon name="lucideX" />
+			</button>
+		}
+	`,
+})
+export class HlmDialogContent {
+	private readonly _dialogRef = inject(BrnDialogRef);
+	private readonly _dialogContext = injectBrnDialogContext<HlmDialogContentContext | null>({
+		optional: true,
+	});
+
+	public readonly showCloseButton = input<boolean, BooleanInput>(
+		this._dialogContext?.$showCloseButton ?? true,
+		{
+			transform: booleanAttribute,
+		},
+	);
+
+	public readonly state = computed(() => this._dialogRef?.state() ?? 'closed');
+
+	public readonly component = this._dialogContext?.$component;
+	private readonly _dynamicComponentClass = this._dialogContext?.$dynamicComponentClass;
+
+	constructor() {
+		classes(() => [
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm relative mx-auto w-full outline-none sm:mx-0',
+			this._dynamicComponentClass,
+		]);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-description.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnDialogDescription } from '@spartan-ng/brain/dialog';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDialogDescription]',
+	hostDirectives: [BrnDialogDescription],
+	host: { 'data-slot': 'dialog-description' },
+})
+export class HlmDialogDescription {
+	constructor() {
+		classes(
+			() =>
+				'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-footer.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDialogFooter],hlm-dialog-footer',
+	host: { 'data-slot': 'dialog-footer' },
+})
+export class HlmDialogFooter {
+	constructor() {
+		classes(
+			() =>
+				'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-header.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDialogHeader],hlm-dialog-header',
+	host: { 'data-slot': 'dialog-header' },
+})
+export class HlmDialogHeader {
+	constructor() {
+		classes(() => 'gap-2 flex flex-col');
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-overlay.ts

@@ -0,0 +1,27 @@
+import { computed, Directive, effect, input, untracked } from '@angular/core';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { BrnDialogOverlay } from '@spartan-ng/brain/dialog';
+import { hlm } from '@spartan-ng/styles/utils';
+import type { ClassValue } from 'clsx';
+
+export const hlmDialogOverlayClass = hlm(
+	'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+);
+
+@Directive({
+	selector: '[hlmDialogOverlay],hlm-dialog-overlay',
+	hostDirectives: [BrnDialogOverlay],
+})
+export class HlmDialogOverlay {
+	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm(hlmDialogOverlayClass, this.userClass()));
+
+	constructor() {
+		effect(() => {
+			const newClass = this._computedClass();
+			untracked(() => this._classSettable?.setClassToCustomElement(newClass));
+		});
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-portal.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnDialogContent } from '@spartan-ng/brain/dialog';
+
+@Directive({
+	selector: '[hlmDialogPortal]',
+	hostDirectives: [{ directive: BrnDialogContent, inputs: ['context', 'class'] }],
+})
+export class HlmDialogPortal {}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-title.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnDialogTitle } from '@spartan-ng/brain/dialog';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDialogTitle]',
+	hostDirectives: [BrnDialogTitle],
+	host: { 'data-slot': 'dialog-title' },
+})
+export class HlmDialogTitle {
+	constructor() {
+		classes(() => 'text-base leading-none font-medium');
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog-trigger.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnDialogTrigger } from '@spartan-ng/brain/dialog';
+
+@Directive({
+	selector: 'button[hlmDialogTrigger],button[hlmDialogTriggerFor]',
+	hostDirectives: [
+		{
+			directive: BrnDialogTrigger,
+			inputs: ['id', 'brnDialogTriggerFor: hlmDialogTriggerFor', 'type'],
+		},
+	],
+	host: { 'data-slot': 'dialog-trigger' },
+})
+export class HlmDialogTrigger {}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/dialog/hlm-dialog.service.ts

@@ -0,0 +1,46 @@
+import type { ComponentType } from '@angular/cdk/portal';
+import { inject, Injectable, type TemplateRef } from '@angular/core';
+import {
+	type BrnDialogOptions,
+	type BrnDialogRef,
+	BrnDialogService,
+	cssClassesToArray,
+} from '@spartan-ng/brain/dialog';
+import { HlmDialogContent } from './hlm-dialog-content';
+import { hlmDialogOverlayClass } from './hlm-dialog-overlay';
+
+export type HlmDialogOptions<DialogContext = unknown> = BrnDialogOptions & {
+	contentClass?: string;
+	showCloseButton?: boolean;
+	context?: DialogContext;
+};
+
+@Injectable({
+	providedIn: 'root',
+})
+export class HlmDialogService {
+	private readonly _brnDialogService = inject(BrnDialogService);
+
+	public open<TResult = unknown, TContext = unknown>(
+		component: ComponentType<unknown> | TemplateRef<unknown>,
+		options?: Partial<HlmDialogOptions<TContext>>,
+	): BrnDialogRef<TResult> {
+		const mergedOptions = {
+			...(options ?? {}),
+			backdropClass: cssClassesToArray(`${hlmDialogOverlayClass} ${options?.backdropClass ?? ''}`),
+			context: {
+				...(options?.context && typeof options.context === 'object' ? options.context : {}),
+				$component: component,
+				$dynamicComponentClass: options?.contentClass,
+				$showCloseButton: options?.showCloseButton,
+			},
+		};
+
+		return this._brnDialogService.open<unknown, TResult>(
+			HlmDialogContent,
+			undefined,
+			mergedOptions.context,
+			mergedOptions,
+		);
+	}
+}