@glatam/calendar-ui 1.0.1 → 1.0.3

package/src/views/day-view.ts

@@ -1,130 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { CalendarDay, TimeSlot } from '@glatam/calendar-core';
-
-@customElement('glatam-calendar-day-view')
-export class GlatamCalendarDayView extends LitElement {
-  static styles = css`
-    :host {
-      display: grid; grid-template-columns: var(--glatam-time-col-width) 1fr; gap: 2px;
-      width: 100%; background-color: var(--glatam-border); border: 1px solid var(--glatam-border);
-      border-radius: var(--glatam-grid-border-radius); overflow: hidden; user-select: none;
-    }
-    .time-col { background-color: var(--glatam-surface); display: flex; flex-direction: column; }
-    .day-col { background-color: var(--glatam-bg); display: flex; flex-direction: column; }
-    .header-cell {
-      height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
-      background-color: var(--glatam-surface); border-bottom: 2px solid var(--glatam-border);
-      font-size: 0.875rem; font-weight: 500;
-    }
-    .header-cell.today { color: var(--glatam-primary); font-weight: 700; }
-    .slot-cell {
-      height: var(--glatam-slot-height); border-bottom: 1px solid var(--glatam-border);
-      display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
-      cursor: pointer; transition: background-color var(--glatam-transition-fast); position: relative;
-    }
-    .time-slot-label { font-size: 0.7rem; color: var(--glatam-text-secondary); }
-    .slot-cell.available:hover { background-color: var(--glatam-surface); }
-    .slot-cell.blocked {
-      background-color: var(--glatam-blocked-bg);
-      background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--glatam-blocked-stripe) 5px, var(--glatam-blocked-stripe) 10px);
-      color: var(--glatam-blocked-text); cursor: not-allowed; font-weight: 600; padding: 0 10px;
-      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-    }
-    .slot-cell.selected { background-color: var(--glatam-selection-bg); border-left: 3px solid var(--glatam-selection-border); }
-    .slot-cell.drag-selecting { background-color: var(--glatam-primary-light); }
-  `;
-
-  @property({ type: Object }) day: CalendarDay | null = null;
-  @property({ type: Array }) slots: TimeSlot[] = [];
-  @property({ type: String }) locale = 'es';
-  @property({ type: Object }) selectedRange: { dateString: string; start: string; end: string } | null = null;
-  @property({ type: String }) role = 'provider';
-
-  @state() private isDragging = false;
-  @state() private dragStartSlotIndex: number | null = null;
-  @state() private dragEndSlotIndex: number | null = null;
-
-  connectedCallback() { super.connectedCallback(); window.addEventListener('mouseup', this.handleMouseUp); }
-  disconnectedCallback() { window.removeEventListener('mouseup', this.handleMouseUp); super.disconnectedCallback(); }
-
-  private handleMouseDown(slotIndex: number, isBlocked: boolean) {
-    if (isBlocked && this.day) {
-      if (this.role === 'buyer') return;
-      this.dispatchEvent(new CustomEvent('slot-click', {
-        detail: { dateString: this.day.dateString, slot: this.day.slots[slotIndex], isBlocked: true },
-        bubbles: true, composed: true
-      }));
-      return;
-    }
-    this.isDragging = true; this.dragStartSlotIndex = slotIndex; this.dragEndSlotIndex = slotIndex;
-  }
-
-  private handleMouseEnter(slotIndex: number, isBlocked: boolean) {
-    if (this.isDragging && !isBlocked) this.dragEndSlotIndex = slotIndex;
-  }
-
-  private handleMouseUp = () => {
-    if (!this.isDragging || !this.day || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
-      this.isDragging = false; return;
-    }
-    this.isDragging = false;
-    const startIdx = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex);
-    const endIdx = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
-    const rangeSlots = this.day.slots.slice(startIdx, endIdx + 1);
-    if (!rangeSlots.some(s => s.isBlocked)) {
-      this.dispatchEvent(new CustomEvent('range-select', {
-        detail: { dateString: this.day.dateString, start: rangeSlots[0].start, end: rangeSlots[rangeSlots.length - 1].end },
-        bubbles: true, composed: true
-      }));
-    }
-    this.dragStartSlotIndex = null; this.dragEndSlotIndex = null;
-  };
-
-  private isSlotSelected(slot: TimeSlot): boolean {
-    if (!this.day || !this.selectedRange || this.selectedRange.dateString !== this.day.dateString) return false;
-    return slot.start >= this.selectedRange.start && slot.end <= this.selectedRange.end;
-  }
-
-  private isSlotDragSelecting(slotIndex: number): boolean {
-    if (!this.isDragging) return false;
-    const start = Math.min(this.dragStartSlotIndex!, this.dragEndSlotIndex!), end = Math.max(this.dragStartSlotIndex!, this.dragEndSlotIndex!);
-    return slotIndex >= start && slotIndex <= end;
-  }
-
-  render() {
-    if (!this.day) return html`<div>Cargando...</div>`;
-    const isToday = this.day.dateString === new Date().toISOString().split('T')[0];
-    const formattedDate = new Intl.DateTimeFormat(this.locale, { weekday: 'long', day: 'numeric', month: 'long' }).format(this.day.date);
-
-    return html`
-      <div class="time-col">
-        <div class="header-cell">Hora</div>
-        ${this.slots.map(slot => html`<div class="slot-cell time-slot-label">${slot.start}</div>`)}
-      </div>
-
-      <div class="day-col">
-        <div class="header-cell ${isToday ? 'today' : ''}">
-          <div style="text-transform: capitalize;">${formattedDate}</div>
-        </div>
-
-        ${this.day.slots.map((slot, sIdx) => {
-          const blocked = slot.isBlocked, selected = this.isSlotSelected(slot), dragSelecting = this.isSlotDragSelecting(sIdx);
-          return html`
-            <div
-              class=${classMap({
-                'slot-cell': true, 'available': !blocked, 'blocked': blocked, 'selected': selected, 'drag-selecting': dragSelecting
-              })}
-              @mousedown=${() => this.handleMouseDown(sIdx, blocked)}
-              @mouseenter=${() => this.handleMouseEnter(sIdx, blocked)}
-              title=${blocked && slot.rule?.description ? slot.rule.description : ''}
-            >
-              ${blocked ? (slot.rule?.description || 'Ocupado') : selected ? 'Reservado' : ''}
-            </div>
-          `;
-        })}
-      </div>
-    `;
-  }
-}

