@mintplayer/scheduler-wc 1.0.0

package/src/styles/scheduler.styles.js

@@ -0,0 +1,619 @@
+/**
+ * Scheduler CSS styles as a template literal
+ */
+export const schedulerStyles = `
+  :host {
+    display: block;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    font-size: 14px;
+    --scheduler-border-color: #ddd;
+    --scheduler-header-bg: #f8f9fa;
+    --scheduler-today-bg: #fff3cd;
+    --scheduler-slot-height: 40px;
+    --scheduler-time-gutter-width: 80px;
+    --scheduler-event-border-radius: 4px;
+    --scheduler-now-indicator-color: #dc3545;
+    --scheduler-preview-bg: rgba(0, 123, 255, 0.3);
+    --scheduler-greyed-slot-bg: rgba(0, 0, 0, 0.1);
+    --scheduler-column-min-width: 120px;
+    --scheduler-touch-hold-duration: 500ms;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .scheduler-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border: 1px solid var(--scheduler-border-color);
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+  }
+
+  /* Header */
+  .scheduler-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: var(--scheduler-header-bg);
+    border-bottom: 1px solid var(--scheduler-border-color);
+    flex-shrink: 0;
+  }
+
+  .scheduler-nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .scheduler-nav button {
+    padding: 6px 12px;
+    border: 1px solid var(--scheduler-border-color);
+    border-radius: 4px;
+    background: #fff;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  .scheduler-nav button:hover {
+    background: #e9ecef;
+  }
+
+  .scheduler-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .scheduler-view-switcher {
+    display: flex;
+    gap: 4px;
+  }
+
+  .scheduler-view-switcher button {
+    padding: 6px 12px;
+    border: 1px solid var(--scheduler-border-color);
+    border-radius: 4px;
+    background: #fff;
+    cursor: pointer;
+    font-size: 13px;
+  }
+
+  .scheduler-view-switcher button:hover {
+    background: #e9ecef;
+  }
+
+  .scheduler-view-switcher button.active {
+    background: #0d6efd;
+    color: #fff;
+    border-color: #0d6efd;
+  }
+
+  /* Main content area */
+  .scheduler-body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .scheduler-sidebar {
+    width: var(--scheduler-time-gutter-width);
+    flex-shrink: 0;
+    border-right: 1px solid var(--scheduler-border-color);
+    background: var(--scheduler-header-bg);
+  }
+
+  .scheduler-content {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+  }
+
+  /* Week/Day View Grid */
+  .scheduler-grid {
+    display: grid;
+    min-width: 100%;
+  }
+
+  .scheduler-day-headers {
+    display: flex;
+    border-bottom: 1px solid var(--scheduler-border-color);
+    background: var(--scheduler-header-bg);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    min-width: fit-content;
+  }
+
+  .scheduler-day-header {
+    flex: 1 0 var(--scheduler-column-min-width);
+    min-width: var(--scheduler-column-min-width);
+    text-align: center;
+    padding: 8px 4px;
+    border-right: 1px solid var(--scheduler-border-color);
+    font-weight: 500;
+  }
+
+  .scheduler-day-header:last-child {
+    border-right: none;
+  }
+
+  .scheduler-day-header.today {
+    background: var(--scheduler-today-bg);
+  }
+
+  .scheduler-day-header .day-name {
+    font-size: 12px;
+    color: #666;
+    text-transform: uppercase;
+  }
+
+  .scheduler-day-header .day-number {
+    font-size: 20px;
+    font-weight: 600;
+    margin-top: 2px;
+  }
+
+  .scheduler-time-grid {
+    display: flex;
+    position: relative;
+    min-width: fit-content;
+  }
+
+  .scheduler-time-gutter {
+    width: var(--scheduler-time-gutter-width);
+    flex-shrink: 0;
+    border-right: 1px solid var(--scheduler-border-color);
+    background: var(--scheduler-header-bg);
+  }
+
+  .scheduler-time-slot-label {
+    height: var(--scheduler-slot-height);
+    padding: 0 8px;
+    font-size: 12px;
+    color: #666;
+    text-align: right;
+    position: relative;
+    top: -8px;
+    white-space: nowrap;
+  }
+
+  .scheduler-days-container {
+    display: flex;
+    flex: 1;
+    position: relative;
+    min-width: fit-content;
+  }
+
+  .scheduler-day-column {
+    flex: 1 0 var(--scheduler-column-min-width);
+    min-width: var(--scheduler-column-min-width);
+    position: relative;
+    border-right: 1px solid var(--scheduler-border-color);
+  }
+
+  .scheduler-day-column:last-child {
+    border-right: none;
+  }
+
+  .scheduler-time-slot {
+    height: var(--scheduler-slot-height);
+    border-bottom: 1px solid #eee;
+    position: relative;
+  }
+
+  .scheduler-time-slot:nth-child(2n) {
+    border-bottom-color: var(--scheduler-border-color);
+  }
+
+  .scheduler-time-slot.greyed {
+    background: var(--scheduler-greyed-slot-bg);
+  }
+
+  /* Events */
+  .scheduler-events-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+
+  .scheduler-event {
+    position: absolute;
+    border-radius: var(--scheduler-event-border-radius);
+    padding: 2px 4px;
+    font-size: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    pointer-events: auto;
+    border-left: 3px solid rgba(0, 0, 0, 0.2);
+  }
+
+  .scheduler-event:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .scheduler-event.selected {
+    box-shadow: 0 0 0 3px #212529;
+  }
+
+  .scheduler-event .event-title {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .scheduler-event .event-time {
+    font-size: 11px;
+    opacity: 0.8;
+  }
+
+  .scheduler-event.preview {
+    background: var(--scheduler-preview-bg);
+    border: 2px dashed #0d6efd;
+    pointer-events: none;
+  }
+
+  /* Resize handles */
+  .scheduler-event .resize-handle {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 8px;
+    cursor: ns-resize;
+  }
+
+  .scheduler-event .resize-handle.top {
+    top: 0;
+  }
+
+  .scheduler-event .resize-handle.bottom {
+    bottom: 0;
+  }
+
+  /* Now indicator */
+  .scheduler-now-indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--scheduler-now-indicator-color);
+    z-index: 5;
+    pointer-events: none;
+  }
+
+  .scheduler-now-indicator::before {
+    content: '';
+    position: absolute;
+    left: -4px;
+    top: -4px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--scheduler-now-indicator-color);
+  }
+
+  /* Month View */
+  .scheduler-month-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-auto-rows: minmax(100px, 1fr);
+    height: 100%;
+  }
+
+  .scheduler-month-day {
+    border-right: 1px solid var(--scheduler-border-color);
+    border-bottom: 1px solid var(--scheduler-border-color);
+    padding: 4px;
+    overflow: hidden;
+  }
+
+  .scheduler-month-day:nth-child(7n) {
+    border-right: none;
+  }
+
+  .scheduler-month-day.other-month {
+    background: #f8f9fa;
+    color: #adb5bd;
+  }
+
+  .scheduler-month-day.today {
+    background: var(--scheduler-today-bg);
+  }
+
+  .scheduler-month-day .day-number {
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+
+  .scheduler-month-day .month-events {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .scheduler-month-event {
+    padding: 2px 4px;
+    border-radius: 2px;
+    font-size: 11px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+
+  .scheduler-more-link {
+    font-size: 11px;
+    color: #0d6efd;
+    cursor: pointer;
+    margin-top: 2px;
+  }
+
+  /* Year View */
+  .scheduler-year-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .scheduler-year-month {
+    border: 1px solid var(--scheduler-border-color);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .scheduler-year-month-header {
+    padding: 8px;
+    background: var(--scheduler-header-bg);
+    font-weight: 600;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .scheduler-year-month-header:hover {
+    background: #e9ecef;
+  }
+
+  .scheduler-mini-month {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 1px;
+    padding: 4px;
+  }
+
+  .scheduler-mini-day {
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .scheduler-mini-day:hover {
+    background: #e9ecef;
+  }
+
+  .scheduler-mini-day.has-events {
+    font-weight: 600;
+  }
+
+  .scheduler-mini-day.has-events::after {
+    content: '';
+    position: absolute;
+    bottom: 2px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: #0d6efd;
+  }
+
+  .scheduler-mini-day.today {
+    background: var(--scheduler-today-bg);
+  }
+
+  .scheduler-mini-day.other-month {
+    color: #adb5bd;
+  }
+
+  /* Timeline View */
+  .scheduler-timeline {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .scheduler-timeline-header {
+    display: flex;
+    border-bottom: 1px solid var(--scheduler-border-color);
+    background: var(--scheduler-header-bg);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  .scheduler-resource-header {
+    width: 200px;
+    flex-shrink: 0;
+    padding: 8px;
+    border-right: 1px solid var(--scheduler-border-color);
+    font-weight: 600;
+  }
+
+  .scheduler-timeline-slots-header {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .scheduler-timeline-slot-header {
+    flex-shrink: 0;
+    padding: 8px;
+    text-align: center;
+    border-right: 1px solid var(--scheduler-border-color);
+    font-size: 12px;
+  }
+
+  .scheduler-timeline-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .scheduler-timeline-row {
+    display: flex;
+    border-bottom: 1px solid var(--scheduler-border-color);
+    min-height: 40px;
+  }
+
+  .scheduler-timeline-row.group {
+    background: var(--scheduler-header-bg);
+    font-weight: 600;
+  }
+
+  .scheduler-resource-cell {
+    width: 200px;
+    flex-shrink: 0;
+    padding: 8px;
+    border-right: 1px solid var(--scheduler-border-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .scheduler-resource-cell .expand-toggle {
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .scheduler-timeline-slots {
+    display: flex;
+    flex: 1;
+    position: relative;
+  }
+
+  .scheduler-timeline-slot {
+    flex-shrink: 0;
+    border-right: 1px solid #eee;
+    height: 100%;
+  }
+
+  .scheduler-timeline-slot.greyed {
+    background: var(--scheduler-greyed-slot-bg);
+  }
+
+  .scheduler-timeline-events {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+
+  .scheduler-timeline-event {
+    position: absolute;
+    height: calc(100% - 4px);
+    top: 2px;
+    border-radius: var(--scheduler-event-border-radius);
+    padding: 2px 6px;
+    font-size: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .scheduler-timeline-event.selected {
+    box-shadow: 0 0 0 3px #212529;
+  }
+
+  /* Loading state */
+  .scheduler-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    color: #666;
+  }
+
+  /* Empty state */
+  .scheduler-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    color: #666;
+    font-style: italic;
+  }
+
+  /* Touch drag mode indicator */
+  .scheduler-container.touch-drag-mode {
+    cursor: grabbing;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .scheduler-container.touch-drag-mode .scheduler-content {
+    overflow: hidden;
+  }
+
+  .scheduler-event.touch-hold-pending {
+    animation: touch-hold-pulse 0.5s ease-in-out;
+  }
+
+  .scheduler-event.touch-hold-active {
+    transform: scale(1.02);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 100;
+  }
+
+  .scheduler-time-slot.touch-hold-pending,
+  .scheduler-timeline-slot.touch-hold-pending {
+    animation: touch-hold-pulse 0.5s ease-in-out;
+  }
+
+  .scheduler-time-slot.touch-hold-active,
+  .scheduler-timeline-slot.touch-hold-active {
+    background: var(--scheduler-preview-bg);
+  }
+
+  @keyframes touch-hold-pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+  }
+
+  /* Scrollbar styling */
+  .scheduler-content::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scheduler-content::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  .scheduler-content::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+  }
+
+  .scheduler-content::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
+  }
+`;
+export default schedulerStyles;
+//# sourceMappingURL=scheduler.styles.js.map

