@getflip/swirl-components-react 0.340.0 → 0.341.0

package/dist/swirl-date-input.entry.211a1d92.js

@@ -1,97 +0,0 @@
-import { r as f, c as d, h as a, H as b, g as m } from "./index.89ae7741.js";
-import { c as v } from "./index-orsBiyT_.fc4357c3.js";
-import { p as l, i as c, f as r, m as w } from "./maska-CSSJQ9ZE.996ba625.js";
-import { D as k } from "./media-query.service-Cx_VEA2f.c4de15e1.js";
-import { i as p } from "./utils-D_MUFqkF.654ff3ce.js";
-import "react";
-import "react-dom";
-const y = ".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}}", o = "yyyy-MM-dd", g = class {
-  constructor(e) {
-    f(this, e), this.invalidInput = d(this, "invalidInput", 7), this.valueChange = d(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.readonly = !1, this.mediaQueryUnsubscribe = () => {
-    }, this.onChange = (t) => {
-      const i = t.target.value;
-      i === "" && (this.value = void 0);
-      const s = l(i, this.format, new Date()), n = this.format.replace(/\\/g, "\\\\"), u = new RegExp(`^${n.replace(/[ydM]/g, "\\d")}$`);
-      if (!Boolean(i.match(u)))
-        return;
-      if (!c(s)) {
-        this.invalidInput.emit(i);
-        return;
-      }
-      const h = r(s, o);
-      this.value = h;
-    }, this.onInput = (t) => {
-      this.onChange(t);
-    }, this.onClick = (t) => {
-      t.preventDefault(), this.preferredInputMode === "pick" && (this.pickerPopover.open(this.el), p() || this.focus());
-    }, this.onMouseDown = () => {
-      this.preferredInputMode === "pick" && this.pickerPopover.close();
-    }, this.onFocus = (t) => {
-      this.handleAutoSelect(t);
-    }, this.onBlur = (t) => {
-      const i = this.pickerPopover.contains(t.relatedTarget);
-      this.setReadOnly(!i);
-    }, this.onPickDate = (t) => {
-      const i = t.detail, s = r(i, o);
-      this.value = s, this.setReadOnly(!0), this.pickerPopover.close();
-    };
-  }
-  componentWillLoad() {
-    const e = Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);
-    this.id = `swirl-date-input-${e}`, this.setReadOnly(!0);
-  }
-  componentDidLoad() {
-    this.setupMask(), this.mediaQueryUnsubscribe = k.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.valueChange.emit(e);
-  }
-  focus() {
-    setTimeout(() => {
-      this.inputEl.focus();
-    });
-  }
-  updateIconSize(e) {
-    this.iconSize = e ? 20 : 24;
-  }
-  handleAutoSelect(e) {
-    !this.autoSelect || e.target.select();
-  }
-  setReadOnly(e) {
-    this.preferredInputMode === "pick" && p() ? this.readonly = e : this.readonly = !1;
-  }
-  setupMask() {
-    var e;
-    (e = this.mask) == null || e.destroy(), this.mask = w.create(`#${this.id}`, {
-      mask: this.format.replace(/[ydM]/g, "#")
-    });
-  }
-  render() {
-    const e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = Boolean(this.value) ? l(this.value, o, new Date()) : void 0, i = c(t) ? r(t, this.format) : void 0, s = v("date-input", {
-      "date-input--inline": this.inline
-    });
-    return a(b, { key: "126d7f739f068da588f7a4dae48894add863129e" }, a("div", { key: "aeffbf5ec53eacf52b72c28bcd56fe17f8474b94", class: s }, a("input", { key: "b4e40c946e3d489345f3c51517025d5cabc13819", "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.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (n) => this.inputEl = n, required: this.required, type: "text", value: i }), a("swirl-popover-trigger", { key: "6cc4106b6075900a77e0f71eb0d9144c6899cb30", swirlPopover: `popover-${this.id}` }, a("button", { key: "18b15c30971d055d43acf49a82a3fbb0e019f17b", "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, a("swirl-icon-today", { key: "31270c4f23e3b3579a1a7225b992c5c796097a01", size: this.iconSize })))), !this.disabled && a("swirl-popover", { key: "aeecbbcb2e1078ad016e52c8cf952d3e6ddfcfad", animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (n) => this.pickerPopover = n }, a("swirl-date-picker", { key: "2b134cb9589c1579b95966ccfe226b3a1da454c5", disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: t, startDate: t })));
-  }
-  get el() {
-    return m(this);
-  }
-  static get watchers() {
-    return {
-      format: ["watchFormat"],
-      value: ["watchValue"]
-    };
-  }
-};
-g.style = y;
-export {
-  g as swirl_date_input
-};