@redvars/peacock 3.5.0 → 3.6.0

package/src/calendar/calendar.ts

@@ -0,0 +1,298 @@
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { addDays, addMonths, formatDate } from './utils.js';
+import { CalendarEvent } from './calendar-event.js';
+import type { CalendarViewType, EventType } from './types.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './calendar.scss';
+
+/**
+ * @label Calendar
+ * @tag wc-calendar
+ * @rawTag calendar
+ * @summary A Material 3 inspired full calendar component for displaying events in day, week, or month views.
+ *
+ * @cssprop --calendar-border-color - Border color used throughout the calendar grid.
+ * @cssprop --calendar-event-bg-color - Background color for calendar events.
+ * @cssprop --calendar-event-border-color - Left border color for calendar events.
+ *
+ * @fires {CustomEvent} event-click - Dispatched when a calendar event is clicked. Detail contains `{ event }`.
+ * @fires {CustomEvent} view-change - Dispatched when the calendar view changes. Detail contains `{ view }`.
+ * @fires {CustomEvent} date-change - Dispatched when the context date changes. Detail contains `{ date }`.
+ *
+ * @example
+ * ```html
+ * <wc-calendar view="week" style="height: 600px"></wc-calendar>
+ * ```
+ */
+@IndividualComponent
+export class Calendar extends LitElement {
+  static styles = [styles];
+
+  /**
+   * Calendar events array.
+   */
+  @property({ type: Array })
+  events: EventType[] = [];
+
+  /**
+   * Available views configuration.
+   */
+  @property({ type: Array, attribute: 'available-views' })
+  availableViews: CalendarViewType[] = [
+    { label: 'Day', value: 'day', type: 'column', days: 1 },
+    { label: 'Week', value: 'week', type: 'column', days: 7 },
+    { label: 'Month', value: 'month', type: 'month' },
+  ];
+
+  /**
+   * Current calendar view.
+   */
+  @property({ type: String, reflect: true })
+  view: string = 'week';
+
+  /**
+   * Whether events are clickable.
+   */
+  @property({ type: Boolean, attribute: 'event-clickable' })
+  eventClickable: boolean = true;
+
+  /**
+   * Show loading state.
+   */
+  @property({ type: Boolean, attribute: 'show-loader' })
+  showLoader: boolean = false;
+
+  /**
+   * Timezone string (e.g. 'America/New_York').
+   */
+  @property({ type: String })
+  timezone: string = '';
+
+  /**
+   * The context date for the calendar view.
+   */
+  @property({ type: Object, attribute: false })
+  contextDate: Date | null = null;
+
+  @state()
+  private _currentTime: Date = new Date();
+
+  @state()
+  private _currentView: CalendarViewType | undefined;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    if (this.timezone) {
+      this._currentTime = new Date(
+        new Date().toLocaleString('en', { timeZone: this.timezone }),
+      );
+    } else {
+      this._currentTime = new Date();
+    }
+    if (!this.contextDate) {
+      this.contextDate = this._currentTime;
+    }
+  }
+
+  override willUpdate(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('view') || changedProperties.has('availableViews')) {
+      this._currentView = this.availableViews.find(v => v.value === this.view);
+    }
+  }
+
+  private _onColumnViewDateClick(evt: CustomEvent) {
+    evt.stopPropagation();
+    this.view = 'day';
+    this.contextDate = evt.detail.date;
+    this.dispatchEvent(
+      new CustomEvent('view-change', {
+        detail: { view: this.view },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    this.dispatchEvent(
+      new CustomEvent('date-change', {
+        detail: { date: this.contextDate },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _onEventClick(evt: CustomEvent) {
+    evt.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent('event-click', {
+        detail: { event: evt.detail.event },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  previous() {
+    if (!this._currentView) return;
+    if (this._currentView.days) {
+      this.contextDate = addDays(
+        this.contextDate!,
+        -1 * this._currentView.days,
+      );
+    } else if (this._currentView.type === 'month') {
+      this.contextDate = addMonths(this.contextDate!, -1);
+    }
+    this.dispatchEvent(
+      new CustomEvent('date-change', {
+        detail: { date: this.contextDate },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  next() {
+    if (!this._currentView) return;
+    if (this._currentView.days) {
+      this.contextDate = addDays(
+        this.contextDate!,
+        this._currentView.days,
+      );
+    } else if (this._currentView.type === 'month') {
+      this.contextDate = addMonths(this.contextDate!, 1);
+    }
+    this.dispatchEvent(
+      new CustomEvent('date-change', {
+        detail: { date: this.contextDate },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _goToToday() {
+    this.contextDate = this._currentTime;
+    this.dispatchEvent(
+      new CustomEvent('date-change', {
+        detail: { date: this.contextDate },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _onViewSegmentChange(evt: CustomEvent<{ value: string | null }>) {
+    if (!evt.detail.value) return;
+    this.view = evt.detail.value;
+    this.dispatchEvent(
+      new CustomEvent('view-change', {
+        detail: { view: this.view },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _renderHeader() {
+    return html`
+      <div class="calendar-header-classic">
+        <div class="header-left">
+          <wc-button
+            variant="outlined"
+            size="sm"
+            class="color-secondary"
+            @click=${() => this._goToToday()}
+          >
+            Today
+          </wc-button>
+          <wc-icon-button
+            variant="text"
+            size="sm"
+            class="color-secondary"
+            @click=${() => this.previous()}
+          >
+            <wc-icon name="chevron_left"></wc-icon>
+          </wc-icon-button>
+          <wc-icon-button
+            variant="text"
+            size="sm"
+            class="color-secondary"
+            @click=${() => this.next()}
+          >
+            <wc-icon name="chevron_right"></wc-icon>
+          </wc-icon-button>
+          <div class="title">
+            ${this.contextDate
+              ? formatDate(this.contextDate, 'MMMM d, yyyy')
+              : ''}
+          </div>
+        </div>
+        <div class="header-right">
+          <wc-segmented-button-group @change=${this._onViewSegmentChange}>
+            ${this.availableViews.map(
+              v =>
+                html`<wc-segmented-button
+                  .value=${v.value}
+                  ?selected=${this.view === v.value}
+                >
+                  ${v.label}
+                </wc-segmented-button>`,
+            )}
+          </wc-segmented-button-group>
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderCalendarView() {
+    if (!this._currentView) return html`<div>Invalid view</div>`;
+
+    const calEvents = this.events.map(
+      event =>
+        new CalendarEvent(
+          event.start,
+          event.end,
+          event.title,
+          event.color,
+          event,
+        ),
+    );
+
+    if (this._currentView.type === 'column') {
+      return html`
+        <wc-calendar-column-view
+          .events=${calEvents}
+          .view=${this._currentView.value}
+          .days=${this._currentView.days || 7}
+          .currentTime=${this._currentTime}
+          .contextDate=${this.contextDate}
+          ?event-clickable=${this.eventClickable}
+          @column-view-date-click=${this._onColumnViewDateClick}
+          @column-view-event-click=${this._onEventClick}
+        ></wc-calendar-column-view>
+      `;
+    } else if (this._currentView.type === 'month') {
+      return html`
+        <wc-calendar-month-view
+          .events=${calEvents}
+          .currentTime=${this._currentTime}
+          .contextDate=${this.contextDate}
+          ?event-clickable=${this.eventClickable}
+          @month-view-event-click=${this._onEventClick}
+        ></wc-calendar-month-view>
+      `;
+    }
+    return nothing;
+  }
+
+  render() {
+    return html`
+      <div class="calendar">
+        <div class="calendar-header">${this._renderHeader()}</div>
+        <div class="calendar-body">
+          <div class="view-container">${this._renderCalendarView()}</div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/calendar/event-manager.ts

@@ -0,0 +1,117 @@
+import { CalendarEvent } from './calendar-event.js';
+
+export class ColumnEvent extends CalendarEvent {
+  width: number = 1;
+
+  constructor(event: CalendarEvent) {
+    super(event.start, event.end, event.title, event.color, event.data);
+  }
+}
+
+export class EventManager {
+  #events: ColumnEvent[] = [];
+  columns: ColumnEvent[][] = [];
+
+  addEvents(events: CalendarEvent[]): void {
+    events.forEach(event => {
+      this.#events.push(new ColumnEvent(event));
+    });
+  }
+
+  process(): void {
+    this.columns = [];
+    let events = this.#events.sort((a, b) => {
+      return a.start.valueOf() - b.start.valueOf() || b.length() - a.length();
+    });
+
+    let oldLength: number | null = null;
+    /* Bucketing: group non-overlapping events into columns */
+    while (events.length) {
+      if (oldLength === events.length) {
+        throw new Error(
+          'Events not processed in previous run, breaking infinite loop',
+        );
+      }
+      oldLength = events.length;
+
+      const column: ColumnEvent[] = [];
+      for (let i = 0; i < events.length; i++) {
+        if (i === 0) {
+          column.push(events[i]);
+        } else if (events[i].start.valueOf() >= column[column.length - 1].end.valueOf()) {
+          column.push(events[i]);
+        }
+      }
+      this.columns.push(column);
+      events = events.filter(e => !column.find(ce => ce.gid === e.gid));
+    }
+
+    /* Calculate widths for events that span multiple columns */
+    for (let i = 0; i < this.columns.length - 1; i++) {
+      this.columns[i].forEach(event => {
+        for (let j = i + 1; j < this.columns.length; j++) {
+          if (this.columns[j].find(colEvent => event.isOverlapping(colEvent))) {
+            break;
+          }
+          event.width++;
+        }
+      });
+    }
+  }
+}
+
+export class MonthEventManager {
+  #events: ColumnEvent[] = [];
+  columns: ColumnEvent[][] = [];
+
+  addEvents(events: CalendarEvent[]): void {
+    events.forEach(event => {
+      this.#events.push(new ColumnEvent(event));
+    });
+  }
+
+  process(): void {
+    this.columns = [];
+    let events = this.#events.sort((a, b) => {
+      return a.start.valueOf() - b.start.valueOf() || b.length() - a.length();
+    });
+
+    let oldLength: number | null = null;
+    while (events.length) {
+      if (oldLength === events.length) {
+        throw new Error(
+          'Events not processed in previous run, breaking infinite loop',
+        );
+      }
+      oldLength = events.length;
+
+      const column: ColumnEvent[] = [];
+      for (let i = 0; i < events.length; i++) {
+        if (i === 0) {
+          column.push(events[i]);
+        } else {
+          const lastEnd = new Date(column[column.length - 1].end);
+          lastEnd.setHours(23, 59, 59, 999);
+          const nextStart = new Date(events[i].start);
+          nextStart.setHours(0, 0, 0, 0);
+          if (nextStart.valueOf() > lastEnd.valueOf()) {
+            column.push(events[i]);
+          }
+        }
+      }
+      this.columns.push(column);
+      events = events.filter(e => !column.find(ce => ce.gid === e.gid));
+    }
+
+    for (let i = 0; i < this.columns.length - 1; i++) {
+      this.columns[i].forEach(event => {
+        for (let j = i + 1; j < this.columns.length; j++) {
+          if (this.columns[j].find(colEvent => event.isOverlapping(colEvent))) {
+            break;
+          }
+          event.width++;
+        }
+      });
+    }
+  }
+}

package/src/calendar/index.ts

@@ -0,0 +1,4 @@
+export { Calendar } from './calendar.js';
+export { CalendarColumnView } from './calendar-column-view.js';
+export { CalendarMonthView } from './calendar-month-view.js';
+export type { CalendarViewType, EventType } from './types.js';

package/src/calendar/types.ts

@@ -0,0 +1,14 @@
+export type CalendarViewType = {
+  label: string;
+  value: string;
+  type: 'column' | 'month';
+  days?: number;
+};
+
+export type EventType = {
+  start: Date;
+  end: Date;
+  title: string;
+  color?: string;
+  [key: string]: any;
+};

package/src/calendar/utils.ts

@@ -0,0 +1,180 @@
+/**
+ * Pure date utility functions (no external dependencies).
+ */
+
+export function startOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+export function endOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(23, 59, 59, 999);
+  return d;
+}
+
+export function addDays(date: Date, days: number): Date {
+  const d = new Date(date);
+  d.setDate(d.getDate() + days);
+  return d;
+}
+
+export function addMonths(date: Date, months: number): Date {
+  const d = new Date(date);
+  d.setMonth(d.getMonth() + months);
+  return d;
+}
+
+export function addHours(date: Date, hours: number): Date {
+  const d = new Date(date);
+  d.setHours(d.getHours() + hours);
+  return d;
+}
+
+export function differenceInDays(dateA: Date, dateB: Date): number {
+  const a = startOfDay(dateA);
+  const b = startOfDay(dateB);
+  return Math.round((a.valueOf() - b.valueOf()) / 86400000);
+}
+
+export function startOfWeek(
+  date: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1,
+): Date {
+  const d = startOfDay(date);
+  const day = d.getDay();
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+  d.setDate(d.getDate() - diff);
+  return d;
+}
+
+export function endOfWeek(
+  date: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1,
+): Date {
+  const d = startOfWeek(date, weekStartsOn);
+  d.setDate(d.getDate() + 6);
+  return endOfDay(d);
+}
+
+export function startOfMonth(date: Date): Date {
+  const d = new Date(date);
+  d.setDate(1);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+export function endOfMonth(date: Date): Date {
+  const d = new Date(date);
+  d.setMonth(d.getMonth() + 1, 0);
+  d.setHours(23, 59, 59, 999);
+  return d;
+}
+
+export function calculateMonthRange(
+  date: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1,
+) {
+  const sd = startOfWeek(startOfMonth(date), weekStartsOn);
+  const ed = endOfWeek(endOfMonth(date), weekStartsOn);
+  return { startDate: sd, endDate: ed, totalDays: 42 };
+}
+
+export function calculateWeekRange(
+  date: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1,
+) {
+  const sd = startOfWeek(date, weekStartsOn);
+  const ed = endOfWeek(date, weekStartsOn);
+  return { startDate: sd, endDate: ed, totalDays: 7 };
+}
+
+export function calculateDateRange(
+  view: string,
+  contextDate: Date,
+  days: number,
+) {
+  if (view === 'week') {
+    return calculateWeekRange(contextDate, 1);
+  }
+  return {
+    startDate: startOfDay(contextDate),
+    endDate: endOfDay(addDays(contextDate, days - 1)),
+    totalDays: days,
+  };
+}
+
+export const LONG_EVENT_PADDING = 0.25;
+
+const DAY_NAMES_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const DAY_NAMES_LONG = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export function formatDate(date: Date, pattern: string): string {
+  const day = date.getDate();
+  const dayOfWeek = date.getDay();
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  switch (pattern) {
+    case 'MMMM d, yyyy':
+      return `${MONTH_NAMES[month]} ${day}, ${year}`;
+    case 'EEEE':
+      return DAY_NAMES_LONG[dayOfWeek];
+    case 'E':
+      return DAY_NAMES_SHORT[dayOfWeek];
+    case 'd':
+      return `${day}`;
+    case 'dd':
+      return day < 10 ? `0${day}` : `${day}`;
+    case 'hh a': {
+      const h = hours % 12 || 12;
+      const ampm = hours < 12 ? 'AM' : 'PM';
+      return `${h < 10 ? '0' : ''}${h} ${ampm}`;
+    }
+    case 'hh:mm a': {
+      const h = hours % 12 || 12;
+      const ampm = hours < 12 ? 'AM' : 'PM';
+      return `${h < 10 ? '0' : ''}${h}:${minutes < 10 ? '0' : ''}${minutes} ${ampm}`;
+    }
+    case 'dd-MM-yyyy':
+      return `${day < 10 ? '0' : ''}${day}-${month + 1 < 10 ? '0' : ''}${month + 1}-${year}`;
+    default:
+      return date.toLocaleDateString();
+  }
+}
+
+export function getTimePercent(date: Date, forDay?: Date): number {
+  const day = forDay || date;
+  const sd = startOfDay(day);
+  const ed = endOfDay(day);
+  const percent =
+    ((date.valueOf() - sd.valueOf()) / (ed.valueOf() - sd.valueOf())) * 100;
+  if (percent < 0) return 0;
+  if (percent > 100) return 100;
+  return percent;
+}

package/src/canvas/canvas.scss

@@ -0,0 +1,60 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  --canvas-background: var(--color-surface-container-low);
+  --canvas-dot-color: var(--color-outline-variant);
+  --canvas-line-color: var(--color-on-surface);
+  --canvas-hover-color: var(--color-primary);
+  --canvas-arrow-color: var(--color-on-surface);
+}
+
+.canvas-wrapper {
+  background: var(--canvas-background);
+  border-radius: var(--shape-corner-medium);
+}
+
+#canvas-background circle {
+  fill: var(--canvas-dot-color);
+}
+
+#endarrow polyline {
+  fill: none;
+  stroke: var(--canvas-arrow-color);
+  vector-effect: non-scaling-stroke;
+  stroke-width: 2;
+}
+
+.line {
+  &.no-color {
+    stroke: var(--canvas-line-color);
+  }
+
+  &.variant-dashed {
+    stroke-dasharray: 6 6;
+  }
+
+  &.variant-animated-dashed {
+    animation: canvas-dash-flow 600ms linear infinite;
+  }
+}
+
+.clickable {
+  cursor: pointer;
+
+  &:hover .line {
+    stroke: var(--canvas-hover-color);
+  }
+}
+
+.line.clickable:hover {
+  stroke: var(--canvas-hover-color);
+}
+
+@keyframes canvas-dash-flow {
+  to {
+    stroke-dashoffset: -12;
+  }
+}