package/src/styles/scheduler.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduler.styles.js","sourceRoot":"","sources":["../../../../../libs/mp-scheduler-wc/src/styles/scheduler.styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqmB9B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/src/views/base-view.d.ts

@@ -0,0 +1,37 @@
+import { SchedulerState } from '../state/scheduler-state';
+/**
+ * Base class for scheduler views
+ */
+export declare abstract class BaseView {
+    protected container: HTMLElement;
+    protected state: SchedulerState;
+    constructor(container: HTMLElement, state: SchedulerState);
+    /**
+     * Update the view with new state
+     */
+    abstract update(state: SchedulerState): void;
+    /**
+     * Render the view
+     */
+    abstract render(): void;
+    /**
+     * Clean up the view
+     */
+    abstract destroy(): void;
+    /**
+     * Get the view's root element
+     */
+    getElement(): HTMLElement;
+    /**
+     * Helper to create an element with classes
+     */
+    protected createElement<K extends keyof HTMLElementTagNameMap>(tag: K, ...classes: string[]): HTMLElementTagNameMap[K];
+    /**
+     * Helper to set data attributes
+     */
+    protected setData(element: HTMLElement, data: Record<string, string | number>): void;
+    /**
+     * Helper to clear container
+     */
+    protected clearContainer(): void;
+}

