@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/web-daterangepicker.html

@@ -0,0 +1,634 @@
+<!-- Web Date Range Picker Component
+     Advanced date picker web component from @keenmate/web-daterangepicker
+     Framework-agnostic, TypeScript-based web component with excellent features
+     Repository: https://github.com/keenmate/web-daterangepicker
+     Package: npm install @keenmate/web-daterangepicker
+-->
+
+<!-- ========================================
+     BASIC USAGE
+     ======================================== -->
+
+<!-- Single Date Selection -->
+<web-daterangepicker
+  selection-mode="single"
+  placeholder="Select a date"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Date Range Selection -->
+<web-daterangepicker
+  selection-mode="range"
+  visible-months-count="2"
+  placeholder="Select date range"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Multiple Dates/Ranges Selection -->
+<web-daterangepicker
+  selection-mode="multiple"
+  placeholder="Select multiple dates"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- ========================================
+     DATE FORMAT OPTIONS
+     ======================================== -->
+
+<!-- ISO Format (YYYY-MM-DD) -->
+<web-daterangepicker
+  selection-mode="single"
+  date-format-mask="YYYY-MM-DD"
+  placeholder="2025-01-15">
+</web-daterangepicker>
+
+<!-- European Format (DD.MM.YYYY) -->
+<web-daterangepicker
+  selection-mode="single"
+  date-format-mask="DD.MM.YYYY"
+  placeholder="15.01.2025">
+</web-daterangepicker>
+
+<!-- US Format (MM/DD/YYYY) -->
+<web-daterangepicker
+  selection-mode="single"
+  date-format-mask="MM/DD/YYYY"
+  placeholder="01/15/2025">
+</web-daterangepicker>
+
+<!-- UK Format (DD/MM/YYYY) -->
+<web-daterangepicker
+  selection-mode="single"
+  date-format-mask="DD/MM/YYYY"
+  placeholder="15/01/2025">
+</web-daterangepicker>
+
+<!-- ========================================
+     DATE RESTRICTIONS
+     ======================================== -->
+
+<!-- Min/Max Dates -->
+<web-daterangepicker
+  selection-mode="single"
+  min-date="2025-01-01"
+  max-date="2025-12-31"
+  placeholder="Only 2025 dates"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Disable Weekends -->
+<web-daterangepicker
+  selection-mode="single"
+  disabled-weekdays="0,6"
+  placeholder="Weekdays only"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Future Dates Only (via JavaScript) -->
+<web-daterangepicker
+  id="future-only"
+  selection-mode="single"
+  placeholder="Future dates only"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<script>
+const futureOnly = document.getElementById('future-only');
+const today = new Date().toISOString().split('T')[0];
+futureOnly.setAttribute('min-date', today);
+</script>
+
+<!-- Past Dates Only (via JavaScript) -->
+<web-daterangepicker
+  id="past-only"
+  selection-mode="single"
+  placeholder="Past dates only"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<script>
+const pastOnly = document.getElementById('past-only');
+const yesterday = new Date();
+yesterday.setDate(yesterday.getDate() - 1);
+pastOnly.setAttribute('max-date', yesterday.toISOString().split('T')[0]);
+</script>
+
+<!-- ========================================
+     ACTION BUTTONS
+     ======================================== -->
+
+<!-- Today Button -->
+<web-daterangepicker
+  selection-mode="single"
+  show-today-button="true"
+  placeholder="Select date"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Clear Button -->
+<web-daterangepicker
+  selection-mode="single"
+  show-clear-button="true"
+  placeholder="Select date"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Apply Button (for ranges) -->
+<web-daterangepicker
+  selection-mode="range"
+  visible-months-count="2"
+  show-apply-button="true"
+  placeholder="Select range"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- All Buttons -->
+<web-daterangepicker
+  selection-mode="range"
+  visible-months-count="2"
+  show-today-button="true"
+  show-clear-button="true"
+  show-apply-button="true"
+  placeholder="Select range"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- ========================================
+     INLINE MODE (Always Visible)
+     ======================================== -->
+
+<web-daterangepicker
+  selection-mode="range"
+  visible-months-count="2"
+  positioning-mode="inline"
+  show-today-button="true"
+  show-clear-button="true"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- ========================================
+     CUSTOM RENDERING (Badges & Tooltips)
+     ======================================== -->
+
+<web-daterangepicker
+  id="custom-badges"
+  selection-mode="single"
+  visible-months-count="2"
+  placeholder="Dates with events"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<script>
+const customBadges = document.getElementById('custom-badges');
+
+// Add metadata to dates (holidays, events, etc.)
+customBadges.getDateMetadataCallback = (date) => {
+  const day = date.getDate();
+  const month = date.getMonth();
+
+  // New Year's Day
+  if (month === 0 && day === 1) {
+    return {
+      badge: 'primary',
+      tooltip: 'New Year\'s Day',
+      label: 'Holiday'
+    };
+  }
+
+  // Valentine's Day
+  if (month === 1 && day === 14) {
+    return {
+      badge: 'danger',
+      tooltip: 'Valentine\'s Day',
+      label: 'Holiday'
+    };
+  }
+
+  // Team meetings on Mondays
+  if (date.getDay() === 1) {
+    return {
+      badge: 'warning',
+      tooltip: 'Team Meeting at 10 AM',
+      label: 'Meeting'
+    };
+  }
+
+  return null;
+};
+</script>
+
+<!-- ========================================
+     DISABLED DATES (Advanced)
+     ======================================== -->
+
+<web-daterangepicker
+  id="disabled-dates"
+  selection-mode="single"
+  placeholder="Some dates disabled"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<script>
+const disabledDates = document.getElementById('disabled-dates');
+
+// Disable specific dates via callback
+disabledDates.getDateMetadataCallback = (date) => {
+  const day = date.getDate();
+
+  // Disable all 13th days (superstition example)
+  if (day === 13) {
+    return { isDisabled: true };
+  }
+
+  // Disable first week of each month
+  if (day >= 1 && day <= 7) {
+    return { isDisabled: true };
+  }
+
+  return null;
+};
+</script>
+
+<!-- ========================================
+     RANGE HANDLING MODES
+     ======================================== -->
+
+<!-- Allow Mode (default): Range can include disabled dates -->
+<web-daterangepicker
+  selection-mode="range"
+  visible-months-count="2"
+  disabled-weekdays="0,6"
+  placeholder="Range includes weekends"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Block Mode: Range stops at disabled dates -->
+<web-daterangepicker
+  id="block-mode"
+  selection-mode="range"
+  visible-months-count="2"
+  disabled-weekdays="0,6"
+  placeholder="Range stops at weekends"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Note: Range handling mode is set via JavaScript property, not attribute -->
+<script>
+const blockMode = document.getElementById('block-mode');
+// blockMode.disabledDatesHandling = 'block'; // Requires access to component API
+</script>
+
+<!-- ========================================
+     EVENTS & VALIDATION
+     ======================================== -->
+
+<web-daterangepicker
+  id="with-events"
+  selection-mode="range"
+  placeholder="Select range"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<script>
+const withEvents = document.getElementById('with-events');
+
+// Listen for date selection
+withEvents.addEventListener('date-select', (e) => {
+  console.log('Date selected:', e.detail);
+
+  if (e.detail.date) {
+    console.log('Single date:', e.detail.date);
+  } else if (e.detail.dateRange) {
+    console.log('Range:', e.detail.dateRange.start, 'to', e.detail.dateRange.end);
+  }
+});
+
+// Change event (alias for date-select)
+withEvents.addEventListener('change', (e) => {
+  console.log('Value changed:', withEvents.value);
+});
+
+// Validation callback (async supported)
+withEvents.beforeDateSelectCallback = async (selection) => {
+  // Validate selection before accepting it
+  // Return true to accept, false to reject, or modify selection object
+
+  if (selection.dateRange) {
+    const start = new Date(selection.dateRange.start);
+    const end = new Date(selection.dateRange.end);
+    const days = (end - start) / (1000 * 60 * 60 * 24);
+
+    // Limit range to 30 days
+    if (days > 30) {
+      alert('Range cannot exceed 30 days');
+      return false;
+    }
+  }
+
+  return true;
+};
+</script>
+
+<!-- ========================================
+     PROGRAMMATIC CONTROL
+     ======================================== -->
+
+<web-daterangepicker
+  id="programmatic"
+  selection-mode="range"
+  visible-months-count="2"
+  placeholder="Controlled via JavaScript"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<script>
+const programmatic = document.getElementById('programmatic');
+
+// Set value programmatically
+programmatic.value = '2025-01-01 - 2025-01-31';
+
+// Get current value
+console.log('Current value:', programmatic.value);
+
+// Clear selection
+programmatic.value = '';
+
+// Listen for changes
+programmatic.addEventListener('change', (e) => {
+  console.log('New value:', programmatic.value);
+});
+</script>
+
+<!-- ========================================
+     MULTIPLE MONTHS
+     ======================================== -->
+
+<!-- Show 1 month (default for single mode) -->
+<web-daterangepicker
+  selection-mode="single"
+  visible-months-count="1"
+  placeholder="1 month view"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Show 2 months (default for range mode) -->
+<web-daterangepicker
+  selection-mode="range"
+  visible-months-count="2"
+  placeholder="2 months view"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Show 3 months -->
+<web-daterangepicker
+  selection-mode="range"
+  visible-months-count="3"
+  placeholder="3 months view"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- ========================================
+     LOCALIZATION
+     ======================================== -->
+
+<!-- English (default) -->
+<web-daterangepicker
+  selection-mode="single"
+  locale="en"
+  placeholder="Select date"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- German -->
+<web-daterangepicker
+  selection-mode="single"
+  locale="de"
+  placeholder="Datum auswählen"
+  date-format-mask="DD.MM.YYYY">
+</web-daterangepicker>
+
+<!-- French -->
+<web-daterangepicker
+  selection-mode="single"
+  locale="fr"
+  placeholder="Sélectionner une date"
+  date-format-mask="DD/MM/YYYY">
+</web-daterangepicker>
+
+<!-- ========================================
+     AUTO-CLOSE BEHAVIOR
+     ======================================== -->
+
+<!-- Auto-close on single date selection -->
+<web-daterangepicker
+  selection-mode="single"
+  auto-close="on-select"
+  placeholder="Closes after selection"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Auto-close on range completion -->
+<web-daterangepicker
+  selection-mode="range"
+  auto-close="on-select"
+  placeholder="Closes after range selected"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- Manual close only (use Apply button) -->
+<web-daterangepicker
+  selection-mode="range"
+  show-apply-button="true"
+  placeholder="Requires Apply button"
+  date-format-mask="YYYY-MM-DD">
+</web-daterangepicker>
+
+<!-- ========================================
+     AVAILABLE ATTRIBUTES
+     ======================================== -->
+
+<!--
+  Core Attributes:
+  - selection-mode: "single" | "range" | "multiple"
+  - visible-months-count: Number of months to display (1-3)
+  - placeholder: Input placeholder text
+  - date-format-mask: Date format (YYYY-MM-DD, DD.MM.YYYY, MM/DD/YYYY, DD/MM/YYYY)
+  - positioning-mode: "floating" (default) | "inline"
+  - calendar-placement: Floating UI placement (bottom-start, bottom-end, etc.)
+  - locale: Locale code (en, de, fr, es, etc.)
+  - disabled: Disable the component
+
+  Date Restrictions:
+  - min-date: Minimum selectable date (YYYY-MM-DD)
+  - max-date: Maximum selectable date (YYYY-MM-DD)
+  - disabled-weekdays: Comma-separated day numbers (0=Sunday, 6=Saturday)
+
+  Action Buttons:
+  - show-today-button: "true" | "false" (default)
+  - show-clear-button: "true" | "false" (default)
+  - show-apply-button: "true" | "false" (default)
+
+  Behavior:
+  - auto-close: "on-select" | "manual" (default)
+-->
+
+<!-- ========================================
+     CSS THEMING (40+ Variables)
+     ======================================== -->
+
+<style>
+/* Override CSS custom properties to match your theme */
+:root {
+  /* Colors */
+  --drp-accent-color: #007bff;
+  --drp-primary-bg: #007bff;
+  --drp-text-primary: #2c3e50;
+  --drp-text-secondary: #6c757d;
+  --drp-border-color: #e1e5e9;
+  --drp-card-bg: #ffffff;
+  --drp-hover-bg: #f8f9fa;
+
+  /* Calendar */
+  --drp-calendar-bg: #ffffff;
+  --drp-calendar-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
+  --drp-calendar-border-radius: 4px;
+  --drp-calendar-padding: 1rem;
+
+  /* Days */
+  --drp-day-size: 2.25rem;
+  --drp-day-font-size: 0.875rem;
+  --drp-day-border-radius: 2px;
+  --drp-day-hover-bg: rgba(0, 123, 255, 0.1);
+  --drp-day-selected-bg: #007bff;
+  --drp-day-selected-text: #ffffff;
+  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
+  --drp-day-today-border: #007bff;
+  --drp-day-disabled-opacity: 0.65;
+
+  /* Weekday Header */
+  --drp-weekday-font-size: 0.75rem;
+  --drp-weekday-font-weight: 600;
+  --drp-weekday-text: #6c757d;
+
+  /* Badges */
+  --drp-badge-primary: #007bff;
+  --drp-badge-success: #28a745;
+  --drp-badge-warning: #ffc107;
+  --drp-badge-danger: #dc3545;
+  --drp-badge-info: #17a2b8;
+
+  /* Input */
+  --drp-input-bg: #ffffff;
+  --drp-input-border: #ced4da;
+  --drp-input-padding-v: 0.5rem;
+  --drp-input-padding-h: 0.75rem;
+  --drp-input-font-size: 0.875rem;
+  --drp-input-border-radius: 4px;
+  --drp-input-focus-border: #007bff;
+
+  /* Action Buttons */
+  --drp-action-btn-primary-bg: #007bff;
+  --drp-action-btn-primary-text: #ffffff;
+
+  /* Spacing */
+  --drp-spacing-sm: 0.5rem;
+  --drp-spacing-md: 0.75rem;
+  --drp-spacing-base: 1rem;
+
+  /* Animations */
+  --drp-transition-normal: 0.15s;
+  --drp-easing-smooth: ease;
+}
+</style>
+
+<!-- ========================================
+     TYPESCRIPT TYPES
+     ======================================== -->
+
+<!--
+TypeScript usage:
+
+import '@keenmate/web-daterangepicker';
+import type { DateRangePickerElement } from '@keenmate/web-daterangepicker';
+
+const picker = document.querySelector<DateRangePickerElement>('web-daterangepicker');
+
+if (picker) {
+  // Type-safe API
+  picker.addEventListener('date-select', (e: CustomEvent<{
+    date?: string;
+    dateRange?: { start: string; end: string };
+  }>) => {
+    console.log(e.detail);
+  });
+
+  // Validation callback
+  picker.beforeDateSelectCallback = async (selection) => {
+    return true; // or false to reject
+  };
+
+  // Custom rendering
+  picker.getDateMetadataCallback = (date: Date) => {
+    return {
+      badge: 'primary',
+      tooltip: 'Event',
+      isDisabled: false
+    };
+  };
+}
+-->
+
+<!-- ========================================
+     KEY FEATURES
+     ======================================== -->
+
+<!--
+✅ Selection Modes: Single, range, and multiple date/range selection
+✅ Keyboard Navigation: Full arrow key support with shortcuts (Ctrl+arrows, PageUp/Down, Home/End, Tab, T for today)
+✅ Date Restrictions: Min/max dates, disabled weekdays, custom disabled dates
+✅ Rolling Selector: Innovative month/year picker for quick navigation
+✅ Custom Rendering: Badges, tooltips, and custom content for dates
+✅ Validation: Async beforeDateSelectCallback for validation
+✅ Action Buttons: Today, Clear, Apply buttons with customization
+✅ Range Handling: 5 modes (allow, block, split, individual, prevent) for disabled dates
+✅ Input Masking: Auto-format dates as user types
+✅ Localization: Support for multiple languages and date formats
+✅ Inline Mode: Display calendar directly on page instead of dropdown
+✅ Framework Agnostic: Works with any framework or vanilla JS
+✅ TypeScript: Full type definitions included
+✅ Accessible: Keyboard-friendly with proper focus management
+✅ Customizable: 40+ CSS variables for theming
+✅ Dependencies: Only @floating-ui/dom for smart positioning
+-->
+
+<!-- ========================================
+     KEYBOARD SHORTCUTS
+     ======================================== -->
+
+<!--
+Navigation:
+- ↑↓: Navigate by day (up/down)
+- ←→: Navigate by week (left/right)
+- Ctrl+←→: Previous/next month
+- PageUp/PageDown: Previous/next month
+- Home/End: First/last day of month
+- Ctrl+Home/End: First/last day of year
+- Tab: Switch between month columns (multi-month view)
+- T: Jump to today
+
+Actions:
+- Enter: Select focused day
+- Esc: Close calendar
+- Space: Toggle selection (in multiple mode)
+-->
+
+<!-- ========================================
+     RESOURCES
+     ======================================== -->
+
+<!--
+npm Package: @keenmate/web-daterangepicker
+Repository: https://github.com/keenmate/web-daterangepicker
+Documentation: See package README and ../../web-daterangepicker/ai/ for AI instructions
+Pure Admin Integration: src/scss/core-components/_web-components-theme.scss
+-->