ng-mo-date-picker 1.0.0

package/README.ar.md

@@ -0,0 +1,350 @@
+# ng-mo-date-picker
+
+<div dir="rtl" align="center">
+
+[![English](https://img.shields.io/badge/Language-English-blue?style=for-the-badge)](./README.md)
+[![العربية](https://img.shields.io/badge/اللغة-العربية-green?style=for-the-badge)](./README.ar.md)
+
+🗓️ **مكتبة Angular لاختيار التاريخ الهجري والميلادي مع دعم كامل للعربية والإنجليزية**
+
+[![npm version](https://badge.fury.io/js/ng-mo-date-picker.svg)](https://www.npmjs.com/package/ng-mo-date-picker)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+[🎮 معاينة مباشرة](https://3mowafy.github.io/ng-mo-date-picker/) • [📖 التوثيق](#-المدخلات-والمخرجات) • [💡 الأمثلة](#-أمثلة-الاستخدام)
+
+</div>
+
+---
+
+## ✨ المميزات
+
+- ✅ **نظامان للتقويم**: دعم كامل للتقويم الهجري (الإسلامي) والميلادي
+- ✅ **ثنائي اللغة**: واجهة عربية وإنجليزية بالكامل
+- ✅ **دعم الاتجاه التلقائي**: تبديل تلقائي بين RTL و LTR
+- ✅ **متوافق مع النماذج**: يعمل مع Reactive Forms و Template-driven Forms و Signal Forms
+- ✅ **خفيف وسريع**: حجم صغير (~50KB) مع الاعتماديات
+- ✅ **مكون مستقل**: لا يحتاج استيراد modules (Angular 21+)
+- ✅ **قابل للتخصيص**: تخصيص كامل للأيقونات والألوان والأنماط
+- ✅ **مكتوب بـ TypeScript**: دعم كامل لـ IntelliSense
+- ✅ **إخراج شامل**: الحصول على التاريخ الميلادي والهجري معاً مع التنسيق الكامل
+
+## 📦 التثبيت
+```bash
+npm install ng-mo-date-picker
+```
+
+**ملاحظة**: سيتم تثبيت `moment-hijri` تلقائياً كاعتمادية.
+
+## 🚀 البدء السريع
+
+### الخطوة الأولى: استيراد المكون
+
+**Angular 21 Standalone:**
+```typescript
+import { Component } from '@angular/core';
+import { NgMoDatePicker, DatePickerOutput } from 'ng-mo-date-picker';
+
+@Component({
+  selector: 'app-root',
+  imports: [NgMoDatePicker],
+  template: `
+    <ng-mo-date-picker 
+      [locale]="'ar'"
+      (dateChange)="onDateChange($event)"
+    />
+  `
+})
+export class AppComponent {
+  onDateChange(output: DatePickerOutput | null) {
+    if (output) {
+      console.log('التاريخ الميلادي:', output.gregorianFormatted);
+      console.log('التاريخ الهجري:', output.hijriFormatted);
+      console.log('اسم الشهر:', output.hijriDate.monthName);
+    }
+  }
+}
+```
+
+## 📚 أمثلة الاستخدام
+
+### مثال أساسي (عربي)
+```html
+<ng-mo-date-picker [locale]="'ar'" />
+```
+
+### إنجليزي مع نص توضيحي مخصص
+```html
+<ng-mo-date-picker 
+  [locale]="'en'"
+  [placeholder]="'اختر تاريخاً'"
+/>
+```
+
+### البدء بالتقويم الهجري
+```html
+<ng-mo-date-picker 
+  [calendarType]="'hijri'"
+  [locale]="'ar'"
+/>
+```
+
+### تخصيص الأيقونة
+```html
+<!-- أيقونة مخصصة -->
+<ng-mo-date-picker 
+  [customIcon]="'🗓️'"
+/>
+
+<!-- إخفاء الأيقونة -->
+<ng-mo-date-picker 
+  [showIcon]="false"
+/>
+```
+
+### الاستخدام مع Reactive Forms
+```typescript
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NgMoDatePicker } from 'ng-mo-date-picker';
+
+@Component({
+  imports: [NgMoDatePicker, ReactiveFormsModule],
+  template: `
+    <ng-mo-date-picker [formControl]="dateControl" />
+    <p>التاريخ المختار: {{ dateControl.value | date }}</p>
+  `
+})
+export class MyComponent {
+  dateControl = new FormControl<Date | null>(null);
+}
+```
+
+### الاستخدام مع Template-driven Forms
+```typescript
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgMoDatePicker } from 'ng-mo-date-picker';
+
+@Component({
+  imports: [NgMoDatePicker, FormsModule],
+  template: `
+    <ng-mo-date-picker 
+      [(ngModel)]="selectedDate"
+      [locale]="'ar'"
+    />
+  `
+})
+export class MyComponent {
+  selectedDate: Date | null = null;
+}
+```
+
+### تخصيص الأنماط
+```html
+<ng-mo-date-picker 
+  [inputClass]="'my-input'"
+  [calendarClass]="'my-calendar'"
+/>
+```
+```css
+.my-input {
+  border: 2px solid #3b82f6;
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.my-calendar {
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+```
+
+## 🎛️ المدخلات والمخرجات
+
+### المدخلات (Inputs)
+
+| الاسم | النوع | القيمة الافتراضية | الوصف |
+|------|------|---------|-------------|
+| `calendarType` | `'gregorian' \| 'hijri'` | `'gregorian'` | نوع التقويم عند الفتح |
+| `locale` | `'ar' \| 'en'` | `'ar'` | اللغة واتجاه النص |
+| `showIcon` | `boolean` | `true` | إظهار أو إخفاء أيقونة التقويم |
+| `customIcon` | `string` | `'📅'` | أيقونة مخصصة (emoji أو نص) |
+| `inputClass` | `string` | `''` | CSS classes إضافية لحقل الإدخال |
+| `calendarClass` | `string` | `''` | CSS classes إضافية للتقويم المنبثق |
+| `disabled` | `boolean` | `false` | تعطيل المكون |
+| `readonly` | `boolean` | `false` | جعل الحقل للقراءة فقط |
+| `placeholder` | `string` | تلقائي حسب اللغة | النص التوضيحي |
+| `name` | `string` | `undefined` | اسم الحقل (name attribute) |
+| `id` | `string` | `undefined` | معرّف الحقل (id attribute) |
+
+### المخرجات (Outputs)
+
+| الاسم | النوع | الوصف |
+|------|------|-------------|
+| `dateChange` | `DatePickerOutput \| null` | يُطلق عند اختيار أو مسح التاريخ |
+| `calendarToggle` | `boolean` | يُطلق عند فتح أو إغلاق التقويم |
+
+### واجهة DatePickerOutput
+```typescript
+interface DatePickerOutput {
+  // بيانات التاريخ الميلادي
+  gregorianDate: Date;              // كائن Date الأصلي
+  gregorianFormatted: string;       // "07/01/2026"
+  
+  // بيانات التاريخ الهجري
+  hijriDate: {
+    year: number;                   // 1446
+    month: number;                  // 7
+    monthName: string;              // "رجب" أو "Rajab"
+    day: number;                    // 18
+  };
+  hijriFormatted: string;           // "18 رجب 1446 هـ"
+  
+  // معلومات إضافية
+  calendarType: 'gregorian' | 'hijri';
+  locale: 'ar' | 'en';
+}
+```
+
+## 🎨 التخصيص المتقدم
+
+### استخدام CSS Variables (قريباً في v2.0)
+```css
+.mo-calendar {
+  --primary-color: #10b981;
+  --hover-color: #059669;
+}
+```
+
+### تجاوز الأنماط الافتراضية
+```css
+/* تخصيص اليوم المحدد */
+.mo-day.selected {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+/* تخصيص زر التنقل */
+.mo-nav-btn:hover {
+  color: #10b981;
+  transform: scale(1.1);
+}
+```
+
+## 🌍 دعم اللغات (i18n)
+
+المكون يتعامل تلقائياً مع:
+- أسماء الأشهر (الميلادية والهجرية)
+- أسماء الأيام
+- نصوص الواجهة (اليوم، مسح، إلخ)
+- اتجاه النص (RTL/LTR)
+
+### التبديل بين اللغات
+```typescript
+@Component({
+  template: `
+    <ng-mo-date-picker [locale]="currentLang" />
+    
+    <button (click)="toggleLang()">
+      تبديل اللغة
+    </button>
+  `
+})
+export class MyComponent {
+  currentLang: 'ar' | 'en' = 'ar';
+  
+  toggleLang() {
+    this.currentLang = this.currentLang === 'ar' ? 'en' : 'ar';
+  }
+}
+```
+
+## 🔧 استخدامات متقدمة
+
+### الاستماع لفتح وإغلاق التقويم
+```typescript
+@Component({
+  template: `
+    <ng-mo-date-picker 
+      (calendarToggle)="onCalendarToggle($event)"
+    />
+  `
+})
+export class MyComponent {
+  onCalendarToggle(isOpen: boolean) {
+    console.log('التقويم الآن:', isOpen ? 'مفتوح' : 'مغلق');
+  }
+}
+```
+
+### الوصول للبيانات الكاملة
+```typescript
+onDateChange(output: DatePickerOutput | null) {
+  if (!output) {
+    console.log('تم مسح التاريخ');
+    return;
+  }
+
+  // استخدام التاريخ الميلادي
+  const jsDate = output.gregorianDate;
+  console.log('التاريخ الميلادي:', output.gregorianFormatted);
+  
+  // استخدام التاريخ الهجري
+  console.log('السنة الهجرية:', output.hijriDate.year);
+  console.log('الشهر الهجري:', output.hijriDate.monthName);
+  console.log('منسق:', output.hijriFormatted);
+  
+  // معرفة نوع التقويم المستخدم
+  console.log('التقويم المستخدم:', output.calendarType);
+}
+```
+
+## 📱 دعم المتصفحات
+
+- Chrome (آخر إصدار)
+- Firefox (آخر إصدار)
+- Safari (آخر إصدار)
+- Edge (آخر إصدار)
+
+## 🤝 المساهمة
+
+المساهمات مرحب بها دائماً! لا تتردد في:
+
+1. عمل Fork للمشروع
+2. إنشاء branch للميزة الجديدة (`git checkout -b feature/AmazingFeature`)
+3. Commit التغييرات (`git commit -m 'إضافة ميزة رائعة'`)
+4. Push للـ branch (`git push origin feature/AmazingFeature`)
+5. فتح Pull Request
+
+## 🐛 الإبلاغ عن المشاكل
+
+وجدت خطأ أو لديك اقتراح لميزة جديدة؟  
+👉 [افتح issue على GitHub](https://github.com/3Mowafy/ng-mo-date-picker/issues)
+
+## 📄 الترخيص
+
+MIT © [Mohamed Mowafy](https://github.com/3Mowafy)
+
+## 🔗 روابط مفيدة
+
+- [📦 الحزمة على npm](https://www.npmjs.com/package/ng-mo-date-picker)
+- [💻 المستودع على GitHub](https://github.com/3Mowafy/ng-mo-date-picker)
+- [🎮 معاينة مباشرة](https://3mowafy.github.io/ng-mo-date-picker/)
+- [🐛 الإبلاغ عن مشكلة](https://github.com/3Mowafy/ng-mo-date-picker/issues)
+- [📖 التوثيق الكامل](https://github.com/3Mowafy/ng-mo-date-picker#readme)
+
+## 🙏 شكر وتقدير
+
+- بُني باستخدام [Angular](https://angular.io/)
+- التحويل الهجري بواسطة [moment-hijri](https://github.com/xsoh/moment-hijri)
+
+---
+
+<div align="center">
+
+**صُنع بـ ❤️ في مصر**
+
+[Mohamed Mowafy](https://github.com/3Mowafy) • 2026
+
+⭐ إذا أعجبتك المكتبة، لا تنسَ إعطائها نجمة على GitHub!
+
+</div>

package/README.md

@@ -0,0 +1,302 @@
+# ng-mo-date-picker
+
+<div align="center">
+
+[![English](https://img.shields.io/badge/Language-English-blue?style=for-the-badge)](./README.md)
+[![العربية](https://img.shields.io/badge/اللغة-العربية-green?style=for-the-badge)](./README.ar.md)
+
+🗓️ **Angular Hijri/Gregorian Date Picker with RTL/LTR support**
+
+[![npm version](https://badge.fury.io/js/ng-mo-date-picker.svg)](https://www.npmjs.com/package/ng-mo-date-picker)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Downloads](https://img.shields.io/npm/dm/ng-mo-date-picker.svg)](https://www.npmjs.com/package/ng-mo-date-picker)
+
+[Demo](https://3mowafy.github.io/ng-mo-date-picker/) • [Documentation](#-api-reference) • [Examples](#-usage-examples)
+
+</div>
+## ✨ Features
+
+- ✅ **Dual Calendar System**: Hijri (Islamic) and Gregorian calendars
+- ✅ **Bilingual**: Full Arabic and English support
+- ✅ **RTL/LTR**: Automatic direction switching
+- ✅ **Forms Ready**: Works with Reactive Forms, Template-driven Forms, and Signal Forms
+- ✅ **Lightweight**: Only ~50KB (with moment-hijri dependency)
+- ✅ **Standalone**: No module imports needed (Angular 21+)
+- ✅ **Customizable**: Custom icons, styles, and behavior
+- ✅ **TypeScript**: Fully typed with excellent IntelliSense support
+- ✅ **Rich Output**: Get both Gregorian and Hijri dates with full formatting
+
+## 📦 Installation
+```bash
+npm install ng-mo-date-picker
+```
+
+**Note**: `moment-hijri` will be installed automatically as a peer dependency.
+
+## 🚀 Quick Start
+
+### 1. Import the Component
+```typescript
+import { Component } from '@angular/core';
+import { NgMoDatePicker, DatePickerOutput } from 'ng-mo-date-picker';
+
+@Component({
+  selector: 'app-root',
+  imports: [NgMoDatePicker], // Standalone component
+  template: `
+    <ng-mo-date-picker 
+      [locale]="'ar'"
+      (dateChange)="onDateChange($event)"
+    />
+  `
+})
+export class AppComponent {
+  onDateChange(output: DatePickerOutput | null) {
+    if (output) {
+      console.log('Gregorian:', output.gregorianFormatted);
+      console.log('Hijri:', output.hijriFormatted);
+      console.log('Month Name:', output.hijriDate.monthName);
+    }
+  }
+}
+```
+
+## 📚 Usage Examples
+
+### Basic Usage (Arabic)
+```html
+<ng-mo-date-picker [locale]="'ar'" />
+```
+
+### English with Custom Placeholder
+```html
+<ng-mo-date-picker 
+  [locale]="'en'"
+  [placeholder]="'Pick a date'"
+/>
+```
+
+### Start with Hijri Calendar
+```html
+<ng-mo-date-picker 
+  [calendarType]="'hijri'"
+  [locale]="'ar'"
+/>
+```
+
+### Custom Icon
+```html
+<ng-mo-date-picker 
+  [customIcon]="'🗓️'"
+/>
+
+<!-- Or hide icon completely -->
+<ng-mo-date-picker 
+  [showIcon]="false"
+/>
+```
+
+### With Reactive Forms
+```typescript
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  imports: [NgMoDatePicker, ReactiveFormsModule],
+  template: `
+    <ng-mo-date-picker [formControl]="dateControl" />
+    <p>Selected: {{ dateControl.value | date }}</p>
+  `
+})
+export class MyComponent {
+  dateControl = new FormControl<Date | null>(null);
+}
+```
+
+### With Template-driven Forms
+```html
+<ng-mo-date-picker 
+  [(ngModel)]="selectedDate"
+  [locale]="'en'"
+/>
+```
+
+### Custom Styling
+```html
+<ng-mo-date-picker 
+  [inputClass]="'my-custom-input'"
+  [calendarClass]="'my-custom-calendar'"
+/>
+```
+```css
+.my-custom-input {
+  border: 2px solid #3b82f6;
+  border-radius: 8px;
+}
+
+.my-custom-calendar {
+  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+}
+```
+
+## 🎛️ API Reference
+
+### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `calendarType` | `'gregorian' \| 'hijri'` | `'gregorian'` | Initial calendar type to display |
+| `locale` | `'ar' \| 'en'` | `'ar'` | Language and direction (RTL/LTR) |
+| `showIcon` | `boolean` | `true` | Show/hide calendar icon |
+| `customIcon` | `string` | `'📅'` | Custom icon (emoji or text) |
+| `inputClass` | `string` | `''` | Additional CSS classes for input |
+| `calendarClass` | `string` | `''` | Additional CSS classes for calendar popup |
+| `disabled` | `boolean` | `false` | Disable the datepicker |
+| `readonly` | `boolean` | `false` | Make input readonly |
+| `placeholder` | `string` | Auto (based on locale) | Custom placeholder text |
+| `name` | `string` | `undefined` | Input name attribute |
+| `id` | `string` | `undefined` | Input id attribute |
+
+### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `dateChange` | `DatePickerOutput \| null` | Emits when date is selected or cleared |
+| `calendarToggle` | `boolean` | Emits when calendar opens/closes |
+
+### DatePickerOutput Interface
+```typescript
+interface DatePickerOutput {
+  // Gregorian date info
+  gregorianDate: Date;
+  gregorianFormatted: string; // "07/01/2026"
+  
+  // Hijri date info
+  hijriDate: {
+    year: number;           // 1446
+    month: number;          // 7
+    monthName: string;      // "Rajab" or "رجب"
+    day: number;            // 18
+  };
+  hijriFormatted: string;   // "18 Rajab 1446 AH"
+  
+  // Meta info
+  calendarType: 'gregorian' | 'hijri';
+  locale: 'ar' | 'en';
+}
+```
+
+## 🎨 Styling
+
+The datepicker comes with clean, modern styles out of the box. You can customize it using:
+
+1. **CSS Variables** (coming in v2.0)
+2. **Custom Classes**: Use `inputClass` and `calendarClass` inputs
+3. **Override Styles**: Target `.mo-datepicker-wrapper`, `.mo-calendar`, etc.
+
+### Example Custom Theme
+```css
+.mo-calendar {
+  --primary-color: #10b981;
+  --hover-color: #059669;
+}
+
+.mo-day.selected {
+  background: var(--primary-color);
+}
+
+.mo-day:hover {
+  background: var(--hover-color);
+}
+```
+
+## 🌍 i18n Support
+
+The component automatically handles:
+- Month names (Gregorian and Hijri)
+- Day names
+- UI labels (Today, Clear, etc.)
+- Text direction (RTL/LTR)
+
+Switch between languages:
+```html
+<ng-mo-date-picker [locale]="currentLocale" />
+
+<button (click)="currentLocale = currentLocale === 'ar' ? 'en' : 'ar'">
+  Toggle Language
+</button>
+```
+
+## 🔧 Advanced Usage
+
+### Listen to Calendar Toggle
+```html
+<ng-mo-date-picker 
+  (calendarToggle)="onCalendarToggle($event)"
+/>
+```
+```typescript
+onCalendarToggle(isOpen: boolean) {
+  console.log('Calendar is now:', isOpen ? 'open' : 'closed');
+}
+```
+
+### Access Full Date Info
+```typescript
+onDateChange(output: DatePickerOutput | null) {
+  if (!output) {
+    console.log('Date cleared');
+    return;
+  }
+
+  // Use Gregorian
+  const jsDate = output.gregorianDate;
+  console.log('Gregorian:', output.gregorianFormatted);
+  
+  // Use Hijri
+  console.log('Hijri Year:', output.hijriDate.year);
+  console.log('Hijri Month:', output.hijriDate.monthName);
+  console.log('Formatted:', output.hijriFormatted);
+}
+```
+
+## 📱 Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repo
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 🐛 Issues
+
+Found a bug or have a feature request?  
+👉 [Open an issue on GitHub](https://github.com/3Mowafy/ng-mo-date-picker/issues)
+
+## 📄 License
+
+MIT © [Mohamed Mowafy](https://github.com/3Mowafy)
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/3Mowafy/ng-mo-date-picker)
+- [npm Package](https://www.npmjs.com/package/ng-mo-date-picker)
+- [Issues](https://github.com/3Mowafy/ng-mo-date-picker/issues)
+- [Demo](https://github.com/3Mowafy/ng-mo-date-picker#demo) *(coming soon)*
+
+## 🙏 Acknowledgments
+
+- Built with [Angular](https://angular.io/)
+- Hijri conversion powered by [moment-hijri](https://github.com/xsoh/moment-hijri)
+
+---
+
+Made with ❤️ by [Mohamed Mowafy](https://github.com/3Mowafy)