@blueprint-platform/components 0.0.0-stage → 0.2.0

package/dist/generators/ui/files/shared/ui/calendar/src/lib/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 '@blueprint-platform/ui/button';
+import { HlmSelectImports } from '@blueprint-platform/ui/select';
+import { classes, hlm } from '@blueprint-platform/ui/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/dist/generators/ui/files/shared/ui/calendar/src/lib/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 '@blueprint-platform/ui/button';
+import { HlmSelectImports } from '@blueprint-platform/ui/select';
+import { classes, hlm } from '@blueprint-platform/ui/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/dist/generators/ui/files/shared/ui/calendar/src/lib/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 '@blueprint-platform/ui/button';
+import { HlmSelectImports } from '@blueprint-platform/ui/select';
+import { classes, hlm } from '@blueprint-platform/ui/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',
+    );
+  }
+}