reke-ui 0.1.2 → 0.2.0

package/dist/components/reke-date-range/reke-date-range.js

@@ -1,214 +1,234 @@
-import { html as _, nothing as y } from "lit";
-import { property as c, state as u, customElement as w } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { RekeElement as D } from "../../shared/base-element.js";
-import { styles as S } from "./reke-date-range.styles.js";
-var M = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? $(t, i) : t, n = e.length - 1, h; n >= 0; n--)
-    (h = e[n]) && (a = (s ? h(t, i, a) : h(a)) || a);
-  return s && a && M(t, i, a), a;
-};
-const k = [
-  "Enero",
-  "Febrero",
-  "Marzo",
-  "Abril",
-  "Mayo",
-  "Junio",
-  "Julio",
-  "Agosto",
-  "Septiembre",
-  "Octubre",
-  "Noviembre",
-  "Diciembre"
-], x = ["Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"];
-function l(e) {
-  if (!e) return null;
-  const [t, i, s] = e.split("-").map(Number);
-  return !t || !i || !s ? null : new Date(t, i - 1, s);
-}
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { styles as n } from "./reke-date-range.styles.js";
+import { html as r, nothing as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region src/components/reke-date-range/reke-date-range.ts
+var l = [
+	"Enero",
+	"Febrero",
+	"Marzo",
+	"Abril",
+	"Mayo",
+	"Junio",
+	"Julio",
+	"Agosto",
+	"Septiembre",
+	"Octubre",
+	"Noviembre",
+	"Diciembre"
+], u = [
+	"Lu",
+	"Ma",
+	"Mi",
+	"Ju",
+	"Vi",
+	"Sa",
+	"Do"
+];
 function d(e) {
-  const t = e.getFullYear(), i = String(e.getMonth() + 1).padStart(2, "0"), s = String(e.getDate()).padStart(2, "0");
-  return `${t}-${i}-${s}`;
+	if (!e) return null;
+	let [t, n, r] = e.split("-").map(Number);
+	return !t || !n || !r ? null : new Date(t, n - 1, r);
 }
-function m(e) {
-  const t = String(e.getDate()).padStart(2, "0"), i = String(e.getMonth() + 1).padStart(2, "0");
-  return `${t}/${i}/${e.getFullYear()}`;
+function f(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-function p(e, t) {
-  return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+function p(e) {
+	return `${String(e.getDate()).padStart(2, "0")}/${String(e.getMonth() + 1).padStart(2, "0")}/${e.getFullYear()}`;
 }
-function Y(e, t) {
-  let s = new Date(e, t, 1).getDay() - 1;
-  s < 0 && (s = 6);
-  const a = new Date(e, t, 1 - s), n = [];
-  for (let h = 0; h < 42; h++) {
-    const g = new Date(a.getFullYear(), a.getMonth(), a.getDate() + h);
-    n.push({ date: g, day: g.getDate(), otherMonth: g.getMonth() !== t });
-  }
-  return n;
+function m(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
-let r = class extends D {
-  constructor() {
-    super(...arguments), this.mode = "range", this.value = "", this.from = "", this.to = "", this.label = "", this.placeholder = "", this.min = "", this.max = "", this.disabled = !1, this.error = !1, this._open = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._rangeSelecting = !1, this._boundOutsideClick = this._onOutsideClick.bind(this), this._onKeyDown = (e) => {
-      if (e.key === "Escape" && this._open) {
-        if (this._rangeSelecting && this.from) {
-          this.to = this.from, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
-          return;
-        }
-        this._open = !1, this._rangeSelecting = !1;
-      }
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._boundOutsideClick, !0), document.addEventListener("keydown", this._onKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._boundOutsideClick, !0), document.removeEventListener("keydown", this._onKeyDown);
-  }
-  _onOutsideClick(e) {
-    if (!this._open) return;
-    if (!e.composedPath().includes(this)) {
-      if (this._rangeSelecting && this.from) {
-        this.to = this.from, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
-        return;
-      }
-      this._open = !1, this._rangeSelecting = !1;
-    }
-  }
-  _toggleOpen() {
-    if (!this.disabled)
-      if (this._open = !this._open, this._open)
-        this._syncView();
-      else {
-        if (this._rangeSelecting && this.from) {
-          this.to = this.from, this._rangeSelecting = !1, this.emit("reke-change", { from: this.from, to: this.to });
-          return;
-        }
-        this._rangeSelecting = !1;
-      }
-  }
-  /** Sync calendar view to the current selection. */
-  _syncView() {
-    let e = null;
-    if (this.mode === "single" ? e = l(this.value) : e = l(this.from), e)
-      this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth();
-    else {
-      const t = /* @__PURE__ */ new Date();
-      this._viewYear = t.getFullYear(), this._viewMonth = t.getMonth();
-    }
-  }
-  _prevYear() {
-    this._viewYear--;
-  }
-  _nextYear() {
-    this._viewYear++;
-  }
-  _prevMonth() {
-    this._viewMonth === 0 ? (this._viewMonth = 11, this._viewYear--) : this._viewMonth--;
-  }
-  _nextMonth() {
-    this._viewMonth === 11 ? (this._viewMonth = 0, this._viewYear++) : this._viewMonth++;
-  }
-  _isDisabledDate(e) {
-    const t = l(this.min), i = l(this.max);
-    return !!(t && e < t || i && e > i);
-  }
-  _selectDay(e) {
-    if (!this._isDisabledDate(e.date)) {
-      if (this.mode === "single") {
-        this.value = d(e.date), this._open = !1, this.emit("reke-change", { value: this.value });
-        return;
-      }
-      if (!this._rangeSelecting)
-        this.from = d(e.date), this.to = "", this._rangeSelecting = !0;
-      else {
-        let t = l(this.from), i = e.date;
-        i < t && ([t, i] = [i, t]), this.from = d(t), this.to = d(i), this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
-      }
-    }
-  }
-  _goToday() {
-    const e = /* @__PURE__ */ new Date(), t = d(e);
-    if (this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth(), this.mode === "single")
-      this.value = t, this._open = !1, this.emit("reke-change", { value: this.value });
-    else if (this._rangeSelecting && this.from) {
-      let i = l(this.from), s = e;
-      s < i && ([i, s] = [s, i]), this.from = d(i), this.to = d(s), this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
-    } else
-      this.from = t, this.to = t, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
-  }
-  _clear() {
-    this.mode === "single" ? (this.value = "", this.emit("reke-change", { value: "" })) : (this.from = "", this.to = "", this._rangeSelecting = !1, this.emit("reke-change", { from: "", to: "" })), this._open = !1;
-  }
-  _getDayClasses(e) {
-    const t = /* @__PURE__ */ new Date(), i = p(e.date, t), s = this._isDisabledDate(e.date);
-    if (this.mode === "single") {
-      const v = l(this.value);
-      return {
-        calendar__day: !0,
-        "calendar__day--other": e.otherMonth,
-        "calendar__day--today": i,
-        "calendar__day--selected": !!v && p(e.date, v),
-        "calendar__day--disabled": s
-      };
-    }
-    const a = l(this.from), n = l(this.to), h = !!a && p(e.date, a), g = !!n && p(e.date, n), b = !!a && !!n && e.date > a && e.date < n;
-    return {
-      calendar__day: !0,
-      "calendar__day--other": e.otherMonth,
-      "calendar__day--today": i && !h && !g,
-      "calendar__day--selected": (this.mode === "range", !1),
-      "calendar__day--in-range": b,
-      "calendar__day--range-start": h,
-      "calendar__day--range-end": g,
-      "calendar__day--disabled": s
-    };
-  }
-  _getDisplayText() {
-    if (this.mode === "single") {
-      const a = l(this.value);
-      return a ? m(a) : this.placeholder || "Seleccionar fecha";
-    }
-    const e = l(this.from), t = l(this.to);
-    if (!e && !t)
-      return this.placeholder || "Seleccionar rango";
-    const i = e ? m(e) : "—", s = t ? m(t) : "—";
-    return _`${i} <span class="trigger__separator">→</span> ${s}`;
-  }
-  _hasValue() {
-    return this.mode === "single" ? !!this.value : !!(this.from || this.to);
-  }
-  _renderCalendarIcon() {
-    return _`
+function h(e, t) {
+	let n = new Date(e, t, 1).getDay() - 1;
+	n < 0 && (n = 6);
+	let r = new Date(e, t, 1 - n), i = [];
+	for (let e = 0; e < 42; e++) {
+		let n = new Date(r.getFullYear(), r.getMonth(), r.getDate() + e);
+		i.push({
+			date: n,
+			day: n.getDate(),
+			otherMonth: n.getMonth() !== t
+		});
+	}
+	return i;
+}
+var g = class extends e {
+	constructor(...e) {
+		super(...e), this.mode = "range", this.value = "", this.from = "", this.to = "", this.label = "", this.placeholder = "", this.min = "", this.max = "", this.disabled = !1, this.error = !1, this._open = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._rangeSelecting = !1, this._boundOutsideClick = this._onOutsideClick.bind(this), this._onKeyDown = (e) => {
+			if (e.key === "Escape" && this._open) {
+				if (this._rangeSelecting && this.from) {
+					this.to = this.from, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", {
+						from: this.from,
+						to: this.to
+					});
+					return;
+				}
+				this._open = !1, this._rangeSelecting = !1;
+			}
+		};
+	}
+	static {
+		this.styles = n;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._boundOutsideClick, !0), document.addEventListener("keydown", this._onKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this._boundOutsideClick, !0), document.removeEventListener("keydown", this._onKeyDown);
+	}
+	_onOutsideClick(e) {
+		if (this._open && !e.composedPath().includes(this)) {
+			if (this._rangeSelecting && this.from) {
+				this.to = this.from, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", {
+					from: this.from,
+					to: this.to
+				});
+				return;
+			}
+			this._open = !1, this._rangeSelecting = !1;
+		}
+	}
+	_toggleOpen() {
+		if (!this.disabled) if (this._open = !this._open, this._open) this._syncView();
+		else {
+			if (this._rangeSelecting && this.from) {
+				this.to = this.from, this._rangeSelecting = !1, this.emit("reke-change", {
+					from: this.from,
+					to: this.to
+				});
+				return;
+			}
+			this._rangeSelecting = !1;
+		}
+	}
+	_syncView() {
+		let e = null;
+		if (e = this.mode === "single" ? d(this.value) : d(this.from), e) this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth();
+		else {
+			let e = /* @__PURE__ */ new Date();
+			this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth();
+		}
+	}
+	_prevYear() {
+		this._viewYear--;
+	}
+	_nextYear() {
+		this._viewYear++;
+	}
+	_prevMonth() {
+		this._viewMonth === 0 ? (this._viewMonth = 11, this._viewYear--) : this._viewMonth--;
+	}
+	_nextMonth() {
+		this._viewMonth === 11 ? (this._viewMonth = 0, this._viewYear++) : this._viewMonth++;
+	}
+	_isDisabledDate(e) {
+		let t = d(this.min), n = d(this.max);
+		return !!(t && e < t || n && e > n);
+	}
+	_selectDay(e) {
+		if (!this._isDisabledDate(e.date)) {
+			if (this.mode === "single") {
+				this.value = f(e.date), this._open = !1, this.emit("reke-change", { value: this.value });
+				return;
+			}
+			if (!this._rangeSelecting) this.from = f(e.date), this.to = "", this._rangeSelecting = !0;
+			else {
+				let t = d(this.from), n = e.date;
+				n < t && ([t, n] = [n, t]), this.from = f(t), this.to = f(n), this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", {
+					from: this.from,
+					to: this.to
+				});
+			}
+		}
+	}
+	_goToday() {
+		let e = /* @__PURE__ */ new Date(), t = f(e);
+		if (this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth(), this.mode === "single") this.value = t, this._open = !1, this.emit("reke-change", { value: this.value });
+		else if (this._rangeSelecting && this.from) {
+			let t = d(this.from), n = e;
+			n < t && ([t, n] = [n, t]), this.from = f(t), this.to = f(n), this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", {
+				from: this.from,
+				to: this.to
+			});
+		} else this.from = t, this.to = t, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", {
+			from: this.from,
+			to: this.to
+		});
+	}
+	_clear() {
+		this.mode === "single" ? (this.value = "", this.emit("reke-change", { value: "" })) : (this.from = "", this.to = "", this._rangeSelecting = !1, this.emit("reke-change", {
+			from: "",
+			to: ""
+		})), this._open = !1;
+	}
+	_getDayClasses(e) {
+		let t = /* @__PURE__ */ new Date(), n = m(e.date, t), r = this._isDisabledDate(e.date);
+		if (this.mode === "single") {
+			let t = d(this.value);
+			return {
+				calendar__day: !0,
+				"calendar__day--other": e.otherMonth,
+				"calendar__day--today": n,
+				"calendar__day--selected": !!t && m(e.date, t),
+				"calendar__day--disabled": r
+			};
+		}
+		let i = d(this.from), a = d(this.to), o = !!i && m(e.date, i), s = !!a && m(e.date, a), c = !!i && !!a && e.date > i && e.date < a;
+		return {
+			calendar__day: !0,
+			"calendar__day--other": e.otherMonth,
+			"calendar__day--today": n && !o && !s,
+			"calendar__day--selected": !1,
+			"calendar__day--in-range": c,
+			"calendar__day--range-start": o,
+			"calendar__day--range-end": s,
+			"calendar__day--disabled": r
+		};
+	}
+	_getDisplayText() {
+		if (this.mode === "single") {
+			let e = d(this.value);
+			return e ? p(e) : this.placeholder || "Seleccionar fecha";
+		}
+		let e = d(this.from), t = d(this.to);
+		return !e && !t ? this.placeholder || "Seleccionar rango" : r`${e ? p(e) : "—"} <span class="trigger__separator">→</span> ${t ? p(t) : "—"}`;
+	}
+	_hasValue() {
+		return this.mode === "single" ? !!this.value : !!(this.from || this.to);
+	}
+	_renderCalendarIcon() {
+		return r`
       <span class="trigger__icon" aria-hidden="true">
         <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
       </span>
     `;
-  }
-  _renderChevron() {
-    return _`
+	}
+	_renderChevron() {
+		return r`
       <span class="trigger__chevron" aria-hidden="true">
         <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
       </span>
     `;
-  }
-  render() {
-    const e = Y(this._viewYear, this._viewMonth), t = !this._hasValue(), i = `${k[this._viewMonth]} ${this._viewYear}`, s = {
-      trigger: !0,
-      "trigger--open": this._open,
-      "trigger--error": this.error,
-      "trigger--placeholder": t
-    }, a = {
-      label: !0,
-      "label--active": this._open
-    };
-    return _`
-      ${this.label ? _`<span class=${f(a)}>${this.label}</span>` : y}
+	}
+	render() {
+		let e = h(this._viewYear, this._viewMonth), t = !this._hasValue(), n = `${l[this._viewMonth]} ${this._viewYear}`, a = {
+			trigger: !0,
+			"trigger--open": this._open,
+			"trigger--error": this.error,
+			"trigger--placeholder": t
+		}, o = {
+			label: !0,
+			"label--active": this._open
+		};
+		return r`
+      ${this.label ? r`<span class=${c(o)}>${this.label}</span>` : i}
 
       <button
         part="trigger"
-        class=${f(s)}
+        class=${c(a)}
         type="button"
         @click=${this._toggleOpen}
         aria-haspopup="dialog"
@@ -220,10 +240,10 @@ let r = class extends D {
         ${this._renderChevron()}
       </button>
 
-      ${this._open ? _`
+      ${this._open ? r`
             <div part="calendar" class="calendar" role="dialog" aria-label="Calendar">
               <div class="calendar__header">
-                <span class="calendar__title">${i}</span>
+                <span class="calendar__title">${n}</span>
                 <div class="calendar__nav">
                   <button
                     class="calendar__nav-btn"
@@ -261,25 +281,25 @@ let r = class extends D {
               </div>
 
               <div class="calendar__weekdays">
-                ${x.map(
-      (n) => _`<span class="calendar__weekday">${n}</span>`
-    )}
+                ${u.map((e) => r`<span class="calendar__weekday">${e}</span>`)}
               </div>
 
               <div class="calendar__grid">
-                ${e.map(
-      (n) => _`
+                ${e.map((e) => r`
                     <button
-                      class=${f(this._getDayClasses(n))}
+                      class=${c(this._getDayClasses(e))}
                       type="button"
-                      @click=${() => this._selectDay(n)}
-                      ?disabled=${this._isDisabledDate(n.date)}
-                      aria-label="${n.date.toLocaleDateString("es-ES", { day: "numeric", month: "long", year: "numeric" })}"
+                      @click=${() => this._selectDay(e)}
+                      ?disabled=${this._isDisabledDate(e.date)}
+                      aria-label="${e.date.toLocaleDateString("es-ES", {
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		})}"
                     >
-                      ${n.day}
+                      ${e.day}
                     </button>
-                  `
-    )}
+                  `)}
               </div>
 
               <div class="calendar__footer">
@@ -291,56 +311,16 @@ let r = class extends D {
                 </button>
               </div>
             </div>
-          ` : y}
+          ` : i}
     `;
-  }
-};
-r.styles = S;
-o([
-  c({ reflect: !0 })
-], r.prototype, "mode", 2);
-o([
-  c()
-], r.prototype, "value", 2);
-o([
-  c()
-], r.prototype, "from", 2);
-o([
-  c()
-], r.prototype, "to", 2);
-o([
-  c()
-], r.prototype, "label", 2);
-o([
-  c()
-], r.prototype, "placeholder", 2);
-o([
-  c()
-], r.prototype, "min", 2);
-o([
-  c()
-], r.prototype, "max", 2);
-o([
-  c({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-o([
-  c({ type: Boolean, reflect: !0 })
-], r.prototype, "error", 2);
-o([
-  u()
-], r.prototype, "_open", 2);
-o([
-  u()
-], r.prototype, "_viewYear", 2);
-o([
-  u()
-], r.prototype, "_viewMonth", 2);
-o([
-  u()
-], r.prototype, "_rangeSelecting", 2);
-r = o([
-  w("reke-date-range")
-], r);
-export {
-  r as RekeDateRange
+	}
 };
+t([o({ reflect: !0 })], g.prototype, "mode", void 0), t([o()], g.prototype, "value", void 0), t([o()], g.prototype, "from", void 0), t([o()], g.prototype, "to", void 0), t([o()], g.prototype, "label", void 0), t([o()], g.prototype, "placeholder", void 0), t([o()], g.prototype, "min", void 0), t([o()], g.prototype, "max", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "error", void 0), t([s()], g.prototype, "_open", void 0), t([s()], g.prototype, "_viewYear", void 0), t([s()], g.prototype, "_viewMonth", void 0), t([s()], g.prototype, "_rangeSelecting", void 0), g = t([a("reke-date-range")], g);
+//#endregion
+export { g as RekeDateRange };

package/dist/components/reke-date-range/reke-date-range.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-date-range.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-date-range/reke-date-range.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA4TlB,CAAC"}
+{"version":3,"file":"reke-date-range.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-date-range/reke-date-range.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA4UlB,CAAC"}