@keenmate/web-daterangepicker 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-daterangepicker",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Lightweight date picker web component with excellent keyboard navigation and range selection",
   "type": "module",
   "main": "./dist/web-daterangepicker.umd.js",
@@ -15,11 +15,11 @@
       "default": "./dist/web-daterangepicker.js"
     },
     "./style.css": "./dist/style.css",
-    "./scss": "./src/scss/main.scss",
-    "./scss/variables": "./src/scss/_variables.scss",
-    "./scss/base": "./src/scss/_base.scss",
+    "./css": "./src/css/main.css",
+    "./css/variables": "./src/css/_variables.css",
+    "./css/base": "./src/css/_base.css",
     "./dist/*": "./dist/*",
-    "./src/scss/*": "./src/scss/*",
+    "./src/css/*": "./src/css/*",
     "./package.json": "./package.json"
   },
   "sideEffects": [
@@ -29,7 +29,7 @@
   ],
   "files": [
     "dist",
-    "src/scss"
+    "src/css"
   ],
   "scripts": {
     "dev": "vite",
@@ -66,7 +66,6 @@
   },
   "devDependencies": {
     "rimraf": "^5.0.5",
-    "sass": "^1.69.5",
     "typescript": "^5.3.3",
     "vite": "^5.0.8"
   },

package/src/css/_badges.css

@@ -0,0 +1,67 @@
+/* ==============================================================================
+   DATE RANGE PICKER - BADGES
+   ==============================================================================
+   Badge system for displaying event markers, counts, and labels on calendar days */
+
+/* ==============================================================================
+   BADGE ROWS (GRID-BASED SYSTEM)
+   ============================================================================== */
+
+.drp-date-picker__badge-row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--drp-spacing-xs);
+  max-height: var(--drp-badge-row-height);
+  min-height: var(--drp-badge-row-height);
+}
+
+.drp-date-picker__badge-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--drp-font-size-2xs);
+  padding: var(--drp-badge-padding-v) var(--drp-badge-padding-h);
+  border-radius: var(--drp-badge-border-radius);
+  cursor: pointer;
+  max-height: var(--drp-badge-row-height);
+}
+
+.drp-date-picker__badge-cell:empty {
+  visibility: hidden;
+}
+
+.drp-date-picker__badge-cell:hover:not(:empty) {
+  transform: scale(1.05);
+}
+
+/* ==============================================================================
+   BADGE TYPE STYLES
+   ============================================================================== */
+
+/* Number Badge (e.g., day number, count) */
+.drp-date-picker__badge-cell.badge-number {
+  background-color: var(--drp-badge-number-bg);
+  color: var(--drp-badge-number-color);
+  font-size: calc(1.12 * var(--drp-rem));   /* 11.2px */
+  font-weight: 600;
+}
+
+/* Count Badge (e.g., number of events) */
+.drp-date-picker__badge-cell.badge-count {
+  background-color: var(--drp-badge-count-bg);
+  color: var(--drp-badge-count-color);
+  font-size: calc(1.12 * var(--drp-rem));   /* 11.2px */
+  font-weight: 700;
+}
+
+/* Text Badge (generic)
+   Note: Background colors for specific badge types (holiday, event, birthday, etc.)
+   should be defined by the application, not the component library.
+   See index.html examples for how to customize badge colors for your use case. */
+.drp-date-picker__badge-cell.badge-text {
+  background-color: var(--drp-badge-text-bg);
+  color: var(--drp-badge-text-color);
+  font-size: calc(1.04 * var(--drp-rem));   /* 10.4px */
+  font-weight: 700;
+  text-transform: uppercase;
+}

package/src/css/_base.css

