@nylas/web-elements 1.3.2 → 1.3.3

package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js

@@ -14803,6 +14803,9 @@ const checkboxComponentCss = '.checkbox-container{--nylas-primary:#2563eb;--nyla
   constructor() {
     super(), this.__registerHost(), this.__attachShadow(), this.nylasFormCheckboxToggled = createEvent(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(ue) {
+    typeof ue == "boolean" && (this.isChecked = ue);
+  }
   componentWillLoad() {
     this.el.setAttribute("component-type", this.componentType);
   }
@@ -14824,11 +14827,16 @@ const checkboxComponentCss = '.checkbox-container{--nylas-primary:#2563eb;--nyla
     });
   }
   render() {
-    return h$2("div", { key: "f4dfab5a5da9f9c79424930bfd5497c24dc1bfe5", class: "checkbox-container" }, h$2("label", { key: "78e192f2eddcfd788ac16e80be3ac0b9c47e6f6a" }, h$2("input", { key: "6e3aa50fb6542cb134dc5454e9fc0052be22e36f", type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h$2("span", { key: "abbd103b06bf934eff294b443b468e446901c371", class: "checkmark" }), h$2("slot", { key: "f11d669ba02b705ba7679985e83b91086a17ccc9", name: "label" }, h$2("span", { key: "1298c44fbbe9ce75638b00ac07e6e83bab1394c2", class: "label" }, this.label))), this.error && h$2("p", { class: "error" }, this.error));
+    return h$2("div", { key: "0be06ba2c6b6ed277b3ba736827f9f60e18c6056", class: "checkbox-container" }, h$2("label", { key: "a0a0cf6b1f546b8d1485dd3aee1b686f0e9c9cba" }, h$2("input", { key: "96bdb407b3ab6f668cf94b83e8091a604743f93f", type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h$2("span", { key: "d345d3b47c14213487a9108d78abbf0db26f25af", class: "checkmark" }), h$2("slot", { key: "aba536e12ed7a97d18790f1a212ead284c1253ec", name: "label" }, h$2("span", { key: "e7767302bc6865b99cf42949e8bd032e237d2ad9", class: "label" }, this.label))), this.error && h$2("p", { class: "error" }, this.error));
   }
   get el() {
     return this;
   }
+  static get watchers() {
+    return {
+      checked: ["checkedPropChangedHandler"]
+    };
+  }
   static get style() {
     return CheckboxComponentStyle0;
   }
@@ -14839,7 +14847,9 @@ const checkboxComponentCss = '.checkbox-container{--nylas-primary:#2563eb;--nyla
   required: [4],
   isChecked: [32],
   error: [32]
-}, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]]]);
+}, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]], {
+  checked: ["checkedPropChangedHandler"]
+}]);
 function defineCustomElement$1e() {
   if (typeof customElements > "u")
     return;
@@ -15847,6 +15857,18 @@ const multiSelectDropdownCss = ':host{display:block;width:inherit;--nylas-primar
   constructor() {
     super(), this.__registerHost(), this.__attachShadow(), this.selectedOptionsChanged = createEvent(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(ue, ge) {
+    if (ue.length !== ge.length)
+      return !1;
+    const Oe = [...ue].sort((vt, ln) => vt.label.localeCompare(ln.label) || vt.value.localeCompare(ln.value)), Ke = [...ge].sort((vt, ln) => vt.label.localeCompare(ln.label) || vt.value.localeCompare(ln.value));
+    return Oe.every((vt, ln) => {
+      const ei = Ke[ln];
+      return vt.label === ei.label && vt.value === ei.value;
+    });
+  }
+  optionsChangedHandler(ue) {
+    this.areOptionsEqual(ue, this.availableOptions) || (this.availableOptions = ue);
+  }
   componentDidLoad() {
     debug("multi-select-dropdown", "componentDidLoad"), this.options && (this.availableOptions = this.options);
   }
@@ -15925,11 +15947,16 @@ const multiSelectDropdownCss = ':host{display:block;width:inherit;--nylas-primar
   }
   render() {
     var ue, ge;
-    return h$2(Host, { key: "e1d4d14ecbb535efa9c01bbd472648b0a11f80f0" }, h$2("div", { key: "4fa54bb57eea3f45d49d0864e11ca20bb6b9b16c", class: "dropdown", part: "msd_dropdown" }, h$2("label", { key: "dd418efe1b38427042f1f88b9fd615ee89c9f5d9", class: "dropdown-label" }, this.label, h$2("slot", { key: "a8cd3f9fd40a3b77683c636b3b835e0cbd738981", name: "label-icon", "aria-hidden": "true" })), h$2("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: (Oe) => this.handleSelectButtonKeyDown(Oe) }, h$2("slot", { key: "45f912fd627eb75e06446a782d91b27bf138677c", name: "select-icon", "aria-hidden": "true" }), h$2("span", { key: "8271bafba127888d6646b31749292b049e190589", class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? "Multiple options selected" : ((ue = this.availableOptions.filter((Oe) => Oe.selected)[0]) == null ? void 0 : ue.label) ?? ((ge = this.availableOptions[0]) == null ? void 0 : ge.label)), h$2("span", { key: "75caecf1bffad204acab61b8d8809b03a9dbeb73", class: this.isOpen ? "open" : "closed", "aria-hidden": "true" }, h$2("chevron-icon", { key: "cc9faf08225b9c73481d27a9b3f6e7a43b379c25", width: "16", height: "16" }))), this.error ? h$2("span", { class: "error" }, this.error) : null, this.isOpen ? null : h$2("div", { class: "selected-options" }, this.getSelectedOptions().map((Oe) => h$2("span", { class: "selected-option" }, Oe.label, h$2("button", { key: Oe.label, onClick: () => this.selectOption(Oe) }, h$2("close-icon", null))))), this.isOpen ? h$2("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h$2("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": !0, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (Oe) => this.handleListboxKeydown(Oe) }, this.availableOptions.map((Oe) => this.renderOption(Oe)))) : null));
+    return h$2(Host, { key: "f8e72e38ce1323acd6ca5ada6c9b8e4a52fd5cd3" }, h$2("div", { key: "acd2eead0fe45b85da48057a52d3f99337870795", class: "dropdown", part: "msd_dropdown" }, h$2("label", { key: "c586999e4b30f366d6033bef3cbf1142040db8a3", class: "dropdown-label" }, this.label, h$2("slot", { key: "2817a8851a72bbabe9309c3da79e8ca25c1c461e", name: "label-icon", "aria-hidden": "true" })), h$2("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: (Oe) => this.handleSelectButtonKeyDown(Oe) }, h$2("slot", { key: "e6fc309a7ffb30921118e1cd1d1fb4aea321a0fb", name: "select-icon", "aria-hidden": "true" }), h$2("span", { key: "62a4abccd0100022f7e163410ffaf8fca8ebaefb", class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? "Multiple options selected" : ((ue = this.availableOptions.filter((Oe) => Oe.selected)[0]) == null ? void 0 : ue.label) ?? ((ge = this.availableOptions[0]) == null ? void 0 : ge.label)), h$2("span", { key: "1fff4fa8e566dcec2ac9e28bcededc41c7b42585", class: this.isOpen ? "open" : "closed", "aria-hidden": "true" }, h$2("chevron-icon", { key: "39b47d625b2e3e78f795e3853e8a4811842036de", width: "16", height: "16" }))), this.error ? h$2("span", { class: "error" }, this.error) : null, this.isOpen ? null : h$2("div", { class: "selected-options" }, this.getSelectedOptions().map((Oe) => h$2("span", { class: "selected-option" }, Oe.label, h$2("button", { key: Oe.label, onClick: () => this.selectOption(Oe) }, h$2("close-icon", null))))), this.isOpen ? h$2("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h$2("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": !0, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (Oe) => this.handleListboxKeydown(Oe) }, this.availableOptions.map((Oe) => this.renderOption(Oe)))) : null));
   }
   get el() {
     return this;
   }
