@brickclay-org/ui 0.0.9 → 0.0.13

package/src/lib/calender/components/scheduled-date-picker/scheduled-date-picker.component.ts

@@ -1,360 +0,0 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { CustomCalendarComponent, CalendarSelection } from '../custom-calendar/custom-calendar.component';
-import { TimePickerComponent } from '../time-picker/time-picker.component';
-
-export interface TimeConfiguration {
-  date: Date;
-  allDay: boolean;
-  startTime: string; // Format: "HH:mm" or "HH:mm:ss"
-  endTime: string; // Format: "HH:mm" or "HH:mm:ss"
-}
-
-export interface ScheduledDateSelection {
-  mode: 'single' | 'multiple' | 'range';
-  singleDate?: {
-    startDate: Date;
-    endDate: Date;
-    allDay: boolean;
-    startTime: string;
-    endTime: string;
-  };
-  multipleDates?: TimeConfiguration[];
-  dateRange?: {
-    startDate: Date;
-    endDate: Date;
-    allDay: boolean;
-    startTime: string;
-    endTime: string;
-  };
-}
-
-@Component({
-  selector: 'brickclay-scheduled-date-picker',
-  standalone: true,
-  imports: [CommonModule, FormsModule, CustomCalendarComponent, TimePickerComponent],
-  templateUrl: './scheduled-date-picker.component.html',
-  styleUrls: ['./scheduled-date-picker.component.css']
-})
-export class ScheduledDatePickerComponent implements OnInit {
-  @Input() timeFormat: 12 | 24 = 12;
-  @Input() enableSeconds = false;
-
-  @Output() scheduled = new EventEmitter<ScheduledDateSelection>();
-  @Output() cleared = new EventEmitter<void>();
-
-  activeTab: 'single' | 'multiple' | 'range' = 'single';
-  openTimePickerId: string | null = null; // Track which time picker is currently open
-  closePickerCounter: { [key: string]: number } = {}; // Track close signals for each picker
-
-  // Single Date
-  singleDate: Date | null = null;
-  singleAllDay = false;
-  singleStartTime = '1:00 AM';
-  singleEndTime = '2:00 AM';
-
-  // Multiple Dates
-  multipleDates: TimeConfiguration[] = [];
-
-  // Date Range
-  rangeStartDate: Date | null = null;
-  rangeEndDate: Date | null = null;
-  rangeAllDay = false;
-  rangeStartTime = '1:00 AM';
-  rangeEndTime = '2:00 AM';
-
-  ngOnInit() {
-    // Initialize with default time if needed
-  }
-
-  onTabChange(tab: 'single' | 'multiple' | 'range') {
-    this.activeTab = tab;
-    this.openTimePickerId = null; // Close any open pickers when switching tabs
-  }
-
-  onTimePickerOpened(pickerId: string) {
-    // Close all other pickers when one opens
-    if (this.openTimePickerId && this.openTimePickerId !== pickerId) {
-      // Increment close counter for the previously open picker
-      if (!this.closePickerCounter[this.openTimePickerId]) {
-        this.closePickerCounter[this.openTimePickerId] = 0;
-      }
-      this.closePickerCounter[this.openTimePickerId]++;
-    }
-    this.openTimePickerId = pickerId;
-  }
-
-  onTimePickerClosed(pickerId: string) {
-    // Reset open picker ID if this was the open one
-    if (this.openTimePickerId === pickerId) {
-      this.openTimePickerId = null;
-    }
-  }
-
-  shouldClosePicker(pickerId: string): number {
-    // Return the counter value for this picker (triggers change detection)
-    return this.closePickerCounter[pickerId] || 0;
-  }
-
-  // Single Date Handlers
-  onSingleDateSelected(event: CalendarSelection) {
-    if (event.startDate) {
-      this.singleDate = new Date(event.startDate);
-      // Initialize time if not all day
-      if (!this.singleAllDay) {
-        this.updateSingleDateTimes();
-      }
-      this.emitScheduled();
-    } else {
-      this.singleDate = null;
-    }
-  }
-
-  onSingleAllDayChange() {
-    this.singleAllDay = !this.singleAllDay;
-    if (this.singleDate) {
-      this.updateSingleDateTimes();
-      this.emitScheduled();
-    }
-  }
-
-  onSingleStartTimeChange(time: string) {
-    this.singleStartTime = time;
-    if (this.singleDate) {
-      this.updateSingleDateTimes();
-      this.emitScheduled();
-    }
-  }
-
-  onSingleEndTimeChange(time: string) {
-    this.singleEndTime = time;
-    if (this.singleDate) {
-      this.updateSingleDateTimes();
-      this.emitScheduled();
-    }
-  }
-
-  updateSingleDateTimes() {
-    if (!this.singleDate) return;
-    if (this.singleAllDay) {
-      this.singleDate.setHours(0, 0, 0, 0);
-    } else {
-      const startTime = this.parseTimeString(this.singleStartTime);
-      const endTime = this.parseTimeString(this.singleEndTime);
-      this.singleDate.setHours(startTime.hours, startTime.minutes, 0, 0);
-    }
-  }
-
-  // Multiple Dates Handlers
-  onMultipleDatesSelected(event: CalendarSelection) {
-    if (event.selectedDates && event.selectedDates.length > 0) {
-      const newDates: TimeConfiguration[] = [];
-
-      event.selectedDates.forEach(date => {
-        const dateStr = this.getDateString(date);
-        const existing = this.multipleDates.find(d => this.getDateString(d.date) === dateStr);
-
-        if (existing) {
-          newDates.push(existing);
-        } else {
-          // Create new time configuration for this date
-          newDates.push({
-            date: new Date(date),
-            allDay: false,
-            startTime: '1:00 AM',
-            endTime: '2:00 AM'
-          });
-        }
-      });
-
-      this.multipleDates = newDates;
-      this.emitScheduled();
-    } else {
-      this.multipleDates = [];
-      this.emitScheduled();
-    }
-  }
-
-  onMultipleDateAllDayChange(index: number) {
-    if (this.multipleDates[index]) {
-      this.multipleDates[index].allDay = !this.multipleDates[index].allDay;
-      if (this.multipleDates[index].allDay) {
-        this.multipleDates[index].date.setHours(0, 0, 0, 0);
-      } else {
-        const time = this.parseTimeString(this.multipleDates[index].startTime);
-        this.multipleDates[index].date.setHours(time.hours, time.minutes, 0, 0);
-      }
-      this.emitScheduled();
-    }
-  }
-
-  onMultipleDateStartTimeChange(index: number, time: string) {
-    if (this.multipleDates[index]) {
-      this.multipleDates[index].startTime = time;
-      if (!this.multipleDates[index].allDay) {
-        const parsed = this.parseTimeString(time);
-        this.multipleDates[index].date.setHours(parsed.hours, parsed.minutes, 0, 0);
-      }
-      this.emitScheduled();
-    }
-  }
-
-  onMultipleDateEndTimeChange(index: number, time: string) {
-    if (this.multipleDates[index]) {
-      this.multipleDates[index].endTime = time;
-      this.emitScheduled();
-    }
-  }
-
-  // Date Range Handlers
-  onRangeSelected(event: CalendarSelection) {
-    if (event.startDate && event.endDate) {
-      this.rangeStartDate = new Date(event.startDate);
-      this.rangeEndDate = new Date(event.endDate);
-      if (!this.rangeAllDay) {
-        this.updateRangeTimes();
-      }
-      this.emitScheduled();
-    } else {
-      this.rangeStartDate = null;
-      this.rangeEndDate = null;
-    }
-  }
-
-  onRangeAllDayChange() {
-    this.rangeAllDay = !this.rangeAllDay;
-    if (this.rangeStartDate && this.rangeEndDate) {
-      this.updateRangeTimes();
-      this.emitScheduled();
-    }
-  }
-
-  onRangeStartTimeChange(time: string) {
-    this.rangeStartTime = time;
-    if (this.rangeStartDate && !this.rangeAllDay) {
-      this.updateRangeTimes();
-      this.emitScheduled();
-    }
-  }
-
-  onRangeEndTimeChange(time: string) {
-    this.rangeEndTime = time;
-    if (this.rangeEndDate && !this.rangeAllDay) {
-      this.updateRangeTimes();
-      this.emitScheduled();
-    }
-  }
-
-  updateRangeTimes() {
-    if (!this.rangeStartDate || !this.rangeEndDate) return;
-
-    if (this.rangeAllDay) {
-      this.rangeStartDate.setHours(0, 0, 0, 0);
-      this.rangeEndDate.setHours(23, 59, 59, 999);
-    } else {
-      const startTime = this.parseTimeString(this.rangeStartTime);
-      const endTime = this.parseTimeString(this.rangeEndTime);
-      this.rangeStartDate.setHours(startTime.hours, startTime.minutes, 0, 0);
-      this.rangeEndDate.setHours(endTime.hours, endTime.minutes, 0, 0);
-    }
-  }
-
-  // Utility Methods
-  parseTimeString(timeStr: string): { hours: number; minutes: number } {
-    // Parse time string like "7:01 AM" or "19:01"
-    const parts = timeStr.split(' ');
-    let timePart = parts[0];
-    const ampm = parts[1];
-
-    const [hoursStr, minutesStr] = timePart.split(':');
-    let hours = parseInt(hoursStr, 10);
-    const minutes = parseInt(minutesStr || '0', 10);
-
-    if (ampm) {
-      if (ampm.toUpperCase() === 'PM' && hours !== 12) {
-        hours += 12;
-      } else if (ampm.toUpperCase() === 'AM' && hours === 12) {
-        hours = 0;
-      }
-    }
-
-    return { hours, minutes };
-  }
-
-  getDateString(date: Date): string {
-    return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
-  }
-
-  formatDate(date: Date): string {
-    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
-  }
-
-  emitScheduled() {
-    const selection: ScheduledDateSelection = {
-      mode: this.activeTab
-    };
-
-    if (this.activeTab === 'single' && this.singleDate) {
-      // For single date, create startDate and endDate with same date but different times
-      const startDate = new Date(this.singleDate);
-      const endDate = new Date(this.singleDate);
-
-      if (!this.singleAllDay) {
-        const startTime = this.parseTimeString(this.singleStartTime);
-        const endTime = this.parseTimeString(this.singleEndTime);
-        startDate.setHours(startTime.hours, startTime.minutes, 0, 0);
-        endDate.setHours(endTime.hours, endTime.minutes, 0, 0);
-      } else {
-        startDate.setHours(0, 0, 0, 0);
-        endDate.setHours(23, 59, 59, 999);
-      }
-
-      selection.singleDate = {
-        startDate: startDate,
-        endDate: endDate,
-        allDay: this.singleAllDay,
-        startTime: this.singleStartTime,
-        endTime: this.singleEndTime
-      };
-    } else if (this.activeTab === 'multiple') {
-      selection.multipleDates = this.multipleDates.map(d => ({
-        date: new Date(d.date),
-        allDay: d.allDay,
-        startTime: d.startTime,
-        endTime: d.endTime
-      }));
-    } else if (this.activeTab === 'range' && this.rangeStartDate && this.rangeEndDate) {
-      selection.dateRange = {
-        startDate: new Date(this.rangeStartDate),
-        endDate: new Date(this.rangeEndDate),
-        allDay: this.rangeAllDay,
-        startTime: this.rangeStartTime,
-        endTime: this.rangeEndTime
-      };
-    }
-
-    this.scheduled.emit(selection);
-  }
-
-  clear() {
-    this.singleDate = null;
-    this.multipleDates = [];
-    this.rangeStartDate = null;
-    this.rangeEndDate = null;
-    this.singleAllDay = false;
-    this.rangeAllDay = false;
-    this.singleStartTime = '1:00 AM';
-    this.singleEndTime = '2:00 AM';
-    this.rangeStartTime = '1:00 AM';
-    this.rangeEndTime = '2:00 AM';
-    this.cleared.emit();
-  }
-
-  apply() {
-    this.emitScheduled();
-  }
-
-}
-

