@nylas/web-elements 1.3.2 → 1.3.3

package/dist/cdn/nylas-connected-calendars/nylas-connected-calendars.es.js

@@ -9254,6 +9254,18 @@ const T3 = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-er
   constructor() {
     super(), this.__registerHost(), this.__attachShadow(), this.selectedOptionsChanged = Jn(this, "selectedOptionsChanged", 7), this.name = void 0, this.label = void 0, this.options = [], this.error = "", this.availableOptions = this.options, this.isOpen = !1, this.ariaActivedescendant = "", this.shouldFocusFirstOption = !1;
   }
+  areOptionsEqual(e, t) {
+    if (e.length !== t.length)
+      return !1;
+    const n = [...e].sort((u, o) => u.label.localeCompare(o.label) || u.value.localeCompare(o.value)), i = [...t].sort((u, o) => u.label.localeCompare(o.label) || u.value.localeCompare(o.value));
+    return n.every((u, o) => {
+      const a = i[o];
+      return u.label === a.label && u.value === a.value;
+    });
+  }
+  optionsChangedHandler(e) {
+    this.areOptionsEqual(e, this.availableOptions) || (this.availableOptions = e);
+  }
   componentDidLoad() {
     W("multi-select-dropdown", "componentDidLoad"), this.options && (this.availableOptions = this.options);
   }
