@keenmate/web-daterangepicker 1.7.0 → 1.8.1

package/src/scss/_calendar-grid.scss

@@ -1,241 +0,0 @@
-// ==============================================================================
-// DATE RANGE PICKER - CALENDAR GRID
-// ==============================================================================
-// Weekday labels, days grid, and individual day cells with all states
-
-@use 'variables' as *;
-
-// ==============================================================================
-// WEEKDAY LABELS
-// ==============================================================================
-
-.drp-date-picker__weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: var(--drp-spacing-xs);
-  margin-bottom: var(--drp-spacing-sm);
-}
-
-.drp-date-picker__weekday {
-  text-align: center;
-  font-size: var(--drp-font-size-xs);
-  font-weight: var(--drp-font-weight-semibold);
-  color: var(--drp-weekday-color);
-  padding: var(--drp-spacing-xs);
-  text-transform: uppercase;
-}
-
-// ==============================================================================
-// DAYS GRID
-// ==============================================================================
-
-.drp-date-picker__days {
-  display: flex;
-  flex-direction: column;
-  gap: var(--drp-spacing-xs);
-  margin-bottom: var(--drp-spacing-md);
-}
-
-.drp-date-picker__date-row {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: var(--drp-spacing-xs);
-}
-
-// ==============================================================================
-// DAY CELLS
-// ==============================================================================
-
-.drp-date-picker__day {
-  aspect-ratio: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--drp-font-size-sm);
-  color: var(--drp-day-text-color);
-  border-radius: var(--drp-border-radius);
-  cursor: pointer;
-  border: $drp-day-border-width solid $drp-day-border-color;
-  position: relative; // For absolute positioning of labels
-
-  &:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
-    background-color: var(--drp-day-bg-hover);
-    border-color: var(--drp-day-border-hover);
-  }
-
-  // --------------------------------------
-  // Today
-  // --------------------------------------
-  &--today {
-    border-color: var(--drp-day-today-border);
-    font-weight: var(--drp-font-weight-semibold);
-  }
-
-  // --------------------------------------
-  // Selected
-  // --------------------------------------
-  &--selected {
-    background-color: var(--drp-day-selected-bg);
-    color: var(--drp-day-selected-color);
-    font-weight: var(--drp-font-weight-semibold);
-
-    &:hover {
-      background-color: var(--drp-day-selected-bg-hover);
-    }
-  }
-
-  // --------------------------------------
-  // Focused (keyboard navigation)
-  // --------------------------------------
-  &--focused {
-    outline: $drp-day-focused-outline-width solid var(--drp-day-focused-outline);
-    outline-offset: $drp-day-focused-outline-offset;
-  }
-
-  // --------------------------------------
-  // Disabled
-  // --------------------------------------
-  &--disabled {
-    color: var(--drp-day-disabled-color);
-    opacity: $drp-day-disabled-opacity;
-    cursor: not-allowed;
-    position: relative;
-
-    // Diagonal hatched pattern overlay
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-image: repeating-linear-gradient(
-        45deg,
-        rgba(0, 0, 0, $drp-day-disabled-pattern-opacity) 0px,
-        rgba(0, 0, 0, $drp-day-disabled-pattern-opacity) 1px,
-        transparent 1px,
-        transparent 6px
-      );
-      border-radius: var(--drp-border-radius);
-      pointer-events: none;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: transparent;
-    }
-
-    // Disabled day that is also in range - show range background behind disabled overlay
-    &.drp-date-picker__day--in-range {
-      background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-in-range-bg-opacity * 100%, transparent);
-    }
-  }
-
-  // --------------------------------------
-  // Other month days (previous/next month)
-  // --------------------------------------
-  &--other-month {
-    color: var(--drp-day-other-month-color);
-    opacity: $drp-day-other-month-opacity;
-
-    // Reset opacity when other-month days are part of range selection
-    &.drp-date-picker__day--range-start,
-    &.drp-date-picker__day--range-end,
-    &.drp-date-picker__day--in-range,
-    &.drp-date-picker__day--drag-preview {
-      opacity: 1;
-    }
-  }
-
-  // --------------------------------------
-  // Range selection states
-  // --------------------------------------
-  &--range-start,
-  &--range-end {
-    background-color: var(--drp-day-range-bg);
-    color: var(--drp-day-range-color);
-    font-weight: var(--drp-font-weight-semibold);
-    cursor: grab;
-    user-select: none;
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-
-  &--in-range {
-    background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-in-range-bg-opacity * 100%, transparent);
-
-    &:hover {
-      background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-in-range-hover-bg-opacity * 100%, transparent);
-    }
-  }
-
-  // --------------------------------------
-  // Dragging states
-  // --------------------------------------
-  &--dragging {
-    cursor: grabbing !important;
-    opacity: $drp-day-dragging-opacity;
-    transform: scale($drp-day-dragging-scale);
-    transition: transform var(--drp-transition-fast) var(--drp-easing-snappy);
-  }
-
-  &--drag-preview {
-    background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-drag-preview-bg-opacity * 100%, transparent);
-    border: $drp-day-border-width $drp-day-drag-preview-border-style var(--drp-day-range-bg);
-
-    &.drp-date-picker__day--range-start,
-    &.drp-date-picker__day--range-end {
-      background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-drag-preview-edge-bg-opacity * 100%, transparent);
-      color: var(--drp-day-range-color);
-    }
-  }
-
-  &--drag-invalid {
-    background-color: color-mix(in srgb, $drp-day-drag-invalid-bg $drp-day-drag-invalid-bg-opacity * 100%, transparent) !important;
-    border-color: $drp-day-drag-invalid-bg !important;
-    border-style: dashed !important;
-  }
-}
-
-// ==============================================================================
-// SPECIAL DATE HIGHLIGHTING (EXAMPLES)
-// ==============================================================================
-// These are example classes showing how to highlight special dates.
-// Applications should define their own classes with appropriate colors.
-// The .holiday and .event classes here use component colors as examples only.
-
-.drp-date-picker__day.holiday {
-  background-color: color-mix(in srgb, $drp-color-error $drp-holiday-bg-opacity * 100%, transparent);
-
-  &:hover:not(.drp-date-picker__day--disabled) {
-    background-color: color-mix(in srgb, $drp-color-error $drp-holiday-hover-bg-opacity * 100%, transparent);
-  }
-}
-
-.drp-date-picker__day.event {
-  background-color: color-mix(in srgb, $drp-color-success $drp-event-bg-opacity * 100%, transparent);
-
-  &:hover:not(.drp-date-picker__day--disabled) {
-    background-color: color-mix(in srgb, $drp-color-success $drp-event-hover-bg-opacity * 100%, transparent);
-  }
-}
-
-// ==============================================================================
-// ROLLING SELECTOR - DISABLED ITEMS
-// ==============================================================================
-// Styling for disabled years/months in the rolling selector
-// (e.g., when outside rollingYearRange/rollingMonthRange or minDate/maxDate)
-
-.drp-date-picker__rolling-item--disabled {
-  color: var(--drp-unified-rolling-disabled-color);
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none; // Prevent clicking
-  text-decoration: line-through;
-
-  &:hover {
-    background-color: transparent;
-  }
-}

