@oneluiz/dual-datepicker 3.2.0 → 3.4.0

package/README.md

@@ -31,11 +31,13 @@ npm install @oneluiz/dual-datepicker
   - [Disabled Dates](#disabled-dates)
   - [Display Format](#display-format)
   - [Apply/Confirm Button](#applyconfirm-button)
+  - [Time Picker](#time-picker)
   - [Hover Range Preview](#hover-range-preview)
   - [Custom Presets](#custom-presets)
   - [Date Adapter System](#date-adapter-system)
   - [Keyboard Navigation](#keyboard-navigation)
 - [Customization](#-customization)
+  - [Theming System](#theming-system)
   - [Styling Options](#styling-options)
   - [Localization (i18n)](#localization-i18n)
 - [API Reference](#-api-reference)
@@ -60,7 +62,8 @@ npm install @oneluiz/dual-datepicker
 - 🚫 **Disabled Dates** – Block weekends, holidays, or custom logic
 - 🎨 **Display Format** – Customize date display (DD/MM/YYYY, MM/DD/YYYY, etc.)
 - ✅ **Apply/Confirm Button** – Require confirmation before emitting (perfect for dashboards)
-- 🎨 **Fully Customizable** – Every color, padding, border configurable
+- � **Theming System** – Built-in themes for Bootstrap, Bulma, Foundation, Tailwind, + Custom
+- �🎨 **Fully Customizable** – Every color, padding, border configurable
 - 📦 **Lightweight** – ~60 KB gzipped total bundle
 - 🚀 **Performance** – OnPush change detection + trackBy optimization
 - ♿ **Accessible** – Full keyboard navigation, ARIA labels, WCAG 2.1 AA compliant
@@ -468,6 +471,109 @@ export class DashboardExample {
 | User control | Automatic | Explicit confirmation |
 | Best for | Simple forms | Dashboards, reports |
 
+---
+
+### Time Picker
+
+**Select precise datetime ranges with optional time picker.** Choose exact start and end times in addition to dates, with support for 12h/24h formats and configurable minute steps.
+
+#### Basic Usage
+
+```typescript
+import { Component } from '@angular/core';
+import { DateRange } from '@oneluiz/dual-datepicker';
+
+@Component({
+  template: `
+    <ngx-dual-datepicker
+      [enableTimePicker]="true"
+      (dateRangeChange)="onDateRangeChange($event)">
+    </ngx-dual-datepicker>
+  `
+})
+export class AppointmentComponent {
+  onDateRangeChange(range: DateRange) {
+    console.log('Start:', range.startDate, 'at', range.startTime);
+    console.log('End:', range.endDate, 'at', range.endTime);
+    // startTime and endTime are in 'HH:mm' format
+  }
+}
+```
+
+#### Configuration Options
+
+```typescript
+// 12-hour format with AM/PM
+<ngx-dual-datepicker
+  [enableTimePicker]="true"
+  timeFormat="12h"
+  defaultStartTime="09:00"
+  defaultEndTime="17:00"
+  (dateRangeChange)="onDateRangeChange($event)">
+</ngx-dual-datepicker>
+
+// 30-minute intervals
+<ngx-dual-datepicker
+  [enableTimePicker]="true"
+  [minuteStep]="30"
+  (dateRangeChange)="onDateRangeChange($event)">
+</ngx-dual-datepicker>
+
+// With Apply button for controlled changes
+<ngx-dual-datepicker
+  [enableTimePicker]="true"
+  [requireApply]="true"
+  (dateRangeChange)="onDateRangeChange($event)">
+</ngx-dual-datepicker>
+```
+
+#### DateRange with Time
+
+When `enableTimePicker` is true, the DateRange includes optional time properties:
+
+```typescript
+interface DateRange {
+  startDate: string;     // 'YYYY-MM-DD'
+  endDate: string;       // 'YYYY-MM-DD'
+  rangeText: string;     // Display text
+  startTime?: string;    // 'HH:mm' or 'HH:mm AM/PM'
+  endTime?: string;      // 'HH:mm' or 'HH:mm AM/PM'
+}
+```
+
+#### Configuration Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `enableTimePicker` | boolean | `false` | Enable time selection |
+| `timeFormat` | `'12h'` \| `'24h'` | `'24h'` | Time display format |
+| `minuteStep` | number | `15` | Minute intervals (1, 5, 15, or 30) |
+| `defaultStartTime` | string | `'00:00'` | Default start time (HH:mm) |
+| `defaultEndTime` | string | `'23:59'` | Default end time (HH:mm) |
+
+#### Perfect Use Cases
+
+- 📅 **Appointment booking systems** - Schedule meetings with exact times
+- 🎫 **Event scheduling** - Create events with start and end times
+- 🏢 **Meeting planners** - Book conference rooms with time slots
+- 📊 **Time-based reporting** - Generate reports for specific time ranges
+- 👥 **Shift management** - Assign work shifts with precise times
+- 🎬 **Reservation systems** - Book resources with time constraints
+
+#### Key Features
+
+- ✅ Optional - disabled by default (backward compatible)
+- ✅ 12h (AM/PM) or 24h time format
+- ✅ Configurable minute steps (1, 5, 15, 30)
+- ✅ Default start/end times support
+- ✅ Works with all themes
+- ✅ Integrates with requireApply mode
+- ✅ Fully accessible with keyboard navigation
+
+**For complete documentation, see [TIME_PICKER.md](TIME_PICKER.md)**
+
+---
+
 ### Hover Range Preview
 
 **Automatic visual feedback while selecting dates.** Provides instant visual preview of the date range when hovering over dates before clicking to confirm.
@@ -662,6 +768,29 @@ export class AppComponent {}
 
 ## 🎨 Customization
 
+### Theming System
+
+The datepicker now supports 6 built-in themes: `default`, `bootstrap`, `bulma`, `foundation`, `tailwind`, and `custom`.
+
+```typescript
+<ngx-dual-datepicker theme="bootstrap"></ngx-dual-datepicker>
+```
+
+```scss
+// In your styles.scss
+@import '@oneluiz/dual-datepicker/themes/bootstrap';
+```
+
+**Available Themes:**
+- `default` - Original styling (no import needed)
+- `bootstrap` - Bootstrap 5 compatible styling
+- `bulma` - Bulma CSS compatible styling
+- `foundation` - Foundation CSS compatible styling
+- `tailwind` - Tailwind CSS compatible styling
+- `custom` - CSS variables-based customization
+
+**📚 For detailed theming documentation, see [THEMING.md](./THEMING.md)**
+
 ### Styling Options
 
 ```html
@@ -734,6 +863,12 @@ spanishLocale: LocaleConfig = {
 | `disabledDates` | `Date[] \| ((date: Date) => boolean)` | `undefined` | Array of dates or function to disable specific dates |
 | `displayFormat` | `string` | `'D MMM'` | Format for displaying dates in input (tokens: YYYY, YY, MMMM, MMM, MM, M, DD, D) |
 | `requireApply` | `boolean` | `false` | Require Apply button confirmation before emitting changes |
+| `enableTimePicker` | `boolean` | `false` | Enable time selection |
+| `timeFormat` | `'12h' \| '24h'` | `'24h'` | Time display format (12-hour with AM/PM or 24-hour) |
+| `minuteStep` | `number` | `15` | Step for minute selector (1, 5, 15, or 30) |
+| `defaultStartTime` | `string` | `'00:00'` | Default start time in HH:mm format |
+| `defaultEndTime` | `string` | `'23:59'` | Default end time in HH:mm format |
+| `theme` | `ThemeType` | `'default'` | Theme preset: 'default', 'bootstrap', 'bulma', 'foundation', 'tailwind', 'custom' |
 | `enableKeyboardNavigation` | `boolean` | `true` | Enable keyboard navigation |
 | `inputBackgroundColor` | `string` | `'#fff'` | Input background color |
 | `inputTextColor` | `string` | `'#495057'` | Input text color |
@@ -784,6 +919,8 @@ interface DateRange {
   startDate: string;   // ISO format: 'YYYY-MM-DD'
   endDate: string;     // ISO format: 'YYYY-MM-DD'
   rangeText: string;   // Display text: 'DD Mon - DD Mon'
+  startTime?: string;  // Optional: 'HH:mm' or 'HH:mm AM/PM' (when enableTimePicker=true)
+  endTime?: string;    // Optional: 'HH:mm' or 'HH:mm AM/PM' (when enableTimePicker=true)
 }
 
 interface MultiDateRange {
@@ -1861,20 +1998,36 @@ export class ExampleComponent {
 
 Recently shipped:
 
+**v3.3.0:**
+- ✅ **Theming System** - Pre-built themes for Bootstrap, Bulma, Foundation, Tailwind CSS, and Custom
+- ✅ **CSS Variables Support** - 13 customizable variables for branding
+- ✅ **Framework Integration** - Match your existing design system seamlessly
+
+**v3.2.0:**
+- ✅ **Hover Range Preview** - Visual feedback before confirming selection
+- ✅ **Apply/Confirm Button** - Require confirmation for enterprise dashboards
+- ✅ **Display Format** - Customize date display (DD/MM/YYYY, MM/DD/YYYY, etc.)
+- ✅ **Disabled Dates** - Block weekends, holidays, or custom logic
+
+**v3.1.0:**
+- ✅ **Complete Keyboard Navigation** - Arrow keys, Enter/Space, Tab, Escape, Home/End, PageUp/Down
+- ✅ **Full Accessibility Audit** - WCAG 2.1 Level AA compliance
+
+**v2.7.0:**
+- ✅ **Multi-range Support** - Select UNLIMITED date ranges (Material CAN'T do this!)
+
 **v2.6.0:**
-- ✅ **Flexible Preset System** - `getValue()` pattern for custom date logic (This month, Last month, Quarter to date, etc.)
+- ✅ **Flexible Preset System** - `getValue()` pattern for custom date logic
 - ✅ **Pre-built Preset Utilities** - CommonPresets for Dashboard, Reporting, Financial, Analytics
-- ✅ **Real Differentiator** - Perfect for ERP, BI, POS, and Reporting systems
 
 **v2.5.0:**
 - ✅ **Date Adapter System** - Support for DayJS, date-fns, Luxon, and custom date libraries
 
-Planned features and improvements:
+Planned features:
 
-- ⬜ **Complete keyboard navigation** - Arrow keys, Enter/Space, Tab, Escape
-- ⬜ **Full accessibility audit** - WCAG 2.1 AA compliance
-- ⬜ **Multi-range support** - Select multiple date ranges
-- ⬜ **Theming system** - Pre-built theme presets
+- ⬜ **Time Picker** - Select date + time ranges
+- ⬜ **Mobile Optimizations** - Enhanced touch gestures and responsive layout
+- ⬜ **Range Shortcuts** - Quick selection buttons (Today, This Week, etc.)
 
 ## 📄 License
 

package/THEMING.md

@@ -0,0 +1,313 @@
+# Theming System
+
+The `ng-dual-datepicker` component comes with a flexible theming system that allows you to style it according to your preferred CSS framework or custom design.
+
+## Available Themes
+
+- **default** - Original styling (no additional imports needed)
+- **bootstrap** - Bootstrap 5 compatible styling
+- **bulma** - Bulma CSS compatible styling
+- **foundation** - Foundation CSS compatible styling
+- **tailwind** - Tailwind CSS compatible styling
+- **custom** - Customizable theme with CSS variables
+
+## Usage
+
+### 1. Set the Theme
+
+Add the `theme` input to your component:
+
+```html
+<ngx-dual-datepicker 
+  theme="bootstrap"
+  [presets]="presets"
+  (dateRangeChange)="onDateRangeChange($event)">
+</ngx-dual-datepicker>
+```
+
+### 2. Import the Theme Styles
+
+Import the corresponding theme stylesheet in your global `styles.scss`:
+
+```scss
+// For Bootstrap theme
+@import '@oneluiz/dual-datepicker/themes/bootstrap';
+
+// For Bulma theme
+@import '@oneluiz/dual-datepicker/themes/bulma';
+
+// For Foundation theme
+@import '@oneluiz/dual-datepicker/themes/foundation';
+
+// For Tailwind theme
+@import '@oneluiz/dual-datepicker/themes/tailwind';
+
+// For Custom theme
+@import '@oneluiz/dual-datepicker/themes/custom';
+```
+
+## Theme Details
+
+### Default Theme
+
+No additional configuration needed. This is the original styling that works out of the box.
+
+```html
+<ngx-dual-datepicker [presets]="presets"></ngx-dual-datepicker>
+```
+
+### Bootstrap Theme
+
+Compatible with Bootstrap 5. Make sure you have Bootstrap CSS loaded in your project.
+
+```html
+<ngx-dual-datepicker theme="bootstrap" [presets]="presets"></ngx-dual-datepicker>
+```
+
+```scss
+@import '@oneluiz/dual-datepicker/themes/bootstrap';
+```
+
+### Bulma Theme
+
+Compatible with Bulma CSS. Make sure you have Bulma CSS loaded in your project.
+
+```html
+<ngx-dual-datepicker theme="bulma" [presets]="presets"></ngx-dual-datepicker>
+```
+
+```scss
+@import '@oneluiz/dual-datepicker/themes/bulma';
+```
+
+### Foundation Theme
+
+Compatible with Foundation CSS. Make sure you have Foundation CSS loaded in your project.
+
+```html
+<ngx-dual-datepicker theme="foundation" [presets]="presets"></ngx-dual-datepicker>
+```
+
+```scss
+@import '@oneluiz/dual-datepicker/themes/foundation';
+```
+
+### Tailwind CSS Theme
+
+Compatible with Tailwind CSS. Make sure you have Tailwind configured in your project.
+
+```html
+<ngx-dual-datepicker theme="tailwind" [presets]="presets"></ngx-dual-datepicker>
+```
+
+```scss
+@import '@oneluiz/dual-datepicker/themes/tailwind';
+```
+
+### Custom Theme
+
+The custom theme provides CSS variables that you can easily override to match your brand colors.
+
+```html
+<ngx-dual-datepicker theme="custom" [presets]="presets"></ngx-dual-datepicker>
+```
+
+```scss
+@import '@oneluiz/dual-datepicker/themes/custom';
+
+// Override the CSS variables
+.datepicker-wrapper.theme-custom {
+  --dp-primary-color: #ff6b6b;
+  --dp-primary-hover: #ee5a6f;
+  --dp-danger-color: #fa5252;
+  --dp-danger-hover: #e03131;
+  --dp-text-color: #2d3748;
+  --dp-text-muted: #718096;
+  --dp-border-color: #e2e8f0;
+  --dp-border-hover: #cbd5e0;
+  --dp-bg-color: #ffffff;
+  --dp-bg-hover: #f7fafc;
+  --dp-bg-disabled: #edf2f7;
+  --dp-border-radius: 0.5rem;
+}
+```
+
+## Available CSS Variables (Custom Theme)
+
+| Variable | Default Value | Description |
+|----------|--------------|-------------|
+| `--dp-primary-color` | `#3b82f6` | Primary button and selection color |
+| `--dp-primary-hover` | `#2563eb` | Primary hover state color |
+| `--dp-danger-color` | `#ef4444` | Danger/close button color |
+| `--dp-danger-hover` | `#dc2626` | Danger hover state color |
+| `--dp-text-color` | `#1f2937` | Main text color |
+| `--dp-text-muted` | `#6b7280` | Muted/placeholder text color |
+| `--dp-border-color` | `#d1d5db` | Border color |
+| `--dp-border-hover` | `#9ca3af` | Border hover color |
+| `--dp-bg-color` | `#ffffff` | Background color |
+| `--dp-bg-hover` | `#f3f4f6` | Hover background color |
+| `--dp-bg-disabled` | `#f9fafb` | Disabled state background |
+| `--dp-border-radius` | `0.375rem` | Border radius for elements |
+| `--dp-transition` | `all 0.15s ease` | Transition effect |
+
+## Creating Your Own Theme
+
+You can create your own theme by:
+
+1. Creating a new SCSS file (e.g., `my-theme.scss`)
+2. Targeting the `.datepicker-wrapper.theme-custom` class
+3. Defining your custom styles
+
+Example:
+
+```scss
+// my-theme.scss
+.datepicker-wrapper.theme-custom {
+  .datepicker-input {
+    // Your custom styles
+    border: 2px solid #your-color;
+    border-radius: 12px;
+  }
+
+  .date-picker-dropdown {
+    // Your custom styles
+    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
+  }
+
+  .day.selected {
+    // Your custom styles
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+}
+```
+
+## TypeScript Type
+
+The theme type is exported from the library:
+
+```typescript
+import { ThemeType } from '@oneluiz/dual-datepicker';
+
+const myTheme: ThemeType = 'bootstrap';
+```
+
+## Mixing Themes and Custom Inputs
+
+You can still use the custom styling inputs (`inputBackgroundColor`, `inputBorderColor`, etc.) along with themes. The input properties will override the theme styles:
+
+```html
+<ngx-dual-datepicker 
+  theme="bootstrap"
+  inputBorderColor="#ff0000"
+  inputBorderColorFocus="#00ff00"
+  [presets]="presets">
+</ngx-dual-datepicker>
+```
+
+## Best Practices
+
+1. **Choose One Theme**: Select one theme that matches your project's CSS framework
+2. **Import Only What You Need**: Only import the theme stylesheet you're using
+3. **Consistent Styling**: Use the same theme across all datepicker instances
+4. **Custom Variables**: For small adjustments, use the Custom theme with CSS variables instead of creating a whole new theme
+
+## Examples
+
+### Bootstrap Project
+
+```typescript
+// app.component.ts
+import { Component } from '@angular/core';
+import { DualDatepickerComponent } from '@oneluiz/dual-datepicker';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [DualDatepickerComponent],
+  template: `
+    <ngx-dual-datepicker 
+      theme="bootstrap"
+      [presets]="presets"
+      (dateRangeChange)="onDateRangeChange($event)">
+    </ngx-dual-datepicker>
+  `
+})
+export class AppComponent {
+  // ...
+}
+```
+
+```scss
+// styles.scss
+@import 'bootstrap/scss/bootstrap';
+@import '@oneluiz/dual-datepicker/themes/bootstrap';
+```
+
+### Tailwind Project
+
+```typescript
+// app.component.ts
+template: `
+  <ngx-dual-datepicker 
+    theme="tailwind"
+    [presets]="presets">
+  </ngx-dual-datepicker>
+`
+```
+
+```scss
+// styles.scss
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import '@oneluiz/dual-datepicker/themes/tailwind';
+```
+
+### Custom Branded Theme
+
+```typescript
+// app.component.ts
+template: `
+  <ngx-dual-datepicker 
+    theme="custom"
+    [presets]="presets">
+  </ngx-dual-datepicker>
+`
+```
+
+```scss
+// styles.scss
+@import '@oneluiz/dual-datepicker/themes/custom';
+
+.datepicker-wrapper.theme-custom {
+  --dp-primary-color: #your-brand-color;
+  --dp-primary-hover: #your-brand-hover-color;
+  --dp-border-radius: 0.75rem;
+}
+```
+
+## FAQ
+
+**Q: Can I use multiple themes in the same application?**
+A: Yes, but you'll need to import all the theme stylesheets you plan to use. Each component can have its own theme.
+
+**Q: Do I need to import Bootstrap/Bulma/Foundation/Tailwind CSS separately?**
+A: Yes, the theme stylesheets only provide datepicker-specific styles. You need to have the base framework CSS loaded in your project.
+
+**Q: Can I switch themes dynamically?**
+A: Yes, you can bind the `theme` input to a variable and change it at runtime.
+
+```typescript
+currentTheme: ThemeType = 'bootstrap';
+
+switchTheme() {
+  this.currentTheme = this.currentTheme === 'bootstrap' ? 'bulma' : 'bootstrap';
+}
+```
+
+**Q: What happens if I don't import the theme stylesheet?**
+A: The component will still work but will use the default inline styles. The theme-specific styles won't be applied.
+
+## Support
+
+For issues or questions about theming, please visit [GitHub Issues](https://github.com/oneluiz/ng-dual-datepicker/issues).

package/dual-datepicker.component.d.ts

@@ -5,6 +5,8 @@ export interface DateRange {
     startDate: string;
     endDate: string;
     rangeText: string;
+    startTime?: string;
+    endTime?: string;
 }
 export interface MultiDateRange {
     ranges: DateRange[];
@@ -24,6 +26,7 @@ export interface LocaleConfig {
     dayNamesShort?: string[];
     firstDayOfWeek?: number;
 }
+export type ThemeType = 'default' | 'bootstrap' | 'bulma' | 'foundation' | 'tailwind' | 'custom';
 export declare class DualDatepickerComponent implements OnInit, OnChanges, ControlValueAccessor {
     private elementRef;
     placeholder: string;
@@ -37,6 +40,7 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     closeOnClickOutside: boolean;
     enableKeyboardNavigation: boolean;
     presets: PresetConfig[];
+    theme: ThemeType;
     inputBackgroundColor: string;
     inputTextColor: string;
     inputBorderColor: string;
@@ -47,6 +51,11 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     disabledDates: Date[] | ((date: Date) => boolean) | undefined;
     displayFormat: string;
     requireApply: boolean;
+    enableTimePicker: boolean;
+    timeFormat: '12h' | '24h';
+    minuteStep: number;
+    defaultStartTime: string;
+    defaultEndTime: string;
     dateRangeChange: EventEmitter<DateRange>;
     dateRangeSelected: EventEmitter<DateRange>;
     multiDateRangeChange: EventEmitter<MultiDateRange>;
@@ -63,6 +72,12 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     pendingStartDate: string;
     pendingEndDate: string;
     hasPendingChanges: import("@angular/core").WritableSignal<boolean>;
+    startHour: number;
+    startMinute: number;
+    endHour: number;
+    endMinute: number;
+    showStartTimePicker: import("@angular/core").WritableSignal<boolean>;
+    showEndTimePicker: import("@angular/core").WritableSignal<boolean>;
     hoverDate: import("@angular/core").WritableSignal<string>;
     selectedRanges: import("@angular/core").WritableSignal<DateRange[]>;
     currentRangeIndex: import("@angular/core").WritableSignal<number>;
@@ -121,10 +136,25 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     private emitMultiChange;
     private emitMultiSelection;
     private getDateRangeValue;
+    toggleStartTimePicker(): void;
+    toggleEndTimePicker(): void;
+    incrementStartHour(): void;
+    decrementStartHour(): void;
+    incrementStartMinute(): void;
+    decrementStartMinute(): void;
+    incrementEndHour(): void;
+    decrementEndHour(): void;
+    incrementEndMinute(): void;
+    decrementEndMinute(): void;
+    formatTime(hour: number, minute: number): string;
+    parseTime(timeString: string): {
+        hour: number;
+        minute: number;
+    };
     writeValue(value: DateRange | null): void;
     registerOnChange(fn: (value: DateRange | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DualDatepickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DualDatepickerComponent, "ngx-dual-datepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "showPresets": { "alias": "showPresets"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "multiRange": { "alias": "multiRange"; "required": false; }; "closeOnSelection": { "alias": "closeOnSelection"; "required": false; }; "closeOnPresetSelection": { "alias": "closeOnPresetSelection"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "enableKeyboardNavigation": { "alias": "enableKeyboardNavigation"; "required": false; }; "presets": { "alias": "presets"; "required": false; }; "inputBackgroundColor": { "alias": "inputBackgroundColor"; "required": false; }; "inputTextColor": { "alias": "inputTextColor"; "required": false; }; "inputBorderColor": { "alias": "inputBorderColor"; "required": false; }; "inputBorderColorHover": { "alias": "inputBorderColorHover"; "required": false; }; "inputBorderColorFocus": { "alias": "inputBorderColorFocus"; "required": false; }; "inputPadding": { "alias": "inputPadding"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "requireApply": { "alias": "requireApply"; "required": false; }; }, { "dateRangeChange": "dateRangeChange"; "dateRangeSelected": "dateRangeSelected"; "multiDateRangeChange": "multiDateRangeChange"; "multiDateRangeSelected": "multiDateRangeSelected"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DualDatepickerComponent, "ngx-dual-datepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "showPresets": { "alias": "showPresets"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "multiRange": { "alias": "multiRange"; "required": false; }; "closeOnSelection": { "alias": "closeOnSelection"; "required": false; }; "closeOnPresetSelection": { "alias": "closeOnPresetSelection"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "enableKeyboardNavigation": { "alias": "enableKeyboardNavigation"; "required": false; }; "presets": { "alias": "presets"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "inputBackgroundColor": { "alias": "inputBackgroundColor"; "required": false; }; "inputTextColor": { "alias": "inputTextColor"; "required": false; }; "inputBorderColor": { "alias": "inputBorderColor"; "required": false; }; "inputBorderColorHover": { "alias": "inputBorderColorHover"; "required": false; }; "inputBorderColorFocus": { "alias": "inputBorderColorFocus"; "required": false; }; "inputPadding": { "alias": "inputPadding"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "requireApply": { "alias": "requireApply"; "required": false; }; "enableTimePicker": { "alias": "enableTimePicker"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "defaultStartTime": { "alias": "defaultStartTime"; "required": false; }; "defaultEndTime": { "alias": "defaultEndTime"; "required": false; }; }, { "dateRangeChange": "dateRangeChange"; "dateRangeSelected": "dateRangeSelected"; "multiDateRangeChange": "multiDateRangeChange"; "multiDateRangeSelected": "multiDateRangeSelected"; }, never, never, true, never>;
 }