@skf-design-system/ui-components 1.0.1-beta.1 → 1.0.2-beta.1

package/dist/components/date-picker-input/datepicker-input.component.js

@@ -1,227 +1,263 @@
-import { dateFormatter as v, isPopoverOpen as S, debounce as E, isDate as $ } from "./datepicker-input.helpers.js";
-import { computePosition as C, flip as I, offset as M } from "@floating-ui/dom";
-import { FormBase as O } from "../../internal/components/formBase.js";
-import { PopoverController as T } from "../../internal/controllers/popover.controller.js";
-import { hintSeverity as B } from "../../internal/helpers/hintSeverity.js";
-import { watch as P } from "../../internal/helpers/watch.js";
+import { dateFormatter as v, is as f, isPopoverOpen as S, debounce as E } from "./datepicker-input.helpers.js";
+import "../icon/icon.js";
+import { computePosition as C, flip as I, offset as O } from "@floating-ui/dom";
+import { FormBase as M } from "../../internal/components/formBase.js";
+import "../../internal/components/hint/hint.js";
+import { PopoverController as P } from "../../internal/controllers/popover.controller.js";
+import { hintSeverity as T } from "../../internal/helpers/hintSeverity.js";
+import { watch as B } from "../../internal/helpers/watch.js";
 import { Asterisk as x } from "../../internal/templates/asterisk.js";
-import { Temporal as F } from "@js-temporal/polyfill";
-import q from "../../styles/component.styles.js";
-import { html as m, nothing as g } from "lit";
-import { property as d, state as b, query as y, queryAssignedNodes as R } from "lit/decorators.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { live as k } from "lit/directives/live.js";
+import { Temporal as w } from "@js-temporal/polyfill";
+import { componentStyles as L } from "../../styles/component.styles.js";
+import { nothing as g, html as y } from "lit";
+import { property as h, state as $, query as b, queryAssignedNodes as R } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { live as F } from "lit/directives/live.js";
 import "../date-picker/datepicker.js";
