@nylas/react 1.3.5 → 1.4.0

package/dist/globe-icon_2.entry-c7ae78cc.js

@@ -0,0 +1,200 @@
+import { r as y, h as r, b as o, c as h, W as c, X as m, L as g, Y as f, Z as u, M as p, H as b, g as x } from "./index-04630615.js";
+import { L as l } from "./constants-f5ba52b9-40ab2ded.js";
+import { c as w } from "./customParseFormat-39eacb44-eeffe2bb.js";
+import "react";
+import "react/jsx-runtime";
+import "react-dom";
+const v = ".sc-globe-icon-h{display:flex}", k = v, T = class {
+  constructor(t) {
+    y(this, t), this.width = "16", this.height = "16";
+  }
+  render() {
+    return r("svg", { key: "e49a7c6af179ae7509e706ac54dab240917fa5ad", xmlns: "http://www.w3.org/2000/svg", width: this.width, height: this.height, viewBox: "0 0 16 16", fill: "none" }, r("path", { key: "20930ecebcee8b313e00f572da95d60cd6437945", d: "M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 3C8.37372 3 8.87543 3.35608 9.31258 4.31781C9.4073 4.52619 9.49448 4.75446 9.57265 5H6.42735C6.50552 4.75446 6.5927 4.52619 6.68742 4.31781C7.12457 3.35608 7.62628 3 8 3ZM5.77705 3.90401C5.62614 4.23601 5.49428 4.6038 5.38411 5H3.99963C4.52341 4.30269 5.22525 3.74677 6.03766 3.39978C5.94287 3.56117 5.85596 3.7304 5.77705 3.90401ZM5.16299 6C5.05694 6.6275 5 7.30146 5 8C5 8.69854 5.05694 9.3725 5.16299 10H3.41604C3.14845 9.38754 3 8.7111 3 8C3 7.2889 3.14845 6.61246 3.41604 6H5.16299ZM5.38411 11C5.49428 11.3962 5.62614 11.764 5.77705 12.096C5.85596 12.2696 5.94287 12.4388 6.03766 12.6002C5.22525 12.2532 4.52341 11.6973 3.99963 11H5.38411ZM6.42735 11H9.57265C9.49448 11.2455 9.4073 11.4738 9.31258 11.6822C8.87543 12.6439 8.37372 13 8 13C7.62628 13 7.12457 12.6439 6.68742 11.6822C6.5927 11.4738 6.50552 11.2455 6.42735 11ZM9.82134 10H6.17866C6.06438 9.3892 6 8.71396 6 8C6 7.28604 6.06438 6.6108 6.17866 6H9.82134C9.93562 6.6108 10 7.28604 10 8C10 8.71396 9.93562 9.3892 9.82134 10ZM10.6159 11H12.0004C11.4766 11.6973 10.7747 12.2532 9.96234 12.6002C10.0571 12.4388 10.144 12.2696 10.2229 12.096C10.3739 11.764 10.5057 11.3962 10.6159 11ZM12.584 10H10.837C10.9431 9.3725 11 8.69854 11 8C11 7.30146 10.9431 6.6275 10.837 6H12.584C12.8516 6.61246 13 7.2889 13 8C13 8.7111 12.8516 9.38754 12.584 10ZM9.96234 3.39978C10.7747 3.74677 11.4766 4.30269 12.0004 5H10.6159C10.5057 4.6038 10.3739 4.23601 10.2229 3.90401C10.144 3.7304 10.0571 3.56117 9.96234 3.39978Z", fill: "currentColor" }));
+  }
+};
+T.style = k;
+const C = ':host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.time-picker{display:inline-block;width:150px;font-family:var(--nylas-font-family);position:relative}@media screen and (max-width: 768px){.time-picker{width:auto}}.time-picker input{width:150px;height:48px;text-align:center;font-size:16px;font-family:inherit;cursor:pointer;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.time-picker input{width:88px}}@media screen and (max-width: 504px){.time-picker input{width:68px;font-size:15px}}.time-picker input.focus{background:transparent}.time-picker input:hover,.time-picker input:active{border:1px solid var(--nylas-primary)}.time-picker input:active{outline:2px solid var(--nylas-primary)}.time-picker input span.open{transform:rotate(90deg)}.time-picker input span.closed{transform:rotate(270deg)}.time-picker input.error{border:1px solid var(--nylas-error)}.time-picker p.error{color:var(--nylas-error);font-size:0.875rem;margin:0}.times{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;border:1px solid #ddd;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.times ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.times ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:center;cursor:pointer}.times ul li.focused{background-color:var(--nylas-base-100)}.times ul li:hover,.times ul li:focus{background-color:var(--nylas-base-100)}.times ul li label{display:flex;align-items:center;gap:0.5rem}.times ul li label input{margin:0}', I = C;
+o.extend(w);
+const S = class {
+  constructor(t) {
+    y(this, t), this.timeChange = h(this, "timeChange", 7), this.timeWindowFormError = h(this, "timeWindowFormError", 7), this.time = void 0, this.minimumStartTime = null, this.placeholder = "hh:mmam/pm", this.name = void 0, this.hasError = !1, this.language = l.en, this.err = "", this.showTimes = !1, this.ariaActivedescendant = "", this.times = this.generateTimes(), this.shouldAutoScroll = !1;
+  }
+  handleOutsideClick(t) {
+    !t.composedPath().includes(this.el) && this.showTimes && (this.showTimes = !1);
+  }
+  minimumStartTimeChangedHandler() {
+    if (this.minimumStartTime) {
+      let t = o().hour(parseInt(this.minimumStartTime)).minute(parseInt(this.minimumStartTime.slice(-4, -2)));
+      this.minimumStartTime.slice(-2).toLowerCase() === "pm" && parseInt(this.minimumStartTime) !== 12 ? t = t.add(12, "hour") : this.minimumStartTime.slice(-2).toLowerCase() === "am" && parseInt(this.minimumStartTime) === 12 && (t = t.subtract(12, "hour")), this.times = this.generateTimes();
+      const e = o(this.times[0].value, "hh:mma");
+      o(this.time, "hh:mma").isBefore(e) && (this.err = "Invalid", this.timeWindowFormError.emit({
+        key: this.el.id,
+        message: "Invalid"
+      }));
+    }
+  }
+  componentDidRender() {
+    if (this.showTimes && this.shouldAutoScroll) {
+      const t = c(this.time), e = this.times.findIndex((i) => i.value === t);
+      e > -1 && (this.shouldAutoScroll = !1, this.scrollToViewWithinParent(e));
+      return;
+    }
+  }
+  handleTimeChange(t, e) {
+    const i = e.split(":");
+    i[0] === "00" && i[1].slice(-2) == "pm" && (this.err = "Invalid", this.timeWindowFormError.emit({
+      key: this.el.id,
+      message: "Invalid"
+    })), m(e) ? (this.err = "", this.timeWindowFormError.emit({
+      key: this.el.id,
+      message: ""
+    })) : (this.err = "Invalid", this.timeWindowFormError.emit({
+      key: this.el.id,
+      message: "Invalid"
+    })), !this.err && this.timeChange.emit({
+      key: this.el.id,
+      value: e
+    });
+  }
+  handleTimeAutocomplete(t) {
+    var s;
+    const e = (s = t.target) == null ? void 0 : s.value, i = this.language === l.de || this.language === l.fr ? g(e) : e;
+    if (!m(i)) {
+      this.err = "Invalid", this.timeWindowFormError.emit({
+        key: this.el.id,
+        message: "Invalid"
+      });
+      return;
+    }
+    if (i === "") {
+      const a = f().format("hh:mma");
+      this.timeChange.emit({
+        key: this.el.id,
+        value: a
+      });
+      return;
+    }
+    if (!u(i)) {
+      const a = c(i);
+      this.timeChange.emit({
+        key: this.el.id,
+        value: a
+      });
+      return;
+    }
+    this.timeChange.emit({
+      key: this.el.id,
+      value: i
+    });
+  }
+  handleOnInput(t) {
+    var i;
+    const e = (i = t.target) == null ? void 0 : i.value;
+    if (m(e)) {
+      if (e === "") {
+        const s = f().format("hh:mma"), a = this.times.findIndex((n) => n.value === s);
+        a > -1 && this.scrollToViewWithinParent(a);
+        return;
+      }
+      if (!u(e)) {
+        const s = c(e), a = this.times.findIndex((n) => n.value === s);
+        a > -1 && this.scrollToViewWithinParent(a);
+        return;
+      }
+    }
+  }
+  generateTimes() {
+    const t = [];
+    let e = o().set("hour", 0).set("minute", 0).set("second", 0);
+    this.minimumStartTime && (e = o(this.minimumStartTime, "hh:mma"));
+    const i = e.endOf("day").diff(e, "minutes"), s = Math.round(i / 15);
+    for (let a = 0; a < s + 1; a++) {
+      const n = e.add(a * 15, "minute");
+      if (a == s && n.format("hh:mma").includes("am"))
+        break;
+      t.push({ id: a, value: n.format("hh:mma") });
+    }
+    return t;
+  }
+  handleComboboxKeyDown(t) {
+    if (t.key === "ArrowDown") {
+      if (t.preventDefault(), !this.showTimes) {
+        this.showTimes = !0, this.shouldAutoScroll = !0;
+        return;
+      }
+      if (this.ariaActivedescendant === "")
+        this.ariaActivedescendant = this.times[0].id.toString(), this.focusOption(0);
+      else {
+        const e = this.times.findIndex((s) => s.id.toString() === this.ariaActivedescendant), i = e + 1 < this.times.length ? e + 1 : 0;
+        this.ariaActivedescendant = this.times[i].id.toString(), this.focusOption(i);
+      }
+    } else if (t.key === "ArrowUp")
+      if (t.preventDefault(), this.ariaActivedescendant === "")
+        this.ariaActivedescendant = this.times[this.times.length - 1].id.toString(), this.focusOption(this.times.length - 1);
+      else {
+        const e = this.times.findIndex((s) => s.id.toString() === this.ariaActivedescendant), i = e - 1 >= 0 ? e - 1 : this.times.length - 1;
+        this.ariaActivedescendant = this.times[i].id.toString(), this.focusOption(i);
+      }
+    else
+      t.key === "Escape" && (this.showTimes = !1, this.timeInput.focus());
+  }
+  handleListboxKeydown(t) {
+    const e = this.times, i = e.findIndex((s) => s.id.toString() === this.ariaActivedescendant);
+    if (t.key === "ArrowDown" || t.key === "Tab" && !t.shiftKey) {
+      t.preventDefault();
+      const s = i + 1 < e.length ? i + 1 : 0;
+      this.ariaActivedescendant = e[s].id.toString(), this.focusOption(s);
+    } else if (t.key === "ArrowUp" || t.key === "Tab" && t.shiftKey) {
+      t.preventDefault();
+      const s = i - 1 >= 0 ? i - 1 : e.length - 1;
+      this.ariaActivedescendant = e[s].id.toString(), this.focusOption(s);
+    } else if (t.key === "Enter") {
+      if (t.preventDefault(), this.ariaActivedescendant) {
+        const s = e[i];
+        this.handleTimeChange(t, s.value), this.showTimes = !1, this.ariaActivedescendant = "", this.timeInput.focus();
+      }
+    } else
+      t.key === "Escape" && (this.showTimes = !1, this.timeInput.focus());
+  }
+  scrollToViewWithinParent(t) {
+    var d;
+    const e = this.times[t], i = (d = this.el.shadowRoot) == null ? void 0 : d.getElementById(e.id.toString()), s = this.timeMenu;
+    this.ariaActivedescendant = e.id.toString();
+    const a = i.getBoundingClientRect(), n = s.getBoundingClientRect();
+    a.top < n.top ? s.scrollTop -= n.top - a.top : a.bottom > n.bottom && (s.scrollTop += a.bottom - n.bottom), a.left < n.left ? s.scrollLeft -= n.left - a.left : a.right > n.right && (s.scrollLeft += a.right - n.right);
+  }
+  focusOption(t) {
+    var a;
+    const e = this.times[t];
+    if (!e)
+      return;
+    const i = e.id.toString(), s = (a = this.el.shadowRoot) == null ? void 0 : a.getElementById(i);
+    s && (s.focus(), s.scrollIntoView({ behavior: "smooth", block: "nearest" }));
+  }
+  render() {
+    const t = this.language !== l.en;
+    return r(b, { key: "fe213a09bb8bd924e66b19ae885a4ecea11e7919" }, r("div", { key: "75068ee86601003889d1d5047ca72f94cfce4354", class: "time-picker", part: "time-picker" }, r("input", { key: "204175ad394c1a67f5464c04c20ba07dcde5863a", type: "text", name: this.name, id: this.name, part: "time-input", class: {
+      "time-input": !0,
+      error: !!this.err || this.hasError
+    }, ref: (e) => this.timeInput = e, value: t ? p(this.time) : this.time, onClick: () => {
+      this.showTimes = !this.showTimes, this.shouldAutoScroll = !0;
+    }, "aria-haspopup": "listbox", "aria-label": this.name, "aria-expanded": this.showTimes ? "true" : "false", placeholder: this.placeholder, onKeyDown: (e) => this.handleComboboxKeyDown(e), onInput: (e) => this.handleOnInput(e), onBlur: (e) => this.handleTimeAutocomplete(e) }), this.err && r("div", { class: "invalid-time-icon" }), this.showTimes && r("div", { class: "times", part: "times", ref: (e) => this.timeMenu = e }, r("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (e) => this.handleListboxKeydown(e) }, this.times.map((e) => r("li", { tabindex: "0", key: e.id, id: e.id.toString(), class: {
+      focused: this.ariaActivedescendant === e.id.toString()
+    }, onClick: (i) => {
+      this.handleTimeChange(i, e.value), this.showTimes = !1, this.timeInput.focus();
+    }, role: "option" }, `${t ? p(e.value) : e.value}`)))), !this.showTimes && this.err && r("p", { class: "error", id: "email-error" }, this.err)));
+  }
+  get el() {
+    return x(this);
+  }
+  static get watchers() {
+    return {
+      minimumStartTime: ["minimumStartTimeChangedHandler"]
+    };
+  }
+};
+S.style = I;
+export {
+  T as globe_icon,
+  S as nylas_time_window_picker
+};