kanto-ds 1.5.2 → 1.6.0

package/dist/components/forms/kt-date-picker/kt-date-picker.js

@@ -1,32 +1,52 @@
-import { css as w, nothing as n, html as d } from "lit";
-import { query as k, state as g, property as o } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
-import { K as m, d as $ } from "../../../chunks/kt-element-Djx2JcGl.js";
-import { u as x, t as v, e as b } from "../../../chunks/events-r51msXNf.js";
-import { a as D, s as C, b as P } from "../../../chunks/form-control-B74_EHtG.js";
-import { F as S, f as R } from "../../../chunks/floating-B7_Dahpn.js";
-import { r as q, d as z } from "../../../chunks/locale-C5xLkGx5.js";
-import { s as l } from "../../../chunks/index-STEEvEP7.js";
-import { p as F, a as y, c as K, t as u } from "../../../chunks/kt-calendar-B_hFdD9V.js";
+import { css as T, nothing as d, html as p } from "lit";
+import { query as S, state as h, property as s } from "lit/decorators.js";
+import { classMap as x } from "lit/directives/class-map.js";
+import { live as O } from "lit/directives/live.js";
+import { K as D, d as R } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { u as q, t as E, e as v } from "../../../chunks/events-r51msXNf.js";
+import { a as B, s as F, b as L } from "../../../chunks/form-control-B74_EHtG.js";
+import { F as z, f as K } from "../../../chunks/floating-B33g-M_1.js";
+import { r as M, d as _ } from "../../../chunks/locale-C5xLkGx5.js";
+import { s as f } from "../../../chunks/index-TWJzttLX.js";
+import { a as P, p as u, c as g, b as w, t as m, e as k, f as C, g as V, h as I, d as W } from "../../../chunks/kt-calendar-CtwOby1R.js";
+import { p as U, a as Y, e as j } from "../../../chunks/typed-date-CPAUNHzr.js";
 import "../../core/kt-icon/kt-icon.js";
