ngxsmk-datepicker 1.4.8 → 1.4.10

package/projects/ngxsmk-datepicker/README.md

@@ -1,279 +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)
-- **Live Demo**: [https://stackblitz.com/~/github.com/toozuuu/ngxsmk-datepicker](https://stackblitz.com/~/github.com/toozuuu/ngxsmk-datepicker)
-- **Version**: 1.4.8
-- **License**: MIT
-- **Author**: Sachin Dilshan
-
-## 📷 Screenshots
-
-<p align="left">
-  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/1.png" alt="Angular Advanced Date Range Picker" width="420" />
-  &nbsp;&nbsp;
-  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/2.png" alt="Angular Localization" width="420" />
-  &nbsp;&nbsp;
-  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/3.png" alt="Angular Single Date Selection" width="420" />
-</p>
-
-## 🚀 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.4.8 (Latest)
-- 📅 **Previous Month Days**: Now shows last few days of previous month for better context
-- 🎯 **Smart Selection**: Previous month days are selectable when not disabled by minDate/maxDate
-- 🎨 **Visual Improvements**: Better distinction between current and previous month days
-- 🔧 **Range Selection**: Previous month days can be part of date ranges when valid
-- 🚀 **Enhanced UX**: More intuitive calendar navigation and selection
-
-### v1.4.7
-- ⚡ **Instant Navigation**: Removed all animations for lightning-fast arrow navigation
-- 🚫 **Smart Back Arrow**: Automatically disables back arrow when minDate is set
-- 🎯 **Better UX**: Prevents navigation to invalid date ranges
-- 🧹 **Code Optimization**: Cleaner, more maintainable codebase
-- 📦 **Smaller Bundle**: Reduced CSS and JavaScript footprint
-
-### v1.4.6
-- 🔧 **Fixed Import Paths**: Corrected package exports for proper module resolution
-- 📦 **Better Package Structure**: Improved npm package configuration
-
-### v1.4.5
-- 🐛 Bug fixes and stability improvements
-- 🔧 Enhanced error handling
-- 📱 Improved mobile responsiveness
-- 🎨 Minor UI/UX improvements
-
-### v1.4.0
-- ✅ 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/scripts/analyze-bundle.js

@@ -1,39 +0,0 @@
-#!/usr/bin/env node
-
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-
-console.log('📊 Analyzing bundle size...');
-
-try {
-  // Build the library
-  execSync('ng build ngxsmk-datepicker --configuration production', { stdio: 'inherit' });
-  
-  // Analyze bundle size
-  const distPath = path.join(__dirname, '../dist/ngxsmk-datepicker');
-  const files = fs.readdirSync(distPath, { recursive: true });
-  
-  let totalSize = 0;
-  const fileSizes = [];
-  
-  files.forEach(file => {
-    const filePath = path.join(distPath, file);
-    if (fs.statSync(filePath).isFile()) {
-      const size = fs.statSync(filePath).size;
-      totalSize += size;
-      fileSizes.push({ file, size: (size / 1024).toFixed(2) + ' KB' });
-    }
-  });
-  
-  console.log('\n📈 Bundle Analysis:');
-  console.log('Total size:', (totalSize / 1024).toFixed(2), 'KB');
-  console.log('\nFile breakdown:');
-  fileSizes
-    .sort((a, b) => b.size - a.size)
-    .forEach(({ file, size }) => console.log(`  ${file}: ${size}`));
-    
-} catch (error) {
-  console.error('❌ Bundle analysis failed:', error.message);
-  process.exit(1);
-}

package/scripts/optimize-build.js

@@ -1,132 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Build optimization script for ngxsmk-datepicker
- * This script optimizes the build process for better performance and smaller bundles
- */
-
-const fs = require('fs');
-const path = require('path');
-
-console.log('🚀 Starting build optimization...');
-
-// Update package.json with optimized build settings
-const packageJsonPath = path.join(__dirname, '../projects/ngxsmk-datepicker/package.json');
-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-
-// Add sideEffects optimization
-packageJson.sideEffects = false;
-
-// Add module resolution optimizations
-packageJson.exports = {
-  '.': {
-    'import': './fesm2022/ngxsmk-datepicker.mjs',
-    'require': './fesm2020/ngxsmk-datepicker.mjs'
-  }
-};
-
-// Add optimization metadata
-packageJson.optimization = {
-  'treeShaking': true,
-  'sideEffects': false,
-  'usedExports': true
-};
-
-fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
-
-console.log('✅ Package.json optimized');
-
-// Create optimized tsconfig for production
-const optimizedTsConfig = {
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false,
-    "sourceMap": false,
-    "removeComments": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "exactOptionalPropertyTypes": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial",
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true,
-    "optimization": {
-      "scripts": true,
-      "styles": true
-    }
-  }
-};
-
-fs.writeFileSync(
-  path.join(__dirname, '../projects/ngxsmk-datepicker/tsconfig.lib.optimized.json'),
-  JSON.stringify(optimizedTsConfig, null, 2)
-);
-
-console.log('✅ Optimized TypeScript configuration created');
-
-// Create bundle analyzer script
-const bundleAnalyzerScript = `#!/usr/bin/env node
-
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-
-console.log('📊 Analyzing bundle size...');
-
-try {
-  // Build the library
-  execSync('ng build ngxsmk-datepicker --configuration production', { stdio: 'inherit' });
-  
-  // Analyze bundle size
-  const distPath = path.join(__dirname, '../dist/ngxsmk-datepicker');
-  const files = fs.readdirSync(distPath, { recursive: true });
-  
-  let totalSize = 0;
-  const fileSizes = [];
-  
-  files.forEach(file => {
-    const filePath = path.join(distPath, file);
-    if (fs.statSync(filePath).isFile()) {
-      const size = fs.statSync(filePath).size;
-      totalSize += size;
-      fileSizes.push({ file, size: (size / 1024).toFixed(2) + ' KB' });
-    }
-  });
-  
-  console.log('\\n📈 Bundle Analysis:');
-  console.log('Total size:', (totalSize / 1024).toFixed(2), 'KB');
-  console.log('\\nFile breakdown:');
-  fileSizes
-    .sort((a, b) => b.size - a.size)
-    .forEach(({ file, size }) => console.log(\`  \${file}: \${size}\`));
-    
-} catch (error) {
-  console.error('❌ Bundle analysis failed:', error.message);
-  process.exit(1);
-}
-`;
-
-fs.writeFileSync(
-  path.join(__dirname, 'analyze-bundle.js'),
-  bundleAnalyzerScript
-);
-
-// Make it executable
-fs.chmodSync(path.join(__dirname, 'analyze-bundle.js'), '755');
-
-console.log('✅ Bundle analyzer script created');
-
-console.log('🎉 Build optimization complete!');
-console.log('\\nNext steps:');
-console.log('1. Run: npm run build');
-console.log('2. Run: node scripts/analyze-bundle.js');
-console.log('3. Check the optimized bundle in dist/ngxsmk-datepicker/');
-
-