@nylas/web-elements 1.3.2 → 1.3.3

package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js

@@ -14545,7 +14545,7 @@ class L9 {
   }
   async makeAPIRequest(e, n, r, i = {}) {
     try {
-      const o = new URL(this.schedulerAPIURL), s = "1.3.2";
+      const o = new URL(this.schedulerAPIURL), s = "1.3.3";
       return o.pathname = e, await (await fetch(decodeURIComponent(o.toString()), {
         method: n,
         headers: {
@@ -15712,6 +15712,9 @@ const iC = '.checkbox-container{--nylas-primary:#2563eb;--nylas-error:#cc4841;--
   constructor() {
     super(), this.__registerHost(), this.__attachShadow(), this.nylasFormCheckboxToggled = W(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);
   }
@@ -15733,11 +15736,16 @@ const iC = '.checkbox-container{--nylas-primary:#2563eb;--nylas-error:#cc4841;--
     });
   }
   render() {
-    return m("div", { key: "f4dfab5a5da9f9c79424930bfd5497c24dc1bfe5", class: "checkbox-container" }, m("label", { key: "78e192f2eddcfd788ac16e80be3ac0b9c47e6f6a" }, m("input", { key: "6e3aa50fb6542cb134dc5454e9fc0052be22e36f", type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), m("span", { key: "abbd103b06bf934eff294b443b468e446901c371", class: "checkmark" }), m("slot", { key: "f11d669ba02b705ba7679985e83b91086a17ccc9", name: "label" }, m("span", { key: "1298c44fbbe9ce75638b00ac07e6e83bab1394c2", class: "label" }, this.label))), this.error && m("p", { class: "error" }, this.error));
+    return m("div", { key: "0be06ba2c6b6ed277b3ba736827f9f60e18c6056", class: "checkbox-container" }, m("label", { key: "a0a0cf6b1f546b8d1485dd3aee1b686f0e9c9cba" }, m("input", { key: "96bdb407b3ab6f668cf94b83e8091a604743f93f", type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), m("span", { key: "d345d3b47c14213487a9108d78abbf0db26f25af", class: "checkmark" }), m("slot", { key: "aba536e12ed7a97d18790f1a212ead284c1253ec", name: "label" }, m("span", { key: "e7767302bc6865b99cf42949e8bd032e237d2ad9", class: "label" }, this.label))), this.error && m("p", { class: "error" }, this.error));
   }
   get el() {
     return this;
   }
+  static get watchers() {
+    return {
+      checked: ["checkedPropChangedHandler"]
+    };
+  }
   static get style() {
     return oC;
   }
@@ -15748,7 +15756,9 @@ const iC = '.checkbox-container{--nylas-primary:#2563eb;--nylas-error:#cc4841;--
   required: [4],
   isChecked: [32],
   error: [32]
-}, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]]]);
+}, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]], {
+  checked: ["checkedPropChangedHandler"]
+}]);
 function K5() {
   if (typeof customElements > "u")
     return;
@@ -16292,7 +16302,7 @@ const jC = ':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-erro
   date: "YYYY-MM-DD"
 }, HC = te(class extends ne {
   constructor() {
-    super(), this.__registerHost(), this.__attachShadow(), this.nylasFormInputChanged = W(this, "nylasFormInputChanged", 7), this.nylasFormInputFocused = W(this, "nylasFormInputFocused", 7), this.nylasFormInputBlurred = W(this, "nylasFormInputBlurred", 7), this.name = "input", this.defaultValue = void 0, this.label = "", this.placeholder = zC.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 = W(this, "nylasFormInputChanged", 7), this.nylasFormInputFocused = W(this, "nylasFormInputFocused", 7), this.nylasFormInputBlurred = W(this, "nylasFormInputBlurred", 7), this.name = "input", this.defaultValue = void 0, this.label = "", this.placeholder = zC.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 = Wt(e), this.value && this.validatePattern(this.value);
@@ -16304,11 +16314,12 @@ const jC = ':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-erro
     this.validatePattern(this.value), this.error && e.preventDefault();
   }
   async handleFormSubmitted(e) {
-    var n;
-    (n = this.el) != null && n.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 = Wt(e.target.value), this.nylasFormInputChanged.emit({
+    this.error = "";
+    const n = e.target;
+    this.value = Wt(n.value), this.isDateValid = n.validity.valid, this.nylasFormInputChanged.emit({
       value: this.value,
       name: this.name,
       label: this.label,
@@ -16329,14 +16340,18 @@ const jC = ':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 m("label", { key: "959c6b772ea4f2f4706d72255d1e36ea8d4fcbd3", part: "ic__label", class: { error: !!this.error } }, this.label && m("p", null, m("span", { class: "label" }, this.label), this.required && m("span", { class: "required" }, "*")), m("div", { key: "a018a19fe2a77416d7ac4d9c7ea84cb0560a70de", part: "ic__input_wrapper", class: "input_wrapper" }, m("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() }), m("slot", { key: "9730db9ef73e570667c69879ce457c45b5e196a5", name: "additional-input" })), this.error && m("span", { class: "error help-text" }, this.error));
+    return m("label", { key: "db7e5910f650055747d1f2bca13356d2c3fe3f9e", part: "ic__label", class: { error: !!this.error } }, this.label && m("p", null, m("span", { class: "label" }, this.label), this.required && m("span", { class: "required" }, "*")), m("div", { key: "81d0a723cec27805587e2abdac667504d078e211", part: "ic__input_wrapper", class: "input_wrapper" }, m("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() }), m("slot", { key: "6c1d31a29dc01621d9212a95574c329844da0eed", name: "additional-input" })), this.error && m("span", { class: "error help-text" }, this.error));
   }
   get el() {
     return this;
@@ -16362,7 +16377,8 @@ const jC = ':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"]
 }]);
@@ -24462,7 +24478,7 @@ const Cn = (t, e) => {
     var o, s;
     N("[nylas-scheduler] Component will load"), this.enableUserFeedback && !f$() && vB({
       dsn: "https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816",
-      release: "1.3.2",
+      release: "1.3.3",
       integrations: (a) => [
         ...a.filter((u) => !1),
         RD({
@@ -24673,7 +24689,7 @@ const Cn = (t, e) => {
       captureContext: {
         tags: {
           "nylas-web-element": "nylas-schduling",
-          "nylas-web-element-version": "1.3.2"
+          "nylas-web-element-version": "1.3.3"
         },
         extra: {
           configId: this.configurationId,

package/dist/cdn/scheduler-store/scheduler-store.es.js

@@ -9049,7 +9049,7 @@ class F2 {
   }
   async makeAPIRequest(e, t, r, i = {}) {
     try {
-      const u = new URL(this.schedulerAPIURL), o = "1.3.2";
+      const u = new URL(this.schedulerAPIURL), o = "1.3.3";
       return u.pathname = e, await (await fetch(decodeURIComponent(u.toString()), {
         method: t,
         headers: {

package/dist/cdn/time-period-selector/time-period-selector.es.js

@@ -9448,6 +9448,18 @@ const k3 = ".time-period-selector.sc-time-period-selector{display:grid;gap:0.5re
       value: e
     }));
   }
+  defaultSelectedPeriodChanged(e) {
+    this.selectedPeriod = e, this.updateNumberOptionsAndSelectedNumber(e);
+  }
+  defaultSelectedNumberChanged(e) {
+    this.selectedNumber = e;
+  }
+  timePeriodsChanged(e) {
+    this.timePeriodOptions = e.map((t) => ({
+      label: t,
+      value: t
+    }));
+  }
   componentDidLoad() {
     this.selectedNumber = this.defaultSelectedNumber, this.selectedPeriod = this.defaultSelectedPeriod;
     const e = E3[this.selectedPeriod] ?? this.selectedPeriod, t = this.calculateOptions(e);
@@ -9500,11 +9512,18 @@ const k3 = ".time-period-selector.sc-time-period-selector{display:grid;gap:0.5re
     })), this.selectedNumber = parseInt(this.numberOptions[0].value);
   }
   render() {
-    return U("div", { key: "76ed6c36ebbcfbb8b8d54edc6a26a9d2a6d6f7fb", class: "time-period-selector" }, typeof this.selectedNumber == "number" && U("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((e) => e.value == this.selectedNumber.toString()) }), typeof this.selectedPeriod == "string" && U("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((e) => e.value == this.selectedPeriod), withSearch: !1 }));
+    return U("div", { key: "f40a2be9bc76a0a5be0ffa3c87779fab644e52f2", class: "time-period-selector" }, typeof this.selectedNumber == "number" && U("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((e) => e.value == this.selectedNumber.toString()) }), typeof this.selectedPeriod == "string" && U("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((e) => e.value == this.selectedPeriod), withSearch: !1 }));
   }
   get host() {
     return this;
   }
+  static get watchers() {
+    return {
+      defaultSelectedPeriod: ["defaultSelectedPeriodChanged"],
+      defaultSelectedNumber: ["defaultSelectedNumberChanged"],
+      timePeriods: ["timePeriodsChanged"]
+    };
+  }
   static get style() {
     return w3;
   }
@@ -9516,7 +9535,11 @@ const k3 = ".time-period-selector.sc-time-period-selector{display:grid;gap:0.5re
   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 $3() {
   if (typeof customElements > "u")
     return;

package/dist/cjs/calendar-agenda-fill-icon_53.cjs.entry.js

@@ -414,10 +414,10 @@ const NylasAdditionalParticipants = class {
     componentWillLoad() {
         utils.debug('nylas-additional-participants', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        this.updateState(this.selectedConfiguration, this.currentUser);
     }
     componentDidLoad() {
         utils.debug('nylas-additional-participants', 'componentDidLoad');
+        this.updateState(this.selectedConfiguration, this.currentUser);
     }
     disconnectedCallback() {
         utils.debug('nylas-additional-participants', 'disconnectedCallback');
@@ -4002,6 +4002,28 @@ var __metadata$q = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
+const staticFields = [
+    {
+        type: 'text',
+        label: 'Your name',
+        key: 'your_name',
+        typeLabel: 'Short text',
+        readonly: true,
+        required: true,
+        isOpen: false,
+        order: 0,
+    },
+    {
+        type: 'email',
+        label: 'Your Email',
+        key: 'your_email',
+        typeLabel: 'Email',
+        readonly: true,
+        isOpen: false,
+        required: true,
+        order: 1,
+    },
+];
 const NylasBookingFormConfig = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
@@ -4022,6 +4044,9 @@ const NylasBookingFormConfig = class {
         utils.debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newValue) {
+        this.updateFormFields(newValue);
+    }
     connectedCallback() {
         utils.debug('nylas-booking-form-config', 'connectedCallback');
     }
@@ -4031,37 +4056,18 @@ const NylasBookingFormConfig = class {
     componentWillLoad() {
         utils.debug('nylas-booking-form-config', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        const staticFields = [
-            {
-                type: 'text',
-                label: 'Your name',
-                key: 'your_name',
-                typeLabel: 'Short text',
-                readonly: true,
-                required: true,
-                isOpen: false,
-                order: 0,
-            },
-            {
-                type: 'email',
-                label: 'Your Email',
-                key: 'your_email',
-                typeLabel: 'Email',
-                readonly: true,
-                isOpen: false,
-                required: true,
-                order: 1,
-            },
-        ];
         this.formFields = [...staticFields];
     }
     componentDidLoad() {
         utils.debug('nylas-booking-form-config', 'componentDidLoad');
-        const additionalFields = Object.entries(this.selectedConfiguration?.scheduler?.additional_fields || {}).map(([id, field]) => ({ ...field, key: id })) ||
-            this.additionalFields ||
-            [];
+        if (this.selectedConfiguration) {
+            this.updateFormFields(this.selectedConfiguration);
+        }
+    }
+    updateFormFields(config) {
+        const additionalFields = Object.entries(config?.scheduler?.additional_fields || {}).map(([id, field]) => ({ ...field, key: id })) || this.additionalFields || [];
         this.formFields = [
-            ...this.formFields,
+            ...staticFields,
             ...additionalFields
                 .sort((a, b) => a.order - b.order)
                 .map((f, i) => {
@@ -4269,7 +4275,7 @@ const NylasBookingFormConfig = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '632d9bd6cc0162efdb7e83b78b23935f04569fcb' }, index$1.h("div", { key: 'dae8d7f52a658b121a992f9cd73cd766e2c16cec', class: "nylas-booking-form-config", part: "nbfc" }, index$1.h("div", { key: '4f02c7163dfecd29df48da9b163e12e9a6c9c357', class: "header", part: "nbfc__header" }, index$1.h("div", { key: '169cfa3f8d4dd519dd0621d032d3e7a13384b8c7', class: "header_text" }, index$1.h("h3", { key: '66e50347bae8fca4c3344030d4d3caf4158244e2' }, "Booking form"), index$1.h("p", { key: '883886b2c841acdbd44e6cb1c18a860a51c52412' }, "Add custom fields to the booking form.")), index$1.h("div", { key: 'e307526fa6d75c4aaaa71c5658006d9e7417c0f0', class: "header_action" }, index$1.h("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: constants.DEFAULT_FORM_FIELD_TYPES, withSearch: false, withChevron: false, dropdownButtonText: "Add new field" }, index$1.h("span", { key: '5ccd949bb563f32f1682b9432759828f086b46e3', slot: "select-icon" }, index$1.h("plus-icon", { key: 'b77ac5dd297071ec6e16c3728db1a7b096e83e74', width: "15", height: "15" }))))), index$1.h("div", { key: 'a7499ce8959d027f0540b086c3393353c3993452', class: "content" }, index$1.h("div", { key: 'ff24161e13beba123ca46c814515704bf06d4259', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
+        return (index$1.h(index$1.Host, { key: 'bd832f2b9a02ce53187e4f633e4c0388e6e65a03' }, index$1.h("div", { key: 'fcf79fe131d8e0a99312286b15f228b997d8c0be', class: "nylas-booking-form-config", part: "nbfc" }, index$1.h("div", { key: '07cd086a8af8145f5a8c6676e360fa5f919040f3', class: "header", part: "nbfc__header" }, index$1.h("div", { key: 'f703982061b36b7f4b792f4deff59cc4256b7c25', class: "header_text" }, index$1.h("h3", { key: 'a7cba135c527592a000c296ceaf68bb91c9ddcf4' }, "Booking form"), index$1.h("p", { key: '62acf8b4a583145e2bc300b1b351799dec1ff438' }, "Add custom fields to the booking form.")), index$1.h("div", { key: '574ef9a02aa06ad29ac0b08c22aa749a844d32d8', class: "header_action" }, index$1.h("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: constants.DEFAULT_FORM_FIELD_TYPES, withSearch: false, withChevron: false, dropdownButtonText: "Add new field" }, index$1.h("span", { key: 'e0aaa33a3bd04b79499310c3904984269eaecbf3', slot: "select-icon" }, index$1.h("plus-icon", { key: '06bf29f2b3d0dca74d660db8791a47bc2474652b', width: "15", height: "15" }))))), index$1.h("div", { key: 'b33cfae9a876be328d795366802a1791e22ca164', class: "content" }, index$1.h("div", { key: '0df453e1fc129a13b90b33c6e267ecd9dd149c56', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
             return (index$1.h("div", { class: `form-field draggable ${field.readonly && 'fixed'}`, part: "nbfc__form_field", key: i }, index$1.h("div", { class: "form-field_header", part: "nbfc__form_field-header" }, index$1.h("span", { class: "dragable" }, index$1.h("dragable-icon", { width: "24", height: "25" })), index$1.h("div", { class: "form-field_header_text" }, index$1.h("h4", null, field.label), index$1.h("p", null, field.typeLabel)), index$1.h("div", { class: "form-field_header_actions" }, index$1.h("span", { class: `is-required` }, field.required ? 'Required' : 'Optional'), !field.readonly && (index$1.h("button", { onClick: () => {
                     this.fieldRemove(i);
                 } }, index$1.h("close-icon", null))), index$1.h("span", { class: `chevron ${field.isOpen ? 'open' : 'closed'}`, onClick: () => {
@@ -4289,6 +4295,7 @@ const NylasBookingFormConfig = class {
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
         "formFields": ["watchHandler"]
     }; }
 };
@@ -4358,14 +4365,8 @@ const NylasBufferTime = class {
             this.selectedBeforeBufferTime = this.buffer.before;
             this.selectedAfterBufferTime = this.buffer.after;
         }
+        this.updateFormValue();
         this.componentLoaded = true;
-        if (typeof this.internals.setFormValue === 'function') {
-            const bufferTime = {
-                before: this.selectedBeforeBufferTime,
-                after: this.selectedAfterBufferTime,
-            };
-            this.internals.setFormValue(JSON.stringify(bufferTime), this.name);
-        }
     }
     componentWillUpdate() {
         utils.debug('nylas-buffer-time', 'componentWillUpdate');
@@ -4388,6 +4389,7 @@ const NylasBufferTime = class {
         const buffer = newValue?.availability?.availability_rules?.buffer;
         this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;
         this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;
+        this.updateFormValue();
     }
     nylasFormDropdownChangedHandler(event) {
         utils.debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);
@@ -4399,14 +4401,20 @@ const NylasBufferTime = class {
             else if (name === 'after-buffer-time') {
                 this.selectedAfterBufferTime = parseInt(value);
             }
-            const bufferTime = {
-                before: this.selectedBeforeBufferTime,
-                after: this.selectedAfterBufferTime,
-            };
-            this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');
+            this.updateFormValue();
         };
         this.valueChanged.emit({ ...event.detail, valueChanged });
     }
+    get isInternalsAvailable() {
+        return this.internals !== undefined && typeof this.internals.setFormValue === 'function';
+    }
+    updateFormValue() {
+        const bufferTime = {
+            before: this.selectedBeforeBufferTime,
+            after: this.selectedAfterBufferTime,
+        };
+        this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(bufferTime), this.name);
+    }
     renderPreview() {
         const totalSlots = 4;
         const slotHeight = 10;
@@ -5020,14 +5028,14 @@ const NylasConnectedCalendars = class {
                 selectedParticipants[participant.email] = {
                     isOpen: isOpen,
                     name: participant.name || participant.email,
-                    availability: participant.availability,
+                    calendars: participant.availability?.calendar_ids,
                 };
             }
         });
         return selectedParticipants;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '32710fe762bdf90e238c62695957a9fca31db258' }, index$1.h("div", { key: 'a5ebf4adb7eb8e1b8a065bc05733738da06fbac3', class: "nylas-connected-calendars", part: "nccals" }, index$1.h("div", { key: 'f3c820bcde922a7b852630d86145b1e6e1bf0e25', class: "header", part: "nccals__header" }, index$1.h("h3", { key: 'e2b68d05d416c322b22f969d8d8c890a09812154' }, "Connected Calendars"), index$1.h("p", { key: '4dd41d10a6043fec1c0f4943371c312a29e1d489' }, "Select the calendars to use for checking your availability.", index$1.h("tooltip-component", { key: '6a8ec009fd879e1ed6b6fb65be75a88255adba17' }, index$1.h("info-icon", { key: '0d4a99eaee064ecee1c82ee5b13f3ab87a1d5d93', slot: "tooltip-icon" }), index$1.h("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.")))), index$1.h("div", { key: '720267110636c1dc06ac67b7e715515f56737b73', class: "content", part: "nccals__content" }, index$1.h("form", { key: 'f295ba327aa302ea186dbf2daef3a9c30f96ee5f', ref: el => (this.connectedCalendarsFormRef = el) }, Object.keys(this.participantCalendars).map((key, index) => {
+        return (index$1.h(index$1.Host, { key: '4b8cfcfa751c2790968049f6f10a06193f9adc70' }, index$1.h("div", { key: 'ffbcde80612886bc09b4419bc1cc47d585834fac', class: "nylas-connected-calendars", part: "nccals" }, index$1.h("div", { key: 'd00c14cd0ab8107a2ba609ba58b596a7d3e1e69f', class: "header", part: "nccals__header" }, index$1.h("h3", { key: 'cb0ad20533c33a3778d0b89fe5d51aa4c15864a8' }, "Connected Calendars"), index$1.h("p", { key: 'b3488e835534f477d2585be0a60b5800d42cbaac' }, "Select the calendars to use for checking your availability.", index$1.h("tooltip-component", { key: '6acbd37df60566fa8a3fb8676fe3b3f4287d5c06' }, index$1.h("info-icon", { key: 'f1eb4a75f869b09bee95c074c8d180449654a49f', slot: "tooltip-icon" }), index$1.h("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.")))), index$1.h("div", { key: '844803e9ea3270bfcedbc212990c0038a74dd663', class: "content", part: "nccals__content" }, index$1.h("form", { key: '2970ec7cec45d2582b987cbfab8949c1ece02499', ref: el => (this.connectedCalendarsFormRef = el) }, Object.keys(this.participantCalendars).map((key, index) => {
             const participant = this.selectedCalendars[key];
             const participantCalendars = this.participantCalendars[key];
             if (!participant || !participant.name)
@@ -5847,6 +5855,18 @@ const NylasEventLocation = class {
             this.location = '';
         }
     }
+    currentUserChangedHandler(newValue) {
+        utils.debug('nylas-custom-booking-flow', 'currentUserChangedHandler', newValue);
+        if (newValue?.provider) {
+            this.userProviderState = newValue?.provider;
+            this.setLocationOptionsForProvider(this.userProviderState);
+        }
+    }
+    conferenceProvidersChanged(newValue) {
+        if (newValue?.['zoom'] && !this.locationOptions.some(option => option.value === 'zoom')) {
+            this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });
+        }
+    }
     connectedCallback() {
         utils.debug('nylas-event-location', 'connectedCallback');
     }
@@ -5863,15 +5883,8 @@ const NylasEventLocation = class {
             this.selectedLocationOption = this.setDefaultLocationOption(this.eventConferencing || null, this.eventLocation ?? '');
         }
         this.userProviderState = this.userProvider ?? this.currentUser?.provider ?? '';
-        switch (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;
-        }
-        if (this.conferenceProviders?.['zoom']) {
+        this.setLocationOptionsForProvider(this.userProviderState);
+        if (this.conferenceProviders?.['zoom'] && !this.locationOptions.some(option => option.value === 'zoom')) {
             this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });
         }
     }
@@ -5938,6 +5951,20 @@ const NylasEventLocation = class {
                 break;
         }
     }
+    setLocationOptionsForProvider(provider) {
+        switch (provider) {
+            case 'google':
+                if (!this.locationOptions.some(option => option.value === 'google')) {
+                    this.locationOptions.push({ value: 'google', label: labels['google'], labelHTML: this.getLabelHTML('google') });
+                }
+                break;
+            case 'microsoft':
+                if (!this.locationOptions.some(option => option.value === 'microsoft')) {
+                    this.locationOptions.push({ value: 'microsoft', label: labels['microsoft'], labelHTML: this.getLabelHTML('microsoft') });
+                }
+                break;
+        }
+    }
     setDefaultLocationOption(eventConferencing, eventLocation) {
         if (eventConferencing != null && eventConferencing?.provider != null && eventConferencing?.autocreate != null) {
             return constants.CONFERENCE_PROVIDER_MAP[eventConferencing?.provider];
@@ -5988,13 +6015,15 @@ const NylasEventLocation = class {
     }
     render() {
         const defaultOption = typeof this.selectedLocationOption !== 'undefined' ? this.locationOptions.find(i => i.value == this.selectedLocationOption) : null;
-        return (index$1.h(index$1.Host, { key: '6869d3c2f6316dc482becc022bc973783332658f' }, index$1.h("div", { key: 'e17b95b15e181f73efd5c666ff0074bcd5467b65', class: "nylas-event-location", part: "nel" }, index$1.h("label", { key: '9370ab01f5f730099dd5061ccf39ca3b53132244', htmlFor: "location" }, "Event meeting or location", index$1.h("span", { key: 'acd558f22ad18afc63b93456450a5aa946916fd4', class: "label-icon" }, index$1.h("tooltip-component", { key: 'bd2ea171a9eef9e9a377a0be2dc4a16b91bb1359' }, index$1.h("info-icon", { key: '745289e658441e9aadb245c94da890cdb3119179', slot: "tooltip-icon" }), index$1.h("span", { key: 'ffa4a9597a7d63e33b639dafd736a654a97589c9', slot: "tooltip-content" }, "Select a conferencing option or add a custom location.")))), index$1.h("div", { key: '59f930e30b758b740128b42a855608a02ee1a739', class: "location-input" }, defaultOption && defaultOption?.label && (index$1.h("select-dropdown", { withSearch: false, name: "location", options: this.locationOptions, defaultSelectedOption: defaultOption, exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, index$1.h("span", { slot: "select-icon" }, this.getIcon(this.selectedLocationOption)))), this.selectedLocationOption === 'custom' && (index$1.h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (index$1.h(index$1.Host, { key: 'c91ef22df2a83a3c2ac66ca9011ad8633a085b9e' }, index$1.h("div", { key: '9e6823ce704cf4870f99936a39371b255b165afb', class: "nylas-event-location", part: "nel" }, index$1.h("label", { key: '2d1a71a258d0576460acd68a93cbace4a5c9254c', htmlFor: "location" }, "Event meeting or location", index$1.h("span", { key: '9dd7df66eec4e35a8659c88d4f26be99093e815a', class: "label-icon" }, index$1.h("tooltip-component", { key: '9299313bad5724106fa7108d0874e760945bcb30' }, index$1.h("info-icon", { key: '2490fbc28caa2547d8a3cecc747dc94254c59df3', slot: "tooltip-icon" }), index$1.h("span", { key: 'd6c73fef100e4f962507d58b4ed24a1bd19599c2', slot: "tooltip-content" }, "Select a conferencing option or add a custom location.")))), index$1.h("div", { key: '726f78440a3e65e379368b0a849bee94b2839dfd', class: "location-input" }, defaultOption && defaultOption?.label && (index$1.h("select-dropdown", { withSearch: false, name: "location", options: this.locationOptions, defaultSelectedOption: defaultOption, exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, index$1.h("span", { slot: "select-icon" }, this.getIcon(this.selectedLocationOption)))), this.selectedLocationOption === 'custom' && (index$1.h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get formAssociated() { return true; }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
-        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
+        "currentUser": ["currentUserChangedHandler"],
+        "conferenceProviders": ["conferenceProvidersChanged"]
     }; }
 };
 __decorate$d([
@@ -7254,12 +7283,13 @@ const NylasPageStyling = class {
         this.isOpen = !this.isOpen;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '1601b88e8e7e2c500cb105f237949faa4e9d8dbd' }, index$1.h("div", { key: '2a3072bc409f07961da51439a0f45f930d0725de', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (index$1.h("div", { class: "header", part: "nps__header" }, index$1.h("div", null, index$1.h("h3", null, "Page styling and customization")), index$1.h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, index$1.h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, index$1.h("chevron-icon", { width: "24", height: "24" }))))) : null, index$1.h("div", { key: '404727336fdf8d0de2d8e769df1dcc21ae69f34b', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, index$1.h("div", { key: '2e7da0539b197347719a1202e04c1f7b238cdc9d', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, index$1.h("div", { key: '55ba3e932216f073238b8385071defa9139ca0f9', class: "nylas-page-styling__row" }, index$1.h("div", { key: '333576450039ea7f76bfb548c5947609bc813837', class: { subsection: true, hide: !this.isOpen } })))))));
+        return (index$1.h(index$1.Host, { key: 'c2ffa8ae940e9594f254903d45abc3f7c01d7d41' }, index$1.h("div", { key: '1813654e2aaa9c66d5a535186f227968b434654c', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (index$1.h("div", { class: "header", part: "nps__header" }, index$1.h("div", null, index$1.h("h3", null, "Page styling and customization")), index$1.h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, index$1.h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, index$1.h("chevron-icon", { width: "24", height: "24" }))))) : null, index$1.h("div", { key: 'cff4891eeb1a958feb2a6b20623b97f908721c60', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, index$1.h("div", { key: '16b2398f10b6d7703d02bbbf5c43e3e229499b2d', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, index$1.h("div", { key: 'fd09434076ea4626ee9d7b2710ec8418325aa117', class: "nylas-page-styling__row" }, index$1.h("div", { key: '16a29cabadc4f1a4ba9f389fe232ea22125cfe36', class: { subsection: true, hide: !this.isOpen } })))))));
     }
     static get formAssociated() { return true; }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
-        "name": ["elementNameChangedHandler"]
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }; }
 };
 __decorate$6([
@@ -7603,8 +7633,9 @@ const NylasParticipantsCustomAvailability = class {
         return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5034211537411e732ffee5f7420884e5908cc4e5' }, index$1.h("div", { key: '6d016a9b8a3dd204521d9f63de90cd848e9c49e7', class: "nylas-participants-custom-availability", part: "npca" }, index$1.h("div", { key: 'fff77ce67f19e5b0bdc7a8b491ff38b1b7d9af55', class: "header", part: "npca__header" }, index$1.h("h3", { key: '656016ac8ee26636fad2e725237b1bb538563864' }, "Participant open hours"), index$1.h("p", { key: '87ab243b9f3402150c6dae36fc702d7f675350c3' }, "If not set, the default open hours will be used to calculate availability for this participant.")), index$1.h("div", { key: 'ba6c30fbb85fc26d6471494716b18f7f815900ec', class: "content", part: "npca__content" }, index$1.h("form", { key: '7cc553b6730ead929fc45efa67b29b56e41f022e', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
+        return (index$1.h(index$1.Host, { key: '64198b8231e1739484f81d02167d7b5f456eda69' }, index$1.h("div", { key: '68eb8279c510ef937e19dec06960867c98a5b02a', class: "nylas-participants-custom-availability", part: "npca" }, index$1.h("div", { key: '9622d8a7fbc124723cb7135a3a3846fad0e4e458', class: "header", part: "npca__header" }, index$1.h("h3", { key: '6424eeeb937ce2225a63d76482ec633efacd9e7a' }, "Participant open hours"), index$1.h("p", { key: 'ac021fef4d4b0de03d5e2ca335563ec4f328156c' }, "If not set, the default open hours will be used to calculate availability for this participant.")), index$1.h("div", { key: 'e9412e214011b575954196e39ea265dcf86801ec', class: "content", part: "npca__content" }, index$1.h("form", { key: 'ab5b4239f2d2b31fcd69d0f2e2d61a8a13003739', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
             const participant = this.selectedParticipants[key];
+            const participantOpenHours = participant.availability?.open_hours || [];
             if (!participant || !participant.name || !participant.availability)
                 return;
             return (index$1.h("div", { class: "participant-container", part: "npca__participant-container", key: `participant-conatiner-${index}` }, index$1.h("div", { class: "participant-title", part: "npca__participant-title" }, index$1.h("p", null, participant.name, "'s open hours"), index$1.h("div", { class: "participant-toggle", part: "npca__participant-toggle--container" }, index$1.h("toggle-switch", { exportparts: "ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider", name: key, checked: !!participant?.openHours && participant?.openHours.length > 0 }), index$1.h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`, onClick: () => {
@@ -7612,7 +7643,7 @@ const NylasParticipantsCustomAvailability = class {
                         return;
                     this.selectedParticipants[key].isOpen = !participant.isOpen;
                     this.selectedParticipants = { ...this.selectedParticipants };
-                } }, index$1.h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (index$1.h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participant.openHours, defaultTimezone: participant.timezone, hideHeader: true }))));
+                } }, index$1.h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (index$1.h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participantOpenHours, defaultTimezone: participant.timezone, hideHeader: true }))));
         }))))));
     }
     static get formAssociated() { return true; }