nexheal-lib 0.0.2 → 0.0.3

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

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

@@ -0,0 +1,22 @@
+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();
+  });
+});