@dropi/ui 0.1.50 → 0.1.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dropi-date-picker-range.cjs.entry.js +135 -28
- package/dist/cjs/dropi-ui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/dropi-date-picker-range/dropi-date-picker-range.css +169 -83
- package/dist/collection/components/dropi-date-picker-range/dropi-date-picker-range.js +172 -31
- package/dist/components/dropi-date-picker-range.js +1 -1
- package/dist/docs.json +54 -8
- package/dist/dropi-ui/dropi-ui.esm.js +1 -1
- package/dist/dropi-ui/p-4f498d26.entry.js +1 -0
- package/dist/esm/dropi-date-picker-range.entry.js +136 -29
- package/dist/esm/dropi-ui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/dropi-date-picker-range/dropi-date-picker-range.d.ts +18 -5
- package/dist/types/components.d.ts +21 -10
- package/hydrate/index.js +147 -35
- package/hydrate/index.mjs +147 -35
- package/package.json +1 -1
package/hydrate/index.js
CHANGED
|
@@ -7596,11 +7596,11 @@ class DropiCountrySelector {
|
|
|
7596
7596
|
|
|
7597
7597
|
const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xxs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-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}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-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}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 8px);left:0;width:320px;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;padding:var(--Size-4, 16px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px)}.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:8px;column-gap:4px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:8px 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:all 0.2s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;border-radius:0;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:-2px;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-2px;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}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xxs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #69738c)}.dp-footer__today{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Orange-orange-50, #fef5ec)}`;
|
|
7598
7598
|
|
|
7599
|
-
const MONTHS_ES = [
|
|
7599
|
+
const MONTHS_ES$1 = [
|
|
7600
7600
|
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
|
7601
7601
|
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
|
|
7602
7602
|
];
|
|
7603
|
-
const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
|
|
7603
|
+
const DAYS_ES$1 = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
|
|
7604
7604
|
/**
|
|
7605
7605
|
* @component dropi-date-picker
|
|
7606
7606
|
* Calendar date picker with optional date range mode.
|
|
@@ -7799,7 +7799,7 @@ class DropiDatePicker {
|
|
|
7799
7799
|
'dp-trigger--disabled': this.disabled,
|
|
7800
7800
|
'dp-trigger--invalid': this.isInvalid,
|
|
7801
7801
|
'dp-trigger--loading': this.loading
|
|
7802
|
-
}, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, hAsync("dropi-icon", { key: '1044cef59317f88cc472d2a466a6937a0c4d58f7', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '6a7c5687cd06b9b2f42c256bc03ff0f412ca5573', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '4be1fc67ed6f9ffb5a5d936e3e8d8330bb91fb0b', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '5ad107e256d62a46b57e4bd1bebead70ecc8e46c', class: "dp-popup" }, hAsync("div", { key: 'e3d51afbd24df88867777e43c9bd63dd41c3f542', class: "dp-nav" }, hAsync("button", { key: '8819f79389c1d50ec639f719228aab88be4d0335', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: 'a17004ad24ce40590474d91227a826f46edf50ba', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: 'e91c8a46b963a1e7f0d01c56610c2e4bb6fa3d39', class: "dp-nav__title" }, hAsync("span", { key: '214a575cbd83e8c3bafe64ffbd93e914119b09aa' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: '1f71a83e7110bf8a91f7b5e14e0400b09ba28e1a' }, this.viewYear)), hAsync("button", { key: '21dbc0fdaabc423bd864bfb33ba314b72ca62d48', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: 'f248e65855555878afdbda7d1ba9a802d9eae4d5', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: '4fb29792028bf2132ea78a105c7694cf3806ff05', class: "dp-grid" }, DAYS_ES.map(d => (hAsync("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
|
|
7802
|
+
}, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, hAsync("dropi-icon", { key: '1044cef59317f88cc472d2a466a6937a0c4d58f7', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '6a7c5687cd06b9b2f42c256bc03ff0f412ca5573', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '4be1fc67ed6f9ffb5a5d936e3e8d8330bb91fb0b', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '5ad107e256d62a46b57e4bd1bebead70ecc8e46c', class: "dp-popup" }, hAsync("div", { key: 'e3d51afbd24df88867777e43c9bd63dd41c3f542', class: "dp-nav" }, hAsync("button", { key: '8819f79389c1d50ec639f719228aab88be4d0335', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: 'a17004ad24ce40590474d91227a826f46edf50ba', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: 'e91c8a46b963a1e7f0d01c56610c2e4bb6fa3d39', class: "dp-nav__title" }, hAsync("span", { key: '214a575cbd83e8c3bafe64ffbd93e914119b09aa' }, MONTHS_ES$1[this.viewMonth]), hAsync("span", { key: '1f71a83e7110bf8a91f7b5e14e0400b09ba28e1a' }, this.viewYear)), hAsync("button", { key: '21dbc0fdaabc423bd864bfb33ba314b72ca62d48', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: 'f248e65855555878afdbda7d1ba9a802d9eae4d5', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: '4fb29792028bf2132ea78a105c7694cf3806ff05', class: "dp-grid" }, DAYS_ES$1.map(d => (hAsync("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
|
|
7803
7803
|
const isSelected = this.selectionMode !== 'range'
|
|
7804
7804
|
? iso === this.selectedDate
|
|
7805
7805
|
: iso === this.startDate || iso === this.endDate;
|
|
@@ -7878,14 +7878,19 @@ class DropiDatePicker {
|
|
|
7878
7878
|
}; }
|
|
7879
7879
|
}
|
|
7880
7880
|
|
|
7881
|
-
const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;
|
|
7881
|
+
const dropiDatePickerRangeCss = () => `: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}`;
|
|
7882
7882
|
|
|
7883
|
+
const MONTHS_ES = [
|
|
7884
|
+
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
|
7885
|
+
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
|
|
7886
|
+
];
|
|
7887
|
+
const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
|
|
7883
7888
|
/**
|
|
7884
7889
|
* @component dropi-date-picker-range
|
|
7885
|
-
* Date range picker with
|
|
7890
|
+
* Date range picker with calendar popup and shortcut panel.
|
|
7886
7891
|
*
|
|
7887
7892
|
* @example
|
|
7888
|
-
* <dropi-date-picker-range
|
|
7893
|
+
* <dropi-date-picker-range></dropi-date-picker-range>
|
|
7889
7894
|
*/
|
|
7890
7895
|
class DropiDatePickerRange {
|
|
7891
7896
|
constructor(hostRef) {
|
|
@@ -7901,13 +7906,15 @@ class DropiDatePickerRange {
|
|
|
7901
7906
|
/** Show "Rango de fechas" label */
|
|
7902
7907
|
showLabel = true;
|
|
7903
7908
|
/** Input placeholder */
|
|
7904
|
-
placeholder = '';
|
|
7909
|
+
placeholder = 'DD/MM/YYYY – DD/MM/YYYY';
|
|
7905
7910
|
/** Show loading skeleton */
|
|
7906
7911
|
loading = false;
|
|
7907
7912
|
/** Max allowed range in days (0 = unlimited) */
|
|
7908
7913
|
maxDaysRange = 0;
|
|
7909
7914
|
/** Hide "Hoy" shortcut */
|
|
7910
7915
|
hideTodayRangeShortcut = false;
|
|
7916
|
+
/** Disabled state */
|
|
7917
|
+
disabled = false;
|
|
7911
7918
|
/** Emitted when start date changes */
|
|
7912
7919
|
startDateChange;
|
|
7913
7920
|
/** Emitted when end date changes */
|
|
@@ -7918,8 +7925,18 @@ class DropiDatePickerRange {
|
|
|
7918
7925
|
end = '';
|
|
7919
7926
|
activeRange = -1;
|
|
7920
7927
|
showWarning = false;
|
|
7928
|
+
open = false;
|
|
7929
|
+
viewYear = new Date().getFullYear();
|
|
7930
|
+
viewMonth = new Date().getMonth();
|
|
7931
|
+
hoverDate = '';
|
|
7932
|
+
get el() { return getElement(this); }
|
|
7921
7933
|
onStartPropChange(val) { this.start = val; }
|
|
7922
7934
|
onEndPropChange(val) { this.end = val; }
|
|
7935
|
+
handleDocClick(e) {
|
|
7936
|
+
if (this.open && !e.composedPath().includes(this.el)) {
|
|
7937
|
+
this.open = false;
|
|
7938
|
+
}
|
|
7939
|
+
}
|
|
7923
7940
|
componentWillLoad() {
|
|
7924
7941
|
this.start = this.startDate;
|
|
7925
7942
|
this.end = this.endDate;
|
|
@@ -7942,47 +7959,137 @@ class DropiDatePickerRange {
|
|
|
7942
7959
|
];
|
|
7943
7960
|
return this.hideTodayRangeShortcut ? all.slice(1) : all;
|
|
7944
7961
|
}
|
|
7962
|
+
get displayValue() {
|
|
7963
|
+
const fmt = (s) => s.split('-').reverse().join('/');
|
|
7964
|
+
if (this.start && this.end)
|
|
7965
|
+
return `${fmt(this.start)} – ${fmt(this.end)}`;
|
|
7966
|
+
if (this.start)
|
|
7967
|
+
return fmt(this.start);
|
|
7968
|
+
return '';
|
|
7969
|
+
}
|
|
7970
|
+
toggleOpen() {
|
|
7971
|
+
if (this.disabled)
|
|
7972
|
+
return;
|
|
7973
|
+
if (!this.open && this.start) {
|
|
7974
|
+
const d = new Date(this.start);
|
|
7975
|
+
this.viewYear = d.getFullYear();
|
|
7976
|
+
this.viewMonth = d.getMonth();
|
|
7977
|
+
}
|
|
7978
|
+
this.open = !this.open;
|
|
7979
|
+
}
|
|
7980
|
+
prevMonth() {
|
|
7981
|
+
if (this.viewMonth === 0) {
|
|
7982
|
+
this.viewMonth = 11;
|
|
7983
|
+
this.viewYear--;
|
|
7984
|
+
}
|
|
7985
|
+
else
|
|
7986
|
+
this.viewMonth--;
|
|
7987
|
+
}
|
|
7988
|
+
nextMonth() {
|
|
7989
|
+
if (this.viewMonth === 11) {
|
|
7990
|
+
this.viewMonth = 0;
|
|
7991
|
+
this.viewYear++;
|
|
7992
|
+
}
|
|
7993
|
+
else
|
|
7994
|
+
this.viewMonth++;
|
|
7995
|
+
}
|
|
7996
|
+
toISO(year, month, day) {
|
|
7997
|
+
return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
|
7998
|
+
}
|
|
7999
|
+
isInRange(iso) {
|
|
8000
|
+
const end = this.end || this.hoverDate;
|
|
8001
|
+
if (!this.start || !end)
|
|
8002
|
+
return false;
|
|
8003
|
+
const [s, e] = this.start <= end ? [this.start, end] : [end, this.start];
|
|
8004
|
+
return iso > s && iso < e;
|
|
8005
|
+
}
|
|
8006
|
+
selectDate(iso) {
|
|
8007
|
+
if (!this.start || (this.start && this.end)) {
|
|
8008
|
+
this.start = iso;
|
|
8009
|
+
this.end = '';
|
|
8010
|
+
this.activeRange = -1;
|
|
8011
|
+
this.showWarning = false;
|
|
8012
|
+
}
|
|
8013
|
+
else {
|
|
8014
|
+
if (iso < this.start) {
|
|
8015
|
+
this.end = this.start;
|
|
8016
|
+
this.start = iso;
|
|
8017
|
+
}
|
|
8018
|
+
else {
|
|
8019
|
+
this.end = iso;
|
|
8020
|
+
}
|
|
8021
|
+
this.activeRange = -1;
|
|
8022
|
+
if (this.maxDaysRange > 0) {
|
|
8023
|
+
const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;
|
|
8024
|
+
this.showWarning = diff > this.maxDaysRange;
|
|
8025
|
+
if (this.showWarning)
|
|
8026
|
+
return;
|
|
8027
|
+
}
|
|
8028
|
+
this.open = false;
|
|
8029
|
+
this.emit();
|
|
8030
|
+
}
|
|
8031
|
+
}
|
|
7945
8032
|
selectShortcut(idx) {
|
|
7946
8033
|
const s = this.shortcuts[idx];
|
|
7947
8034
|
this.start = s.start;
|
|
7948
8035
|
this.end = s.end;
|
|
7949
8036
|
this.activeRange = idx;
|
|
7950
8037
|
this.showWarning = false;
|
|
8038
|
+
this.open = false;
|
|
7951
8039
|
this.emit();
|
|
7952
8040
|
}
|
|
7953
|
-
onStartChange(e) {
|
|
7954
|
-
this.start = e.target.value;
|
|
7955
|
-
this.activeRange = -1;
|
|
7956
|
-
this.checkRange();
|
|
7957
|
-
if (this.start && this.end)
|
|
7958
|
-
this.emit();
|
|
7959
|
-
}
|
|
7960
|
-
onEndChange(e) {
|
|
7961
|
-
this.end = e.target.value;
|
|
7962
|
-
this.activeRange = -1;
|
|
7963
|
-
this.checkRange();
|
|
7964
|
-
if (this.start && this.end)
|
|
7965
|
-
this.emit();
|
|
7966
|
-
}
|
|
7967
|
-
checkRange() {
|
|
7968
|
-
if (this.start && this.end && this.maxDaysRange > 0) {
|
|
7969
|
-
const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;
|
|
7970
|
-
this.showWarning = diff > this.maxDaysRange;
|
|
7971
|
-
}
|
|
7972
|
-
else {
|
|
7973
|
-
this.showWarning = false;
|
|
7974
|
-
}
|
|
7975
|
-
}
|
|
7976
8041
|
emit() {
|
|
7977
8042
|
this.startDateChange.emit(this.start);
|
|
7978
8043
|
this.endDateChange.emit(this.end);
|
|
7979
8044
|
this.dropiRangeChange.emit({ start: this.start, end: this.end });
|
|
7980
8045
|
}
|
|
8046
|
+
buildDays() {
|
|
8047
|
+
const year = this.viewYear;
|
|
8048
|
+
const month = this.viewMonth;
|
|
8049
|
+
const firstDay = new Date(year, month, 1).getDay();
|
|
8050
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
8051
|
+
const daysInPrevMonth = new Date(year, month, 0).getDate();
|
|
8052
|
+
const cells = [];
|
|
8053
|
+
for (let i = firstDay - 1; i >= 0; i--) {
|
|
8054
|
+
const d = daysInPrevMonth - i;
|
|
8055
|
+
const m = month === 0 ? 11 : month - 1;
|
|
8056
|
+
const y = month === 0 ? year - 1 : year;
|
|
8057
|
+
cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
|
|
8058
|
+
}
|
|
8059
|
+
for (let d = 1; d <= daysInMonth; d++) {
|
|
8060
|
+
cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });
|
|
8061
|
+
}
|
|
8062
|
+
const remaining = 42 - cells.length;
|
|
8063
|
+
for (let d = 1; d <= remaining; d++) {
|
|
8064
|
+
const m = month === 11 ? 0 : month + 1;
|
|
8065
|
+
const y = month === 11 ? year + 1 : year;
|
|
8066
|
+
cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
|
|
8067
|
+
}
|
|
8068
|
+
return cells;
|
|
8069
|
+
}
|
|
7981
8070
|
render() {
|
|
7982
|
-
if (this.loading)
|
|
8071
|
+
if (this.loading)
|
|
7983
8072
|
return hAsync("div", { class: "skeleton" });
|
|
7984
|
-
|
|
7985
|
-
|
|
8073
|
+
const days = this.buildDays();
|
|
8074
|
+
const today = this.today;
|
|
8075
|
+
return (hAsync("div", { class: "dpr-wrap" }, this.showLabel && hAsync("label", { class: "dpr-label" }, "Rango de fechas"), hAsync("button", { class: { 'dpr-trigger': true, 'dpr-trigger--disabled': this.disabled }, onClick: () => this.toggleOpen(), disabled: this.disabled, type: "button" }, hAsync("dropi-icon", { name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { class: { 'dpr-trigger__value': true, 'dpr-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { class: "dpr-popup" }, hAsync("div", { class: "dpr-calendar" }, hAsync("div", { class: "dp-nav" }, hAsync("button", { class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { class: "dp-nav__title" }, hAsync("span", null, MONTHS_ES[this.viewMonth]), hAsync("span", null, this.viewYear)), hAsync("button", { class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { class: "dp-grid" }, DAYS_ES.map(d => hAsync("div", { class: "dp-day-header" }, d)), days.map(({ iso, day, currentMonth }) => {
|
|
8076
|
+
const isStart = iso === this.start;
|
|
8077
|
+
const isEnd = iso === this.end;
|
|
8078
|
+
const inRange = this.isInRange(iso);
|
|
8079
|
+
const isToday = iso === today;
|
|
8080
|
+
return (hAsync("button", { class: {
|
|
8081
|
+
'dp-cell': true,
|
|
8082
|
+
'dp-cell--other-month': !currentMonth,
|
|
8083
|
+
'dp-cell--today': isToday && !isStart && !isEnd,
|
|
8084
|
+
'dp-cell--selected': isStart || isEnd,
|
|
8085
|
+
'dp-cell--range-start': isStart,
|
|
8086
|
+
'dp-cell--range-end': isEnd,
|
|
8087
|
+
'dp-cell--in-range': inRange,
|
|
8088
|
+
}, type: "button", onClick: () => this.selectDate(iso), onMouseEnter: () => {
|
|
8089
|
+
if (this.start && !this.end)
|
|
8090
|
+
this.hoverDate = iso;
|
|
8091
|
+
}, onMouseLeave: () => this.hoverDate = '' }, day));
|
|
8092
|
+
})), this.showWarning && (hAsync("div", { class: "warning-box" }, hAsync("span", { class: "warning-message" }, "Solo puedes filtrar en un rango m\u00E1ximo de ", this.maxDaysRange, " d\u00EDas.")))), hAsync("div", { class: "dpr-divider" }), hAsync("div", { class: "dpr-shortcuts" }, this.shortcuts.map((s, i) => (hAsync("button", { key: i, class: { 'shortcut-btn': true, 'shortcut-btn--active': this.activeRange === i }, onClick: () => this.selectShortcut(i), type: "button" }, s.label))))))));
|
|
7986
8093
|
}
|
|
7987
8094
|
static get watchers() { return {
|
|
7988
8095
|
"startDate": [{
|
|
@@ -8004,12 +8111,17 @@ class DropiDatePickerRange {
|
|
|
8004
8111
|
"loading": [4],
|
|
8005
8112
|
"maxDaysRange": [2, "max-days-range"],
|
|
8006
8113
|
"hideTodayRangeShortcut": [4, "hide-today-range-shortcut"],
|
|
8114
|
+
"disabled": [4],
|
|
8007
8115
|
"start": [32],
|
|
8008
8116
|
"end": [32],
|
|
8009
8117
|
"activeRange": [32],
|
|
8010
|
-
"showWarning": [32]
|
|
8118
|
+
"showWarning": [32],
|
|
8119
|
+
"open": [32],
|
|
8120
|
+
"viewYear": [32],
|
|
8121
|
+
"viewMonth": [32],
|
|
8122
|
+
"hoverDate": [32]
|
|
8011
8123
|
},
|
|
8012
|
-
"$listeners$":
|
|
8124
|
+
"$listeners$": [[4, "click", "handleDocClick"]],
|
|
8013
8125
|
"$lazyBundleId$": "-",
|
|
8014
8126
|
"$attrsToReflect$": []
|
|
8015
8127
|
}; }
|
package/hydrate/index.mjs
CHANGED
|
@@ -7594,11 +7594,11 @@ class DropiCountrySelector {
|
|
|
7594
7594
|
|
|
7595
7595
|
const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xxs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-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}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-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}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 8px);left:0;width:320px;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;padding:var(--Size-4, 16px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px)}.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:8px;column-gap:4px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:8px 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:all 0.2s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;border-radius:0;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:-2px;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-2px;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}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xxs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #69738c)}.dp-footer__today{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Orange-orange-50, #fef5ec)}`;
|
|
7596
7596
|
|
|
7597
|
-
const MONTHS_ES = [
|
|
7597
|
+
const MONTHS_ES$1 = [
|
|
7598
7598
|
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
|
7599
7599
|
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
|
|
7600
7600
|
];
|
|
7601
|
-
const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
|
|
7601
|
+
const DAYS_ES$1 = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
|
|
7602
7602
|
/**
|
|
7603
7603
|
* @component dropi-date-picker
|
|
7604
7604
|
* Calendar date picker with optional date range mode.
|
|
@@ -7797,7 +7797,7 @@ class DropiDatePicker {
|
|
|
7797
7797
|
'dp-trigger--disabled': this.disabled,
|
|
7798
7798
|
'dp-trigger--invalid': this.isInvalid,
|
|
7799
7799
|
'dp-trigger--loading': this.loading
|
|
7800
|
-
}, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, hAsync("dropi-icon", { key: '1044cef59317f88cc472d2a466a6937a0c4d58f7', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '6a7c5687cd06b9b2f42c256bc03ff0f412ca5573', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '4be1fc67ed6f9ffb5a5d936e3e8d8330bb91fb0b', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '5ad107e256d62a46b57e4bd1bebead70ecc8e46c', class: "dp-popup" }, hAsync("div", { key: 'e3d51afbd24df88867777e43c9bd63dd41c3f542', class: "dp-nav" }, hAsync("button", { key: '8819f79389c1d50ec639f719228aab88be4d0335', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: 'a17004ad24ce40590474d91227a826f46edf50ba', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: 'e91c8a46b963a1e7f0d01c56610c2e4bb6fa3d39', class: "dp-nav__title" }, hAsync("span", { key: '214a575cbd83e8c3bafe64ffbd93e914119b09aa' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: '1f71a83e7110bf8a91f7b5e14e0400b09ba28e1a' }, this.viewYear)), hAsync("button", { key: '21dbc0fdaabc423bd864bfb33ba314b72ca62d48', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: 'f248e65855555878afdbda7d1ba9a802d9eae4d5', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: '4fb29792028bf2132ea78a105c7694cf3806ff05', class: "dp-grid" }, DAYS_ES.map(d => (hAsync("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
|
|
7800
|
+
}, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, hAsync("dropi-icon", { key: '1044cef59317f88cc472d2a466a6937a0c4d58f7', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '6a7c5687cd06b9b2f42c256bc03ff0f412ca5573', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '4be1fc67ed6f9ffb5a5d936e3e8d8330bb91fb0b', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '5ad107e256d62a46b57e4bd1bebead70ecc8e46c', class: "dp-popup" }, hAsync("div", { key: 'e3d51afbd24df88867777e43c9bd63dd41c3f542', class: "dp-nav" }, hAsync("button", { key: '8819f79389c1d50ec639f719228aab88be4d0335', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: 'a17004ad24ce40590474d91227a826f46edf50ba', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: 'e91c8a46b963a1e7f0d01c56610c2e4bb6fa3d39', class: "dp-nav__title" }, hAsync("span", { key: '214a575cbd83e8c3bafe64ffbd93e914119b09aa' }, MONTHS_ES$1[this.viewMonth]), hAsync("span", { key: '1f71a83e7110bf8a91f7b5e14e0400b09ba28e1a' }, this.viewYear)), hAsync("button", { key: '21dbc0fdaabc423bd864bfb33ba314b72ca62d48', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: 'f248e65855555878afdbda7d1ba9a802d9eae4d5', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: '4fb29792028bf2132ea78a105c7694cf3806ff05', class: "dp-grid" }, DAYS_ES$1.map(d => (hAsync("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
|
|
7801
7801
|
const isSelected = this.selectionMode !== 'range'
|
|
7802
7802
|
? iso === this.selectedDate
|
|
7803
7803
|
: iso === this.startDate || iso === this.endDate;
|
|
@@ -7876,14 +7876,19 @@ class DropiDatePicker {
|
|
|
7876
7876
|
}; }
|
|
7877
7877
|
}
|
|
7878
7878
|
|
|
7879
|
-
const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;
|
|
7879
|
+
const dropiDatePickerRangeCss = () => `: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}`;
|
|
7880
7880
|
|
|
7881
|
+
const MONTHS_ES = [
|
|
7882
|
+
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
|
7883
|
+
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
|
|
7884
|
+
];
|
|
7885
|
+
const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
|
|
7881
7886
|
/**
|
|
7882
7887
|
* @component dropi-date-picker-range
|
|
7883
|
-
* Date range picker with
|
|
7888
|
+
* Date range picker with calendar popup and shortcut panel.
|
|
7884
7889
|
*
|
|
7885
7890
|
* @example
|
|
7886
|
-
* <dropi-date-picker-range
|
|
7891
|
+
* <dropi-date-picker-range></dropi-date-picker-range>
|
|
7887
7892
|
*/
|
|
7888
7893
|
class DropiDatePickerRange {
|
|
7889
7894
|
constructor(hostRef) {
|
|
@@ -7899,13 +7904,15 @@ class DropiDatePickerRange {
|
|
|
7899
7904
|
/** Show "Rango de fechas" label */
|
|
7900
7905
|
showLabel = true;
|
|
7901
7906
|
/** Input placeholder */
|
|
7902
|
-
placeholder = '';
|
|
7907
|
+
placeholder = 'DD/MM/YYYY – DD/MM/YYYY';
|
|
7903
7908
|
/** Show loading skeleton */
|
|
7904
7909
|
loading = false;
|
|
7905
7910
|
/** Max allowed range in days (0 = unlimited) */
|
|
7906
7911
|
maxDaysRange = 0;
|
|
7907
7912
|
/** Hide "Hoy" shortcut */
|
|
7908
7913
|
hideTodayRangeShortcut = false;
|
|
7914
|
+
/** Disabled state */
|
|
7915
|
+
disabled = false;
|
|
7909
7916
|
/** Emitted when start date changes */
|
|
7910
7917
|
startDateChange;
|
|
7911
7918
|
/** Emitted when end date changes */
|
|
@@ -7916,8 +7923,18 @@ class DropiDatePickerRange {
|
|
|
7916
7923
|
end = '';
|
|
7917
7924
|
activeRange = -1;
|
|
7918
7925
|
showWarning = false;
|
|
7926
|
+
open = false;
|
|
7927
|
+
viewYear = new Date().getFullYear();
|
|
7928
|
+
viewMonth = new Date().getMonth();
|
|
7929
|
+
hoverDate = '';
|
|
7930
|
+
get el() { return getElement(this); }
|
|
7919
7931
|
onStartPropChange(val) { this.start = val; }
|
|
7920
7932
|
onEndPropChange(val) { this.end = val; }
|
|
7933
|
+
handleDocClick(e) {
|
|
7934
|
+
if (this.open && !e.composedPath().includes(this.el)) {
|
|
7935
|
+
this.open = false;
|
|
7936
|
+
}
|
|
7937
|
+
}
|
|
7921
7938
|
componentWillLoad() {
|
|
7922
7939
|
this.start = this.startDate;
|
|
7923
7940
|
this.end = this.endDate;
|
|
@@ -7940,47 +7957,137 @@ class DropiDatePickerRange {
|
|
|
7940
7957
|
];
|
|
7941
7958
|
return this.hideTodayRangeShortcut ? all.slice(1) : all;
|
|
7942
7959
|
}
|
|
7960
|
+
get displayValue() {
|
|
7961
|
+
const fmt = (s) => s.split('-').reverse().join('/');
|
|
7962
|
+
if (this.start && this.end)
|
|
7963
|
+
return `${fmt(this.start)} – ${fmt(this.end)}`;
|
|
7964
|
+
if (this.start)
|
|
7965
|
+
return fmt(this.start);
|
|
7966
|
+
return '';
|
|
7967
|
+
}
|
|
7968
|
+
toggleOpen() {
|
|
7969
|
+
if (this.disabled)
|
|
7970
|
+
return;
|
|
7971
|
+
if (!this.open && this.start) {
|
|
7972
|
+
const d = new Date(this.start);
|
|
7973
|
+
this.viewYear = d.getFullYear();
|
|
7974
|
+
this.viewMonth = d.getMonth();
|
|
7975
|
+
}
|
|
7976
|
+
this.open = !this.open;
|
|
7977
|
+
}
|
|
7978
|
+
prevMonth() {
|
|
7979
|
+
if (this.viewMonth === 0) {
|
|
7980
|
+
this.viewMonth = 11;
|
|
7981
|
+
this.viewYear--;
|
|
7982
|
+
}
|
|
7983
|
+
else
|
|
7984
|
+
this.viewMonth--;
|
|
7985
|
+
}
|
|
7986
|
+
nextMonth() {
|
|
7987
|
+
if (this.viewMonth === 11) {
|
|
7988
|
+
this.viewMonth = 0;
|
|
7989
|
+
this.viewYear++;
|
|
7990
|
+
}
|
|
7991
|
+
else
|
|
7992
|
+
this.viewMonth++;
|
|
7993
|
+
}
|
|
7994
|
+
toISO(year, month, day) {
|
|
7995
|
+
return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
|
7996
|
+
}
|
|
7997
|
+
isInRange(iso) {
|
|
7998
|
+
const end = this.end || this.hoverDate;
|
|
7999
|
+
if (!this.start || !end)
|
|
8000
|
+
return false;
|
|
8001
|
+
const [s, e] = this.start <= end ? [this.start, end] : [end, this.start];
|
|
8002
|
+
return iso > s && iso < e;
|
|
8003
|
+
}
|
|
8004
|
+
selectDate(iso) {
|
|
8005
|
+
if (!this.start || (this.start && this.end)) {
|
|
8006
|
+
this.start = iso;
|
|
8007
|
+
this.end = '';
|
|
8008
|
+
this.activeRange = -1;
|
|
8009
|
+
this.showWarning = false;
|
|
8010
|
+
}
|
|
8011
|
+
else {
|
|
8012
|
+
if (iso < this.start) {
|
|
8013
|
+
this.end = this.start;
|
|
8014
|
+
this.start = iso;
|
|
8015
|
+
}
|
|
8016
|
+
else {
|
|
8017
|
+
this.end = iso;
|
|
8018
|
+
}
|
|
8019
|
+
this.activeRange = -1;
|
|
8020
|
+
if (this.maxDaysRange > 0) {
|
|
8021
|
+
const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;
|
|
8022
|
+
this.showWarning = diff > this.maxDaysRange;
|
|
8023
|
+
if (this.showWarning)
|
|
8024
|
+
return;
|
|
8025
|
+
}
|
|
8026
|
+
this.open = false;
|
|
8027
|
+
this.emit();
|
|
8028
|
+
}
|
|
8029
|
+
}
|
|
7943
8030
|
selectShortcut(idx) {
|
|
7944
8031
|
const s = this.shortcuts[idx];
|
|
7945
8032
|
this.start = s.start;
|
|
7946
8033
|
this.end = s.end;
|
|
7947
8034
|
this.activeRange = idx;
|
|
7948
8035
|
this.showWarning = false;
|
|
8036
|
+
this.open = false;
|
|
7949
8037
|
this.emit();
|
|
7950
8038
|
}
|
|
7951
|
-
onStartChange(e) {
|
|
7952
|
-
this.start = e.target.value;
|
|
7953
|
-
this.activeRange = -1;
|
|
7954
|
-
this.checkRange();
|
|
7955
|
-
if (this.start && this.end)
|
|
7956
|
-
this.emit();
|
|
7957
|
-
}
|
|
7958
|
-
onEndChange(e) {
|
|
7959
|
-
this.end = e.target.value;
|
|
7960
|
-
this.activeRange = -1;
|
|
7961
|
-
this.checkRange();
|
|
7962
|
-
if (this.start && this.end)
|
|
7963
|
-
this.emit();
|
|
7964
|
-
}
|
|
7965
|
-
checkRange() {
|
|
7966
|
-
if (this.start && this.end && this.maxDaysRange > 0) {
|
|
7967
|
-
const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;
|
|
7968
|
-
this.showWarning = diff > this.maxDaysRange;
|
|
7969
|
-
}
|
|
7970
|
-
else {
|
|
7971
|
-
this.showWarning = false;
|
|
7972
|
-
}
|
|
7973
|
-
}
|
|
7974
8039
|
emit() {
|
|
7975
8040
|
this.startDateChange.emit(this.start);
|
|
7976
8041
|
this.endDateChange.emit(this.end);
|
|
7977
8042
|
this.dropiRangeChange.emit({ start: this.start, end: this.end });
|
|
7978
8043
|
}
|
|
8044
|
+
buildDays() {
|
|
8045
|
+
const year = this.viewYear;
|
|
8046
|
+
const month = this.viewMonth;
|
|
8047
|
+
const firstDay = new Date(year, month, 1).getDay();
|
|
8048
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
8049
|
+
const daysInPrevMonth = new Date(year, month, 0).getDate();
|
|
8050
|
+
const cells = [];
|
|
8051
|
+
for (let i = firstDay - 1; i >= 0; i--) {
|
|
8052
|
+
const d = daysInPrevMonth - i;
|
|
8053
|
+
const m = month === 0 ? 11 : month - 1;
|
|
8054
|
+
const y = month === 0 ? year - 1 : year;
|
|
8055
|
+
cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
|
|
8056
|
+
}
|
|
8057
|
+
for (let d = 1; d <= daysInMonth; d++) {
|
|
8058
|
+
cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });
|
|
8059
|
+
}
|
|
8060
|
+
const remaining = 42 - cells.length;
|
|
8061
|
+
for (let d = 1; d <= remaining; d++) {
|
|
8062
|
+
const m = month === 11 ? 0 : month + 1;
|
|
8063
|
+
const y = month === 11 ? year + 1 : year;
|
|
8064
|
+
cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
|
|
8065
|
+
}
|
|
8066
|
+
return cells;
|
|
8067
|
+
}
|
|
7979
8068
|
render() {
|
|
7980
|
-
if (this.loading)
|
|
8069
|
+
if (this.loading)
|
|
7981
8070
|
return hAsync("div", { class: "skeleton" });
|
|
7982
|
-
|
|
7983
|
-
|
|
8071
|
+
const days = this.buildDays();
|
|
8072
|
+
const today = this.today;
|
|
8073
|
+
return (hAsync("div", { class: "dpr-wrap" }, this.showLabel && hAsync("label", { class: "dpr-label" }, "Rango de fechas"), hAsync("button", { class: { 'dpr-trigger': true, 'dpr-trigger--disabled': this.disabled }, onClick: () => this.toggleOpen(), disabled: this.disabled, type: "button" }, hAsync("dropi-icon", { name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { class: { 'dpr-trigger__value': true, 'dpr-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { class: "dpr-popup" }, hAsync("div", { class: "dpr-calendar" }, hAsync("div", { class: "dp-nav" }, hAsync("button", { class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { class: "dp-nav__title" }, hAsync("span", null, MONTHS_ES[this.viewMonth]), hAsync("span", null, this.viewYear)), hAsync("button", { class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { class: "dp-grid" }, DAYS_ES.map(d => hAsync("div", { class: "dp-day-header" }, d)), days.map(({ iso, day, currentMonth }) => {
|
|
8074
|
+
const isStart = iso === this.start;
|
|
8075
|
+
const isEnd = iso === this.end;
|
|
8076
|
+
const inRange = this.isInRange(iso);
|
|
8077
|
+
const isToday = iso === today;
|
|
8078
|
+
return (hAsync("button", { class: {
|
|
8079
|
+
'dp-cell': true,
|
|
8080
|
+
'dp-cell--other-month': !currentMonth,
|
|
8081
|
+
'dp-cell--today': isToday && !isStart && !isEnd,
|
|
8082
|
+
'dp-cell--selected': isStart || isEnd,
|
|
8083
|
+
'dp-cell--range-start': isStart,
|
|
8084
|
+
'dp-cell--range-end': isEnd,
|
|
8085
|
+
'dp-cell--in-range': inRange,
|
|
8086
|
+
}, type: "button", onClick: () => this.selectDate(iso), onMouseEnter: () => {
|
|
8087
|
+
if (this.start && !this.end)
|
|
8088
|
+
this.hoverDate = iso;
|
|
8089
|
+
}, onMouseLeave: () => this.hoverDate = '' }, day));
|
|
8090
|
+
})), this.showWarning && (hAsync("div", { class: "warning-box" }, hAsync("span", { class: "warning-message" }, "Solo puedes filtrar en un rango m\u00E1ximo de ", this.maxDaysRange, " d\u00EDas.")))), hAsync("div", { class: "dpr-divider" }), hAsync("div", { class: "dpr-shortcuts" }, this.shortcuts.map((s, i) => (hAsync("button", { key: i, class: { 'shortcut-btn': true, 'shortcut-btn--active': this.activeRange === i }, onClick: () => this.selectShortcut(i), type: "button" }, s.label))))))));
|
|
7984
8091
|
}
|
|
7985
8092
|
static get watchers() { return {
|
|
7986
8093
|
"startDate": [{
|
|
@@ -8002,12 +8109,17 @@ class DropiDatePickerRange {
|
|
|
8002
8109
|
"loading": [4],
|
|
8003
8110
|
"maxDaysRange": [2, "max-days-range"],
|
|
8004
8111
|
"hideTodayRangeShortcut": [4, "hide-today-range-shortcut"],
|
|
8112
|
+
"disabled": [4],
|
|
8005
8113
|
"start": [32],
|
|
8006
8114
|
"end": [32],
|
|
8007
8115
|
"activeRange": [32],
|
|
8008
|
-
"showWarning": [32]
|
|
8116
|
+
"showWarning": [32],
|
|
8117
|
+
"open": [32],
|
|
8118
|
+
"viewYear": [32],
|
|
8119
|
+
"viewMonth": [32],
|
|
8120
|
+
"hoverDate": [32]
|
|
8009
8121
|
},
|
|
8010
|
-
"$listeners$":
|
|
8122
|
+
"$listeners$": [[4, "click", "handleDocClick"]],
|
|
8011
8123
|
"$lazyBundleId$": "-",
|
|
8012
8124
|
"$attrsToReflect$": []
|
|
8013
8125
|
}; }
|