cats-ui-lib 2.0.1 → 2.0.2

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

@@ -1,43 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-@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

@@ -1,185 +0,0 @@
-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

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

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

@@ -1,179 +0,0 @@
-<!-- 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>