cats-ui-lib 2.0.0 → 2.0.1

package/src/lib/components/checkbox-button/checkbox-button.component.html

@@ -0,0 +1,43 @@
+<div class="parent_container">
+  <ul>
+    @for (task of optionList; let parentIndex = $index; track $index) {
+    <li>
+      <!-- Parent Checkbox -->
+      <label class="checkbox_container">
+        <input
+          type="checkbox"
+          [name]="checkBoxConfig.name"
+          [checked]="task.checked"
+          [disabled]="
+            checkBoxConfig.disabledField
+              ? task[checkBoxConfig.disabledField]
+              : false
+          "
+          [indeterminate]="partiallyComplete(task)"
+          (change)="onCheckboxChange($event, parentIndex)"
+        />
+        <span class="textTruncate">{{ task[textField] }}</span>
+      </label>
+
+      <!-- Subtasks -->
+      @if (task.subtasks && task.subtasks.length > 0) {
+      <ul class="sub">
+        @for (sub of task.subtasks; let idx = $index; track $index) {
+        <li>
+          <label class="checkbox_container">
+            <input
+              type="checkbox"
+              [checked]="sub.checked"
+              (change)="onCheckboxChange($event, parentIndex, idx)"
+            />
+            <!-- <span class="checkmark"></span> -->
+            <span class="label-text">{{ sub[textField] }}</span>
+          </label>
+        </li>
+        }
+      </ul>
+      }
+    </li>
+    }
+  </ul>
+</div>

package/src/lib/components/checkbox-button/checkbox-button.component.scss

