cats-data-grid 0.0.2 → 0.0.5

package/src/lib/common-components/common-calendar/common-calendar.component.html

@@ -0,0 +1,228 @@
+<!-- Calendar -->
+
+<div
+  class="calendar_wrapper"
+  appOutsideClick
+  (clickOutSide)="closeCalendar()"
+  [ngClass]="{ 'pe-none': disableControl }"
+>
+  <div class="date_box" (click)="toggleCalendar()" #trigger>
+    @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"   adaptivePosition  [trigger]="trigger" [matchWidth]="false">
+    <div class="calendar_container">
+      <!-- for the header -->
+      <div class="calendar-header">
+        <div class="month-year">
+          <span class="month" (click)="calendarView = 'monthView'">
+            {{ getMonthYear().month }},</span
+          >
+          <div class="year" (click)="calendarView = 'yearView'">
+            <span>
+              {{ getMonthYear().year }}
+            </span>
+            <img src="images/chevron-down.svg" class="year_arrow" alt="" />
+          </div>
+        </div>
+
+        <div class="arrow_container">
+          <span class="navigation-button" (click)="previousMonth()">
+            <img src="images/arrow-up.svg" alt="" />
+          </span>
+
+          <span class="navigation-button" (click)="nextMonth()">
+            <img src="images/arrow-down.svg" alt="" />
+          </span>
+        </div>
+      </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>
+        <div class="bottom_btn">
+          <div class="btn">Clear</div>
+          <div class="btn">Today</div>
+        </div>
+      </div>
+      }
+    </div>
+    <!-- TIME SLOTS (only if showTime = true) -->
+    @if (dateConfig.enableTime) {
+    <div class="times">
+      <div class="time-picker">
+        <div class="time-column">
+          @for (timeSlot of timeSlots; track $index) {
+          <span
+            class="span_time"
+            [ngClass]="{ active: selectedTime === timeSlot.label }"
+            (click)="selectTime(timeSlot.label)"
+          >
+            {{ timeSlot.label }}
+          </span>
+          }
+        </div>
+
+        <div class="time-column">
+          @for (timeSlot of timeSlots; track $index) {
+          <span
+            class="span_time"
+            [ngClass]="{ active: selectedTime === timeSlot.label }"
+          >
+            {{ timeSlot.label }}
+          </span>
+          }
+        </div>
+
+        <div class="time-column">
+          @for (timeSlot of timeSlots; track $index) {
+          <span
+            class="span_time"
+            [ngClass]="{ active: selectedTime === timeSlot.label }"
+          >
+            {{ timeSlot.label }}
+          </span>
+          }
+        </div>
+
+        <!-- center selection indicator -->
+        <div class="center-highlight"></div>
+      </div>
+
+      <!-- @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>

package/src/lib/common-components/common-calendar/common-calendar.component.scss

@@ -0,0 +1,279 @@
+@use "../../styles" as *;
+
+.calendar_wrapper {
+  @include box(100%, 100%);
+  @include flex("", "", "", column);
+  // position: relative;
+  background-color: var(--white);
+  @include border();
+  .pe-none {
+    pointer-events: none;
+  }
+  .date_box {
+    @include flex();
+    height: rem(40px);
+    input {
+      @include fontStyle(var(--fs-14), rem(20px), 400);
+      @include box(100%, 100%);
+      cursor: pointer;
+      @include border($width: 0, $radius: rem(8px));
+      padding: rem(10px) rem(12px);
+      font-family: inherit;
+      &::placeholder {
+        color: var(--neutral-500);
+      }
+    }
+    img {
+      max-width: rem(16px);
+      margin-right: rem(12px);
+      cursor: pointer;
+    }
+  }
+  .calendar-popup {
+    display: flex;
+    position: absolute;
+    // top: rem(40px);
+    top: 0;
+    left: 100%;
+    // right: 0;
+    z-index: 10;
+    background: var(--white);
+    @include border($radius: rem(8px));
+    box-shadow: 0 rem(4px) rem(8px) 0 var(--box-shadow);
+    width: 100%;
+    min-width: rem(334px);
+    min-height: rem(368px);
+    .calendar_container {
+      flex: 1;
+      margin: rem(3px) 0;
+    }
+    .calendar-header {
+      height: rem(40px);
+      @include flex(space-between, center);
+      padding: rem(10px) rem(16px);
+      .arrow_container {
+        @include flex("", "", rem(8px));
+        .navigation-button {
+          cursor: pointer;
+          img {
+            @include box(rem(16px), rem(16px));
+          }
+        }
+      }
+      .month-year {
+        @include fontStyle(var(--fs-16), rem(28px), 600);
+        color: var(--neutral-600);
+        display: flex;
+        .year,
+        .month {
+          padding-right: rem(4px);
+          @include flex("", "", rem(8px));
+          cursor: pointer;
+          img {
+            max-width: rem(16px);
+          }
+          &.selected {
+            color: var(--blue-700);
+          }
+        }
+        // &:hover {
+        //   color: var(--blue-700);
+        //   transition: ease-in-out 0.2s;
+        // }
+      }
+    }
+    .year-selector {
+      @include flex(center, center);
+      .year-grid {
+        width: 100%;
+      }
+      img {
+        max-width: rem(20px);
+      }
+    }
+    .year-grid,
+    .month-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: rem(8px);
+      @include fontStyle(var(--fs-16), rem(28px), 500);
+      height: rem(325px);
+      color: var(--neutral-600);
+      .month,
+      .year {
+        @include flex(center, center);
+        cursor: pointer;
+        border-radius: rem(4px);
+        transition: ease-in-out 0.2s;
+        &:hover,
+        &.selected {
+          color: var(--white);
+          background-color: var(--blue-600);
+        }
+        &:hover {
+          background-color: var(--blue-100);
+          color: var(--blue-700);
+        }
+      }
+    }
+    .calendar_body {
+      @include flex(space-between, "", "", column);
+      .calendar-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        text-align: center;
+        min-width: rem(334px);
+        .days_name {
+          height: rem(40px);
+          @include fontStyle(var(--fs-14), rem(24px), 600);
+          color: var(--neutral-600);
+          @include flex(center, center);
+        }
+        %common_td_style {
+          background-color: var(--blue-600);
+          color: var(--white);
+          border-radius: 0;
+        }
+        .calendar-day {
+          border-radius: rem(2px);
+          cursor: pointer;
+          // background-color: var(--blue-50);
+          @include box(rem(47.7px), rem(40px));
+          @include flex(center, center);
+          @include fontStyle(var(--fs-14), rem(24px), 600);
+          color: var(--neutral-600);
+          &.active {
+            background-color: var(--blue-600);
+            color: var(--white);
+          }
+          &:hover {
+            background-color: var(--blue-100);
+            // border: rem(1px) solid var(--blue-700);
+            color: var(--blue-700);
+            transition: ease-in-out 0.3s;
+          }
+          &:not(:last-child) {
+            // margin-bottom: rem(8px);
+          }
+          &.selected {
+            background-color: var(--orange-600);
+            color: var(--white);
+          }
+          &.disabled {
+            color: var(--neutral-400);
+            pointer-events: none;
+            background: var(--neutral-200);
+          }
+          &.notInCurrentMonth {
+            // pointer-events: none;
+            cursor: default;
+            color: var(--neutral-400);
+            &:hover {
+              background-color: transparent;
+            }
+          }
+          &.active_start {
+            @extend %common_td_style;
+            border-top-left-radius: rem(4px);
+            border-bottom-left-radius: rem(4px);
+          }
+          &.range_between_active {
+            color: var(--blue-600);
+            background-color: var(--blue-100);
+          }
+          &.active_end {
+            @extend %common_td_style;
+            border-top-right-radius: rem(4px);
+            border-bottom-right-radius: rem(4px);
+          }
+        }
+      }
+      .bottom_btn {
+        @include flex(space-between, center);
+        padding: rem(10px) rem(16px);
+        .btn {
+          @include fontStyle(var(--fs-14), rem(20px), 600);
+          color: var(--blue-600);
+          @include flex(center, center);
+          cursor: pointer;
+        }
+      }
+    }
+
+    .time-picker {
+      position: relative;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      height: 360px;
+      overflow: hidden;
+      background: #fff;
+    }
+
+    .time-column {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow-y: auto;
+      scroll-snap-type: y mandatory;
+    }
+
+    /* hide scrollbar */
+    .time-column::-webkit-scrollbar {
+      width: 0;
+    }
+
+    /* active time */
+    .span_time.active {
+      background: #2f80ed;
+      color: #fff;
+      border-radius: 4px;
+      width: 70%;
+    }
+
+    /* center highlight line */
+    .center-highlight {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 40px;
+      transform: translateY(-50%);
+      border-top: 1px solid red;
+      border-bottom: 1px solid red;
+      pointer-events: none;
+    }
+
+    .times {
+      min-width: rem(176px);
+      max-height: rem(364px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      border-left: rem(1px) solid var(--neutral-200);
+      @include flex("", "", rem(4px), column);
+      box-shadow: -3px 0px 8px 2px #0a0d121f;
+      border-top-right-radius: rem(8px);
+      .span_time {
+        @include fontStyle(var(--fs-14), rem(20px), 600);
+        color: var(--neutral-600);
+        display: inline-block;
+        @include box(rem(48px) rem(40px));
+        max-width: rem(48px);
+        text-align: center;
+        cursor: pointer;
+        scroll-snap-align: center;
+        &:hover,
+        &.active {
+          background-color: var(--blue-100);
+          color: var(--blue-700);
+          transition: ease-in-out 0.3s;
+        }
+      }
+    }
+  }
+}
+@include width-range($tablet, $mediumDesktop) {
+  .calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

package/src/lib/common-components/common-calendar/common-calendar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommonCalendarComponent } from './common-calendar.component';
+
+describe('CommonCalendarComponent', () => {
+  let component: CommonCalendarComponent;
+  let fixture: ComponentFixture<CommonCalendarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonCalendarComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommonCalendarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});