@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,310 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,176 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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(),
-    );
-  }
-}