package/src/views/month-view.ts

@@ -1,116 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { CalendarDay } from '@glatam/calendar-core';
-
-@customElement('glatam-calendar-month-view')
-export class GlatamCalendarMonthView extends LitElement {
-  static styles = css`
-    :host { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; }
-    .weekday { font-size: 0.75rem; font-weight: 600; color: var(--glatam-text-secondary); text-transform: uppercase; text-align: center; padding: 8px 0; letter-spacing: 0.05em; }
-    .day-cell {
-      min-height: var(--glatam-day-min-height); border: 1px solid var(--glatam-border); border-radius: var(--glatam-grid-border-radius);
-      padding: 8px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
-      transition: background-color var(--glatam-transition-fast), border-color var(--glatam-transition-fast); background-color: var(--glatam-bg); position: relative;
-    }
-    .day-cell:hover:not(.blocked):not(.disabled) { background-color: var(--glatam-surface); border-color: var(--glatam-text-secondary); }
-    .day-cell.padding { opacity: 0.4; }
-    .day-cell.blocked {
-      background: repeating-linear-gradient(45deg, var(--glatam-blocked-bg), var(--glatam-blocked-bg) 10px, var(--glatam-blocked-stripe) 10px, var(--glatam-blocked-stripe) 20px);
-      border-color: var(--glatam-blocked-border); color: var(--glatam-blocked-text); cursor: not-allowed;
-    }
-    .day-cell.today { background-color: var(--glatam-today-bg); border-color: var(--glatam-primary); }
-    .day-cell.selected { background-color: var(--glatam-selection-bg); border-color: var(--glatam-selection-border); box-shadow: inset 0 0 0 1px var(--glatam-selection-border); }
-    .day-cell.disabled { opacity: 0.2; cursor: not-allowed; background-color: var(--glatam-surface); border-color: var(--glatam-border); pointer-events: none; }
-    .day-cell.empty { border: none; background: transparent; cursor: default; pointer-events: none; }
-    .day-number { font-size: 0.875rem; font-weight: 500; margin-bottom: 4px; }
-    .day-cell.today .day-number { color: var(--glatam-today-text); font-weight: 700; }
-    .slot-indicator { display: flex; flex-direction: column; gap: 3px; font-size: 0.7rem; overflow: hidden; margin-top: 4px; }
-    .badge { padding: 2px 6px; border-radius: 4px; font-weight: 500; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
-    .badge.blocked-day { background-color: rgba(255, 69, 58, 0.12); color: #ff453a; font-weight: 600; }
-    .badge.blocked-slot { background-color: var(--glatam-surface); border: 1px solid var(--glatam-border); color: var(--glatam-text-secondary); }
-    :host([size="small"]) .day-cell { min-height: 38px; padding: 4px; justify-content: center; align-items: center; }
-    :host([size="small"]) .slot-indicator { display: none; }
-    :host([size="small"]) .day-number { margin-bottom: 0; font-size: 0.8rem; }
-    @media (max-width: 600px) {
-      .day-cell { min-height: 38px; padding: 4px; justify-content: center; align-items: center; }
-      .slot-indicator { display: none; }
-      .day-number { margin-bottom: 0; font-size: 0.8rem; }
-    }
-  `;
-
-  @property({ type: Array }) days: CalendarDay[] = [];
-  @property({ type: String }) locale = 'es';
-  @property({ type: Number }) startOfWeekDay = 0;
-  @property({ type: Array }) selectedDates: string[] = [];
-  @property({ type: String }) role = 'provider';
-  @property({ type: String, reflect: true }) size = 'medium';
-  @property({ type: String }) minDate = '';
-  @property({ type: String }) maxDate = '';
-  @property({ type: Boolean }) showNeighboringMonth = true;
-  @property({ attribute: false }) tileClassName: ((data: { date: Date; dateString: string }) => string) | null = null;
-
-  private getWeekdayNames(): string[] {
-    const names: string[] = [];
-    const baseDate = new Date(2026, 6, 12 + this.startOfWeekDay); 
-    const formatter = new Intl.DateTimeFormat(this.locale, { weekday: 'short' });
-    for (let i = 0; i < 7; i++) {
-      names.push(formatter.format(baseDate));
-      baseDate.setDate(baseDate.getDate() + 1);
-    }
-    return names;
-  }
-
-  private handleDayClick(day: CalendarDay) {
-    if (this.role === 'buyer' && day.isBlocked) return;
-    this.dispatchEvent(new CustomEvent('day-select', {
-      detail: { dateString: day.dateString, isBlocked: day.isBlocked },
-      bubbles: true, composed: true
-    }));
-  }
-
-  render() {
-    const weekdayNames = this.getWeekdayNames();
-    
-    return html`
-      ${weekdayNames.map(name => html`<div class="weekday">${name}</div>`)}
-      
-      ${this.days.map(day => {
-        if (!day.isCurrentMonth && !this.showNeighboringMonth) {
-          return html`<div class="day-cell empty"></div>`;
-        }
-        
-        const isToday = day.dateString === new Date().toISOString().split('T')[0];
-        const isSelected = this.selectedDates.includes(day.dateString);
-        const blockedSlots = day.slots.filter(s => s.isBlocked);
-        const isDisabled = (this.minDate && day.dateString < this.minDate) || (this.maxDate && day.dateString > this.maxDate);
-        const customClass = this.tileClassName ? this.tileClassName({ date: day.date, dateString: day.dateString }) : '';
-        
-        return html`
-          <div 
-            class=${classMap({
-              'day-cell': true, 'padding': !day.isCurrentMonth, 'blocked': day.isBlocked, 'today': isToday, 'selected': isSelected, 'disabled': !!isDisabled, [customClass]: !!customClass
-            })}
-            part="day-cell ${customClass}"
-            @click=${() => this.handleDayClick(day)}
-          >
-            <div class="day-number">${day.dayNumber}</div>
-            
-            <div class="slot-indicator">
-              ${day.isBlocked
-                ? html`<div class="badge blocked-day">${day.rule?.description || 'Bloqueado'}</div>`
-                : blockedSlots.slice(0, 2).map(slot => html`
-                    <div class="badge blocked-slot" title=${slot.rule?.description || ''}>
-                      🚫 ${slot.rule?.description || slot.start}
-                    </div>
-                  `)}
-              ${!day.isBlocked && blockedSlots.length > 2 
-                ? html`<div style="text-align: center; font-size: 0.65rem; color: var(--glatam-text-secondary);">+${blockedSlots.length - 2} tareas</div>` 
-                : ''}
-            </div>
-          </div>
-        `;
-      })}
-    `;
-  }
-}

