@redvars/peacock 3.5.1 → 3.6.1

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

@@ -0,0 +1,244 @@
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import {
+  addDays,
+  differenceInDays,
+  startOfDay,
+  endOfDay,
+  calculateMonthRange,
+  formatDate,
+  getTimePercent,
+  LONG_EVENT_PADDING,
+} from './utils.js';
+import { BaseEvent } from './base-event.js';
+import { CalendarEvent } from './calendar-event.js';
+import { MonthEventManager } from './event-manager.js';
+import type { ColumnEvent } from './event-manager.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './calendar-month-view.scss';
+
+/**
+ * @label Calendar Month View
+ * @tag wc-calendar-month-view
+ * @rawTag calendar-month-view
+ * @parentRawTag calendar
+ * @summary Internal month view component for the calendar.
+ */
+@IndividualComponent
+export class CalendarMonthView extends LitElement {
+  static styles = [styles];
+
+  @property({ type: Array })
+  events: CalendarEvent[] = [];
+
+  @property({ type: Boolean, attribute: 'event-clickable' })
+  eventClickable: boolean = true;
+
+  @property({ type: Object, attribute: false })
+  currentTime: Date = new Date();
+
+  @property({ type: Object, attribute: false })
+  contextDate: Date = new Date();
+
+  @state()
+  private dateRange: any = {};
+
+  @state()
+  private weekDayEvents: ColumnEvent[][][] = [];
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._processEvents();
+  }
+
+  override willUpdate(changedProperties: Map<string, unknown>) {
+    if (
+      changedProperties.has('events') ||
+      changedProperties.has('contextDate')
+    ) {
+      this._processEvents();
+    }
+  }
+
+  override firstUpdated() {
+    const viewBody = this.renderRoot.querySelector('.view-body');
+    if (viewBody) {
+      const viewBodyHeight = viewBody.scrollHeight;
+      viewBody.scrollTo({
+        top:
+          (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,
+      });
+    }
+  }
+
+  private _processEvents() {
+    this.dateRange = calculateMonthRange(this.contextDate, 1);
+    this.weekDayEvents = [];
+
+    for (
+      let i = new Date(this.dateRange.startDate), j = 0;
+      j < 6;
+      i = addDays(i, 7), j++
+    ) {
+      const manager = new MonthEventManager();
+      manager.addEvents(
+        this.events.filter(event =>
+          event.isOverlapping(
+            new BaseEvent(startOfDay(i), endOfDay(addDays(i, 6))),
+          ),
+        ),
+      );
+      manager.process();
+      this.weekDayEvents.push(manager.columns);
+    }
+  }
+
+  private _getDatePercent(date: Date, dateRangeStartDate: Date): number {
+    const currentDay = differenceInDays(startOfDay(date), dateRangeStartDate);
+    const percent = (currentDay / 7) * 100;
+    if (percent < 0) return 0;
+    if (percent > 100) return 100;
+    return percent;
+  }
+
+  private _getDayClass(date: Date): string {
+    const diff = differenceInDays(
+      startOfDay(date),
+      startOfDay(this.currentTime),
+    );
+    if (diff === 0) return 'column today';
+    if (diff < 0) return 'column past';
+    return 'column future';
+  }
+
+  private _populateColorVars(
+    styles: Record<string, string>,
+    color: string,
+  ) {
+    styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;
+    styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;
+    styles['--calendar-event-border-color'] = `var(--color-${color})`;
+    styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;
+    styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;
+  }
+
+  private _emitEventClick(event: any) {
+    this.dispatchEvent(
+      new CustomEvent('month-view-event-click', {
+        detail: { event },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _renderHeader() {
+    const columns: any[] = [];
+    for (
+      let i = new Date(this.dateRange.startDate), j = 0;
+      j < 7;
+      i = addDays(i, 1), j++
+    ) {
+      columns.push(html`
+        <div class="column">
+          <div class="column-content">
+            <div class="day">${formatDate(i, 'EEEE')}</div>
+          </div>
+        </div>
+      `);
+    }
+    return columns;
+  }
+
+  private _renderMultiDayBackground(sd: Date) {
+    const columns: any[] = [];
+    for (let i = new Date(sd), j = 0; j < 7; i = addDays(i, 1), j++) {
+      columns.push(html`
+        <div class=${this._getDayClass(i)}>
+          <div class="column-content">
+            <div class="column-header">
+              <div class="day">${formatDate(i, 'd')}</div>
+            </div>
+          </div>
+        </div>
+      `);
+    }
+    return columns;
+  }
+
+  private _renderEvents() {
+    return this.weekDayEvents.map((eventDay, index) => {
+      const weekStartDate = addDays(this.dateRange.startDate, index * 7);
+      return html`
+        <div class="multi-day-section">
+          <div class="multi-day-body-scroll">
+            <div class="multi-day-background">
+              <div class="columns">
+                ${this._renderMultiDayBackground(weekStartDate)}
+              </div>
+            </div>
+            <div class="multi-events">
+              <div class="row-content">
+                ${eventDay.map(
+                  nodes => html`
+                    <div class="row">
+                      ${nodes.map(node => {
+                        const evtCls = this.eventClickable
+                          ? 'event clickable'
+                          : 'event';
+                        const evtStyles: Record<string, string> = {
+                          left: `${this._getDatePercent(node.start, weekStartDate) + LONG_EVENT_PADDING}%`,
+                          width: `${this._getDatePercent(addDays(node.end, 1), weekStartDate) - this._getDatePercent(node.start, weekStartDate) - 2 * LONG_EVENT_PADDING}%`,
+                        };
+                        if (node.color) {
+                          this._populateColorVars(evtStyles, node.color);
+                        }
+                        return html`
+                          <div
+                            class=${evtCls}
+                            style=${this._styleMap(evtStyles)}
+                            @click=${() => {
+                              if (this.eventClickable)
+                                this._emitEventClick(node.data);
+                            }}
+                          >
+                            <div class="event-title">
+                              ${node.title || '(no title)'}
+                            </div>
+                          </div>
+                        `;
+                      })}
+                    </div>
+                  `,
+                )}
+                <div class="row-spacer"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    });
+  }
+
+  private _styleMap(styles: Record<string, string>): string {
+    return Object.entries(styles)
+      .map(([k, v]) => `${k}:${v}`)
+      .join(';');
+  }
+
+  render() {
+    return html`
+      <div class="calendar-month-view">
+        <div class="view-header">
+          <div class="columns">${this._renderHeader()}</div>
+          <div class="scrollbar-placeholder"></div>
+        </div>
+        <div class="view-body">
+          <div class="view-body-scroll">
+            <div class="drawing-area">${this._renderEvents()}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/calendar/calendar.scss

@@ -0,0 +1,71 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  min-height: 20em;
+
+  --calendar-border-color: var(--color-outline-variant);
+  --calendar-scale-color: var(--color-outline-variant);
+
+  --calendar-event-bg-color: var(--color-primary-container);
+  --calendar-event-bg-color--hover: var(--color-inverse-primary);
+  --calendar-event-border-color: var(--color-primary);
+  --calendar-event-text-color: var(--color-on-primary-container);
+  --calendar-event-text-color--hover: var(--color-on-primary);
+
+  --calendar-surface: var(--color-surface);
+  --calendar-surface-variant: var(--color-surface-variant);
+  --calendar-on-surface: var(--color-on-surface);
+  --calendar-on-surface-variant: var(--color-on-surface-variant);
+}
+
+.calendar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--calendar-surface);
+  border-radius: var(--shape-corner-large);
+  overflow: hidden;
+}
+
+.calendar-header {
+  .calendar-header-classic {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+
+    .header-left {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      flex: 1;
+
+      .title {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--calendar-on-surface);
+        padding-inline-start: 0.5rem;
+      }
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.calendar-body {
+  flex: 1;
+  overflow: auto;
+
+  .view-container {
+    height: 100%;
+  }
+}

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>
+    `;
+  }
+}