@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/calendar/calendar-day-view.ts

@@ -0,0 +1,310 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  viewChildren,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { Grid, GridRow, GridCell, GridCellWidget } from '@angular/aria/grid';
+import { cn } from '@semantic-components/ui';
+
+interface DayInfo {
+  date: Date;
+  isToday: boolean;
+  isOutsideMonth: boolean;
+  disabled: boolean;
+  selected: ReturnType<typeof signal<boolean>>;
+}
+
+@Component({
+  selector: 'sc-calendar-day-view',
+  imports: [Grid, GridRow, GridCell, GridCellWidget],
+  template: `
+    <table
+      ngGrid
+      tabindex="0"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="nowrap"
+      [enableSelection]="mode() !== 'multiple'"
+      selectionMode="explicit"
+      (keydown)="handleKeyDown($event)"
+    >
+      <thead>
+        <tr class="flex">
+          @for (day of weekDays(); track day) {
+            <th
+              scope="col"
+              class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground"
+            >
+              {{ day }}
+            </th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (week of weeks(); track $index) {
+          <tr ngGridRow class="mt-2 flex w-full">
+            @for (day of week; track day?.date?.getTime() ?? $index) {
+              @if (day) {
+                <td
+                  ngGridCell
+                  class="relative p-0 text-center text-sm"
+                  [disabled]="day.disabled || day.isOutsideMonth"
+                  [(selected)]="day.selected"
+                >
+                  <button
+                    ngGridCellWidget
+                    type="button"
+                    [class]="getDayClass(day)"
+                    [attr.aria-label]="day.date.toDateString()"
+                    [attr.data-today]="day.isToday || null"
+                    [attr.data-selected]="isSelected(day.date) || null"
+                    [attr.data-outside]="day.isOutsideMonth || null"
+                    [attr.data-disabled]="day.disabled || null"
+                    [attr.data-range-start]="isRangeStart(day.date) || null"
+                    [attr.data-range-end]="isRangeEnd(day.date) || null"
+                    [attr.data-range-middle]="isRangeMiddle(day.date) || null"
+                    [attr.data-day]="day.date.getDate()"
+                    (click)="handleDateClick(day.date)"
+                  >
+                    {{ day.date.getDate() }}
+                  </button>
+                </td>
+              } @else {
+                <td
+                  ngGridCell
+                  class="relative p-0 text-center text-sm"
+                  disabled
+                >
+                  <span class="size-9"></span>
+                </td>
+              }
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCalendarDayView {
+  private readonly _dayButtons = viewChildren(GridCellWidget);
+
+  readonly viewDate = input.required<Date>();
+  readonly mode = input.required<'single' | 'multiple' | 'range'>();
+  readonly selected = input<Date | undefined>(undefined);
+  readonly selectedDates = input<Date[]>([]);
+  readonly selectedRange = input<{
+    from: Date | undefined;
+    to: Date | undefined;
+  }>({
+    from: undefined,
+    to: undefined,
+  });
+  readonly disabled = input<Date[]>([]);
+  readonly minDate = input<Date | undefined>(undefined);
+  readonly maxDate = input<Date | undefined>(undefined);
+
+  readonly dateSelected = output<Date>();
+  readonly monthScrollUp = output<void>();
+  readonly monthScrollDown = output<void>();
+
+  readonly weekDays = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']);
+
+  protected readonly weeks = computed(() => {
+    const date = this.viewDate();
+    const year = date.getFullYear();
+    const month = date.getMonth();
+
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+
+    const days: (DayInfo | null)[][] = [];
+    let currentWeek: (DayInfo | null)[] = [];
+
+    // Add empty cells for days before the first day of the month
+    for (let i = 0; i < firstDay.getDay(); i++) {
+      const prevDate = new Date(year, month, -firstDay.getDay() + i + 1);
+      currentWeek.push(this.createDayInfo(prevDate, true));
+    }
+
+    // Add days of the month
+    for (let day = 1; day <= lastDay.getDate(); day++) {
+      const currentDate = new Date(year, month, day);
+      currentWeek.push(this.createDayInfo(currentDate, false));
+
+      if (currentWeek.length === 7) {
+        days.push(currentWeek);
+        currentWeek = [];
+      }
+    }
+
+    // Add days from next month to fill the last week
+    if (currentWeek.length > 0) {
+      let nextDay = 1;
+      while (currentWeek.length < 7) {
+        const nextDate = new Date(year, month + 1, nextDay++);
+        currentWeek.push(this.createDayInfo(nextDate, true));
+      }
+      days.push(currentWeek);
+    }
+
+    return days;
+  });
+
+  private createDayInfo(date: Date, isOutsideMonth: boolean): DayInfo {
+    const today = new Date();
+    const isToday =
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear();
+
+    const disabled = this.isDateDisabled(date);
+
+    return {
+      date,
+      isToday,
+      isOutsideMonth,
+      disabled,
+      selected: signal(this.isSelected(date)),
+    };
+  }
+
+  private isDateDisabled(date: Date): boolean {
+    const disabledDates = this.disabled();
+    const min = this.minDate();
+    const max = this.maxDate();
+
+    if (min && date < min) return true;
+    if (max && date > max) return true;
+
+    return disabledDates.some(
+      (d) =>
+        d.getDate() === date.getDate() &&
+        d.getMonth() === date.getMonth() &&
+        d.getFullYear() === date.getFullYear(),
+    );
+  }
+
+  protected isSelected(date: Date): boolean {
+    const mode = this.mode();
+
+    if (mode === 'single') {
+      const selected = this.selected();
+      return selected ? this.isSameDay(date, selected) : false;
+    }
+
+    if (mode === 'multiple') {
+      return this.selectedDates().some((d) => this.isSameDay(date, d));
+    }
+
+    if (mode === 'range') {
+      const range = this.selectedRange();
+      if (range.from && this.isSameDay(date, range.from)) return true;
+      if (range.to && this.isSameDay(date, range.to)) return true;
+      if (range.from && range.to && date > range.from && date < range.to)
+        return true;
+    }
+
+    return false;
+  }
+
+  protected isRangeStart(date: Date): boolean {
+    if (this.mode() !== 'range') return false;
+    const range = this.selectedRange();
+    return range.from ? this.isSameDay(date, range.from) : false;
+  }
+
+  protected isRangeEnd(date: Date): boolean {
+    if (this.mode() !== 'range') return false;
+    const range = this.selectedRange();
+    return range.to ? this.isSameDay(date, range.to) : false;
+  }
+
+  protected isRangeMiddle(date: Date): boolean {
+    if (this.mode() !== 'range') return false;
+    const range = this.selectedRange();
+    if (!range.from || !range.to) return false;
+    return date > range.from && date < range.to;
+  }
+
+  private isSameDay(a: Date, b: Date): boolean {
+    return (
+      a.getDate() === b.getDate() &&
+      a.getMonth() === b.getMonth() &&
+      a.getFullYear() === b.getFullYear()
+    );
+  }
+
+  protected getDayClass(day: DayInfo): string {
+    const isSelectedDay = this.isSelected(day.date);
+    const isRangeMiddleDay = this.isRangeMiddle(day.date);
+
+    return cn(
+      'inline-flex size-9 items-center justify-center rounded-md text-sm font-normal',
+      'ring-offset-background transition-colors',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'hover:bg-accent hover:text-accent-foreground',
+      'disabled:pointer-events-none disabled:opacity-50',
+      day.isToday && !isSelectedDay && 'bg-accent text-accent-foreground',
+      isSelectedDay &&
+        !isRangeMiddleDay &&
+        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+      isRangeMiddleDay && 'bg-accent text-accent-foreground rounded-none',
+      day.isOutsideMonth && 'text-muted-foreground opacity-50',
+      day.disabled && 'text-muted-foreground opacity-50',
+    );
+  }
+
+  protected handleDateClick(date: Date): void {
+    this.dateSelected.emit(date);
+  }
+
+  protected handleKeyDown(event: KeyboardEvent): void {
+    const day = Number((event.target as Element).getAttribute('data-day'));
+    if (!day) return;
+
+    const viewDate = this.viewDate();
+    const daysInMonth = new Date(
+      viewDate.getFullYear(),
+      viewDate.getMonth() + 1,
+      0,
+    ).getDate();
+
+    // Only handle edge cases where we need to scroll to prev/next month
+    if (day > 7 && day <= daysInMonth - 7) return;
+
+    const arrowLeft = event.key === 'ArrowLeft';
+    const arrowRight = event.key === 'ArrowRight';
+    const arrowUp = event.key === 'ArrowUp';
+    const arrowDown = event.key === 'ArrowDown';
+
+    if ((day === 1 && arrowLeft) || (day <= 7 && arrowUp)) {
+      this.scrollUp();
+    }
+
+    if (
+      (day === daysInMonth && arrowRight) ||
+      (day > daysInMonth - 7 && arrowDown)
+    ) {
+      this.scrollDown();
+    }
+  }
+
+  private scrollDown(): void {
+    this.monthScrollDown.emit();
+    setTimeout(() => this._dayButtons()[0]?.element.focus());
+  }
+
+  private scrollUp(): void {
+    this.monthScrollUp.emit();
+    setTimeout(() =>
+      this._dayButtons()[this._dayButtons().length - 1]?.element.focus(),
+    );
+  }
+}

package/src/lib/components/calendar/calendar-header.ts

@@ -0,0 +1,58 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  SiChevronLeftIcon,
+  SiChevronRightIcon,
+} from '@semantic-icons/lucide-icons';
+
+@Component({
+  selector: 'sc-calendar-header',
+  imports: [SiChevronLeftIcon, SiChevronRightIcon],
+  template: `
+    <div class="relative flex items-center justify-center pt-1">
+      <button
+        type="button"
+        class="absolute left-1 inline-flex size-7 items-center justify-center rounded-md border border-input bg-transparent p-0 opacity-50 hover:opacity-100 transition-opacity"
+        (click)="previous.emit()"
+        [attr.aria-label]="previousLabel()"
+      >
+        <svg si-chevron-left-icon class="size-4"></svg>
+      </button>
+      <button
+        type="button"
+        class="text-sm font-medium hover:text-primary transition-colors px-3 py-1 rounded-md hover:bg-accent"
+        (click)="headerClick.emit()"
+        [attr.aria-label]="headerLabel()"
+        [attr.aria-expanded]="expanded()"
+      >
+        {{ label() }}
+      </button>
+      <button
+        type="button"
+        class="absolute right-1 inline-flex size-7 items-center justify-center rounded-md border border-input bg-transparent p-0 opacity-50 hover:opacity-100 transition-opacity"
+        (click)="next.emit()"
+        [attr.aria-label]="nextLabel()"
+      >
+        <svg si-chevron-right-icon class="size-4"></svg>
+      </button>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCalendarHeader {
+  readonly label = input.required<string>();
+  readonly previousLabel = input.required<string>();
+  readonly nextLabel = input.required<string>();
+  readonly headerLabel = input.required<string>();
+  readonly expanded = input<boolean>(false);
+
+  readonly previous = output<void>();
+  readonly next = output<void>();
+  readonly headerClick = output<void>();
+}

package/src/lib/components/calendar/calendar-month-view.ts

@@ -0,0 +1,176 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  signal,
+  viewChildren,
+  ViewEncapsulation,
+} from '@angular/core';
+import { Grid, GridRow, GridCell, GridCellWidget } from '@angular/aria/grid';
+import { cn } from '@semantic-components/ui';
+
+interface MonthInfo {
+  label: string;
+  value: number;
+  isCurrentMonth: boolean;
+  isSelected: boolean;
+  selected: ReturnType<typeof signal<boolean>>;
+}
+
+@Component({
+  selector: 'sc-calendar-month-view',
+  imports: [Grid, GridRow, GridCell, GridCellWidget],
+  template: `
+    <table
+      ngGrid
+      tabindex="0"
+      aria-label="Select month"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="continuous"
+      [enableSelection]="true"
+      selectionMode="explicit"
+      (keydown)="handleGridKeyDown($event)"
+    >
+      <tbody>
+        @for (row of monthRows(); track $index) {
+          <tr ngGridRow>
+            @for (month of row; track month.value) {
+              <td
+                ngGridCell
+                class="p-1 text-center"
+                [(selected)]="month.selected"
+              >
+                <button
+                  ngGridCellWidget
+                  type="button"
+                  [class]="getMonthButtonClass(month)"
+                  (click)="handleMonthClick(month.value)"
+                  (keydown)="handleKeyDown($event, month.value)"
+                  [attr.aria-current]="month.isCurrentMonth ? 'date' : null"
+                  [attr.aria-label]="month.label"
+                  [attr.data-month]="month.value"
+                >
+                  {{ month.label }}
+                </button>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCalendarMonthView {
+  private readonly _monthButtons = viewChildren(GridCellWidget);
+
+  readonly year = input.required<number>();
+  readonly selectedMonth = input.required<number>();
+  readonly monthSelected = output<number>();
+  readonly yearScrollUp = output<void>();
+  readonly yearScrollDown = output<void>();
+
+  protected readonly months = computed((): MonthInfo[] => {
+    const monthNames = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+    const currentMonth = this.selectedMonth();
+    const year = this.year();
+    const today = new Date();
+
+    return monthNames.map((name, index) => ({
+      label: name,
+      value: index,
+      isCurrentMonth:
+        index === today.getMonth() && year === today.getFullYear(),
+      isSelected: index === currentMonth,
+      selected: signal(index === currentMonth),
+    }));
+  });
+
+  protected readonly monthRows = computed((): MonthInfo[][] => {
+    const months = this.months();
+    const rows: MonthInfo[][] = [];
+    for (let i = 0; i < months.length; i += 3) {
+      rows.push(months.slice(i, i + 3));
+    }
+    return rows;
+  });
+
+  protected getMonthButtonClass(month: MonthInfo): string {
+    return cn(
+      'inline-flex w-full h-10 items-center justify-center rounded-md text-sm font-normal',
+      'ring-offset-background transition-colors',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'hover:bg-accent hover:text-accent-foreground',
+      month.isCurrentMonth &&
+        !month.isSelected &&
+        'bg-accent text-accent-foreground',
+      month.isSelected &&
+        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+    );
+  }
+
+  protected handleMonthClick(month: number): void {
+    this.monthSelected.emit(month);
+  }
+
+  protected handleKeyDown(event: KeyboardEvent, month: number): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.monthSelected.emit(month);
+    }
+  }
+
+  protected handleGridKeyDown(event: KeyboardEvent): void {
+    const monthAttr = (event.target as Element).getAttribute('data-month');
+    if (!monthAttr) return;
+
+    const month = Number(monthAttr);
+
+    // Only handle edge cases where we need to scroll to prev/next year
+    if (month > 2 && month < 9) return; // Middle months, let grid handle it
+
+    const arrowLeft = event.key === 'ArrowLeft';
+    const arrowRight = event.key === 'ArrowRight';
+    const arrowUp = event.key === 'ArrowUp';
+    const arrowDown = event.key === 'ArrowDown';
+
+    // First row (Jan, Feb, Mar) + arrow up, or January + arrow left
+    if ((month === 0 && arrowLeft) || (month <= 2 && arrowUp)) {
+      this.scrollUp();
+    }
+
+    // Last row (Oct, Nov, Dec) + arrow down, or December + arrow right
+    if ((month === 11 && arrowRight) || (month >= 9 && arrowDown)) {
+      this.scrollDown();
+    }
+  }
+
+  private scrollDown(): void {
+    this.yearScrollDown.emit();
+    setTimeout(() => this._monthButtons()[0]?.element.focus());
+  }
+
+  private scrollUp(): void {
+    this.yearScrollUp.emit();
+    setTimeout(() =>
+      this._monthButtons()[this._monthButtons().length - 1]?.element.focus(),
+    );
+  }
+}

package/src/lib/components/calendar/calendar-year-view.ts

@@ -0,0 +1,167 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  signal,
+  viewChildren,
+  ViewEncapsulation,
+} from '@angular/core';
+import { Grid, GridRow, GridCell, GridCellWidget } from '@angular/aria/grid';
+import { cn } from '@semantic-components/ui';
+
+interface YearInfo {
+  label: string;
+  value: number;
+  isCurrentYear: boolean;
+  isSelected: boolean;
+  selected: ReturnType<typeof signal<boolean>>;
+}
+
+@Component({
+  selector: 'sc-calendar-year-view',
+  imports: [Grid, GridRow, GridCell, GridCellWidget],
+  template: `
+    <table
+      ngGrid
+      tabindex="0"
+      aria-label="Select year"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="continuous"
+      [enableSelection]="true"
+      selectionMode="explicit"
+      (keydown)="handleGridKeyDown($event)"
+    >
+      <tbody>
+        @for (row of yearRows(); track $index) {
+          <tr ngGridRow>
+            @for (year of row; track year.value) {
+              <td
+                ngGridCell
+                class="p-1 text-center"
+                [(selected)]="year.selected"
+              >
+                <button
+                  ngGridCellWidget
+                  type="button"
+                  [class]="getYearButtonClass(year)"
+                  (click)="handleYearClick(year.value)"
+                  (keydown)="handleKeyDown($event, year.value)"
+                  [attr.aria-current]="year.isCurrentYear ? 'date' : null"
+                  [attr.aria-label]="year.label"
+                  [attr.data-year]="year.value"
+                >
+                  {{ year.label }}
+                </button>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCalendarYearView {
+  private readonly _yearButtons = viewChildren(GridCellWidget);
+
+  readonly decadeStart = input.required<number>();
+  readonly selectedYear = input.required<number>();
+  readonly yearSelected = output<number>();
+  readonly decadeScrollUp = output<void>();
+  readonly decadeScrollDown = output<void>();
+
+  protected readonly years = computed((): YearInfo[] => {
+    const decadeStart = this.decadeStart();
+    const currentYear = new Date().getFullYear();
+    const selectedYear = this.selectedYear();
+
+    return Array.from({ length: 12 }, (_, i) => {
+      const year = decadeStart + i;
+      return {
+        label: year.toString(),
+        value: year,
+        isCurrentYear: year === currentYear,
+        isSelected: year === selectedYear,
+        selected: signal(year === selectedYear),
+      };
+    });
+  });
+
+  protected readonly yearRows = computed((): YearInfo[][] => {
+    const years = this.years();
+    const rows: YearInfo[][] = [];
+    for (let i = 0; i < years.length; i += 3) {
+      rows.push(years.slice(i, i + 3));
+    }
+    return rows;
+  });
+
+  protected getYearButtonClass(year: YearInfo): string {
+    return cn(
+      'inline-flex w-full h-10 items-center justify-center rounded-md text-sm font-normal',
+      'ring-offset-background transition-colors',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'hover:bg-accent hover:text-accent-foreground',
+      year.isCurrentYear &&
+        !year.isSelected &&
+        'bg-accent text-accent-foreground',
+      year.isSelected &&
+        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+    );
+  }
+
+  protected handleYearClick(year: number): void {
+    this.yearSelected.emit(year);
+  }
+
+  protected handleKeyDown(event: KeyboardEvent, year: number): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.yearSelected.emit(year);
+    }
+  }
+
+  protected handleGridKeyDown(event: KeyboardEvent): void {
+    const yearAttr = (event.target as Element).getAttribute('data-year');
+    if (!yearAttr) return;
+
+    const year = Number(yearAttr);
+    const decadeStart = this.decadeStart();
+    const decadeEnd = decadeStart + 11;
+
+    // Only handle edge cases where we need to scroll to prev/next decade
+    const yearIndex = year - decadeStart;
+    if (yearIndex > 2 && yearIndex < 9) return; // Middle years, let grid handle it
+
+    const arrowLeft = event.key === 'ArrowLeft';
+    const arrowRight = event.key === 'ArrowRight';
+    const arrowUp = event.key === 'ArrowUp';
+    const arrowDown = event.key === 'ArrowDown';
+
+    // First row (first 3 years) + arrow up, or first year + arrow left
+    if ((year === decadeStart && arrowLeft) || (yearIndex <= 2 && arrowUp)) {
+      this.scrollUp();
+    }
+
+    // Last row (last 3 years) + arrow down, or last year + arrow right
+    if ((year === decadeEnd && arrowRight) || (yearIndex >= 9 && arrowDown)) {
+      this.scrollDown();
+    }
+  }
+
+  private scrollDown(): void {
+    this.decadeScrollDown.emit();
+    setTimeout(() => this._yearButtons()[0]?.element.focus());
+  }
+
+  private scrollUp(): void {
+    this.decadeScrollUp.emit();
+    setTimeout(() =>
+      this._yearButtons()[this._yearButtons().length - 1]?.element.focus(),
+    );
+  }
+}