@salesforce/templates 66.13.7 → 66.13.8

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/skeleton/skeleton.ts

@@ -4,21 +4,17 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSkeleton } from '@spartan-ng/styles/skeleton';
 
-/**
- * Loading skeleton — a pulsing block sized by host `class` utilities (e.g.
- * `class="h-4 w-32"`); it has no intrinsic size, so always set width/height.
- * `aria-hidden`, so announce loading via the container's `aria-busy`.
- */
 @Component({
 	selector: 'app-skeleton',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './skeleton.html',
-	styleUrl: './skeleton.scss',
+	hostDirectives: [HlmSkeleton],
 	host: {
-		'data-slot': 'skeleton',
 		'aria-hidden': 'true',
-		class: 'bg-accent rounded-md',
 	},
+	template: '<ng-content />',
 })
 export class SkeletonComponent {}
+
+export const SkeletonImports = [SkeletonComponent] as const;

package/lib/templates/uiBundles/angularbasic/src/app/components/ui/spinner/spinner.ts

@@ -4,32 +4,25 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { MatProgressSpinnerModule, ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { HlmSpinnerImports } from '@spartan-ng/styles/spinner';
+import { classes } from '@spartan-ng/styles/utils';
 
-/**
- * Thin wrapper over Material's `mat-progress-spinner`. Defaults to an
- * indeterminate 24px spinner. `ariaLabel` names the `role="progressbar"`.
- */
 @Component({
 	selector: 'app-spinner',
+	imports: [HlmSpinnerImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MatProgressSpinnerModule],
-	template: `
-		<mat-progress-spinner
-			[mode]="mode()"
-			[diameter]="diameter()"
-			[value]="value()"
-			[attr.aria-label]="ariaLabel()"
-		/>
-	`,
+	host: {
+		role: 'status',
+		'[attr.aria-label]': 'ariaLabel()',
+	},
+	template: `<hlm-spinner />`,
 })
 export class SpinnerComponent {
-	readonly diameter = input<number>(24);
-	readonly mode = input<ProgressSpinnerMode>('indeterminate');
+	public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
 
-	/** Progress value (0–100) used only when `mode` is `determinate`. */
-	readonly value = input<number>(0);
-
-	/** Accessible name announced by assistive tech. */
-	readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+	constructor() {
+		classes(() => 'text-[length:--spacing(4)]');
+	}
 }
+
+export const SpinnerImports = [SpinnerComponent] as const;

package/lib/templates/uiBundles/angularbasic/src/app/shared/alert/hlm-alert-action.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertAction]',
+	host: {
+		'data-slot': 'alert-action',
+	},
+})
+export class HlmAlertAction {
+	constructor() {
+		classes(() => 'absolute end-2 top-2');
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/alert/hlm-alert-description.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertDescription]',
+	host: {
+		'data-slot': 'alert-description',
+	},
+})
+export class HlmAlertDescription {
+	constructor() {
+		classes(
+			() =>
+				'text-sm text-balance md:text-pretty group-has-[>ng-icon]/alert:col-start-2 [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		);
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/alert/hlm-alert-title.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertTitle]',
+	host: {
+		'data-slot': 'alert-title',
+	},
+})
+export class HlmAlertTitle {
+	constructor() {
+		classes(
+			() =>
+				'font-medium group-has-[>ng-icon]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		);
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/alert/hlm-alert.ts

@@ -0,0 +1,35 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const alertVariants = cva(
+	'relative w-full grid gap-0.5 items-start rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:pe-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0.5 *:[ng-icon]:text-current *:[ng-icon:not([class*=text-])]:text-[length:--spacing(4)] group/alert',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive: 'bg-card text-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;
+
+@Directive({
+	selector: 'hlm-alert,[hlmAlert]',
+	host: {
+		'data-slot': 'alert',
+		role: 'alert',
+	},
+})
+export class HlmAlert {
+	public readonly variant = input<AlertVariants['variant']>('default');
+
+	constructor() {
+		classes(() => alertVariants({ variant: this.variant() }));
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/alert/index.ts

@@ -0,0 +1,16 @@
+import { HlmAlert } from './hlm-alert';
+import { HlmAlertAction } from './hlm-alert-action';
+import { HlmAlertDescription } from './hlm-alert-description';
+import { HlmAlertTitle } from './hlm-alert-title';
+
+export * from './hlm-alert';
+export * from './hlm-alert-action';
+export * from './hlm-alert-description';
+export * from './hlm-alert-title';
+
+export const HlmAlertImports = [
+	HlmAlert,
+	HlmAlertAction,
+	HlmAlertDescription,
+	HlmAlertTitle,
+] as const;

package/lib/templates/uiBundles/angularbasic/src/app/shared/button/hlm-button.token.ts

@@ -0,0 +1,22 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import type { ButtonVariants } from './hlm-button';
+
+export interface BrnButtonConfig {
+	variant: ButtonVariants['variant'];
+	size: ButtonVariants['size'];
+}
+
+const defaultConfig: BrnButtonConfig = {
+	variant: 'default',
+	size: 'default',
+};
+
+const BrnButtonConfigToken = new InjectionToken<BrnButtonConfig>('BrnButtonConfig');
+
+export function provideBrnButtonConfig(config: Partial<BrnButtonConfig>): ValueProvider {
+	return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectBrnButtonConfig(): BrnButtonConfig {
+	return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig;
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/button/hlm-button.ts

@@ -0,0 +1,72 @@
+import { Directive, input, signal } from '@angular/core';
+import { BrnButton } from '@spartan-ng/brain/button';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { injectBrnButtonConfig } from './hlm-button.token';
+
+export const buttonVariants = cva(
+	"focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				outline:
+					'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost:
+					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				destructive:
+					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default:
+					'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)]",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3',
+				icon: 'size-8',
+				'icon-xs':
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)]",
+				'icon-sm':
+					'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+@Directive({
+	selector: 'button[hlmBtn], a[hlmBtn]',
+	exportAs: 'hlmBtn',
+	hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
+	host: { 'data-slot': 'button' },
+})
+export class HlmButton {
+	private readonly _config = injectBrnButtonConfig();
+
+	private readonly _additionalClasses = signal<ClassValue>('');
+
+	public readonly variant = input<ButtonVariants['variant']>(this._config.variant);
+
+	public readonly size = input<ButtonVariants['size']>(this._config.size);
+
+	constructor() {
+		classes(() => [
+			buttonVariants({ variant: this.variant(), size: this.size() }),
+			this._additionalClasses(),
+		]);
+	}
+
+	setClass(classes: string): void {
+		this._additionalClasses.set(classes);
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/button/index.ts

@@ -0,0 +1,6 @@
+import { HlmButton } from './hlm-button';
+
+export * from './hlm-button';
+export * from './hlm-button.token';
+
+export const HlmButtonImports = [HlmButton] as const;

package/lib/templates/uiBundles/angularbasic/src/app/shared/calendar/hlm-calendar-multi.ts

@@ -0,0 +1,195 @@
+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,
+	BrnCalendarMulti,
+	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-multi',
+	imports: [BrnCalendarImports, NgIcon, NgTemplateOutlet, HlmSelectImports, HlmButtonImports],
+	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [
+		{
+			directive: BrnCalendarMulti,
+			inputs: [
+				'min',
+				'max',
+				'minSelection',
+				'maxSelection',
+				'disabled',
+				'date',
+				'dateDisabled',
+				'weekStartsOn',
+				'highlightDays',
+				'defaultFocusedDate',
+			],
+			outputs: ['dateChange'],
+		},
+	],
+	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" 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 HlmCalendarMulti<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(BrnCalendarMulti);
+
+	/** 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/lib/templates/uiBundles/angularbasic/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',
+		);
+	}
+}