package/src/views/week-view.ts

@@ -1,158 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { CalendarDay, TimeSlot } from '@glatam/calendar-core';
-
-@customElement('glatam-calendar-week-view')
-export class GlatamCalendarWeekView extends LitElement {
-  static styles = css`
-    :host {
-      display: grid; grid-template-columns: var(--glatam-time-col-width) repeat(7, 1fr); gap: 2px;
-      width: 100%; background-color: var(--glatam-border); border: 1px solid var(--glatam-border);
-      border-radius: var(--glatam-grid-border-radius); overflow: hidden; user-select: none;
-    }
-    @media (max-width: 600px) {
-      :host {
-        grid-template-columns: 40px repeat(7, 1fr);
-        overflow-x: hidden;
-      }
-      .slot-cell {
-        font-size: 0.65rem;
-      }
-      .slot-cell.blocked, .slot-cell.selected {
-        font-size: 0;
-        padding: 0;
-      }
-      .time-slot-label {
-        font-size: 0.65rem;
-      }
-      .header-cell {
-        font-size: 0.7rem;
-      }
-      .header-cell .day-num {
-        font-size: 0.8rem;
-      }
-    }
-    .time-col { background-color: var(--glatam-surface); display: flex; flex-direction: column; }
-    .day-col { background-color: var(--glatam-bg); display: flex; flex-direction: column; }
-    .header-cell {
-      height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
-      background-color: var(--glatam-surface); border-bottom: 2px solid var(--glatam-border);
-      font-size: 0.8rem; font-weight: 500; text-transform: capitalize;
-    }
-    .header-cell.today { color: var(--glatam-primary); font-weight: 700; }
-    .header-cell .day-num { font-size: 0.95rem; font-weight: 600; margin-top: 2px; }
-    .slot-cell {
-      height: var(--glatam-slot-height); border-bottom: 1px solid var(--glatam-border);
-      display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
-      cursor: pointer; transition: background-color var(--glatam-transition-fast); position: relative;
-    }
-    .time-slot-label { font-size: 0.7rem; color: var(--glatam-text-secondary); }
-    .slot-cell.available:hover { background-color: var(--glatam-surface); }
-    .slot-cell.blocked {
-      background-color: var(--glatam-blocked-bg);
-      background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--glatam-blocked-stripe) 5px, var(--glatam-blocked-stripe) 10px);
-      color: var(--glatam-blocked-text); cursor: not-allowed; font-weight: 600; padding: 0 4px;
-      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
-    }
-    .slot-cell.selected { background-color: var(--glatam-selection-bg); border-left: 3px solid var(--glatam-selection-border); }
-    .slot-cell.drag-selecting { background-color: var(--glatam-primary-light); }
-  `;
-
-  @property({ type: Array }) days: CalendarDay[] = [];
-  @property({ type: Array }) slots: TimeSlot[] = [];
-  @property({ type: String }) locale = 'es';
-  @property({ type: Object }) selectedRange: { dateString: string; start: string; end: string } | null = null;
-  @property({ type: String }) role = 'provider';
-
-  @state() private isDragging = false;
-  @state() private dragDayIndex: number | null = null;
-  @state() private dragStartSlotIndex: number | null = null;
-  @state() private dragEndSlotIndex: number | null = null;
-
-  connectedCallback() { super.connectedCallback(); window.addEventListener('mouseup', this.handleMouseUp); }
-  disconnectedCallback() { window.removeEventListener('mouseup', this.handleMouseUp); super.disconnectedCallback(); }
-
-  private handleMouseDown(dayIndex: number, slotIndex: number, isBlocked: boolean) {
-    if (isBlocked) {
-      if (this.role === 'buyer') return;
-      this.dispatchEvent(new CustomEvent('slot-click', {
-        detail: { dateString: this.days[dayIndex].dateString, slot: this.days[dayIndex].slots[slotIndex], isBlocked: true },
-        bubbles: true, composed: true
-      }));
-      return;
-    }
-    this.isDragging = true; this.dragDayIndex = dayIndex; this.dragStartSlotIndex = slotIndex; this.dragEndSlotIndex = slotIndex;
-  }
-
-  private handleMouseEnter(dayIndex: number, slotIndex: number, isBlocked: boolean) {
-    if (this.isDragging && dayIndex === this.dragDayIndex && !isBlocked) this.dragEndSlotIndex = slotIndex;
-  }
-
-  private handleMouseUp = () => {
-    if (!this.isDragging || this.dragDayIndex === null || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
-      this.isDragging = false; return;
-    }
-    this.isDragging = false;
-    const startIdx = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex);
-    const endIdx = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
-    const day = this.days[this.dragDayIndex], rangeSlots = day.slots.slice(startIdx, endIdx + 1);
-    if (!rangeSlots.some(s => s.isBlocked)) {
-      this.dispatchEvent(new CustomEvent('range-select', {
-        detail: { dateString: day.dateString, start: rangeSlots[0].start, end: rangeSlots[rangeSlots.length - 1].end },
-        bubbles: true, composed: true
-      }));
-    }
-    this.dragDayIndex = null; this.dragStartSlotIndex = null; this.dragEndSlotIndex = null;
-  };
-
-  private isSlotSelected(dayString: string, slot: TimeSlot): boolean {
-    if (!this.selectedRange || this.selectedRange.dateString !== dayString) return false;
-    return slot.start >= this.selectedRange.start && slot.end <= this.selectedRange.end;
-  }
-
-  private isSlotDragSelecting(dayIndex: number, slotIndex: number): boolean {
-    if (!this.isDragging || dayIndex !== this.dragDayIndex) return false;
-    const start = Math.min(this.dragStartSlotIndex!, this.dragEndSlotIndex!), end = Math.max(this.dragStartSlotIndex!, this.dragEndSlotIndex!);
-    return slotIndex >= start && slotIndex <= end;
-  }
-
-  render() {
-    const todayStr = new Date().toISOString().split('T')[0];
-
-    return html`
-      <div class="time-col">
-        <div class="header-cell">Hora</div>
-        ${this.slots.map(slot => html`<div class="slot-cell time-slot-label">${slot.start}</div>`)}
-      </div>
-
-      ${this.days.map((day, dIdx) => {
-        const isToday = day.dateString === todayStr, dayLabel = new Intl.DateTimeFormat(this.locale, { weekday: 'short' }).format(day.date);
-        return html`
-          <div class="day-col">
-            <div class="header-cell ${isToday ? 'today' : ''}">
-              <div>${dayLabel}</div>
-              <div class="day-num">${day.dayNumber}</div>
-            </div>
-            
-            ${day.slots.map((slot, sIdx) => {
-              const blocked = slot.isBlocked, selected = this.isSlotSelected(day.dateString, slot), dragSelecting = this.isSlotDragSelecting(dIdx, sIdx);
-              return html`
-                <div
-                  class=${classMap({
-                    'slot-cell': true, 'available': !blocked, 'blocked': blocked, 'selected': selected, 'drag-selecting': dragSelecting
-                  })}
-                  @mousedown=${() => this.handleMouseDown(dIdx, sIdx, blocked)}
-                  @mouseenter=${() => this.handleMouseEnter(dIdx, sIdx, blocked)}
-                  title=${blocked && slot.rule?.description ? slot.rule.description : ''}
-                >
-                  ${blocked ? (slot.rule?.description || 'Ocupado') : selected ? 'Reservado' : ''}
-                </div>
-              `;
-            })}
-          </div>
-        `;
-      })}
-    `;
-  }
-}

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": ["src/**/*"]
-}

package/vite.config.ts

@@ -1,35 +0,0 @@
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import { resolve } from 'path';
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'GlatamCalendar',
-      fileName: (format) => `glatam-calendar.${format === 'es' ? 'js' : 'cjs'}`,
-      formats: ['es', 'cjs'],
-    },
-    rollupOptions: {
-      external: [
-        'lit',
-        'lit/decorators.js',
-        'lit/directives/class-map.js',
-        'lit/directives/style-map.js',
-        '@glatam/calendar-core',
-      ],
-      output: {
-        globals: {
-          lit: 'Lit',
-          '@glatam/calendar-core': 'GlatamCalendarCore',
-        },
-      },
-    },
-  },
-  plugins: [
-    dts({
-      insertTypesEntry: true,
-      tsconfigPath: './tsconfig.json',
-    }),
-  ],
-});