cats-ui-lib 2.0.1 → 2.0.2

package/src/lib/components/date-time-picker/date-time-picker.component.ts

@@ -1,591 +0,0 @@
-import { CommonModule, DatePipe } from '@angular/common';
-import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { AbstractControl, ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors } from '@angular/forms';
-import { OutsideClickDirective } from '../../directives/outside-click.directive';
-import { DateConfig } from '../../modal/cats-ui.modal';
-interface IRange {
-  value: Date;
-  label: string;
-}
-@Component({
-  selector: 'cats-ui-date-time-picker',
-  imports: [CommonModule, OutsideClickDirective],
-  templateUrl: './date-time-picker.component.html',
-  styleUrl: './date-time-picker.component.scss',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: DateTimePickerComponent,
-      multi: true,
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: DateTimePickerComponent,
-      multi: true,
-    },
-    DatePipe,
-  ],
-})
-export class DateTimePickerComponent
-  implements OnInit, OnChanges, ControlValueAccessor
-{
-  @Output() dateTimeSelected = new EventEmitter<any>();
-  @Input() dateConfig!: DateConfig;
-  @Input() minDate?: string;
-  @Input() maxDate?: string;
-  @Input() preSelectedValue: any;
-  selectedDateTime: any;
-  currentDate = new Date();
-  currentMonth = this.currentDate.getMonth();
-  currentYear = this.currentDate.getFullYear();
-  selectedDate: number | null = null;
-  selectedTime: string | null = null;
-  calendar: number[][] = [];
-  timeSlots: IRange[] = [];
-  rangeStart: number | null = null;
-  rangeEnd: number | null = null;
-  selectedMonth: any;
-  selectedYear: any;
-  control!: AbstractControl<any, any>;
-  disableControl: boolean = false;
-  date: any = '';
-  calendarView: string = 'defaultView';
-  yearRange: number[] = [];
-  daysInMonth: any[] = [];
-  selectedDay: number = 0;
-  selectedStartDate: any;
-  selectedEndDate: any;
-  isOpen: boolean = false;
-  showYearSelector = false;
-  monthRange: any = {
-    '0': 'JAN',
-    '01': 'FEB',
-    '02': 'MAR',
-    '03': 'APR',
-    '04': 'MAY',
-    '05': 'JUN',
-    '06': 'JUL',
-    '07': 'AUG',
-    '08': 'SEP',
-    '09': 'OCT',
-    '10': 'NOV',
-    '11': 'DEC',
-  };
-  constructor(
-    @Inject(LOCALE_ID) private locale: string,
-    private cd: ChangeDetectorRef,
-    private datePipe: DatePipe
-  ) {}
-  ngOnChanges(_changes: SimpleChanges): void {
-    if (!_changes['selectedDateTime']?.currentValue) {
-      this.selectedDateTime = [];
-    } else {
-      this.writeValue(this.control?.value);
-    }
-  }
-  ngOnInit(): void {
-    this.generateYearRange();
-    // this.generateCalendar();
-    this.generateTimeRanges();
-    if (this.preSelectedValue) {
-      this.initializeCalendar();
-    }
-  }
-
-  private onTouchedCallback: () => void = () => {};
-  private onChangeCallback: (_: any) => void = () => {};
-  writeValue(value: any): void {
-    if (value) {
-      this.selectedDateTime = value;
-      this.onChangeCallback(value);
-      this.cd.markForCheck();
-    }
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChangeCallback = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouchedCallback = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    if (this.control) {
-      isDisabled ? this.control.disable() : this.control.enable();
-    }
-  }
-  /**
-   * @description Validates date time picker component
-   * @author Shiva Kant
-   * @param control
-   * @returns validate
-   */
-  validate(control: AbstractControl): ValidationErrors | null {
-    this.control = control;
-    const selected = this.date ? new Date(this.date) : null;
-
-    // Check required manually
-    const isRequired =
-      control.validator && control.validator(control)?.['required'];
-
-    if (
-      (isRequired || control.hasError('required')) &&
-      (!this.date || !this.selectedDay)
-    ) {
-      return { required: true };
-    } else if (this.minDate && selected && selected < new Date(this.minDate)) {
-      return { minDate: true };
-    } else if (this.maxDate && selected && selected > new Date(this.maxDate)) {
-      return { maxDate: true };
-    }
-
-    return null;
-  }
-  /**
-   * @description method to toggleCalendar
-   * @author Shiva Kant
-   */
-  toggleCalendar(): void {
-    this.isOpen = !this.isOpen;
-    if (this.date && this.isOpen) {
-      this.currentDate = new Date(this.date);
-      this.selectedDay = this.currentDate.getDate();
-    }
-    this.calendarView = 'defaultView';
-    this.generateCalendar();
-    if (this.isOpen) {
-      let ele = document.getElementsByClassName('calendar-footer');
-      setTimeout(() => {
-        ele[0]?.scrollIntoView();
-      });
-    }
-  }
-
-  /**
-   * @description Closes calendar
-   * @author Shiva Kant
-   */
-  closeCalendar(): void {
-    this.isOpen = false;
-    this.calendarView = 'defaultView';
-  }
-  /**
-   * @description Method to Gets month year
-   * @author Shiva Kant
-   * @returns month year
-   */
-  getMonthYear(): { month: string; year: string } {
-    return {
-      month: this.currentDate.toLocaleString('default', {
-        month: 'long',
-      }),
-      year: this.currentDate.toLocaleString('default', {
-        year: 'numeric',
-      }),
-    };
-  }
-
-  /**
-   * @description Method to Updates current year month
-   * @author Shiva Kant
-   */
-  updateCurrentYearMonth(): void {
-    this.currentYear = this.currentDate.getFullYear();
-    this.currentMonth = this.currentDate.getMonth();
-  }
-
-  /**
-   * @description Method to Selects year
-   * @author Shiva Kant
-   * @param year
-   */
-  selectYear(year: number): void {
-    this.currentDate.setFullYear(year);
-    this.updateCurrentYearMonth();
-    this.showYearSelector = false;
-    this.calendarView = 'defaultView';
-    this.selectedDay = 0;
-    this.generateCalendar();
-  }
-
-  /**
-   * @description Method to Selects month
-   * @author Shiva Kant
-   * @param month
-   */
-  selectMonth(month: any): void {
-    this.currentDate.setMonth(month);
-    this.updateCurrentYearMonth();
-    this.calendarView = 'defaultView';
-    this.selectedDay = 0;
-    this.generateCalendar();
-  }
-
-  /**
-   * @description Method to Previous year range
-   * @author Shiva Kant
-   */
-  previousYearRange(): void {
-    this.yearRange = this.yearRange.map((year) => year - 18);
-  }
-
-  /**
-   * @description Method to Next year range
-   * @author Shiva Kant
-   */
-  nextYearRange(): void {
-    this.yearRange = this.yearRange.map((year) => year + 18);
-  }
-
-  /**
-   * @description Method to Toggles year selector
-   * @author Shiva Kant
-   */
-  toggleYearSelector(): void {
-    this.showYearSelector = !this.showYearSelector;
-    this.generateYearRange();
-  }
-  /**
-   * @description Method to Generates year range
-   * @author Shiva Kant
-   */
-  generateYearRange(): void {
-    const currentYear = this.currentDate.getFullYear();
-    const startYear = currentYear - (currentYear % 20);
-    this.yearRange = Array.from({ length: 18 }, (_, i) => startYear + i);
-  }
-  /**
-   * @description Method to Determines whether date selectable is
-   * @author Shiva Kant
-   * @param date
-   * @returns true if date selectable
-   */
-  isDateSelectable(date: Date): boolean {
-    const min = this.minDate ? new Date(this.minDate) : null;
-    const max = this.maxDate ? new Date(this.maxDate) : null;
-    if (min && date < min) return false;
-    if (max && date > max) return false;
-    return true;
-  }
-  /**
-   * @description Method to Determines whether day disabled is
-   * @author Shiva Kant
-   * @param day
-   * @returns true if day disabled
-   */
-  isDayDisabled(day: number): boolean {
-    const date = new Date(
-      this.currentDate.getFullYear(),
-      this.currentDate.getMonth(),
-      day
-    );
-    return !this.isDateSelectable(date);
-  }
-  /**
-   * @description Method to Generates calendar
-   * @author Shiva Kant
-   */
-  generateCalendar(): void {
-    const year = this.currentDate.getFullYear();
-    const month = this.currentDate.getMonth();
-
-    const firstDayOfMonth = new Date(year, month, 1);
-    const firstWeekDay = (firstDayOfMonth.getDay() + 6) % 7; // Convert Sunday (0) to 6, Monday is 0
-
-    const daysInCurrentMonth = new Date(year, month + 1, 0).getDate();
-    const daysInPreviousMonth = new Date(year, month, 0).getDate();
-
-    const totalCells = 42; // 6 rows of 7 days
-    const calendarDays: { day: number; date: Date; isCurrentMonth: boolean }[] =
-      [];
-
-    // Fill previous month days
-    for (let i = firstWeekDay - 1; i >= 0; i--) {
-      const day = daysInPreviousMonth - i;
-      const date = new Date(year, month - 1, day);
-      calendarDays.push({ day, date, isCurrentMonth: false });
-    }
-
-    // Fill current month days
-    for (let day = 1; day <= daysInCurrentMonth; day++) {
-      const date = new Date(year, month, day);
-      calendarDays.push({ day, date, isCurrentMonth: true });
-    }
-
-    // Fill next month days
-    const remaining = totalCells - calendarDays.length;
-    for (let day = 1; day <= remaining; day++) {
-      const date = new Date(year, month + 1, day);
-      calendarDays.push({ day, date, isCurrentMonth: false });
-    }
-
-    this.daysInMonth = calendarDays;
-  }
-
-  /**
-   * @description Method to Previous month
-   * @author Shiva Kant
-   */
-  previousMonth(): void {
-    this.currentDate.setMonth(this.currentDate.getMonth() - 1);
-    this.updateCurrentYearMonth();
-    this.selectedDay = 0;
-    this.generateCalendar();
-  }
-
-  /**
-   * @description Method to Next month
-   * @author Shiva Kant
-   */
-  nextMonth(): void {
-    this.currentDate.setMonth(this.currentDate.getMonth() + 1);
-    this.updateCurrentYearMonth();
-    this.selectedDay = 0;
-    this.generateCalendar();
-  }
-
-  /**
-   * @description Method to Initializes calendar when preSelectedValue  date
-   * @author Shiva Kant
-   * @returns calendar
-   */
-  initializeCalendar(): void {
-    if (!this.preSelectedValue) return;
-
-    // Case 1: Single date (string or Date)
-    if (
-      typeof this.preSelectedValue === 'string' ||
-      this.preSelectedValue instanceof Date
-    ) {
-      const date = new Date(this.preSelectedValue);
-      this.selectedDate = date.getDate();
-      this.selectedMonth = date.getMonth();
-      this.selectedYear = date.getFullYear();
-      this.selectedTime = this.formatTime(date);
-
-      // Update current view to show the month/year
-      this.currentDate = new Date(
-        this.selectedYear,
-        this.selectedMonth,
-        this.selectedDate
-      );
-      this.generateCalendar();
-    }
-
-    // Case 2: Range of dates
-    else if (this.preSelectedValue.start && this.preSelectedValue.end) {
-      const startDate = new Date(this.preSelectedValue.start);
-      const endDate = new Date(this.preSelectedValue.end);
-
-      // Patch component state
-      this.rangeStart = startDate.getDate();
-      this.rangeEnd = endDate.getDate();
-
-      this.selectedStartDate = startDate;
-      this.selectedEndDate = endDate;
-
-      this.selectedMonth = startDate.getMonth();
-      this.selectedYear = startDate.getFullYear();
-
-      // Set the current calendar view to the start month/year
-      this.currentDate = new Date(this.selectedYear, this.selectedMonth, 1);
-      this.generateCalendar();
-
-      // Optional: If your calendar requires a single selectedTime for range, you could pick start or end
-      this.selectedTime = this.formatTime(startDate);
-
-      // Emit initial range value
-      this.emitDateTime();
-    }
-  }
-
-  /**
-   * @description Method to Selects date
-   * @author Shiva Kant
-   * @param date
-   */
-  selectDate(date: number): void {
-    const selectedFullDate = new Date(
-      this.currentYear,
-      this.currentMonth,
-      date
-    );
-    selectedFullDate.setHours(0, 0, 0, 0);
-
-    this.selectedMonth = this.currentMonth;
-    this.selectedYear = this.currentYear;
-
-    if (this.dateConfig.selectionMode === 'single') {
-      this.selectedDate = date;
-      this.rangeStart = null;
-      this.rangeEnd = null;
-    } else {
-      if (!this.rangeStart || this.rangeEnd) {
-        this.rangeStart = date;
-        this.rangeEnd = null;
-      } else {
-        this.rangeEnd = date < this.rangeStart ? this.rangeStart : date;
-        this.rangeStart = date < this.rangeStart ? date : this.rangeStart;
-      }
-    }
-
-    this.emitDateTime();
-  }
-
-  /**
-   * @description Method to Selects time
-   * @author Shiva Kant
-   * @param time
-   */
-  selectTime(time: string): void {
-    this.selectedTime = time;
-    this.emitDateTime();
-  }
-  /**
-   * @description Method to Determines whether selected date is
-   * @author Shiva Kant
-   * @param date
-   * @returns
-   */
-  isSelectedDate(date: number, month: number, year: number): boolean {
-    if (this.dateConfig.selectionMode === 'single') {
-      // Check if the day, month, and year match
-      return (
-        this.selectedDate === date &&
-        this.selectedMonth === month &&
-        this.selectedYear === year
-      );
-    } else if (this.dateConfig.selectionMode === 'range') {
-      // Range selection checks, ensuring both start and end dates are within the same month and year
-      return !!(
-        (this.rangeStart &&
-          this.rangeStart === date &&
-          this.selectedMonth === month &&
-          this.selectedYear === year) ||
-        (this.rangeEnd &&
-          this.rangeEnd === date &&
-          this.selectedMonth === month &&
-          this.selectedYear === year) ||
-        (this.rangeStart &&
-          this.rangeEnd &&
-          date > this.rangeStart &&
-          date < this.rangeEnd &&
-          this.selectedMonth === month &&
-          this.selectedYear === year)
-      );
-    }
-    return false;
-  }
-
-  /**
-   * @description Method to Generates time ranges
-   * @author Shiva Kant
-   */
-  generateTimeRanges(): void {
-    const startTime = new Date();
-    startTime.setHours(0, 0, 0, 0);
-    this.timeSlots = Array.from({ length: 48 }, (_, i) => {
-      const time = new Date(startTime.getTime() + i * 30 * 60 * 1000);
-      return { value: time, label: this.formatTime(time) };
-    });
-  }
-
-  /**
-   * @description Method to Formats time
-   * @author Shiva Kant
-   * @param date
-   * @returns time
-   */
-  formatTime(date: Date): string {
-    return date.toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: true,
-    });
-  }
-  /**
-   * @description Method to Formats date time
-   * @author Shiva Kant
-   * @param fullDate
-   * @param selectedTime
-   * @returns date time
-   */
-  formatDateTime(fullDate: Date, selectedTime: string | null): string {
-    const date = new Date(fullDate);
-
-    if (!selectedTime) {
-      // Only date formatting when time not required
-      return this.datePipe.transform(date, 'yyyy/MM/dd')!;
-    }
-
-    const [time, period] = selectedTime.split(' ');
-    let [hours, minutes] = time.split(':').map(Number);
-
-    // Convert 12-hour → 24-hour
-    if (period === 'PM' && hours !== 12) hours += 12;
-    if (period === 'AM' && hours === 12) hours = 0;
-
-    date.setHours(hours, minutes, 0, 0);
-
-    return this.datePipe.transform(date, 'yyyy/MM/dd hh:mm a')!;
-  }
-
-  /**
-   * @description Method to Emits date time
-   * @author Shiva Kant
-   * @returns date time
-   */
-  emitDateTime(): void {
-    if (this.dateConfig.enableTime && !this.selectedTime) {
-      return; // wait until user selects time
-    }
-    if (this.dateConfig.selectionMode === 'single') {
-      if (!this.selectedDate) return;
-
-      const fullDate = new Date(
-        this.currentYear,
-        this.currentMonth,
-        this.selectedDate
-      );
-
-      this.selectedDateTime = this.formatDateTime(
-        fullDate || '',
-        this.dateConfig.enableTime ? this.selectedTime : null
-      );
-
-      this.writeValue(this.selectedDateTime);
-      this.date = this.selectedDate;
-      this.dateTimeSelected.emit(this.selectedDateTime);
-
-      return;
-    }
-    if (this.dateConfig.selectionMode === 'range') {
-      if (!this.rangeStart || !this.rangeEnd) return;
-
-      const startDate = new Date(
-        this.currentYear,
-        this.currentMonth,
-        this.rangeStart
-      );
-      const endDate = new Date(
-        this.currentYear,
-        this.currentMonth,
-        this.rangeEnd
-      );
-
-      const startDateTime = this.formatDateTime(
-        startDate,
-        this.dateConfig.enableTime ? this.selectedTime : null
-      );
-      const endDateTime = this.formatDateTime(
-        endDate,
-        this.dateConfig.enableTime ? this.selectedTime : null
-      );
-
-      const rangeResult = { start: startDateTime, end: endDateTime };
-
-      this.writeValue(rangeResult);
-      this.dateTimeSelected.emit(rangeResult);
-    }
-  }
-}

