@lazhus/kg-ui 0.2.2

package/dist/components/kg-datepicker.js

@@ -0,0 +1,650 @@
+import { LitElement as k, css as $, html as g } from "lit";
+import { classMap as w } from "lit/directives/class-map.js";
+class b extends k {
+  static properties = {
+    value: { type: String, reflect: !0 },
+    open: { type: Boolean, reflect: !0 },
+    disabled: { type: Boolean, reflect: !0 },
+    placeholder: { type: String },
+    label: { type: String },
+    showTime: { type: Boolean },
+    mode: { type: String },
+    // 'date', 'month', 'year'
+    locale: { type: String },
+    min: { type: String },
+    max: { type: String },
+    _viewDate: { type: Object },
+    _selectedDate: { type: Object }
+  };
+  static styles = $`
+    :host {
+      display: inline-block;
+      width: 100%;
+      position: relative;
+      font-family: inherit;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    .datepicker-trigger {
+      width: 100%;
+    }
+
+    .datepicker-popup {
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      z-index: 1000;
+      background: var(--kg-bg);
+      border: 1px solid var(--kg-border);
+      border-radius: var(--kg-radius-lg);
+      box-shadow: var(--kg-shadow-lg);
+      padding: 1.25rem;
+      width: 300px;
+      display: none;
+      user-select: none;
+      animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .datepicker-popup.open {
+      display: block;
+    }
+
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* Calendar Styles */
+    .calendar-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+
+    .month-year {
+      display: flex;
+      gap: 4px;
+      font-weight: 700;
+      font-size: 1rem;
+      color: var(--kg-text);
+    }
+
+    .header-select {
+        background: transparent;
+        border: none;
+        color: inherit;
+        font-family: inherit;
+        font-weight: 700;
+        font-size: 0.95rem;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+        outline: none;
+        transition: background 0.2s;
+        -webkit-appearance: none;
+    }
+
+    .header-select:hover {
+        background: var(--kg-surface);
+    }
+
+    .nav-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 5px;
+      border-radius: 6px;
+      color: var(--kg-text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+    }
+
+    .nav-btn:hover {
+      background: var(--kg-surface);
+      color: var(--kg-text);
+    }
+
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 2px;
+    }
+
+    .weekday {
+      text-align: center;
+      font-size: 0.75rem;
+      font-weight: 700;
+      color: var(--kg-text-muted);
+      padding-bottom: 0.5rem;
+    }
+
+    .day {
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.875rem;
+      cursor: pointer;
+      border-radius: 8px;
+      transition: all 0.2s;
+      color: var(--kg-text);
+    }
+
+    .day:hover:not(.other-month):not(.selected) {
+      background: var(--kg-bg-secondary, rgba(0,0,0,0.05));
+      color: var(--kg-primary);
+      transform: scale(1.1);
+      z-index: 1;
+    }
+
+    .day.other-month {
+      color: var(--kg-text-muted);
+      opacity: 0.3;
+      cursor: default;
+    }
+
+    .day.selected {
+      background: var(--kg-primary);
+      color: white;
+      font-weight: 700;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+    }
+
+    .day.today {
+      box-shadow: 0 0 0 2px var(--kg-primary) inset;
+      color: var(--kg-primary);
+      font-weight: 700;
+    }
+
+    .day.today.selected {
+      color: white;
+      border-color: rgba(255, 255, 255, 0.4);
+    }
+
+    .day.focused {
+      background: var(--kg-surface);
+      box-shadow: 0 0 0 2px var(--kg-primary) inset;
+    }
+
+    .day.selected.focused {
+      background: var(--kg-primary);
+      box-shadow: 0 0 0 2px rgba(255,255,255,0.4) inset;
+    }
+    
+    .day.today.focused:not(.selected) {
+      background: var(--kg-surface);
+    }
+
+    /* Time Picker Styles */
+    .time-picker {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--kg-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .time-unit {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .time-select {
+        background: var(--kg-surface);
+        border: 1px solid var(--kg-border);
+        color: var(--kg-text);
+        padding: 6px 8px;
+        border-radius: 6px;
+        font-weight: 700;
+        outline: none;
+        cursor: pointer;
+    }
+
+    .time-separator {
+        font-weight: 700;
+        font-size: 1.25rem;
+        color: var(--kg-text-muted);
+    }
+
+    .day.disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+        pointer-events: none;
+        background: transparent;
+        color: var(--kg-text-muted);
+    }
+
+    /* Month/Year selector grids */
+    .selector-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+        margin-top: 0.5rem;
+    }
+
+    .selector-item {
+        padding: 10px 4px;
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        color: var(--kg-text);
+        transition: all 0.2s;
+        font-weight: 500;
+    }
+
+    .selector-item:hover {
+        background: var(--kg-bg-secondary, rgba(0,0,0,0.05));
+        color: var(--kg-primary);
+        transform: translateY(-1px);
+    }
+
+    .selector-item.selected {
+        background: var(--kg-primary);
+        color: white;
+        font-weight: 700;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+    }
+  `;
+  constructor() {
+    super(), this.open = !1, this.disabled = !1, this.mode = "date", this.locale = "tr-TR", this.placeholder = "Tarih seçiniz...", this.min = "", this.max = "", this._viewDate = /* @__PURE__ */ new Date(), this.value = "", this._handleOutsideClick = this._handleOutsideClick.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+  }
+  _handleOutsideClick(t) {
+    this.open && !t.composedPath().includes(this) && (this.open = !1);
+  }
+  togglePopup(t) {
+    t && t.stopPropagation(), !this.disabled && (this.open = !this.open);
+  }
+  _handleInputKeydown(t) {
+    ["Backspace", "Delete", "Tab", "Escape", "Enter", "ArrowLeft", "ArrowRight", "Home", "End"].includes(t.key) || (t.ctrlKey || t.metaKey) && ["a", "c", "v", "x"].includes(t.key.toLowerCase()) || /^\d$/.test(t.key) || t.preventDefault();
+  }
+  _getDateFormat() {
+    const t = new Date(2023, 11, 31), e = new Intl.DateTimeFormat(this.locale).formatToParts(t), n = e.filter((i) => i.type !== "literal").map((i) => i.type), r = e.find((i) => i.type === "literal");
+    let s = r ? r.value : ".";
+    return s.includes(".") ? s = "." : s.includes("/") ? s = "/" : s.includes("-") ? s = "-" : s = ".", { parts: n, separator: s };
+  }
+  _handleManualInput(t) {
+    let e = t.detail.value;
+    e = e.replace(/\D/g, "");
+    const { parts: n, separator: r } = this._getDateFormat(), s = n[0] === "year";
+    let i = "";
+    if (e.length > 0 && (s ? e.length <= 4 ? i = e : e.length <= 6 ? i = `${e.slice(0, 4)}${r}${e.slice(4)}` : e.length <= 8 && (i = `${e.slice(0, 4)}${r}${e.slice(4, 6)}${r}${e.slice(6)}`) : e.length <= 2 ? i = e : e.length <= 4 ? i = `${e.slice(0, 2)}${r}${e.slice(2)}` : e.length <= 8 && (i = `${e.slice(0, 2)}${r}${e.slice(2, 4)}${r}${e.slice(4)}`), this.showTime && e.length > 8)) {
+      const l = i, c = e.slice(8);
+      c.length <= 2 ? i = `${l} ${c}` : i = `${l} ${c.slice(0, 2)}:${c.slice(2, 4)}`;
+    }
+    if (e.length >= 8) {
+      let l, c, p;
+      if (s)
+        p = parseInt(e.slice(0, 4)), c = parseInt(e.slice(4, 6)), l = parseInt(e.slice(6, 8));
+      else {
+        const o = parseInt(e.slice(0, 2)), m = parseInt(e.slice(2, 4)), d = parseInt(e.slice(4, 8));
+        n[0] === "day" ? (l = o, c = m, p = d) : (c = o, l = m, p = d);
+      }
+      l > 31 && (l = 31), l === 0 && (l = 1), c > 12 && (c = 12), c === 0 && (c = 1), p > 2100 && (p = 2100);
+      const u = String(l).padStart(2, "0"), v = String(c).padStart(2, "0"), f = String(p);
+      if (s ? i = `${f}${r}${v}${r}${u}` : n[0] === "day" ? i = `${u}${r}${v}${r}${f}` : i = `${v}${r}${u}${r}${f}`, this.showTime && e.length > 8) {
+        i.split(" ")[1];
+        let o = parseInt(e.slice(8, 10) || "0"), m = parseInt(e.slice(10, 12) || "0");
+        o > 23 && (o = 23), m > 59 && (m = 59);
+        const d = String(o).padStart(2, "0"), D = String(m).padStart(2, "0");
+        e.length <= 10 ? i += ` ${d}` : i += ` ${d}:${D}`;
+      }
+    }
+    if (this.value = i || e, this.value.length >= 8) {
+      const l = this.value.split(" ")[0].split(r);
+      if (this.value.split(" ")[1]?.split(":"), l.length === 3) {
+        let c, p, u;
+        if (s) {
+          currentParts[0] === "year" ? (u = parseInt(dateComponents[0]), p = parseInt(dateComponents[1]), c = parseInt(dateComponents[2])) : currentParts[0] === "day" ? (c = parseInt(dateComponents[0]), p = parseInt(dateComponents[1]), u = parseInt(dateComponents[2])) : (p = parseInt(dateComponents[0]), c = parseInt(dateComponents[1]), u = parseInt(dateComponents[2]));
+          let v = 0, f = 0;
+          if (timePartStr) {
+            const o = timePartStr.split(":");
+            o.length >= 2 && (v = parseInt(o[0]), f = parseInt(o[1]));
+          }
+          if (u > 999) {
+            let o = new Date(u, p - 1, c, v, f);
+            if (!isNaN(o.getTime())) {
+              if (this.min) {
+                const d = this._parseDateStr(this.min);
+                if (d) {
+                  const D = new Date(o.getFullYear(), o.getMonth(), o.getDate()), a = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+                  D < a && (o = new Date(d));
+                }
+              }
+              if (this.max) {
+                const d = this._parseDateStr(this.max);
+                if (d) {
+                  const D = new Date(o.getFullYear(), o.getMonth(), o.getDate()), a = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+                  D > a && (o = new Date(d));
+                }
+              }
+              this._viewDate = o, this._selectedDate = o;
+              const m = this._formatValue(o);
+              this.value !== m && (this.value = m), this.dispatchEvent(new CustomEvent("change", {
+                detail: { value: this.value, date: this._selectedDate },
+                bubbles: !0,
+                composed: !0
+              }));
+            }
+          }
+        }
+      }
+    }
+  }
+  _changeMonth(t) {
+    const e = new Date(this._viewDate);
+    e.setMonth(e.getMonth() + t), this._viewDate = e;
+  }
+  _setViewMonth(t) {
+    const e = new Date(this._viewDate);
+    e.setMonth(parseInt(t)), this._viewDate = e;
+  }
+  _setViewYear(t) {
+    const e = new Date(this._viewDate);
+    e.setFullYear(parseInt(t)), this._viewDate = e;
+  }
+  _setTime(t, e) {
+    const n = new Date(this._viewDate);
+    if (t === "hour" && n.setHours(parseInt(e)), t === "minute" && n.setMinutes(parseInt(e)), this._viewDate = n, this._selectedDate) {
+      const r = new Date(this._selectedDate);
+      t === "hour" && r.setHours(parseInt(e)), t === "minute" && r.setMinutes(parseInt(e)), this._selectedDate = r, this.value = this._formatValue(r);
+    }
+  }
+  _formatValue(t) {
+    if (!t) return "";
+    const { separator: e, parts: n } = this._getDateFormat(), r = String(t.getDate()).padStart(2, "0"), s = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getFullYear());
+    let l = "";
+    if (n[0] === "year" ? l = `${i}${e}${s}${e}${r}` : n[0] === "day" ? l = `${r}${e}${s}${e}${i}` : l = `${s}${e}${r}${e}${i}`, this.mode === "year") return String(i);
+    if (this.mode === "month") return `${s}${e}${i}`;
+    if (this.showTime) {
+      const c = String(t.getHours()).padStart(2, "0"), p = String(t.getMinutes()).padStart(2, "0");
+      l += ` ${c}:${p}`;
+    }
+    return l;
+  }
+  _handleToday(t) {
+    t && t.stopPropagation();
+    const e = /* @__PURE__ */ new Date();
+    this._viewDate = e, this._selectDate(e.getDate(), !0);
+  }
+  _handleDone(t) {
+    t && t.stopPropagation(), this.open = !1;
+  }
+  _handleKeydown(t) {
+    if (!this.open) {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.open = !0);
+      return;
+    }
+    if (t.key === "Escape") {
+      this.open = !1;
+      return;
+    }
+    const e = new Date(this._viewDate);
+    let n = !0;
+    switch (t.key) {
+      case "ArrowLeft":
+        e.setDate(e.getDate() - 1);
+        break;
+      case "ArrowRight":
+        e.setDate(e.getDate() + 1);
+        break;
+      case "ArrowUp":
+        e.setDate(e.getDate() - 7);
+        break;
+      case "ArrowDown":
+        e.setDate(e.getDate() + 7);
+        break;
+      case "Enter":
+        const r = new Date(this._viewDate);
+        this._isDisabled(r) || this._selectDate(this._viewDate.getDate(), !0);
+        break;
+      default:
+        n = !1;
+    }
+    n && (t.preventDefault(), this._viewDate = e);
+  }
+  _parseDateStr(t) {
+    return t ? t.match(/^\d{4}-\d{2}-\d{2}$/) ? new Date(t) : new Date(t) : null;
+  }
+  _isDisabled(t) {
+    if (!t) return !1;
+    const e = this._parseDateStr(this.min), n = this._parseDateStr(this.max), r = new Date(t.getFullYear(), t.getMonth(), t.getDate());
+    if (e) {
+      const s = new Date(e.getFullYear(), e.getMonth(), e.getDate());
+      if (r < s) return !0;
+    }
+    if (n) {
+      const s = new Date(n.getFullYear(), n.getMonth(), n.getDate());
+      if (r > s) return !0;
+    }
+    return !1;
+  }
+  _selectDate(t, e) {
+    if (!e) return;
+    const n = new Date(this._viewDate);
+    this.mode === "date" && n.setDate(t), !this._isDisabled(n) && (this._selectedDate = n, this.value = this._formatValue(n), (!this.showTime || this.mode !== "date") && (this.open = !1), this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value, date: this._selectedDate },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _selectMonth(t) {
+    const e = new Date(this._viewDate);
+    e.setMonth(t), this._viewDate = e, this._selectedDate = e, this.value = this._formatValue(e), this.open = !1, this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value, date: this._selectedDate },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _selectYear(t) {
+    const e = new Date(this._viewDate);
+    e.setFullYear(t), this._viewDate = e, this._selectedDate = e, this.value = this._formatValue(e), this.open = !1, this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value, date: this._selectedDate },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _renderCalendar() {
+    const t = this._viewDate.getFullYear(), e = this._viewDate.getMonth(), n = this._viewDate.getDate(), r = Array.from({ length: 12 }, (a, h) => {
+      const y = new Date(2e3, h, 1);
+      return new Intl.DateTimeFormat(this.locale, { month: "long" }).format(y);
+    });
+    new Intl.DateTimeFormat(this.locale, { weekday: "narrow" }).format(new Date(2024, 0, 7)), new Intl.DateTimeFormat(this.locale, { weekday: "narrow" }).format(new Date(2024, 0, 7));
+    let s = 1;
+    (this.locale.startsWith("en-US") || this.locale.startsWith("ja") || this.locale.startsWith("zh")) && (s = 0);
+    const i = [];
+    for (let a = 0; a < 7; a++) {
+      const h = new Date(2024, 0, 7 + a + s);
+      i.push(new Intl.DateTimeFormat(this.locale, { weekday: "short" }).format(h));
+    }
+    let l = (new Date(t, e, 1).getDay() - s + 7) % 7;
+    const c = new Date(t, e + 1, 0).getDate(), p = new Date(t, e, 0).getDate(), u = [];
+    for (let a = l - 1; a >= 0; a--)
+      u.push({ day: p - a, current: !1 });
+    for (let a = 1; a <= c; a++)
+      u.push({ day: a, current: !0 });
+    const v = 42 - u.length;
+    for (let a = 1; a <= v; a++)
+      u.push({ day: a, current: !1 });
+    const f = (/* @__PURE__ */ new Date()).getFullYear(), o = [];
+    for (let a = f - 50; a <= f + 50; a++)
+      o.push(a);
+    const m = /* @__PURE__ */ new Date(), d = (a) => a === m.getDate() && e === m.getMonth() && t === m.getFullYear(), D = (a) => this._selectedDate ? a === this._selectedDate.getDate() && e === this._selectedDate.getMonth() && t === this._selectedDate.getFullYear() : !1;
+    return g`
+      <div class="calendar-header">
+        <button class="nav-btn" @click="${(a) => {
+      a.stopPropagation(), this._changeMonth(-1);
+    }}">←</button>
+        <div class="month-year">
+            <select class="header-select" @click="${(a) => a.stopPropagation()}" @change="${(a) => this._setViewMonth(a.target.value)}">
+                ${r.map((a, h) => g`<option value="${h}" ?selected="${h === e}">${a}</option>`)}
+            </select>
+            <select class="header-select" @click="${(a) => a.stopPropagation()}" @change="${(a) => this._setViewYear(a.target.value)}">
+                ${o.map((a) => g`<option value="${a}" ?selected="${a === t}">${a}</option>`)}
+            </select>
+        </div>
+        <button class="nav-btn" @click="${(a) => {
+      a.stopPropagation(), this._changeMonth(1);
+    }}">→</button>
+      </div>
+      <div class="calendar-grid">
+        ${i.map((a) => g`<div class="weekday">${a}</div>`)}
+        ${u.map((a) => g`
+          <div class="${w({
+      day: !0,
+      "other-month": !a.current,
+      today: a.current && d(a.day),
+      selected: a.current && D(a.day),
+      focused: a.current && a.day === n,
+      disabled: a.current && this._isDisabled(new Date(t, e, a.day))
+    })}" @click="${(h) => {
+      h.stopPropagation(), this._selectDate(a.day, a.current);
+    }}">
+            ${a.day}
+          </div>
+        `)}
+      </div>
+
+      ${this.showTime ? g`
+        <div class="time-picker" @click="${(a) => a.stopPropagation()}">
+            <select class="time-select" @change="${(a) => this._setTime("hour", a.target.value)}">
+                ${Array.from({ length: 24 }, (a, h) => g`
+                    <option value="${h}" ?selected="${h === this._viewDate.getHours()}">
+                        ${String(h).padStart(2, "0")}
+                    </option>
+                `)}
+            </select>
+            <span class="time-separator">:</span>
+            <select class="time-select" @change="${(a) => this._setTime("minute", a.target.value)}">
+                ${Array.from({ length: 60 }, (a, h) => g`
+                    <option value="${h}" ?selected="${h === this._viewDate.getMinutes()}">
+                        ${String(h).padStart(2, "0")}
+                    </option>
+                `)}
+            </select>
+        </div>
+      ` : ""}
+
+      <div style="margin-top: 1rem; border-top: 1px solid var(--kg-border); padding-top: 0.75rem; display: flex; justify-content: center; gap: 8px;">
+          <kg-button size="mini" basic fullwidth @click="${this._handleToday}">Bugün</kg-button>
+          ${this.showTime ? g`
+            <kg-button size="mini" color="primary" fullwidth @click="${this._handleDone}">Tamam</kg-button>
+          ` : ""}
+      </div>
+    `;
+  }
+  _renderMonthView() {
+    this._viewDate.getMonth();
+    const t = Array.from({ length: 12 }, (s, i) => {
+      const l = new Date(2e3, i, 1);
+      return new Intl.DateTimeFormat(this.locale, { month: "long" }).format(l);
+    }), e = this._viewDate.getFullYear(), n = [];
+    for (let s = e - 10; s <= e + 10; s++) n.push(s);
+    const r = (s) => this._selectedDate ? s === this._selectedDate.getMonth() && e === this._selectedDate.getFullYear() : !1;
+    return g`
+          <div class="calendar-header">
+              <button class="nav-btn" @click="${(s) => {
+      s.stopPropagation(), this._setViewYear(e - 1);
+    }}">←</button>
+              <div class="month-year">
+                  <select class="header-select" @click="${(s) => s.stopPropagation()}" @change="${(s) => this._setViewYear(s.target.value)}">
+                      ${n.map((s) => g`<option value="${s}" ?selected="${s === e}">${s}</option>`)}
+                  </select>
+              </div>
+              <button class="nav-btn" @click="${(s) => {
+      s.stopPropagation(), this._setViewYear(e + 1);
+    }}">→</button>
+          </div>
+          <div class="selector-grid">
+              ${t.map((s, i) => g`
+                  <div class="selector-item ${r(i) ? "selected" : ""}" @click="${(l) => {
+      l.stopPropagation(), this._selectMonth(i);
+    }}">
+                      ${s}
+                  </div>
+              `)}
+          </div>
+      `;
+  }
+  _renderYearView() {
+    const t = this._viewDate.getFullYear(), e = Math.floor(t / 12) * 12, n = [];
+    for (let s = 0; s < 12; s++)
+      n.push(e + s);
+    const r = (s) => this._selectedDate ? s === this._selectedDate.getFullYear() : !1;
+    return g`
+          <div class="calendar-header">
+              <button class="nav-btn" @click="${(s) => {
+      s.stopPropagation(), this._setViewYear(t - 12);
+    }}">←</button>
+              <div class="month-year">
+                  <span>${e} - ${e + 11}</span>
+              </div>
+              <button class="nav-btn" @click="${(s) => {
+      s.stopPropagation(), this._setViewYear(t + 12);
+    }}">→</button>
+          </div>
+          <div class="selector-grid">
+              ${n.map((s) => g`
+                  <div class="selector-item ${r(s) ? "selected" : ""}" @click="${(i) => {
+      i.stopPropagation(), this._selectYear(s);
+    }}">
+                      ${s}
+                  </div>
+              `)}
+          </div>
+      `;
+  }
+  render() {
+    let t;
+    return this.mode === "year" ? t = this._renderYearView() : this.mode === "month" ? t = this._renderMonthView() : t = this._renderCalendar(), g`
+      <div 
+        class="datepicker-trigger ${this.disabled ? "disabled" : ""}" 
+        @keydown="${this._handleKeydown}"
+        tabindex="${this.disabled ? "-1" : "0"}"
+      >
+        <kg-input 
+          .placeholder="${this.placeholder}" 
+          .value="${this.value}"
+          .label="${this.label}"
+          ?disabled="${this.disabled}"
+          @kg-input="${this._handleManualInput}"
+          @keydown="${this._handleInputKeydown}"
+          @click="${this.togglePopup}"
+        >
+          <div slot="right" style="display: flex; align-items: center; color: var(--kg-text-muted); opacity: 0.7;">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="16" y1="2" x2="16" y2="6"></line>
+              <line x1="8" y1="2" x2="8" y2="6"></line>
+              <line x1="3" y1="10" x2="21" y2="10"></line>
+            </svg>
+          </div>
+        </kg-input>
+      </div>
+      
+      <div class="${w({ "datepicker-popup": !0, open: this.open })}">
+        ${t}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-datepicker", b);
+export {
+  b as kgdatepicker
+};