-var B = Object.defineProperty, a = (p, e, t, i) => {
-  for (var s = void 0, c = p.length - 1, f; c >= 0; c--)
-    (f = p[c]) && (s = f(e, t, s) || s);
-  return s && B(e, t, s), s;
+import "../../feedback/kt-tooltip/kt-tooltip.js";
+var G = Object.defineProperty, a = (l, t, e, o) => {
+  for (var r = void 0, n = l.length - 1, c; n >= 0; n--)
+    (c = l[n]) && (r = c(t, e, r) || r);
+  return r && G(t, e, r), r;
 };
-class r extends m {
+function H() {
+  const l = f(), t = m(), e = { ...t, day: 1 }, o = V(e, -1), r = (n, c) => k(n, c);
+  return [
+    { label: l.presetToday, value: r(t, t) },
+    { label: l.presetLast7Days, value: r(I(t, -6), t) },
+    { label: l.presetLast30Days, value: r(I(t, -29), t) },
+    { label: l.presetThisMonth, value: r(e, t) },
+    {
+      label: l.presetLastMonth,
+      value: r(o, {
+        ...o,
+        day: W(o.year, o.month)
+      })
+    },
+    { label: l.presetThisYear, value: r({ year: t.year, month: 1, day: 1 }, t) }
+  ];
+}
+const i = class $ extends D {
   constructor() {
-    super(...arguments), this.internals = null, this.defaultValue = null, this.panelId = x("kt-date-picker-panel"), this.open = !1, this.placement = "bottom", this.floating = new S(this, {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.panelId = q("kt-date-picker-panel"), this.open = !1, this.text = "", this.editing = !1, this.typedError = "", this.focused = !1, this.compact = !1, this.placement = "bottom", this.floating = new z(this, {
       panel: () => this.shadowRoot?.querySelector(".panel"),
-      anchor: () => this.shadowRoot?.querySelector(".trigger"),
-      onPlace: (e) => {
-        this.placement = e === "top" ? "top" : "bottom";
-      }
-    }), this.value = null, this.range = !1, this.min = "", this.max = "", this.name = "", this.label = "", this.placeholder = void 0, this.locale = "", this.size = "medium", this.disabled = !1, this.formDisabled = !1, this.required = !1, this.clearable = !0, this.error = "", this.onDocumentPointerDown = (e) => {
-      this.open && !e.composedPath().includes(this) && this.close(!1);
-    }, this.onFocusOut = (e) => {
-      const t = e.relatedTarget;
-      !this.open || !t || this.contains(t) || this.shadowRoot?.contains(t) || e.composedPath().includes(t) || this.calendar?.shadowRoot?.contains(t) || this.close(!1);
+      anchor: () => this.shadowRoot?.querySelector(".field"),
+      onPlace: (t) => {
+        this.placement = t === "top" ? "top" : "bottom";
+      }
+    }), this.value = null, this.range = !1, this.min = "", this.max = "", this.name = "", this.label = "", this.placeholder = void 0, this.locale = "", this.size = "medium", this.disabled = !1, this.formDisabled = !1, this.required = !1, this.clearable = !0, this.presets = void 0, this.error = "", this.onDocumentPointerDown = (t) => {
+      this.open && !t.composedPath().includes(this) && this.close(!1);
+    }, this.onFocusOut = (t) => {
+      const e = t.relatedTarget;
+      !this.open || !e || this.contains(e) || this.shadowRoot?.contains(e) || t.composedPath().includes(e) || this.calendar?.shadowRoot?.contains(e) || this.close(!1);
     };
   }
   static {
@@ -34,14 +54,13 @@ class r extends m {
   }
   static {
     this.styles = [
-      m.styles,
-      R,
-      w`
+      D.styles,
+      K,
+      T`
       :host {
         position: relative;
         display: block;
         --field-height: var(--button-height);
-        --day-size: 36px;
       }
       :host([size='small']) {
         --field-height: var(--button-height-small);
@@ -50,95 +69,106 @@ class r extends m {
         --field-height: var(--button-height-large);
       }
 
+      /* The field, as kt-input draws one: a fill with a resting hairline, an
+         outline on hover and focus that never reflows it. */
       .field {
-        position: relative;
-      }
-
-      .trigger {
-        display: grid;
-        grid-template-columns: 1fr auto;
+        display: flex;
         align-items: center;
-        gap: var(--gap-element);
-        width: 100%;
+        gap: 2px;
         height: var(--field-height);
-        padding: 0 var(--button-padding-x);
+        padding: 0 10px 0 4px;
         color: var(--text-body);
-        font: var(--font-input);
-        text-align: left;
         background-color: var(--color-dark-20);
         border: var(--border-width) solid var(--border-field);
         border-radius: var(--radius-input);
         outline: var(--outline-width) solid transparent;
-        cursor: pointer;
         transition:
           background-color var(--duration-instant),
           outline-color var(--duration-instant);
       }
-      .trigger:hover {
+      .field:hover {
         outline: var(--outline-width) solid var(--color-text-700);
       }
-      .trigger:focus-visible,
-      .open .trigger {
+      .field:focus-within,
+      .open .field {
         background-color: var(--color-dark-12);
         outline: var(--outline-width) solid var(--color-primary-base);
       }
-      .error .trigger,
-      .error .trigger:hover {
+      .error .field,
+      .error .field:hover,
+      .error .field:focus-within {
         outline: var(--outline-width) solid var(--color-danger-base);
       }
-      :host(:disabled) .trigger {
+      :host(:disabled) .field {
         color: var(--text-disabled);
         background-color: var(--color-dark-14);
-        cursor: not-allowed;
-      }
-
-      .value {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .placeholder {
-        color: var(--text-muted);
       }
 
-      .icons {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--gap-element);
-        color: var(--text-muted);
-      }
-      /* Room for the clear button, which sits over the field, not inside the
-         trigger: a button inside a button is not a thing assistive
-         technology can operate. */
-      .clearable .icons {
-        padding-left: calc(18px + var(--gap-element));
-      }
+      /* The calendar button leads: it says what kind of field this is. */
+      .trigger,
       .clear {
-        position: absolute;
-        top: 50%;
-        /* Just left of the calendar icon, in the room .icons keeps for it. */
-        right: calc(var(--button-padding-x) + 18px + var(--gap-element));
         display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
         padding: 0;
         color: var(--text-muted);
         background: none;
         border: none;
-        border-radius: var(--radius-sub-menu);
+        border-radius: calc(var(--radius-input) - 2px);
         cursor: pointer;
-        transform: translateY(-50%);
+        transition:
+          background-color var(--duration-instant),
+          color var(--duration-instant);
+      }
+      .trigger {
+        width: calc(var(--field-height) - 10px);
+        height: calc(var(--field-height) - 10px);
+      }
+      .trigger:hover,
+      .open .trigger {
+        color: var(--text-body);
+        background: var(--color-dark-22);
       }
       .clear:hover {
         color: var(--text-body);
       }
+      .trigger:focus-visible,
       .clear:focus-visible {
         outline: var(--outline-width) solid var(--color-primary-base);
       }
+      :host(:disabled) .trigger {
+        cursor: not-allowed;
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+        height: 100%;
+        padding: 0 4px;
+        color: inherit;
+        font: var(--font-input);
+        background: transparent;
+        border: none;
+        outline: none;
+      }
+      input::placeholder {
+        color: var(--text-muted);
+      }
+      .error input {
+        color: var(--color-danger-text);
+      }
+
+      .error-icon {
+        flex: none;
+        color: var(--color-danger-text);
+      }
 
       /* Placed from the field by FloatingController. */
       .panel {
         box-sizing: border-box;
         padding: var(--padding-expand);
-        background: var(--color-dark-20);
+        background: var(--surface-popover);
         border-radius: var(--radius-input);
 
         visibility: hidden;
@@ -166,6 +196,78 @@ class r extends m {
       .panel kt-calendar {
         display: block;
       }
+
+      .panel-body {
+        display: flex;
+        gap: 12px;
+      }
+
+      /* Ready-made periods: the quickest way to a period, so they lead. */
+      .presets {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 128px;
+        padding-right: 12px;
+        border-right: var(--border-width) solid var(--divider-popover);
+      }
+      .presets button,
+      .today {
+        height: 32px;
+        padding: 0 10px;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        text-align: left;
+        white-space: nowrap;
+        background: none;
+        border: none;
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+      .presets button:hover:not(:disabled),
+      .today:hover:not(:disabled) {
+        background: var(--color-dark-22);
+      }
+      .presets button[aria-pressed='true'] {
+        color: var(--color-primary-text);
+        font-weight: 600;
+        background: var(--color-primary-soft);
+      }
+      .presets button:disabled,
+      .today:disabled {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+      .presets button:focus-visible,
+      .today:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      /* On a narrow screen the periods wrap in a row above the one month. */
+      .panel-body.compact {
+        flex-direction: column;
+      }
+      .compact .presets {
+        flex-direction: row;
+        flex-wrap: wrap;
+        min-width: 0;
+        max-width: calc(var(--day-size, 32px) * 7);
+        padding: 0 0 8px;
+        border-right: none;
+        border-bottom: var(--border-width) solid var(--divider-popover);
+      }
+
+      .footer {
+        display: flex;
+        justify-content: flex-start;
+        margin-top: var(--gap-element);
+        padding-top: var(--gap-element);
+        border-top: var(--border-width) solid var(--divider-popover);
+      }
+      .today {
+        color: var(--color-primary-text);
+        font-weight: 600;
+      }
     `
     ];
   }
@@ -174,129 +276,223 @@ class r extends m {
     return this.disabled || this.formDisabled;
   }
   connectedCallback() {
-    super.connectedCallback(), this.internals ??= D(this), this.defaultValue = this.value, v(this.open, document, "pointerdown", this.onDocumentPointerDown);
+    super.connectedCallback(), this.internals ??= B(this), this.defaultValue = this.value, E(this.open, document, "pointerdown", this.onDocumentPointerDown);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("pointerdown", this.onDocumentPointerDown);
   }
   // Untyped: `open` is private, so not among the keys PropertyValues<this> knows.
-  updated(e) {
-    e.has("open") && v(this.open, document, "pointerdown", this.onDocumentPointerDown), this.floating.sync(this.open);
+  updated(t) {
+    t.has("open") && E(this.open, document, "pointerdown", this.onDocumentPointerDown), this.floating.sync(this.open);
   }
-  willUpdate(e) {
-    if (e.has("value") || e.has("range") || e.has("required") || e.has("error") || this.stringsChanged(e)) {
-      const t = this.isComplete();
-      C(this.internals, t ? this.value : null);
-      const i = this.required && !t;
-      P(
+  willUpdate(t) {
+    if (t.has("value") || t.has("range") || t.has("required") || t.has("error") || t.has("typedError") || this.stringsChanged(t)) {
+      const e = this.isComplete();
+      F(this.internals, e ? this.value : null);
+      const o = this.required && !e;
+      L(
         this.internals,
-        { valueMissing: i, customError: !!this.error },
-        this.error || (i ? l().dateRequired : "")
+        {
+          valueMissing: o,
+          badInput: !!this.typedError,
+          customError: !!this.error
+        },
+        this.error || this.typedError || (o ? f().dateRequired : "")
       );
     }
   }
   formResetCallback() {
-    this.value = this.defaultValue, this.close(!1);
+    this.value = this.defaultValue, this.editing = !1, this.typedError = "", this.close(!1);
   }
   /**
    * Called by the platform when the control's disabled state changes — its
    * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
    */
-  formDisabledCallback(e) {
-    this.formDisabled = e;
+  formDisabledCallback(t) {
+    this.formDisabled = t;
   }
-  formStateRestoreCallback(e) {
-    this.value = e;
+  formStateRestoreCallback(t) {
+    this.value = t;
   }
-  focus(e) {
-    this.trigger?.focus(e);
+  focus(t) {
+    this.input?.focus(t);
   }
   // --- Reading the value ---
   get resolvedLocale() {
-    return q(this.locale);
+    return M(this.locale);
   }
   get selection() {
-    return this.range ? F(this.value) : { start: y(this.value), end: y(this.value) };
+    return this.range ? P(this.value) : { start: u(this.value), end: u(this.value) };
   }
   isComplete() {
-    const { start: e, end: t } = this.selection;
-    return e !== null && t !== null && K(e, t) <= 0;
+    const { start: t, end: e } = this.selection;
+    return t !== null && e !== null && g(t, e) <= 0;
   }
   display() {
-    const { start: e, end: t } = this.selection;
-    if (!e || !t) return null;
-    const i = z(this.resolvedLocale, { dateStyle: "medium" });
-    return this.range ? i.formatRange(u(e), u(t)) : i.format(u(e));
+    const { start: t, end: e } = this.selection;
+    if (!t || !e) return null;
+    const o = _(this.resolvedLocale, { dateStyle: "medium" });
+    return this.range ? o.formatRange(w(t), w(e)) : o.format(w(t));
+  }
+  static {
+    this.WIDE_ENOUGH = 720;
   }
   async show() {
-    this.inactive || this.open || (this.open = !0, await this.updateComplete, this.calendar?.focus());
+    this.inactive || this.open || (this.compact = window.innerWidth < $.WIDE_ENOUGH, this.open = !0, await this.updateComplete, this.calendar?.focus());
   }
-  close(e) {
-    this.open && (this.open = !1, e && this.focus());
+  close(t) {
+    this.open && (this.open = !1, t && this.focus());
   }
   toggle() {
-    this.open ? this.close(!1) : this.show();
+    this.open ? this.close(!0) : this.show();
+  }
+  /** A click in the text opens the calendar, leaving the focus to type. */
+  openForTyping() {
+    this.inactive || this.open || (this.compact = window.innerWidth < $.WIDE_ENOUGH, this.open = !0);
   }
   // --- Choosing ---
-  onCalendarChange(e) {
-    e.stopPropagation(), this.value = e.detail.value, this.close(!0), b(this, "kt-change", { value: this.value });
+  onCalendarChange(t) {
+    t.stopPropagation(), this.editing = !1, this.typedError = "", this.value = t.detail.value, this.close(!0), v(this, "kt-change", { value: this.value });
+  }
+  /** A preset, or today: committed at once, the calendar closed. */
+  apply(t) {
+    this.editing = !1, this.typedError = "", this.close(!0), t !== this.value && (this.value = t, v(this, "kt-change", { value: t }));
+  }
+  /** Whether any of a period falls outside min and max. */
+  outOfBounds(t) {
+    const { start: e, end: o } = P(t), r = u(this.min), n = u(this.max);
+    return !e || !o ? !0 : r !== null && g(e, r) < 0 || n !== null && g(o, n) > 0;
+  }
+  renderPresets() {
+    const t = this.presets ?? H();
+    return !this.range || t.length === 0 ? d : p`<div
+      part="presets"
+      class="presets"
+      role="group"
+      aria-label=${f().selectPeriod}
+    >
+      ${t.map(
+      (e) => p`<button
+            type="button"
+            aria-pressed=${e.value === this.value ? "true" : "false"}
+            ?disabled=${this.outOfBounds(e.value)}
+            @click=${() => this.apply(e.value)}
+          >
+            ${e.label}
+          </button>`
+    )}
+    </div>`;
   }
   clear() {
-    this.value = null, b(this, "kt-change", { value: null }), this.focus();
+    this.editing = !1, this.typedError = "", this.value = null, v(this, "kt-change", { value: null }), this.focus();
+  }
+  // --- Typing ---
+  onInput(t) {
+    this.text = t.target.value, this.editing = !0;
+  }
+  /**
+   * Reads what was typed into the value. Text that is not a date, or is a date
+   * outside min and max, is flagged and the value kept; an empty field empties
+   * the value.
+   */
+  commitTyped() {
+    if (!this.editing) return;
+    this.editing = !1;
+    const t = this.text.trim();
+    if (!t) {
+      this.typedError = "", this.value !== null && (this.value = null, v(this, "kt-change", { value: null }));
+      return;
+    }
+    const e = this.resolvedLocale, o = m(), r = this.range ? U(t, e, o) : (() => {
+      const b = Y(t, e, o);
+      return b && { start: b, end: b };
+    })();
+    if (!r) {
+      this.text = t, this.editing = !0, this.typedError = f().dateInvalid(j(e, o));
+      return;
+    }
+    const n = u(this.min), c = u(this.max);
+    if (n && g(r.start, n) < 0 || c && g(r.end, c) > 0) {
+      this.text = t, this.editing = !0, this.typedError = f().dateOutOfRange;
+      return;
+    }
+    this.typedError = "";
+    const y = this.range ? k(r.start, r.end) : C(r.start);
+    y !== this.value && (this.value = y, v(this, "kt-change", { value: y }));
   }
   // --- Keyboard ---
-  onTriggerKeyDown(e) {
-    (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), this.show());
+  onInputKeyDown(t) {
+    switch (t.key) {
+      case "Enter":
+        t.preventDefault(), this.commitTyped(), this.typedError || this.close(!1);
+        return;
+      case "Escape":
+        if (!this.editing && !this.open) return;
+        t.preventDefault(), t.stopPropagation(), this.editing = !1, this.typedError = "", this.close(!1);
+        return;
+      case "ArrowDown":
+        t.preventDefault(), this.show();
+    }
   }
-  onPanelKeyDown(e) {
-    e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.close(!0));
+  onPanelKeyDown(t) {
+    t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), this.close(!0));
   }
   // --- Rendering ---
   render() {
-    const e = this.display(), t = this.placeholder ?? (this.range ? l().selectPeriod : l().selectDate), i = this.clearable && this.value !== null && !this.inactive;
-    return d`${this.error ? d`<span id="error-message" class="visually-hidden">${this.error}</span>` : n}
+    const t = f(), e = this.display(), o = this.placeholder ?? (this.range ? t.selectPeriod : t.selectDate), r = this.error || this.typedError, n = this.clearable && this.value !== null && !this.inactive && !this.editing && !r;
+    return p`${r ? p`<span id="error-message" class="visually-hidden">${r}</span>` : d}
       <div
-        class=${h({
-      field: !0,
-      open: this.open,
-      error: !!this.error,
-      clearable: i
-    })}
+        class=${x({ open: this.open, error: !!r })}
         @focusout=${this.onFocusOut}
       >
-        <button
-          part="trigger"
-          type="button"
-          class="trigger"
-          aria-haspopup="dialog"
-          aria-expanded=${this.open ? "true" : "false"}
-          aria-controls=${this.panelId}
-          aria-label=${this.label ? `${this.label}${e ? `, ${e}` : ""}` : n}
-          aria-invalid=${this.error ? "true" : n}
-          aria-describedby=${this.error ? "error-message" : n}
-          ?disabled=${this.inactive}
-          @click=${this.toggle}
-          @keydown=${this.onTriggerKeyDown}
-        >
-          <span class=${h({ value: !0, placeholder: !e })}>
-            ${e ?? t}
-          </span>
-          <span class="icons"><kt-icon name="calendar" size="18"></kt-icon></span>
-        </button>
-        ${i ? d`<button
-                type="button"
-                class="clear"
-                aria-label=${l().clear}
-                @click=${this.clear}
-              >
-                <kt-icon name="x" size="18"></kt-icon>
-              </button>` : n}
+        <div part="field" class="field">
+          <button
+            part="trigger"
+            type="button"
+            class="trigger"
+            tabindex="-1"
+            aria-label=${t.openCalendar}
+            aria-haspopup="dialog"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-controls=${this.panelId}
+            ?disabled=${this.inactive}
+            @click=${this.toggle}
+          >
+            <kt-icon name="calendar" size="18"></kt-icon>
+          </button>
+          <input
+            part="input"
+            .value=${O(this.editing ? this.text : e ?? "")}
+            placeholder=${o}
+            autocomplete="off"
+            aria-label=${this.label || o}
+            aria-invalid=${r ? "true" : d}
+            aria-describedby=${r ? "error-message" : d}
+            ?disabled=${this.inactive}
+            @input=${this.onInput}
+            @change=${this.commitTyped}
+            @keydown=${this.onInputKeyDown}
+            @click=${this.openForTyping}
+            @focus=${() => {
+      this.focused = !0;
+    }}
+            @blur=${() => {
+      this.focused = !1;
+    }}
+          />
+          ${r ? p`<kt-tooltip class="error-icon" text=${r} ?open=${this.focused}>
+                  <kt-icon name="circle-alert" size="18"></kt-icon>
+                </kt-tooltip>` : d}
+          ${n ? p`<button type="button" class="clear" aria-label=${t.clear} @click=${this.clear}>
+                  <kt-icon name="x" size="18"></kt-icon>
+                </button>` : d}
+        </div>
 
         <div
           part="panel"
           id=${this.panelId}
           popover="manual"
-          class=${h({
+          class=${x({
       panel: !0,
       floating: !0,
       open: this.open,
@@ -304,79 +500,114 @@ class r extends m {
     })}
           role="dialog"
           aria-modal="false"
-          aria-label=${this.range ? l().selectPeriod : l().selectDate}
+          aria-label=${this.range ? t.selectPeriod : t.selectDate}
           @keydown=${this.onPanelKeyDown}
         >
-          ${this.open ? d`<kt-calendar
-                  part="calendar"
-                  .value=${this.value}
-                  ?range=${this.range}
-                  min=${this.min}
-                  max=${this.max}
-                  locale=${this.locale}
-                  label=${this.label}
-                  @kt-change=${this.onCalendarChange}
-                ></kt-calendar>` : n}
+          ${this.open ? p`<div class=${x({ "panel-body": !0, compact: this.compact })}>
+                  ${this.renderPresets()}
+                  <div>
+                    <kt-calendar
+                      part="calendar"
+                      .value=${this.value}
+                      ?range=${this.range}
+                      months=${this.range && !this.compact ? 2 : 1}
+                      min=${this.min}
+                      max=${this.max}
+                      locale=${this.locale}
+                      label=${this.label}
+                      @kt-change=${this.onCalendarChange}
+                    ></kt-calendar>
+                    ${this.range ? d : p`<div class="footer">
+                            <button
+                              type="button"
+                              class="today"
+                              ?disabled=${this.outOfBounds(k(m(), m()))}
+                              @click=${() => this.apply(C(m()))}
+                            >
+                              ${t.presetToday}
+                            </button>
+                          </div>`}
+                  </div>
+                </div>` : d}
         </div>
       </div>`;
   }
-}
+};
+a([
+  S("input")
+], i.prototype, "input");
+a([
+  S("kt-calendar")
+], i.prototype, "calendar");
+a([
+  h()
+], i.prototype, "open");
+a([
+  h()
+], i.prototype, "text");
+a([
+  h()
+], i.prototype, "editing");
+a([
+  h()
+], i.prototype, "typedError");
 a([
-  k(".trigger")
-], r.prototype, "trigger");
+  h()
+], i.prototype, "focused");
 a([
-  k("kt-calendar")
-], r.prototype, "calendar");
+  h()
+], i.prototype, "compact");
 a([
-  g()
-], r.prototype, "open");
+  h()
+], i.prototype, "placement");
 a([
-  g()
-], r.prototype, "placement");
+  s({ type: String, reflect: !0 })
+], i.prototype, "value");
 a([
-  o({ type: String, reflect: !0 })
-], r.prototype, "value");
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "range");
 a([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "range");
+  s({ type: String })
+], i.prototype, "min");
 a([
-  o({ type: String })
-], r.prototype, "min");
+  s({ type: String })
+], i.prototype, "max");
 a([
-  o({ type: String })
-], r.prototype, "max");
+  s({ type: String })
+], i.prototype, "name");
 a([
-  o({ type: String })
-], r.prototype, "name");
+  s({ type: String })
+], i.prototype, "label");
 a([
-  o({ type: String })
-], r.prototype, "label");
+  s({ type: String })
+], i.prototype, "placeholder");
 a([
-  o({ type: String })
-], r.prototype, "placeholder");
+  s({ type: String })
+], i.prototype, "locale");
 a([
-  o({ type: String })
-], r.prototype, "locale");
+  s({ type: String, reflect: !0 })
+], i.prototype, "size");
 a([
-  o({ type: String, reflect: !0 })
-], r.prototype, "size");
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
 a([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
+  h()
+], i.prototype, "formDisabled");
 a([
-  g()
-], r.prototype, "formDisabled");
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "required");
 a([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "required");
+  s({ type: Boolean })
+], i.prototype, "clearable");
 a([
-  o({ type: Boolean })
-], r.prototype, "clearable");
+  s({ attribute: !1 })
+], i.prototype, "presets");
 a([
-  o({ type: String, reflect: !0 })
-], r.prototype, "error");
-$("kt-date-picker", r);
+  s({ type: String, reflect: !0 })
+], i.prototype, "error");
+let N = i;
+R("kt-date-picker", N);
 export {
-  r as KtDatePicker
+  N as KtDatePicker
 };
 //# sourceMappingURL=kt-date-picker.js.map