@@ -9332,11 +9344,16 @@ const T3 = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-er
   }
   render() {
     var e, t;
-    return D(Qt, { key: "e1d4d14ecbb535efa9c01bbd472648b0a11f80f0" }, D("div", { key: "4fa54bb57eea3f45d49d0864e11ca20bb6b9b16c", class: "dropdown", part: "msd_dropdown" }, D("label", { key: "dd418efe1b38427042f1f88b9fd615ee89c9f5d9", class: "dropdown-label" }, this.label, D("slot", { key: "a8cd3f9fd40a3b77683c636b3b835e0cbd738981", name: "label-icon", "aria-hidden": "true" })), D("button", { key: "d39f657c45ecd246018f4c5db904ad37d475634b", name: this.name, part: `msd_dropdown-button ${this.error ? "msd_dropdown-button--error" : ""}`, class: { dropbtn: !0, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.name, onKeyDown: (n) => this.handleSelectButtonKeyDown(n) }, D("slot", { key: "45f912fd627eb75e06446a782d91b27bf138677c", name: "select-icon", "aria-hidden": "true" }), D("span", { key: "8271bafba127888d6646b31749292b049e190589", class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? "Multiple options selected" : ((e = this.availableOptions.filter((n) => n.selected)[0]) == null ? void 0 : e.label) ?? ((t = this.availableOptions[0]) == null ? void 0 : t.label)), D("span", { key: "75caecf1bffad204acab61b8d8809b03a9dbeb73", class: this.isOpen ? "open" : "closed", "aria-hidden": "true" }, D("chevron-icon", { key: "cc9faf08225b9c73481d27a9b3f6e7a43b379c25", width: "16", height: "16" }))), this.error ? D("span", { class: "error" }, this.error) : null, this.isOpen ? null : D("div", { class: "selected-options" }, this.getSelectedOptions().map((n) => D("span", { class: "selected-option" }, n.label, D("button", { key: n.label, onClick: () => this.selectOption(n) }, D("close-icon", null))))), this.isOpen ? D("div", { class: "dropdown-content", part: "msd_dropdown-content" }, D("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": !0, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (n) => this.handleListboxKeydown(n) }, this.availableOptions.map((n) => this.renderOption(n)))) : null));
+    return D(Qt, { key: "f8e72e38ce1323acd6ca5ada6c9b8e4a52fd5cd3" }, D("div", { key: "acd2eead0fe45b85da48057a52d3f99337870795", class: "dropdown", part: "msd_dropdown" }, D("label", { key: "c586999e4b30f366d6033bef3cbf1142040db8a3", class: "dropdown-label" }, this.label, D("slot", { key: "2817a8851a72bbabe9309c3da79e8ca25c1c461e", name: "label-icon", "aria-hidden": "true" })), D("button", { key: "588fd27317e0c73ad8a83ac18e826b62ab968128", name: this.name, part: `msd_dropdown-button ${this.error ? "msd_dropdown-button--error" : ""}`, class: { dropbtn: !0, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.name, onKeyDown: (n) => this.handleSelectButtonKeyDown(n) }, D("slot", { key: "e6fc309a7ffb30921118e1cd1d1fb4aea321a0fb", name: "select-icon", "aria-hidden": "true" }), D("span", { key: "62a4abccd0100022f7e163410ffaf8fca8ebaefb", class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? "Multiple options selected" : ((e = this.availableOptions.filter((n) => n.selected)[0]) == null ? void 0 : e.label) ?? ((t = this.availableOptions[0]) == null ? void 0 : t.label)), D("span", { key: "1fff4fa8e566dcec2ac9e28bcededc41c7b42585", class: this.isOpen ? "open" : "closed", "aria-hidden": "true" }, D("chevron-icon", { key: "39b47d625b2e3e78f795e3853e8a4811842036de", width: "16", height: "16" }))), this.error ? D("span", { class: "error" }, this.error) : null, this.isOpen ? null : D("div", { class: "selected-options" }, this.getSelectedOptions().map((n) => D("span", { class: "selected-option" }, n.label, D("button", { key: n.label, onClick: () => this.selectOption(n) }, D("close-icon", null))))), this.isOpen ? D("div", { class: "dropdown-content", part: "msd_dropdown-content" }, D("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": !0, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (n) => this.handleListboxKeydown(n) }, this.availableOptions.map((n) => this.renderOption(n)))) : null));
   }
   get el() {
     return this;
   }
+  static get watchers() {
+    return {
+      options: ["optionsChangedHandler"]
+    };
+  }
   static get style() {
     return S3;
   }
@@ -9349,7 +9366,9 @@ const T3 = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-er
   isOpen: [32],
   ariaActivedescendant: [32],
   shouldFocusFirstOption: [32]
-}, [[6, "click", "handleOutsideClick"]]]);
+}, [[6, "click", "handleOutsideClick"]], {
+  options: ["optionsChangedHandler"]
+}]);
 function vp() {
   if (typeof customElements > "u")
     return;
@@ -9620,19 +9639,19 @@ const kr = Ne(class extends _e {
   setParticipants(e) {
     const t = {};
     return e == null || e.forEach((n) => {
-      var i, u, o;
+      var i, u, o, a;
       if ((i = n == null ? void 0 : n.availability) != null && i.calendar_ids && ((o = (u = n == null ? void 0 : n.availability) == null ? void 0 : u.calendar_ids) == null ? void 0 : o.length) > 0) {
-        const a = !!n.is_organizer;
+        const s = !!n.is_organizer;
         t[n.email] = {
-          isOpen: a,
+          isOpen: s,
           name: n.name || n.email,
-          availability: n.availability
+          calendars: (a = n.availability) == null ? void 0 : a.calendar_ids
         };
       }
     }), t;
   }
   render() {
-    return D(Qt, { key: "32710fe762bdf90e238c62695957a9fca31db258" }, D("div", { key: "a5ebf4adb7eb8e1b8a065bc05733738da06fbac3", class: "nylas-connected-calendars", part: "nccals" }, D("div", { key: "f3c820bcde922a7b852630d86145b1e6e1bf0e25", class: "header", part: "nccals__header" }, D("h3", { key: "e2b68d05d416c322b22f969d8d8c890a09812154" }, "Connected Calendars"), D("p", { key: "4dd41d10a6043fec1c0f4943371c312a29e1d489" }, "Select the calendars to use for checking your availability.", D("tooltip-component", { key: "6a8ec009fd879e1ed6b6fb65be75a88255adba17" }, D("info-icon", { key: "0d4a99eaee064ecee1c82ee5b13f3ab87a1d5d93", slot: "tooltip-icon" }), D("span", { key: "de3779efce64d7a14dbc3f7759c827005f92ed50", slot: "tooltip-content" }, "Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their calendars to be considered available.")))), D("div", { key: "720267110636c1dc06ac67b7e715515f56737b73", class: "content", part: "nccals__content" }, D("form", { key: "f295ba327aa302ea186dbf2daef3a9c30f96ee5f", ref: (e) => this.connectedCalendarsFormRef = e }, Object.keys(this.participantCalendars).map((e, t) => {
+    return D(Qt, { key: "4b8cfcfa751c2790968049f6f10a06193f9adc70" }, D("div", { key: "ffbcde80612886bc09b4419bc1cc47d585834fac", class: "nylas-connected-calendars", part: "nccals" }, D("div", { key: "d00c14cd0ab8107a2ba609ba58b596a7d3e1e69f", class: "header", part: "nccals__header" }, D("h3", { key: "cb0ad20533c33a3778d0b89fe5d51aa4c15864a8" }, "Connected Calendars"), D("p", { key: "b3488e835534f477d2585be0a60b5800d42cbaac" }, "Select the calendars to use for checking your availability.", D("tooltip-component", { key: "6acbd37df60566fa8a3fb8676fe3b3f4287d5c06" }, D("info-icon", { key: "f1eb4a75f869b09bee95c074c8d180449654a49f", slot: "tooltip-icon" }), D("span", { key: "e8aca8b29c7a89fe7b6eea0635761bdde19349e2", slot: "tooltip-content" }, "Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their calendars to be considered available.")))), D("div", { key: "844803e9ea3270bfcedbc212990c0038a74dd663", class: "content", part: "nccals__content" }, D("form", { key: "2970ec7cec45d2582b987cbfab8949c1ece02499", ref: (e) => this.connectedCalendarsFormRef = e }, Object.keys(this.participantCalendars).map((e, t) => {
       const n = this.selectedCalendars[e], i = this.participantCalendars[e];
       if (!(!n || !n.name))
         return D("div", { class: "participant-container", part: "nccals__container", key: `participant-conatiner-${t}` }, D("div", { class: "participant-title", part: "nccals__title" }, D("p", null, n.name, "'s connected calendars"), D("div", { class: "participant-toggle", part: "nccals__toggle-container" }, D("span", { class: `chevron ${n.isOpen ? "open" : "closed"}`, onClick: () => {

package/dist/cdn/nylas-customize-booking-settings/nylas-customize-booking-settings.es.js

@@ -9179,6 +9179,9 @@ const c3 = '.checkbox-container{--nylas-primary:#2563eb;--nylas-error:#cc4841;--
   constructor() {
     super(), this.__registerHost(), this.__attachShadow(), this.nylasFormCheckboxToggled = Di(this, "nylasFormCheckboxToggled", 7), this.componentType = "checkbox", this.name = "checkbox", this.checked = void 0, this.label = "", this.required = !1, this.isChecked = void 0, this.error = "";
   }
+  checkedPropChangedHandler(e) {
+    typeof e == "boolean" && (this.isChecked = e);
+  }
   componentWillLoad() {
     this.el.setAttribute("component-type", this.componentType);
   }
@@ -9200,11 +9203,16 @@ const c3 = '.checkbox-container{--nylas-primary:#2563eb;--nylas-error:#cc4841;--
     });
   }
   render() {
-    return N("div", { key: "f4dfab5a5da9f9c79424930bfd5497c24dc1bfe5", class: "checkbox-container" }, N("label", { key: "78e192f2eddcfd788ac16e80be3ac0b9c47e6f6a" }, N("input", { key: "6e3aa50fb6542cb134dc5454e9fc0052be22e36f", type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), N("span", { key: "abbd103b06bf934eff294b443b468e446901c371", class: "checkmark" }), N("slot", { key: "f11d669ba02b705ba7679985e83b91086a17ccc9", name: "label" }, N("span", { key: "1298c44fbbe9ce75638b00ac07e6e83bab1394c2", class: "label" }, this.label))), this.error && N("p", { class: "error" }, this.error));
+    return N("div", { key: "0be06ba2c6b6ed277b3ba736827f9f60e18c6056", class: "checkbox-container" }, N("label", { key: "a0a0cf6b1f546b8d1485dd3aee1b686f0e9c9cba" }, N("input", { key: "96bdb407b3ab6f668cf94b83e8091a604743f93f", type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), N("span", { key: "d345d3b47c14213487a9108d78abbf0db26f25af", class: "checkmark" }), N("slot", { key: "aba536e12ed7a97d18790f1a212ead284c1253ec", name: "label" }, N("span", { key: "e7767302bc6865b99cf42949e8bd032e237d2ad9", class: "label" }, this.label))), this.error && N("p", { class: "error" }, this.error));
   }
   get el() {
     return this;
   }
+  static get watchers() {
+    return {
+      checked: ["checkedPropChangedHandler"]
+    };
+  }
   static get style() {
     return d3;
   }
@@ -9215,7 +9223,9 @@ const c3 = '.checkbox-container{--nylas-primary:#2563eb;--nylas-error:#cc4841;--
   required: [4],
   isChecked: [32],
   error: [32]
-}, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]]]);
+}, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]], {
+  checked: ["checkedPropChangedHandler"]
+}]);
 function h3() {
   if (typeof customElements > "u")
     return;

package/dist/cdn/nylas-date-component/nylas-date-component.es.js

@@ -11387,7 +11387,7 @@ const fx = ':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-erro
   date: "YYYY-MM-DD"
 }, Rp = mm(class extends wm {
   constructor() {
-    super(), this.__registerHost(), this.__attachShadow(), this.nylasFormInputChanged = Rn(this, "nylasFormInputChanged", 7), this.nylasFormInputFocused = Rn(this, "nylasFormInputFocused", 7), this.nylasFormInputBlurred = Rn(this, "nylasFormInputBlurred", 7), this.name = "input", this.defaultValue = void 0, this.label = "", this.placeholder = gx.date, this.required = !1, this.readOnly = !1, this.autoFocus = !1, this.pattern = void 0, this.maxLength = 255, this.patternError = "", this.requiredError = "", this.value = void 0, this.error = "";
+    super(), this.__registerHost(), this.__attachShadow(), this.nylasFormInputChanged = Rn(this, "nylasFormInputChanged", 7), this.nylasFormInputFocused = Rn(this, "nylasFormInputFocused", 7), this.nylasFormInputBlurred = Rn(this, "nylasFormInputBlurred", 7), this.name = "input", this.defaultValue = void 0, this.label = "", this.placeholder = gx.date, this.required = !1, this.readOnly = !1, this.autoFocus = !1, this.pattern = void 0, this.maxLength = 255, this.patternError = "", this.requiredError = "", this.value = void 0, this.error = "", this.isDateValid = !0;
   }
   handleDefaultValueChange(e) {
     this.value = zn(e), this.value && this.validatePattern(this.value);
@@ -11399,11 +11399,12 @@ const fx = ':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-erro
     this.validatePattern(this.value), this.error && e.preventDefault();
   }
   async handleFormSubmitted(e) {
-    var t;
-    (t = this.el) != null && t.getAttribute("data-page-styling") && (this.validatePattern(this.value), this.error && e.preventDefault());
+    this.validatePattern(this.value), this.error && e.preventDefault();
   }
   handleInput(e) {
-    this.error = "", this.value = zn(e.target.value), this.nylasFormInputChanged.emit({
+    this.error = "";
+    const t = e.target;
+    this.value = zn(t.value), this.isDateValid = t.validity.valid, this.nylasFormInputChanged.emit({
       value: this.value,
       name: this.name,
       label: this.label,
@@ -11424,14 +11425,18 @@ const fx = ':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-erro
     });
   }
   validatePattern(e) {
-    if (this.error = "", this.required && !e) {
+    if (this.error = "", !this.isDateValid) {
+      this.error = "Please enter a valid date";
+      return;
+    }
+    if (this.required && !e) {
       this.error = this.requiredError || "This field is required.";
       return;
     }
     !this.pattern || !e && !this.required || (this.pattern.test(e) ? this.error = "" : this.error = this.patternError || "Invalid format.");
   }
   render() {
-    return Ce("label", { key: "959c6b772ea4f2f4706d72255d1e36ea8d4fcbd3", part: "ic__label", class: { error: !!this.error } }, this.label && Ce("p", null, Ce("span", { class: "label" }, this.label), this.required && Ce("span", { class: "required" }, "*")), Ce("div", { key: "a018a19fe2a77416d7ac4d9c7ea84cb0560a70de", part: "ic__input_wrapper", class: "input_wrapper" }, Ce("input", { key: "7952451a1397dc1a08ac5dc6a251d452a882981b", type: "date", name: this.name, part: "ic__date", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: (e) => this.handleInput(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), Ce("slot", { key: "9730db9ef73e570667c69879ce457c45b5e196a5", name: "additional-input" })), this.error && Ce("span", { class: "error help-text" }, this.error));
+    return Ce("label", { key: "db7e5910f650055747d1f2bca13356d2c3fe3f9e", part: "ic__label", class: { error: !!this.error } }, this.label && Ce("p", null, Ce("span", { class: "label" }, this.label), this.required && Ce("span", { class: "required" }, "*")), Ce("div", { key: "81d0a723cec27805587e2abdac667504d078e211", part: "ic__input_wrapper", class: "input_wrapper" }, Ce("input", { key: "948cf92087a3763d058588c8f6b7764e96234595", type: "date", name: this.name, part: "ic__date", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: (e) => this.handleInput(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), Ce("slot", { key: "6c1d31a29dc01621d9212a95574c329844da0eed", name: "additional-input" })), this.error && Ce("span", { class: "error help-text" }, this.error));
   }
   get el() {
     return this;
@@ -11457,7 +11462,8 @@ const fx = ':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-erro
   patternError: [1, "pattern-error"],
   requiredError: [1, "required-error"],
   value: [32],
-  error: [32]
+  error: [32],
+  isDateValid: [32]
 }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"], [4, "formSubmitted", "handleFormSubmitted"]], {
   defaultValue: ["handleDefaultValueChange"]
 }]);