@nylas/web-elements 1.1.5 → 1.1.6

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

@@ -18905,7 +18905,7 @@ function JT() {
     }
   });
 }
-const XT = ':host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif}.card-wrapper{background:var(--nylas-base-0);display:flex;flex-direction:column;font-family:var(--nylas-font-family);background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;padding:32px;width:562px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.card-wrapper{width:100%;border-radius:0px}}.header{overflow-wrap:anywhere;display:flex;flex-direction:column;font-size:1rem;font-weight:400}.header h2{color:var(--nylas-base-900);font-size:24px;font-weight:600;text-align:left;margin:0}.description.title-desc{margin-bottom:2rem}.description.footer-desc{margin-top:2rem}.description.footer-desc a{color:var(--nylas-primary);text-decoration:none}.description p{margin:0;font-size:18px;color:var(--nylas-base-600)}.footer{margin-top:1rem;padding-top:1rem;display:flex;justify-content:flex-end;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.close-button{width:100%;display:flex;justify-content:flex-end}.close-button button-component button{padding:0;height:auto}.close-button button-component button:hover{background-color:transparent !important}button-component{--dot-color:var(--nylas-base-700)}', QT = XT;
+const XT = ":host{display:block}.card-wrapper{background:var(--nylas-base-0);display:flex;flex-direction:column;font-family:var(--nylas-font-family);background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;padding:32px;width:562px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.card-wrapper{width:100%;border-radius:0px}}.header{overflow-wrap:anywhere;display:flex;flex-direction:column;font-size:1rem;font-weight:400}.header h2{color:var(--nylas-base-900);font-size:24px;font-weight:600;text-align:left;margin:0}.description.title-desc{margin-bottom:2rem}.description.footer-desc{margin-top:2rem}.description.footer-desc a{color:var(--nylas-primary);text-decoration:none}.description p{margin:0;font-size:18px;color:var(--nylas-base-600)}.footer{margin-top:1rem;padding-top:1rem;display:flex;justify-content:flex-end;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.close-button{width:100%;display:flex;justify-content:flex-end}.close-button button-component button{padding:0;height:auto}.close-button button-component button:hover{background-color:transparent !important}button-component{--dot-color:var(--nylas-base-700)}", QT = XT;
 var eA = function(n, e, t, i) {
   var r = arguments.length, a = r < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, t) : i, o;
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function")
@@ -18922,7 +18922,7 @@ const H5 = j(class extends z {
   constructor() {
     super(), this.__registerHost(), this.__attachShadow(), this.feedbackModalClosed = Z(this, "feedbackModalClosed", 7), this.feedbackSubmitted = Z(this, "feedbackSubmitted", 7), this.triggerValidation = Z(this, "triggerValidation", 7), this.handleConfirmBookingButtonClicked = () => {
       this.triggerValidation.emit().defaultPrevented || this.feedbackSubmitted.emit({ feedback: this.feedbackMessage });
-    }, this.feedbackMessage = "";
+    }, this.themeConfig = void 0, this.feedbackMessage = "";
   }
   connectedCallback() {
   }
@@ -18932,7 +18932,12 @@ const H5 = j(class extends z {
     b("[nylas-feedback-form] Component will load");
   }
   async componentDidLoad() {
-    b("[nylas-feedback-form] Component did load");
+    b("[nylas-feedback-form] Component did load"), this.applyThemeConfig(this.themeConfig);
+  }
+  applyThemeConfig(e) {
+    if (e)
+      for (const [t, i] of Object.entries(e))
+        this.host.style.setProperty(`${t}`, i);
   }
   handleFormInputChanged(e) {
     b("[nylas-feedback-form] Form input changed"), e.detail.value && (this.triggerValidation.emit(), e.detail.name === "feedback" && (this.feedbackMessage = e.detail.value));
@@ -18941,9 +18946,9 @@ const H5 = j(class extends z {
     e.preventDefault(), e.stopImmediatePropagation(), this.feedbackModalClosed.emit();
   }
   render() {
-    return c(oe, { key: "00514f43a6b2052ce2a4144917ccc5adc965a94a", part: "nfbf" }, c("div", { key: "4271697a749f74d3d62f611df6841dc4d7e4ef4d", class: "card-wrapper", part: "nfbfc__card" }, c("div", { key: "59271c12c04a4f78fac68534ec66b24ac9803784", class: "close-button" }, c("button-component", { key: "de7ced90803da24ff46d2dc30f7e925b6fb760a8", tooltip: "Close", id: "close", variant: "invisible", onClick: (e) => this.closeModal(e), part: "nfbf__close-button" }, c("close-icon", { key: "3f64b2db3958bf082829310126566ef58ae54f46" }))), c("div", { key: "526d959d10a00d49d66d66fe3a56bce3a03893f4", class: "header" }, c("h2", { key: "699f00cca09366e19081e0972a76a2f67d471ecc", slot: "card-title", part: "nfbf__title" }, Cn.t("feedbackFormTitle"))), c("div", { key: "95062b4d3557eef49fac7246526f0d413acdd7ff", class: "description title-desc" }, c("p", { key: "6806a1ae323b2f67c5fcacbb0238df86a4f32bce" }, Cn.t("feedbackFormDescription"))), c("textarea-component", { key: "1135f11f19f5cca1f814812c606b39c3a828bf9b", label: Cn.t("feedbackMessageLabel"), required: !0, maxLength: 500, part: "nfbf__description", name: "feedback", placeholder: Cn.t("feedbackMessagePlaceholder") }), c("div", { key: "388f7897c0eb2a9d87d25b98b49d3f60363e0108", class: "description footer-desc" }, c("p", { key: "ab9ba37f8e5533b8480c223ad668ffb91b95ab7e" }, "By sending this report, you agree to Nylas’ access to the data necessary to respond to this issue, subject to Nylas’", " ", c("a", { key: "c1a380ed74cb1c6081ca7c557e761eab7ae5ab9d", href: "https://www.nylas.com/privacy-policy/", target: "_blank", rel: "nofollow noreferrer noopener" }, "Privacy Policy"), ".")), c("div", { key: "d8da33e015c718e6c8cf59b407eb7df7efaa26f9", class: {
+    return c(oe, { key: "a2fdcdd71d0c4ff3902df64405da31a223eaf7d7", part: "nfbf" }, c("div", { key: "f9e8577b5357683928205b53ee81753a66a7e4ae", class: "card-wrapper", part: "nfbfc__card" }, c("div", { key: "d1bbb63d773ef30918549fe4a6737bf582ae0d06", class: "close-button" }, c("button-component", { key: "a418fa3fef1af84a1d504030e1bcafde4653e2ad", tooltip: "Close", id: "close", variant: "invisible", onClick: (e) => this.closeModal(e), part: "nfbf__close-button" }, c("close-icon", { key: "cc39f114e75f5554417718701175d44844ffc4a0" }))), c("div", { key: "d425f232a67162d7865986403819a9aa80641891", class: "header" }, c("h2", { key: "3ee4ce9fa02a86831ff4a292320fe890bfb728bf", slot: "card-title", part: "nfbf__title" }, Cn.t("feedbackFormTitle"))), c("div", { key: "e190c2c7558cc3d292ecdd0efde36a5ba949406e", class: "description title-desc" }, c("p", { key: "bae5de83094598fa1794fac48f44d6385499183e" }, Cn.t("feedbackFormDescription"))), c("textarea-component", { key: "2dbcd70b5d4c8035a2cc7e852fdd6dfe23650d92", label: Cn.t("feedbackMessageLabel"), required: !0, maxLength: 500, part: "nfbf__description", name: "feedback", placeholder: Cn.t("feedbackMessagePlaceholder") }), c("div", { key: "0970ad9b93148e325b85353e7ae79df9de057f10", class: "description footer-desc" }, c("p", { key: "3f20809d828a385b471916d5f53944d5438e0cff" }, "By sending this report, you agree to Nylas’ access to the data necessary to respond to this issue, subject to Nylas’", " ", c("a", { key: "bdb691d2575ba496607675f82bea362bfcb3dcdb", href: "https://www.nylas.com/privacy-policy/", target: "_blank", rel: "nofollow noreferrer noopener" }, "Privacy Policy"), ".")), c("div", { key: "7cfd02b5827dfbd325f49e8c0b055873ae9ab32a", class: {
       footer: !0
-    } }, c("button-component", { key: "52f9c1a0a54907f9b83167387247fc3c979ad498", variant: "invisible", onClick: (e) => this.closeModal(e), part: "nfbf__button-outline nfbf__cancel-cta" }, `${Cn.t("feedbackModalCloseButton")}`), c("button-component", { key: "819fc5952960c841c3a6b46af127699cd5f69c88", variant: "primary", onClick: this.handleConfirmBookingButtonClicked, part: "nfbf__button-outline nfbf__reschedule-cta" }, `${Cn.t("feedbackModalSubmitButton")}`))));
+    } }, c("button-component", { key: "8d31999de17098830414f2944f52d94b59b903dd", variant: "invisible", onClick: (e) => this.closeModal(e), part: "nfbf__button-outline nfbf__cancel-cta" }, `${Cn.t("feedbackModalCloseButton")}`), c("button-component", { key: "b802e92f4dba1467a54d90b730fc94161b41030c", variant: "primary", onClick: this.handleConfirmBookingButtonClicked, part: "nfbf__button-outline nfbf__reschedule-cta" }, `${Cn.t("feedbackModalSubmitButton")}`))));
   }
   get host() {
     return this;
@@ -18952,6 +18957,7 @@ const H5 = j(class extends z {
     return QT;
   }
 }, [1, "nylas-feedback-form", {
+  themeConfig: [8, "theme-config"],
   feedbackMessage: [32]
 }, [[4, "nylasFormInputChanged", "handleFormInputChanged"]]]);
 eA([
@@ -18962,6 +18968,7 @@ eA([
       feedbackSubmitted: async (n, e) => {
       }
     },
+    localPropsToProp: /* @__PURE__ */ new Map([["themeConfig", "themeConfig"]]),
     fireRegisterEvent: !0
   }),
   $s("design:type", Function),
@@ -27208,7 +27215,7 @@ const iu = j(class extends z {
     var t, i;
     b("[nylas-editor-tabs]", "componentDidLoad"), this.enableUserFeedback && !_O() && TM({
       dsn: "https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816",
-      release: "1.1.5",
+      release: "1.1.6",
       integrations: (r) => [
         ...r.filter((a) => !1),
         qR({
@@ -27247,7 +27254,7 @@ const iu = j(class extends z {
       captureContext: {
         tags: {
           "nylas-web-element": "nylas-scheduler-editor",
-          "nylas-web-element-version": "1.1.5"
+          "nylas-web-element-version": "1.1.6"
         },
         extra: {
           configId: (r = this.selectedConfiguration) == null ? void 0 : r.id,
@@ -27408,21 +27415,21 @@ const iu = j(class extends z {
     var t;
     return ((t = this.hideEditorTabs) == null ? void 0 : t.includes(e)) || !1;
   }
-  onFeedbackClick() {
-    this.showFeedbackModal = !0;
+  onFeedbackClick(e) {
+    e.preventDefault(), this.showFeedbackModal = !0;
   }
   render() {
     var e, t;
-    return b("[nylas-editor-tabs]", "render", this.formState), c(oe, { key: "979cb82af1a494ea69a8122420da0c794e7c1c14" }, c("form", { key: "a8aec5d884b9985898a0e2015a973c3f18c9993d", onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: (i) => this.formRef = i, noValidate: !0 }, this.mode === "app" ? c("div", { class: "form-contents" }, c("div", { class: "tabs" }, c("button", { name: ie.EventInfo, class: { tab: !0, active: this.activeTab == ie.EventInfo, hide: this.hideTab(ie.EventInfo) }, part: "editortab__event-info", onClick: (i) => this.setActiveTab(i, ie.EventInfo) }, c("calendar-info-icon", { width: "16", height: "16" }), "Event info"), c("button", { name: ie.Availability, class: { tab: !0, active: this.activeTab == ie.Availability, hide: this.hideTab(ie.Availability) }, part: "editortab__availability", onClick: (i) => this.setActiveTab(i, ie.Availability) }, c("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), c("button", { name: ie.Participants, class: { tab: !0, active: this.activeTab == ie.Participants, hide: this.hideTab(ie.Participants) }, part: "editortab__participants", onClick: (i) => this.setActiveTab(i, ie.Participants) }, c("people-icon", { width: "16", height: "16" }), "Participants"), c("button", { name: ie.BookingOptions, class: { tab: !0, active: this.activeTab == ie.BookingOptions, hide: this.hideTab(ie.BookingOptions) }, part: "editortab__booking-options", onClick: (i) => this.setActiveTab(i, ie.BookingOptions) }, c("flow-icon", { width: "16", height: "16" }), "Booking options"), c("button", { name: ie.BookingForm, class: { tab: !0, active: this.activeTab == "bookingForm", hide: this.hideTab(ie.BookingForm) }, part: "editortab__booking-form", onClick: (i) => this.setActiveTab(i, ie.BookingForm) }, this.activeTab == ie.BookingForm ? c("calendar-agenda-fill-icon", { width: "16", height: "16" }) : c("calendar-agenda-icon", { width: "16", height: "16" }), "Booking form"), c("button", { name: ie.Communications, class: { tab: !0, active: this.activeTab == "communications", hide: this.hideTab(ie.Communications) }, onClick: (i) => this.setActiveTab(i, ie.Communications) }, this.activeTab == ie.Communications ? c("envelope-fill-icon", { width: "16", height: "16" }) : c("envelope-icon", { width: "16", height: "16" }), "Communications"), c("button", { name: ie.PageStyles, class: { tab: !0, active: this.activeTab == "pageStyles", hide: this.hideTab(ie.PageStyles) }, onClick: (i) => this.setActiveTab(i, ie.PageStyles) }, this.activeTab == ie.PageStyles ? c("paintbrush-fill-icon", { width: "16", height: "16" }) : c("paintbrush-icon", { width: "16", height: "16" }), "Page styles")), c("div", { class: "tab-content" }, c(WR, { formState: this.formState, activeTab: this.activeTab, currentUser: this.currentUser, calendars: this.calendars, id: ((e = this.selectedConfiguration) == null ? void 0 : e.id) ?? "new" }))) : c("div", { class: "composable", key: (t = this.selectedConfiguration) == null ? void 0 : t.id }, c("slot", null)), c("div", { key: "c013e06487a2675130df47566e7322bb8254fea0", class: "footer", part: "editor__footer" }, c("div", { key: "7ec0e476e014b7dcc5cb0177b86161743b09233f", class: "preview", part: "editor__footer-preview" }, this.enableUserFeedback && c("button-component", { title: "Share your feedback", id: "report-issue", variant: "basic", onClick: () => this.onFeedbackClick() }, c("feedback-icon", null))), c("div", { key: "791187b91f7ce807d980fe79a551bb7f16725a8b", class: "buttons", part: "editor__footer-buttons" }, c("p", { key: "33e1dcbac0ccf06a7c9b15fe615e222e86d7d947", class: {
+    return b("[nylas-editor-tabs]", "render", this.formState), c(oe, { key: "d38db7df3b55dcd9df5d23c06a2257e483e4f881" }, c("form", { key: "f75efd88f7a329288e77933ca218fa88e9dd8a87", onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: (i) => this.formRef = i, noValidate: !0 }, this.mode === "app" ? c("div", { class: "form-contents" }, c("div", { class: "tabs" }, c("button", { name: ie.EventInfo, class: { tab: !0, active: this.activeTab == ie.EventInfo, hide: this.hideTab(ie.EventInfo) }, part: "editortab__event-info", onClick: (i) => this.setActiveTab(i, ie.EventInfo) }, c("calendar-info-icon", { width: "16", height: "16" }), "Event info"), c("button", { name: ie.Availability, class: { tab: !0, active: this.activeTab == ie.Availability, hide: this.hideTab(ie.Availability) }, part: "editortab__availability", onClick: (i) => this.setActiveTab(i, ie.Availability) }, c("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), c("button", { name: ie.Participants, class: { tab: !0, active: this.activeTab == ie.Participants, hide: this.hideTab(ie.Participants) }, part: "editortab__participants", onClick: (i) => this.setActiveTab(i, ie.Participants) }, c("people-icon", { width: "16", height: "16" }), "Participants"), c("button", { name: ie.BookingOptions, class: { tab: !0, active: this.activeTab == ie.BookingOptions, hide: this.hideTab(ie.BookingOptions) }, part: "editortab__booking-options", onClick: (i) => this.setActiveTab(i, ie.BookingOptions) }, c("flow-icon", { width: "16", height: "16" }), "Booking options"), c("button", { name: ie.BookingForm, class: { tab: !0, active: this.activeTab == "bookingForm", hide: this.hideTab(ie.BookingForm) }, part: "editortab__booking-form", onClick: (i) => this.setActiveTab(i, ie.BookingForm) }, this.activeTab == ie.BookingForm ? c("calendar-agenda-fill-icon", { width: "16", height: "16" }) : c("calendar-agenda-icon", { width: "16", height: "16" }), "Booking form"), c("button", { name: ie.Communications, class: { tab: !0, active: this.activeTab == "communications", hide: this.hideTab(ie.Communications) }, onClick: (i) => this.setActiveTab(i, ie.Communications) }, this.activeTab == ie.Communications ? c("envelope-fill-icon", { width: "16", height: "16" }) : c("envelope-icon", { width: "16", height: "16" }), "Communications"), c("button", { name: ie.PageStyles, class: { tab: !0, active: this.activeTab == "pageStyles", hide: this.hideTab(ie.PageStyles) }, onClick: (i) => this.setActiveTab(i, ie.PageStyles) }, this.activeTab == ie.PageStyles ? c("paintbrush-fill-icon", { width: "16", height: "16" }) : c("paintbrush-icon", { width: "16", height: "16" }), "Page styles")), c("div", { class: "tab-content" }, c(WR, { formState: this.formState, activeTab: this.activeTab, currentUser: this.currentUser, calendars: this.calendars, id: ((e = this.selectedConfiguration) == null ? void 0 : e.id) ?? "new" }))) : c("div", { class: "composable", key: (t = this.selectedConfiguration) == null ? void 0 : t.id }, c("slot", null)), c("div", { key: "33fa467828de45477cb14547e83cd91d3316d1de", class: "footer", part: "editor__footer" }, c("div", { key: "e94586ffcb339ed0134db7dba554add942b9658b", class: "preview", part: "editor__footer-preview" }, this.enableUserFeedback && c("button-component", { title: "Share your feedback", id: "report-issue", variant: "basic", onClick: (i) => this.onFeedbackClick(i) }, c("feedback-icon", null))), c("div", { key: "ba9415c331d169876f6f64e048d295c494066fb0", class: "buttons", part: "editor__footer-buttons" }, c("p", { key: "b985139923dac06f300329c63100bb322a72e215", class: {
       "unsaved-changes": this.hasUnsavedChanges && !this.changesSaved,
       "saved-changes": this.changesSaved,
       error: this.error !== "",
       "error-full-width": this.error !== "" && this.action === "create"
     } }, this.error !== "" ? this.error : "", this.error == "" && this.hasUnsavedChanges && !this.changesSaved ? "Unsaved changes" : this.error == "" && this.changesSaved ? "Changes saved!" : ""), this.schedulerPreviewLink !== "" && this.action === "edit" && c("button-component", { title: "Preview", type: "button", disabled: this.isLoading, clickHandler: (i) => {
       i.preventDefault(), this.previewButtonClicked.emit(this.host).defaultPrevented || window.open(vC(this.schedulerPreviewLink, this.selectedConfiguration), "_blank");
-    }, variant: "basic" }, c("eye-icon", null)), c("button-component", { key: "35722d8b7c489c687ef63d7747a33204261b2870", type: "button", disabled: this.isLoading, clickHandler: (i) => {
+    }, variant: "basic" }, c("eye-icon", null)), c("button-component", { key: "e8b658f3fe6dea039818fe7e5803c7876dcf516a", type: "button", disabled: this.isLoading, clickHandler: (i) => {
       i.preventDefault(), this.cancelButtonClick.emit(), this.error = "";
-    }, variant: "basic", part: "editor__footer-cancel" }, "Back"), c("button-component", { key: "fabfca306aecb7a62212397bfe12e3fffce5fa8e", type: "submit", disabled: this.isLoading, part: "editor__footer-cta" }, this.isLoading ? c("span", null, "Saving", c("loading-icon", null), " ") : this.action === "create" ? "Create" : "Save changes")))), this.showFeedbackModal && c("nylas-feedback-form", null));
+    }, variant: "basic", part: "editor__footer-cancel" }, "Back"), c("button-component", { key: "def3baeb44f02d4a168d4946fe46c158d9872d8a", type: "submit", disabled: this.isLoading, part: "editor__footer-cta" }, this.isLoading ? c("span", null, "Saving", c("loading-icon", null), " ") : this.action === "create" ? "Create" : "Save changes")))), this.showFeedbackModal && c("nylas-feedback-form", null));
   }
   get host() {
     return this;