+  static get watchers() {
+    return {
+      options: ["optionsChangedHandler"]
+    };
+  }
   static get style() {
     return MultiSelectDropdownStyle0;
   }
@@ -15942,7 +15969,9 @@ const multiSelectDropdownCss = ':host{display:block;width:inherit;--nylas-primar
   isOpen: [32],
   ariaActivedescendant: [32],
   shouldFocusFirstOption: [32]
-}, [[6, "click", "handleOutsideClick"]]]);
+}, [[6, "click", "handleOutsideClick"]], {
+  options: ["optionsChangedHandler"]
+}]);
 function defineCustomElement$R() {
   if (typeof customElements > "u")
     return;
@@ -16083,10 +16112,10 @@ const NylasAdditionalParticipants = proxyCustomElement(class extends H$2 {
     debug("nylas-additional-participants", "connectedCallback");
   }
   componentWillLoad() {
-    debug("nylas-additional-participants", "componentWillLoad"), this.host.setAttribute("name", this.name), this.updateState(this.selectedConfiguration, this.currentUser);
+    debug("nylas-additional-participants", "componentWillLoad"), this.host.setAttribute("name", this.name);
   }
   componentDidLoad() {
-    debug("nylas-additional-participants", "componentDidLoad");
+    debug("nylas-additional-participants", "componentDidLoad"), this.updateState(this.selectedConfiguration, this.currentUser);
   }
   disconnectedCallback() {
     debug("nylas-additional-participants", "disconnectedCallback");
@@ -18242,7 +18271,7 @@ const nylasDateComponentCss = ':host{display:block;height:auto;--nylas-primary:#
   date: "YYYY-MM-DD"
 }, NylasDateComponent = proxyCustomElement(class extends H$2 {
   constructor() {
-    super(), this.__registerHost(), this.__attachShadow(), this.nylasFormInputChanged = createEvent(this, "nylasFormInputChanged", 7), this.nylasFormInputFocused = createEvent(this, "nylasFormInputFocused", 7), this.nylasFormInputBlurred = createEvent(this, "nylasFormInputBlurred", 7), this.name = "input", this.defaultValue = void 0, this.label = "", this.placeholder = DefaultPlaceholder.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 = createEvent(this, "nylasFormInputChanged", 7), this.nylasFormInputFocused = createEvent(this, "nylasFormInputFocused", 7), this.nylasFormInputBlurred = createEvent(this, "nylasFormInputBlurred", 7), this.name = "input", this.defaultValue = void 0, this.label = "", this.placeholder = DefaultPlaceholder.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(ue) {
     this.value = sanitize(ue), this.value && this.validatePattern(this.value);
@@ -18254,11 +18283,12 @@ const nylasDateComponentCss = ':host{display:block;height:auto;--nylas-primary:#
     this.validatePattern(this.value), this.error && ue.preventDefault();
   }
   async handleFormSubmitted(ue) {
-    var ge;
-    (ge = this.el) != null && ge.getAttribute("data-page-styling") && (this.validatePattern(this.value), this.error && ue.preventDefault());
+    this.validatePattern(this.value), this.error && ue.preventDefault();
   }
   handleInput(ue) {
-    this.error = "", this.value = sanitize(ue.target.value), this.nylasFormInputChanged.emit({
+    this.error = "";
+    const ge = ue.target;
+    this.value = sanitize(ge.value), this.isDateValid = ge.validity.valid, this.nylasFormInputChanged.emit({
       value: this.value,
       name: this.name,
       label: this.label,
@@ -18279,14 +18309,18 @@ const nylasDateComponentCss = ':host{display:block;height:auto;--nylas-primary:#
     });
   }
   validatePattern(ue) {
-    if (this.error = "", this.required && !ue) {
+    if (this.error = "", !this.isDateValid) {
+      this.error = "Please enter a valid date";
+      return;
+    }
+    if (this.required && !ue) {
       this.error = this.requiredError || "This field is required.";
       return;
     }
     !this.pattern || !ue && !this.required || (this.pattern.test(ue) ? this.error = "" : this.error = this.patternError || "Invalid format.");
   }
   render() {
-    return h$2("label", { key: "959c6b772ea4f2f4706d72255d1e36ea8d4fcbd3", part: "ic__label", class: { error: !!this.error } }, this.label && h$2("p", null, h$2("span", { class: "label" }, this.label), this.required && h$2("span", { class: "required" }, "*")), h$2("div", { key: "a018a19fe2a77416d7ac4d9c7ea84cb0560a70de", part: "ic__input_wrapper", class: "input_wrapper" }, h$2("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: (ue) => this.handleInput(ue), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), h$2("slot", { key: "9730db9ef73e570667c69879ce457c45b5e196a5", name: "additional-input" })), this.error && h$2("span", { class: "error help-text" }, this.error));
+    return h$2("label", { key: "db7e5910f650055747d1f2bca13356d2c3fe3f9e", part: "ic__label", class: { error: !!this.error } }, this.label && h$2("p", null, h$2("span", { class: "label" }, this.label), this.required && h$2("span", { class: "required" }, "*")), h$2("div", { key: "81d0a723cec27805587e2abdac667504d078e211", part: "ic__input_wrapper", class: "input_wrapper" }, h$2("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: (ue) => this.handleInput(ue), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), h$2("slot", { key: "6c1d31a29dc01621d9212a95574c329844da0eed", name: "additional-input" })), this.error && h$2("span", { class: "error help-text" }, this.error));
   }
   get el() {
     return this;
@@ -18312,7 +18346,8 @@ const nylasDateComponentCss = ':host{display:block;height:auto;--nylas-primary:#
   patternError: [1, "pattern-error"],
   requiredError: [1, "required-error"],
   value: [32],
-  error: [32]
+  error: [32],
+  isDateValid: [32]
 }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"], [4, "formSubmitted", "handleFormSubmitted"]], {
   defaultValue: ["handleDefaultValueChange"]
 }]);
@@ -19620,13 +19655,37 @@ var __decorate$s = function(ve, ue, ge, Oe) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function")
     return Reflect.metadata(ve, ue);
 };
-const NylasBookingFormConfig = proxyCustomElement(class extends H$2 {
+const staticFields = [
+  {
+    type: "text",
+    label: "Your name",
+    key: "your_name",
+    typeLabel: "Short text",
+    readonly: !0,
+    required: !0,
+    isOpen: !1,
+    order: 0
+  },
+  {
+    type: "email",
+    label: "Your Email",
+    key: "your_email",
+    typeLabel: "Email",
+    readonly: !0,
+    isOpen: !1,
+    required: !0,
+    order: 1
+  }
+], NylasBookingFormConfig = proxyCustomElement(class extends H$2 {
   constructor() {
     super(), this.__registerHost(), this.__attachShadow(), this.valueChanged = createEvent(this, "valueChanged", 7), this.internals = this.attachInternals(), this.selectedConfiguration = void 0, this.name = "booking-form-config", this.additionalFields = void 0, this.formFields = void 0;
   }
   elementNameChangedHandler(ue) {
     debug("nylas-calendar-picker", "elementNameChangedHandler", ue), this.host.setAttribute("name", ue);
   }
+  selectedConfigurationChangedHandler(ue) {
+    this.updateFormFields(ue);
+  }
   connectedCallback() {
     debug("nylas-booking-form-config", "connectedCallback");
   }
@@ -19634,38 +19693,17 @@ const NylasBookingFormConfig = proxyCustomElement(class extends H$2 {
     debug("nylas-booking-form-config", "disconnectedCallback");
   }
   componentWillLoad() {
-    debug("nylas-booking-form-config", "componentWillLoad"), this.host.setAttribute("name", this.name);
-    const ue = [
-      {
-        type: "text",
-        label: "Your name",
-        key: "your_name",
-        typeLabel: "Short text",
-        readonly: !0,
-        required: !0,
-        isOpen: !1,
-        order: 0
-      },
-      {
-        type: "email",
-        label: "Your Email",
-        key: "your_email",
-        typeLabel: "Email",
-        readonly: !0,
-        isOpen: !1,
-        required: !0,
-        order: 1
-      }
-    ];
-    this.formFields = [...ue];
+    debug("nylas-booking-form-config", "componentWillLoad"), this.host.setAttribute("name", this.name), this.formFields = [...staticFields];
   }
   componentDidLoad() {
-    var Oe, Ke, vt;
-    debug("nylas-booking-form-config", "componentDidLoad");
-    const ue = Object.entries(((Ke = (Oe = this.selectedConfiguration) == null ? void 0 : Oe.scheduler) == null ? void 0 : Ke.additional_fields) || {}).map(([ln, ei]) => ({ ...ei, key: ln })) || this.additionalFields || [];
+    debug("nylas-booking-form-config", "componentDidLoad"), this.selectedConfiguration && this.updateFormFields(this.selectedConfiguration);
+  }
+  updateFormFields(ue) {
+    var Ke, vt;
+    const ge = Object.entries(((Ke = ue == null ? void 0 : ue.scheduler) == null ? void 0 : Ke.additional_fields) || {}).map(([ln, ei]) => ({ ...ei, key: ln })) || this.additionalFields || [];
     this.formFields = [
-      ...this.formFields,
-      ...ue.sort((ln, ei) => ln.order - ei.order).map((ln, ei) => {
+      ...staticFields,
+      ...ge.sort((ln, ei) => ln.order - ei.order).map((ln, ei) => {
         const ti = FIELD_TYPES.find((ri) => ri.type === ln.type);
         if (!ti)
           return { ...ln, isOpen: !1, typeLabel: "Unknown" };
@@ -19673,8 +19711,8 @@ const NylasBookingFormConfig = proxyCustomElement(class extends H$2 {
         return ln.order = ei + 2, { ...ln, isOpen: !1, typeLabel: ni };
       })
     ];
-    const ge = (vt = this.host.shadowRoot) == null ? void 0 : vt.getElementById("fields");
-    Sortable.create(ge, {
+    const Oe = (vt = this.host.shadowRoot) == null ? void 0 : vt.getElementById("fields");
+    Sortable.create(Oe, {
       animation: 150,
       swap: !0,
       swapClass: "highlight",
@@ -19784,7 +19822,7 @@ const NylasBookingFormConfig = proxyCustomElement(class extends H$2 {
     this.formFields = this.formFields.map((Oe, Ke) => (Ke === ue && (Oe.default = ge.detail.value), Oe));
   }
   render() {
-    return h$2(Host, { key: "632d9bd6cc0162efdb7e83b78b23935f04569fcb" }, h$2("div", { key: "dae8d7f52a658b121a992f9cd73cd766e2c16cec", class: "nylas-booking-form-config", part: "nbfc" }, h$2("div", { key: "4f02c7163dfecd29df48da9b163e12e9a6c9c357", class: "header", part: "nbfc__header" }, h$2("div", { key: "169cfa3f8d4dd519dd0621d032d3e7a13384b8c7", class: "header_text" }, h$2("h3", { key: "66e50347bae8fca4c3344030d4d3caf4158244e2" }, "Booking form"), h$2("p", { key: "883886b2c841acdbd44e6cb1c18a860a51c52412" }, "Add custom fields to the booking form.")), h$2("div", { key: "e307526fa6d75c4aaaa71c5658006d9e7417c0f0", class: "header_action" }, h$2("select-dropdown", { key: "4b16dd221f5740b21cde95488e2609730e08ea54", name: "add-field", exportparts: "sd_dropdown: nbfc__add_field, sd_dropdown-button: nbfc__add_field-button, sd_dropdown-content: nbfc__add_field-dropdown-content", options: DEFAULT_FORM_FIELD_TYPES, withSearch: !1, withChevron: !1, dropdownButtonText: "Add new field" }, h$2("span", { key: "5ccd949bb563f32f1682b9432759828f086b46e3", slot: "select-icon" }, h$2("plus-icon", { key: "b77ac5dd297071ec6e16c3728db1a7b096e83e74", width: "15", height: "15" }))))), h$2("div", { key: "a7499ce8959d027f0540b086c3393353c3993452", class: "content" }, h$2("div", { key: "ff24161e13beba123ca46c814515704bf06d4259", id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((ue, ge) => h$2("div", { class: `form-field draggable ${ue.readonly && "fixed"}`, part: "nbfc__form_field", key: ge }, h$2("div", { class: "form-field_header", part: "nbfc__form_field-header" }, h$2("span", { class: "dragable" }, h$2("dragable-icon", { width: "24", height: "25" })), h$2("div", { class: "form-field_header_text" }, h$2("h4", null, ue.label), h$2("p", null, ue.typeLabel)), h$2("div", { class: "form-field_header_actions" }, h$2("span", { class: "is-required" }, ue.required ? "Required" : "Optional"), !ue.readonly && h$2("button", { onClick: () => {
+    return h$2(Host, { key: "bd832f2b9a02ce53187e4f633e4c0388e6e65a03" }, h$2("div", { key: "fcf79fe131d8e0a99312286b15f228b997d8c0be", class: "nylas-booking-form-config", part: "nbfc" }, h$2("div", { key: "07cd086a8af8145f5a8c6676e360fa5f919040f3", class: "header", part: "nbfc__header" }, h$2("div", { key: "f703982061b36b7f4b792f4deff59cc4256b7c25", class: "header_text" }, h$2("h3", { key: "a7cba135c527592a000c296ceaf68bb91c9ddcf4" }, "Booking form"), h$2("p", { key: "62acf8b4a583145e2bc300b1b351799dec1ff438" }, "Add custom fields to the booking form.")), h$2("div", { key: "574ef9a02aa06ad29ac0b08c22aa749a844d32d8", class: "header_action" }, h$2("select-dropdown", { key: "c2a83f721237dc1032af5e55e17438e1060b2e58", name: "add-field", exportparts: "sd_dropdown: nbfc__add_field, sd_dropdown-button: nbfc__add_field-button, sd_dropdown-content: nbfc__add_field-dropdown-content", options: DEFAULT_FORM_FIELD_TYPES, withSearch: !1, withChevron: !1, dropdownButtonText: "Add new field" }, h$2("span", { key: "e0aaa33a3bd04b79499310c3904984269eaecbf3", slot: "select-icon" }, h$2("plus-icon", { key: "06bf29f2b3d0dca74d660db8791a47bc2474652b", width: "15", height: "15" }))))), h$2("div", { key: "b33cfae9a876be328d795366802a1791e22ca164", class: "content" }, h$2("div", { key: "0df453e1fc129a13b90b33c6e267ecd9dd149c56", id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((ue, ge) => h$2("div", { class: `form-field draggable ${ue.readonly && "fixed"}`, part: "nbfc__form_field", key: ge }, h$2("div", { class: "form-field_header", part: "nbfc__form_field-header" }, h$2("span", { class: "dragable" }, h$2("dragable-icon", { width: "24", height: "25" })), h$2("div", { class: "form-field_header_text" }, h$2("h4", null, ue.label), h$2("p", null, ue.typeLabel)), h$2("div", { class: "form-field_header_actions" }, h$2("span", { class: "is-required" }, ue.required ? "Required" : "Optional"), !ue.readonly && h$2("button", { onClick: () => {
       this.fieldRemove(ge);
     } }, h$2("close-icon", null)), h$2("span", { class: `chevron ${ue.isOpen ? "open" : "closed"}`, onClick: () => {
       this.fieldToggle(ge);
@@ -19805,6 +19843,7 @@ const NylasBookingFormConfig = proxyCustomElement(class extends H$2 {
   static get watchers() {
     return {
       name: ["elementNameChangedHandler"],
+      selectedConfiguration: ["selectedConfigurationChangedHandler"],
       formFields: ["watchHandler"]
     };
   }
@@ -19818,6 +19857,7 @@ const NylasBookingFormConfig = proxyCustomElement(class extends H$2 {
   formFields: [32]
 }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [0, "nylasFormInputChanged", "nylasFormInputChangedHandler"]], {
   name: ["elementNameChangedHandler"],
+  selectedConfiguration: ["selectedConfigurationChangedHandler"],
   formFields: ["watchHandler"]
 }]);
 __decorate$s([
@@ -19896,13 +19936,7 @@ const NylasBufferTime = proxyCustomElement(class extends H$2 {
     debug("nylas-buffer-time", "componentWillLoad"), this.host.setAttribute("name", this.name);
   }
   componentDidLoad() {
-    if (debug("nylas-buffer-time", "componentDidLoad"), this.selectedConfiguration ? this.selectedConfigurationChangedHandler(this.selectedConfiguration) : (this.selectedBeforeBufferTime = this.buffer.before, this.selectedAfterBufferTime = this.buffer.after), this.componentLoaded = !0, typeof this.internals.setFormValue == "function") {
-      const ue = {
-        before: this.selectedBeforeBufferTime,
-        after: this.selectedAfterBufferTime
-      };
-      this.internals.setFormValue(JSON.stringify(ue), this.name);
-    }
+    debug("nylas-buffer-time", "componentDidLoad"), this.selectedConfiguration ? this.selectedConfigurationChangedHandler(this.selectedConfiguration) : (this.selectedBeforeBufferTime = this.buffer.before, this.selectedAfterBufferTime = this.buffer.after), this.updateFormValue(), this.componentLoaded = !0;
   }
   componentWillUpdate() {
     debug("nylas-buffer-time", "componentWillUpdate");
@@ -19923,21 +19957,26 @@ const NylasBufferTime = proxyCustomElement(class extends H$2 {
     var Oe, Ke;
     debug("nylas-buffer-time", "selectedConfigurationChangedHandler", ue);
     const ge = (Ke = (Oe = ue == null ? void 0 : ue.availability) == null ? void 0 : Oe.availability_rules) == null ? void 0 : Ke.buffer;
-    this.selectedAfterBufferTime = ge != null && ge.after ? ge.after : this.buffer.after, this.selectedBeforeBufferTime = ge != null && ge.before ? ge.before : this.buffer.before;
+    this.selectedAfterBufferTime = ge != null && ge.after ? ge.after : this.buffer.after, this.selectedBeforeBufferTime = ge != null && ge.before ? ge.before : this.buffer.before, this.updateFormValue();
   }
   nylasFormDropdownChangedHandler(ue) {
     debug("nylas-buffer-time", "nylasFormDropdownChangedHandler", ue.detail);
     const ge = (Oe) => {
       const { value: Ke, name: vt } = Oe.detail;
-      vt === "before-buffer-time" ? this.selectedBeforeBufferTime = parseInt(Ke) : vt === "after-buffer-time" && (this.selectedAfterBufferTime = parseInt(Ke));
-      const ln = {
-        before: this.selectedBeforeBufferTime,
-        after: this.selectedAfterBufferTime
-      };
-      this.internals.setFormValue(JSON.stringify(ln), "booking-calendar");
+      vt === "before-buffer-time" ? this.selectedBeforeBufferTime = parseInt(Ke) : vt === "after-buffer-time" && (this.selectedAfterBufferTime = parseInt(Ke)), this.updateFormValue();
     };
     this.valueChanged.emit({ ...ue.detail, valueChanged: ge });
   }
+  get isInternalsAvailable() {
+    return this.internals !== void 0 && typeof this.internals.setFormValue == "function";
+  }
+  updateFormValue() {
+    const ue = {
+      before: this.selectedBeforeBufferTime,
+      after: this.selectedAfterBufferTime
+    };
+    this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(ue), this.name);
+  }
   renderPreview() {
     const Ke = (ei) => {
       const ti = Math.floor(ei / 30), ni = ei % 30 / 30 * 10;
@@ -20649,19 +20688,19 @@ const NylasConnectedCalendars = proxyCustomElement(class extends H$2 {
   setParticipants(ue) {
     const ge = {};
     return ue == null || ue.forEach((Oe) => {
-      var Ke, vt, ln;
+      var Ke, vt, ln, ei;
       if ((Ke = Oe == null ? void 0 : Oe.availability) != null && Ke.calendar_ids && ((ln = (vt = Oe == null ? void 0 : Oe.availability) == null ? void 0 : vt.calendar_ids) == null ? void 0 : ln.length) > 0) {
-        const ei = !!Oe.is_organizer;
+        const ti = !!Oe.is_organizer;
         ge[Oe.email] = {
-          isOpen: ei,
+          isOpen: ti,
           name: Oe.name || Oe.email,
-          availability: Oe.availability
+          calendars: (ei = Oe.availability) == null ? void 0 : ei.calendar_ids
         };
       }
     }), ge;
   }
   render() {
-    return h$2(Host, { key: "32710fe762bdf90e238c62695957a9fca31db258" }, h$2("div", { key: "a5ebf4adb7eb8e1b8a065bc05733738da06fbac3", class: "nylas-connected-calendars", part: "nccals" }, h$2("div", { key: "f3c820bcde922a7b852630d86145b1e6e1bf0e25", class: "header", part: "nccals__header" }, h$2("h3", { key: "e2b68d05d416c322b22f969d8d8c890a09812154" }, "Connected Calendars"), h$2("p", { key: "4dd41d10a6043fec1c0f4943371c312a29e1d489" }, "Select the calendars to use for checking your availability.", h$2("tooltip-component", { key: "6a8ec009fd879e1ed6b6fb65be75a88255adba17" }, h$2("info-icon", { key: "0d4a99eaee064ecee1c82ee5b13f3ab87a1d5d93", slot: "tooltip-icon" }), h$2("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.")))), h$2("div", { key: "720267110636c1dc06ac67b7e715515f56737b73", class: "content", part: "nccals__content" }, h$2("form", { key: "f295ba327aa302ea186dbf2daef3a9c30f96ee5f", ref: (ue) => this.connectedCalendarsFormRef = ue }, Object.keys(this.participantCalendars).map((ue, ge) => {
+    return h$2(Host, { key: "4b8cfcfa751c2790968049f6f10a06193f9adc70" }, h$2("div", { key: "ffbcde80612886bc09b4419bc1cc47d585834fac", class: "nylas-connected-calendars", part: "nccals" }, h$2("div", { key: "d00c14cd0ab8107a2ba609ba58b596a7d3e1e69f", class: "header", part: "nccals__header" }, h$2("h3", { key: "cb0ad20533c33a3778d0b89fe5d51aa4c15864a8" }, "Connected Calendars"), h$2("p", { key: "b3488e835534f477d2585be0a60b5800d42cbaac" }, "Select the calendars to use for checking your availability.", h$2("tooltip-component", { key: "6acbd37df60566fa8a3fb8676fe3b3f4287d5c06" }, h$2("info-icon", { key: "f1eb4a75f869b09bee95c074c8d180449654a49f", slot: "tooltip-icon" }), h$2("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.")))), h$2("div", { key: "844803e9ea3270bfcedbc212990c0038a74dd663", class: "content", part: "nccals__content" }, h$2("form", { key: "2970ec7cec45d2582b987cbfab8949c1ece02499", ref: (ue) => this.connectedCalendarsFormRef = ue }, Object.keys(this.participantCalendars).map((ue, ge) => {
       const Oe = this.selectedCalendars[ue], Ke = this.participantCalendars[ue];
       if (!(!Oe || !Oe.name))
         return h$2("div", { class: "participant-container", part: "nccals__container", key: `participant-conatiner-${ge}` }, h$2("div", { class: "participant-title", part: "nccals__title" }, h$2("p", null, Oe.name, "'s connected calendars"), h$2("div", { class: "participant-toggle", part: "nccals__toggle-container" }, h$2("span", { class: `chevron ${Oe.isOpen ? "open" : "closed"}`, onClick: () => {
@@ -21537,6 +21576,12 @@ const labels = {
     const ge = (Ke = ue == null ? void 0 : ue.event_booking) == null ? void 0 : Ke.location, Oe = (vt = ue == null ? void 0 : ue.event_booking) == null ? void 0 : vt.conferencing;
     Oe != null && Oe.provider ? (this.selectedLocationOption = this.setDefaultLocationOption(Oe, ge ?? ""), this.grantId = this.setDefaultGrantID(Oe), this.location = ge || "") : ge ? (this.selectedLocationOption = ge ? "custom" : "none", this.location = ge) : (this.selectedLocationOption = "none", this.location = "");
   }
+  currentUserChangedHandler(ue) {
+    debug("nylas-custom-booking-flow", "currentUserChangedHandler", ue), ue != null && ue.provider && (this.userProviderState = ue == null ? void 0 : ue.provider, this.setLocationOptionsForProvider(this.userProviderState));
+  }
+  conferenceProvidersChanged(ue) {
+    ue != null && ue.zoom && !this.locationOptions.some((ge) => ge.value === "zoom") && this.locationOptions.push({ value: "zoom", label: labels.zoom, labelHTML: this.getLabelHTML("zoom") });
+  }
   connectedCallback() {
     debug("nylas-event-location", "connectedCallback");
   }
@@ -21545,15 +21590,7 @@ const labels = {
   }
   componentDidLoad() {
     var ue, ge;
-    switch (debug("nylas-event-location", "componentDidLoad"), this.selectedConfiguration ? this.selectedConfigurationChangedHandler(this.selectedConfiguration) : this.selectedLocationOption = this.setDefaultLocationOption(this.eventConferencing || null, this.eventLocation ?? ""), this.userProviderState = this.userProvider ?? ((ue = this.currentUser) == null ? void 0 : ue.provider) ?? "", this.userProviderState) {
-      case "google":
-        this.locationOptions.push({ value: "google", label: labels.google, labelHTML: this.getLabelHTML("google") });
-        break;
-      case "microsoft":
-        this.locationOptions.push({ value: "microsoft", label: labels.microsoft, labelHTML: this.getLabelHTML("microsoft") });
-        break;
-    }
-    (ge = this.conferenceProviders) != null && ge.zoom && this.locationOptions.push({ value: "zoom", label: labels.zoom, labelHTML: this.getLabelHTML("zoom") });
+    debug("nylas-event-location", "componentDidLoad"), this.selectedConfiguration ? this.selectedConfigurationChangedHandler(this.selectedConfiguration) : this.selectedLocationOption = this.setDefaultLocationOption(this.eventConferencing || null, this.eventLocation ?? ""), this.userProviderState = this.userProvider ?? ((ue = this.currentUser) == null ? void 0 : ue.provider) ?? "", this.setLocationOptionsForProvider(this.userProviderState), (ge = this.conferenceProviders) != null && ge.zoom && !this.locationOptions.some((Oe) => Oe.value === "zoom") && this.locationOptions.push({ value: "zoom", label: labels.zoom, labelHTML: this.getLabelHTML("zoom") });
   }
   disconnectedCallback() {
     debug("nylas-event-location", "disconnectedCallback");
@@ -21601,6 +21638,16 @@ const labels = {
         break;
     }
   }
+  setLocationOptionsForProvider(ue) {
+    switch (ue) {
+      case "google":
+        this.locationOptions.some((ge) => ge.value === "google") || this.locationOptions.push({ value: "google", label: labels.google, labelHTML: this.getLabelHTML("google") });
+        break;
+      case "microsoft":
+        this.locationOptions.some((ge) => ge.value === "microsoft") || this.locationOptions.push({ value: "microsoft", label: labels.microsoft, labelHTML: this.getLabelHTML("microsoft") });
+        break;
+    }
+  }
   setDefaultLocationOption(ue, ge) {
     return ue != null && (ue == null ? void 0 : ue.provider) != null && (ue == null ? void 0 : ue.autocreate) != null ? CONFERENCE_PROVIDER_MAP[ue == null ? void 0 : ue.provider] : ge ? "custom" : "none";
   }
@@ -21642,7 +21689,7 @@ const labels = {
   }
   render() {
     const ue = typeof this.selectedLocationOption < "u" ? this.locationOptions.find((ge) => ge.value == this.selectedLocationOption) : null;
-    return h$2(Host, { key: "6869d3c2f6316dc482becc022bc973783332658f" }, h$2("div", { key: "e17b95b15e181f73efd5c666ff0074bcd5467b65", class: "nylas-event-location", part: "nel" }, h$2("label", { key: "9370ab01f5f730099dd5061ccf39ca3b53132244", htmlFor: "location" }, "Event meeting or location", h$2("span", { key: "acd558f22ad18afc63b93456450a5aa946916fd4", class: "label-icon" }, h$2("tooltip-component", { key: "bd2ea171a9eef9e9a377a0be2dc4a16b91bb1359" }, h$2("info-icon", { key: "745289e658441e9aadb245c94da890cdb3119179", slot: "tooltip-icon" }), h$2("span", { key: "ffa4a9597a7d63e33b639dafd736a654a97589c9", slot: "tooltip-content" }, "Select a conferencing option or add a custom location.")))), h$2("div", { key: "59f930e30b758b740128b42a855608a02ee1a739", class: "location-input" }, ue && (ue == null ? void 0 : ue.label) && h$2("select-dropdown", { withSearch: !1, name: "location", options: this.locationOptions, defaultSelectedOption: ue, exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h$2("span", { slot: "select-icon" }, this.getIcon(this.selectedLocationOption))), this.selectedLocationOption === "custom" && h$2("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: (ge) => this.handleChange(ge) }))));
+    return h$2(Host, { key: "c91ef22df2a83a3c2ac66ca9011ad8633a085b9e" }, h$2("div", { key: "9e6823ce704cf4870f99936a39371b255b165afb", class: "nylas-event-location", part: "nel" }, h$2("label", { key: "2d1a71a258d0576460acd68a93cbace4a5c9254c", htmlFor: "location" }, "Event meeting or location", h$2("span", { key: "9dd7df66eec4e35a8659c88d4f26be99093e815a", class: "label-icon" }, h$2("tooltip-component", { key: "9299313bad5724106fa7108d0874e760945bcb30" }, h$2("info-icon", { key: "2490fbc28caa2547d8a3cecc747dc94254c59df3", slot: "tooltip-icon" }), h$2("span", { key: "d6c73fef100e4f962507d58b4ed24a1bd19599c2", slot: "tooltip-content" }, "Select a conferencing option or add a custom location.")))), h$2("div", { key: "726f78440a3e65e379368b0a849bee94b2839dfd", class: "location-input" }, ue && (ue == null ? void 0 : ue.label) && h$2("select-dropdown", { withSearch: !1, name: "location", options: this.locationOptions, defaultSelectedOption: ue, exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h$2("span", { slot: "select-icon" }, this.getIcon(this.selectedLocationOption))), this.selectedLocationOption === "custom" && h$2("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: (ge) => this.handleChange(ge) }))));
   }
   static get formAssociated() {
     return !0;
@@ -21653,7 +21700,9 @@ const labels = {
   static get watchers() {
     return {
       name: ["elementNameChangedHandler"],
-      selectedConfiguration: ["selectedConfigurationChangedHandler"]
+      selectedConfiguration: ["selectedConfigurationChangedHandler"],
+      currentUser: ["currentUserChangedHandler"],
+      conferenceProviders: ["conferenceProvidersChanged"]
     };
   }
   static get style() {
@@ -21674,7 +21723,9 @@ const labels = {
   locationOptions: [32]
 }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"]], {
   name: ["elementNameChangedHandler"],
-  selectedConfiguration: ["selectedConfigurationChangedHandler"]
+  selectedConfiguration: ["selectedConfigurationChangedHandler"],
+  currentUser: ["currentUserChangedHandler"],
+  conferenceProviders: ["conferenceProvidersChanged"]
 }]);
 __decorate$f([
   RegisterComponent({
@@ -22110,6 +22161,18 @@ const timePeriodSelectorCss = ".time-period-selector.sc-time-period-selector{dis
       value: ue
     }));
   }
+  defaultSelectedPeriodChanged(ue) {
+    this.selectedPeriod = ue, this.updateNumberOptionsAndSelectedNumber(ue);
+  }
+  defaultSelectedNumberChanged(ue) {
+    this.selectedNumber = ue;
+  }
+  timePeriodsChanged(ue) {
+    this.timePeriodOptions = ue.map((ge) => ({
+      label: ge,
+      value: ge
+    }));
+  }
   componentDidLoad() {
     this.selectedNumber = this.defaultSelectedNumber, this.selectedPeriod = this.defaultSelectedPeriod;
     const ue = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod, ge = this.calculateOptions(ue);
@@ -22162,11 +22225,18 @@ const timePeriodSelectorCss = ".time-period-selector.sc-time-period-selector{dis
     })), this.selectedNumber = parseInt(this.numberOptions[0].value);
   }
   render() {
-    return h$2("div", { key: "76ed6c36ebbcfbb8b8d54edc6a26a9d2a6d6f7fb", class: "time-period-selector" }, typeof this.selectedNumber == "number" && h$2("input-dropdown", { id: "time-number", name: "time-number", inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find((ue) => ue.value == this.selectedNumber.toString()) }), typeof this.selectedPeriod == "string" && h$2("select-dropdown", { id: "time-period", name: "time-period", options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? "s" : "", defaultSelectedOption: this.timePeriodOptions.find((ue) => ue.value == this.selectedPeriod), withSearch: !1 }));
+    return h$2("div", { key: "f40a2be9bc76a0a5be0ffa3c87779fab644e52f2", class: "time-period-selector" }, typeof this.selectedNumber == "number" && h$2("input-dropdown", { id: "time-number", name: "time-number", inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find((ue) => ue.value == this.selectedNumber.toString()) }), typeof this.selectedPeriod == "string" && h$2("select-dropdown", { id: "time-period", name: "time-period", options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? "s" : "", defaultSelectedOption: this.timePeriodOptions.find((ue) => ue.value == this.selectedPeriod), withSearch: !1 }));
   }
   get host() {
     return this;
   }
+  static get watchers() {
+    return {
+      defaultSelectedPeriod: ["defaultSelectedPeriodChanged"],
+      defaultSelectedNumber: ["defaultSelectedNumberChanged"],
+      timePeriods: ["timePeriodsChanged"]
+    };
+  }
   static get style() {
     return TimePeriodSelectorStyle0;
   }
@@ -22178,7 +22248,11 @@ const timePeriodSelectorCss = ".time-period-selector.sc-time-period-selector{dis
   selectedNumber: [32],
   numberOptions: [32],
   timePeriodOptions: [32]
-}, [[0, "inputOptionChanged", "inputOptionChangedHandler"], [0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"]]]);
+}, [[0, "inputOptionChanged", "inputOptionChangedHandler"], [0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"]], {
+  defaultSelectedPeriod: ["defaultSelectedPeriodChanged"],
+  defaultSelectedNumber: ["defaultSelectedNumberChanged"],
+  timePeriods: ["timePeriodsChanged"]
+}]);
 function defineCustomElement$k() {
   if (typeof customElements > "u")
     return;
@@ -22840,7 +22914,7 @@ const NylasPageStyling = proxyCustomElement(class extends H$2 {
     this.isOpen = !this.isOpen;
   }
   render() {
-    return h$2(Host, { key: "1601b88e8e7e2c500cb105f237949faa4e9d8dbd" }, h$2("div", { key: "2a3072bc409f07961da51439a0f45f930d0725de", part: "nps", class: { "nylas-page-styling": !0, "no-border": !this.customInputsSlot } }, this.customInputsSlot ? h$2("div", { class: "header", part: "nps__header" }, h$2("div", null, h$2("h3", null, "Page styling and customization")), h$2("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h$2("span", { class: `chevron ${this.isOpen ? "open" : "closed"} `, onClick: () => this.toggleConfirmationEmail() }, h$2("chevron-icon", { width: "24", height: "24" })))) : null, h$2("div", { key: "404727336fdf8d0de2d8e769df1dcc21ae69f34b", id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h$2("div", { key: "2e7da0539b197347719a1202e04c1f7b238cdc9d", class: { "nylas-page-styling__section": !0, "no-padding": !this.customInputsSlot } }, h$2("div", { key: "55ba3e932216f073238b8385071defa9139ca0f9", class: "nylas-page-styling__row" }, h$2("div", { key: "333576450039ea7f76bfb548c5947609bc813837", class: { subsection: !0, hide: !this.isOpen } }))))));
+    return h$2(Host, { key: "c2ffa8ae940e9594f254903d45abc3f7c01d7d41" }, h$2("div", { key: "1813654e2aaa9c66d5a535186f227968b434654c", part: "nps", class: { "nylas-page-styling": !0, "no-border": !this.customInputsSlot } }, this.customInputsSlot ? h$2("div", { class: "header", part: "nps__header" }, h$2("div", null, h$2("h3", null, "Page styling and customization")), h$2("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h$2("span", { class: `chevron ${this.isOpen ? "open" : "closed"} `, onClick: () => this.toggleConfirmationEmail() }, h$2("chevron-icon", { width: "24", height: "24" })))) : null, h$2("div", { key: "cff4891eeb1a958feb2a6b20623b97f908721c60", id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h$2("div", { key: "16b2398f10b6d7703d02bbbf5c43e3e229499b2d", class: { "nylas-page-styling__section": !0, "no-padding": !this.customInputsSlot } }, h$2("div", { key: "fd09434076ea4626ee9d7b2710ec8418325aa117", class: "nylas-page-styling__row" }, h$2("div", { key: "16a29cabadc4f1a4ba9f389fe232ea22125cfe36", class: { subsection: !0, hide: !this.isOpen } }))))));
   }
   static get formAssociated() {
     return !0;
@@ -22850,7 +22924,8 @@ const NylasPageStyling = proxyCustomElement(class extends H$2 {
   }
   static get watchers() {
     return {
-      name: ["elementNameChangedHandler"]
+      name: ["elementNameChangedHandler"],
+      selectedConfiguration: ["selectedConfigurationChangedHandler"]
     };
   }
   static get style() {
@@ -22864,7 +22939,8 @@ const NylasPageStyling = proxyCustomElement(class extends H$2 {
   currentAppearance: [32],
   customInputsSlot: [32]
 }, [[4, "nylasFormInputChanged", "nylasFormInputChangeHandler"], [4, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [4, "valueChanged", "valueChangedHandler"], [4, "nylasFormCheckboxToggled", "checkboxToggledHandler"], [4, "nylasFormRadioChanged", "radioChangedHandler"]], {
-  name: ["elementNameChangedHandler"]
+  name: ["elementNameChangedHandler"],
+  selectedConfiguration: ["selectedConfigurationChangedHandler"]
 }]);
 __decorate$8([
   RegisterComponent({
@@ -23172,12 +23248,13 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class extends H$2
     return this.internals !== void 0 && typeof this.internals.setFormValue == "function" && typeof this.internals.setValidity == "function";
   }
   render() {
-    return h$2(Host, { key: "5034211537411e732ffee5f7420884e5908cc4e5" }, h$2("div", { key: "6d016a9b8a3dd204521d9f63de90cd848e9c49e7", class: "nylas-participants-custom-availability", part: "npca" }, h$2("div", { key: "fff77ce67f19e5b0bdc7a8b491ff38b1b7d9af55", class: "header", part: "npca__header" }, h$2("h3", { key: "656016ac8ee26636fad2e725237b1bb538563864" }, "Participant open hours"), h$2("p", { key: "87ab243b9f3402150c6dae36fc702d7f675350c3" }, "If not set, the default open hours will be used to calculate availability for this participant.")), h$2("div", { key: "ba6c30fbb85fc26d6471494716b18f7f815900ec", class: "content", part: "npca__content" }, h$2("form", { key: "7cc553b6730ead929fc45efa67b29b56e41f022e", ref: (ue) => this.participantFormRef = ue }, Object.keys(this.selectedParticipants).map((ue, ge) => {
-      const Oe = this.selectedParticipants[ue];
+    return h$2(Host, { key: "64198b8231e1739484f81d02167d7b5f456eda69" }, h$2("div", { key: "68eb8279c510ef937e19dec06960867c98a5b02a", class: "nylas-participants-custom-availability", part: "npca" }, h$2("div", { key: "9622d8a7fbc124723cb7135a3a3846fad0e4e458", class: "header", part: "npca__header" }, h$2("h3", { key: "6424eeeb937ce2225a63d76482ec633efacd9e7a" }, "Participant open hours"), h$2("p", { key: "ac021fef4d4b0de03d5e2ca335563ec4f328156c" }, "If not set, the default open hours will be used to calculate availability for this participant.")), h$2("div", { key: "e9412e214011b575954196e39ea265dcf86801ec", class: "content", part: "npca__content" }, h$2("form", { key: "ab5b4239f2d2b31fcd69d0f2e2d61a8a13003739", ref: (ue) => this.participantFormRef = ue }, Object.keys(this.selectedParticipants).map((ue, ge) => {
+      var vt;
+      const Oe = this.selectedParticipants[ue], Ke = ((vt = Oe.availability) == null ? void 0 : vt.open_hours) || [];
       if (!(!Oe || !Oe.name || !Oe.availability))
         return h$2("div", { class: "participant-container", part: "npca__participant-container", key: `participant-conatiner-${ge}` }, h$2("div", { class: "participant-title", part: "npca__participant-title" }, h$2("p", null, Oe.name, "'s open hours"), h$2("div", { class: "participant-toggle", part: "npca__participant-toggle--container" }, h$2("toggle-switch", { exportparts: "ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider", name: ue, checked: !!(Oe != null && Oe.openHours) && (Oe == null ? void 0 : Oe.openHours.length) > 0 }), h$2("span", { class: `chevron ${Oe.isOpen ? "open" : "closed"} ${Oe.setCustom ? "" : "disabled"}`, onClick: () => {
           Oe.setCustom && (this.selectedParticipants[ue].isOpen = !Oe.isOpen, this.selectedParticipants = { ...this.selectedParticipants });
-        } }, h$2("chevron-icon", { width: "24", height: "24" })))), Oe.isOpen && h$2("nylas-availability-picker", { key: ge, name: `participant-${ge}-${ue}`, openHours: Oe.openHours, defaultTimezone: Oe.timezone, hideHeader: !0 }));
+        } }, h$2("chevron-icon", { width: "24", height: "24" })))), Oe.isOpen && h$2("nylas-availability-picker", { key: ge, name: `participant-${ge}-${ue}`, openHours: Ke, defaultTimezone: Oe.timezone, hideHeader: !0 }));
     })))));
   }
   static get formAssociated() {
@@ -28444,8 +28521,8 @@ const buildFeedbackIntegration = ({
     const Hi = getClient(), zi = Hi && Hi.getIntegrationByName(Bi);
     if (zi)
       return zi;
-    const Vi = (Li && Li() || await ve(Wi, li))();
-    return Hi && Hi.addIntegration(Vi), Vi;
+    const Ki = (Li && Li() || await ve(Wi, li))();
+    return Hi && Hi.addIntegration(Ki), Ki;
   }, Ni = async (Bi) => {
     const Li = Bi.enableScreenshot && isScreenshotSupported(), [Wi, Hi] = await Promise.all([
       Fi("FeedbackModal", ue, "feedbackModalIntegration"),
@@ -28480,7 +28557,7 @@ const buildFeedbackIntegration = ({
     if (!Hi)
       throw DEBUG_BUILD && logger.error("[Feedback] Unable to attach to target element"), new Error("Unable to attach to target element");
     let zi = null;
-    const Ki = async () => {
+    const Vi = async () => {
       zi || (zi = await Ni({
         ...Wi,
         onFormSubmitted: () => {
@@ -28488,11 +28565,11 @@ const buildFeedbackIntegration = ({
         }
       })), zi.appendToDom(), zi.open();
     };
-    Hi.addEventListener("click", Ki);
-    const Vi = () => {
-      Ui = Ui.filter((Ji) => Ji !== Vi), zi && zi.removeFromDom(), zi = null, Hi.removeEventListener("click", Ki);
+    Hi.addEventListener("click", Vi);
+    const Ki = () => {
+      Ui = Ui.filter((Ji) => Ji !== Ki), zi && zi.removeFromDom(), zi = null, Hi.removeEventListener("click", Vi);
     };
-    return Ui.push(Vi), Vi;
+    return Ui.push(Ki), Ki;
   }, Gi = (Bi = {}) => {
     const Li = mergeOptions(Ri, Bi), Wi = ji(Li), Hi = Actor({
       triggerLabel: Li.triggerLabel,
@@ -30151,7 +30228,7 @@ const NylasEditorTabs = proxyCustomElement(class extends H$2 {
     super(), this.__registerHost(), this.schedulerConfigChanged = createEvent(this, "schedulerConfigChanged", 7), this.cancelButtonClick = createEvent(this, "cancelButtonClick", 7), this.formSubmitted = createEvent(this, "formSubmitted", 7), this.previewButtonClicked = createEvent(this, "previewButtonClicked", 7), this.schedulerEditorFormUpdated = createEvent(this, "schedulerEditorFormUpdated", 7), this.setError = (ue) => {
       this.error = ue.message;
     }, this.formSubmissionHandler = async (ue) => {
-      var qi, Gi, Bi, Li, Wi, Hi, zi, Ki, Vi, Ji, tr, nr, Gr, Yr, Zr, Jr, Qr;
+      var qi, Gi, Bi, Li, Wi, Hi, zi, Vi, Ki, Ji, tr, nr, Gr, Yr, Zr, Jr, Qr;
       ue.preventDefault();
       const ge = await this.formSubmitted.emit();
       if (debug("[nylas-editor-tabs]", "formSubmissionHandler", ge), !this.formRef.checkValidity() || ge.defaultPrevented) {
@@ -30185,7 +30262,7 @@ const NylasEditorTabs = proxyCustomElement(class extends H$2 {
           interval_minutes: (ui == null ? void 0 : ui.interval) ?? Ii,
           round_to: ui == null ? void 0 : ui.roundTo,
           availability_rules: {
-            availability_method: vi || (((Ji = (Vi = (Ki = this.selectedConfiguration) == null ? void 0 : Ki.availability) == null ? void 0 : Vi.availability_rules) == null ? void 0 : Ji.availability_method) ?? "collective"),
+            availability_method: vi || (((Ji = (Ki = (Vi = this.selectedConfiguration) == null ? void 0 : Vi.availability) == null ? void 0 : Ki.availability_rules) == null ? void 0 : Ji.availability_method) ?? "collective"),
             buffer: ai || { before: 0, after: 0 },
             default_open_hours: (ti == null ? void 0 : ti.openHours) ?? ((Gr = (nr = (tr = this.selectedConfiguration) == null ? void 0 : tr.availability) == null ? void 0 : nr.availability_rules) == null ? void 0 : Gr.default_open_hours) ?? DEFAULT_OPEN_HOURS,
             round_robin_group_id: ((Jr = (Zr = (Yr = this.selectedConfiguration) == null ? void 0 : Yr.availability) == null ? void 0 : Zr.availability_rules) == null ? void 0 : Jr.round_robin_group_id) ?? ""
@@ -30304,7 +30381,7 @@ const NylasEditorTabs = proxyCustomElement(class extends H$2 {
     var ge, Oe;
     debug("[nylas-editor-tabs]", "componentDidLoad"), this.enableUserFeedback && !isInitialized() && init({
       dsn: "https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816",
-      release: "1.3.2",
+      release: "1.3.3",
       integrations: (Ke) => [
         ...Ke.filter((vt) => !1),
         feedbackSyncIntegration({
@@ -30343,7 +30420,7 @@ const NylasEditorTabs = proxyCustomElement(class extends H$2 {
       captureContext: {
         tags: {
           "nylas-web-element": "nylas-scheduler-editor",
-          "nylas-web-element-version": "1.3.2"
+          "nylas-web-element-version": "1.3.3"
         },
         extra: {
           configId: (Ke = this.selectedConfiguration) == null ? void 0 : Ke.id,