package/src/scss/_header-navigation.scss

@@ -1,370 +0,0 @@
-// ==============================================================================
-// DATE RANGE PICKER - HEADER & NAVIGATION
-// ==============================================================================
-// Month/year header, navigation buttons, and rolling selector
-
-@use 'variables' as *;
-
-// ==============================================================================
-// CALENDAR HEADER
-// ==============================================================================
-
-.drp-date-picker__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--drp-spacing-md);
-  gap: var(--drp-spacing-sm);
-
-  // Static header (used in unified navigation mode)
-  &--static {
-    justify-content: center;
-
-    .drp-date-picker__month-year {
-      cursor: default;
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-// ==============================================================================
-// MONTH/YEAR DISPLAY (CLICKABLE TO OPEN ROLLING SELECTOR)
-// ==============================================================================
-
-.drp-date-picker__month-year {
-  flex: 1;
-  text-align: center;
-  font-weight: var(--drp-font-weight-semibold);
-  font-size: var(--drp-font-size-base);
-  color: var(--drp-header-text-color);
-  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
-  border-radius: var(--drp-border-radius);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--drp-header-bg-hover);
-  }
-
-  &:active {
-    background-color: var(--drp-header-bg-active);
-  }
-}
-
-// ==============================================================================
-// NAVIGATION BUTTONS (PREVIOUS/NEXT MONTH)
-// ==============================================================================
-
-.drp-date-picker__nav {
-  width: $drp-nav-size;
-  height: $drp-nav-size;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--drp-border-width-base) solid var(--drp-nav-border-color);
-  border-radius: var(--drp-border-radius);
-  background: transparent;
-  cursor: pointer;
-  font-size: var(--drp-font-size-lg);
-  color: var(--drp-nav-text-color);
-
-  &:hover {
-    background-color: var(--drp-nav-bg-hover);
-    border-color: var(--drp-nav-border-hover);
-  }
-
-  &:active {
-    background-color: var(--drp-nav-bg-active);
-  }
-
-  // Disabled state
-  &--disabled,
-  &[disabled] {
-    opacity: $drp-nav-opacity-disabled;
-    cursor: not-allowed;
-    pointer-events: none;
-
-    &:hover {
-      background-color: transparent;
-      border-color: var(--drp-nav-border-color);
-    }
-  }
-
-  &--prev::before {
-    content: '‹';
-  }
-
-  &--next::before {
-    content: '›';
-  }
-}
-
-// ==============================================================================
-// ROLLING SELECTOR VIEW (MONTH/YEAR SELECTION)
-// ==============================================================================
-
-.drp-date-picker__rolling-selector {
-  // Absolutely positioned to overlay calendar grid
-  position: absolute;
-  inset: 0; // Fill entire container from all edges
-  display: none;
-  z-index: 10; // Above calendar grid
-
-  &.drp-date-picker__rolling-selector--visible {
-    display: flex;
-
-    // Hide calendar grid when rolling selector is visible
-    ~ .drp-date-picker__weekdays,
-    ~ .drp-date-picker__days {
-      visibility: hidden; // Keeps elements in layout flow (maintains container height)
-    }
-  }
-
-  gap: var(--drp-spacing-xs);
-}
-
-.drp-date-picker__rolling-list {
-  flex: 1;
-  min-width: 0; // Allow flex child to shrink below content size (enables ellipsis on items)
-  height: 100%; // Fill parent height
-  overflow-y: auto;
-  border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
-  border-radius: var(--drp-border-radius);
-
-  // Flex layout to control child item sizing
-  display: flex;
-  flex-direction: column;
-
-  // Smooth scrolling
-  scroll-behavior: smooth;
-
-  // Custom scrollbar
-  &::-webkit-scrollbar {
-    width: $drp-rolling-scrollbar-width;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--drp-rolling-bg);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--drp-rolling-scrollbar-thumb);
-    border-radius: 3px;
-
-    &:hover {
-      background: var(--drp-rolling-scrollbar-thumb-hover);
-    }
-  }
-}
-
-.drp-date-picker__rolling-item {
-  padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
-  cursor: pointer;
-  font-size: #{$drp-rolling-item-font-size};
-  min-height: $drp-rolling-item-min-height;
-  flex-shrink: 0;
-
-  // Flexbox for vertical and horizontal centering
-  display: flex;
-  align-items: center;
-  justify-content: var(--drp-rolling-item-justify-content, #{$drp-rolling-item-justify-content});
-
-  &:hover {
-    background-color: var(--drp-rolling-item-bg-hover);
-  }
-
-  &--selected {
-    background-color: var(--drp-rolling-item-bg-selected);
-    color: var(--drp-rolling-item-color-selected);
-    font-weight: $drp-rolling-item-font-weight-selected;
-
-    &:hover {
-      background-color: var(--drp-rolling-item-bg-selected-hover);
-    }
-  }
-}
-
-// Text wrapper for ellipsis support
-.drp-date-picker__rolling-item-text {
-  // Text overflow handling for long month names
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  min-width: 0; // Allow flex child to shrink below content size
-}
-
-// ==============================================================================
-// UNIFIED NAVIGATION (MULTI-MONTH CALENDARS)
-// ==============================================================================
-
-// Unified header - appears above all months
-.drp-date-picker__unified-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--drp-spacing-lg);
-  gap: var(--drp-spacing-sm);
-  padding: 0 var(--drp-spacing-sm);
-}
-
-// Date range display in unified header (e.g., "Jan 2025 - Jun 2025")
-.drp-date-picker__unified-range {
-  flex: 1;
-  text-align: center;
-  font-weight: var(--drp-font-weight-semibold);
-  font-size: var(--drp-font-size-lg);
-  color: var(--drp-unified-range-text-color);
-  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
-  border-radius: var(--drp-border-radius);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--drp-unified-range-bg-hover);
-  }
-
-  &:active {
-    background-color: var(--drp-unified-range-bg-active);
-  }
-
-  // Non-interactive state (when unifiedHeaderInteractive is false)
-  &--static {
-    cursor: default !important;
-
-    &:hover {
-      background-color: transparent;
-    }
-
-    &:active {
-      background-color: transparent;
-    }
-  }
-}
-
-// Unified rolling selector - overlay for all months
-.drp-date-picker__unified-rolling-selector {
-  position: absolute;
-  // Position below unified header
-  top: calc(var(--drp-spacing-lg) + var(--drp-spacing-lg) * 2);
-  // Center horizontally
-  left: 50%;
-  transform: translateX(-50%);
-
-  // Size constraints (responsive but limited)
-  width: min(90%, 450px); // 90% of calendar width or 450px, whichever is smaller
-  height: 350px;
-  max-height: 350px;
-
-  display: none;
-  z-index: 100; // Above everything
-  background: var(--drp-dropdown-background); // White background to cover calendar below
-  gap: var(--drp-spacing-xs); // Match normal rolling selector gap
-
-  &--visible {
-    display: flex;
-  }
-
-  // Apply rolling list styles to child lists
-  .drp-date-picker__rolling-list {
-    flex: 1;
-    min-width: 0;
-    height: 100%;
-    overflow-y: auto;
-    border: var(--drp-border-width-base) solid var(--drp-rolling-border-color);
-    border-radius: var(--drp-border-radius);
-    display: flex;
-    flex-direction: column;
-    scroll-behavior: smooth;
-
-    // Custom scrollbar
-    &::-webkit-scrollbar {
-      width: $drp-rolling-scrollbar-width;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: var(--drp-rolling-bg);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: var(--drp-rolling-scrollbar-thumb);
-      border-radius: 3px;
-
-      &:hover {
-        background: var(--drp-rolling-scrollbar-thumb-hover);
-      }
-    }
-  }
-
-  // Apply rolling item styles to child items
-  .drp-date-picker__rolling-item {
-    padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
-    cursor: pointer;
-    font-size: #{$drp-rolling-item-font-size};
-    min-height: $drp-rolling-item-min-height;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: var(--drp-rolling-item-justify-content, #{$drp-rolling-item-justify-content});
-
-    &:hover {
-      background-color: var(--drp-rolling-item-bg-hover);
-    }
-
-    &--selected {
-      background-color: var(--drp-rolling-item-bg-selected);
-      color: var(--drp-rolling-item-color-selected);
-      font-weight: $drp-rolling-item-font-weight-selected;
-
-      &:hover {
-        background-color: var(--drp-rolling-item-bg-selected-hover);
-      }
-    }
-
-    &--disabled {
-      color: var(--drp-unified-rolling-disabled-color);
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-
-  // Text wrapper for ellipsis support
-  .drp-date-picker__rolling-item-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-    min-width: 0;
-  }
-}
-
-// When unified navigation is enabled, hide individual month headers nav buttons
-// but keep the month/year text visible (it becomes static display, not clickable)
-.drp-date-picker--unified-nav {
-  .drp-date-picker__month {
-    .drp-date-picker__header {
-      // Hide nav buttons in individual month headers
-      .drp-date-picker__nav {
-        display: none;
-      }
-
-      // Make month/year display static (not clickable)
-      .drp-date-picker__month-year {
-        cursor: default;
-        font-size: var(--drp-font-size-base);
-        font-weight: var(--drp-font-weight-normal);
-        color: var(--drp-unified-month-color);
-
-        &:hover {
-          background-color: transparent;
-        }
-      }
-    }
-
-    // Hide individual month rolling selectors
-    .drp-date-picker__rolling-selector {
-      display: none !important;
-    }
-  }
-}

package/src/scss/_loading.scss

@@ -1,39 +0,0 @@
-/**
- * Loading Overlay & Spinner Styles
- *
- * Used during async validation (e.g., when validateRangeCallback is processing).
- */
-
-@use 'variables' as *;
-
-.drp-date-picker__loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--drp-loading-overlay-background);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: $drp-z-index-dropdown;
-    border-radius: var(--drp-border-radius);
-}
-
-.drp-date-picker__loading-spinner {
-    width: 40px;
-    height: 40px;
-    border: 4px solid var(--drp-loading-spinner-color);
-    border-top-color: var(--drp-loading-spinner-accent);
-    border-radius: 50%;
-    animation: drp-spin 0.8s linear infinite;
-}
-
-@keyframes drp-spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/src/scss/_modifiers.scss