@@ -0,0 +1,65 @@
+@use "../../styles/index" as *;
+// ------------------Checkbox Styles--------------------
+.parent_container {
+  .sub {
+    margin-left: rem(35px);
+  }
+  .checkbox_container {
+    @include flex(flex-start, center, rem(12px));
+    @include fontStyle(var(--fs-16), rem(24px), 400);
+    margin-bottom: rem(8px);
+    // --- Disabled (check & uncheck) ---
+    input[type="checkbox"],
+    input[type="checkbox"]:checked {
+      &[disabled] {
+        cursor: default;
+        background-color: var(--neutral-100);
+        border-color: var(--neutral-100);
+        & + span {
+          color: var(--neutral-300);
+        }
+      }
+    }
+    input[type="checkbox"] {
+      appearance: none;
+      -webkit-appearance: none;
+      @include box(rem(24px), rem(24px));
+      min-width: rem(24px);
+      @include border();
+      cursor: pointer;
+      background-color: var(--white);
+      position: relative;
+      transition: all 0.2s ease;
+
+      // --- Default (unchecked) ---
+      &::after {
+        content: "";
+        display: none;
+        position: absolute;
+        @include position(rem(-1px), rem(-2px));
+        @include box(rem(24px), rem(24px));
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+      // --- Checked State ---
+      &:checked {
+        border-color: var(--blue-600);
+        background-color: var(--blue-600);
+        &::after {
+          display: block;
+          background-image: url("../../assets/images/icon-checked.svg");
+        }
+      }
+      // --- Indeterminate (minus) state ---
+      &:indeterminate {
+        border-color: var(--blue-600);
+        background-color: var(--blue-600);
+        &::after {
+          display: block;
+          background-image: url("../../assets/images/indeterminate.svg");
+        }
+      }
+    }
+  }
+}

package/src/lib/components/checkbox-button/checkbox-button.component.ts

@@ -0,0 +1,185 @@
+import { Component,EventEmitter, forwardRef, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+import { CheckBoxConfig } from '../../modal/cats-ui.modal';
+
+@Component({
+  selector: 'cats-ui-checkbox-button',
+  imports: [],
+  templateUrl: './checkbox-button.component.html',
+  styleUrl: './checkbox-button.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxButtonComponent),
+      multi: true,
+    },
+  ],
+})
+export class CheckboxButtonComponent
+  implements ControlValueAccessor, OnChanges
+{
+  @Input() checkBoxConfig!: CheckBoxConfig;
+  @Output() onCheckBoxSelection = new EventEmitter<any>();
+  @Input() optionList: any[] = [];
+  @Input() selectedOptions: any[] = [];
+
+  private onChange: (value: any[]) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  get idField(): string {
+    return this.checkBoxConfig?.idField || 'id';
+  }
+
+  get textField(): string {
+    return this.checkBoxConfig?.textField || 'name';
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['selectedOptions'] && this.selectedOptions?.length) {
+      this.applySelectedOptions();
+    }
+  }
+
+  /**
+   * @description normalizeSelectedValue the value according t
+   * @param item
+   * @returns
+   */
+  normalizeSelectedValue(item: any): string {
+    if (item == null) return '';
+
+    if (typeof item === 'string') return item; // case 1: string of id or name
+    if (item.id) return item.id; // case 2: object with id
+    if (item.name) return item.name; // case 3: object with name
+
+    return ''; // fallback
+  }
+
+  /**
+   * @description Method is to Apply selectedOptions on input change
+   * @author Shiva Kant
+   */
+  private applySelectedOptions() {
+    const normalized = this.selectedOptions.map((s: any) =>
+      this.normalizeSelectedValue(s)
+    );
+    this.optionList = this.optionList.map((task) => {
+      const taskId = task.id;
+      const taskName = task.name;
+
+      const isParentSelected =
+        normalized.includes(taskId) || normalized.includes(taskName);
+
+      const updatedSubtasks = (task.subtasks ?? []).map((sub: any) => {
+        const subId = sub.id;
+        const subName = sub.name;
+
+        return {
+          ...sub,
+          checked: normalized.includes(subId) || normalized.includes(subName),
+        };
+      });
+
+      return {
+        ...task,
+        checked:
+          isParentSelected || updatedSubtasks.every((s: any) => s.checked),
+        subtasks: updatedSubtasks,
+      };
+    });
+  }
+
+  /**
+   * @description Method is to Checkbox change handler
+   * @author Shiva Kant
+   * @param event
+   * @param parentIndex
+   * @param subIndex
+   */
+  onCheckboxChange(event: Event, parentIndex: number, subIndex?: number) {
+    const checked = (event.target as HTMLInputElement).checked;
+
+    this.optionList = this.optionList.map((task, i) => {
+      const safeTask = {
+        ...task,
+        checked: task.checked ?? false,
+        subtasks: task.subtasks ?? [],
+      };
+
+      if (i === parentIndex) {
+        if (subIndex === undefined) {
+          // Parent checkbox toggled
+          safeTask.checked = checked;
+          safeTask.subtasks = safeTask.subtasks.map((sub: any) => ({
+            ...sub,
+            checked,
+          }));
+        } else if (safeTask.subtasks[subIndex]) {
+          // Subtask toggled
+          safeTask.subtasks[subIndex].checked = checked;
+          // Parent checked only if all subtasks are checked
+          safeTask.checked = safeTask.subtasks.every((sub: any) => sub.checked);
+        }
+      }
+
+      return safeTask;
+    });
+
+    const checkedTasks = this.optionList
+      .filter(
+        (task) =>
+          (task.checked ?? false) ||
+          task.subtasks?.some((s: any) => s.checked ?? false)
+      )
+      .map((task) => ({
+        ...task,
+        subtasks: task.subtasks?.filter((s: any) => s.checked ?? false) || [],
+      }));
+
+    const selectedObjects = checkedTasks.map((task) => ({
+      ...task,
+      subtasks: task.subtasks.filter((s: any) => s.checked),
+    }));
+
+    this.onCheckBoxSelection.emit(selectedObjects);
+    this.onChange(this.optionList);
+    this.onTouched();
+  }
+  /**
+   * @description Indeterminate state for parent on option checked
+   * @param task
+   * @returns
+   */
+  partiallyComplete(task: any): boolean {
+    if (!task?.subtasks?.length) return false;
+    const done = task.subtasks.filter((t: any) => t.checked).length;
+    return done > 0 && done < task.subtasks.length;
+  }
+
+  // ControlValueAccessor methods
+  writeValue(value: any[]): void {
+    if (value) {
+      this.optionList = value.map((task) => ({
+        ...task,
+        subtasks: task.subtasks ? [...task.subtasks] : [],
+      }));
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.optionList.forEach((task) => {
+        task.checked = false;
+        task.subtasks?.forEach((sub: any) => (sub.checked = false));
+      });
+    }
+  }
+}

package/src/lib/components/checkbox-button/index.ts

@@ -0,0 +1 @@
+export * from "./checkbox-button.component"

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

