hijri-date-time-picker 1.0.2 → 1.0.31

package/{dist/demo.js → src/demo.ts}

@@ -1,38 +1,13 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 import { Component } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { HijriDatePickerComponent } from './lib/hijri-date-picker.component';
-let DemoComponent = class DemoComponent {
-    selectedDates = {};
-    // Date range examples
-    today = new Date();
-    minDate = new Date(new Date().setDate(new Date().getDate() - 30)); // 30 days ago
-    maxDate = new Date(); // Today
-    maxFutureDate = new Date(new Date().setDate(new Date().getDate() + 60)); // 60 days from now
-    customStyles = {
-        primaryColor: '#059669',
-        secondaryColor: '#34d399',
-        selectedDateBackground: '#059669',
-        todayColor: '#f59e0b',
-        borderRadius: '12px',
-        fontFamily: 'Inter, sans-serif'
-    };
-    onDateSelected(date, key) {
-        this.selectedDates[key] = date;
-        console.log(`Date selected for ${key}:`, date);
-    }
-};
-DemoComponent = __decorate([
-    Component({
-        selector: 'app-demo',
-        standalone: true,
-        imports: [HijriDatePickerComponent],
-        template: `
+import { SelectedDate, DatePickerStyles } from './lib/hijri-date-picker.types';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [HijriDatePickerComponent],
+  template: `
     <div class="demo-container">
       <h1>Hijri Date Picker Demo</h1>
       
@@ -177,7 +152,7 @@ DemoComponent = __decorate([
       </div>
     </div>
   `,
-        styles: [`
+  styles: [`
     .demo-container {
       max-width: 1400px;
       margin: 0 auto;
@@ -242,8 +217,30 @@ DemoComponent = __decorate([
       }
     }
   `]
-    })
-], DemoComponent);
-export { DemoComponent };
+})
+export class DemoComponent {
+  selectedDates: { [key: string]: any } = {};
+  
+  // Date range examples
+  today: Date = new Date();
+  minDate: Date = new Date(new Date().setDate(new Date().getDate() - 30)); // 30 days ago
+  maxDate: Date = new Date(); // Today
+  maxFutureDate: Date = new Date(new Date().setDate(new Date().getDate() + 60)); // 60 days from now
+
+  customStyles: DatePickerStyles = {
+    primaryColor: '#059669',
+    secondaryColor: '#34d399',
+    selectedDateBackground: '#059669',
+    todayColor: '#f59e0b',
+    borderRadius: '12px',
+    fontFamily: 'Inter, sans-serif'
+  };
+
+  onDateSelected(date: SelectedDate | SelectedDate[], key: string) {
+    this.selectedDates[key] = date;
+    console.log(`Date selected for ${key}:`, date);
+  }
+}
+
 // Bootstrap the demo application
 bootstrapApplication(DemoComponent);

package/src/lib/hijri-date-picker.component.css