-import { styles as j } from "./datepicker-input.styles.js";
-var L = Object.defineProperty, V = Object.getOwnPropertyDescriptor, n = (D, t, e, a) => {
-  for (var l = a > 1 ? void 0 : a ? V(t, e) : t, o = D.length - 1, h; o >= 0; o--)
-    (h = D[o]) && (l = (a ? h(t, e, l) : h(l)) || l);
-  return a && l && L(t, e, l), l;
+import { styles as A } from "./datepicker-input.styles.js";
+var j = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (D, e, t, a) => {
+  for (var l = a > 1 ? void 0 : a ? q(e, t) : e, n = D.length - 1, d; n >= 0; n--)
+    (d = D[n]) && (l = (a ? d(e, t, l) : d(l)) || l);
+  return a && l && j(e, t, l), l;
 };
-const _ = class _ extends O {
+const _ = class _ extends M {
   constructor() {
-    super(), this.popoverController = new T(this), this.id = "skf-datepicker-input", this.placeholder = "Select date", this.range = !1, this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this._handleSelectedDate = (t) => {
-      console.log("selected-date-changed event fired", this.value || "no value", t.detail), this.pristine = !1, this._internals.setFormValue(this.value ?? ""), this.validateInput();
-    }, this._handleDateSelected = (t) => {
-      if (this.range && "start" in t.detail.date && "end" in t.detail.date) {
-        const e = t.detail.date.start, a = t.detail.date.end;
-        this.value = `${v(e)},${v(a)}`, this.selectedRangeDates = { start: e, end: a };
-      } else !this.range && t.detail.date instanceof Date && (this.value = v(t.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
+    super(), this.popoverController = new P(this), this.id = "skf-datepicker-input", this.placeholder = "YYYY-MM-DD", this.range = !1, this.size = "md", this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this.abortController = new AbortController(), this.abortSignal = this.abortController.signal, this._handleSelectedDate = () => {
+      this.pristine = !1, this._internals.setFormValue(this.value ?? ""), this.validateInput();
+    }, this._handleDateSelected = (e) => {
+      if (this.range && "start" in e.detail.date && "end" in e.detail.date) {
+        const t = e.detail.date.start, a = e.detail.date.end;
+        this.value = `${v(t)},${v(a)}`, this.selectedRangeDates = { start: t, end: a };
+      } else !this.range && e.detail.date instanceof Date && (this.value = v(e.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
         this.$popover.hidePopover();
       }));
+    }, this._handleKeyboardEvents = (e) => {
+      var a, l;
+      const t = e.target.closest("input");
+      if (t) {
+        if ((t.selectionStart ?? 0) < t.value.length && /[[0-9-]/.test(e.key)) {
+          const n = t.selectionStart ?? 0, u = t.value.split("").slice(0, n);
+          t.value = u.join("");
+        }
+        if (t.name.endsWith("-end") && (e.key === "Backspace" && t.value.length === 0 || t.selectionStart === 0 && e.key === "ArrowLeft") && (e.preventDefault(), this.$input.focus()), e.key === "Tab" && !e.shiftKey && t.name.endsWith("-end")) {
+          e.preventDefault();
+          const d = (a = this.$popover.childNodes[1].shadowRoot) == null ? void 0 : a.querySelector("skf-datepicker-calendar"), u = (l = d == null ? void 0 : d.shadowRoot) == null ? void 0 : l.querySelector("button");
+          u == null || u.focus();
+        }
+        if ((t.value.length === 4 || t.value.length === 7) && /[[0-9]/.test(e.key) && (t.value = `${t.value}-${e.key}`, e.preventDefault()), e.key === "Escape")
+          if (t.blur(), this.$popover.hidePopover(), this.range) {
+            const n = this.$input.value, d = this.$input_range_end.value;
+            if (!f(n, d).date()) return;
+            this.$datepicker.selectedDateRange = {
+              start: new Date(n),
+              end: new Date(d)
+            }, this.$datepicker.emit("selected-date-changed", {
+              detail: { date: new Date(n) }
+            });
+          } else {
+            if (!t.value || !f(t.value).date()) return;
+            this.$datepicker.emit("selected-date-changed", {
+              detail: { date: new Date(t.value) }
+            });
+          }
+        e.key === "Enter" && (t.blur(), this.$popover.hidePopover());
+      }
     }, this._handleFocus = () => {
+      this.showPopover();
+    }, this.showPopover = () => {
       if (S(this.$popover)) return;
       E(() => {
         this.$popover.showPopover(), this._animatePopover({ show: !0 });
-      }, 200)();
-    }, this._handleBlur = (t) => {
-      const e = t.target;
-      if (!e.name.endsWith("-end") && !this.range) return;
-      if ($(e.value) && this.$datepicker.emit("selected-date-changed", {
-        detail: { date: new Date(e.value) }
-      }), e.name.endsWith("-end") || !this.range) {
-        const l = t.relatedTarget;
-        a(this, l);
-      }
-      function a(l, o) {
-        var h, c;
-        if (o && !l.contains(o)) {
-          console.log("Tab out detected");
-          const r = (h = l.$popover.childNodes[1].shadowRoot) == null ? void 0 : h.querySelector("skf-datepicker-calendar"), p = (c = r == null ? void 0 : r.shadowRoot) == null ? void 0 : c.querySelector("button");
-          p == null || p.focus();
-        }
-      }
+      }, 200)(), this.addEventListener("focusout", this.hidePopover, { once: !0, signal: this.abortSignal });
+    }, this.hidePopover = () => {
+      var t;
+      this.removeEventListener("focusout", this.hidePopover), ((t = document.activeElement) == null ? void 0 : t.closest("skf-datepicker-input")) !== this && this.$popover.hidePopover();
+    }, this._handleBlur = (e) => {
+      !e.target.name.endsWith("-end") && this.range;
     }, this._handleClose = () => {
       this.$anchor.blur();
     }, this.clearInput = () => {
       this.value = "", this.$datepicker.clearSelection();
     }, this.clear = () => {
       this.clearInput(), this._toggleClearButton(!1);
-    }, this._handleInput = (t) => {
-      const e = t.target;
-      e.setCustomValidity(this.customError ?? ""), this.focusTomeoutId && clearTimeout(this.focusTomeoutId), this.$datepicker.date = e.value, this.range ? (this.$datepicker.selectedDateRange = {
-        start: $(this.$input.value) ? new Date(this.$input.value) : null,
-        end: $(this.$input_range_end.value) ? new Date(this.$input_range_end.value) : null
-      }, $(this.$input.value) && (this.focusTomeoutId = setTimeout(() => {
-        this.$input_range_end.focus();
-      }, 2e3))) : this.$datepicker.selectedDate = new Date(e.value), this.validateOn === "input" && (this._pristine = !1, this.validateInput());
-    }, this._toggleClearButton = (t = !1) => {
-      this.showClearbutton = t;
+    }, this._handleInput = (e) => {
+      const t = e.target, a = String(t.value).replace(/[^0-9-]/g, "");
+      if (t.value = a, t.setCustomValidity(this.customError ?? ""), !!f(t.value).ISO()) {
+        if (this.focusTimeoutId && clearTimeout(this.focusTimeoutId), this.$datepicker.date = t.value, this.range) {
+          this.$datepicker.selectedDateRange = {
+            start: f(this.$input.value).ISO() ? new Date(this.$input.value) : null,
+            end: f(this.$input_range_end.value).ISO() ? new Date(this.$input_range_end.value) : null
+          };
+          const l = Object.values(this.$datepicker.selectedDateRange).filter(Boolean).map((n) => new Date(n).toLocaleDateString("en-CA")).join();
+          this.value = l, f(this.$input.value).ISO() && (this.focusTimeoutId = setTimeout(() => {
+            this.$input_range_end.focus();
+          }, 200));
+        } else
+          this.$datepicker.selectedDate = new Date(t.value), this.$datepicker.emit("selected-date-changed", {
+            detail: { date: new Date(t.value) }
+          });
+        this.validateOn === "input" && (this._pristine = !1, this.validateInput());
+      }
+    }, this._toggleClearButton = (e = !1) => {
+      this.showClearbutton = e;
     }, this.reposition = async () => {
-      const { x: t, y: e } = await C(this.$anchor, this.$popover, {
+      const { x: e, y: t } = await C(this.$anchor, this.$popover, {
         placement: "bottom-start",
-        middleware: [I(), M(0)],
+        middleware: [I(), O(0)],
         strategy: "fixed"
       });
       Object.assign(this.$popover.style, {
-        left: `${String(t)}px`,
-        top: `${String(e)}px`
+        left: `${String(e)}px`,
+        top: `${String(t)}px`
       });
     }, this.addEventListener("skf-datepicker-selected", this._handleDateSelected), this.addEventListener("reset", () => {
       this.clearInput(), this.validateInput();
     });
   }
-  set customInvalid(t) {
-    this.customError = t || "";
+  set customInvalid(e) {
+    this.customError = e ?? "";
   }
   get customInvalid() {
     return this.customError;
   }
   connectedCallback() {
-    var t;
-    super.connectedCallback(), this._init_date = (t = this.value) == null ? void 0 : t.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
+    var e;
+    super.connectedCallback(), this._init_date = (e = this.value) == null ? void 0 : e.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.abortController.abort();
   }
   firstUpdated() {
-    var t;
-    this.$datepicker.date = this._init_date ? F.PlainDate.from(this._init_date).toString() : F.Now.plainDateISO().toString(), this.range ? this.$datepicker.selectedDateRange = {
+    var e;
+    this.$datepicker.date = this._init_date ? w.PlainDate.from(this._init_date).toString() : w.Now.plainDateISO().toString(), this.range ? this.$datepicker.selectedDateRange = {
       start: this._init_date ? new Date(this._init_date) : null,
-      end: (t = this.value) != null && t.split(",")[1] ? new Date(this.value.split(",")[1]) : null
-    } : this.$datepicker.selectedDate = this._init_date ? new Date(this._init_date) : void 0, this.validateInput();
+      end: (e = this.value) != null && e.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    } : this.$datepicker.selectedDate = this._init_date ? new Date(this._init_date) : void 0, this.hint && !this.hasAttribute("hint") && this.setAttribute("hint", this.hint), this.validateInput();
   }
-  attributeChangedCallback(t, e, a) {
-    if (super.attributeChangedCallback(t, e, a), t === "custom-invalid")
+  attributeChangedCallback(e, t, a) {
+    if (super.attributeChangedCallback(e, t, a), e === "custom-invalid")
       if (typeof a == "string") {
-        const o = this.withFallback(a);
-        this._pristine = !1, this._internals.setValidity({ customError: !0 }, o), this.invalid = !0, this.hint = o, this.checkValidity();
+        const n = this.withFallback(a);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, n), this.invalid = !0, this.hint = n, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
   _handleValueChange() {
-    var t, e, a, l, o, h, c, i;
-    (t = this.value) != null && t.trim() || this.$datepicker.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v((e = this.value) == null ? void 0 : e.split(",")[0]), this.range ? (this.$datepicker.selectedDateRange = {
-      start: (o = this.value) != null && o.split(",")[0] ? new Date(this.value.split(",")[0]) : null,
-      end: (h = this.value) != null && h.split(",")[1] ? new Date(this.value.split(",")[1]) : null
-    }, this.$input_range_end.value = v((c = this.value) == null ? void 0 : c.split(",")[1]), this.$datepicker.date = ((i = this.value) == null ? void 0 : i.split(",")[0]) ?? "") : (this.$datepicker.selectedDate = (a = this.value) != null && a.split(",")[0] ? new Date(this.value.split(",")[0]) : void 0, this.$datepicker.date = ((l = this.value) == null ? void 0 : l.split(",")[0]) ?? ""), this.validateInput();
+    var e, t, a, l, n, d, u, i;
+    (e = this.value) != null && e.trim() || this.$datepicker.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v((t = this.value) == null ? void 0 : t.split(",")[0]), this.range ? (this.$datepicker.selectedDateRange = {
+      start: (n = this.value) != null && n.split(",")[0] ? new Date(this.value.split(",")[0]) : null,
+      end: (d = this.value) != null && d.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    }, this.$input_range_end.value = v((u = this.value) == null ? void 0 : u.split(",")[1]), this.$datepicker.date = ((i = this.value) == null ? void 0 : i.split(",")[0]) ?? "") : (this.$datepicker.selectedDate = (a = this.value) != null && a.split(",")[0] ? new Date(this.value.split(",")[0]) : void 0, this.$datepicker.date = ((l = this.value) == null ? void 0 : l.split(",")[0]) ?? ""), this.validateInput();
   }
   /** @internal */
-  async _animatePopover({ el: t = this.$popover, show: e }) {
-    return e && (t.style.opacity = "0", t.style.transform = "scaleY(0.5)"), new Promise((a) => {
+  async _animatePopover({ el: e = this.$popover, show: t }) {
+    return t && (e.style.opacity = "0", e.style.transform = "scaleY(0.5)"), new Promise((a) => {
       const l = [
         { opacity: 0, transform: "scaleY(0.5)" },
         { opacity: 1, transform: "scaleY(1)" }
-      ], o = e ? l : l.reverse();
+      ], n = t ? l : l.reverse();
       setTimeout(
         () => {
-          t.style.transformOrigin = "top";
-          const h = this.$popover.animate(o, {
+          e.style.transformOrigin = "top";
+          const d = this.$popover.animate(n, {
             duration: 100,
             easing: "linear",
             fill: "both"
           });
-          h.onfinish = () => {
+          d.onfinish = () => {
             a();
           };
         },
-        e ? 0 : 50
+        t ? 0 : 50
       );
     });
   }
   /** @internal consider sharing this functionality with input */
   validateInput() {
     if (this._internals.validity.customError) return;
-    let e = JSON.parse(JSON.stringify(this._internals.validity)), a = {};
+    let t = JSON.parse(JSON.stringify(this._internals.validity)), a = {};
     if (this.selectableFrom) {
-      const { validityFragment: i, errorMessageFragment: r } = l(this);
-      e = { ...e, ...i }, a = { ...a, ...r };
+      const { validityFragment: i, errorMessageFragment: o } = l(this);
+      t = { ...t, ...i }, a = { ...a, ...o };
     }
     if (this.selectableTo) {
-      const { validityFragment: i, errorMessageFragment: r } = o(this);
-      e = { ...e, ...i }, a = { ...a, ...r };
+      const { validityFragment: i, errorMessageFragment: o } = n(this);
+      t = { ...t, ...i }, a = { ...a, ...o };
     }
     if (this.range) {
-      const { validityFragment: i, errorMessageFragment: r } = h(this);
-      e = { ...e, ...i }, a = { ...a, ...r };
+      const { validityFragment: i, errorMessageFragment: o } = d(this);
+      t = { ...t, ...i }, a = { ...a, ...o };
     }
     if (this.required) {
-      const { validityFragment: i, errorMessageFragment: r } = c(this);
-      e = { ...e, ...i }, a = { ...a, ...r };
+      const { validityFragment: i, errorMessageFragment: o } = u(this);
+      t = { ...t, ...i }, a = { ...a, ...o };
     }
-    if (e.valid = !Object.values(e).some((i) => i), this.invalid = !1, e.valid)
-      this._internals.setValidity({ customError: this._internals.validity.customError });
+    if (t.valid = !Object.values(t).some((i) => i), this.invalid = !1, t.valid)
+      this._internals.setValidity({ customError: this._internals.validity.customError }), this.hint = this.getAttribute("hint") ?? "";
     else {
-      this.invalid = !this._pristine && !e.valid;
+      this.invalid = !this._pristine && !t.valid;
       let i;
-      for (i in e) {
-        const r = `data-${i.toString()}`;
-        if (e[i]) {
+      for (i in t) {
+        const o = `data-${i.toString()}`;
+        if (t[i]) {
           this.validationError = i.toString();
-          const p = this.hasAttribute(r) ? this.getAttribute(r) : a[i];
+          const c = this.hasAttribute(o) ? this.getAttribute(o) : a[i];
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            this.withFallback(p)
-          ), this.invalid && this.customErrorDisplay && this.checkValidity();
+            this.withFallback(c)
+          ), c && !this._pristine && (this.hint = c), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
     }
     function l(i) {
-      const r = { validityFragment: {}, errorMessageFragment: {} };
-      if (!i.selectableFrom) return r;
-      const p = new Date(i.selectableFrom);
-      if (new Date(i.$input.value) < p) {
-        const f = i.getAttribute("data-rangeunderflow") ?? "Date is out of range";
+      const o = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableFrom) return o;
+      const c = new Date(i.selectableFrom);
+      if (new Date(i.$input.value) < c) {
+        const m = i.getAttribute("data-rangeunderflow") ?? `Date is out of range. Earliest selectable date is ${i.selectableFrom}.`;
         return {
           validityFragment: { rangeUnderflow: !0, valid: !1 },
-          errorMessageFragment: { rangeUnderflow: f }
+          errorMessageFragment: { rangeUnderflow: m }
         };
       }
-      return r;
+      return o;
     }
-    function o(i) {
-      const r = { validityFragment: {}, errorMessageFragment: {} };
-      if (!i.selectableTo) return r;
-      const p = new Date(i.selectableTo);
-      if (new Date(i.$input.value) > p) {
-        const f = i.getAttribute("data-rangeoverflow") ?? "Date is out of range";
+    function n(i) {
+      const o = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableTo) return o;
+      const c = new Date(i.selectableTo);
+      if (new Date(i.$input.value) > c) {
+        const m = i.getAttribute("data-rangeoverflow") ?? `Date is out of range. Latest selectable date is ${i.selectableTo}.`;
         return {
           validityFragment: { rangeOverflow: !0, valid: !1 },
-          errorMessageFragment: { rangeOverflow: f }
+          errorMessageFragment: { rangeOverflow: m }
         };
       }
-      return r;
+      return o;
     }
-    function h(i) {
-      const r = { validityFragment: {}, errorMessageFragment: {} }, p = new Date(i.$input.value);
-      if (new Date(i.$input_range_end.value) < p) {
-        const f = i.getAttribute("data-rangeunderflow") ?? "Date is out of range";
+    function d(i) {
+      const o = { validityFragment: {}, errorMessageFragment: {} }, c = new Date(i.$input.value);
+      if (new Date(i.$input_range_end.value) < c) {
+        const m = i.getAttribute("data-rangeunderflow") ?? "End date cannot be before start date";
         return {
           validityFragment: { rangeUnderflow: !0, valid: !1 },
-          errorMessageFragment: { rangeUnderflow: f }
+          errorMessageFragment: { rangeUnderflow: m }
         };
       }
-      return r;
+      return o;
     }
-    function c(i) {
-      const r = { validityFragment: {}, errorMessageFragment: {} };
+    function u(i) {
+      const o = { validityFragment: {}, errorMessageFragment: {} };
       return !i.$input.value || i.range && !i.$input_range_end.value ? {
         validityFragment: { valueMissing: !0, valid: !1 },
         errorMessageFragment: { valueMissing: "This field is required" }
-      } : r;
+      } : o;
     }
   }
   render() {
-    var e, a, l, o, h, c, i, r;
-    const t = (this._defaultSlot.length === 0 || !((a = (e = this._defaultSlot[0]) == null ? void 0 : e.textContent) != null && a.trim())) && !this.label;
-    return m`
+    var t, a, l, n, d, u, i, o;
+    const e = (this._defaultSlot.length === 0 || !((a = (t = this._defaultSlot[0]) == null ? void 0 : t.textContent) != null && a.trim())) && !this.label;
+    return y`
 			<div
 				id="root"
 				@mouseenter=${() => {
@@ -232,67 +268,73 @@ const _ = class _ extends O {
     }}
 			>
 				<label>
-					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
+					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${e} id="label">
 						<slot>${this.label}</slot>
 						${this.required ? x(this.requiredLabel) : null}
 					</div>
 					<div id="input">
-						<div id="affix">
-							<input
-								?disabled=${this.disabled}
-								?readonly=${this.readonly}
-								.value=${k(
+						<input
+							?disabled=${this.disabled}
+							?readonly=${this.readonly}
+							.value=${F(
       this.range ? v((l = this.value) == null ? void 0 : l.split(",")[0]) : v(this.value)
     )}
-								@blur=${this._handleBlur}
-								@click=${this._handleFocus}
-								@focus=${this._handleFocus}
-								@input=${this._handleInput}
-								aria-describedby=${u((o = this.hint) != null && o.trim() ? "hint" : g)}
-								aria-errormessage=${u((h = this.hint) != null && h.trim() ? "hint" : g)}
-								aria-invalid=${!!this.invalid}
-								autocomplete="off"
-								data-testid="field-input"
-								inputmode=${u(this.inputMode)}
-								name=${u(this.name)}
-								placeholder=${u(this.placeholder)}
-								type="date"
-							/>
-						</div>
-						${this.range ? m`<div style="align-content:center">→</div>
+							@blur=${this._handleBlur}
+							@click=${this._handleFocus}
+							@focus=${this._handleFocus}
+							@input=${this._handleInput}
+							@keydown=${this._handleKeyboardEvents}
+							aria-describedby=${p((n = this.hint) != null && n.trim() ? "hint" : g)}
+							aria-errormessage=${p((d = this.hint) != null && d.trim() ? "hint" : g)}
+							aria-invalid=${!!this.invalid}
+							autocomplete="off"
+							data-testid="field-input"
+							inputmode=${p(this.inputMode)}
+							maxlength="10"
+							name=${this.name ?? "calendar"}
+							placeholder=${p(this.placeholder)}
+							type="text"
+						/>
+						${this.range ? y`
+									<skf-icon name="arrowRight"></skf-icon>
 									<input
 										?disabled=${this.disabled}
 										?readonly=${this.readonly}
-										.value=${k(v((c = this.value) == null ? void 0 : c.split(",")[1]))}
+										.value=${F(v((u = this.value) == null ? void 0 : u.split(",")[1]))}
 										@blur=${this._handleBlur}
 										@click=${this._handleFocus}
 										@focus=${this._handleFocus}
 										@input=${this._handleInput}
-										aria-describedby=${u((i = this.hint) != null && i.trim() ? "hint" : g)}
-										aria-errormessage=${u((r = this.hint) != null && r.trim() ? "hint" : g)}
+										@keydown=${this._handleKeyboardEvents}
+										aria-describedby=${p((i = this.hint) != null && i.trim() ? "hint" : g)}
+										aria-errormessage=${p((o = this.hint) != null && o.trim() ? "hint" : g)}
 										aria-invalid=${!!this.invalid}
 										autocomplete="off"
 										data-testid="field-input-range-end"
-										inputmode=${u(this.inputMode)}
-										name=${u(String(this.name) + "-end")}
-										placeholder=${u(this.placeholder)}
-										type="date"
-									/>` : g}
-						${this.showClearbutton ? m`<button class="password skf-icon-host" type="button" @click=${this.clear}>
-									<skf-icon name="close" size="sm"></skf-icon>
-								</button>` : m`
+										inputmode=${p(this.inputMode)}
+										maxlength="10"
+										name=${(this.name ?? "calendar") + "-end"}
+										placeholder=${p(this.placeholder)}
+										type="text"
+									/>
+								` : g}
+						${this.showClearbutton ? y`
+									<button class="password skf-icon-host" type="button" @click=${this.clear}>
+										<skf-icon name="close" size="sm"></skf-icon>
+									</button>
+								` : y`
 									<button class="password skf-icon-host" type="button">
 										<skf-icon name="calendarMonth" size="sm"></skf-icon>
 									</button>
 								`}
 					</div>
 				</label>
-				${this.hint && m`
+				${this.hint && y`
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${u(B(this.severity, this.invalid))}
-						>${this.customInvalid ? this.customInvalid : this.hint}
+						severity=${p(T(this.invalid, this.severity))}
+						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
 			</div>
@@ -301,96 +343,99 @@ const _ = class _ extends O {
 				<skf-datepicker
 					?range=${this.range}
 					id=${this.id}
-					invalid-dates=${u(this.invalidDates)}
-					selectable-from=${u(this.selectableFrom)}
-					selectable-to=${u(this.selectableTo)}
+					invalid-dates=${p(this.invalidDates)}
+					selectable-from=${p(this.selectableFrom)}
+					selectable-to=${p(this.selectableTo)}
 				></skf-datepicker>
 			</div>
 		`;
   }
 };
-_.styles = [q, j];
+_.styles = [L, A];
 let s = _;
-n([
-  d({ attribute: "custom-invalid", reflect: !0 })
+r([
+  h({ attribute: "custom-invalid", reflect: !0 })
 ], s.prototype, "customInvalid", 1);
-n([
-  d({ type: String })
+r([
+  h({ type: String })
 ], s.prototype, "id", 2);
-n([
-  d()
+r([
+  h()
 ], s.prototype, "label", 2);
-n([
-  d({ type: Boolean, attribute: "hide-label" })
+r([
+  h({ type: Boolean, attribute: "hide-label" })
 ], s.prototype, "hideLabel", 2);
-n([
-  d()
+r([
+  h()
 ], s.prototype, "hint", 2);
-n([
-  d({ attribute: "invalid-dates" })
+r([
+  h({ attribute: "invalid-dates" })
 ], s.prototype, "invalidDates", 2);
-n([
-  d({ reflect: !0 })
+r([
+  h({ reflect: !0 })
 ], s.prototype, "name", 2);
-n([
-  d()
+r([
+  h()
 ], s.prototype, "placeholder", 2);
-n([
-  d({ type: Boolean })
+r([
+  h({ type: Boolean })
 ], s.prototype, "range", 2);
-n([
-  d({ type: Boolean })
+r([
+  h({ type: Boolean })
 ], s.prototype, "readonly", 2);
-n([
-  d({ attribute: "required-label" })
+r([
+  h({ attribute: "required-label" })
 ], s.prototype, "requiredLabel", 2);
-n([
-  d({ attribute: "selectable-from" })
+r([
+  h({ attribute: "selectable-from" })
 ], s.prototype, "selectableFrom", 2);
-n([
-  d({ attribute: "selectable-to" })
+r([
+  h({ attribute: "selectable-to" })
 ], s.prototype, "selectableTo", 2);
-n([
-  d({ reflect: !0 })
+r([
+  h({ reflect: !0 })
 ], s.prototype, "severity", 2);
-n([
-  d({ type: String, attribute: "validate-on" })
+r([
+  h({ reflect: !0 })
+], s.prototype, "size", 2);
+r([
+  h({ type: String, attribute: "validate-on" })
 ], s.prototype, "validateOn", 2);
-n([
-  d()
+r([
+  h()
 ], s.prototype, "value", 2);
-n([
-  b()
+r([
+  $()
 ], s.prototype, "_init_date", 2);
-n([
-  d({ type: Boolean, reflect: !0 })
+r([
+  h({ type: Boolean, reflect: !0 })
 ], s.prototype, "invalid", 2);
-n([
-  b()
+r([
+  $()
 ], s.prototype, "selectedRangeDates", 2);
-n([
-  b()
+r([
+  $()
 ], s.prototype, "showClearbutton", 2);
-n([
-  y("#popover")
+r([
+  b("#popover")
 ], s.prototype, "$popover", 2);
-n([
-  y("#input")
+r([
+  b("#input")
 ], s.prototype, "$anchor", 2);
-n([
-  y('input[data-testid="field-input"]')
+r([
+  b('input[data-testid="field-input"]')
 ], s.prototype, "$input", 2);
-n([
-  y('input[data-testid="field-input-range-end"]')
+r([
+  b('input[data-testid="field-input-range-end"]')
 ], s.prototype, "$input_range_end", 2);
-n([
-  y("skf-datepicker")
+r([
+  b("skf-datepicker")
 ], s.prototype, "$datepicker", 2);
-n([
+r([
   R({ flatten: !0 })
 ], s.prototype, "_defaultSlot", 2);
-n([
-  P("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+r([
+  B("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
 ], s.prototype, "_handleValueChange", 1);
 export {
   s as SkfDatePickerInput