@@ -0,0 +1,232 @@
+/* ==============================================================================
+   DATE RANGE PICKER - BASE STYLES
+   ==============================================================================
+   Base container styles, input field, and calendar popup */
+
+/* ==============================================================================
+   DATE PICKER INPUT FIELD
+   ============================================================================== */
+
+/* Input element itself (actual <input> tag) */
+.drp-input {
+  width: 100%;
+  font-family: var(--drp-font-family, var(--base-font-family, inherit));
+  font-size: var(--drp-input-size-md-font);
+  line-height: var(--drp-line-height-normal);
+  color: var(--drp-input-color);
+  background-color: var(--drp-input-background);
+  border: var(--drp-border-width-base) solid var(--drp-input-border-color);
+  border-radius: var(--drp-border-radius);
+  padding: var(--drp-input-size-md-padding-v) var(--drp-input-size-md-padding-h);
+  padding-right: calc(var(--drp-input-size-md-padding-h) * 2.5); /* Extra space for calendar icon */
+  height: var(--drp-input-size-md-height);
+  box-sizing: border-box;
+  transition: border-color var(--drp-transition-fast) var(--drp-easing-snappy),
+              box-shadow var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-input::placeholder {
+  color: var(--drp-input-placeholder-color);
+  opacity: 0.6;
+}
+
+.drp-input:hover:not(:disabled) {
+  border-color: var(--drp-input-border-color-hover);
+}
+
+.drp-input:focus {
+  outline: none;
+  border-color: var(--drp-input-border-color-focus);
+  box-shadow: 0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color);
+}
+
+.drp-input:disabled {
+  opacity: var(--drp-opacity-disabled);
+  cursor: not-allowed;
+  background-color: var(--drp-input-background-disabled);
+}
+
+/* Input Size Variants */
+.drp-input.drp-input--xs {
+  font-size: var(--drp-input-size-xs-font);
+  padding: var(--drp-input-size-xs-padding-v) var(--drp-input-size-xs-padding-h);
+  padding-right: calc(var(--drp-input-size-xs-padding-h) * 2.5);
+  height: var(--drp-input-size-xs-height);
+}
+
+.drp-input.drp-input--sm {
+  font-size: var(--drp-input-size-sm-font);
+  padding: var(--drp-input-size-sm-padding-v) var(--drp-input-size-sm-padding-h);
+  padding-right: calc(var(--drp-input-size-sm-padding-h) * 2.5);
+  height: var(--drp-input-size-sm-height);
+}
+
+.drp-input.drp-input--lg {
+  font-size: var(--drp-input-size-lg-font);
+  padding: var(--drp-input-size-lg-padding-v) var(--drp-input-size-lg-padding-h);
+  padding-right: calc(var(--drp-input-size-lg-padding-h) * 2.5);
+  height: var(--drp-input-size-lg-height);
+}
+
+.drp-input.drp-input--xl {
+  font-size: var(--drp-input-size-xl-font);
+  padding: var(--drp-input-size-xl-padding-v) var(--drp-input-size-xl-padding-h);
+  padding-right: calc(var(--drp-input-size-xl-padding-h) * 2.5);
+  height: var(--drp-input-size-xl-height);
+}
+
+/* ==============================================================================
+   INPUT WRAPPER CONTAINER (for positioning calendar icon)
+   ============================================================================== */
+
+.drp-date-picker-input {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  width: 100%;
+}
+
+/* Calendar icon */
+.drp-date-picker-input::after {
+  content: '📅';
+  position: absolute;
+  right: var(--drp-input-size-md-padding-h);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  opacity: var(--drp-input-icon-opacity);
+  font-size: var(--drp-input-size-md-icon-size);
+}
+
+/* Size variant icon positioning */
+.drp-date-picker-input.drp-date-picker-input--xs::after {
+  right: var(--drp-input-size-xs-padding-h);
+  font-size: var(--drp-input-size-xs-icon-size);
+}
+
+.drp-date-picker-input.drp-date-picker-input--sm::after {
+  right: var(--drp-input-size-sm-padding-h);
+  font-size: var(--drp-input-size-sm-icon-size);
+}
+
+.drp-date-picker-input.drp-date-picker-input--lg::after {
+  right: var(--drp-input-size-lg-padding-h);
+  font-size: var(--drp-input-size-lg-icon-size);
+}
+
+.drp-date-picker-input.drp-date-picker-input--xl::after {
+  right: var(--drp-input-size-xl-padding-h);
+  font-size: var(--drp-input-size-xl-icon-size);
+}
+
+/* ==============================================================================
+   CALENDAR POPUP CONTAINER
+   ============================================================================== */
+
+.drp-date-picker {
+  position: absolute;
+  z-index: var(--drp-z-index-dropdown);
+  font-family: var(--drp-font-family, var(--base-font-family, inherit));
+  background: var(--drp-dropdown-background);
+  border: var(--drp-border-width-base) solid var(--drp-border-color);
+  border-radius: var(--drp-border-radius-lg);
+  box-shadow: var(--drp-shadow-xl);
+  padding: var(--drp-spacing-md);
+  min-width: var(--drp-month-min-width);
+  max-width: var(--drp-calendar-max-width);
+  box-sizing: border-box;
+  user-select: none;
+}
+
+/* Hide by default */
+.drp-date-picker:not(.drp-date-picker--visible) {
+  display: none;
+}
+
+/* Inline mode modifier */
+.drp-date-picker--inline {
+  position: relative !important;
+  display: block !important;
+  z-index: auto;
+  min-width: 0;
+  max-width: 100%;
+  width: fit-content;
+  box-sizing: border-box;
+}
+
+/* ==============================================================================
+   MONTHS CONTAINER (MULTI-MONTH LAYOUT)
+   ============================================================================== */
+
+.drp-date-picker__months {
+  display: flex;
+  gap: var(--drp-spacing-lg);
+}
+
+/* Allow wrapping for inline mode on small screens */
+.drp-date-picker--inline .drp-date-picker__months {
+  flex-wrap: wrap;
+}
+
+/* Grid layout mode */
+.drp-date-picker__months--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--drp-grid-columns, 3), minmax(0, 1fr));
+  grid-template-rows: repeat(var(--drp-grid-rows, 2), auto);
+  gap: var(--drp-spacing-lg);
+  width: 100%;
+}
+
+/* Responsive breakpoints for grid */
+@media (max-width: 1200px) {
+  .drp-date-picker__months--grid {
+    grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 3), minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .drp-date-picker__months--grid {
+    grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 2), minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .drp-date-picker__months--grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* ==============================================================================
+   INDIVIDUAL MONTH CONTAINER
+   ============================================================================== */
+
+.drp-date-picker__month {
+  flex: 1;
+  min-width: var(--drp-month-min-width);
+  /* Make month a flex column container so calendar-container can fill vertical space */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Allow shrinking for inline mode */
+.drp-date-picker--inline .drp-date-picker__month {
+  min-width: var(--drp-month-min-width-inline);
+}
+
+/* Grid layout: remove min-width to allow proper grid sizing */
+.drp-date-picker__months--grid .drp-date-picker__month {
+  min-width: 0;
+  width: 100%;
+}
+
+/* Calendar container for swapping between calendar grid and rolling selector */
+.drp-date-picker__calendar-container {
+  position: relative; /* Establishes containing block for absolute positioning */
+  /* Fill available vertical space in month container */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Allow flex item to shrink below content size if needed */
+  /* Calendar grid (weekdays + days) determines minimum size
+     Rolling selector overlays absolutely and fills this expanded space */
+}

package/src/css/_calendar-grid.css

@@ -0,0 +1,240 @@
+/* ==============================================================================
+   DATE RANGE PICKER - CALENDAR GRID
+   ==============================================================================
+   Weekday labels, days grid, and individual day cells with all states */
+
+/* ==============================================================================
+   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-sm);
+  cursor: pointer;
+  border: var(--drp-day-border-width) solid var(--drp-day-border-color);
+  position: relative; /* For absolute positioning of labels */
+}
+
+.drp-date-picker__day: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
+   -------------------------------------- */
+.drp-date-picker__day--today {
+  border-color: var(--drp-day-today-border);
+  font-weight: var(--drp-font-weight-semibold);
+}
+
+/* --------------------------------------
+   Selected
+   -------------------------------------- */
+.drp-date-picker__day--selected {
+  background-color: var(--drp-day-selected-bg);
+  color: var(--drp-day-selected-color);
+  font-weight: var(--drp-font-weight-semibold);
+}
+
+.drp-date-picker__day--selected:hover {
+  background-color: var(--drp-day-selected-bg-hover);
+}
+
+/* --------------------------------------
+   Focused (keyboard navigation)
+   -------------------------------------- */
+.drp-date-picker__day--focused {
+  outline: var(--drp-day-focused-outline-width) solid var(--drp-day-focused-outline);
+  outline-offset: var(--drp-day-focused-outline-offset);
+}
+
+/* --------------------------------------
+   Disabled
+   -------------------------------------- */
+.drp-date-picker__day--disabled {
+  color: var(--drp-day-disabled-color);
+  opacity: var(--drp-opacity-disabled);
+  cursor: not-allowed;
+  position: relative;
+}
+
+/* Diagonal hatched pattern overlay */
+.drp-date-picker__day--disabled::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(0, 0, 0, var(--drp-day-disabled-pattern-opacity)) 0px,
+    rgba(0, 0, 0, var(--drp-day-disabled-pattern-opacity)) 1px,
+    transparent 1px,
+    transparent 6px
+  );
+  border-radius: var(--drp-border-radius-sm);
+  pointer-events: none;
+}
+
+.drp-date-picker__day--disabled:hover {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* Disabled day that is also in range - show range background behind disabled overlay */
+.drp-date-picker__day--disabled.drp-date-picker__day--in-range {
+  background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-in-range-bg-opacity) * 100%), transparent);
+}
+
+/* --------------------------------------
+   Other month days (previous/next month)
+   -------------------------------------- */
+.drp-date-picker__day--other-month {
+  color: var(--drp-day-other-month-color);
+  opacity: var(--drp-opacity-other-month);
+}
+
+/* Reset opacity when other-month days are part of range selection */
+.drp-date-picker__day--other-month.drp-date-picker__day--range-start,
+.drp-date-picker__day--other-month.drp-date-picker__day--range-end,
+.drp-date-picker__day--other-month.drp-date-picker__day--in-range,
+.drp-date-picker__day--other-month.drp-date-picker__day--drag-preview {
+  opacity: 1;
+}
+
+/* --------------------------------------
+   Range selection states
+   -------------------------------------- */
+.drp-date-picker__day--range-start,
+.drp-date-picker__day--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;
+}
+
+.drp-date-picker__day--range-start:active,
+.drp-date-picker__day--range-end:active {
+  cursor: grabbing;
+}
+
+.drp-date-picker__day--in-range {
+  background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-in-range-bg-opacity) * 100%), transparent);
+}
+
+.drp-date-picker__day--in-range:hover {
+  background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-in-range-hover-bg-opacity) * 100%), transparent);
+}
+
+/* --------------------------------------
+   Dragging states
+   -------------------------------------- */
+.drp-date-picker__day--dragging {
+  cursor: grabbing !important;
+  opacity: var(--drp-opacity-dragging);
+  transform: scale(var(--drp-day-dragging-scale));
+  transition: transform var(--drp-transition-fast) var(--drp-easing-snappy);
+}
+
+.drp-date-picker__day--drag-preview {
+  background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-drag-preview-bg-opacity) * 100%), transparent);
+  border: var(--drp-day-border-width) var(--drp-day-drag-preview-border-style) var(--drp-day-range-bg);
+}
+
+.drp-date-picker__day--drag-preview.drp-date-picker__day--range-start,
+.drp-date-picker__day--drag-preview.drp-date-picker__day--range-end {
+  background-color: color-mix(in srgb, var(--drp-day-range-bg) calc(var(--drp-day-drag-preview-edge-bg-opacity) * 100%), transparent);
+  color: var(--drp-day-range-color);
+}
+
+.drp-date-picker__day--drag-invalid {
+  background-color: color-mix(in srgb, var(--drp-day-drag-invalid-bg) calc(var(--drp-day-drag-invalid-bg-opacity) * 100%), transparent) !important;
+  border-color: var(--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, var(--drp-holiday-color) calc(var(--drp-holiday-bg-opacity) * 100%), transparent);
+}
+
+.drp-date-picker__day.holiday:hover:not(.drp-date-picker__day--disabled) {
+  background-color: color-mix(in srgb, var(--drp-holiday-color) calc(var(--drp-holiday-hover-bg-opacity) * 100%), transparent);
+}
+
+.drp-date-picker__day.event {
+  background-color: color-mix(in srgb, var(--drp-event-color) calc(var(--drp-event-bg-opacity) * 100%), transparent);
+}
+
+.drp-date-picker__day.event:hover:not(.drp-date-picker__day--disabled) {
+  background-color: color-mix(in srgb, var(--drp-event-color) calc(var(--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;
+}
+
+.drp-date-picker__rolling-item--disabled:hover {
+  background-color: transparent;
+}