nexheal-lib 0.0.3 → 0.0.4

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

@@ -1,152 +0,0 @@
-<div class="form-group calendar" [ngClass]="customClass">
-  <label class="inp-label" [ngClass]="{'required' : required}" *ngIf="title">{{ title }}</label>
-  <div class="form-group calendar" #root  (click)="openCalendar()" >
-    <input type="text" #inputEl [placeholder]="(inputPlaceholder && placeholder) ? placeholder : ''"
-      [formControl]="inputControl" class="form-control" [ngClass]="{ 'is-invalid': error }" (blur)="onBlur()"
-      (focus)="onFocus()"  (click)="openCalendar(); $event.stopPropagation()" (keydown)="onInputKeydown($event)" />
-
-    <span class="focus-border" *ngIf="deFocus"></span>
-    <span class="calendar-icon">
-      <i class="he" [ngClass]="!timeOnly ? 'he-calendar-blank' : 'he-clock'"></i>
-    </span>
-    <label class="clear" *ngIf="!inputLoader && (selectedDate && !disabled) && clearVal" (click)="clearDate($event)">
-      <i class="he he-close"></i>
-    </label>
-    <label *ngIf="inputLoader" class="loader input-loader"></label>
-    <div *ngIf="error" class="val-msg">{{ errorMessage }}</div>
-
-    <div class="datepicker-group" #datePicker *ngIf="isOpen" (click)="$event.stopPropagation()">
-      
-      <!-- time picker -->
-      <ng-container *ngIf="timeOnly">
-        <div class="time-picker">
-          <div class="time-select">
-            <button (click)="incrementHour()"><i class="he he-chevron-up"></i></button>
-            <ng-container *ngIf="hourFormat === '12'; else show24">
-              <div class="time-value">
-                {{ ((selectedHour % 12) || 12) | number:'2.0' }}
-              </div>
-            </ng-container>
-            <ng-template #show24>
-              <div class="time-value">
-                {{ selectedHour | number:'2.0' }}
-              </div>
-            </ng-template>
-
-            <button (click)="decrementHour()"><i class="he he-chevron-down"></i></button>
-          </div>
-          <span class="time-separator">:</span>
-          <div class="time-select">
-            <button (click)="incrementMinute()"><i class="he he-chevron-up"></i></button>
-            <div class="time-value">{{ selectedMinute | number:'2.0' }}</div>
-            <button (click)="decrementMinute()"><i class="he he-chevron-down"></i></button>
-          </div>
-          <div class="ampm-toggle" *ngIf="hourFormat === '12'">
-            <button type="button" [class.active]="meridian === 'AM'" (click)="setMeridian('AM')">AM</button>
-            <button type="button" [class.active]="meridian === 'PM'" (click)="setMeridian('PM')">PM</button>
-          </div>
-        </div>
-      </ng-container>
-
-      <!-- day view -->
-      <ng-container *ngIf="!timeOnly && currentView === 'day'">
-        <div class="header">
-          <button class="calendar-arrow" (click)="prevMonth()"><i class="he he-chevron-left"></i></button>
-          <div class="title" (click)="goToMonthView()">
-            <div>{{ displayMonthName }}</div>
-            <div>{{ displayYear }}</div>
-          </div>
-          <button class="calendar-arrow" (click)="nextMonth()"><i class="he he-chevron-right"></i></button>
-        </div>
-        <div class="week-header">
-          <div>Sun</div>
-          <div>Mon</div>
-          <div>Tue</div>
-          <div>Wed</div>
-          <div>Thu</div>
-          <div>Fri</div>
-          <div>Sat</div>
-        </div>
-        <div class="days-grid">
-          <div class="day-cell" *ngFor="let day of daysInMonth" (click)="selectDay(day)"
-            [class.disabled]="day !== null && dayClassMap[day].disabled"
-            [class.selected]="day !== null && dayClassMap[day].selected" [class.today]="
-                      day !== null &&
-                      displayYear === todayYear   &&
-                      displayMonth === todayMonth &&
-                      day === todayDate
-                    ">
-            {{day ? day : ''}}
-          </div>
-        </div>
-        <ng-container *ngIf="showTime">
-          <div class="time-picker">
-            <div class="time-select">
-              <button type="button" (click)="incrementHour()">
-                <i class="he he-chevron-up"></i>
-              </button>
-              <ng-container *ngIf="hourFormat === '12'; else show24">
-                <div class="time-value">
-                  {{
-                  selectedHour % 12 === 0
-                  ? 12
-                  : selectedHour % 12
-                  | number:'2.0' }}
-                </div>
-              </ng-container>
-              <ng-template #show24>
-                <div class="time-value">{{ selectedHour | number:'2.0' }}</div>
-              </ng-template>
-              <button type="button" (click)="decrementHour()">
-                <i class="he he-chevron-down"></i>
-              </button>
-            </div>
-            <span class="time-separator">:</span>
-            <div class="time-select">
-              <button type="button" (click)="incrementMinute()">
-                <i class="he he-chevron-up"></i>
-              </button>
-              <div class="time-value">
-                {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>
-                  <button type="button" (click)="decrementMinute()">
-                    <i class="he he-chevron-down"></i>
-                  </button>
-              </div>
-              <div class="ampm-toggle" *ngIf="hourFormat === '12'">
-                <button type="button" [class.active]="meridian === 'AM'" (click)="setMeridian('AM')">AM</button>
-                <button type="button" [class.active]="meridian === 'PM'" (click)="setMeridian('PM')">PM</button>
-              </div>
-            </div>
-        </ng-container>
-      </ng-container>
-
-      <!-- month view -->
-      <ng-container *ngIf="!timeOnly && currentView === 'month'">
-        <div class="header">
-          <button class="calendar-arrow" (click)="displayYear = displayYear - 1"><i
-              class="he he-chevron-left"></i></button>
-          <div class="title" (click)="goToYearRangeView()">{{ displayYear }}</div>
-          <button class="calendar-arrow" (click)="displayYear = displayYear + 1"><i
-              class="he he-chevron-right"></i></button>
-        </div>
-        <div class="month-grid">
-          <div class="month-cell" *ngFor="let m of months; index as i" (click)="selectMonth(i)">{{ m }}
-          </div>
-        </div>
-      </ng-container>
-
-      <!-- year range view -->
-      <ng-container *ngIf="!timeOnly && currentView === 'yearRange'">
-        <div class="header">
-          <button class="calendar-arrow" (click)="prevYearRange()"><i class="he he-chevron-left"></i></button>
-          <div class="title">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>
-          <button class="calendar-arrow" (click)="nextYearRange()"><i class="he he-chevron-right"></i></button>
-        </div>
-        <div class="year-grid">
-          <div class="year-cell" *ngFor="let y of yearRange" (click)="selectYear(y)">{{ y }}</div>
-        </div>
-      </ng-container>
-
-    </div>
-  </div>
-</div>

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

@@ -1,194 +0,0 @@
-.form-group {
-    &.calendar {
-        position: relative;       
-        .clear {
-            top: 9px;
-            right: 34px;
-        }
-        .datepicker-group {
-            left: 0;
-            width: 100%;
-            z-index: 1000;
-            z-index: 1000;
-            padding: 0.5rem;
-            color: #495057;
-            min-width: 240px;
-            border-radius: 3px;
-            background: #ffffff;
-            box-shadow:
-                0 2px 4px -1px #0003,
-                0 4px 5px #00000024,
-                0 1px 10px #0000001f;
-
-            .header {
-                display: flex;
-                font-weight: 600;
-                padding: 5px 5px;
-                align-items: center;
-                justify-content: space-between;
-                border-bottom: 1px solid #dee2e6;
-
-                .title {
-                    gap: 8px;
-                    display: flex;
-                    font-size: 15px;
-                    cursor: pointer;
-                    font-weight: 600;
-                }
-
-                .calendar-arrow {
-                    width: 28px;
-                    height: 28px;
-                    border: none;
-                    line-height: 1;
-                    cursor: pointer;
-                    background: none;
-
-                    i {
-                        font-size: 14px;
-                    }
-
-                    &:hover {
-                        background: #f0f0f0;
-                    }
-                }
-            }
-            .week-header {
-                display: grid;
-                padding: 8px 0;
-                font-size: 13px;
-                font-weight: 700;
-                text-align: center;
-                grid-template-columns: repeat(7, 1fr);
-            }
-            .days-grid,
-            .month-grid,
-            .year-grid {
-                gap: 3px;
-                padding: 5px;
-                display: grid;
-                grid-template-columns: repeat(7, 1fr);
-
-                .day-cell,
-                .month-cell,
-                .year-cell {
-                    display: flex;
-                    font-size: 14px;
-                    cursor: pointer;
-                    align-items: center;
-                    justify-content: center;
-
-                    &.today {
-                        color: #37c0b3;
-                        font-weight: bold;
-                        border: 1px solid #37c0b3;
-                    }
-
-                    &.selected,
-                    &:hover {
-                        color: #ffffff;
-                        background: #37c0b3;
-                    }
-
-                    &.disabled {
-                        color: #e0e0e0;
-                        background: none;
-                        user-select: none;
-                        cursor: not-allowed;
-
-                        &.today {
-                            color: #37c0b3;
-
-                            &:hover {
-                                color: #ffffff;
-                                background: #37c0b3;
-                            }
-                        }
-
-                        &:hover {
-                            color: #e0e0e0;
-                            background: transparent;
-                        }
-                    }
-                }
-
-                .day-cell {
-                    padding: 5px 2px;
-                    border-radius: 50%;
-                }
-
-                .month-cell,
-                .year-cell {
-                    padding: 8px 2px;
-                    border-radius: 3px;
-                }
-            }
-            .month-grid {
-                grid-template-columns: repeat(3, 1fr);
-            }
-            .year-grid {
-                grid-template-columns: repeat(4, 1fr);
-            }
-
-            .time-picker {
-                display: flex;
-                user-select: none;
-                align-items: center;
-                justify-content: center;
-
-                .ampm-toggle {
-                    gap: 6px;
-                    display: flex;
-                    margin-left: 1rem;
-                    flex-direction: column;
-                    justify-content: center;
-
-                    button {
-                        cursor: pointer;
-                        padding: 3px 8px;
-                        font-size: 0.75rem;
-                        background: #ffffff;
-                        border: 1px solid #cccccc;
-
-                        &.active {
-                            color: #ffffff;
-                            border-color: #37c0b3;
-                            background-color: #37c0b3;
-                        }
-                    }
-                }
-
-                .time-select {
-                    display: flex;
-                    margin: 0 0.75rem;
-                    align-items: center;
-                    flex-direction: column;
-
-                    button {
-                        border: none;
-                        cursor: pointer;
-                        padding: 4px 8px;
-                        background: transparent;
-                        i {
-                            font-size: 1rem;
-                        }
-                        &:hover {
-                            background: #f0f0f0;
-                        }
-                    }
-                    .time-value {
-                        width: 2rem;
-                        font-size: 1rem;
-                        text-align: center;
-                        margin: 2px 3px 4px;
-                    }
-                }
-
-                .time-separator {
-                    line-height: 1;
-                    font-size: 1rem;
-                }
-            }
-        }
-    }
-}

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

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