package/src/lib/components/date-time-picker/index.ts

@@ -1 +0,0 @@
-export * from "./date-time-picker.component"

package/src/lib/components/input/index.ts

@@ -1 +0,0 @@
-export * from './input.component';

package/src/lib/components/input/input.component.html

@@ -1,27 +0,0 @@
-<div class="input_container">
-  @if (inputConfig.label) {
-  <label>{{ inputConfig.label }}</label>
-  }
-  <div class="custom-input">
-    <input
-      class="input-box"
-      [type]="showPassword ? 'text' : inputConfig.type"
-      [placeholder]="inputConfig.placeholder"
-      [disabled]="disabled"
-      [(ngModel)]="value"
-      (input)="handleInput($event)"
-      (blur)="handleBlur($event)"
-      (keydown)="handleKeyDown($event)"
-      (keyup)="handleKeyUp($event)"
-    />
-    <!-- Eye Icon Only When Type Is Password -->
-    @if (inputConfig.type === 'password') {
-    <span class="eye_icon" (click)="togglePassword()">
-      <img
-        [src]="showPassword ? 'images/eye.svg' : 'images/eye-off.svg'"
-        alt="toggle password visibility"
-      />
-    </span>
-    }
-  </div>
-</div>

package/src/lib/components/input/input.component.scss

@@ -1,43 +0,0 @@
-@use "../../styles" as *;
-
-.input_container {
-  margin-bottom: rem(12px);
-  label {
-    @include fontStyle(var(--fs-16), rem(24px), 600);
-    margin-bottom: rem(8px);
-  }
-
-  .custom-input {
-    position: relative;
-    @include flex("", center, rem(8px));
-    &:has(span) input[type="text"] {
-      padding-right: rem(45px);
-    }
-
-    input {
-      @include box(100%, rem(56px));
-      padding: rem(16px);
-      @include border($radius: rem(8px));
-      @include fontStyle(var(--fs-16), rem(24px), 400);
-      &[type="password"] {
-        padding-right: rem(45px);
-      }
-      &:focus {
-        outline: none;
-        border-color: var(--blue-700);
-      }
-      &:disabled {
-        background-color: var(--neutral-100);
-        cursor: not-allowed;
-      }
-    }
-    .eye_icon {
-      position: absolute;
-      right: rem(16px);
-      img {
-        max-width: rem(20px);
-        cursor: pointer;
-      }
-    }
-  }
-}