@nylas/web-elements 0.0.0-canary-20241015194719 → 0.0.0-canary-20241017202051

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

@@ -15574,7 +15574,7 @@ var __decorate$z = function(ve, ue, ge, Oe) {
 };
 const InputImageUrl = proxyCustomElement(class extends H$2 {
   constructor() {
-    super(), this.__registerHost(), this.__attachShadow(), this.valueChanged = createEvent(this, "valueChanged", 7), this.internals = this.attachInternals(), this.componentType = "image-url", this.imageUrl = "", this.errorMessage = "", this.name = "input-image-url", this.currentImageUrl = this.imageUrl;
+    super(), this.__registerHost(), this.__attachShadow(), this.nylasFormInputImageUrlInvalid = createEvent(this, "nylasFormInputImageUrlInvalid", 7), this.valueChanged = createEvent(this, "valueChanged", 7), this.internals = this.attachInternals(), this.componentType = "image-url", this.imageUrl = "", this.errorMessage = "", this.name = "input-image-url", this.currentImageUrl = this.imageUrl;
   }
   connectedCallback() {
     debug("nylas-image-input", "connectedCallback");
@@ -15615,11 +15615,11 @@ const InputImageUrl = proxyCustomElement(class extends H$2 {
     this.errorMessage = "", isValidImage(ue).then(() => {
       this.currentImageUrl = ue, this.internals.setValidity({}), this.internals.setFormValue(this.currentImageUrl, this.name), this.valueChanged.emit({ value: this.currentImageUrl, name: this.name });
     }).catch(() => {
-      this.internals.setValidity({ customError: !0 }, "Invalid image URL."), this.errorMessage = "Invalid image URL.";
+      this.errorMessage = "Invalid image URL.", this.nylasFormInputImageUrlInvalid.emit({ value: "Invalid image URL.", name: this.name }), typeof this.internals.setValidity == "function" && this.internals.setValidity({ customError: !0 }, "Invalid image URL.");
     });
   }
   render() {
-    return h$2(Host, { key: "37ae40e1bc1eadb1d66f68b26e66b9b0046752b0" }, h$2("div", { key: "fe6024927698ba0d41e4875d0f190cf610afe7d7", class: "logo-container" }, h$2("div", { key: "b61b97fb4a518e68773304eaa55833104bc246c8", class: "input-container" }, h$2("input-component", { key: "f918ef5a13ec93e71635ca205534894c97243fe4", name: this.name, id: this.name, type: "text", required: !1, exportparts: "ic_input: iiu__logo-input-textfield", defaultValue: this.imageUrl ?? "" }), this.errorMessage && h$2("span", { class: "error-message" }, this.errorMessage)), this.currentImageUrl && !this.errorMessage && h$2("div", { class: "logo" }, h$2("img", { src: this.currentImageUrl, alt: "Logo" }))));
+    return h$2(Host, { key: "27db94b782ae96518852a8486821a7f6544492a2" }, h$2("div", { key: "3923ce12503dd454e716e002b693b8e5f7e7e991", class: "logo-container" }, h$2("div", { key: "004c0dfb0e5ec721e356b4915fbdd75f84a67301", class: "input-container" }, h$2("input-component", { key: "f06812996be4fd6384fffc2c095e62ba7067881d", name: this.name, id: this.name, type: "text", required: !1, exportparts: "ic_input: iiu__logo-input-textfield", defaultValue: this.imageUrl ?? "" }), this.errorMessage && h$2("span", { class: "error-message" }, this.errorMessage)), this.currentImageUrl && !this.errorMessage && h$2("div", { class: "logo" }, h$2("img", { src: this.currentImageUrl, alt: "Logo" }))));
   }
   static get formAssociated() {
     return !0;
@@ -15918,7 +15918,7 @@ const NylasFormCard = proxyCustomElement(class extends H$2 {
     debug("nylas-event-card", "disconnectedCallback"), checkForMissingSlots(["header-title", "header-subtitle", "content"], this.host);
   }
   render() {
-    return h$2(Host, { key: "e79321333887319f48356c64cb2e04539edf1d79" }, h$2("div", { key: "9a33c42c38012c5277ecc0d60523211671866378", class: "nylas-form-card", part: "nfc" }, h$2("div", { key: "905eed6cd8c79bda19fb3c5ab49802ae697a0ab9", class: "nylas-form-card__header", part: "nfc__header" }, h$2("slot", { key: "db749b7eb575845c2b8d8e4a12ea0c3ffea4842a", name: "header-title" }), h$2("slot", { key: "5b9ac54446f1b1b49a9f0f2e2b45e3785acb9686", name: "header-subtitle" })), h$2("div", { key: "6893e68e48f990c6dfc3d3c3052dfba988b21807", class: "nylas-form-card__content" }, h$2("slot", { key: "fac98a2a1a6b162bc3f4aed735b584c4d5e509a3", name: "content" }))));
+    return h$2(Host, { key: "5ccd047d1a8bb515dea8aa7b9d7d39265afc31c9" }, h$2("div", { key: "c40f52eaa4d099d92d65b0df662cd2de1b5f35c7", class: "nylas-form-card", part: "nfc" }, h$2("div", { key: "545dabd81dce9b4f6f5f1d129071e1136f62e609", class: "nylas-form-card__header", part: "nfc__header" }, h$2("slot", { key: "2be9b24f91316235be7132a6466cd16b9dfe813c", name: "header-title" }), h$2("slot", { key: "3414a084465efc50a3856291dff61d8ef3b3c617", name: "header-subtitle" })), h$2("div", { key: "cc07650a55afd7fc5d2429ff3611168977775bc8", class: "nylas-form-card__content" }, h$2("slot", { key: "d50dd8dfbfea1ad84876495e72dd03102e2bc0dc", name: "content" }))));
   }
   static get formAssociated() {
     return !0;
@@ -16025,18 +16025,21 @@ const NylasAdditionalParticipants = proxyCustomElement(class extends H$2 {
   disconnectedCallback() {
     debug("nylas-additional-participants", "disconnectedCallback");
   }
+  get isInternalsAvailable() {
+    return this.internals !== void 0 && typeof this.internals.setFormValue == "function" && typeof this.internals.setValidity == "function";
+  }
   onInputOptionChanged(ue) {
     var vt;
     debug("nylas-additional-participants", "onInputOptionChanged");
-    const ge = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, Oe = ue.detail.name, Ke = (vt = this.participantOptions) == null ? void 0 : vt.find((ln) => ln.email === ue.detail.value);
+    const ge = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, Oe = ue.detail.name, Ke = (vt = this.participantOptions) == null ? void 0 : vt.find((ln) => ln.email === ue.detail.value);
     if (!Ke && this.isRoundRobinConfig) {
-      this.internals.setValidity({ customError: !0 }, "For round robin configuration, participant should be selected from the dropdown."), this.participantErrors[Oe] = "For round robin page, participant should be selected from the dropdown.", this.participants[Oe].is_valid = !1, this.participants = [...this.participants];
+      this.isInternalsAvailable && this.internals.setValidity({ customError: !0 }, "For round robin configuration, participant should be selected from the dropdown."), this.participantErrors[Oe] = "For round robin page, participant should be selected from the dropdown.", this.participants[Oe].is_valid = !1, this.participants = [...this.participants];
       return;
     } else if (!Ke && !ge.test(ue.detail.value)) {
-      this.internals.setValidity({ customError: !0 }, "Please enter a valid email address"), this.participantErrors[Oe] = "Please enter a valid email address", this.participants[Oe].is_valid = !1, this.participants = [...this.participants];
+      this.isInternalsAvailable && this.internals.setValidity({ customError: !0 }, "Please enter a valid email address"), this.participantErrors[Oe] = "Please enter a valid email address", this.participants[Oe].is_valid = !1, this.participants = [...this.participants];
       return;
     } else
-      this.participantErrors[Oe] = "", this.participants[Oe].is_valid = !0, this.internals.setValidity({});
+      this.participantErrors[Oe] = "", this.participants[Oe].is_valid = !0, this.isInternalsAvailable && this.internals.setValidity({});
     this.participants[Oe].email = ue.detail.value, this.participants[Oe].availability = Ke ? { calendar_ids: ["primary"] } : void 0, this.participants[Oe].booking = Ke && this.isRoundRobinConfig ? { calendar_id: "primary" } : void 0, this.participants[Oe].name = (Ke == null ? void 0 : Ke.name) || ue.detail.value, this.participants = [...this.participants], this.updateFormValue();
   }
   updateOrganizerAsParticipant() {
@@ -16066,28 +16069,23 @@ const NylasAdditionalParticipants = proxyCustomElement(class extends H$2 {
   removeParticipant(ue) {
     debug("nylas-additional-participants", "removeParticipant"), this.participants = this.participants.filter((ge, Oe) => Oe !== ue), this.updateFormValue();
   }
-  validate(ue, ge) {
-    debug("nylas-additional-participants", "validate");
-    const Ke = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(ue).toLowerCase());
-    this.participants[ge].is_valid = Ke, this.updateFormValue();
-  }
   updateFormValue() {
     debug("nylas-additional-participants", "updateFormValue");
     const ue = this.isRoundRobinConfig ? this.includeOrganizerAsParticipant ? this.participants : this.participants.filter((ge) => !ge.is_organizer) : this.participants;
-    ue.length === 0 ? (this.internals.setValidity({ customError: !0 }, "Please add at least one participant"), this.error = "Please add at least one participant") : (this.internals.setValidity({}), this.error = "", this.internals.setFormValue(JSON.stringify(ue), this.name), this.valueChanged.emit({ value: JSON.stringify(ue), name: this.name }));
+    ue.length === 0 ? (this.isInternalsAvailable && this.internals.setValidity({ customError: !0 }, "Please add at least one participant"), this.error = "Please add at least one participant") : (this.isInternalsAvailable && this.internals.setValidity({}), this.error = "", this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(ue), this.name), this.valueChanged.emit({ value: JSON.stringify(ue), name: this.name }));
   }
   getArrayDifference(ue, ge) {
     return ue.filter((Ke) => !ge.some((vt) => Ke.email === vt.email)).map((Ke) => ({ value: Ke.email, label: Ke.email }));
   }
   render() {
-    return h$2(Host, { key: "a090033dc7d7915ca65100fd1803d2430052b18a", part: "nap" }, h$2("nylas-form-card", { key: "19203e4c99690200b679943672f89e9d20bc62b5" }, h$2("h3", { key: "33fbde2341b42cb0529b95a06f80d6dea08ffc52", slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Participants"), h$2("p", { key: "a8c73ed714ab74309f1a417215b9e56da99a2731", slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add people in your team or organization to join the event."), h$2("div", { key: "bce67b77333c2db513463acaa952b51d933d43d9", slot: "content", class: "nylas-additional-participants__content" }, h$2("div", { key: "35e0bf36996f3daec1d41e1d8c74c636fb72307f" }, this.participants.map((ue, ge) => h$2("div", { class: "nylas-additional-participants__input_group", part: "nap__input_group" }, !ue.is_organizer && h$2("label", null, `Participant ${ge}`), h$2("div", { part: "nap__input_wrapper", class: {
+    return h$2(Host, { key: "16a28d7d8ee91b685a22472d8a90721a5074d798", part: "nap" }, h$2("nylas-form-card", { key: "9fde59eadfcdf05c3b4add30a5c35f9b21d00c30" }, h$2("h3", { key: "82e3c3ad537ef4c60d19695f11e481bac2ed31ae", slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Participants"), h$2("p", { key: "4df3d661d2c6801ba8e88d82853ae562ed3be8e8", slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add people in your team or organization to join the event."), h$2("div", { key: "3ccb34354c025b52760433683812acf37b480e77", slot: "content", class: "nylas-additional-participants__content" }, h$2("div", { key: "007cf8396921637cf230cc26d73de147169cd250" }, this.participants.map((ue, ge) => h$2("div", { class: "nylas-additional-participants__input_group", part: "nap__input_group" }, !ue.is_organizer && h$2("label", null, `Participant ${ge}`), h$2("div", { part: "nap__input_wrapper", class: {
       "nylas-additional-participants__input_wrapper": !0,
       "nylas-additional-participants__input_wrapper_organizer": (ue == null ? void 0 : ue.is_organizer) === !0,
       "nylas-additional-participants__input_wrapper_invalid": ue.is_valid === !1,
       error: ue.is_valid === !1
     } }, h$2("div", { class: { "nylas-additional-participants__input": !0, organizer: (ue == null ? void 0 : ue.is_organizer) === !0 }, part: "nap__input" }, ue.is_organizer ? h$2("input-component", { class: "label-input", name: `${ge}`, key: ge, label: "Organizer", required: !1, readOnly: ue.is_organizer, defaultValue: ue.email }, this.isRoundRobinConfig && h$2("div", { class: "required-input", slot: "additional-input" }, h$2("input", { type: "checkbox", name: "organizer_participant", id: "organizer_participant", onClick: () => {
       this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant, this.updateFormValue();
-    }, checked: this.includeOrganizerAsParticipant }), h$2("label", { htmlFor: "organizer_participant", "aria-label": "Include as participant" }, "Participant", h$2("tooltip-component", { id: "organizer_participant_tooltip" }, h$2("info-icon", { slot: "tooltip-icon" }), h$2("span", { slot: "tooltip-content" }, h$2("strong", null, "Include Organizer:"), " The organizer (you) will be included in the round-robin rotation. ", h$2("br", null), h$2("strong", null, "Exclude Organizer:"), " The organizer (you) will not be included in the round-robin rotation."))))) : h$2("input-dropdown", { id: `${ge}`, name: `${ge}`, filterable: !0, inputValue: ue.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) }), !ue.is_organizer && h$2("button", { onClick: () => this.removeParticipant(ge), part: "nap__remove-participant" }, h$2("close-icon", null)))), !ue.is_valid && h$2("p", { class: "nylas-additional-participants__error", part: "nap__error" }, this.participantErrors[ge]))), h$2("p", { key: "51f51ef0614cd93592fae8a32f501d0249b12c5a", class: "nylas-additional-participants__error", part: "nap__error" }, this.error)), h$2("button", { key: "93605c6ce8fb6b77451ea0f8c06fb23134727c3f", class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h$2("add-circle-icon", { key: "8e6ac25f43f06ad3ee24047a1a7469b13c5a56c7" }), " ", h$2("span", { key: "511068fb28c498edba86706bef49dcad6633d249" }, "Add ", this.participants.length > 1 ? "another" : "a", " participant")))));
+    }, checked: this.includeOrganizerAsParticipant }), h$2("label", { htmlFor: "organizer_participant", "aria-label": "Include as participant" }, "Participant", h$2("tooltip-component", { id: "organizer_participant_tooltip" }, h$2("info-icon", { slot: "tooltip-icon" }), h$2("span", { slot: "tooltip-content" }, h$2("strong", null, "Include Organizer:"), " The organizer (you) will be included in the round-robin rotation. ", h$2("br", null), h$2("strong", null, "Exclude Organizer:"), " The organizer (you) will not be included in the round-robin rotation."))))) : h$2("input-dropdown", { id: `${ge}`, name: `${ge}`, filterable: !0, inputValue: ue.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) }), !ue.is_organizer && h$2("button", { onClick: () => this.removeParticipant(ge), part: "nap__remove-participant" }, h$2("close-icon", null)))), !ue.is_valid && h$2("p", { class: "nylas-additional-participants__error", part: "nap__error" }, this.participantErrors[ge]))), h$2("p", { key: "f1dd954c137093fa9e474f3886e4b5320aeb5e2e", class: "nylas-additional-participants__error", part: "nap__error" }, this.error)), h$2("button", { key: "859585010fc9fce314b856f5e7e07ac8b8c47b88", class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h$2("add-circle-icon", { key: "aec7eb5de30e66bca29b73962f356109471c2e9e" }), " ", h$2("span", { key: "f07ecfaa4db46f7954d734314c46f2d773158730" }, "Add ", this.participants.length > 1 ? "another" : "a", " participant")))));
   }
   static get formAssociated() {
     return !0;
@@ -20497,7 +20495,7 @@ var __decorate$o = function(ve, ue, ge, Oe) {
 };
 const NylasConfirmationEmail = 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.confirmationEmailTemplate = {}, this.isOpen = !1, this.participants = [], this.name = "confirmation-email-template", this.confirmationEmail = void 0, this.isConfirmationEmailOpen = this.isOpen, this.participantsState = this.participants;
+    super(), this.__registerHost(), this.__attachShadow(), this.valueChanged = createEvent(this, "valueChanged", 7), this.internals = this.attachInternals(), this.selectedConfiguration = void 0, this.confirmationEmailTemplate = {}, this.participants = [], this.name = "confirmation-email-template", this.isOpen = !1, this.confirmationEmail = void 0, this.isConfirmationEmailOpen = this.isOpen, this.participantsState = this.participants;
   }
   connectedCallback() {
     debug("nylas-confirmation-email", "connectedCallback");
@@ -20526,7 +20524,11 @@ const NylasConfirmationEmail = proxyCustomElement(class extends H$2 {
   valueChangedHandler(ue) {
     debug("nylas-confirmation-email", "valueChangedHandler", ue.detail);
     const { value: ge, name: Oe } = ue.detail;
-    Oe === "confirmation-email-logo" && (this.confirmationEmail = { ...this.confirmationEmail, logo: ge }, this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name), this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name }));
+    Oe === "confirmation-email-logo" && (this.confirmationEmail = { ...this.confirmationEmail, logo: ge }, this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name }), typeof this.internals.setValidity == "function" && typeof this.internals.setFormValue == "function" && (this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name), this.internals.setValidity({})));
+  }
+  async nylasFormInputImageUrlInvalidHandler(ue) {
+    const { value: ge, name: Oe } = ue.detail;
+    Oe === "confirmation-email-logo" && typeof this.internals.setValidity == "function" && this.internals.setValidity({ customError: !0 }, ge || "Invalid image URL.");
   }
   updateConfirmationFormValue() {
     debug("nylas-confirmation-email", "updateConfirmationFormValue"), this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name), this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });
@@ -20542,7 +20544,7 @@ const NylasConfirmationEmail = proxyCustomElement(class extends H$2 {
   render() {
     var Oe, Ke, vt, ln, ei, ti, ni;
     const ue = this.participantsState.find((ri) => ri.is_organizer), ge = (ue == null ? void 0 : ue.name) || (ue == null ? void 0 : ue.email);
-    return h$2(Host, { key: "0cd4c1886c65ead0e525ea96fe26a1316c61db7f" }, h$2("div", { key: "1901775f8a1364fe16485eeaf27d44862e74a642", class: "nylas-confirmation-email", part: "nce" }, h$2("div", { key: "241cf1a885d4d97d53c158e5691e350aa14b549f", class: "header", part: "nce__header" }, h$2("div", { key: "e37c36a4d8f1f82669f3a397969202d3a2612b0e" }, h$2("h3", { key: "ae34b848907720867cb014000e5b7367bcabedb3" }, ((Ke = (Oe = this.confirmationEmail) == null ? void 0 : Oe.booking_confirmed) == null ? void 0 : Ke.title) ?? `Booking confirmed with ${ge ? ` ${ge}` : ""}`), h$2("p", { key: "97d7c78a88b20be8c5b0a27485f917628f1c6edc" }, "Booking confirmation email")), this.isConfirmationEmailOpen ? h$2("div", { class: "confirmation-email-toggle", part: "nce__confirmation-email-toggle--container" }, h$2("span", { class: `chevron ${this.isConfirmationEmailOpen ? "open" : "closed"} `, onClick: () => this.toggleConfirmationEmail() }, h$2("chevron-icon", { width: "24", height: "24" }))) : h$2("button-component", { variant: "basic", clickHandler: (ri) => {
+    return h$2(Host, { key: "bc4803b94f914d083bd33cf4cecd0cac70b0658c" }, h$2("div", { key: "6445d38b903bffd19b4db004e850f6488ed4c27f", class: "nylas-confirmation-email", part: "nce" }, h$2("div", { key: "7ce1ccd72ef83717aec42fe0b533902e3a254796", class: "header", part: "nce__header" }, h$2("div", { key: "cbceb816c30deebc4e053a7abd1da1c82c171ebe" }, h$2("h3", { key: "36f5b00d5a98d325341ff06b2bb3ba3cf951e94f" }, ((Ke = (Oe = this.confirmationEmail) == null ? void 0 : Oe.booking_confirmed) == null ? void 0 : Ke.title) ?? `Booking confirmed with ${ge ? ` ${ge}` : ""}`), h$2("p", { key: "6f72022d71e5f4e3c03d0f6d07d7f0f5bc0f9686" }, "Booking confirmation email")), this.isConfirmationEmailOpen ? h$2("div", { class: "confirmation-email-toggle", part: "nce__confirmation-email-toggle--container" }, h$2("span", { class: `chevron ${this.isConfirmationEmailOpen ? "open" : "closed"} `, onClick: () => this.toggleConfirmationEmail() }, h$2("chevron-icon", { width: "24", height: "24" }))) : h$2("button-component", { variant: "basic", clickHandler: (ri) => {
       ri.preventDefault(), this.toggleConfirmationEmail();
     } }, h$2("edit-icon", { width: "16", height: "16" }), "Edit")), this.isConfirmationEmailOpen ? h$2("div", { class: "nylas-confirmation-email__body", part: "nce__body" }, h$2("div", { class: "nylas-confirmation-email__section" }, h$2("div", { class: "nylas-confirmation-email__row" }, h$2("label", null, "Send confirmation email", h$2("span", { class: "label-icon" }, h$2("tooltip-component", null, h$2("info-icon", { slot: "tooltip-icon" }), h$2("span", { slot: "tooltip-content" }, "You and your guests will receive a confirmation email immediately upon booking.")))), h$2("span", { class: "selected-value" }, "Immediately upon booking")), h$2("div", { class: "nylas-confirmation-email__row" }, h$2("div", { class: "subsection" }, h$2("div", { class: "input-container" }, h$2("label", null, "Company logo URL", h$2("span", { class: "label-icon" }, h$2("tooltip-component", null, h$2("info-icon", { slot: "tooltip-icon" }), h$2("span", { slot: "tooltip-content" }, "This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x 100px.")))), this.confirmationEmail && h$2("input-image-url", { name: "confirmation-email-logo", exportparts: "iiu__logo-input-textfield: nce__input-image-url", imageUrl: ((vt = this.confirmationEmail) == null ? void 0 : vt.logo) ?? "" })))), h$2("div", { class: "nylas-confirmation-email__row full-width-col" }, h$2("div", { class: "subsection" }, h$2("h3", null, "Email message"), h$2("div", { class: "input-container" }, h$2("label", { htmlFor: "title" }, "Custom email title", h$2("span", { class: "label-icon" }, h$2("tooltip-component", null, h$2("info-icon", { slot: "tooltip-icon" }), h$2("span", { slot: "tooltip-content" }, "An email title is a headline within the body of the email. This doesn't change the subject line.")))), h$2("input-component", { name: "confirmation-email-title", maxLength: 60, placeholder: `Booking confirmed ${ge ? `with ${ge}` : ""}`, defaultValue: ((ei = (ln = this.confirmationEmail) == null ? void 0 : ln.booking_confirmed) == null ? void 0 : ei.title) ?? "" })), h$2("div", { class: "input-container" }, h$2("textarea-component", { label: "Additional info", name: "confirmation-email-body", id: "confirmation-email-body", placeholder: "Default body", tooltip: "Scheduler adds the content of the box to the email body.", maxLength: 500, defaultValue: ((ni = (ti = this.confirmationEmail) == null ? void 0 : ti.booking_confirmed) == null ? void 0 : ni.body) ?? "" })))))) : h$2("div", { class: "nylas-confirmation-email__summary", part: "nce__summary" }, h$2("p", null, h$2("span", { class: "summary-icon" }, h$2("person-clipboard-icon", null)), "All host & guests"), h$2("p", null, h$2("span", { class: "summary-icon" }, h$2("clock-icon", null)), "Immediately on booking"))));
   }
@@ -20564,13 +20566,13 @@ const NylasConfirmationEmail = proxyCustomElement(class extends H$2 {
 }, [65, "nylas-confirmation-email", {
   selectedConfiguration: [16],
   confirmationEmailTemplate: [16],
-  isOpen: [4, "is-open"],
   participants: [16],
   name: [1],
+  isOpen: [4, "is-open"],
   confirmationEmail: [32],
   isConfirmationEmailOpen: [32],
   participantsState: [32]
-}, [[0, "nylasFormInputChanged", "nylasFormInputChangeHandler"], [0, "valueChanged", "valueChangedHandler"]], {
+}, [[0, "nylasFormInputChanged", "nylasFormInputChangeHandler"], [0, "valueChanged", "valueChangedHandler"], [0, "nylasFormInputImageUrlInvalid", "nylasFormInputImageUrlInvalidHandler"]], {
   name: ["elementNameChangedHandler"],
   selectedConfiguration: ["selectedConfigurationChangedHandler"]
 }]);
@@ -21320,10 +21322,10 @@ const NylasEventDuration = proxyCustomElement(class extends H$2 {
     debug("nylas-event-duration", "connectedCallback");
   }
   componentWillLoad() {
-    debug("nylas-event-duration", "componentWillLoad"), this.host.setAttribute("name", this.name), this.setDurationMintueOptions();
+    debug("nylas-event-duration", "componentWillLoad"), this.host.setAttribute("name", this.name);
   }
   componentDidLoad() {
-    debug("nylas-event-duration", "componentDidLoad"), this.selectedConfiguration && this.selectedConfigurationChangedHandler(this.selectedConfiguration), this.duration = this.duration ? this.duration : this.eventDurationMinutes ? this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes : 30, this.durationMinutes = this.durationMinutes ? this.durationMinutes : this.duration ? this.duration : 30, this.durationIncrement = this.durationIncrement ? this.durationIncrement : this.duration >= 60 ? 60 : 1, this.internals.setFormValue(this.durationMinutes.toString(), "duration");
+    debug("nylas-event-duration", "componentDidLoad"), this.selectedConfiguration && this.selectedConfigurationChangedHandler(this.selectedConfiguration), this.duration = this.duration ? this.duration : this.eventDurationMinutes ? this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes : 30, this.durationMinutes = this.durationMinutes ? this.durationMinutes : this.duration ? this.duration : 30, this.durationIncrement = this.durationIncrement ? this.durationIncrement : this.duration >= 60 ? 60 : 1, this.setDurationMintueOptions(), typeof this.internals.setFormValue == "function" && this.internals.setFormValue(this.durationMinutes.toString(), "duration");
   }
   disconnectedCallback() {
     debug("nylas-event-duration", "disconnectedCallback");
@@ -21354,7 +21356,7 @@ const NylasEventDuration = proxyCustomElement(class extends H$2 {
       { value: 1, label: "minute" },
       { value: 60, label: "hour" }
     ];
-    return h$2(Host, { key: "e63530398b7b2231436947da8c9e63c3c7bd696a" }, h$2("div", { key: "9ccca25a4322edaedafa53a2bd8ae2baf48b4f1e", class: "nylas-event-duration", part: "ned" }, h$2("label", { key: "cd5562d2516c1f37eeb0b3e074493c671628ef4b", htmlFor: "duration" }, "Event duration", h$2("span", { key: "ef36340fb220f380a9913ad5025e6600ce6e8f17", class: "required" }, "*")), h$2("div", { key: "eddeda40d89ac770f20226605f3fedce00afe060", class: "nylas-event-duration__wrapper" }, h$2("input-dropdown", { key: "b087fff0f15cfcaf5c89c0566941aa45c8e89d54", name: "event-duration", options: this.durationMinutesOptions, inputValue: this.duration.toString(), exportparts: "id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content", defaultInputOption: this.durationMinutesOptions.find((ge) => ge.value == this.duration) }), this.durationIncrement && h$2("select-dropdown", { name: "event-duration", options: ue, pluralizedLabel: this.duration > 1 ? "s" : "", exportparts: "sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content", defaultSelectedOption: ue.find((ge) => ge.value == this.durationIncrement), withSearch: !1 }))));
+    return h$2(Host, { key: "f6b60528b9c3f2978ac12beae9bf049a9b90fec5" }, h$2("div", { key: "f7c778d981fa1d33ceed820d500e6820a4f1223c", class: "nylas-event-duration", part: "ned" }, h$2("label", { key: "f461dcfeda616f50820d6cdacb5dfded22ec7aff", htmlFor: "duration" }, "Event duration", h$2("span", { key: "086d2458ad14f00f718fb9106c45d63576c9f734", class: "required" }, "*")), h$2("div", { key: "cf27800dec77fbe74c9428de92fa042a419ddb25", class: "nylas-event-duration__wrapper" }, h$2("input-dropdown", { key: "06ed64927a69ca96bb9f9cc5cfede6d55c310598", name: "event-duration", options: this.durationMinutesOptions, inputValue: this.duration.toString(), exportparts: "id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content", defaultInputOption: this.durationMinutesOptions.find((ge) => ge.value == this.duration) }), this.durationIncrement && h$2("select-dropdown", { name: "event-duration", options: ue, pluralizedLabel: this.duration > 1 ? "s" : "", exportparts: "sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content", defaultSelectedOption: ue.find((ge) => ge.value == this.durationIncrement), withSearch: !1 }))));
   }
   static get formAssociated() {
     return !0;
@@ -21449,7 +21451,7 @@ const NylasEventInfo = proxyCustomElement(class extends H$2 {
     debug("nylas-event-info", "disconnectedCallback");
   }
   render() {
-    return h$2(Host, { key: "fb4a8dd875696bc6a4e951f2649a2ab650558489" }, h$2("nylas-form-card", { key: "193b25acb1374842946ff938755fe8fed7a6d4b9", exportparts: "nfc__header: nei__header" }, h$2("h1", { key: "c405c5de0b2eafa15136d10f10de13a158595298", slot: "header-title", class: "nylas-event-info__title", part: "nei__title" }, "Event information"), h$2("div", { key: "a49993db49876dfdebd6dbe412d759ce1d38028e", slot: "content", class: "nylas-event-info__content" }, h$2("slot", { key: "dc4595988a0b6824f328896c1ea507b96e61e4a8", name: "inputs" }))));
+    return h$2(Host, { key: "be80a4e687ce223a8e52bbabc2e8acadcb194b11" }, h$2("nylas-form-card", { key: "c96b77795ec2516889acf0f78c5eb723b26dd89c", exportparts: "nfc__header: nei__header" }, h$2("h1", { key: "890113187adcd6be1ab1d1beb489fe3a80124617", slot: "header-title", class: "nylas-event-info__title", part: "nei__title" }, "Event information"), h$2("div", { key: "44eaaae3833654530706dc93077b43a7597acc2c", slot: "content", class: "nylas-event-info__content" }, h$2("slot", { key: "7af737a67cb007c0ede7db5aa075828311d98da3", name: "inputs" }))));
   }
   static get formAssociated() {
     return !0;
@@ -21515,7 +21517,7 @@ const NylasEventLimits = proxyCustomElement(class extends H$2 {
     debug("nylas-event-limits", "disconnectedCallback");
   }
   render() {
-    return h$2(Host, { key: "8715c9aeba26e6f4c151b0ab58333cc13d3500d3" }, h$2("nylas-form-card", { key: "2e2bf90762d35ac9fc4a995808b9aa3e4481d6c0", exportparts: "nfc__header: nel__header" }, h$2("h1", { key: "b3689912282e3215d862ca06c75fae95b67e501f", slot: "header-title", class: "nylas-event-limits__title" }, "Event limits"), h$2("div", { key: "bd5513f8c0cc573f14afeadfafe591b64b904920", slot: "content", class: "nylas-event-limits__content" }, h$2("slot", { key: "86ebfd856f0c93d3ad98d800d4ce9e1a8daf2516", name: "inputs" }))));
+    return h$2(Host, { key: "6a28113e3b403869e77cc3a2c9c3a1bea217dc52" }, h$2("nylas-form-card", { key: "cf9004d044222d796ae59df58737ad9719a20576", exportparts: "nfc__header: nel__header" }, h$2("h1", { key: "ffeeb7a5741c9f07fb4f9bd84016b1707e2b55b7", slot: "header-title", class: "nylas-event-limits__title" }, "Event limits"), h$2("div", { key: "7b51592d95736f860ec805950275a18e9d914c32", slot: "content", class: "nylas-event-limits__content" }, h$2("slot", { key: "53e9098d736eedf5b22e1b8ae712ec22c8ca865e", name: "inputs" }))));
   }
   static get formAssociated() {
     return !0;
@@ -23373,11 +23375,26 @@ var __decorate$5 = function(ve, ue, ge, Oe) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function")
     return Reflect.metadata(ve, ue);
 };
+const reminderTimeOptions = [
+  { value: 60 * 24, label: "day" },
+  { value: 60, label: "hour" },
+  { value: 1, label: "minute" }
+];
 function getInitialTimeValue(ve) {
-  return ve ? ve >= 60 * 24 ? ve / (60 * 24) : ve >= 90 || ve === 60 ? ve / 60 : ve : 30;
+  if (!ve)
+    return 30;
+  for (const ue of reminderTimeOptions)
+    if (ve % ue.value === 0)
+      return ve / ue.value;
+  return ve;
 }
 function getInitialTimeIncrement(ve) {
-  return ve ? ve >= 60 * 24 ? 60 * 24 : ve >= 90 || ve === 60 ? 60 : 1 : 30;
+  if (!ve)
+    return 1;
+  for (const ue of reminderTimeOptions)
+    if (ve % ue.value === 0)
+      return ue.value;
+  return 1;
 }
 const NylasReminderTime = proxyCustomElement(class extends H$2 {
   constructor() {
@@ -23386,9 +23403,6 @@ const NylasReminderTime = proxyCustomElement(class extends H$2 {
   elementNameChangedHandler(ue) {
     debug("nylas-reminder-time", "elementNameChangedHandler", ue), this.host.setAttribute("name", ue);
   }
-  eventReminderTimeMinutesChangedHandler(ue, ge) {
-    debug("nylas-reminder-time", "eventReminderTimeMinutesChangedHandler", ue), ue !== ge && (this.reminderTime = getInitialTimeValue(ue), this.reminderTimeincrement = getInitialTimeIncrement(ue), this.reminderTimeMinutes = ue);
-  }
   reminderTimeMinutesChangedHandler(ue, ge) {
     debug("nylas-reminder-time", "reminderTimeMinutesChangedHandler", ue), ue !== ge && this.valueChanged.emit({ value: ue.toString(), name: this.name });
   }
@@ -23396,34 +23410,32 @@ const NylasReminderTime = proxyCustomElement(class extends H$2 {
     debug("nylas-reminder-time", "connectedCallback");
   }
   componentWillLoad() {
-    debug("nylas-reminder-time", "componentWillLoad"), this.host.setAttribute("name", this.name), this.setReminderTimeMinuteOptions();
+    debug("nylas-reminder-time", "componentWillLoad"), this.host.setAttribute("name", this.name);
   }
   componentDidLoad() {
-    debug("nylas-reminder-time", "componentDidLoad");
+    debug("nylas-reminder-time", "componentDidLoad"), this.setReminderTimeMinuteOptions();
   }
   disconnectedCallback() {
     debug("nylas-reminder-time", "disconnectedCallback");
   }
+  get isInternalsAvailable() {
+    return this.internals !== void 0 && typeof this.internals.setFormValue == "function";
+  }
   setReminderTimeMinuteOptions() {
     return this.reminderTimeincrement === 1 ? this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS : this.reminderTimeincrement === 60 ? this.reminderTimeMinutesOptions = REMINDER_HOUR_OPTIONS : this.reminderTimeMinutesOptions = REMINDER_DAY_OPTIONS, this.reminderTimeMinutesOptions;
   }
   nylasFormDropdownChangedHandler(ue) {
     debug("nylas-calendar-picker", "nylasFormDropdownChangedHandler", ue.detail);
     const { value: ge } = ue.detail;
-    this.reminderTimeincrement = parseInt(ge), this.reminderTimeincrement === 1 ? this.reminderTime = 60 : this.reminderTime = 1, this.setReminderTimeMinuteOptions(), this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement, this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
+    this.reminderTimeincrement = parseInt(ge), this.reminderTimeincrement === 1 ? this.reminderTime = 60 : this.reminderTime = 1, this.setReminderTimeMinuteOptions(), this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement, this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
   }
   inputOptionChangedHandler(ue) {
     debug("nylas-calendar-picker", "inputOptionChangedHandler", ue.detail);
     const { value: ge } = ue.detail;
-    this.reminderTime = ge, this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement, this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
+    this.reminderTime = ge, this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement, this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
   }
   render() {
-    const ue = [
-      { value: 1, label: "minute" },
-      { value: 60, label: "hour" },
-      { value: 1440, label: "day" }
-    ];
-    return h$2(Host, { key: "d5f118391bdd7e4779f6eca15335285047fdb350" }, h$2("div", { key: "2dd8d3ba52d4f95480c9cf1fdaf5d0f1f7c1e523", class: "nylas-reminder-time", part: "nrt" }, h$2("div", { key: "3799c4b266f4078e22ad78b86225ef9abdc5fa49", class: "nylas-reminder-time__wrapper" }, h$2("input-dropdown", { key: "004b6336c041660e1424ac44f16e82c8a5a2ca53", name: "reminder-time", options: this.reminderTimeMinutesOptions, inputValue: this.reminderTime.toString(), exportparts: "id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content", defaultInputOption: this.reminderTimeMinutesOptions.find((ge) => ge.value == this.reminderTime) ?? ue[0] }), h$2("select-dropdown", { key: "6a42c7f4633d89dd9a94d3c2f119e151613667ec", name: "reminder-time-unit", options: ue, pluralizedLabel: this.reminderTime > 1 ? "s" : "", exportparts: "sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content", defaultSelectedOption: ue.find((ge) => ge.value == this.reminderTimeincrement) ?? ue[0], withSearch: !1 }))));
+    return h$2(Host, { key: "b089eb10d76d001112d867a61889a685b8908355" }, h$2("div", { key: "13b8479fb822135c00ff8f97974c8269731b2a84", class: "nylas-reminder-time", part: "nrt" }, h$2("div", { key: "728e90c61077b1037aa285329f11a09a296b33b4", class: "nylas-reminder-time__wrapper" }, h$2("input-dropdown", { key: "40a22b75424d4b3b552a2dc1b60e79a8cb595032", name: "reminder-time", options: this.reminderTimeMinutesOptions, inputValue: this.reminderTime.toString(), exportparts: "id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content", defaultInputOption: this.reminderTimeMinutesOptions.find((ue) => ue.value == this.reminderTime) ?? reminderTimeOptions[0] }), h$2("select-dropdown", { key: "6128bb953b883be5341ba005438ab353b0016c48", name: "reminder-time-unit", options: [...reminderTimeOptions].sort((ue, ge) => ue.value - ge.value), pluralizedLabel: this.reminderTime > 1 ? "s" : "", exportparts: "sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content", defaultSelectedOption: reminderTimeOptions.find((ue) => ue.value == this.reminderTimeincrement) ?? reminderTimeOptions[0], withSearch: !1 }))));
   }
   static get formAssociated() {
     return !0;
@@ -23434,7 +23446,6 @@ const NylasReminderTime = proxyCustomElement(class extends H$2 {
   static get watchers() {
     return {
       name: ["elementNameChangedHandler"],
-      eventReminderTimeMinutes: ["eventReminderTimeMinutesChangedHandler"],
       reminderTimeMinutes: ["reminderTimeMinutesChangedHandler"]
     };
   }
@@ -23450,7 +23461,6 @@ const NylasReminderTime = proxyCustomElement(class extends H$2 {
   reminderTimeMinutesOptions: [32]
 }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [0, "inputOptionChanged", "inputOptionChangedHandler"]], {
   name: ["elementNameChangedHandler"],
-  eventReminderTimeMinutes: ["eventReminderTimeMinutesChangedHandler"],
   reminderTimeMinutes: ["reminderTimeMinutesChangedHandler"]
 }]);
 __decorate$5([

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

@@ -17974,12 +17974,13 @@ const P5 = te(class extends ne {
   disconnectedCallback() {
   }
   async componentWillLoad() {
-    var n;
-    const e = (n = this.availability) == null ? void 0 : n.filter((r) => this.selectedDate && cn(r.start_time, this.selectedDate)).map((r) => r);
-    this.times = e || [], N("[nylas-timeslot-picker] Component will load", { selectedDate: this.selectedDate, availability: this.availability, times: this.times });
+    N("[nylas-timeslot-picker] Component will load", { selectedDate: this.selectedDate, availability: this.availability, times: this.times });
   }
   async componentDidLoad() {
+    var n;
     N("[nylas-timeslot-picker] Component did load");
+    const e = (n = this.availability) == null ? void 0 : n.filter((r) => this.selectedDate && cn(r.start_time, this.selectedDate)).map((r) => r);
+    this.times = e || [];
   }
   getTimeslotId(e, n) {
     return `${e.toLocaleDateString()}-${n}`;

package/dist/cdn/nylas-timeslot-picker/nylas-timeslot-picker.es.js

@@ -9215,12 +9215,13 @@ const yn = Jr(class extends Vr {
   disconnectedCallback() {
   }
   async componentWillLoad() {
-    var t;
-    const e = (t = this.availability) == null ? void 0 : t.filter((r) => this.selectedDate && br(r.start_time, this.selectedDate)).map((r) => r);
-    this.times = e || [], ce("[nylas-timeslot-picker] Component will load", { selectedDate: this.selectedDate, availability: this.availability, times: this.times });
+    ce("[nylas-timeslot-picker] Component will load", { selectedDate: this.selectedDate, availability: this.availability, times: this.times });
   }
   async componentDidLoad() {
+    var t;
     ce("[nylas-timeslot-picker] Component did load");
+    const e = (t = this.availability) == null ? void 0 : t.filter((r) => this.selectedDate && br(r.start_time, this.selectedDate)).map((r) => r);
+    this.times = e || [];
   }
   getTimeslotId(e, t) {
     return `${e.toLocaleDateString()}-${t}`;