nexheal-lib 0.0.2 → 0.0.3

package/projects/nexheal-lib/src/lib/controls/calendar-control/calendar-control.component.ts

@@ -0,0 +1,759 @@
+import { CommonModule, DatePipe } from "@angular/common";
+import { Component, OnInit, forwardRef, Input, HostListener, ViewChild, ElementRef, EventEmitter, Output, OnDestroy } from "@angular/core";
+import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
+import { createPopper, Instance as PopperInstance } from "@popperjs/core";
+type ViewMode = "day" | "month" | "yearRange";
+
+@Component({
+  selector: "calendar-control",
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  templateUrl: "./calendar-control.component.html",
+  styleUrl: "./calendar-control.component.scss",
+  providers: [
+    DatePipe,
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CalendarControl),
+      multi: true,
+    },
+  ],
+})
+export class CalendarControl implements ControlValueAccessor, OnInit, OnDestroy {
+
+  @Input() title!: string;
+  @Input() required: boolean = false;
+  @Input() customClass: string | object = "";
+  @Input() clearVal: boolean = true;
+  @Input() deFocus: boolean = true;
+  @Input() error: boolean = false;
+  @Input() errorMessage: string = "";
+  @Input() inputLoader: boolean = false;
+  @Input() hourFormat: string = "24";
+  @Input() selectionMode: string = "single";
+  @Input() timeOnly = false;
+  @Input() dateFormat: string = "dd/MM/yyyy";
+  @Input() placeholder: string = "dd-mm-yyyy";
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() submitted = false;
+  @Input() inputPlaceholder: boolean = false;
+  @Input("close-val") closeVal: boolean = false;
+  @Input() showTime = false;
+  @Output() selectionCleared = new EventEmitter<void>();
+  @Output() blurEvent = new EventEmitter<void>();
+  @Output() dateSelected = new EventEmitter<Date | null>();
+
+  private _minDate?: string;
+  private _maxDate?: string;
+  @Input() get minDate(): string | undefined {
+    return this._minDate;
+  }
+  set minDate(value: string | undefined) {
+    this._minDate = value;
+  }
+  @Input() get maxDate(): string | undefined {
+    return this._maxDate;
+  }
+  set maxDate(value: string | undefined) {
+    this._maxDate = value;
+  }
+  get meridian(): 'AM' | 'PM' {
+    if (this.hourFormat !== '12') return 'AM';
+    return this.selectedHour >= 12 ? 'PM' : 'AM';
+  }
+  private static _currentlyOpen?: CalendarControl;
+  private onChangeFn: (val: string | null) => void = () => { };
+  private onTouchedFn: () => void = () => { };
+  private popperInstance: PopperInstance | null = null;
+
+  @ViewChild("root", { static: true }) rootElement!: ElementRef;
+  @ViewChild("inputEl", { static: true }) inputEl!: ElementRef<HTMLElement>;
+  @ViewChild("datePicker", { static: false }) datePickerEl!: ElementRef<HTMLElement>;
+
+  isOpen: boolean = false;
+  focus: boolean = false;
+  displayMonth: number;
+  displayYear: number;
+  selectedDate: Date | null = null;
+  today = new Date();
+  todayYear = this.today.getFullYear();
+  todayMonth = this.today.getMonth();
+  todayDate = this.today.getDate();
+  selectedHour = this.today.getHours();
+  selectedMinute = this.today.getMinutes();
+  dayClassMap: {
+    [day: number]: { disabled: boolean; selected: boolean; today: boolean };
+  } = {};
+
+  inputVal: string | null = null; // Replace with the appropriate type and default value
+  yearRangeSize = 15; // The year range view shows a chunk of years, for example 15 years at a time.
+  currentView: ViewMode = "day";
+  inputControl: FormControl = new FormControl({ value: "", disabled: false });
+
+  constructor(
+    public datePipe: DatePipe
+  ) {
+    const today = new Date();
+    this.displayMonth = today.getMonth();
+    this.displayYear = today.getFullYear();
+  }
+
+  ngOnInit(): void {
+    const now = new Date();
+    this.displayYear = now.getFullYear();
+    this.displayMonth = now.getMonth();
+  }
+
+  ngAfterViewChecked() {
+    if (this.isOpen) {
+      this.initializePopper();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.isOpen) {
+      this.initializePopper();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyPopper();
+  }
+
+  writeValue(value: any): void {
+    // 1) Clear out if no value
+    if (!value) {
+      this.selectedDate = null;
+      this.inputControl.setValue("", { emitEvent: false });
+      return;
+    }
+    if (this.timeOnly) {
+      let hours: number, mins: number;
+
+      if (typeof value === "string") {
+        // “HH:mm” or “hh:mm AM/PM”
+        const m24 = value.match(/^(\d{1,2}):(\d{2})$/);
+        const m12 = value.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+        if (m24) {
+          hours = +m24[1];
+          mins = +m24[2];
+        } else if (m12) {
+          let h = +m12[1];
+          if (/PM/i.test(m12[3]) && h < 12) h += 12;
+          if (/AM/i.test(m12[3]) && h === 12) h = 0;
+          hours = h;
+          mins = +m12[2];
+        } else {
+          // fallback parse
+          const dt = new Date(value);
+          hours = dt.getHours();
+          mins = dt.getMinutes();
+        }
+      } else if (value instanceof Date) {
+        hours = value.getHours();
+        mins = value.getMinutes();
+      } else {
+        // maybe a timestamp or something else
+        const dt = new Date(value);
+        hours = dt.getHours();
+        mins = dt.getMinutes();
+      }
+
+      // 3) Apply
+      this.selectedHour = hours;
+      this.selectedMinute = mins;
+      // 4) Write back into the formControl & notify forms
+      const out = this.formatOutputTimeOnly();
+      this.inputControl.setValue(out, { emitEvent: false });
+      this.onChangeFn(out);
+      this.onTouchedFn();
+
+      return;
+    }
+    // 2) Parse the incoming string (dd/MM/yyyy or dd/MM/yyyy HH:mm)
+    const parsed = this.parseDate(value);
+    this.selectedDate = parsed;
+    if (this.showTime) {
+      const raw = value as string;
+
+      // split into date vs time
+      let datePart = raw,
+        timePart: string | null = null;
+      const parts = raw.match(/^(.+?)\s+(.+)$/);
+      if (parts) {
+        datePart = parts[1];
+        timePart = parts[2];
+      }
+
+      // parse the date
+      const parsedDate = this.parseDate(datePart);
+      if (!parsedDate) {
+        return this.clearDate(new Event("manual"));
+      }
+
+      // parse the time portion (reuse your timeOnly logic)
+      if (timePart) {
+        let h: number, m: number;
+        const m24 = timePart.match(/^(\d{1,2}):(\d{2})$/);
+        const m12 = timePart.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+
+        if (m24) {
+          h = +m24[1];
+          m = +m24[2];
+        } else if (m12) {
+          h = +m12[1];
+          m = +m12[2];
+          if (/PM/i.test(m12[3]) && h < 12) h += 12;
+          if (/AM/i.test(m12[3]) && h === 12) h = 0;
+        } else {
+          const dt = new Date(`1970-01-01T${timePart}`);
+          h = dt.getHours();
+          m = dt.getMinutes();
+        }
+
+        parsedDate.setHours(h, m);
+        this.selectedHour = h;
+        this.selectedMinute = m;
+
+      }
+
+      // update calendar view & control value
+      this.selectedDate = parsedDate;
+      this.displayMonth = parsedDate.getMonth();
+      this.displayYear = parsedDate.getFullYear();
+      const out = this.formatOutput(parsedDate);
+
+      this.inputControl.setValue(out, { emitEvent: false });
+      this.onChangeFn(out);
+      this.onTouchedFn();
+      return;
+    }
+    if (parsed) {
+      // 3) Always update the calendar view
+      this.displayMonth = parsed.getMonth();
+      this.displayYear = parsed.getFullYear();
+
+      // 4) ONLY if showTime is on, pull hours/minutes
+      if (this.showTime) {
+        this.selectedHour = parsed.getHours();
+        this.selectedMinute = parsed.getMinutes();
+
+      }
+
+      // 5) Finally, set the input text via your formatter
+      this.inputControl.setValue(this.formatOutput(parsed), {
+        emitEvent: false,
+      });
+    }
+  }
+
+  registerOnChange(fn: (value: string | null) => void): void {
+    this.onChangeFn = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouchedFn = fn;
+  }
+  setData(config: any) {
+    if (config.hasOwnProperty("placeholder")) {
+      this.placeholder = config.placeholder;
+    }
+  }
+
+  // events
+  onBlur() {
+    this.onTouchedFn();
+    const raw = this.inputControl.value as string;
+    if (this.showTime && !this.timeOnly) {
+      // split off the date vs. time
+      const match = raw.match(/^(.+?)\s+(.+)$/);
+      const datePart = match ? match[1] : raw;
+      const timePart = match ? match[2] : "";
+      // parse the date
+      const pd = this.parseDate(datePart);
+      if (!pd) return this.clearDate(new Event("manual"));
+      // parse the time portion (reuse your timeOnly logic)
+      let h: number, m: number;
+      const m24 = timePart.match(/^(\d{1,2}):(\d{2})$/);
+      const m12 = timePart.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+      if (m24) {
+        h = +m24[1];
+        m = +m24[2];
+      } else if (m12) {
+        h = +m12[1];
+        m = +m12[2];
+        if (/PM/i.test(m12[3]) && h < 12) h += 12;
+        if (/AM/i.test(m12[3]) && h === 12) h = 0;
+      } else {
+        const tmp = new Date(`1970-01-01T${timePart}`);
+        h = tmp.getHours();
+        m = tmp.getMinutes();
+      }
+      // apply
+      pd.setHours(h, m);
+      this.selectedDate = pd;
+      this.selectedHour = h;
+      this.selectedMinute = m;
+
+      // update calendar view
+      this.displayMonth = pd.getMonth();
+      this.displayYear = pd.getFullYear();
+      // write back into the input & notify
+      const out = this.formatOutput(pd);
+      this.inputControl.setValue(out, { emitEvent: false });
+      this.onChangeFn(out);
+      this.dateSelected.emit(pd);
+      this.blurEvent.emit();
+      return;
+    }
+    if (this.timeOnly) {
+      // try 24-hour HH:mm
+      let m = raw.match(/^(\d{1,2}):(\d{2})$/);
+      // or 12-hour h:mm AM/PM
+      const mAmPm = !m && raw.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+
+      if (m) {
+        // 24h
+        const h = +m[1],
+          min = +m[2];
+        if (h < 24 && min < 60) {
+          this.selectedHour = h;
+          this.selectedMinute = min;
+
+        } else {
+          return this.clearDate(new Event("manual"));
+        }
+      } else if (mAmPm) {
+        // 12h
+        let h = +mAmPm[1],
+          min = +mAmPm[2];
+        const ap = mAmPm[3].toUpperCase();
+        if (h >= 1 && h <= 12 && min < 60) {
+          if (ap === "PM" && h < 12) h += 12;
+          if (ap === "AM" && h === 12) h = 0;
+          this.selectedHour = h;
+          this.selectedMinute = min;
+
+        } else {
+          return this.clearDate(new Event("manual"));
+        }
+      } else {
+        // not a valid time string
+        return this.clearDate(new Event("manual"));
+      }
+      const out = this.formatOutputTimeOnly();
+      this.inputControl.setValue(out, { emitEvent: false });
+      this.onChangeFn(out);
+      this.dateSelected.emit(this.selectedDate);
+      this.blurEvent.emit();
+      return;
+    }
+    if (this.showTime) {
+      this.blurEvent.emit();
+      return;
+    }
+    const parsed = this.parseDate(raw);
+
+    if (!parsed) {
+      this.clearDate(new Event("manual"));
+    } else {
+      this.selectedDate = parsed;
+      this.displayMonth = parsed.getMonth();
+      this.displayYear = parsed.getFullYear();
+      this.selectedHour = parsed.getHours();
+      this.selectedMinute = parsed.getMinutes();
+
+      const formatted = this.formatOutput(parsed);
+      this.inputControl.setValue(formatted, { emitEvent: false });
+      this.onChangeFn(formatted);
+    }
+    this.blurEvent.emit();
+  }
+  onFocus() {
+    this.focus = true;
+  }
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+  onInputKeydown(event: KeyboardEvent) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.toggleCalendar();
+        break;
+      case "Escape":
+        this.isOpen = false;
+        break;
+      case " ":
+      case "Spacebar":
+        event.preventDefault();
+        this.toggleCalendar();
+        break;
+      case "Tab":
+        this.isOpen = false;
+        break;
+    }
+  }
+
+  // day
+  selectDay(day: number | null) {
+    if (!day) return;
+    const picked = this.showTime
+      ? this.buildDateWithTime(day)
+      : new Date(this.displayYear, this.displayMonth, day);
+
+    if (this.isDateDisabled(picked)) return;
+
+    this.selectedDate = picked;
+
+    const out = this.formatOutput(picked);
+
+    this.inputControl.setValue(out, { emitEvent: false });
+
+    this.onChangeFn(out);
+    this.onTouchedFn();
+    this.dateSelected.emit(picked);
+
+    this.isOpen = false;
+  }
+  get daysInMonth(): (number | null)[] {
+    const firstDay = new Date(this.displayYear, this.displayMonth, 1).getDay();
+    const totalDays = new Date(
+      this.displayYear,
+      this.displayMonth + 1,
+      0
+    ).getDate();
+    const offset = firstDay;
+
+    const daysArray: (number | null)[] = Array(offset).fill(null);
+    this.dayClassMap = {}; // Reset
+
+    for (let i = 1; i <= totalDays; i++) {
+      const date = new Date(this.displayYear, this.displayMonth, i);
+
+      this.dayClassMap[i] = {
+        disabled: this.isDateDisabled(date),
+        selected:
+          this.selectedDate?.getFullYear() === this.displayYear &&
+          this.selectedDate?.getMonth() === this.displayMonth &&
+          this.selectedDate?.getDate() === i,
+        today:
+          this.todayYear === this.displayYear &&
+          this.todayMonth === this.displayMonth &&
+          this.todayDate === i,
+      };
+
+      daysArray.push(i);
+    }
+
+    return daysArray;
+  }
+  parseDate(val: any): Date | null {
+    if (typeof val === "string") {
+      const m = val.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+      if (m) {
+        const d = +m[1],
+          mo = +m[2] - 1,
+          y = +m[3];
+        return new Date(y, mo, d);
+      }
+    }
+    // fallback
+    const date = new Date(val);
+    return isNaN(date.getTime()) ? null : date;
+  }
+  formatOutput(date: Date): string {
+    const datePart = this.datePipe.transform(date, this.dateFormat)!;
+    if (this.showTime) {
+      const timeFormat = this.hourFormat === "12" ? "hh:mm a" : "HH:mm";
+      const timePart = this.datePipe.transform(date, timeFormat)!;
+      return `${datePart} ${timePart}`;
+    }
+    return datePart;
+  }
+  isSelectedDay(day: number | null): boolean {
+    if (!this.selectedDate || !day) return false;
+    return (
+      this.selectedDate.getFullYear() === this.displayYear &&
+      this.selectedDate.getMonth() === this.displayMonth &&
+      this.selectedDate.getDate() === day
+    );
+  }
+  isDateDisabled(d: Date): boolean {
+    if (this._minDate && d < new Date(this._minDate)) return true;
+    if (this._maxDate && d > new Date(this._maxDate)) return true;
+    return false;
+  }
+  isDayDisabled(day: number | null): boolean {
+    return (
+      day !== null &&
+      this.isDateDisabled(new Date(this.displayYear, this.displayMonth, day))
+    );
+  }
+
+  // month
+  goToMonthView() {
+    this.currentView = "month";
+  }
+  months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  selectMonth(index: number) {
+    this.displayMonth = index;
+    this.currentView = "day";
+  }
+  get displayMonthName(): string {
+    return this.months[this.displayMonth];
+  }
+  prevMonth() {
+    if (this.displayMonth === 0) {
+      this.displayMonth = 11;
+      this.displayYear--;
+    } else {
+      this.displayMonth--;
+    }
+  }
+  nextMonth() {
+    if (this.displayMonth === 11) {
+      this.displayMonth = 0;
+      this.displayYear++;
+    } else {
+      this.displayMonth++;
+    }
+  }
+
+  // year
+  goToYearRangeView() {
+    this.currentView = "yearRange";
+  }
+  get yearRange(): number[] {
+    const startYear = this.getStartYearForRange();
+    const years: number[] = [];
+    for (let i = 0; i < this.yearRangeSize; i++) {
+      years.push(startYear + i);
+    }
+    return years;
+  }
+  getStartYearForRange(): number {
+    const remainder = this.displayYear % this.yearRangeSize;
+    return this.displayYear - remainder;
+  }
+  selectYear(year: number) {
+    this.displayYear = year;
+    this.currentView = "month";
+  }
+  prevYearRange() {
+    this.displayYear -= this.yearRangeSize;
+  }
+  nextYearRange() {
+    this.displayYear += this.yearRangeSize;
+  }
+
+  // time picker
+  private formatOutputTimeOnly(): string {
+    // you could choose 12h vs 24h based on hourFormat
+    return this.datePipe.transform(
+      new Date(0, 0, 0, this.selectedHour, this.selectedMinute),
+      this.hourFormat === "12" ? "hh:mm a" : "HH:mm"
+    )!;
+  }
+  private patchDateWithTime() {
+    if (!this.selectedDate) {
+      const now = new Date();
+      this.selectedDate = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate(),
+        this.selectedHour,
+        this.selectedMinute
+      );
+    } else {
+      this.selectedDate.setHours(this.selectedHour, this.selectedMinute);
+    }
+
+    const output = this.timeOnly
+      ? this.formatOutputTimeOnly()
+      : this.formatOutput(this.selectedDate);
+
+    this.inputControl.setValue(output, { emitEvent: false });
+    this.onChangeFn(output);
+    this.onTouchedFn();
+    this.dateSelected.emit(this.selectedDate);
+  }
+  setMeridian(value: "AM" | "PM") {
+    if (this.meridian === value) return;
+    if (value === "AM" && this.selectedHour >= 12) {
+      this.selectedHour -= 12;
+    } else if (value === "PM" && this.selectedHour < 12) {
+      this.selectedHour += 12;
+    }
+    this.patchDateWithTime();
+  }
+  private buildDateWithTime(day: number): Date {
+    return new Date(
+      this.displayYear,
+      this.displayMonth,
+      day,
+      this.selectedHour,
+      this.selectedMinute
+    );
+  }
+  incrementHour() {
+    this.selectedHour = (this.selectedHour + 1) % 24;
+    if (this.showTime || this.timeOnly) this.patchDateWithTime();
+  }
+  decrementHour() {
+    this.selectedHour = (this.selectedHour + 23) % 24;
+    if (this.showTime || this.timeOnly) this.patchDateWithTime();
+  }
+  incrementMinute() {
+    this.selectedMinute++;
+    if (this.selectedMinute >= 60) {
+      this.selectedMinute = 0;
+      this.selectedHour = (this.selectedHour + 1) % 24;
+    }
+    if (this.showTime || this.timeOnly) {
+      this.patchDateWithTime();
+    }
+  }
+  decrementMinute() {
+    this.selectedMinute--;
+    if (this.selectedMinute < 0) {
+      this.selectedMinute = 59;
+      // go back an hour, wrapping 0 → 23
+      this.selectedHour = (this.selectedHour + 23) % 24;
+    }
+    if (this.showTime || this.timeOnly) {
+      this.patchDateWithTime();
+    }
+  }
+
+  // popper
+  initializePopper() {
+    if (
+      !this.popperInstance &&
+      this.inputEl?.nativeElement &&
+      this.datePickerEl?.nativeElement
+    ) {
+      this.popperInstance = createPopper(
+        this.inputEl.nativeElement,
+        this.datePickerEl.nativeElement,
+        {
+          placement: "bottom-start",
+          modifiers: [
+            { name: "offset", options: { offset: [0, 1] } },
+            { name: "preventOverflow", options: { boundary: "viewport" } },
+            { name: "flip", options: { fallbackPlacements: ["top-start"] } },
+          ],
+        }
+      );
+      this.popperInstance.update();
+    }
+  }
+  destroyPopper() {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+  }
+
+  // toggle, open, close and clear 
+  toggleCalendar(): void {
+    if (this.disabled || this.readonly) return;
+
+    // if another calendar is open, close it
+    if (
+      !this.isOpen &&
+      CalendarControl._currentlyOpen &&
+      CalendarControl._currentlyOpen !== this
+    ) {
+      CalendarControl._currentlyOpen.closeCalendar();
+    }
+
+    // flip open/close
+    this.isOpen = !this.isOpen;
+
+    if (this.isOpen) {
+      // mark this one as current
+      CalendarControl._currentlyOpen = this;
+
+      // reset the month/year view
+      this.currentView = "day";
+      if (this.selectedDate) {
+        this.displayMonth = this.selectedDate.getMonth();
+        this.displayYear = this.selectedDate.getFullYear();
+      } else {
+        const now = new Date();
+        this.displayMonth = now.getMonth();
+        this.displayYear = now.getFullYear();
+      }
+
+      // destroy any old popper
+      if (this.popperInstance) {
+        this.popperInstance.destroy();
+        this.popperInstance = null;
+      }
+      if (this.inputEl && this.datePickerEl) {
+        this.popperInstance = createPopper(
+          this.inputEl.nativeElement,
+          this.datePickerEl.nativeElement,
+          {
+            placement: "bottom-start",
+            modifiers: [
+              { name: "offset", options: { offset: [0, 1] } },
+              { name: "preventOverflow", options: { boundary: "viewport" } },
+              { name: "flip", options: { fallbackPlacements: ["top-start"] } },
+            ],
+          }
+        );
+        this.popperInstance.update();
+      }
+    } else {
+      this.destroyPopper();
+    }
+  }
+  openCalendar() {
+    if (this.disabled || this.readonly || this.isOpen) return;
+    this.toggleCalendar();
+  }
+  @HostListener("document:click", ["$event"])
+  clickOutside(event: Event) {
+    if (!this.rootElement.nativeElement.contains(event.target) && this.isOpen) {
+      this.isOpen = false;
+    }
+  }
+  public closeCalendar() {
+    this.destroyPopper();
+    this.isOpen = false;
+    if (CalendarControl._currentlyOpen === this) {
+      CalendarControl._currentlyOpen = undefined;
+    }
+  }
+  clearDate(event: Event) {
+    this.selectionCleared.emit();
+    event.stopPropagation();
+    this.selectedDate = null;
+    this.selectedHour = this.today.getHours();
+    this.selectedMinute = this.today.getMinutes();
+    this.inputControl.setValue("", { emitEvent: false });
+
+    this.onChangeFn(null);
+    this.onTouchedFn();
+    this.dateSelected.emit(null);
+  }
+}