@dropi/ui 0.1.50 → 0.1.51

package/dist/collection/components/dropi-date-picker-range/dropi-date-picker-range.css

@@ -1,99 +1,105 @@
-:host {
-  display: block;
-  width: 100%;
-  max-width: 380px;
-}
-
+:host { display: block; width: 100%; position: relative; }
 *, *::before, *::after { box-sizing: border-box; }
 
-.date-picker-range {
-  width: 100%;
-  font-family: inherit;
-}
-
-.label {
-  font-size: 11px;
-  font-weight: var(--font-weight-medium);
-  color: #7b8190;
-  margin-bottom: 8px;
+/* Label */
+.dpr-label {
+  display: block;
+  font-size: var(--font-size-xxs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  margin-bottom: 4px;
 }
 
-.inputs-row {
+/* Trigger */
+.dpr-trigger {
+  width: 100%;
+  height: 44px;
   display: flex;
-  align-items: flex-end;
-  gap: 8px;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: 0 var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #ffffff);
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.2s;
 }
+.dpr-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
+.dpr-trigger--disabled { background: var(--Gray-Gray-50, #f7f8fa); cursor: not-allowed; opacity: 0.6; }
 
-.input-group {
+.dpr-trigger__value {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.input-label {
-  font-size: var(--font-size-xs, 11px);
-  color: var(--Gray-Gray-500, #69738c);
-  font-weight: var(--font-weight-medium, 500);
+  text-align: left;
+  font-size: var(--font-size-xs, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
+.dpr-trigger__placeholder { color: var(--Gray-Gray-400, #858ea6); }
 
-.date-input {
-  width: 100%;
-  height: 40px;
-  padding: 0 10px;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
+/* Popup */
+.dpr-popup {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  display: flex;
+  flex-direction: row;
   background: var(--Neutral-White, #ffffff);
-  color: var(--Gray-Gray-600, #475066);
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-  cursor: pointer;
-  transition: border-color 0.15s ease;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-3, 12px);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+  z-index: 300;
+  overflow: hidden;
 }
 
-.date-input:focus {
-  border-color: var(--Primary-Primary-500, #f49a3d);
+/* Calendar section */
+.dpr-calendar {
+  padding: var(--Size-4, 16px);
+  width: 300px;
+  flex-shrink: 0;
 }
 
-.separator {
-  padding-bottom: 8px;
-  color: var(--Gray-Gray-400, #858ea6);
-  font-size: var(--font-size-m);
+/* Vertical divider */
+.dpr-divider {
+  width: 1px;
+  background: var(--Gray-Gray-100, #e6eaf2);
+  flex-shrink: 0;
 }
 
-.shortcuts {
+/* Shortcuts section */
+.dpr-shortcuts {
+  padding: var(--Size-4, 16px) var(--Size-3, 12px);
   display: flex;
   flex-direction: column;
   gap: 2px;
-  margin-top: 10px;
-  border-left: 1px solid var(--Gray-Gray-100, #e6eaf2);
-  padding-left: 10px;
+  min-width: 140px;
 }
 
 .shortcut-btn {
   background: transparent;
-  border: none;
-  padding: 4px 6px;
+  border: 1px solid transparent;
+  padding: 6px 10px;
   font-size: 13px;
   font-family: inherit;
   color: var(--Gray-Gray-700, #32394d);
   cursor: pointer;
   text-align: left;
-  border-radius: 5px;
+  border-radius: 6px;
   transition: background 0.1s ease;
   font-weight: var(--font-weight-regular);
+  white-space: nowrap;
 }
-
 .shortcut-btn:hover {
   background: var(--Gray-Gray-50, #f5f6f8);
 }
-
-.shortcut-btn.active {
-  background: var(--Gray-Gray-50, #f5f6f8);
+.shortcut-btn--active {
+  border-color: var(--Gray-Gray-200, #c3c9d9);
   font-weight: var(--font-weight-semibold);
+  background: var(--Gray-Gray-50, #f5f6f8);
 }
 
+/* Warning */
 .warning-box {
   margin-top: 8px;
   padding: 4px 8px;
@@ -101,43 +107,123 @@
   border-radius: 4px;
   background: var(--Warning-Warning-50);
 }
-
 .warning-message {
   color: #495057;
   font-size: var(--font-size-xxs);
   line-height: 16px;
 }
 
+/* ── Calendar styles (copied from dropi-date-picker) ── */
+.dp-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--Size-4, 16px);
+  padding-bottom: var(--Size-3, 12px);
+  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
+}
+.dp-nav__btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  transition: background 0.15s;
+}
+.dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.dp-nav__title {
+  font-size: var(--font-size-s, 14px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-700, #32394d);
+  display: flex;
+  gap: 8px;
+}
+
+.dp-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  row-gap: 6px;
+  column-gap: 2px;
+}
+.dp-day-header {
+  font-size: var(--font-size-s, 14px);
+  color: var(--Gray-Gray-700, #32394d);
+  text-align: center;
+  padding: 6px 0;
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.dp-cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs, 12px);
+  font-family: inherit;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: var(--Gray-Gray-600, #475066);
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  padding: 0;
+}
+.dp-cell::after {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  border-radius: 50%;
+  transition: background 0.15s;
+  z-index: -1;
+  background: transparent;
+}
+.dp-cell::before {
+  content: "";
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: -2;
+  background: transparent;
+}
+
+.dp-cell:hover:not(:disabled)::after { background: var(--Gray-Gray-100, #e6eaf2); }
+.dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }
+.dp-cell--today { font-weight: var(--font-weight-bold, 700); }
+.dp-cell--today::after { background: var(--Gray-Gray-100, #e6eaf2); }
+
+.dp-cell--selected { color: var(--Neutral-White, #ffffff); font-weight: var(--font-weight-bold, 700); }
+.dp-cell--selected::after { background: var(--Orange-orange-500, #f49a3d) !important; }
+
+.dp-cell--range-start, .dp-cell--range-end {
+  color: var(--Neutral-White, #ffffff);
+  font-weight: var(--font-weight-bold, 700);
+}
+.dp-cell--range-start::after, .dp-cell--range-end::after {
+  background: var(--Orange-orange-500, #f49a3d) !important;
+}
+
+.dp-cell--in-range { color: var(--Orange-orange-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }
+.dp-cell--in-range::before { left: -1px; right: -1px; background: var(--Orange-orange-50, #fef5ec); }
+.dp-cell--range-start::before { left: 50%; right: -1px; background: var(--Orange-orange-50, #fef5ec); }
+.dp-cell--range-end::before   { left: -1px; right: 50%; background: var(--Orange-orange-50, #fef5ec); }
+.dp-cell--range-start.dp-cell--range-end::before { background: transparent; }
+.dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* Skeleton */
 @keyframes shimmer {
   0%   { background-position: -468px 0; }
-  100% { background-position: 468px 0; }
+  100% { background-position:  468px 0; }
 }
-
 .skeleton {
-  height: 40px;
+  height: 44px;
   width: 100%;
-  min-width: 180px;
-  border-radius: 6px;
+  border-radius: 8px;
   animation: shimmer 1s linear infinite;
   background: linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);
   background-size: 800px 104px;
 }
-
-@media screen and (max-width: 480px) {
-  .inputs-row {
-    flex-direction: column;
-  }
-
-  .separator {
-    display: none;
-  }
-
-  .shortcuts {
-    flex-direction: row;
-    flex-wrap: wrap;
-    border-left: none;
-    padding-left: 0;
-    border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);
-    padding-top: 8px;
-  }
-}

package/dist/collection/components/dropi-date-picker-range/dropi-date-picker-range.js

@@ -1,10 +1,15 @@
 import { h } from "@stencil/core";
+const MONTHS_ES = [
+    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
+];
+const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
 /**
  * @component dropi-date-picker-range
- * Date range picker with shortcut buttons (Today, Last 7/15/30/90 days).
+ * Date range picker with calendar popup and shortcut panel.
  *
  * @example
- * <dropi-date-picker-range show-label></dropi-date-picker-range>
+ * <dropi-date-picker-range></dropi-date-picker-range>
  */
 export class DropiDatePickerRange {
     /** Start date (YYYY-MM-DD) */
@@ -14,13 +19,15 @@ export class DropiDatePickerRange {
     /** Show "Rango de fechas" label */
     showLabel = true;
     /** Input placeholder */
-    placeholder = '';
+    placeholder = 'DD/MM/YYYY – DD/MM/YYYY';
     /** Show loading skeleton */
     loading = false;
     /** Max allowed range in days (0 = unlimited) */
     maxDaysRange = 0;
     /** Hide "Hoy" shortcut */
     hideTodayRangeShortcut = false;
+    /** Disabled state */
+    disabled = false;
     /** Emitted when start date changes */
     startDateChange;
     /** Emitted when end date changes */
@@ -31,8 +38,18 @@ export class DropiDatePickerRange {
     end = '';
     activeRange = -1;
     showWarning = false;
+    open = false;
+    viewYear = new Date().getFullYear();
+    viewMonth = new Date().getMonth();
+    hoverDate = '';
+    el;
     onStartPropChange(val) { this.start = val; }
     onEndPropChange(val) { this.end = val; }
+    handleDocClick(e) {
+        if (this.open && !e.composedPath().includes(this.el)) {
+            this.open = false;
+        }
+    }
     componentWillLoad() {
         this.start = this.startDate;
         this.end = this.endDate;
@@ -55,47 +72,137 @@ export class DropiDatePickerRange {
         ];
         return this.hideTodayRangeShortcut ? all.slice(1) : all;
     }
+    get displayValue() {
+        const fmt = (s) => s.split('-').reverse().join('/');
+        if (this.start && this.end)
+            return `${fmt(this.start)} – ${fmt(this.end)}`;
+        if (this.start)
+            return fmt(this.start);
+        return '';
+    }
+    toggleOpen() {
+        if (this.disabled)
+            return;
+        if (!this.open && this.start) {
+            const d = new Date(this.start);
+            this.viewYear = d.getFullYear();
+            this.viewMonth = d.getMonth();
+        }
+        this.open = !this.open;
+    }
+    prevMonth() {
+        if (this.viewMonth === 0) {
+            this.viewMonth = 11;
+            this.viewYear--;
+        }
+        else
+            this.viewMonth--;
+    }
+    nextMonth() {
+        if (this.viewMonth === 11) {
+            this.viewMonth = 0;
+            this.viewYear++;
+        }
+        else
+            this.viewMonth++;
+    }
+    toISO(year, month, day) {
+        return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+    isInRange(iso) {
+        const end = this.end || this.hoverDate;
+        if (!this.start || !end)
+            return false;
+        const [s, e] = this.start <= end ? [this.start, end] : [end, this.start];
+        return iso > s && iso < e;
+    }
+    selectDate(iso) {
+        if (!this.start || (this.start && this.end)) {
+            this.start = iso;
+            this.end = '';
+            this.activeRange = -1;
+            this.showWarning = false;
+        }
+        else {
+            if (iso < this.start) {
+                this.end = this.start;
+                this.start = iso;
+            }
+            else {
+                this.end = iso;
+            }
+            this.activeRange = -1;
+            if (this.maxDaysRange > 0) {
+                const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;
+                this.showWarning = diff > this.maxDaysRange;
+                if (this.showWarning)
+                    return;
+            }
+            this.open = false;
+            this.emit();
+        }
+    }
     selectShortcut(idx) {
         const s = this.shortcuts[idx];
         this.start = s.start;
         this.end = s.end;
         this.activeRange = idx;
         this.showWarning = false;
+        this.open = false;
         this.emit();
     }
-    onStartChange(e) {
-        this.start = e.target.value;
-        this.activeRange = -1;
-        this.checkRange();
-        if (this.start && this.end)
-            this.emit();
-    }
-    onEndChange(e) {
-        this.end = e.target.value;
-        this.activeRange = -1;
-        this.checkRange();
-        if (this.start && this.end)
-            this.emit();
-    }
-    checkRange() {
-        if (this.start && this.end && this.maxDaysRange > 0) {
-            const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;
-            this.showWarning = diff > this.maxDaysRange;
-        }
-        else {
-            this.showWarning = false;
-        }
-    }
     emit() {
         this.startDateChange.emit(this.start);
         this.endDateChange.emit(this.end);
         this.dropiRangeChange.emit({ start: this.start, end: this.end });
     }
+    buildDays() {
+        const year = this.viewYear;
+        const month = this.viewMonth;
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPrevMonth = new Date(year, month, 0).getDate();
+        const cells = [];
+        for (let i = firstDay - 1; i >= 0; i--) {
+            const d = daysInPrevMonth - i;
+            const m = month === 0 ? 11 : month - 1;
+            const y = month === 0 ? year - 1 : year;
+            cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
+        }
+        for (let d = 1; d <= daysInMonth; d++) {
+            cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });
+        }
+        const remaining = 42 - cells.length;
+        for (let d = 1; d <= remaining; d++) {
+            const m = month === 11 ? 0 : month + 1;
+            const y = month === 11 ? year + 1 : year;
+            cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
+        }
+        return cells;
+    }
     render() {
-        if (this.loading) {
+        if (this.loading)
             return h("div", { class: "skeleton" });
-        }
-        return (h("div", { class: "date-picker-range" }, this.showLabel && h("div", { class: "label" }, "Rango de fechas"), h("div", { class: "inputs-row" }, h("div", { class: "input-group" }, h("label", { class: "input-label" }, "Desde"), h("input", { type: "date", class: "date-input", value: this.start, max: this.end || this.today, onChange: (e) => this.onStartChange(e) })), h("span", { class: "separator" }, "\u2014"), h("div", { class: "input-group" }, h("label", { class: "input-label" }, "Hasta"), h("input", { type: "date", class: "date-input", value: this.end, min: this.start, max: this.today, onChange: (e) => this.onEndChange(e) }))), h("div", { class: "shortcuts" }, this.shortcuts.map((s, i) => (h("button", { key: i, class: `shortcut-btn${this.activeRange === i ? ' active' : ''}`, onClick: () => this.selectShortcut(i) }, s.label)))), this.showWarning && (h("div", { class: "warning-box" }, h("span", { class: "warning-message" }, "Solo puedes filtrar en un rango m\u00E1ximo de ", this.maxDaysRange, " d\u00EDas.")))));
+        const days = this.buildDays();
+        const today = this.today;
+        return (h("div", { class: "dpr-wrap" }, this.showLabel && h("label", { class: "dpr-label" }, "Rango de fechas"), h("button", { class: { 'dpr-trigger': true, 'dpr-trigger--disabled': this.disabled }, onClick: () => this.toggleOpen(), disabled: this.disabled, type: "button" }, h("dropi-icon", { name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { class: { 'dpr-trigger__value': true, 'dpr-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { class: "dpr-popup" }, h("div", { class: "dpr-calendar" }, h("div", { class: "dp-nav" }, h("button", { class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { class: "dp-nav__title" }, h("span", null, MONTHS_ES[this.viewMonth]), h("span", null, this.viewYear)), h("button", { class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { class: "dp-grid" }, DAYS_ES.map(d => h("div", { class: "dp-day-header" }, d)), days.map(({ iso, day, currentMonth }) => {
+            const isStart = iso === this.start;
+            const isEnd = iso === this.end;
+            const inRange = this.isInRange(iso);
+            const isToday = iso === today;
+            return (h("button", { class: {
+                    'dp-cell': true,
+                    'dp-cell--other-month': !currentMonth,
+                    'dp-cell--today': isToday && !isStart && !isEnd,
+                    'dp-cell--selected': isStart || isEnd,
+                    'dp-cell--range-start': isStart,
+                    'dp-cell--range-end': isEnd,
+                    'dp-cell--in-range': inRange,
+                }, type: "button", onClick: () => this.selectDate(iso), onMouseEnter: () => {
+                    if (this.start && !this.end)
+                        this.hoverDate = iso;
+                }, onMouseLeave: () => this.hoverDate = '' }, day));
+        })), this.showWarning && (h("div", { class: "warning-box" }, h("span", { class: "warning-message" }, "Solo puedes filtrar en un rango m\u00E1ximo de ", this.maxDaysRange, " d\u00EDas.")))), h("div", { class: "dpr-divider" }), h("div", { class: "dpr-shortcuts" }, this.shortcuts.map((s, i) => (h("button", { key: i, class: { 'shortcut-btn': true, 'shortcut-btn--active': this.activeRange === i }, onClick: () => this.selectShortcut(i), type: "button" }, s.label))))))));
     }
     static get is() { return "dropi-date-picker-range"; }
     static get encapsulation() { return "shadow"; }
@@ -189,7 +296,7 @@ export class DropiDatePickerRange {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placeholder",
-                "defaultValue": "''"
+                "defaultValue": "'DD/MM/YYYY \u2013 DD/MM/YYYY'"
             },
             "loading": {
                 "type": "boolean",
@@ -250,6 +357,26 @@ export class DropiDatePickerRange {
                 "reflect": false,
                 "attribute": "hide-today-range-shortcut",
                 "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }
@@ -258,7 +385,11 @@ export class DropiDatePickerRange {
             "start": {},
             "end": {},
             "activeRange": {},
-            "showWarning": {}
+            "showWarning": {},
+            "open": {},
+            "viewYear": {},
+            "viewMonth": {},
+            "hoverDate": {}
         };
     }
     static get events() {
@@ -315,6 +446,7 @@ export class DropiDatePickerRange {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "startDate",
@@ -324,4 +456,13 @@ export class DropiDatePickerRange {
                 "methodName": "onEndPropChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/components/dropi-date-picker-range.js

@@ -1 +1 @@
-import{t,p as a,H as e,c as i,h as s}from"./index.js";const r=a(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.startDateChange=i(this,"startDateChange"),this.endDateChange=i(this,"endDateChange"),this.dropiRangeChange=i(this,"dropiRangeChange")}startDate="";endDate="";showLabel=!0;placeholder="";loading=!1;maxDaysRange=0;hideTodayRangeShortcut=!1;startDateChange;endDateChange;dropiRangeChange;start="";end="";activeRange=-1;showWarning=!1;onStartPropChange(t){this.start=t}onEndPropChange(t){this.end=t}componentWillLoad(){this.start=this.startDate,this.end=this.endDate}get today(){return(new Date).toISOString().split("T")[0]}daysAgo(t){const a=new Date;return a.setDate(a.getDate()-t),a.toISOString().split("T")[0]}get shortcuts(){const t=[{label:"Hoy",start:this.today,end:this.today},{label:"Últimos 7 días",start:this.daysAgo(6),end:this.today},{label:"Últimos 15 días",start:this.daysAgo(14),end:this.today},{label:"Últimos 30 días",start:this.daysAgo(29),end:this.today},{label:"Últimos 90 días",start:this.daysAgo(89),end:this.today}];return this.hideTodayRangeShortcut?t.slice(1):t}selectShortcut(t){const a=this.shortcuts[t];this.start=a.start,this.end=a.end,this.activeRange=t,this.showWarning=!1,this.emit()}onStartChange(t){this.start=t.target.value,this.activeRange=-1,this.checkRange(),this.start&&this.end&&this.emit()}onEndChange(t){this.end=t.target.value,this.activeRange=-1,this.checkRange(),this.start&&this.end&&this.emit()}checkRange(){if(this.start&&this.end&&this.maxDaysRange>0){const t=(new Date(this.end).getTime()-new Date(this.start).getTime())/864e5;this.showWarning=t>this.maxDaysRange}else this.showWarning=!1}emit(){this.startDateChange.emit(this.start),this.endDateChange.emit(this.end),this.dropiRangeChange.emit({start:this.start,end:this.end})}render(){return this.loading?s("div",{class:"skeleton"}):s("div",{class:"date-picker-range"},this.showLabel&&s("div",{class:"label"},"Rango de fechas"),s("div",{class:"inputs-row"},s("div",{class:"input-group"},s("label",{class:"input-label"},"Desde"),s("input",{type:"date",class:"date-input",value:this.start,max:this.end||this.today,onChange:t=>this.onStartChange(t)})),s("span",{class:"separator"},"—"),s("div",{class:"input-group"},s("label",{class:"input-label"},"Hasta"),s("input",{type:"date",class:"date-input",value:this.end,min:this.start,max:this.today,onChange:t=>this.onEndChange(t)}))),s("div",{class:"shortcuts"},this.shortcuts.map(((t,a)=>s("button",{key:a,class:"shortcut-btn"+(this.activeRange===a?" active":""),onClick:()=>this.selectShortcut(a)},t.label)))),this.showWarning&&s("div",{class:"warning-box"},s("span",{class:"warning-message"},"Solo puedes filtrar en un rango máximo de ",this.maxDaysRange," días.")))}static get watchers(){return{startDate:[{onStartPropChange:0}],endDate:[{onEndPropChange:0}]}}static get style(){return":host{display:block;width:100%;max-width:380px}*,*::before,*::after{box-sizing:border-box}.date-picker-range{width:100%;font-family:inherit}.label{font-size:11px;font-weight:var(--font-weight-medium);color:#7b8190;margin-bottom:8px}.inputs-row{display:flex;align-items:flex-end;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:var(--font-size-xs, 11px);color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-medium, 500)}.date-input{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.15s ease}.date-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.separator{padding-bottom:8px;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-m)}.shortcuts{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-left:1px solid var(--Gray-Gray-100, #e6eaf2);padding-left:10px}.shortcut-btn{background:transparent;border:none;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:5px;transition:background 0.1s ease;font-weight:var(--font-weight-regular)}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn.active{background:var(--Gray-Gray-50, #f5f6f8);font-weight:var(--font-weight-semibold)}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid var(--Warning-Warning-400);border-radius:4px;background:var(--Warning-Warning-50)}.warning-message{color:#495057;font-size:var(--font-size-xxs);line-height:16px}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;min-width:180px;border-radius:6px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}@media screen and (max-width: 480px){.inputs-row{flex-direction:column}.separator{display:none}.shortcuts{flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:8px}}"}},[513,"dropi-date-picker-range",{startDate:[1025,"start-date"],endDate:[1025,"end-date"],showLabel:[4,"show-label"],placeholder:[1],loading:[4],maxDaysRange:[2,"max-days-range"],hideTodayRangeShortcut:[4,"hide-today-range-shortcut"],start:[32],end:[32],activeRange:[32],showWarning:[32]},void 0,{startDate:[{onStartPropChange:0}],endDate:[{onEndPropChange:0}]}]);function n(){"undefined"!=typeof customElements&&["dropi-date-picker-range"].forEach((a=>{"dropi-date-picker-range"===a&&(customElements.get(t(a))||customElements.define(t(a),r))}))}n();const o=r,d=n;export{o as DropiDatePickerRange,d as defineCustomElement}
+import{t,p as e,H as r,c as a,h as i}from"./index.js";import{d as n}from"./p-DqAyyLAT.js";const o=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],s=["Do","Lu","Ma","Mi","Ju","Vi","Sa"],d=e(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.startDateChange=a(this,"startDateChange"),this.endDateChange=a(this,"endDateChange"),this.dropiRangeChange=a(this,"dropiRangeChange")}startDate="";endDate="";showLabel=!0;placeholder="DD/MM/YYYY – DD/MM/YYYY";loading=!1;maxDaysRange=0;hideTodayRangeShortcut=!1;disabled=!1;startDateChange;endDateChange;dropiRangeChange;start="";end="";activeRange=-1;showWarning=!1;open=!1;viewYear=(new Date).getFullYear();viewMonth=(new Date).getMonth();hoverDate="";get el(){return this}onStartPropChange(t){this.start=t}onEndPropChange(t){this.end=t}handleDocClick(t){this.open&&!t.composedPath().includes(this.el)&&(this.open=!1)}componentWillLoad(){this.start=this.startDate,this.end=this.endDate}get today(){return(new Date).toISOString().split("T")[0]}daysAgo(t){const e=new Date;return e.setDate(e.getDate()-t),e.toISOString().split("T")[0]}get shortcuts(){const t=[{label:"Hoy",start:this.today,end:this.today},{label:"Últimos 7 días",start:this.daysAgo(6),end:this.today},{label:"Últimos 15 días",start:this.daysAgo(14),end:this.today},{label:"Últimos 30 días",start:this.daysAgo(29),end:this.today},{label:"Últimos 90 días",start:this.daysAgo(89),end:this.today}];return this.hideTodayRangeShortcut?t.slice(1):t}get displayValue(){const t=t=>t.split("-").reverse().join("/");return this.start&&this.end?`${t(this.start)} – ${t(this.end)}`:this.start?t(this.start):""}toggleOpen(){if(!this.disabled){if(!this.open&&this.start){const t=new Date(this.start);this.viewYear=t.getFullYear(),this.viewMonth=t.getMonth()}this.open=!this.open}}prevMonth(){0===this.viewMonth?(this.viewMonth=11,this.viewYear--):this.viewMonth--}nextMonth(){11===this.viewMonth?(this.viewMonth=0,this.viewYear++):this.viewMonth++}toISO(t,e,r){return`${t}-${(e+1+"").padStart(2,"0")}-${(r+"").padStart(2,"0")}`}isInRange(t){const e=this.end||this.hoverDate;if(!this.start||!e)return!1;const[r,a]=this.start<=e?[this.start,e]:[e,this.start];return t>r&&t<a}selectDate(t){if(!this.start||this.start&&this.end)this.start=t,this.end="",this.activeRange=-1,this.showWarning=!1;else{if(t<this.start?(this.end=this.start,this.start=t):this.end=t,this.activeRange=-1,this.maxDaysRange>0){const t=(new Date(this.end).getTime()-new Date(this.start).getTime())/864e5;if(this.showWarning=t>this.maxDaysRange,this.showWarning)return}this.open=!1,this.emit()}}selectShortcut(t){const e=this.shortcuts[t];this.start=e.start,this.end=e.end,this.activeRange=t,this.showWarning=!1,this.open=!1,this.emit()}emit(){this.startDateChange.emit(this.start),this.endDateChange.emit(this.end),this.dropiRangeChange.emit({start:this.start,end:this.end})}buildDays(){const t=this.viewYear,e=this.viewMonth,r=new Date(t,e,1).getDay(),a=new Date(t,e+1,0).getDate(),i=new Date(t,e,0).getDate(),n=[];for(let a=r-1;a>=0;a--){const r=i-a;n.push({iso:this.toISO(0===e?t-1:t,0===e?11:e-1,r),day:r,currentMonth:!1})}for(let r=1;r<=a;r++)n.push({iso:this.toISO(t,e,r),day:r,currentMonth:!0});const o=42-n.length;for(let r=1;r<=o;r++)n.push({iso:this.toISO(11===e?t+1:t,11===e?0:e+1,r),day:r,currentMonth:!1});return n}render(){if(this.loading)return i("div",{class:"skeleton"});const t=this.buildDays(),e=this.today;return i("div",{class:"dpr-wrap"},this.showLabel&&i("label",{class:"dpr-label"},"Rango de fechas"),i("button",{class:{"dpr-trigger":!0,"dpr-trigger--disabled":this.disabled},onClick:()=>this.toggleOpen(),disabled:this.disabled,type:"button"},i("dropi-icon",{name:"Calendar",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-400"}),i("span",{class:{"dpr-trigger__value":!0,"dpr-trigger__placeholder":!this.displayValue}},this.displayValue||this.placeholder),i("dropi-icon",{name:"Arrow-Down-2",iconWidth:"12px",iconHeight:"12px",color:"Gray-Gray-400"})),this.open&&i("div",{class:"dpr-popup"},i("div",{class:"dpr-calendar"},i("div",{class:"dp-nav"},i("button",{class:"dp-nav__btn",onClick:()=>this.prevMonth(),type:"button"},i("dropi-icon",{name:"Arrow-Left-2",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"})),i("span",{class:"dp-nav__title"},i("span",null,o[this.viewMonth]),i("span",null,this.viewYear)),i("button",{class:"dp-nav__btn",onClick:()=>this.nextMonth(),type:"button"},i("dropi-icon",{name:"Arrow-Right-2",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"}))),i("div",{class:"dp-grid"},s.map((t=>i("div",{class:"dp-day-header"},t))),t.map((({iso:t,day:r,currentMonth:a})=>{const n=t===this.start,o=t===this.end,s=this.isInRange(t);return i("button",{class:{"dp-cell":!0,"dp-cell--other-month":!a,"dp-cell--today":t===e&&!n&&!o,"dp-cell--selected":n||o,"dp-cell--range-start":n,"dp-cell--range-end":o,"dp-cell--in-range":s},type:"button",onClick:()=>this.selectDate(t),onMouseEnter:()=>{this.start&&!this.end&&(this.hoverDate=t)},onMouseLeave:()=>this.hoverDate=""},r)}))),this.showWarning&&i("div",{class:"warning-box"},i("span",{class:"warning-message"},"Solo puedes filtrar en un rango máximo de ",this.maxDaysRange," días."))),i("div",{class:"dpr-divider"}),i("div",{class:"dpr-shortcuts"},this.shortcuts.map(((t,e)=>i("button",{key:e,class:{"shortcut-btn":!0,"shortcut-btn--active":this.activeRange===e},onClick:()=>this.selectShortcut(e),type:"button"},t.label))))))}static get watchers(){return{startDate:[{onStartPropChange:0}],endDate:[{onEndPropChange:0}]}}static get style(){return':host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dpr-label{display:block;font-size:var(--font-size-xxs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dpr-trigger{width:100%;height:44px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dpr-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dpr-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dpr-trigger__value{flex:1;text-align:left;font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dpr-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dpr-popup{position:absolute;top:calc(100% + 8px);left:0;display:flex;flex-direction:row;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-3, 12px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:300;overflow:hidden}.dpr-calendar{padding:var(--Size-4, 16px);width:300px;flex-shrink:0}.dpr-divider{width:1px;background:var(--Gray-Gray-100, #e6eaf2);flex-shrink:0}.dpr-shortcuts{padding:var(--Size-4, 16px) var(--Size-3, 12px);display:flex;flex-direction:column;gap:2px;min-width:140px}.shortcut-btn{background:transparent;border:1px solid transparent;padding:6px 10px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:6px;transition:background 0.1s ease;font-weight:var(--font-weight-regular);white-space:nowrap}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn--active{border-color:var(--Gray-Gray-200, #c3c9d9);font-weight:var(--font-weight-semibold);background:var(--Gray-Gray-50, #f5f6f8)}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid var(--Warning-Warning-400);border-radius:4px;background:var(--Warning-Warning-50)}.warning-message{color:#495057;font-size:var(--font-size-xxs);line-height:16px}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px);padding-bottom:var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.dp-nav__btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);row-gap:6px;column-gap:2px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:6px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 12px);font-family:inherit;border:none;cursor:pointer;background:transparent;color:var(--Gray-Gray-600, #475066);width:100%;position:relative;z-index:1;padding:0}.dp-cell::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transition:background 0.15s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;background:transparent}.dp-cell:hover:not(:disabled)::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700)}.dp-cell--today::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--selected{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--selected::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--range-start,.dp-cell--range-end{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--range-start::after,.dp-cell--range-end::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--in-range{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-cell--in-range::before{left:-1px;right:-1px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-1px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-1px;right:50%;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start.dp-cell--range-end::before{background:transparent}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:44px;width:100%;border-radius:8px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}'}},[513,"dropi-date-picker-range",{startDate:[1025,"start-date"],endDate:[1025,"end-date"],showLabel:[4,"show-label"],placeholder:[1],loading:[4],maxDaysRange:[2,"max-days-range"],hideTodayRangeShortcut:[4,"hide-today-range-shortcut"],disabled:[4],start:[32],end:[32],activeRange:[32],showWarning:[32],open:[32],viewYear:[32],viewMonth:[32],hoverDate:[32]},[[4,"click","handleDocClick"]],{startDate:[{onStartPropChange:0}],endDate:[{onEndPropChange:0}]}]);function l(){"undefined"!=typeof customElements&&["dropi-date-picker-range","dropi-icon"].forEach((e=>{switch(e){case"dropi-date-picker-range":customElements.get(t(e))||customElements.define(t(e),d);break;case"dropi-icon":customElements.get(t(e))||n()}}))}l();const h=d,p=l;export{h as DropiDatePickerRange,p as defineCustomElement}