@keenmate/web-daterangepicker 1.7.0-rc01 → 1.8.0

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;
-}

package/src/scss/_summary-actions.scss

@@ -1,100 +0,0 @@
-// ==============================================================================
-// DATE RANGE PICKER - SUMMARY & ACTIONS
-// ==============================================================================
-// Selection summary (days/nights count) and action buttons (Today, Clear, Apply)
-
-@use 'variables' as *;
-
-// ==============================================================================
-// SELECTION SUMMARY (DAYS/NIGHTS COUNT)
-// ==============================================================================
-
-.drp-date-picker__summary {
-  text-align: center;
-  padding: var(--drp-spacing-md);
-  border-top: var(--drp-border-width-base) solid var(--drp-summary-border-color);
-  font-size: var(--drp-font-size-sm);
-  color: var(--drp-summary-text-color);
-
-  &--visible {
-    display: block;
-  }
-
-  &--hidden {
-    display: none;
-  }
-}
-
-.drp-date-picker__summary-count {
-  font-weight: var(--drp-font-weight-semibold);
-  color: var(--drp-summary-count-color);
-  font-size: var(--drp-font-size-base);
-}
-
-// ==============================================================================
-// ACTION BUTTONS
-// ==============================================================================
-
-.drp-date-picker__actions {
-  display: flex;
-  gap: var(--drp-spacing-sm);
-  justify-content: space-between;
-  padding-top: var(--drp-spacing-sm);
-  border-top: var(--drp-border-width-base) solid var(--drp-summary-border-color);
-}
-
-.drp-date-picker__button {
-  flex: 1;
-  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
-  border: var(--drp-border-width-base) solid var(--drp-button-border-color);
-  border-radius: var(--drp-border-radius);
-  background: transparent;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--drp-font-size-sm);
-  font-weight: var(--drp-font-weight-medium);
-
-  &:hover {
-    background-color: var(--drp-button-bg-hover);
-    border-color: var(--drp-button-border-hover);
-  }
-
-  // Disabled state
-  &:disabled,
-  &[disabled] {
-    opacity: var(--drp-disabled-opacity, $drp-opacity-disabled);
-    cursor: not-allowed;
-    pointer-events: none;  // Critical - prevents all mouse interactions
-
-    &:hover {
-      background-color: transparent;
-      border-color: var(--drp-button-border-color);
-    }
-  }
-
-  // Today Button
-  &--today {
-    color: var(--drp-button-today-color);
-  }
-
-  // Clear Button
-  &--clear {
-    color: var(--drp-button-clear-color);
-  }
-
-  // Apply Button (primary action)
-  &--apply {
-    background-color: var(--drp-button-apply-bg);
-    color: var(--drp-button-apply-color);
-    border-color: var(--drp-button-apply-border);
-
-    &:hover {
-      background-color: var(--drp-button-apply-bg-hover);
-    }
-  }
-
-  // Cancel Button
-  &--cancel {
-    color: var(--drp-button-cancel-color);
-  }
-}

package/src/scss/_tooltips.scss

@@ -1,39 +0,0 @@
-// ==============================================================================
-// DATE RANGE PICKER - TOOLTIPS
-// ==============================================================================
-// Floating UI tooltips for badge hover information
-
-@use 'variables' as *;
-
-// ==============================================================================
-// FLOATING UI TOOLTIPS
-// ==============================================================================
-
-.drp-date-picker__tooltip {
-  position: absolute;
-  z-index: $drp-z-index-tooltip;
-  background-color: var(--drp-tooltip-background);
-  color: var(--drp-tooltip-text-color);
-  padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
-  border-radius: var(--drp-border-radius);
-  font-size: var(--drp-font-size-xs);
-  line-height: $drp-tooltip-line-height;
-  max-width: $drp-tooltip-max-width;
-  word-wrap: break-word;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--drp-transition-fast) var(--drp-easing-snappy);
-
-  &--visible {
-    opacity: 1;
-  }
-
-  // Tooltip arrow
-  &-arrow {
-    position: absolute;
-    background-color: var(--drp-tooltip-background);
-    width: $drp-tooltip-arrow-size;
-    height: $drp-tooltip-arrow-size;
-    transform: rotate(45deg);
-  }
-}