@dropi/ui 0.1.51 → 0.1.52

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

@@ -3,6 +3,7 @@ const MONTHS_ES = [
     'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
     'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
 ];
+const MONTHS_SHORT = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
 const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
 /**
  * @component dropi-date-picker
@@ -13,16 +14,14 @@ export class DropiDatePicker {
     internals;
     /** Name for native form submission */
     name;
-    /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
+    /** Selected date (ISO string, single mode) */
     selectedDate = '';
     /** Range start date (ISO string, range mode) */
     startDate = '';
     /** Range end date (ISO string, range mode) */
     endDate = '';
-    valueChanged() {
-        this.updateFormValue();
-    }
-    /** Enable range selection - matches Angular selectionMode */
+    valueChanged() { this.updateFormValue(); }
+    /** Enable range selection */
     selectionMode = 'single';
     /** Min selectable date (ISO string) */
     minDate = '';
@@ -34,29 +33,28 @@ export class DropiDatePicker {
     placeholder = 'DD/MM/YYYY';
     /** Disabled */
     disabled = false;
-    /** Is invalid state - matches Angular */
+    /** Is invalid state */
     isInvalid = false;
-    /** Loading state - matches Angular */
+    /** Loading state */
     loading = false;
+    /** Hide "Hoy" shortcut */
+    hideTodayShortcut = false;
     open = false;
     viewYear = new Date().getFullYear();
     viewMonth = new Date().getMonth();
     hoverDate = '';
+    viewMode = 'day';
+    activeShortcut = -1;
     el;
     handleDocClick(e) {
         if (this.open && !e.composedPath().includes(this.el)) {
             this.open = false;
         }
     }
-    /** Emitted when date selected — matches Angular 'onChangeDate' */
     dropiChangeDate;
-    /** Emitted when panel closes — matches Angular 'onClosePanel' */
     dropiClosePanel;
-    /** Emitted when range selected */
     dropiRangeChange;
-    componentWillLoad() {
-        this.updateFormValue();
-    }
+    componentWillLoad() { this.updateFormValue(); }
     updateFormValue() {
         if (this.selectionMode === 'range') {
             this.internals.setFormValue(this.startDate && this.endDate ? `${this.startDate},${this.endDate}` : '');
@@ -88,23 +86,96 @@ export class DropiDatePicker {
             this.viewYear = d.getFullYear();
             this.viewMonth = d.getMonth();
         }
+        this.viewMode = 'day';
         this.open = true;
     }
-    prevMonth() {
-        if (this.viewMonth === 0) {
-            this.viewMonth = 11;
+    get decadeStart() {
+        return Math.floor(this.viewYear / 10) * 10;
+    }
+    get navTitle() {
+        if (this.viewMode === 'day')
+            return `${MONTHS_ES[this.viewMonth]}  ${this.viewYear}`;
+        if (this.viewMode === 'month')
+            return `${this.viewYear}`;
+        return `${this.decadeStart}-${this.decadeStart + 9}`;
+    }
+    cycleView() {
+        if (this.viewMode === 'day')
+            this.viewMode = 'month';
+        else if (this.viewMode === 'month')
+            this.viewMode = 'year';
+    }
+    prevNav() {
+        if (this.viewMode === 'day') {
+            if (this.viewMonth === 0) {
+                this.viewMonth = 11;
+                this.viewYear--;
+            }
+            else
+                this.viewMonth--;
+        }
+        else if (this.viewMode === 'month') {
             this.viewYear--;
         }
-        else
-            this.viewMonth--;
+        else {
+            this.viewYear = this.decadeStart - 10;
+        }
     }
-    nextMonth() {
-        if (this.viewMonth === 11) {
-            this.viewMonth = 0;
+    nextNav() {
+        if (this.viewMode === 'day') {
+            if (this.viewMonth === 11) {
+                this.viewMonth = 0;
+                this.viewYear++;
+            }
+            else
+                this.viewMonth++;
+        }
+        else if (this.viewMode === 'month') {
             this.viewYear++;
         }
-        else
-            this.viewMonth++;
+        else {
+            this.viewYear = this.decadeStart + 10;
+        }
+    }
+    selectMonth(month) {
+        this.viewMonth = month;
+        this.viewMode = 'day';
+    }
+    selectYear(year) {
+        this.viewYear = year;
+        this.viewMode = 'month';
+    }
+    get today() {
+        return new Date().toISOString().slice(0, 10);
+    }
+    daysAgo(n) {
+        const d = new Date();
+        d.setDate(d.getDate() - n);
+        return d.toISOString().slice(0, 10);
+    }
+    get shortcuts() {
+        const all = [
+            { 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.hideTodayShortcut ? all.slice(1) : all;
+    }
+    selectShortcut(idx) {
+        const s = this.shortcuts[idx];
+        this.activeShortcut = idx;
+        if (this.selectionMode === 'range') {
+            this.startDate = s.start;
+            this.endDate = s.end;
+            this.dropiRangeChange.emit({ start: s.start, end: s.end });
+        }
+        else {
+            this.selectedDate = s.end;
+            this.dropiChangeDate.emit(s.end);
+        }
+        this.open = false;
     }
     toISO(year, month, day) {
         return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
@@ -135,7 +206,6 @@ export class DropiDatePicker {
             this.dropiChangeDate.emit(iso);
             return;
         }
-        // Range mode
         if (!this.startDate || (this.startDate && this.endDate)) {
             this.startDate = iso;
             this.endDate = '';
@@ -156,23 +226,18 @@ export class DropiDatePicker {
         const year = this.viewYear;
         const month = this.viewMonth;
         const firstDay = new Date(year, month, 1).getDay();
-        // Adjust to Sunday-first
-        const startOffset = firstDay;
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const daysInPrevMonth = new Date(year, month, 0).getDate();
         const cells = [];
-        // Previous month filler
-        for (let i = startOffset - 1; i >= 0; i--) {
+        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 });
         }
-        // Current month
         for (let d = 1; d <= daysInMonth; d++) {
             cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });
         }
-        // Next month filler
         const remaining = 42 - cells.length;
         for (let d = 1; d <= remaining; d++) {
             const m = month === 11 ? 0 : month + 1;
@@ -181,15 +246,9 @@ export class DropiDatePicker {
         }
         return cells;
     }
-    render() {
+    renderDayView(today) {
         const days = this.buildDays();
-        const today = new Date().toISOString().slice(0, 10);
-        return (h("div", { key: 'd2f6248ff409e53e916e266ab5d23136e9da76d0', class: "dp-wrap" }, this.label && h("label", { key: 'ba51f4091f18437e4449c05378def5b099883acd', class: "dp-label" }, this.label), h("button", { key: '88eb474ca75c9b62996765bdb4816a8cfc14bb8e', class: {
-                'dp-trigger': true,
-                'dp-trigger--disabled': this.disabled,
-                'dp-trigger--invalid': this.isInvalid,
-                'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '1044cef59317f88cc472d2a466a6937a0c4d58f7', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: '6a7c5687cd06b9b2f42c256bc03ff0f412ca5573', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '4be1fc67ed6f9ffb5a5d936e3e8d8330bb91fb0b', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '5ad107e256d62a46b57e4bd1bebead70ecc8e46c', class: "dp-popup" }, h("div", { key: 'e3d51afbd24df88867777e43c9bd63dd41c3f542', class: "dp-nav" }, h("button", { key: '8819f79389c1d50ec639f719228aab88be4d0335', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: 'a17004ad24ce40590474d91227a826f46edf50ba', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: 'e91c8a46b963a1e7f0d01c56610c2e4bb6fa3d39', class: "dp-nav__title" }, h("span", { key: '214a575cbd83e8c3bafe64ffbd93e914119b09aa' }, MONTHS_ES[this.viewMonth]), h("span", { key: '1f71a83e7110bf8a91f7b5e14e0400b09ba28e1a' }, this.viewYear)), h("button", { key: '21dbc0fdaabc423bd864bfb33ba314b72ca62d48', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: 'f248e65855555878afdbda7d1ba9a802d9eae4d5', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: '4fb29792028bf2132ea78a105c7694cf3806ff05', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+        return (h("div", { class: "dp-grid" }, DAYS_ES.map(d => h("div", { class: "dp-day-header" }, d)), days.map(({ iso, day, currentMonth }) => {
             const isSelected = this.selectionMode !== 'range'
                 ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
@@ -211,22 +270,48 @@ export class DropiDatePicker {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), h("div", { key: '9c670c5ad5a6115b628d5a7bd3a2422c7631e237', class: "dp-footer" }, h("button", { key: 'f939595cde989ea0bd462a3d94c6333b5220d1ee', class: "dp-footer__clear", type: "button", onClick: () => {
-                this.selectedDate = '';
-                this.startDate = '';
-                this.endDate = '';
-                this.open = false;
-            } }, "Limpiar"), h("button", { key: '87b88413962d73229f0cac5a15918b9cd7aebea3', class: "dp-footer__today", type: "button", onClick: () => {
-                if (this.selectionMode !== 'range') {
-                    this.selectedDate = today;
-                    this.open = false;
-                    this.dropiChangeDate.emit(today);
-                }
-                else {
-                    this.startDate = today;
-                    this.endDate = '';
-                }
-            } }, "Hoy"))))));
+        })));
+    }
+    renderMonthView() {
+        const todayMonth = new Date().getMonth();
+        const todayYear = new Date().getFullYear();
+        return (h("div", { class: "dp-month-grid" }, MONTHS_SHORT.map((name, idx) => {
+            const isSelected = idx === this.viewMonth;
+            const isCurrent = idx === todayMonth && this.viewYear === todayYear;
+            return (h("button", { class: {
+                    'dp-month-cell': true,
+                    'dp-month-cell--selected': isSelected,
+                    'dp-month-cell--current': isCurrent && !isSelected,
+                }, type: "button", onClick: () => this.selectMonth(idx) }, name));
+        })));
+    }
+    renderYearView() {
+        const currentYear = new Date().getFullYear();
+        const start = this.decadeStart;
+        const years = Array.from({ length: 10 }, (_, i) => start + i);
+        return (h("div", { class: "dp-year-grid" }, years.map(year => {
+            const isSelected = year === this.viewYear;
+            const isCurrent = year === currentYear;
+            return (h("button", { class: {
+                    'dp-year-cell': true,
+                    'dp-year-cell--selected': isSelected,
+                    'dp-year-cell--current': isCurrent && !isSelected,
+                }, type: "button", onClick: () => this.selectYear(year) }, year));
+        })));
+    }
+    render() {
+        const today = new Date().toISOString().slice(0, 10);
+        return (h("div", { key: '6ae00de99b93a13faba81ac027c292b9624d0336', class: "dp-wrap" }, this.label && h("label", { key: '9282bb57332ebaef9861702d80759d641ea21757', class: "dp-label" }, this.label), h("button", { key: '1fe5d5fcd8ce1c0b151381d9c249c401d322f78a', class: {
+                'dp-trigger': true,
+                'dp-trigger--disabled': this.disabled,
+                'dp-trigger--invalid': this.isInvalid,
+                'dp-trigger--loading': this.loading
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '560cf80eb7652543b9000e375b213a3dba91060b', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: '3bdc45bd4706502af4050475e709c15beebce028', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder)), this.open && (h("div", { key: 'e21053dd38d62ab43c01f337fbbeb8b36e70680c', class: "dp-popup" }, h("div", { key: 'd6c8fc40ec4bd11bcd5bf3d8b3706c4c62099bbf', class: "dp-calendar" }, h("div", { key: 'cf8f21d301592077851a44eb588418302240598f', class: "dp-nav" }, h("button", { key: '28702d76d499cec07cd69d7bd23f5eb0369d288f', class: "dp-nav__btn", onClick: () => this.prevNav(), type: "button" }, h("dropi-icon", { key: '18b1c6fb2ea5f51b4a4b59592c7d89c5406c6c39', name: "dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("button", { key: '755274772a90deae38d613da369863aefe95e297', class: "dp-nav__title", onClick: () => this.cycleView(), type: "button" }, this.viewMode === 'day'
+            ? [h("span", null, MONTHS_ES[this.viewMonth]), h("span", null, this.viewYear)]
+            : h("span", null, this.navTitle)), h("button", { key: '6442690df1e434f9fb0128327f8f07c3cecbed4c', class: "dp-nav__btn", onClick: () => this.nextNav(), type: "button" }, h("dropi-icon", { key: '00525ae2cbe5cc8a881d165141de10ce3d72e439', name: "dropdown-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), this.viewMode === 'day' && this.renderDayView(today), this.viewMode === 'month' && this.renderMonthView(), this.viewMode === 'year' && this.renderYearView()), this.selectionMode === 'range' && [
+            h("div", { key: '688df97b843c3c3342fc301d6c6c74ec88921d68', class: "dp-divider" }),
+            h("div", { key: '2c75f7b004812ee1eb18bbc349f03ab55623cd9f', class: "dp-shortcuts" }, this.shortcuts.map((s, i) => (h("button", { key: i, class: { 'shortcut-btn': true, 'shortcut-btn--active': this.activeShortcut === i }, onClick: () => this.selectShortcut(i), type: "button" }, s.label))))
+        ]))));
     }
     static get is() { return "dropi-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -274,7 +359,7 @@ export class DropiDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Selected date (ISO string, single mode) - matches Angular 'selectedDate'"
+                    "text": "Selected date (ISO string, single mode)"
                 },
                 "getter": false,
                 "setter": false,
@@ -334,7 +419,7 @@ export class DropiDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable range selection - matches Angular selectionMode"
+                    "text": "Enable range selection"
                 },
                 "getter": false,
                 "setter": false,
@@ -454,7 +539,7 @@ export class DropiDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Is invalid state - matches Angular"
+                    "text": "Is invalid state"
                 },
                 "getter": false,
                 "setter": false,
@@ -474,13 +559,33 @@ export class DropiDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Loading state - matches Angular"
+                    "text": "Loading state"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "loading",
                 "defaultValue": "false"
+            },
+            "hideTodayShortcut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide \"Hoy\" shortcut"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-today-shortcut",
+                "defaultValue": "false"
             }
         };
     }
@@ -489,7 +594,9 @@ export class DropiDatePicker {
             "open": {},
             "viewYear": {},
             "viewMonth": {},
-            "hoverDate": {}
+            "hoverDate": {},
+            "viewMode": {},
+            "activeShortcut": {}
         };
     }
     static get events() {
@@ -501,7 +608,7 @@ export class DropiDatePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when date selected \u2014 matches Angular 'onChangeDate'"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "string",
@@ -516,7 +623,7 @@ export class DropiDatePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when panel closes \u2014 matches Angular 'onClosePanel'"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "void",
@@ -531,7 +638,7 @@ export class DropiDatePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when range selected"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "{ start: string; end: string }",

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

@@ -4,15 +4,16 @@
 /* Label */
 .dpr-label {
   display: block;
-  font-size: var(--font-size-xxs, 10px);
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-regular, 400);
   color: var(--Gray-Gray-600, #475066);
-  margin-bottom: 4px;
+  margin-bottom: 8px;
 }
 
 /* Trigger */
 .dpr-trigger {
   width: 100%;
-  height: 44px;
+  height: 40px;
   display: flex;
   align-items: center;
   gap: var(--Size-2, 8px);
@@ -114,6 +115,53 @@
 }
 
 /* ── Calendar styles (copied from dropi-date-picker) ── */
+
+/* Month grid */
+.dp-month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.dp-month-cell {
+  padding: 10px 4px;
+  font-size: var(--font-size-s, 14px);
+  font-family: inherit;
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-700, #32394d);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--Border-2, 8px);
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+.dp-month-cell:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.dp-month-cell--selected { border-color: var(--Info-Info-500, #50a5f1); font-weight: var(--font-weight-semibold, 600); }
+.dp-month-cell--current { background: var(--Gray-Gray-100, #e6eaf2); }
+
+/* Year grid */
+.dp-year-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+.dp-year-cell {
+  padding: 10px 4px;
+  font-size: var(--font-size-s, 14px);
+  font-family: inherit;
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-700, #32394d);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--Border-2, 8px);
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+.dp-year-cell:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.dp-year-cell--selected { border-color: var(--Info-Info-500, #50a5f1); font-weight: var(--font-weight-semibold, 600); }
+.dp-year-cell--current { background: var(--Gray-Gray-100, #e6eaf2); }
+
 .dp-nav {
   display: flex;
   align-items: center;
@@ -137,12 +185,20 @@
 }
 .dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
 .dp-nav__title {
+  background: none;
+  border: none;
   font-size: var(--font-size-s, 14px);
   font-weight: var(--font-weight-bold, 700);
   color: var(--Gray-Gray-700, #32394d);
   display: flex;
   gap: 8px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--Border-1, 4px);
+  font-family: inherit;
+  transition: background 0.15s;
 }
+.dp-nav__title:hover { background: var(--Gray-Gray-50, #f7f8fa); }
 
 .dp-grid {
   display: grid;
@@ -220,7 +276,7 @@
   100% { background-position:  468px 0; }
 }
 .skeleton {
-  height: 44px;
+  height: 40px;
   width: 100%;
   border-radius: 8px;
   animation: shimmer 1s linear infinite;