package/src/views/base-view.js

@@ -0,0 +1,40 @@
+/**
+ * Base class for scheduler views
+ */
+export class BaseView {
+    constructor(container, state) {
+        this.container = container;
+        this.state = state;
+    }
+    /**
+     * Get the view's root element
+     */
+    getElement() {
+        return this.container;
+    }
+    /**
+     * Helper to create an element with classes
+     */
+    createElement(tag, ...classes) {
+        const el = document.createElement(tag);
+        if (classes.length > 0) {
+            el.classList.add(...classes);
+        }
+        return el;
+    }
+    /**
+     * Helper to set data attributes
+     */
+    setData(element, data) {
+        for (const [key, value] of Object.entries(data)) {
+            element.dataset[key] = String(value);
+        }
+    }
+    /**
+     * Helper to clear container
+     */
+    clearContainer() {
+        this.container.innerHTML = '';
+    }
+}
+//# sourceMappingURL=base-view.js.map

package/src/views/base-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-view.js","sourceRoot":"","sources":["../../../../../libs/mp-scheduler-wc/src/views/base-view.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAgB,QAAQ;IAI5B,YAAY,SAAsB,EAAE,KAAqB;QACvD,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAiBD;;OAEG;IACH,UAAU;QACR,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED;;OAEG;IACO,aAAa,CACrB,GAAM,EACN,GAAG,OAAiB;QAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;QAC/B,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED;;OAEG;IACO,OAAO,CACf,OAAoB,EACpB,IAAqC;QAErC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAChD,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAED;;OAEG;IACO,cAAc;QACtB,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;IAChC,CAAC;CACF"}

package/src/views/day-view.d.ts

@@ -0,0 +1,18 @@
+import { BaseView } from './base-view';
+import { SchedulerState } from '../state/scheduler-state';
+/**
+ * Day view renderer
+ */
+export declare class DayView extends BaseView {
+    private eventsContainer;
+    private slotElements;
+    render(): void;
+    private renderEvents;
+    private createEventElement;
+    private renderNowIndicator;
+    update(state: SchedulerState): void;
+    private optionsRequireRerender;
+    private updateGreyedSlots;
+    private renderPreviewEvent;
+    destroy(): void;
+}