@@ -0,0 +1,179 @@
+<!-- Calendar -->
+
+<div
+  class="calendar_wrapper"
+  catsOutsideClick
+  (clickOutSide)="closeCalendar()"
+  [ngClass]="{ 'pe-none': disableControl }"
+>
+  <div class="date_box" (click)="toggleCalendar()">
+    @if (dateConfig.selectionMode=='single') {
+
+    <input
+      type="text"
+      placeholder="Select Date"
+      [value]="selectedDateTime"
+      readonly
+      [disabled]="disableControl"
+    />
+    } @else {
+    <input
+      type="text"
+      placeholder="Select date Range"
+      [value]="
+        selectedDateTime.start
+          | date
+            : 'MM/dd/yyyy' +
+                ' - ' +
+                (selectedDateTime.end | date : 'MM/dd/yyyy')
+      "
+      readonly
+    />
+    }
+    <!-- <i-feather name="calendar" class="calendar_icon"></i-feather> -->
+    <img src="images/calendar.svg" alt="" />
+  </div>
+  @if (isOpen) {
+  <div class="calendar-popup">
+    <!-- for the header -->
+    <div class="calendar-header">
+      <span class="navigation-button" (click)="previousMonth()">
+        <img src="images/chevron-left.svg" alt="" />
+        <!-- <i-feather name="chevron-left"></i-feather -->
+      </span>
+      <div class="month-year">
+        <span class="month" (click)="calendarView = 'monthView'">
+          {{ getMonthYear().month }}</span
+        >
+        <span class="year" (click)="calendarView = 'yearView'">{{
+          getMonthYear().year
+        }}</span>
+      </div>
+
+      <span class="navigation-button" (click)="nextMonth()">
+        <img src="images/chevron-right.svg" alt="" />
+
+        <!-- <i-feather name="chevron-right"></i-feather -->
+      </span>
+    </div>
+    @if(calendarView === "monthView"){
+    <div class="month-grid">
+      @for(month of monthRange | keyvalue; track $index){
+      <span
+        class="month"
+        (click)="selectMonth(month.key)"
+        [ngClass]="{ selected: month.key == currentDate.getMonth() }"
+        >{{ month.value }}</span
+      >
+      }
+    </div>
+    } @else if(calendarView === 'yearView'){
+    <div class="year-selector">
+      <span class="navigation-button pointer" (click)="previousYearRange()">
+        <img src="images/chevron-left.svg" alt="" />
+      </span>
+      <div class="year-grid">
+        @for(year of yearRange;track $index){
+        <span
+          class="year"
+          (click)="selectYear(year)"
+          [ngClass]="{ selected: year == currentDate.getFullYear() }"
+          >{{ year }}</span
+        >
+        }
+      </div>
+      <span class="navigation-button pointer" (click)="nextYearRange()">
+        <img src="images/chevron-right.svg" alt="" />
+      </span>
+    </div>
+    } @else {
+    <div class="calendar_body">
+      <div class="calendar-grid">
+        <!-- Day names -->
+        @for (day of ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; track $index) {
+
+        <div class="days_name">
+          {{ day }}
+        </div>
+        }
+
+        <!-- Calendar dates -->
+        @for (dayObj of daysInMonth; track $index) {
+        <div
+          class="calendar-day"
+          [ngClass]="{
+            active:
+              dayObj.isCurrentMonth &&
+              dateConfig.selectionMode === 'single' &&
+              isSelectedDate(
+                dayObj.day,
+                dayObj.date.getMonth(),
+                dayObj.date.getFullYear()
+              ),
+
+            active_start:
+              dayObj.isCurrentMonth &&
+              dateConfig.selectionMode === 'range' &&
+              isSelectedDate(
+                dayObj.day,
+                dayObj.date.getMonth(),
+                dayObj.date.getFullYear()
+              ) &&
+              dayObj.day === rangeStart,
+
+            active_end:
+              dayObj.isCurrentMonth &&
+              dateConfig.selectionMode === 'range' &&
+              isSelectedDate(
+                dayObj.day,
+                dayObj.date.getMonth(),
+                dayObj.date.getFullYear()
+              ) &&
+              dayObj.day === rangeEnd,
+
+            range_between_active:
+              dayObj.isCurrentMonth &&
+              dateConfig.selectionMode === 'range' &&
+              isSelectedDate(
+                dayObj.day,
+                dayObj.date.getMonth(),
+                dayObj.date.getFullYear()
+              ) &&
+              rangeStart != null && rangeEnd != null &&
+              dayObj.day > rangeStart &&
+              dayObj.day < rangeEnd,
+
+            other_month: !dayObj.isCurrentMonth,
+            disabled: isDayDisabled(dayObj.day),
+            notInCurrentMonth: !dayObj.isCurrentMonth
+          }"
+          (click)="
+            dayObj.isCurrentMonth &&
+              !isDayDisabled(dayObj.day) &&
+              selectDate(dayObj.day)
+          "
+        >
+          {{ dayObj.day }}
+        </div>
+        }
+      </div>
+
+      <!-- TIME SLOTS (only if showTime = true) -->
+      @if (dateConfig.enableTime) {
+      <div class="times">
+        @for (timeSlot of timeSlots; track $index) {
+        <span
+          class="span_time"
+          [ngClass]="{ active: selectedTime === timeSlot.label }"
+          (click)="selectTime(timeSlot.label)"
+        >
+          {{ timeSlot.label }}
+        </span>
+        }
+      </div>
+      }
+    </div>
+    }
+  </div>
+  }
+</div>