package/src/lib/calender/components/time-picker/time-picker.component.css

@@ -1,174 +0,0 @@
-.time-picker-wrapper {
-  width: 100%;
-  font-family: 'Inter', sans-serif;
-}
-
-.time-input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.time-input-group label {
-  font-size: 11px;
-    font-weight: 500;
-    color: #15191E;
-    text-transform: uppercase;
-    letter-spacing: -0.28px;
-}
-
-.time-input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.time-input {
-  padding: 8px 40px 8px 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  color: #6F737B;
-  background: #ffffff;
-  transition: all 0.2s;
-  width: 100%;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-.time-input:focus {
-  outline: none;
-  border-color: #111827;
-  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
-}
-
-.time-input:hover {
-  border-color: #9ca3af;
-}
-
-.time-icon {
-  position: absolute;
-  right: 12px;
-  font-size: 16px;
-  pointer-events: none;
-  color: #9ca3af;
-  cursor: pointer;
-}
-
-/* Custom Time Picker Dropdown */
-/* .custom-time-picker-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  z-index: 1000;
-  width: 172px;
-  min-width: 172px;
-} */
-
-.custom-time-picker-wrapper {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.custom-time-picker {
-  display: flex;
-    /* align-items: center; */
-    gap: 8px;
-    background: #ffffff;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    padding: 10px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    width:182px;
-    position: absolute;
-    top: calc(100% + 4px);
-    /* right: 0; */
-    z-index: 1000;
-}
-.custom-time-picker.left-position {
-left: 0;
-}
-.custom-time-picker.right-position {
-right: 0;
-}
-.time-column {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.time-scroll {
-  display: flex;
-  flex-direction: column;
-  max-height: 95px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: #cbd5e1 transparent;
-  /* padding: 4px 0; */
-  scrollbar-width: none; /* For Firefox */
-  -ms-overflow-style: none;  /* For Internet Explorer and Edge */
-}
-
-
-.time-scroll::-webkit-scrollbar {
-  display: none;  /* For Chrome, Safari, and Opera */
-  /* width: 4px; */
-}
-
-.time-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.time-scroll::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 2px;
-}
-
-.time-scroll::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
-}
-
-.time-item {
-  min-width: 40px;
-  width: 40px;
-  height: 32px;
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 400;
-  color: #374151;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.15s ease;
-  user-select: none;
-  font-family: 'Inter', sans-serif;
-}
-
-.time-item:hover {
-  background: #f3f4f6;
-}
-
-.time-item.selected {
-  background: #111827;
-  color: #ffffff;
-  font-weight: 500;
-  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
-}
-
-.ampm-column .time-item {
-  min-width: 40px;
-  width: 40px;
-}
-
-.time-separator {
-  font-size: 16px;
-    font-weight: 600;
-    color: #6b7280;
-    margin: 5px 0 0px;
-}
-

package/src/lib/calender/components/time-picker/time-picker.component.html

@@ -1,60 +0,0 @@
-<div class="time-picker-wrapper">
-  <div class="time-input-group">
-    <label *ngIf="label">{{ label }}</label>
-    <div class="time-input-wrapper">
-      <input
-        type="text"
-        class="time-input"
-        [value]="value"
-        [placeholder]="placeholder"
-        readonly
-        (click)="togglePicker()">
-      <span class="time-icon">
-        <img alt="timer" class="timer-icon" [src]='brickclayIcons.timerIcon'/>
-      </span>
-      <div class="custom-time-picker-dropdown" *ngIf="showPicker">
-        <div class="custom-time-picker" [ngClass]="position === 'left' ? 'left-position' : 'right-position'">
-          <!-- Hours Column -->
-          <div class="time-column">
-            <div class="time-scroll" #timeScroll>
-              <div
-                *ngFor="let h of getHours()"
-                class="time-item"
-                [class.selected]="currentHour === h"
-                (click)="onHourChange(h)">
-                {{ h.toString().padStart(2, '0') }}
-              </div>
-            </div>
-          </div>
-          <span class="time-separator">:</span>
-          <!-- Minutes Column -->
-          <div class="time-column">
-            <div class="time-scroll" #timeScroll>
-              <div
-                *ngFor="let m of getMinutes()"
-                class="time-item"
-                [class.selected]="currentMinute === m"
-                (click)="onMinuteChange(m)">
-                {{ m.toString().padStart(2, '0') }}
-              </div>
-            </div>
-          </div>
-          <span class="time-separator">:</span>
-          <!-- AM/PM Column -->
-          <div class="time-column ampm-column">
-            <div class="time-scroll" #timeScroll>
-              <div
-                *ngFor="let ap of getAMPMOptions()"
-                class="time-item"
-                [class.selected]="currentAMPM === ap"
-                (click)="onAMPMChange(ap)">
-                {{ ap }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-