@salesforce/ui-bundle-template-base-angular-app 11.60.0 → 11.62.1

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/calendar/hlm-calendar-range.ts

@@ -0,0 +1,194 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import {
+	BrnCalendarImports,
+	BrnCalendarRange,
+	injectBrnCalendarI18n,
+} from '@spartan-ng/brain/calendar';
+import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { buttonVariants, HlmButtonImports } from '@spartan-ng/styles/button';
+import { HlmSelectImports } from '@spartan-ng/styles/select';
+import { classes, hlm } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-calendar-range',
+	imports: [BrnCalendarImports, NgIcon, HlmSelectImports, NgTemplateOutlet, HlmButtonImports],
+	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [
+		{
+			directive: BrnCalendarRange,
+			inputs: [
+				'min',
+				'max',
+				'disabled',
+				'startDate',
+				'endDate',
+				'dateDisabled',
+				'weekStartsOn',
+				'highlightDays',
+				'defaultFocusedDate',
+			],
+			outputs: ['endDateChange', 'startDateChange'],
+		},
+	],
+	host: { 'data-slot': 'calendar' },
+	template: `
+		<div class="inline-flex flex-col space-y-4">
+			<!-- Header -->
+			<div class="flex w-full items-center justify-between gap-1.5">
+				<ng-template #month>
+					<hlm-select brnCalendarMonthSelect class="order-1">
+						<hlm-select-trigger size="sm" [class]="_selectClass">
+							<hlm-select-value />
+						</hlm-select-trigger>
+						<hlm-select-content *hlmSelectPortal class="max-h-80">
+							<hlm-select-group>
+								@for (month of _i18n.config().months(); track month) {
+									<hlm-select-item [value]="month">{{ month }}</hlm-select-item>
+								}
+							</hlm-select-group>
+						</hlm-select-content>
+					</hlm-select>
+				</ng-template>
+				<ng-template #year>
+					<hlm-select brnCalendarYearSelect class="order-3">
+						<hlm-select-trigger size="sm" [class]="_selectClass">
+							<hlm-select-value />
+						</hlm-select-trigger>
+						<hlm-select-content *hlmSelectPortal class="max-h-80">
+							<hlm-select-group>
+								@for (year of _i18n.config().years(); track year) {
+									<hlm-select-item [value]="year">{{ year }}</hlm-select-item>
+								}
+							</hlm-select-group>
+						</hlm-select-content>
+					</hlm-select>
+				</ng-template>
+				@let heading = _heading();
+
+				<button
+					brnCalendarPreviousButton
+					variant="ghost"
+					hlmBtn
+					class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+				</button>
+
+				@switch (captionLayout()) {
+					@case ('dropdown') {
+						<ng-container [ngTemplateOutlet]="month" />
+						<ng-container [ngTemplateOutlet]="year" />
+					}
+					@case ('dropdown-months') {
+						<ng-container [ngTemplateOutlet]="month" />
+						<div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+					}
+					@case ('dropdown-years') {
+						<div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+						<ng-container [ngTemplateOutlet]="year" />
+					}
+					@case ('label') {
+						<div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+					}
+				}
+
+				<button
+					brnCalendarNextButton
+					hlmBtn
+					variant="ghost"
+					class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+				</button>
+			</div>
+
+			<table class="w-full border-collapse space-y-1" brnCalendarGrid>
+				<thead aria-hidden="true">
+					<tr class="flex">
+						<th
+							*brnCalendarWeekday="let weekday"
+							scope="col"
+							class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+							[attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+						>
+							{{ _i18n.config().formatWeekdayName(weekday) }}
+						</th>
+					</tr>
+				</thead>
+
+				<tbody role="rowgroup">
+					<tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+						@for (date of week; track _dateAdapter.getTime(date)) {
+							<td
+								brnCalendarCell
+								class="group/day has-[button[data-range-start=true]]:bg-muted has-[button[data-range-start=true]]:after:bg-muted has-[button[data-range-end=true]]:bg-muted has-[button[data-range-end=true]]:after:bg-muted relative isolate z-0 aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none has-[button[data-range-end=true]]:rounded-e-(--cell-radius) has-[button[data-range-end=true]]:after:absolute has-[button[data-range-end=true]]:after:inset-y-0 has-[button[data-range-end=true]]:after:start-0 has-[button[data-range-end=true]]:after:w-4 has-[button[data-range-start=true]]:rounded-s-(--cell-radius) has-[button[data-range-start=true]]:after:absolute has-[button[data-range-start=true]]:after:inset-y-0 has-[button[data-range-start=true]]:after:end-0 has-[button[data-range-start=true]]:after:w-4 [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
+							>
+								<button brnCalendarCellButton [date]="date" [class]="_btnClass">
+									{{ _dateAdapter.getDate(date) }}
+								</button>
+							</td>
+						}
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	`,
+})
+export class HlmCalendarRange<T> {
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<
+		'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'
+	>('label');
+
+	/** Access the calendar i18n */
+	protected readonly _i18n = injectBrnCalendarI18n();
+
+	/** Access the date time adapter */
+	protected readonly _dateAdapter = injectDateAdapter<T>();
+
+	/** Access the calendar directive */
+	private readonly _calendar = inject(BrnCalendarRange);
+
+	/** Get the heading for the current month and year */
+	protected readonly _heading = computed(() => {
+		const config = this._i18n.config();
+		const date = this._calendar.focusedDate();
+
+		return {
+			header: config.formatHeader(
+				this._dateAdapter.getMonth(date),
+				this._dateAdapter.getYear(date),
+			),
+			month: config.formatMonth(this._dateAdapter.getMonth(date)),
+			year: config.formatYear(this._dateAdapter.getYear(date)),
+		};
+	});
+
+	protected readonly _btnClass = hlm(
+		buttonVariants({ variant: 'ghost', size: 'icon' }),
+		'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
+		'data-[outside=true]:opacity-50',
+		"data-[highlighted]:before:content-['']",
+		'data-[highlighted]:before:absolute',
+		'data-[highlighted]:before:bottom-1',
+		'data-[highlighted]:before:start-1/2',
+		'data-[highlighted]:before:h-1',
+		'data-[highlighted]:before:w-1',
+		'data-[highlighted]:before:-translate-x-1/2',
+		'data-[highlighted]:before:rounded-full',
+		'data-[highlighted]:before:bg-destructive',
+	);
+
+	protected readonly _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
+
+	constructor() {
+		classes(
+			() =>
+				'p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/calendar/hlm-calendar.ts

@@ -0,0 +1,189 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import { BrnCalendar, BrnCalendarImports, injectBrnCalendarI18n } from '@spartan-ng/brain/calendar';
+import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { buttonVariants, HlmButtonImports } from '@spartan-ng/styles/button';
+import { HlmSelectImports } from '@spartan-ng/styles/select';
+import { classes, hlm } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-calendar',
+	imports: [BrnCalendarImports, NgIcon, HlmSelectImports, NgTemplateOutlet, HlmButtonImports],
+	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [
+		{
+			directive: BrnCalendar,
+			inputs: [
+				'min',
+				'max',
+				'disabled',
+				'date',
+				'dateDisabled',
+				'weekStartsOn',
+				'highlightDays',
+				'defaultFocusedDate',
+			],
+			outputs: ['dateChange'],
+		},
+	],
+	host: { 'data-slot': 'calendar' },
+	template: `
+		<div class="inline-flex flex-col gap-4">
+			<!-- Header -->
+			<div class="flex w-full items-center justify-between gap-1.5">
+				<ng-template #month>
+					<hlm-select brnCalendarMonthSelect class="order-1">
+						<hlm-select-trigger size="sm" [class]="_selectClass">
+							<hlm-select-value />
+						</hlm-select-trigger>
+						<hlm-select-content *hlmSelectPortal class="max-h-80">
+							<hlm-select-group>
+								@for (month of _i18n.config().months(); track month) {
+									<hlm-select-item [value]="month">{{ month }}</hlm-select-item>
+								}
+							</hlm-select-group>
+						</hlm-select-content>
+					</hlm-select>
+				</ng-template>
+				<ng-template #year>
+					<hlm-select brnCalendarYearSelect class="order-3">
+						<hlm-select-trigger size="sm" [class]="_selectClass">
+							<hlm-select-value />
+						</hlm-select-trigger>
+						<hlm-select-content *hlmSelectPortal class="max-h-80">
+							<hlm-select-group>
+								@for (year of _i18n.config().years(); track year) {
+									<hlm-select-item [value]="year">{{ year }}</hlm-select-item>
+								}
+							</hlm-select-group>
+						</hlm-select-content>
+					</hlm-select>
+				</ng-template>
+				@let heading = _heading();
+
+				<button
+					brnCalendarPreviousButton
+					variant="ghost"
+					hlmBtn
+					class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+				</button>
+
+				@switch (captionLayout()) {
+					@case ('dropdown') {
+						<ng-container [ngTemplateOutlet]="month" />
+						<ng-container [ngTemplateOutlet]="year" />
+					}
+					@case ('dropdown-months') {
+						<ng-container [ngTemplateOutlet]="month" />
+						<div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+					}
+					@case ('dropdown-years') {
+						<div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+						<ng-container [ngTemplateOutlet]="year" />
+					}
+					@case ('label') {
+						<div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+					}
+				}
+
+				<button
+					brnCalendarNextButton
+					hlmBtn
+					variant="ghost"
+					class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+				</button>
+			</div>
+
+			<table class="w-full border-collapse space-y-1" brnCalendarGrid>
+				<thead aria-hidden="true">
+					<tr class="flex">
+						<th
+							*brnCalendarWeekday="let weekday"
+							scope="col"
+							class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+							[attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+						>
+							{{ _i18n.config().formatWeekdayName(weekday) }}
+						</th>
+					</tr>
+				</thead>
+
+				<tbody role="rowgroup">
+					<tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+						@for (date of week; track _dateAdapter.getTime(date)) {
+							<td
+								brnCalendarCell
+								class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
+							>
+								<button brnCalendarCellButton [date]="date" [class]="_btnClass">
+									{{ _dateAdapter.getDate(date) }}
+								</button>
+							</td>
+						}
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	`,
+})
+export class HlmCalendar<T> {
+	/** Access the calendar i18n */
+	protected readonly _i18n = injectBrnCalendarI18n();
+
+	/** Access the date time adapter */
+	protected readonly _dateAdapter = injectDateAdapter<T>();
+
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<
+		'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'
+	>('label');
+
+	/** Access the calendar directive */
+	private readonly _calendar = inject(BrnCalendar);
+
+	/** Get the heading for the current month and year */
+	protected readonly _heading = computed(() => {
+		const config = this._i18n.config();
+		const date = this._calendar.focusedDate();
+
+		return {
+			header: config.formatHeader(
+				this._dateAdapter.getMonth(date),
+				this._dateAdapter.getYear(date),
+			),
+			month: config.formatMonth(this._dateAdapter.getMonth(date)),
+			year: config.formatYear(this._dateAdapter.getYear(date)),
+		};
+	});
+
+	protected readonly _btnClass = hlm(
+		buttonVariants({ variant: 'ghost', size: 'icon' }),
+		'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
+		'data-[outside=true]:opacity-50',
+		"data-[highlighted]:before:content-['']",
+		'data-[highlighted]:before:absolute',
+		'data-[highlighted]:before:bottom-1',
+		'data-[highlighted]:before:start-1/2',
+		'data-[highlighted]:before:h-1',
+		'data-[highlighted]:before:w-1',
+		'data-[highlighted]:before:-translate-x-1/2',
+		'data-[highlighted]:before:rounded-full',
+		'data-[highlighted]:before:bg-destructive',
+	);
+
+	protected readonly _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
+
+	constructor() {
+		classes(
+			() =>
+				'p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/calendar/hlm-month-year-calendar.ts

@@ -0,0 +1,119 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import {
+	BrnCalendarImports,
+	BrnMonthYearCalendar,
+	injectBrnCalendarI18n,
+} from '@spartan-ng/brain/calendar';
+import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { buttonVariants, HlmButtonImports } from '@spartan-ng/styles/button';
+import { classes, hlm } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-month-year-calendar',
+	imports: [BrnCalendarImports, NgIcon, HlmButtonImports],
+	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [
+		{
+			directive: BrnMonthYearCalendar,
+			inputs: ['min', 'max', 'disabled', 'date', 'defaultFocusedDate', 'view'],
+			outputs: ['dateChange'],
+		},
+	],
+	host: { 'data-slot': 'month-year-calendar' },
+	template: `
+		<div class="flex flex-col gap-4">
+			<!-- Header -->
+			<div class="flex w-full items-center justify-between gap-1.5">
+				<button
+					brnMonthYearCalendarPreviousButton
+					hlmBtn
+					variant="ghost"
+					class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+				</button>
+
+				<button
+					hlmBtn
+					variant="ghost"
+					class="h-(--cell-size) py-0 select-none aria-disabled:opacity-50"
+					brnMonthYearCalendarHeader
+				>
+					{{ _heading() }}
+				</button>
+
+				<button
+					brnMonthYearCalendarNextButton
+					hlmBtn
+					variant="ghost"
+					class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+				</button>
+			</div>
+
+			<!-- Grid -->
+			@switch (_picker.view()) {
+				@case ('year') {
+					<div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+						@for (year of _picker.years(); track _dateAdapter.getYear(year)) {
+							<button brnMonthYearCalendarYearButton [date]="year" [class]="_btnClass">
+								{{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}
+							</button>
+						}
+					</div>
+				}
+				@case ('month') {
+					<div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+						@for (month of _picker.months(); track _dateAdapter.getMonth(month)) {
+							<button brnMonthYearCalendarMonthButton [date]="month" [class]="_btnClass">
+								{{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}
+							</button>
+						}
+					</div>
+				}
+			}
+		</div>
+	`,
+})
+export class HlmMonthYearCalendar<T> {
+	/** Access the calendar i18n */
+	protected readonly _i18n = injectBrnCalendarI18n();
+
+	/** Access the date adapter */
+	protected readonly _dateAdapter = injectDateAdapter<T>();
+
+	/** Access the picker directive */
+	protected readonly _picker = inject(BrnMonthYearCalendar<T>);
+
+	/** The heading for the current view. */
+	protected readonly _heading = computed(() => {
+		const config = this._i18n.config();
+
+		if (this._picker.view() === 'month') {
+			return config.formatYear(this._dateAdapter.getYear(this._picker.focusedDate()));
+		}
+
+		const { start, end } = this._picker.yearRange();
+		return `${config.formatYear(start)} – ${config.formatYear(end)}`;
+	});
+
+	protected readonly _btnClass = hlm(
+		buttonVariants({ variant: 'ghost' }),
+		'data-[today=true]:bg-muted',
+		'data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground',
+		'data-[focused=true]:border-ring data-[focused=true]:ring-ring/50 data-[focused=true]:ring-[3px]',
+		'aria-disabled:pointer-events-none aria-disabled:opacity-50',
+		'h-(--cell-size)',
+	);
+
+	constructor() {
+		classes(
+			() =>
+				'p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/calendar/index.ts

@@ -0,0 +1,16 @@
+import { HlmCalendar } from './hlm-calendar';
+import { HlmCalendarMulti } from './hlm-calendar-multi';
+import { HlmCalendarRange } from './hlm-calendar-range';
+import { HlmMonthYearCalendar } from './hlm-month-year-calendar';
+
+export * from './hlm-calendar';
+export * from './hlm-calendar-multi';
+export * from './hlm-calendar-range';
+export * from './hlm-month-year-calendar';
+
+export const HlmCalendarImports = [
+	HlmCalendar,
+	HlmCalendarMulti,
+	HlmCalendarRange,
+	HlmMonthYearCalendar,
+] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card-action.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardAction]',
+	host: { 'data-slot': 'card-action' },
+})
+export class HlmCardAction {
+	constructor() {
+		classes(() => 'col-end-[-1] row-span-2 row-start-1 self-start justify-self-end');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card-avatar.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardAvatar]',
+	host: { 'data-slot': 'card-avatar' },
+})
+export class HlmCardAvatar {
+	constructor() {
+		classes(
+			() => 'col-start-1 row-span-2 row-start-1 self-center size-10 rounded-full object-cover',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card-content.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardContent]',
+	host: { 'data-slot': 'card-content' },
+})
+export class HlmCardContent {
+	constructor() {
+		classes(() => 'px-(--card-spacing)');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card-description.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardDescription]',
+	host: { 'data-slot': 'card-description' },
+})
+export class HlmCardDescription {
+	constructor() {
+		classes(() => 'text-muted-foreground text-sm');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card-footer.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardFooter],hlm-card-footer',
+	host: { 'data-slot': 'card-footer' },
+})
+export class HlmCardFooter {
+	constructor() {
+		classes(() => 'bg-muted/50 rounded-b-xl border-t p-(--card-spacing) flex items-center');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card-header.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardHeader],hlm-card-header',
+	host: { 'data-slot': 'card-header' },
+})
+export class HlmCardHeader {
+	constructor() {
+		classes(
+			() =>
+				'gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-avatar]:grid-cols-[auto_1fr] has-data-[slot=card-avatar]:has-data-[slot=card-action]:grid-cols-[auto_1fr_auto] has-data-[slot=card-avatar]:gap-x-3 has-data-[slot=card-description]:grid-rows-[auto_auto]',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card-title.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardTitle]',
+	host: { 'data-slot': 'card-title' },
+})
+export class HlmCardTitle {
+	constructor() {
+		classes(() => 'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card.token.ts

@@ -0,0 +1,19 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export type HlmCardConfig = {
+	size: 'sm' | 'default';
+};
+
+const defaultConfig: HlmCardConfig = {
+	size: 'default',
+};
+
+const HlmCardConfigToken = new InjectionToken<HlmCardConfig>('HlmCardConfig');
+
+export function provideHlmCardConfig(config: Partial<HlmCardConfig>): ValueProvider {
+	return { provide: HlmCardConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmCardConfig(): HlmCardConfig {
+	return inject(HlmCardConfigToken, { optional: true }) ?? defaultConfig;
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/card/hlm-card.ts

@@ -0,0 +1,22 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { HlmCardConfig, injectHlmCardConfig } from './hlm-card.token';
+
+@Directive({
+	selector: '[hlmCard],hlm-card',
+	host: {
+		'data-slot': 'card',
+		'[attr.data-size]': 'size()',
+	},
+})
+export class HlmCard {
+	private readonly _defaultConfig = injectHlmCardConfig();
+	public readonly size = input<HlmCardConfig['size']>(this._defaultConfig.size);
+
+	constructor() {
+		classes(
+			() =>
+				'ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+		);
+	}
+}