@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/date-range-picker/README.md

@@ -0,0 +1,148 @@
+# Date Range Picker
+
+Select a range of dates with presets, min/max constraints, and various display formats.
+
+## Components
+
+- `ScDateRangePicker` - Date range picker with calendar dropdown
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-date-range-picker [(value)]="dateRange" placeholder="Select date range" />
+```
+
+### With Presets
+
+```html
+<sc-date-range-picker [(value)]="dateRange" [presets]="presets" placeholder="Select date range" />
+```
+
+```typescript
+import { createDateRangePresets } from './date-range-picker';
+
+presets = createDateRangePresets();
+```
+
+### With Min/Max Dates
+
+```html
+<sc-date-range-picker [minDate]="minDate" [maxDate]="maxDate" placeholder="Select date range" />
+```
+
+## API
+
+### ScDateRangePicker
+
+| Input           | Type                | Default               | Description             |
+| --------------- | ------------------- | --------------------- | ----------------------- |
+| `class`         | `string`            | `''`                  | Additional CSS classes  |
+| `placeholder`   | `string`            | `'Select date range'` | Placeholder text        |
+| `disabled`      | `boolean`           | `false`               | Disable the picker      |
+| `minDate`       | `Date \| undefined` | `undefined`           | Minimum selectable date |
+| `maxDate`       | `Date \| undefined` | `undefined`           | Maximum selectable date |
+| `disabledDates` | `Date[]`            | `[]`                  | Specific disabled dates |
+| `presets`       | `DateRangePreset[]` | `[]`                  | Quick selection presets |
+| `showTwoMonths` | `boolean`           | `false`               | Show two calendars      |
+| `showClear`     | `boolean`           | `true`                | Show clear button       |
+| `dateFormat`    | `string`            | `'short'`             | Date display format     |
+
+| Output        | Type        | Description                 |
+| ------------- | ----------- | --------------------------- |
+| `value`       | `DateRange` | Two-way binding for range   |
+| `valueChange` | `DateRange` | Emits when range changes    |
+| `apply`       | `DateRange` | Emits when Apply is clicked |
+
+| Method       | Returns     | Description       |
+| ------------ | ----------- | ----------------- |
+| `focus()`    | `void`      | Focus the trigger |
+| `getRange()` | `DateRange` | Get current range |
+
+## DateRange Interface
+
+```typescript
+interface DateRange {
+  from: Date | undefined;
+  to: Date | undefined;
+}
+```
+
+## DateRangePreset Interface
+
+```typescript
+interface DateRangePreset {
+  label: string;
+  value: DateRange;
+}
+```
+
+## Date Formats
+
+| Format  | Example Output     | Description       |
+| ------- | ------------------ | ----------------- |
+| `short` | `Jan 15, 2024`     | Abbreviated month |
+| `long`  | `January 15, 2024` | Full month name   |
+| `iso`   | `2024-01-15`       | ISO 8601 format   |
+
+## Helper Function
+
+```typescript
+import { createDateRangePresets } from './date-range-picker';
+
+// Creates common presets:
+// - Today
+// - Yesterday
+// - Last 7 days
+// - Last 14 days
+// - Last 30 days
+// - This month
+// - Last month
+const presets = createDateRangePresets();
+```
+
+## Examples
+
+### Analytics Dashboard
+
+```html
+<div class="flex justify-between">
+  <h2>Analytics</h2>
+  <sc-date-range-picker [(value)]="dateRange" [presets]="presets" (apply)="fetchData()" />
+</div>
+```
+
+### Custom Presets
+
+```typescript
+const customPresets: DateRangePreset[] = [
+  {
+    label: 'This Week',
+    value: {
+      from: getStartOfWeek(),
+      to: new Date(),
+    },
+  },
+  {
+    label: 'This Quarter',
+    value: {
+      from: getStartOfQuarter(),
+      to: new Date(),
+    },
+  },
+];
+```
+
+### Booking System
+
+```html
+<sc-date-range-picker [(value)]="bookingDates" [minDate]="today" [disabledDates]="bookedDates" placeholder="Select check-in and check-out" />
+```
+
+## Accessibility
+
+- Trigger has `aria-expanded` and `aria-haspopup="dialog"`
+- Dropdown has `role="dialog"` and `aria-modal="true"`
+- Calendar is keyboard navigable
+- Clear button has descriptive `aria-label`

package/src/lib/components/date-range-picker/date-range-picker.ts

@@ -0,0 +1,348 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  input,
+  model,
+  output,
+  signal,
+  ViewEncapsulation,
+  viewChild,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScCalendar, DateRange } from '../calendar';
+
+export interface DateRangePreset {
+  label: string;
+  value: DateRange;
+}
+
+@Component({
+  selector: 'sc-date-range-picker',
+  exportAs: 'scDateRangePicker',
+  template: `
+    <div [class]="containerClass()">
+      <!-- Trigger Button -->
+      <button
+        #triggerEl
+        type="button"
+        [class]="triggerClass()"
+        [disabled]="disabled()"
+        (click)="toggleDropdown()"
+        [attr.aria-expanded]="dropdownOpen()"
+        [attr.aria-haspopup]="'dialog'"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="size-4 mr-2"
+        >
+          <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+          <line x1="16" x2="16" y1="2" y2="6" />
+          <line x1="8" x2="8" y1="2" y2="6" />
+          <line x1="3" x2="21" y1="10" y2="10" />
+        </svg>
+        <span class="flex-1 text-left">{{ displayValue() }}</span>
+        @if (value().from && showClear()) {
+          <button
+            type="button"
+            class="ml-2 hover:text-foreground"
+            (click)="clearSelection($event)"
+            aria-label="Clear selection"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="size-4"
+            >
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        }
+      </button>
+
+      <!-- Dropdown -->
+      @if (dropdownOpen()) {
+        <div [class]="dropdownClass()" role="dialog" aria-modal="true">
+          <div class="flex">
+            <!-- Presets Sidebar -->
+            @if (presets().length > 0) {
+              <div class="flex flex-col gap-1 border-r p-3 min-w-[140px]">
+                @for (preset of presets(); track preset.label) {
+                  <button
+                    type="button"
+                    [class]="presetClass(preset)"
+                    (click)="selectPreset(preset)"
+                  >
+                    {{ preset.label }}
+                  </button>
+                }
+              </div>
+            }
+
+            <!-- Calendar -->
+            <div class="p-3">
+              @if (showTwoMonths()) {
+                <div class="flex gap-4">
+                  <sc-calendar
+                    mode="range"
+                    [(selectedRange)]="value"
+                    [minDate]="minDate()"
+                    [maxDate]="maxDate()"
+                    [disabled]="disabledDates()"
+                  />
+                  <sc-calendar
+                    mode="range"
+                    [(selectedRange)]="value"
+                    [minDate]="minDate()"
+                    [maxDate]="maxDate()"
+                    [disabled]="disabledDates()"
+                  />
+                </div>
+              } @else {
+                <sc-calendar
+                  mode="range"
+                  [(selectedRange)]="value"
+                  [minDate]="minDate()"
+                  [maxDate]="maxDate()"
+                  [disabled]="disabledDates()"
+                />
+              }
+
+              <!-- Footer -->
+              <div class="flex items-center justify-between border-t pt-3 mt-3">
+                <div class="text-sm text-muted-foreground">
+                  @if (value().from && value().to) {
+                    {{ formatDate(value().from!) }} -
+                    {{ formatDate(value().to!) }}
+                  } @else if (value().from) {
+                    {{ formatDate(value().from!) }} - Select end date
+                  } @else {
+                    Select a date range
+                  }
+                </div>
+                <div class="flex gap-2">
+                  <button
+                    type="button"
+                    class="inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium border border-input hover:bg-accent"
+                    (click)="closeDropdown()"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="button"
+                    class="inline-flex h-8 items-center justify-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+                    [disabled]="!value().from || !value().to"
+                    (click)="applySelection()"
+                  >
+                    Apply
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+
+    @if (dropdownOpen()) {
+      <div class="fixed inset-0 z-40" (click)="closeDropdown()"></div>
+    }
+  `,
+  host: {
+    'data-slot': 'date-range-picker',
+  },
+  imports: [ScCalendar],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScDateRangePicker {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly placeholder = input<string>('Select date range');
+  readonly disabled = input<boolean>(false);
+  readonly minDate = input<Date | undefined>(undefined);
+  readonly maxDate = input<Date | undefined>(undefined);
+  readonly disabledDates = input<Date[]>([]);
+  readonly presets = input<DateRangePreset[]>([]);
+  readonly showTwoMonths = input<boolean>(false);
+  readonly showClear = input<boolean>(true);
+  readonly dateFormat = input<string>('short');
+
+  readonly value = model<DateRange>({ from: undefined, to: undefined });
+
+  readonly valueChange = output<DateRange>();
+  readonly apply = output<DateRange>();
+
+  protected readonly dropdownOpen = signal(false);
+
+  private readonly triggerEl =
+    viewChild<ElementRef<HTMLButtonElement>>('triggerEl');
+  private pendingValue: DateRange = { from: undefined, to: undefined };
+
+  protected readonly displayValue = computed(() => {
+    const range = this.value();
+    if (!range.from) return this.placeholder();
+    if (!range.to) return this.formatDate(range.from);
+    return `${this.formatDate(range.from)} - ${this.formatDate(range.to)}`;
+  });
+
+  protected readonly containerClass = computed(() =>
+    cn('relative inline-block', this.classInput()),
+  );
+
+  protected readonly triggerClass = computed(() =>
+    cn(
+      'flex h-9 w-full min-w-[240px] items-center rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm',
+      'hover:bg-accent/50',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'transition-colors',
+    ),
+  );
+
+  protected readonly dropdownClass = computed(() =>
+    cn(
+      'absolute left-0 top-full mt-1 z-50 rounded-md border bg-popover shadow-lg',
+      'animate-in fade-in-0 zoom-in-95',
+    ),
+  );
+
+  protected presetClass(preset: DateRangePreset): string {
+    const isActive = this.isPresetActive(preset);
+    return cn(
+      'text-left px-3 py-2 text-sm rounded-md',
+      'hover:bg-accent hover:text-accent-foreground',
+      isActive && 'bg-accent text-accent-foreground',
+    );
+  }
+
+  private isPresetActive(preset: DateRangePreset): boolean {
+    const current = this.value();
+    if (!current.from || !current.to || !preset.value.from || !preset.value.to)
+      return false;
+    return (
+      this.isSameDay(current.from, preset.value.from) &&
+      this.isSameDay(current.to, preset.value.to)
+    );
+  }
+
+  private isSameDay(a: Date, b: Date): boolean {
+    return (
+      a.getDate() === b.getDate() &&
+      a.getMonth() === b.getMonth() &&
+      a.getFullYear() === b.getFullYear()
+    );
+  }
+
+  toggleDropdown(): void {
+    if (this.dropdownOpen()) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  }
+
+  openDropdown(): void {
+    this.pendingValue = { ...this.value() };
+    this.dropdownOpen.set(true);
+  }
+
+  closeDropdown(): void {
+    this.value.set(this.pendingValue);
+    this.dropdownOpen.set(false);
+  }
+
+  selectPreset(preset: DateRangePreset): void {
+    this.value.set({ ...preset.value });
+  }
+
+  applySelection(): void {
+    const range = this.value();
+    if (range.from && range.to) {
+      this.pendingValue = { ...range };
+      this.valueChange.emit(range);
+      this.apply.emit(range);
+      this.dropdownOpen.set(false);
+    }
+  }
+
+  clearSelection(event: Event): void {
+    event.stopPropagation();
+    this.value.set({ from: undefined, to: undefined });
+    this.pendingValue = { from: undefined, to: undefined };
+    this.valueChange.emit({ from: undefined, to: undefined });
+  }
+
+  formatDate(date: Date): string {
+    const format = this.dateFormat();
+    if (format === 'short') {
+      return date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      });
+    }
+    if (format === 'long') {
+      return date.toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      });
+    }
+    if (format === 'iso') {
+      return date.toISOString().split('T')[0];
+    }
+    return date.toLocaleDateString();
+  }
+
+  focus(): void {
+    this.triggerEl()?.nativeElement.focus();
+  }
+
+  getRange(): DateRange {
+    return this.value();
+  }
+}
+
+// Helper function to create common presets
+export function createDateRangePresets(): DateRangePreset[] {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  const last7Days = new Date(today);
+  last7Days.setDate(last7Days.getDate() - 6);
+
+  const last14Days = new Date(today);
+  last14Days.setDate(last14Days.getDate() - 13);
+
+  const last30Days = new Date(today);
+  last30Days.setDate(last30Days.getDate() - 29);
+
+  const thisMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
+  const thisMonthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+
+  const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+  const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
+
+  return [
+    { label: 'Today', value: { from: today, to: today } },
+    { label: 'Yesterday', value: { from: yesterday, to: yesterday } },
+    { label: 'Last 7 days', value: { from: last7Days, to: today } },
+    { label: 'Last 14 days', value: { from: last14Days, to: today } },
+    { label: 'Last 30 days', value: { from: last30Days, to: today } },
+    { label: 'This month', value: { from: thisMonthStart, to: thisMonthEnd } },
+    { label: 'Last month', value: { from: lastMonthStart, to: lastMonthEnd } },
+  ];
+}

package/src/lib/components/date-range-picker/index.ts

@@ -0,0 +1,3 @@
+export { ScDateRangePicker, createDateRangePresets } from './date-range-picker';
+export type { DateRangePreset } from './date-range-picker';
+export type { DateRange } from '../calendar';