import { r as h, c as p, h as a, H as f, g as m } from "./index.61732cef.js";
import { c as b } from "./index-orsBiyT_.fc4357c3.js";
import { f as s, I as n, i as l, p as c } from "./index-D3UoejeY.7db8c51e.js";
import { D as y } from "./media-query.service-CCYT6DU8.f0931fdc.js";
import { i as u } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const k = () => ".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}", r = "yyyy-MM-dd", v = class {
  constructor(e) {
    h(this, e), this.invalidInput = p(this, "invalidInput", 7), this.valueChange = p(this, "valueChange", 7), this.datePickerDisableDate = () => !1, this.datePickerLabel = "Date picker", this.datePickerTriggerLabel = "Open date picker", this.firstDayOfWeek = 0, this.format = "yyyy-MM-dd", this.locale = "en-US", this.placeholder = "yyyy-mm-dd", this.preferredInputMode = "input", this.iconSize = 24, this.isInPickOnlyMode = !1, this.mediaQueryUnsubscribe = () => {
    }, this.onClick = (t) => {
      t.preventDefault(), !this.readonly && this.preferredInputMode === "pick" && (this.pickerPopover.open(this.el), u() || this.focus());
    }, this.onMouseDown = () => {
      this.readonly || this.preferredInputMode === "pick" && this.pickerPopover.close();
    }, this.onFocus = (t) => {
      this.handleAutoSelect(t);
    }, this.onBlur = (t) => {
      if (this.readonly)
        return;
      const i = this.pickerPopover.contains(t.relatedTarget);
      this.setIsInPickOnlyMode(!i);
    }, this.onPickDate = (t) => {
      const i = t.detail, o = s(i, r);
      this.value = o, this.inputEl.value = s(i, this.pattern), this.mask.updateValue(), this.setIsInPickOnlyMode(!0), this.pickerPopover.close();
    };
  }
  componentWillLoad() {
    const e = Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);
    this.id = `swirl-date-input-${e}`, this.setIsInPickOnlyMode(!0);
  }
  componentDidLoad() {
    this.setupMask(), this.mediaQueryUnsubscribe = y.subscribe((e) => {
      this.updateIconSize(e);
    }), this.autoFocus && this.focus();
  }
  disconnectedCallback() {
    var e;
    (e = this.mask) == null || e.destroy(), this.mediaQueryUnsubscribe();
  }
  watchFormat() {
    this.setupMask();
  }
  watchValue(e, t) {
    e !== t && this.updateValue();
  }
  async openPicker() {
    this.pickerPopover.open(this.el);
  }
  focus() {
    setTimeout(() => {
      this.inputEl.focus();
    });
  }
  updateIconSize(e) {
    this.iconSize = e ? 20 : 24;
  }
  handleAutoSelect(e) {
    if (!this.autoSelect) {
      setTimeout(() => {
        e.target && e.target instanceof HTMLInputElement && e.target.setSelectionRange && e.target.setSelectionRange(0, 0);
      });
      return;
    }
    e.target && e.target instanceof HTMLInputElement && e.target.select();
  }
  setIsInPickOnlyMode(e) {
    this.preferredInputMode === "pick" && u() ? this.isInPickOnlyMode = e : this.isInPickOnlyMode = !1;
  }
  setupMask() {
    var e;
    (e = this.mask) == null || e.destroy(), this.pattern = this.format.replace(new RegExp("(?<!d)d(?!d)", "g"), "dd").replace(new RegExp("(?<!M)M(?!M)", "g"), "MM").replace(new RegExp("(?<!y)y(?!y)", "g"), "yyyy").replace(new RegExp("(?<!y)yyy(?!y)", "g"), "yyyy"), this.pattern || (this.pattern = r), this.mask = n(this.inputEl, {
      mask: Date,
      pattern: this.pattern.replace(/([^A-Za-z0-9])/g, "$1`"),
      autofix: "pad",
      lazy: !0,
      overwrite: !0,
      eager: "append",
      blocks: {
        dd: {
          mask: n.MaskedRange,
          from: 1,
          to: 31,
          maxLength: 2
        },
        MM: {
          mask: n.MaskedRange,
          from: 1,
          to: 12,
          maxLength: 2
        },
        yy: {
          mask: n.MaskedRange,
          from: 0,
          to: 99,
          maxLength: 2
        },
        yyyy: {
          mask: n.MaskedRange,
          from: 1e3,
          to: 9999,
          maxLength: 4
        }
      },
      format: (t) => {
        const i = s(t, this.pattern);
        return l(t) ? (this.value = s(t, r), i) : (this.invalidInput.emit(t.toString()), "");
      },
      parse: (t) => c(t, this.pattern, new Date())
    }), this.mask.on("accept", () => {
      this.mask.value === "" && (this.value = "", this.valueChange.emit(""));
    }), this.updateValue();
  }
  updateValue() {
    if (this.value) {
      const e = c(this.value, r, new Date());
      if (l(e)) {
        const t = s(e, this.pattern);
        this.mask.value = t, this.valueChange.emit(this.value);
      } else
        this.invalidInput.emit(this.value);
    }
  }
  render() {
    const e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = Boolean(this.value) ? c(this.value, r, new Date()) : void 0, i = l(t) ? t : void 0, o = b("date-input", {
      "date-input--inline": this.inline
    });
    return a(f, { key: "a0da84104bcb61a24118a4d680b2328540421543" }, a("div", { key: "49c7a0294845d19b597a2bfdeb6d0feaeaa7f7a7", class: o }, a("input", { key: "2bb01064ef5020e0d5bc5afdbc434720d23d2025", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (d) => this.inputEl = d, required: this.required, type: "text" }), !this.readonly && a("swirl-popover-trigger", { key: "c6432dc2b7c6ea7bf39f81b03da51e8e9a4e6dfd", swirlPopover: `popover-${this.id}` }, a("button", { key: "63aea9df9d7168047cacc5a8ce5c58f1861024c1", "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, a("swirl-icon-today", { key: "b446e718ae6b68b612233c84cf5f1d53ee725a5a", size: this.iconSize })))), !(this.disabled || this.readonly) && a("swirl-popover", { key: "c51d7fd5c0934132eed623227d249d32bb52fcdb", animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (d) => this.pickerPopover = d }, a("swirl-date-picker", { key: "5d895146a03eeaa0fb6069a71eccee198f27605d", disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: i, startDate: i })));
  }
  get el() {
    return m(this);
  }
  static get watchers() {
    return {
      format: [{
        watchFormat: 0
      }],
      value: [{
        watchValue: 0
      }]
    };
  }
};
v.style = k();
export {
  v as swirl_date_input
};