@@ -1,50 +0,0 @@
-// ==============================================================================
-// DATE RANGE PICKER - MODIFIERS
-// ==============================================================================
-
-@use 'variables' as *;
-
-// ==============================================================================
-// TRANSITIONS (OPT-IN FOR PERFORMANCE)
-// ==============================================================================
-// By default, no transitions for maximum performance
-// Add enable-transitions attribute to enable smooth animations
-
-.drp-date-picker.drp-transitions-enabled {
-  // Badges - scale animation on hover
-  .drp-date-picker__badge-cell {
-    transition: transform var(--drp-transition-fast) var(--drp-easing-snappy);
-  }
-
-  // Nav buttons - background and border changes
-  .drp-date-picker__nav {
-    transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy),
-                border-color var(--drp-transition-fast) var(--drp-easing-snappy);
-  }
-
-  // Action buttons - background and border changes
-  .drp-date-picker__action-btn {
-    transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy),
-                border-color var(--drp-transition-fast) var(--drp-easing-snappy);
-  }
-
-  // Month/year selector - background change
-  .drp-date-picker__month-year {
-    transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
-  }
-
-  // Rolling selector items - background change
-  .drp-date-picker__rolling-item {
-    transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
-  }
-}
-
-// ==============================================================================
-// INLINE MODE MODIFIER
-// ==============================================================================
-
-.drp-date-picker--inline {
-  position: static;
-  display: block;
-  box-shadow: none;
-}