ngxsmk-datepicker 1.3.9 → 1.4.0

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Sachin Dilshan
-
-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/ngxsmk-datepicker/README.md

@@ -1,244 +0,0 @@
-# ngxsmk-datepicker Library
-
-A modern, powerful, and fully customizable date and date-range picker component designed for Angular 17+ and Ionic applications. Seamlessly integrates with both frameworks, offering a flexible, mobile-friendly UI and advanced features to enhance date selection experiences in your apps.
-
-## 📦 Package Information
-
-- **NPM Package**: [ngxsmk-datepicker](https://www.npmjs.com/package/ngxsmk-datepicker)
-- **GitHub Repository**: [https://github.com/toozuuu/ngxsmk-datepicker](https://github.com/toozuuu/ngxsmk-datepicker)
-- **Version**: 1.3.8
-- **License**: MIT
-- **Author**: Sachin Dilshan
-
-## 🚀 Performance Optimizations
-
-This library has been optimized for maximum performance:
-
-- **30% Smaller Bundle**: Optimized build configuration and tree-shaking
-- **40% Faster Rendering**: OnPush change detection strategy
-- **60% Faster Selection**: Memoized date comparisons and debounced operations
-- **Zero Dependencies**: Standalone component with no external dependencies
-- **Tree-shakable**: Only import what you need
-
-## ✨ Features
-
-- **Multiple Selection Modes**: Supports `single`, `range`, and `multiple` date selection
-- **Inline and Popover Display**: Can be rendered inline or as a popover with automatic mode detection
-- **Light and Dark Themes**: Includes built-in support for light and dark modes
-- **Holiday Marking**: Automatically mark and disable holidays using a custom `HolidayProvider`
-- **Date & Time Selection**: Supports optional time inputs with configurable minute intervals
-- **12h/24h Time Support**: Uses internal 24-hour timekeeping but displays a user-friendly 12-hour clock with AM/PM toggle
-- **Predefined Date Ranges**: Offers quick selection of common ranges (e.g., "Last 7 Days")
-- **Advanced Localization (i18n)**: Automatically handles month/weekday names and week start days based on the browser's locale
-- **Custom Styling**: All component elements are prefixed with `ngxsmk-` and themeable via CSS custom properties
-- **Zero Dependencies**: The component is standalone and lightweight
-
-## 🚀 Installation
-
-```bash
-npm install ngxsmk-datepicker
-```
-
-## 📖 Usage
-
-ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module.
-
-### 1. Import the Component
-
-```typescript
-import { Component } from '@angular/core';
-import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [NgxsmkDatepickerComponent],
-  templateUrl: './app.component.html',
-})
-export class AppComponent {
-  // Example for predefined ranges
-  public myRanges: DateRange = {
-    'Today': [new Date(), new Date()],
-    'Last 7 Days': [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()],
-    'This Month': [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)],
-  };
-
-  // Example for disabling weekends
-  isWeekend = (date: Date): boolean => {
-    const day = date.getDay();
-    return day === 0 || day === 6; // Sunday or Saturday
-  };
-
-  onDateChange(value: Date | { start: Date; end: Date } | Date[]) {
-    console.log('Date changed:', value);
-  }
-}
-```
-
-### 2. Add it to Your Template
-
-```html
-<ngxsmk-datepicker
-  [mode]="'range'"
-  [ranges]="myRanges"
-  [showTime]="true"
-  [minuteInterval]="15"
-  [minDate]="today"
-  [isInvalidDate]="isWeekend"
-  [locale]="'en-US'"
-  [theme]="'light'"
-  [inline]="'auto'"
-  (valueChange)="onDateChange($event)">
-</ngxsmk-datepicker>
-```
-
-## ⚙️ API Reference
-
-### Inputs
-
-| Property | Type | Default | Description |
-|:---------|:-----|:--------|:------------|
-| `mode` | `'single' \| 'range' \| 'multiple'` | `'single'` | The selection mode |
-| `inline` | `boolean \| 'always' \| 'auto'` | `false` | Controls the display mode |
-| `locale` | `string` | `navigator.language` | Sets the locale for language and regional formatting |
-| `theme` | `'light' \| 'dark'` | `'light'` | The color theme |
-| `showRanges` | `boolean` | `true` | If true, displays the predefined ranges panel when in 'range' mode |
-| `minDate` | `DateInput` | `null` | The earliest selectable date |
-| `maxDate` | `DateInput` | `null` | The latest selectable date |
-| `isInvalidDate` | `(date: Date) => boolean` | `() => false` | A function to programmatically disable specific dates |
-| `ranges` | `DateRange` | `null` | An object of predefined date ranges |
-| `minuteInterval` | `number` | `1` | Interval for minute dropdown options |
-| `showTime` | `boolean` | `false` | Enables the hour/minute/AM/PM selection section |
-| `value` | `DatepickerValue` | `null` | The initial selected date, date range, or array of dates |
-| `startAt` | `DateInput` | `null` | The date to initially center the calendar view on |
-| `holidayProvider` | `HolidayProvider` | `null` | An object that provides holiday information |
-| `disableHolidays` | `boolean` | `false` | If true, disables holiday dates from being selected |
-
-### Outputs
-
-| Event | Payload | Description |
-|:------|:--------|:------------|
-| `valueChange` | `DatepickerValue` | Emits the newly selected date, range, or array of dates |
-| `action` | `{ type: string; payload?: any }` | Emits various events like `dateSelected`, `timeChanged`, etc. |
-
-## 🎨 Theming
-
-You can easily customize the colors of the datepicker by overriding the CSS custom properties in your own stylesheet.
-
-```css
-ngxsmk-datepicker {
-  --datepicker-primary-color: #d9267d;      /* Main color for selected dates */
-  --datepicker-primary-contrast: #ffffff;  /* Text color on selected dates */
-  --datepicker-range-background: #fce7f3;  /* Background for the date range bar */
-}
-```
-
-To enable the dark theme, simply bind the theme input:
-
-```html
-<ngxsmk-datepicker [theme]="'dark'"></ngxsmk-datepicker>
-```
-
-## 🌍 Localization
-
-The `locale` input controls all internationalization. It automatically formats month names, weekday names, and sets the first day of the week.
-
-```html
-<!-- Renders the calendar in German -->
-<ngxsmk-datepicker [locale]="'de-DE'"></ngxsmk-datepicker>
-
-<!-- Renders the calendar in French -->
-<ngxsmk-datepicker [locale]="'fr-FR'"></ngxsmk-datepicker>
-```
-
-## 🎯 Browser Support
-
-- **Chrome** 90+
-- **Firefox** 88+
-- **Safari** 14+
-- **Edge** 90+
-- **Mobile Safari** 14+
-- **Chrome Mobile** 90+
-
-## 📊 Performance Metrics
-
-- **Bundle Size**: 30% smaller than previous versions
-- **Initial Render**: 40% faster
-- **Date Selection**: 60% faster
-- **Memory Usage**: 25% reduction
-- **Change Detection**: 60% fewer cycles
-
-## 🔧 Development
-
-### Building the Library
-
-```bash
-# Build the library
-npm run build
-
-# Build optimized version
-npm run build:optimized
-
-# Analyze bundle size
-npm run build:analyze
-```
-
-### Testing
-
-```bash
-# Run unit tests
-npm test
-
-# Run e2e tests
-npm run e2e
-```
-
-## 📦 Package Structure
-
-```
-ngxsmk-datepicker/
-├── src/
-│   ├── lib/
-│   │   ├── components/          # Custom components
-│   │   ├── utils/               # Utility functions
-│   │   ├── styles/              # CSS styles
-│   │   └── ngxsmk-datepicker.ts # Main component
-│   └── public-api.ts            # Public API exports
-├── docs/                        # Documentation
-└── package.json                 # Package configuration
-```
-
-## 🤝 Contributing
-
-We welcome and appreciate contributions from the community! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
-
-## 📄 Changelog
-
-### v1.3.8 (Latest)
-- ✅ Performance optimizations (30% smaller bundle)
-- ✅ OnPush change detection strategy
-- ✅ Memoized date comparisons
-- ✅ Tree-shakable architecture
-- ✅ Enhanced TypeScript support
-- ✅ Improved accessibility
-- ✅ Better mobile responsiveness
-
-## 📜 License
-
-MIT License - see [LICENSE](../../LICENSE) file for details.
-
-## 👨‍💻 Author
-
-**Sachin Dilshan**
-- 📧 Email: [sachindilshan040@gmail.com](mailto:sachindilshan040@gmail.com)
-- 🐙 GitHub: [@toozuuu](https://github.com/toozuuu)
-- 📦 NPM: [ngxsmk-datepicker](https://www.npmjs.com/package/ngxsmk-datepicker)
-
-## ⭐ Support
-
-If you find this library helpful, please consider:
-- ⭐ **Starring** the repository
-- 🐛 **Reporting** bugs and issues
-- 💡 **Suggesting** new features
-- 🤝 **Contributing** code improvements
-- 📢 **Sharing** with the community

package/projects/demo-app/README.md

@@ -1,240 +0,0 @@
-# ngxsmk-datepicker Demo Application
-
-A comprehensive demo application showcasing all features and capabilities of the `ngxsmk-datepicker` component. This demo serves as both a testing ground and documentation for developers.
-
-## 🚀 Quick Start
-
-### Prerequisites
-- Node.js 18+ 
-- npm 9+
-- Angular 17+
-
-### Running the Demo
-
-1. **Clone the repository:**
-   ```bash
-   git clone https://github.com/toozuuu/ngxsmk-datepicker.git
-   cd ngxsmk-datepicker
-   ```
-
-2. **Install dependencies:**
-   ```bash
-   npm install
-   ```
-
-3. **Start the development server:**
-   ```bash
-   npm start
-   ```
-
-4. **Open your browser:**
-   Navigate to `http://localhost:4200`
-
-## 📱 Demo Features
-
-### 🎁 Holiday Provider Integration
-- **Smart Holiday Detection**: Automatically marks US holidays
-- **Custom Holiday Provider**: Implements `HolidayProvider` interface
-- **Toggle Functionality**: Enable/disable holiday restrictions
-- **Visual Indicators**: Holidays are highlighted in the calendar
-
-### 📅 Single Date Selection
-- **Popover Calendar**: Clean, intuitive date selection
-- **Weekend Restrictions**: Disable weekends with `isInvalidDate`
-- **Theme Support**: Light and dark mode compatibility
-- **Form Integration**: Reactive forms with validation
-
-### 📊 Inline Range Picker
-- **Always Visible**: Calendar is always displayed (`inline="true"`)
-- **Range Selection**: Select start and end dates
-- **Toggle Controls**: Enable/disable the datepicker
-- **Status Display**: Shows form control status
-
-### ⏰ Date Range with Time
-- **Time Selection**: Hour, minute, and AM/PM controls
-- **Predefined Ranges**: Quick selection options (Today, Last 7 Days, etc.)
-- **Weekend Filtering**: Automatic weekend date disabling
-- **15-minute Intervals**: Configurable time precision
-
-### 📋 Multiple Date Selection
-- **Non-contiguous Dates**: Select multiple individual dates
-- **Action Tracking**: Real-time event logging
-- **Weekend Restrictions**: Consistent with other demos
-- **Event Handling**: Comprehensive action event system
-
-## 🎨 Theme Support
-
-The demo includes a theme toggle that switches between:
-- **Light Theme**: Clean, modern appearance
-- **Dark Theme**: Dark background with light text
-- **Automatic Adaptation**: All components adapt to theme changes
-
-## 🔧 Technical Implementation
-
-### Component Structure
-```typescript
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [CommonModule, NgxsmkDatepickerComponent, ReactiveFormsModule, JsonPipe],
-  // ... component configuration
-})
-export class App {
-  // Form controls and configuration
-  public datepickerForm = new FormGroup({
-    singleDate: new FormControl(),
-    singleDate2: new FormControl(),
-    inlineRange: new FormControl(),
-    rangeWithTime: new FormControl(),
-    multipleDates: new FormControl<Date[] | null>(null),
-  });
-}
-```
-
-### Holiday Provider Implementation
-```typescript
-class SampleHolidayProvider implements HolidayProvider {
-  private readonly holidays: { [key: string]: string } = {
-    '2025-01-01': 'New Year\'s Day',
-    '2025-01-20': 'MLK Jr. Day',
-    // ... more holidays
-  };
-
-  isHoliday(date: Date): boolean {
-    const key = this.formatDateKey(date);
-    return !!this.holidays[key];
-  }
-}
-```
-
-## 📊 Performance Metrics
-
-The demo showcases the optimized performance:
-- **30% Smaller Bundle**: Reduced bundle size through optimization
-- **40% Faster Rendering**: OnPush change detection strategy
-- **60% Faster Selection**: Memoized date comparisons
-
-## 🎯 Browser Compatibility
-
-Tested on:
-- **Chrome** 90+ ✅
-- **Firefox** 88+ ✅
-- **Safari** 14+ ✅
-- **Edge** 90+ ✅
-- **Mobile Safari** 14+ ✅
-- **Chrome Mobile** 90+ ✅
-
-## 🛠️ Development
-
-### Available Scripts
-```bash
-# Start development server
-npm start
-
-# Build for production
-npm run build
-
-# Run tests
-npm test
-
-# Lint code
-npm run lint
-```
-
-### Project Structure
-```
-demo-app/
-├── src/
-│   ├── app/
-│   │   ├── app.ts              # Main demo component
-│   │   ├── app.config.ts       # App configuration
-│   │   └── app.routes.ts       # Routing configuration
-│   ├── index.html              # HTML template
-│   └── styles.scss             # Global styles
-├── public/
-│   └── favicon.ico              # App icon
-└── README.md                   # This file
-```
-
-## 🎨 Customization
-
-### CSS Variables
-The demo uses CSS custom properties for theming:
-```css
-:host {
-  --datepicker-primary-color: #6d28d9;
-  --datepicker-primary-contrast: #ffffff;
-  --datepicker-range-background: #f5f3ff;
-  --datepicker-background: #ffffff;
-  --datepicker-text-color: #222428;
-  --datepicker-subtle-text-color: #9ca3af;
-  --datepicker-border-color: #e9e9e9;
-  --datepicker-hover-background: #f0f0f0;
-}
-```
-
-### Dark Theme
-```css
-:host(.dark-theme) {
-  --datepicker-range-background: rgba(139, 92, 246, 0.2);
-  --datepicker-background: #1f2937;
-  --datepicker-text-color: #d1d5db;
-  --datepicker-subtle-text-color: #6b7280;
-  --datepicker-border-color: #4b5563;
-  --datepicker-hover-background: #374151;
-  background-color: #111827;
-}
-```
-
-## 📱 Responsive Design
-
-The demo is fully responsive and works on:
-- **Desktop** (1200px+)
-- **Tablet** (768px - 1199px)
-- **Mobile** (320px - 767px)
-
-## 🐛 Troubleshooting
-
-### Common Issues
-
-1. **Port already in use:**
-   ```bash
-   npm start -- --port 4201
-   ```
-
-2. **Build errors:**
-   ```bash
-   npm run build
-   ```
-
-3. **Dependency issues:**
-   ```bash
-   rm -rf node_modules package-lock.json
-   npm install
-   ```
-
-## 📄 License
-
-This demo application is part of the ngxsmk-datepicker project and is licensed under the MIT License.
-
-## 👨‍💻 Author
-
-**Sachin Dilshan**
-- 📧 Email: [sachindilshan040@gmail.com](mailto:sachindilshan040@gmail.com)
-- 🐙 GitHub: [@toozuuu](https://github.com/toozuuu)
-
-## 🤝 Contributing
-
-Contributions to the demo app are welcome! Please:
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Test thoroughly
-5. Submit a pull request
-
-## 📚 Related Documentation
-
-- [Main Library README](../README.md)
-- [API Documentation](../projects/ngxsmk-datepicker/README.md)
-- [GitHub Repository](https://github.com/toozuuu/ngxsmk-datepicker)
-- [NPM Package](https://www.npmjs.com/package/ngxsmk-datepicker)