@@ -0,0 +1,524 @@
+/* Import Remix Icon */
+@import 'remixicon/fonts/remixicon.css';
+
+/* CSS Variables from Custom Styles */
+.hijri-date-picker {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 20px;
+  max-width: 300px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Header Section */
+.picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 12px;
+}
+
+.mode-toggle-btn {
+  background-color: var(--secondary-color);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: calc(var(--border-radius) / 2);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.mode-toggle-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.mode-toggle-btn:active {
+  transform: translateY(0);
+}
+
+.todays-date {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.today-btn {
+  background-color: var(--today-color);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: calc(var(--border-radius) / 2);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.today-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+/* Calendar Controls */
+.calendar-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 16px;
+  align-items: flex-end;
+}
+
+.control-group {
+  flex: 1;
+  min-width: 120px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.control-group label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-color);
+  opacity: 0.8;
+}
+
+.year-select,
+.month-select {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: calc(var(--border-radius) / 2);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-size: 14px;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+.year-select:hover,
+.month-select:hover {
+  border-color: var(--primary-color);
+}
+
+.year-select:focus,
+.month-select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.navigation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.nav-btn {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: calc(var(--border-radius) / 2);
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.nav-btn:hover {
+  opacity: 0.9;
+  transform: scale(1.05);
+}
+
+.nav-btn:active {
+  transform: scale(0.95);
+}
+
+/* Calendar Grid */
+.calendar-grid {
+  margin-bottom: 16px;
+}
+
+.weekday-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.weekday {
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-color);
+  opacity: 0.7;
+  padding: 8px 4px;
+}
+
+.calendar-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+
+.day-cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--border-radius) / 2);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  position: relative;
+  width: 30px;
+}
+
+.day-cell:not(.empty):not(.disabled):hover {
+  background-color: var(--hover-color);
+  color: #000;
+  transform: scale(1.05);
+}
+
+.day-cell.empty {
+  cursor: default;
+  pointer-events: none;
+}
+
+.day-cell.today {
+  color: var(--today-color);
+  font-weight: 700;
+}
+
+.day-cell.today::after {
+  content: "";
+  position: absolute;
+  bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  background-color: var(--today-color);
+  border-radius: 50%;
+}
+
+.day-cell.selected {
+  background-color: var(--selected-date-background);
+  color: var(--selected-date-color);
+  font-weight: 700;
+}
+
+.day-cell.disabled {
+  color: var(--disabled-color);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.day-cell.disabled:hover {
+  background-color: transparent;
+  transform: none;
+}
+
+/* Selected Dates Display */
+.selected-dates {
+  margin-bottom: 16px;
+  padding: 12px;
+  background-color: var(--hover-color);
+  border-radius: calc(var(--border-radius) / 2);
+}
+
+.selected-label {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-color);
+  opacity: 0.8;
+}
+
+.selected-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.selected-item {
+  background-color: var(--primary-color);
+  color: white;
+  padding: 6px 12px;
+  border-radius: calc(var(--border-radius) / 2);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* Footer */
+.picker-footer {
+  margin-bottom: 12px;
+}
+
+.submit-btn {
+  width: 100%;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: calc(var(--border-radius) / 2);
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.submit-btn:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Calendar Type Label */
+.calendar-type {
+  text-align: center;
+  color: var(--text-color);
+  opacity: 0.6;
+  font-size: 11px;
+}
+
+/* RTL Support */
+.hijri-date-picker[dir="rtl"] {
+  direction: rtl;
+}
+
+.hijri-date-picker[dir="rtl"] .picker-header {
+  flex-direction: row-reverse;
+}
+
+.hijri-date-picker[dir="rtl"] .todays-date {
+  justify-content: flex-start;
+}
+
+/* Responsive Design */
+@media (max-width: 480px) {
+  .hijri-date-picker {
+    padding: 16px;
+    max-width: 100%;
+  }
+
+  .calendar-controls {
+    flex-direction: column;
+  }
+
+  .control-group {
+    width: 100%;
+  }
+
+  .navigation-buttons {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .weekday {
+    font-size: 11px;
+    padding: 6px 2px;
+  }
+
+  .day-cell {
+    font-size: 13px;
+  }
+}
+
+/* Dark Mode Support (Optional Enhancement) */
+@media (prefers-color-scheme: dark) {
+  .hijri-date-picker {
+    --background-color: #1f2937;
+    --text-color: #f9fafb;
+    --border-color: #374151;
+    --hover-color: #374151;
+  }
+}
+
+/* Time Picker Section */
+.time-picker {
+  margin-top: 10px;
+  /* margin-bottom: 20px; */
+  padding: 10px;
+  background: linear-gradient(135deg, var(--hover-color) 0%, transparent 100%);
+  border-radius: var(--border-radius);
+  /* border: 1px solid var(--border-color);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); */
+}
+
+.time-picker-label {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-color);
+  opacity: 0.9;
+  /* text-align: center; */
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.time-inputs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.time-input-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  position: relative;
+}
+
+.time-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--primary-color, #4f46e5);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+  opacity: 0.8;
+}
+
+.time-btn {
+  background-color: transparent;
+  color: var(--text-color);
+  border: none;
+  width: 36px;
+  height: 28px;
+  border-radius: calc(var(--border-radius) / 3);
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+img {
+  width: 16px;
+  height: 16px;
+}
+
+.time-btn:hover {
+  filter: brightness(1.1);
+  transform: scale(1.05);
+}
+
+.time-btn:active {
+  transform: scale(0.95);
+}
+
+.time-display {
+  width: 60px;
+  padding: 0;
+  text-align: center;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-color, #1f2937);
+  font-size: 22px;
+  font-weight: 600;
+  font-family: "Courier New", "Consolas", monospace;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+.time-display:hover {
+  color: var(--primary-color, #4f46e5);
+  transform: scale(1.05);
+}
+
+.time-separator {
+  font-size: 24px;
+  font-weight: 900;
+  color: var(--primary-color, #4f46e5);
+  opacity: 0.4;
+  padding-bottom: 4px;
+}
+
+.ampm-toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-left: 12px;
+}
+
+.ampm-btn {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  padding: 8px 14px;
+  border-radius: calc(var(--border-radius) / 3);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.ampm-btn.active {
+  background-color: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+}
+
+.ampm-btn:hover:not(.active) {
+  background-color: var(--hover-color);
+  border-color: var(--primary-color);
+}
+
+/* Update selected dates display to show time */
+.selected-date-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.selected-item .time-text {
+  font-size: 11px;
+  opacity: 0.85;
+  font-weight: 500;
+  background-color: rgba(255, 255, 255, 0.2);
+  padding: 2px 8px;
+  border-radius: 10px;
+  margin-top: 2px;
+}
+
+/* Remix Icon Styling */
+.time-btn i {
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+