hijri-date-time-picker 1.0.0 → 1.0.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Hany
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Hany
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,183 +1,185 @@
-# Hijri Date Time Picker Component
-
-An Angular standalone component for dual-mode Gregorian and Hijri date selection with time support using the Umm Al-Qura calendar system.
-
-## Features
-
-✨ **Dual Calendar Support**: Switch between Gregorian and Hijri (Umm Al-Qura) calendars  
-🌍 **Localization**: Full support for English and Arabic languages  
-↔️ **RTL/LTR**: Automatic layout direction based on locale  
-📅 **Multiple Selection**: Single or multiple date selection modes  
-🕒 **DateTime Support**: Integrated time selection with modern styling  
-🎨 **Customizable Styling**: Comprehensive theming via CSS variables  
-✅ **Validation**: Future date validation with configurable limits  
-📱 **Responsive**: Mobile-friendly design  
-♿ **Accessible**: ARIA labels and keyboard navigation support
-
-## Installation
-
-```bash
-npm install hijri-date-time-picker hijri-date
-```
-
-## Dependencies
-
-- `@angular/core` >= 15.0.0
-- `@angular/common` >= 15.0.0
-- `hijri-date` ^0.2.2
-
-## Usage
-
-### Basic Example
-
-```typescript
-import { Component } from '@angular/core';
-import { HijriDatePickerComponent, SelectedDate } from 'hijri-date-time-picker';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [HijriDatePickerComponent],
-  template: `
-    <hijri-date-picker
-      [mode]="'greg'"
-      [locale]="'en'"
-      (dateSelected)="onDateSelected($event)">
-    </hijri-date-picker>
-  `
-})
-export class AppComponent {
-  onDateSelected(date: SelectedDate) {
-    console.log('Selected date:', date);
-  }
-}
-```
-
-### DateTime Picker Example
-
-```html
-<hijri-date-picker
-  [enableTime]="true"
-  [timeFormat]="'12'"
-  [minuteStep]="15"
-  [enableSeconds]="false"
-  (dateSelected)="onDateTimeSelected($event)">
-</hijri-date-picker>
-```
-
-### Initial Date Binding
-
-```html
-<!-- Single Date Selection -->
-<hijri-date-picker
-  [initialSelectedDate]="myDate">
-</hijri-date-picker>
-
-<!-- Multiple Dates Selection -->
-<hijri-date-picker
-  [multiple]="true"
-  [initialSelectedDates]="myDates">
-</hijri-date-picker>
-```
-
-## API Reference
-
-### Inputs
-
-#### Mode & Configuration
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `canChangeMode` | `boolean` | `true` | Enable/disable mode toggle button |
-| `mode` | `'greg' \| 'hijri'` | `'greg'` | Initial calendar mode |
-| `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Text direction |
-| `locale` | `'en' \| 'ar'` | `'en'` | Language locale |
-
-#### DateTime Configuration (NEW)
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `enableTime` | `boolean` | `false` | Enable time selection UI |
-| `timeFormat` | `'12' \| '24'` | `'24'` | Time display format |
-| `minuteStep` | `number` | `1` | Increment step for minutes |
-| `enableSeconds` | `boolean` | `false` | Show seconds selection |
-| `defaultTime` | `{ hours, minutes, seconds? }` | `undefined` | Default time to show |
-
-#### Validation
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `futureValidation` | `boolean` | `true` | Prevent selecting dates beyond limit |
-| `futureYearsLimit` | `number` | `10` | Maximum years in the future |
-| `isRequired` | `boolean` | `false` | Require date selection before submit |
-
-#### Selection & Binding
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `multiple` | `boolean` | `false` | Enable multiple date selection |
-| `showConfirmButton` | `boolean` | `false` | Show submit button |
-| `initialSelectedDate` | `Date` | `undefined` | Pre-select a single date |
-| `initialSelectedDates` | `Date[]` | `[]` | Pre-select multiple dates |
-
-#### Labels
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `submitTextButton` | `string` | `'Submit'` | Submit button text |
-| `todaysDateText` | `string` | `'Today'` | Today button text |
-| `ummAlQuraDateText` | `string` | `'Umm Al-Qura Calendar'` | Calendar type label |
-| `yearSelectLabel` | `string` | `'Year'` | Year dropdown label |
-| `monthSelectLabel` | `string` | `'Month'` | Month dropdown label |
-
-### Outputs
-
-| Output | Type | Description |
-|--------|------|-------------|
-| `dateSelected` | `EventEmitter<SelectedDate \| SelectedDate[]>` | Emits when date(s) selected |
-| `modeChanged` | `EventEmitter<'greg' \| 'hijri'>` | Emits when calendar mode changes |
-
-### Types
-
-#### SelectedDate
-
-```typescript
-interface SelectedDate {
-  gregorian: Date;
-  hijri: {
-    year: number;
-    month: number;
-    day: number;
-  };
-  time?: {
-    hours: number;
-    minutes: number;
-    seconds: number;
-  };
-  formatted: {
-    gregorian: string;
-    hijri: string;
-    time?: string;
-  };
-}
-```
-
-## Styling
-
-The component can be customized using the `styles` input or by overriding CSS variables:
-
-```typescript
-const customStyles: DatePickerStyles = {
-  primaryColor: '#4f46e5',
-  secondaryColor: '#818cf8',
-  borderRadius: '8px'
-};
-```
-
-## License
-
-MIT
-
-## Credits
-
-Built with [Angular](https://angular.io/) and [hijri-date](https://www.npmjs.com/package/hijri-date).
+# Hijri Date Time Picker Component
+
+An Angular standalone component for dual-mode Gregorian and Hijri date selection with time support using the Umm Al-Qura calendar system.
+
+## Features
+
+✨ **Dual Calendar Support**: Switch between Gregorian and Hijri (Umm Al-Qura) calendars  
+🌍 **Localization**: Full support for English and Arabic languages  
+↔️ **RTL/LTR**: Automatic layout direction based on locale  
+📅 **Multiple Selection**: Single or multiple date selection modes  
+🕒 **DateTime Support**: Integrated time selection with modern styling  
+🎨 **Customizable Styling**: Comprehensive theming via CSS variables  
+✅ **Validation**: Future date validation with configurable limits  
+📱 **Responsive**: Mobile-friendly design  
+♿ **Accessible**: ARIA labels and keyboard navigation support
+
+## Installation
+
+```bash
+npm install hijri-date-time-picker hijri-date
+```
+
+## Dependencies
+
+- `@angular/core` >= 15.0.0
+- `@angular/common` >= 15.0.0
+- `hijri-date` ^0.2.2
+
+## Usage
+
+### Basic Example
+
+```typescript
+import { Component } from '@angular/core';
+import { HijriDatePickerComponent, SelectedDate } from 'hijri-date-time-picker';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [HijriDatePickerComponent],
+  template: `
+    <hijri-date-picker
+      [mode]="'greg'"
+      [locale]="'en'"
+      (dateSelected)="onDateSelected($event)">
+    </hijri-date-picker>
+  `
+})
+export class AppComponent {
+  onDateSelected(date: SelectedDate) {
+    console.log('Selected date:', date);
+  }
+}
+```
+
+### DateTime Picker Example
+
+```html
+<hijri-date-picker
+  [enableTime]="true"
+  [timeFormat]="'12'"
+  [minuteStep]="15"
+  [enableSeconds]="false"
+  (dateSelected)="onDateTimeSelected($event)">
+</hijri-date-picker>
+```
+
+### Initial Date Binding
+
+```html
+<!-- Single Date Selection -->
+<hijri-date-picker
+  [initialSelectedDate]="myDate">
+</hijri-date-picker>
+
+<!-- Multiple Dates Selection -->
+<hijri-date-picker
+  [multiple]="true"
+  [initialSelectedDates]="myDates">
+</hijri-date-picker>
+```
+
+## API Reference
+
+### Inputs
+
+#### Mode & Configuration
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `canChangeMode` | `boolean` | `true` | Enable/disable mode toggle button |
+| `mode` | `'greg' \| 'hijri'` | `'greg'` | Initial calendar mode |
+| `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Text direction |
+| `locale` | `'en' \| 'ar'` | `'en'` | Language locale |
+
+#### DateTime Configuration (NEW)
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `enableTime` | `boolean` | `false` | Enable time selection UI |
+| `timeFormat` | `'12' \| '24'` | `'24'` | Time display format |
+| `minuteStep` | `number` | `1` | Increment step for minutes |
+| `enableSeconds` | `boolean` | `false` | Show seconds selection |
+| `defaultTime` | `{ hours, minutes, seconds? }` | `undefined` | Default time to show |
+
+#### Validation
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `futureValidation` | `boolean` | `true` | Prevent selecting dates beyond limit |
+| `futureYearsLimit` | `number` | `10` | Maximum years in the future |
+| `isRequired` | `boolean` | `false` | Require date selection before submit |
+| `minDate` | `Date` | `undefined` | Minimum selectable date |
+| `maxDate` | `Date` | `undefined` | Maximum selectable date |
+
+#### Selection & Binding
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `multiple` | `boolean` | `false` | Enable multiple date selection |
+| `showConfirmButton` | `boolean` | `false` | Show submit button |
+| `initialSelectedDate` | `Date` | `undefined` | Pre-select a single date |
+| `initialSelectedDates` | `Date[]` | `[]` | Pre-select multiple dates |
+
+#### Labels
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `submitTextButton` | `string` | `'Submit'` | Submit button text |
+| `todaysDateText` | `string` | `'Today'` | Today button text |
+| `ummAlQuraDateText` | `string` | `'Umm Al-Qura Calendar'` | Calendar type label |
+| `yearSelectLabel` | `string` | `'Year'` | Year dropdown label |
+| `monthSelectLabel` | `string` | `'Month'` | Month dropdown label |
+
+### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `dateSelected` | `EventEmitter<SelectedDate \| SelectedDate[]>` | Emits when date(s) selected |
+| `modeChanged` | `EventEmitter<'greg' \| 'hijri'>` | Emits when calendar mode changes |
+
+### Types
+
+#### SelectedDate
+
+```typescript
+interface SelectedDate {
+  gregorian: Date;
+  hijri: {
+    year: number;
+    month: number;
+    day: number;
+  };
+  time?: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+  formatted: {
+    gregorian: string;
+    hijri: string;
+    time?: string;
+  };
+}
+```
+
+## Styling
+
+The component can be customized using the `styles` input or by overriding CSS variables:
+
+```typescript
+const customStyles: DatePickerStyles = {
+  primaryColor: '#4f46e5',
+  secondaryColor: '#818cf8',
+  borderRadius: '8px'
+};
+```
+
+## License
+
+MIT
+
+## Credits
+
+Built with [Angular](https://angular.io/) and [hijri-date](https://www.npmjs.com/package/hijri-date).

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Hany
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -0,0 +1,185 @@
+# Hijri Date Time Picker Component
+
+An Angular standalone component for dual-mode Gregorian and Hijri date selection with time support using the Umm Al-Qura calendar system.
+
+## Features
+
+✨ **Dual Calendar Support**: Switch between Gregorian and Hijri (Umm Al-Qura) calendars  
+🌍 **Localization**: Full support for English and Arabic languages  
+↔️ **RTL/LTR**: Automatic layout direction based on locale  
+📅 **Multiple Selection**: Single or multiple date selection modes  
+🕒 **DateTime Support**: Integrated time selection with modern styling  
+🎨 **Customizable Styling**: Comprehensive theming via CSS variables  
+✅ **Validation**: Future date validation with configurable limits  
+📱 **Responsive**: Mobile-friendly design  
+♿ **Accessible**: ARIA labels and keyboard navigation support
+
+## Installation
+
+```bash
+npm install hijri-date-time-picker hijri-date
+```
+
+## Dependencies
+
+- `@angular/core` >= 15.0.0
+- `@angular/common` >= 15.0.0
+- `hijri-date` ^0.2.2
+
+## Usage
+
+### Basic Example
+
+```typescript
+import { Component } from '@angular/core';
+import { HijriDatePickerComponent, SelectedDate } from 'hijri-date-time-picker';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [HijriDatePickerComponent],
+  template: `
+    <hijri-date-picker
+      [mode]="'greg'"
+      [locale]="'en'"
+      (dateSelected)="onDateSelected($event)">
+    </hijri-date-picker>
+  `
+})
+export class AppComponent {
+  onDateSelected(date: SelectedDate) {
+    console.log('Selected date:', date);
+  }
+}
+```
+
+### DateTime Picker Example
+
+```html
+<hijri-date-picker
+  [enableTime]="true"
+  [timeFormat]="'12'"
+  [minuteStep]="15"
+  [enableSeconds]="false"
+  (dateSelected)="onDateTimeSelected($event)">
+</hijri-date-picker>
+```
+
+### Initial Date Binding
+
+```html
+<!-- Single Date Selection -->
+<hijri-date-picker
+  [initialSelectedDate]="myDate">
+</hijri-date-picker>
+
+<!-- Multiple Dates Selection -->
+<hijri-date-picker
+  [multiple]="true"
+  [initialSelectedDates]="myDates">
+</hijri-date-picker>
+```
+
+## API Reference
+
+### Inputs
+
+#### Mode & Configuration
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `canChangeMode` | `boolean` | `true` | Enable/disable mode toggle button |
+| `mode` | `'greg' \| 'hijri'` | `'greg'` | Initial calendar mode |
+| `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Text direction |
+| `locale` | `'en' \| 'ar'` | `'en'` | Language locale |
+
+#### DateTime Configuration (NEW)
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `enableTime` | `boolean` | `false` | Enable time selection UI |
+| `timeFormat` | `'12' \| '24'` | `'24'` | Time display format |
+| `minuteStep` | `number` | `1` | Increment step for minutes |
+| `enableSeconds` | `boolean` | `false` | Show seconds selection |
+| `defaultTime` | `{ hours, minutes, seconds? }` | `undefined` | Default time to show |
+
+#### Validation
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `futureValidation` | `boolean` | `true` | Prevent selecting dates beyond limit |
+| `futureYearsLimit` | `number` | `10` | Maximum years in the future |
+| `isRequired` | `boolean` | `false` | Require date selection before submit |
+| `minDate` | `Date` | `undefined` | Minimum selectable date (dates before are disabled) |
+| `maxDate` | `Date` | `undefined` | Maximum selectable date (dates after are disabled) |
+
+#### Selection & Binding
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `multiple` | `boolean` | `false` | Enable multiple date selection |
+| `showConfirmButton` | `boolean` | `false` | Show submit button |
+| `initialSelectedDate` | `Date` | `undefined` | Pre-select a single date |
+| `initialSelectedDates` | `Date[]` | `[]` | Pre-select multiple dates |
+
+#### Labels
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `submitTextButton` | `string` | `'Submit'` | Submit button text |
+| `todaysDateText` | `string` | `'Today'` | Today button text |
+| `ummAlQuraDateText` | `string` | `'Umm Al-Qura Calendar'` | Calendar type label |
+| `yearSelectLabel` | `string` | `'Year'` | Year dropdown label |
+| `monthSelectLabel` | `string` | `'Month'` | Month dropdown label |
+
+### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `dateSelected` | `EventEmitter<SelectedDate \| SelectedDate[]>` | Emits when date(s) selected |
+| `modeChanged` | `EventEmitter<'greg' \| 'hijri'>` | Emits when calendar mode changes |
+
+### Types
+
+#### SelectedDate
+
+```typescript
+interface SelectedDate {
+  gregorian: Date;
+  hijri: {
+    year: number;
+    month: number;
+    day: number;
+  };
+  time?: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+  formatted: {
+    gregorian: string;
+    hijri: string;
+    time?: string;
+  };
+}
+```
+
+## Styling
+
+The component can be customized using the `styles` input or by overriding CSS variables:
+
+```typescript
+const customStyles: DatePickerStyles = {
+  primaryColor: '#4f46e5',
+  secondaryColor: '#818cf8',
+  borderRadius: '8px'
+};
+```
+
+## License
+
+MIT
+
+## Credits
+
+Built with [Angular](https://angular.io/) and [hijri-date](https://www.npmjs.com/package/hijri-date).

package/dist/demo.d.ts

@@ -1,8 +1,12 @@
-import { SelectedDate, DatePickerStyles } from './lib/hijri-date-picker.component';
+import { SelectedDate, DatePickerStyles } from './lib/hijri-date-picker.types';
 export declare class DemoComponent {
     selectedDates: {
         [key: string]: any;
     };
+    today: Date;
+    minDate: Date;
+    maxDate: Date;
+    maxFutureDate: Date;
     customStyles: DatePickerStyles;
     onDateSelected(date: SelectedDate | SelectedDate[], key: string): void;
 }