@nylas/web-elements 1.1.5 → 1.1.6

package/dist/components/nylas-booked-event-card2.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './checkmark-circle.js';
 import { d as defineCustomElement$2 } from './globe.js';
 import { d as defineCustomElement$1 } from './loading.js';
 
-const nylasBookedEventCardCss = ":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}.nylas-booked-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;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){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400;border-bottom:1px solid var(--nylas-base-200);width:inherit;padding:0 0 1.5rem}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booked-event-header .card-description{text-align:center}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:16px;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.button-container{width:inherit}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);border-top:1px solid var(--nylas-base-200);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
+const nylasBookedEventCardCss = ":host{display:block}.nylas-booked-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;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){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400;border-bottom:1px solid var(--nylas-base-200);width:inherit;padding:0 0 1.5rem}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booked-event-header .card-description{text-align:center}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:16px;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.button-container{width:inherit}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);border-top:1px solid var(--nylas-base-200);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.footer.no-template-cols{grid-template-columns:1fr}.footer.no-footer{display:none}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -70,6 +70,7 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         this.bookingInfo = undefined;
         this.configSettings = undefined;
         this.isLoading = undefined;
+        this.themeConfig = undefined;
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         this.selectedTimeslot = undefined;
         this.selectedLanguage = navigator.language;
@@ -89,25 +90,34 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         if (!this.bookingInfo) {
             console.warn('[nylas-booked-event-card] "bookingInfo" prop missing. Please provide the booking info to display the guest details in the booked event card component.');
         }
+        this.applyThemeConfig(this.themeConfig);
         this.startTime = formatTimezone(this.selectedTimeslot?.start_time, this.selectedTimezone);
         this.endTime = formatTimezone(this.selectedTimeslot?.end_time, this.selectedTimezone);
     }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     render() {
         const bookingType = this.configSettings?.booking_type;
         const isManualConfirmation = bookingType && bookingType !== 'booking';
-        return (h(Host, { key: '4c047c53d7532b60d6d28be607b3e926e07f2e50', part: "nbec" }, h("div", { key: '154180aa38c82fc2e28d8b9ad753804fdfb837d7', class: "nylas-booked-event-card" }, h("div", { key: 'a6d046deffb82706bd609a2ac7f33f462578326a', class: "booked-event-timezone" }, h("globe-icon", { key: '22418924800ed88cdf685441561728ecac4594cd' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: 'f4f4ffb1ff084cba9f1032c1d5e394a9b65286e2', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '7440e6baed4f509594acf69166566a6546d9b2ae', class: "calendar-icon" }, h("calendar-check-icon", { key: '6a82cfb9ac8d89bb8151e86dcbb9d49422513b89' })), h("div", { key: 'c913c479384ecd4e5df96dea05a1305a12df76c8', class: "booked-event-header" }, h("h2", { key: 'c818d579e73751d6e83bf50f9dc34a3523e2b0f1', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
+        return (h(Host, { key: '448f4b09ce4624c71dbff719acb7a67ecbc913e8', part: "nbec" }, h("div", { key: '83186cea10465372dece0a270725407ea74a0e1c', class: "nylas-booked-event-card" }, h("div", { key: '26d0cae03f426336f59c9459109d6c55beedb505', class: "booked-event-timezone" }, h("globe-icon", { key: '87fe3f6a6c6e8a0aad7c0250358d387b70d6a634' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '9c445dce0c157cb67cb92a7a713e1dada1be47a7', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '8bcfae606e9f99ba9a268b2dbb19e755143f2842', class: "calendar-icon" }, h("calendar-check-icon", { key: '7abab211fd0f1a04a087e2bd15ee112db8616e6a' })), h("div", { key: '7c40924ba6736cfc379ed828c5359c1b4e79d98e', class: "booked-event-header" }, h("h2", { key: '497f50d74143788b9d9920ba2ad57564abf7844a', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
             ? `${instance.t('bookingRescheduled')}`
             : isManualConfirmation && !this.isLoading
                 ? `${instance.t('bookingSent')}`
-                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'bb6cef397ebe5aec3ed49f455ac00430594c4c6f', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: 'd4732fc9421c4d54062bdac74e69a476322f168a', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'caadcce299c4506d709a65bfbc3d10fec64ef6d6' }), h("h3", { key: '8a2dc813f1be6bab13a53328c4e9dbb5ec7d41df' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: 'fedc61f46ba1b96e424b23aff08c382296e4a6d3' }, this.selectedTimeslot?.start_time
+                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'efaf8dda6da9da0e3d181ecedd579cb1648beec2', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: '4a4566f77af068b139525a13b84fd658fd9b8d02', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '8526a636990d6f1bd3631a77fc4c11587bb1c966' }), h("h3", { key: 'f2286f630eb03a961276b149b7f556be715c0dc3' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: 'ad07de11395666123ccf0022f0da372c9c3f8425' }, this.selectedTimeslot?.start_time
             ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))
-            : '-', ' ', h("br", { key: '6efc18bfd398bca545c359b5876ff9a16792485f' }), this.startTime, " - ", this.endTime)), h("div", { key: 'c972d3fc4f1541ec6a1fde958176de0adccf3bcd', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
+            : '-', ' ', h("br", { key: '70397806f6fbed27a981f23a4ae3c57309fffbbf' }), this.startTime, " - ", this.endTime)), h("div", { key: '5fe7e31e10847e8e701dcd192c39350bec71291f', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
                 'footer': true,
                 'no-footer': (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||
                     this.configSettings?.booking_type === 'organizer-confirmation',
                 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
             } }, !this.configSettings?.scheduler?.hide_cancellation_options && (h("button-component", { variant: 'destructive', onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, `${instance.t('cancelBookingButton')}`)), !this.configSettings?.scheduler?.hide_rescheduling_options && (h("button-component", { variant: 'basic', onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, `${instance.t('rescheduleBookingButton')}`)))))))));
     }
+    get host() { return this; }
     static get style() { return nylasBookedEventCardCss; }
 }, [1, "nylas-booked-event-card", {
         "eventInfo": [16],
@@ -115,6 +125,7 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         "bookingInfo": [8, "booking-info"],
         "configSettings": [8, "config-settings"],
         "isLoading": [4, "is-loading"],
+        "themeConfig": [8, "theme-config"],
         "selectedTimezone": [1, "selected-timezone"],
         "selectedTimeslot": [16],
         "selectedLanguage": [1, "selected-language"],
@@ -151,6 +162,7 @@ __decorate([
                 debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

package/dist/components/nylas-booked-event-card2.js.map

@@ -1 +1 @@
-{"file":"nylas-booked-event-card2.js","mappings":";;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,+sGAA+sG;;;;;;;;;;;;;;;;MC0BluG,oBAAoB;;;;;;;;;QA+FvB,qCAAgC,GAAG;YACzC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAC7D,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,uBAAuB,CAAC;YACtF,MAAM,oBAAoB,GAAG,SAAS,CAAC,OAAO,EAAE,GAAG,qBAAqB,GAAG,EAAE,GAAG,IAAI,CAAC;YACrF,IAAI,oBAAoB,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;gBAC/C,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;oBACzC,KAAK,EAAE;wBACL,KAAK,EAAE,oBAAoB;wBAC3B,OAAO,EAAE,wCAAwC,qBAAqB,wBAAwB;qBAC/F;iBACF,CAAC,CAAC;aACJ;iBAAM;gBACL,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC;aAChF;SACF,CAAC;QAEM,kCAA6B,GAAG;YACtC,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAC7C,CAAC;YACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;SAC3F,CAAC;QAEF,sBAAiB,GAAG,CAAC,IAAY;YAC/B,QAAQ,IAAI;gBACV,KAAK,MAAM;oBACT,OAAO,MAAM,CAAC;gBAChB,KAAK,KAAK;oBACR,OAAO,KAAK,CAAC;gBACf;oBACE,OAAO,EAAE,CAAC;aACb;SACF,CAAC;;;;;;gCA7F0C,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;;gCAUd,SAAS,CAAC,QAAQ;yBAEnE,EAAE;uBACJ,EAAE;;IA2B7B,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,+CAA+C,CAAC,CAAC;KACxD;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,8CAA8C,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,CAAC,IAAI,CAAC,oJAAoJ,CAAC,CAAC;SACpK;QACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,wJAAwJ,CAAC,CAAC;SACxK;QAED,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAkB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClG,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC/F;IAsED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;QACtD,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,SAAS,CAAC;QAEtE,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,uBAAuB,IAChC,oEAAyB,EACxB,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAChC,EACN,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,YAAY,IAC/C,4DAAK,KAAK,EAAC,eAAe,IACxB,6EAAuB,CACnB,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,2DAAI,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,IACrC,CAAC,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,SAAS;cAC1C,GAAGA,QAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE;cACpC,oBAAoB,IAAI,CAAC,IAAI,CAAC,SAAS;kBACrC,GAAGA,QAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;kBAC7B,GAAGA,QAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,MAErC,EACL,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,mBAAmB,IACnD,oBAAoB,GAAGA,QAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,GAAG,gBAAOA,QAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAQ,CACjH,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,+EAA+C,EAC/C,6DAAKA,QAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAM,EAChD,4DACG,IAAI,CAAC,gBAAgB,EAAE,UAAU;cAC9B,qBAAqB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;cACtJ,GAAG,EAAE,GAAG,EACZ,4DAAM,EACL,IAAI,CAAC,SAAS,SAAK,IAAI,CAAC,OAAO,CAC9B,CACA,EACN,4DAAK,KAAK,EAAC,sBAAsB,GAc3B,EAEL,CAAC,oBAAoB,KACpB,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,WAAW,EACT,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB;oBACvH,IAAI,CAAC,cAAc,EAAE,YAAY,KAAK,wBAAwB;gBAChE,kBAAkB,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB;aAC3I,IAEA,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,KACzD,wBAAkB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,IAAI,EAAC,uCAAuC,IACnI,GAAGA,QAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAAE,CACrB,CACpB,EACA,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,KACzD,wBAAkB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,6BAA6B,EAAE,IAAI,EAAC,2CAA2C,IAC9H,GAAGA,QAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,EAAE,CACzB,CACpB,CACG,CACF,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;AAnFD;IAlCC,iBAAiB,CAA+F;QAC/G,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,+BAA+B,EAAE,qBAAqB,CAAC;YACxD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;SAC/C,CAAC;QACF,YAAY,EAAE;YACZ,0BAA0B,EAAE,OAAO,KAAyC,EAAE,uBAAgD;gBAC5H,uBAAuB,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;aACrE;YACD,uBAAuB,EAAE,OACvB,KAAsG,EACtG,uBAAgD;gBAEhD,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC7F,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACtC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;YACD,0BAA0B,EAAE,OAAO,KAA+C,EAAE,wBAAiD;gBACnI,KAAK,CAAC,yBAAyB,EAAE,4BAA4B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC9E;YACD,gCAAgC,EAAE,OAAO,KAAiE,EAAE,wBAAiD;gBAC3J,KAAK,CAAC,yBAAyB,EAAE,kCAAkC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aACpF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;kDAoFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["i18next"],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-booked-event-card {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n  width: 424px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 0;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n  border-bottom: 1px solid var(--nylas-base-200);\n  width: inherit;\n  padding: 0 0 1.5rem;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  .card-description {\n    text-align: center;\n  }\n}\n\n.booking-date-time,\n.booking-participants {\n  padding: 0 1rem;\n  margin-top: 1.5rem;\n  margin-left: 3rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-self: flex-start;\n  position: relative;\n\n  svg {\n    color: var(--nylas-base-700);\n    position: absolute;\n    left: -10px;\n  }\n\n  .block {\n    display: block;\n  }\n\n  h3 {\n    color: var(--nylas-base-600);\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.25rem;\n    text-align: justify;\n    margin-bottom: 4px;\n  }\n\n  p {\n    font-size: 16px;\n    margin: 0;\n    font-weight: 400;\n    text-align: justify;\n    color: var(--nylas-base-800);\n  }\n}\n\n.booking-participants {\n  margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  margin: 2rem;\n  align-items: center;\n  align-self: flex-end;\n}\n\n.button-container {\n  width: inherit;\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  border-top: 1px solid var(--nylas-base-200);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatTimezone } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * @standalone\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * @standalone\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * @standalone\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  /**\n   * This event is fired when an error occurs while cancelling the booking.\n   */\n  @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n    error: {\n      title: string;\n      message: string;\n    };\n  }>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n    if (!this.eventInfo) {\n      console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n    }\n    if (!this.bookingInfo) {\n      console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n    }\n\n    this.startTime = formatTimezone(this.selectedTimeslot?.start_time as Date, this.selectedTimezone);\n    this.endTime = formatTimezone(this.selectedTimeslot?.end_time as Date, this.selectedTimezone);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    const startTime = new Date(this.selectedTimeslot.start_time);\n    const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n    const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;\n    if (dateTillCancellation < new Date().getTime()) {\n      this.cancelBookedEventValidationError.emit({\n        error: {\n          title: 'Cancellation Error',\n          message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n        },\n      });\n    } else {\n      this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n    }\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n      rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n      },\n      cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingType = this.configSettings?.booking_type;\n    const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n    return (\n      <Host part=\"nbec\">\n        <div class=\"nylas-booked-event-card\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                {!!this.rescheduleBookingId && !this.isLoading\n                  ? `${i18next.t('bookingRescheduled')}`\n                  : isManualConfirmation && !this.isLoading\n                    ? `${i18next.t('bookingSent')}`\n                    : `${i18next.t('bookingConfirmed')}`}\n                !\n              </h2>\n              <div class=\"card-description\" part=\"nbec__description\">\n                {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n              </div>\n            </div>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n              <p>\n                {this.selectedTimeslot?.start_time\n                  ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))\n                  : '-'}{' '}\n                <br />\n                {this.startTime} - {this.endTime}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n\n            {!isManualConfirmation && (\n              <div class=\"button-container\">\n                <div\n                  class={{\n                    'footer': true,\n                    'no-footer':\n                      (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||\n                      this.configSettings?.booking_type === 'organizer-confirmation',\n                    'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,\n                  }}\n                >\n                  {!this.configSettings?.scheduler?.hide_cancellation_options && (\n                    <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                      {`${i18next.t('cancelBookingButton')}`}\n                    </button-component>\n                  )}\n                  {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n                    <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                      {`${i18next.t('rescheduleBookingButton')}`}\n                    </button-component>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-booked-event-card2.js","mappings":";;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,onFAAonF;;;;;;;;;;;;;;;;MC0BvoF,oBAAoB;;;;;;;;;QAmHvB,qCAAgC,GAAG;YACzC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAC7D,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,uBAAuB,CAAC;YACtF,MAAM,oBAAoB,GAAG,SAAS,CAAC,OAAO,EAAE,GAAG,qBAAqB,GAAG,EAAE,GAAG,IAAI,CAAC;YACrF,IAAI,oBAAoB,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;gBAC/C,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;oBACzC,KAAK,EAAE;wBACL,KAAK,EAAE,oBAAoB;wBAC3B,OAAO,EAAE,wCAAwC,qBAAqB,wBAAwB;qBAC/F;iBACF,CAAC,CAAC;aACJ;iBAAM;gBACL,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC;aAChF;SACF,CAAC;QAEM,kCAA6B,GAAG;YACtC,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAC7C,CAAC;YACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;SAC3F,CAAC;QAEF,sBAAiB,GAAG,CAAC,IAAY;YAC/B,QAAQ,IAAI;gBACV,KAAK,MAAM;oBACT,OAAO,MAAM,CAAC;gBAChB,KAAK,KAAK;oBACR,OAAO,KAAK,CAAC;gBACf;oBACE,OAAO,EAAE,CAAC;aACb;SACF,CAAC;;;;;;;gCArG0C,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;;gCAUd,SAAS,CAAC,QAAQ;yBAEnE,EAAE;uBACJ,EAAE;;IA2B7B,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,+CAA+C,CAAC,CAAC;KACxD;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,8CAA8C,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,CAAC,IAAI,CAAC,oJAAoJ,CAAC,CAAC;SACpK;QACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,wJAAwJ,CAAC,CAAC;SACxK;QACD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAkB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClG,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC/F;IAED,gBAAgB,CAAC,WAAyB;QACxC,IAAI,WAAW,EAAE;YACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;gBACtD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC;aAC9C;SACF;KACF;IAuED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;QACtD,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,SAAS,CAAC;QAEtE,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,uBAAuB,IAChC,oEAAyB,EACxB,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAChC,EACN,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,YAAY,IAC/C,4DAAK,KAAK,EAAC,eAAe,IACxB,6EAAuB,CACnB,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,2DAAI,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,IACrC,CAAC,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,SAAS;cAC1C,GAAGA,QAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE;cACpC,oBAAoB,IAAI,CAAC,IAAI,CAAC,SAAS;kBACrC,GAAGA,QAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;kBAC7B,GAAGA,QAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,MAErC,EACL,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,mBAAmB,IACnD,oBAAoB,GAAGA,QAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,GAAG,gBAAOA,QAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAQ,CACjH,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,+EAA+C,EAC/C,6DAAKA,QAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAM,EAChD,4DACG,IAAI,CAAC,gBAAgB,EAAE,UAAU;cAC9B,qBAAqB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;cACtJ,GAAG,EAAE,GAAG,EACZ,4DAAM,EACL,IAAI,CAAC,SAAS,SAAK,IAAI,CAAC,OAAO,CAC9B,CACA,EACN,4DAAK,KAAK,EAAC,sBAAsB,GAc3B,EAEL,CAAC,oBAAoB,KACpB,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,WAAW,EACT,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB;oBACvH,IAAI,CAAC,cAAc,EAAE,YAAY,KAAK,wBAAwB;gBAChE,kBAAkB,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB;aAC3I,IAEA,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,KACzD,wBAAkB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,IAAI,EAAC,uCAAuC,IACnI,GAAGA,QAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAAE,CACrB,CACpB,EACA,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,KACzD,wBAAkB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,6BAA6B,EAAE,IAAI,EAAC,2CAA2C,IAC9H,GAAGA,QAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,EAAE,CACzB,CACpB,CACG,CACF,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;AAnFD;IAnCC,iBAAiB,CAA+F;QAC/G,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,+BAA+B,EAAE,qBAAqB,CAAC;YACxD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;SAC/C,CAAC;QACF,YAAY,EAAE;YACZ,0BAA0B,EAAE,OAAO,KAAyC,EAAE,uBAAgD;gBAC5H,uBAAuB,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;aACrE;YACD,uBAAuB,EAAE,OACvB,KAAsG,EACtG,uBAAgD;gBAEhD,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC7F,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACtC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;YACD,0BAA0B,EAAE,OAAO,KAA+C,EAAE,wBAAiD;gBACnI,KAAK,CAAC,yBAAyB,EAAE,4BAA4B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC9E;YACD,gCAAgC,EAAE,OAAO,KAAiE,EAAE,wBAAiD;gBAC3J,KAAK,CAAC,yBAAyB,EAAE,kCAAkC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aACpF;SACF;QACD,gBAAgB,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;QAC3D,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;kDAoFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["i18next"],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n}\n\n.nylas-booked-event-card {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n  width: 424px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1),\n  0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 0;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n  border-bottom: 1px solid var(--nylas-base-200);\n  width: inherit;\n  padding: 0 0 1.5rem;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  .card-description {\n    text-align: center;\n  }\n}\n\n.booking-date-time,\n.booking-participants {\n  padding: 0 1rem;\n  margin-top: 1.5rem;\n  margin-left: 3rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-self: flex-start;\n  position: relative;\n\n  svg {\n    color: var(--nylas-base-700);\n    position: absolute;\n    left: -10px;\n  }\n\n  .block {\n    display: block;\n  }\n\n  h3 {\n    color: var(--nylas-base-600);\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.25rem;\n    text-align: justify;\n    margin-bottom: 4px;\n  }\n\n  p {\n    font-size: 16px;\n    margin: 0;\n    font-weight: 400;\n    text-align: justify;\n    color: var(--nylas-base-800);\n  }\n}\n\n.booking-participants {\n  margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  margin: 2rem;\n  align-items: center;\n  align-self: flex-end;\n}\n\n.button-container {\n  width: inherit;\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  border-top: 1px solid var(--nylas-base-200);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatTimezone } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasBookedEventCardElement;\n\n  /**\n   * @standalone\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * @standalone\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * @standalone\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  /**\n   * This event is fired when an error occurs while cancelling the booking.\n   */\n  @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n    error: {\n      title: string;\n      message: string;\n    };\n  }>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n    if (!this.eventInfo) {\n      console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n    }\n    if (!this.bookingInfo) {\n      console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n    }\n    this.applyThemeConfig(this.themeConfig);\n    this.startTime = formatTimezone(this.selectedTimeslot?.start_time as Date, this.selectedTimezone);\n    this.endTime = formatTimezone(this.selectedTimeslot?.end_time as Date, this.selectedTimezone);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    const startTime = new Date(this.selectedTimeslot.start_time);\n    const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n    const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;\n    if (dateTillCancellation < new Date().getTime()) {\n      this.cancelBookedEventValidationError.emit({\n        error: {\n          title: 'Cancellation Error',\n          message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n        },\n      });\n    } else {\n      this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n    }\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n      rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n      },\n      cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n      },\n    },\n    localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingType = this.configSettings?.booking_type;\n    const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n    return (\n      <Host part=\"nbec\">\n        <div class=\"nylas-booked-event-card\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                {!!this.rescheduleBookingId && !this.isLoading\n                  ? `${i18next.t('bookingRescheduled')}`\n                  : isManualConfirmation && !this.isLoading\n                    ? `${i18next.t('bookingSent')}`\n                    : `${i18next.t('bookingConfirmed')}`}\n                !\n              </h2>\n              <div class=\"card-description\" part=\"nbec__description\">\n                {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n              </div>\n            </div>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n              <p>\n                {this.selectedTimeslot?.start_time\n                  ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))\n                  : '-'}{' '}\n                <br />\n                {this.startTime} - {this.endTime}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n\n            {!isManualConfirmation && (\n              <div class=\"button-container\">\n                <div\n                  class={{\n                    'footer': true,\n                    'no-footer':\n                      (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||\n                      this.configSettings?.booking_type === 'organizer-confirmation',\n                    'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,\n                  }}\n                >\n                  {!this.configSettings?.scheduler?.hide_cancellation_options && (\n                    <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                      {`${i18next.t('cancelBookingButton')}`}\n                    </button-component>\n                  )}\n                  {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n                    <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                      {`${i18next.t('rescheduleBookingButton')}`}\n                    </button-component>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-booking-form2.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$3 } from './select-dropdown2.js';
 import { d as defineCustomElement$2 } from './textarea-component2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
 
-const nylasBookingFormCss = ":host{display:block;height:100%;--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}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto;height:100%}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}sp-textfield{--spectrum-corner-radius-100:var(--nylas-border-radius-2x);--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;color:var(--nylas-base-500)}.cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{grid-template-columns:1fr}}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper input::placeholder{color:var(--nylas-base-300)}.input-wrapper label,.input-wrapper input{font-family:var(--nylas-font-family);font-size:16px}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}.button-content{display:flex;gap:4px;align-items:center}sp-infield-button{--spectrum-infield-button-background-color:transparent;--spectrum-infield-button-background-color-hover:transparent;--spectrum-infield-button-background-color-active:transparent;--spectrum-infield-button-border-color:transparent;--spectrum-infield-button-border-width:1px;--spectrum-infield-button-border-radius:0;color:var(--nylas-base-600);background:transparent;border:none;outline:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;height:52px;width:52px;display:flex;position:absolute;right:0;align-items:center;justify-content:center;cursor:pointer}sp-infield-button sp-icon-cross300{color:var(--nylas-base-600)}sp-infield-button.error{border-width:2px;border-color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}input[type=text].guest-email,input[type=email].guest-email{color:var(--nylas-base-900);padding-right:52px}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}button-component.remove-guest{position:absolute;height:51px;right:0}button-component.remove-guest.error button{border-color:var(--nylas-error)}button-component.remove-guest button{height:inherit;border-top-left-radius:initial;border-bottom-left-radius:initial;border:none !important;border-left:1px solid var(--nylas-base-300) !important}button-component.remove-guest button:hover,button-component.remove-guest button:focus{outline:1px solid var(--nylas-primary) !important;color:var(--nylas-primary)}button-component.back button{--dot-color:var(--nylas-base-800)}.guest-email-input{position:relative;display:flex;width:100%}";
+const nylasBookingFormCss = ":host{display:block;height:100%}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto;height:100%}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}sp-textfield{--spectrum-corner-radius-100:var(--nylas-border-radius-2x);--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;color:var(--nylas-base-500)}.cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{grid-template-columns:1fr}}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper input::placeholder{color:var(--nylas-base-300)}.input-wrapper label,.input-wrapper input{font-family:var(--nylas-font-family);font-size:16px}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}.button-content{display:flex;gap:4px;align-items:center}sp-infield-button{--spectrum-infield-button-background-color:transparent;--spectrum-infield-button-background-color-hover:transparent;--spectrum-infield-button-background-color-active:transparent;--spectrum-infield-button-border-color:transparent;--spectrum-infield-button-border-width:1px;--spectrum-infield-button-border-radius:0;color:var(--nylas-base-600);background:transparent;border:none;outline:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;height:52px;width:52px;display:flex;position:absolute;right:0;align-items:center;justify-content:center;cursor:pointer}sp-infield-button sp-icon-cross300{color:var(--nylas-base-600)}sp-infield-button.error{border-width:2px;border-color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}input[type=text].guest-email,input[type=email].guest-email{color:var(--nylas-base-900);padding-right:52px}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}button-component.remove-guest{position:absolute;height:51px;right:0}button-component.remove-guest.error button{border-color:var(--nylas-error)}button-component.remove-guest button{height:inherit;border-top-left-radius:initial;border-bottom-left-radius:initial;border:none !important;border-left:1px solid var(--nylas-base-300) !important}button-component.remove-guest button:hover,button-component.remove-guest button:focus{outline:1px solid var(--nylas-primary) !important;color:var(--nylas-primary)}button-component.back button{--dot-color:var(--nylas-base-800)}.guest-email-input{position:relative;display:flex;width:100%}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -165,6 +165,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
         this.bookingInfo = undefined;
         this.eventInfo = undefined;
         this.configSettings = undefined;
+        this.themeConfig = undefined;
         this.name = '';
         this.email = '';
         this.guestEmails = [];
@@ -179,10 +180,14 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
     disconnectedCallback() { }
     componentWillLoad() {
         debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);
+    }
+    componentDidLoad() {
+        debug('nylas-booking-form', 'componentDidLoad', this.bookingInfo);
         if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {
             this.name = this.bookingInfo.primaryParticipant?.name;
             this.email = this.bookingInfo.primaryParticipant?.email;
         }
+        this.applyThemeConfig(this.themeConfig);
     }
     bookingInfoChangedHandler(newValue) {
         if (newValue && newValue.primaryParticipant) {
@@ -190,6 +195,13 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
             this.email = newValue.primaryParticipant.email;
         }
     }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     changeName(name) {
         this.isNameValid = true;
         this.validationError.name = '';
@@ -250,7 +262,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
         this.updateAdditionalFields(event.detail.name, event.detail.value);
     }
     render() {
-        return (h(Host, { key: '0ea30bef8b00673240ee959d6b8baaffc7d2c715' }, h("form", { key: 'd5bf36df0f5419c98b5114719c731e8c3201bc7b', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '2a7a7cbaae2af6f3b79e23366752a421bf2304ba', class: "nylas-booking-form", part: "nbf" }, h("div", { key: '9af4ebc990cb2ef4e3e58af148eb7609b203c78a', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '31ea0d5c904a62c2c9b8d7572b448d9a28b24e86', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '95de0dabca66d11e1370b282e4d23eb545fb33a6', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '712b25028a9d12bde236ada12c9b8ee15a70c885', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
+        return (h(Host, { key: '9a442ac154e4e8ab9d8e8ec08b2005bb9bda476c' }, h("form", { key: '63feaa1eb0688e4019e1af96d48a3e71cafe2d3a', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '95f92c677613fcddd743467c30e6b097a575fa40', class: "nylas-booking-form", part: "nbf" }, h("div", { key: 'b37fc60cddc9172fbb65edaf45e77c3d999f6aa4', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '5545f58ce4fc92b0ab185087dfbeb5de6a25aca0', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '6ddd5a68d0966e1fa79998d757a47b2df8c2b6e6', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '20a13472d671c968a2f20c79992a04aca4b50f54', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
                 error: !!this.guestEmailErrors[index],
             } }, instance.t('guestEmail')), h("div", { class: "guest-email-input" }, h("input", { type: "email", id: `guest-email-${index}`, maxLength: 100, class: {
                 'guest-email': true,
@@ -277,7 +289,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
                 default:
                     return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { label: label, name: key, id: key, type: field.type, defaultValue: defaultValue || '', requiredError: instance.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
             }
-        })), h("div", { key: 'f89d9ed23eca94e127aca472e8444336160a4a49', class: "cta" }, h("button-component", { key: 'e1de4364cd5d351f23499ab82bf4d444185a47cc', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '1b1a422766e53e8e1aec7d31db9c2406afec3da1', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: '68c249ef1ca7dad8b6217d86662dd195ec77b016', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: 'de2c7d09c9203409e7d92b80f6901b5099ab1163', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
+        })), h("div", { key: '9229b464ad25565982e59b7d01fe5f2204e1d10e', class: "cta" }, h("button-component", { key: '877d574a7a39f960c5cddff0f84d3d0454bfc96c', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '9436fe8276b9da6baa608695b1d0dceb03c865ae', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: '48814874005b24b2f21a8cdbd863194a563f171f', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: '975aba7f10d24850113f7fcfe1e11abbb15ac401', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -289,6 +301,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
         "bookingInfo": [16],
         "eventInfo": [16],
         "configSettings": [16],
+        "themeConfig": [8, "theme-config"],
         "name": [32],
         "email": [32],
         "guestEmails": [32],
@@ -330,6 +343,7 @@ __decorate([
                 debug('nylas-booking-form', 'bookingFormError', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

package/dist/components/nylas-booking-form2.js.map

@@ -1 +1 @@
-{"file":"nylas-booking-form2.js","mappings":"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","names":["sanitizeHtml","i18next"],"sources":["src/components/scheduler/nylas-booking-form/nylas-booking-form.scss?tag=nylas-booking-form&encapsulation=shadow","src/components/scheduler/nylas-booking-form/nylas-booking-form.tsx"],"sourcesContent":["@import '../../../common/mixins/inputs.scss';\n@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  height: 100%;\n  @include default-css-variables;\n}\n\n.nylas-booking-form {\n  width: 100%;\n  padding: 1.5rem;\n  box-sizing: border-box;\n  height: 450px;\n  overflow-y: auto;\n  height: 100%;\n}\n\nform {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n}\n\nsp-textfield {\n  --spectrum-corner-radius-100: var(--nylas-border-radius-2x); // Set guest input radius\n  --spectrum-textfield-border-color: var(--nylas-base-300);\n  position: relative;\n  width: 100%;\n  height: 48px;\n  margin-bottom: 16px;\n  color: var(--nylas-base-500);\n}\n\n.cta {\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n\n  @media #{$mobile} {\n    grid-template-columns: 1fr;\n  }\n\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: 14px;\n  box-sizing: border-box;\n  border-top: 1px solid var(--nylas-base-200);\n}\n\n.input-wrapper {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  margin-bottom: 1rem;\n\n  input::placeholder {\n    color: var(--nylas-base-300);\n  }\n\n  label,\n  input {\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n  }\n\n  .help-text {\n    margin: 0;\n    color: var(--nylas-error);\n  }\n}\n\n.button-wrapper {\n  width: 100%;\n  align-items: flex-start;\n  height: max-content;\n  position: relative;\n}\n\n.button-content {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\nsp-infield-button {\n  --spectrum-infield-button-background-color: transparent;\n  --spectrum-infield-button-background-color-hover: transparent;\n  --spectrum-infield-button-background-color-active: transparent;\n  --spectrum-infield-button-border-color: transparent;\n  --spectrum-infield-button-border-width: 1px;\n  --spectrum-infield-button-border-radius: 0;\n  color: var(--nylas-base-600);\n  background: transparent;\n  border: none;\n  outline: 1px solid var(--nylas-base-300);\n  border-radius: 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;\n  height: 52px;\n  width: 52px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  sp-icon-cross300 {\n    color: var(--nylas-base-600);\n  }\n\n  &.error {\n    border-width: 2px;\n    border-color: var(--nylas-error);\n  }\n}\n\ninput[type='text'],\ninput[type='email'] {\n  @include textfield;\n\n  &.guest-email {\n    color: var(--nylas-base-900);\n    padding-right: 52px; // Infield button width\n  }\n}\n\nlabel {\n  @include input-label;\n}\n\nbutton-component.remove-guest {\n  position: absolute;\n  height: 51px;\n  right: 0;\n\n  &.error {\n    button {\n      border-color: var(--nylas-error);\n    }\n  }\n\n  button {\n    height: inherit;\n    border-top-left-radius: initial;\n    border-bottom-left-radius: initial;\n    border: none !important;\n    border-left: 1px solid var(--nylas-base-300) !important;\n\n    &:hover,\n    &:focus {\n      outline: 1px solid var(--nylas-primary) !important;\n      color: var(--nylas-primary);\n    }\n  }\n}\n\nbutton-component.back {\n  button {\n    --dot-color: var(--nylas-base-800);\n  }\n}\n\n.guest-email-input {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '@/connector/nylas-scheduler-connector';\nimport type { ConfigSettings } from '@/stores/scheduler-store';\nimport type { NylasSchedulerBookingDataWithFlatFields, NylasSchedulerBookingData, NylasEvent } from '@/common/types';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug, sanitize } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\nimport i18next from '@/utils/i18n';\n\nconst emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;\n\n/**\n * The `nylas-booking-form` component is a UI component that allows users to book an event.\n *\n * The booking form component.\n * @part nbf - The booking form host.\n * @part nbf__input-textfield - The input textfield.\n * @part nbf__button-ghost - The ghost button.\n * @part nbf__button-outline - The outline button.\n * @part nbf__button-primary - The primary button.\n * @part nbf__input-wrapper - The input wrapper.\n * @part nbf__checkbox-component - The checkbox component.\n * @part nbf__radio-button-group - The radio button group.\n * @part nbf__textarea-component - The textarea component.\n * @part nbf__dropdown - The dropdown component.\n * @part nbf__dropdown-button - The dropdown button.\n * @part nbf__dropdown-content - The dropdown content.\n *\n */\n@Component({\n  tag: 'nylas-booking-form',\n  styleUrl: 'nylas-booking-form.scss',\n  shadow: true,\n})\nexport class NylasBookingForm {\n  /**\n   * The host element\n   */\n  @Element() readonly host!: HTMLElement;\n\n  /**\n   * @standalone\n   * The loading state.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The booking info.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * @standalone\n   * The booked event (Used to track if a booking is created in an eventOverride).\n   */\n  @Prop() readonly eventInfo?: NylasEvent;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * This event is fired when the name is changed.\n   */\n  @Event() nameChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the email is changed.\n   */\n  @Event() emailChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the cancel button is clicked.\n   */\n  @Event() backButtonClicked!: EventEmitter<boolean>;\n\n  /**\n   * This event is fired when the book button is clicked and the form validation is complete and successful.\n   * This event is fired before the booking request is sent.\n   */\n  @Event() detailsConfirmed!: EventEmitter<NylasSchedulerBookingDataWithFlatFields>;\n\n  /**\n   * This event is fired when an error occurs in the booking form validation.\n   */\n  @Event() bookingFormError!: EventEmitter<Partial<Notification>>;\n\n  /**\n   * This event is fired immediately after the book button is clicked.\n   * The booking form validation is not complete at this point.\n   */\n  @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n  /**\n   * The name of the user.\n   */\n  @State() name: string = '';\n\n  /**\n   * The email address of the user.\n   */\n  @State() email: string = '';\n\n  /**\n   * The guests of the user.\n   */\n  @State() guestEmails: string[] = [];\n\n  /**\n   * Guest email input errors.\n   */\n  @State() guestEmailErrors: { [key: number]: string } = {};\n\n  /**\n   * State to check if name is valid.\n   */\n  @State() isNameValid: boolean = true;\n\n  /**\n   * State to check if email is valid.\n   */\n  @State() isEmailValid: boolean = true;\n\n  @State() additionalFields?: Record<string, string> = {};\n\n  /**\n   * Error message state.\n   */\n  @State() validationError: { name: string; email: string } = { name: '', email: '' };\n\n  @State() backButtonLoading: boolean = false;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {\n    debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);\n    if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {\n      this.name = this.bookingInfo.primaryParticipant?.name;\n      this.email = this.bookingInfo.primaryParticipant?.email;\n    }\n  }\n\n  @Watch('bookingInfo')\n  bookingInfoChangedHandler(newValue: NylasSchedulerBookingData | undefined) {\n    if (newValue && newValue.primaryParticipant) {\n      this.name = newValue.primaryParticipant.name;\n      this.email = newValue.primaryParticipant.email;\n    }\n  }\n\n  /**\n   * Change the name.\n   * @param name The name to select.\n   */\n  changeName(name: string) {\n    // Reset the validation error\n    this.isNameValid = true;\n    this.validationError.name = '';\n\n    this.name = sanitize(name);\n    this.nameChanged.emit(name);\n  }\n\n  /**\n   * Change the email.\n   * @param email The email to select.\n   */\n  changeEmail(email: string) {\n    // Reset the validation error\n    this.isEmailValid = true;\n    this.validationError.email = '';\n\n    this.email = sanitizeHtml(email);\n    this.emailChanged.emit(email);\n  }\n\n  resetGuestEmailError(guestIndex: number) {\n    const errors = { ...this.guestEmailErrors };\n    delete errors[guestIndex];\n    this.guestEmailErrors = { ...errors };\n  }\n\n  /**\n   * Handle guest emails changed.\n   */\n  handleGuestChange = (guestIndex: number, email: string) => {\n    // Reset the validation error\n    this.resetGuestEmailError(guestIndex);\n    const guests = [...this.guestEmails];\n    guests[guestIndex] = sanitizeHtml(email);\n    this.guestEmails = [...guests];\n  };\n\n  /**\n   * Handle guest input blur.\n   */\n  handleGuestBlur = (guestIndex: number, email: string) => {\n    this.resetGuestEmailError(guestIndex);\n\n    if (email === '') {\n      this.guestEmailErrors[guestIndex] = i18next.t('fieldRequired', { field: i18next.t('email') });\n      return;\n    }\n    if (!emailRegex.test(email)) {\n      this.guestEmailErrors[guestIndex] = i18next.t('invalidInputFormat', { field: i18next.t('email') });\n      return;\n    }\n    this.handleGuestChange(guestIndex, email);\n  };\n\n  /**\n   * Handle add guest button clicked.\n   */\n  addGuestButtonClickedHandler = e => {\n    e.preventDefault();\n    this.guestEmails = [...this.guestEmails, ''];\n  };\n\n  /**\n   * Handle remove guest button clicked.\n   */\n  removeGuestButtonClickHandler = (e: Event, guestIndex: number) => {\n    e.preventDefault();\n    this.resetGuestEmailError(guestIndex);\n\n    const guests = [...this.guestEmails];\n    guests.splice(guestIndex, 1);\n    this.guestEmails = [...guests];\n  };\n\n  /**\n   * Handle back button clicked.\n   */\n  handleBackButtonClicked = e => {\n    e.preventDefault();\n    this.backButtonLoading = true;\n    this.backButtonClicked.emit();\n  };\n\n  /**\n   * Handle book button clicked.\n   */\n  bookButtonClickedHandler = async (e: Event) => {\n    e.preventDefault();\n    const formSubmittedEvent = this.bookingFormSubmitted.emit();\n    if (formSubmittedEvent.defaultPrevented) {\n      return;\n    }\n\n    debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);\n    const name = this.name || this.bookingInfo?.primaryParticipant?.name;\n    const email = this.email || this.bookingInfo?.primaryParticipant?.email;\n\n    if (!name || name === '') {\n      this.isNameValid = false;\n      this.validationError.name = i18next.t('fieldRequired', { field: i18next.t('name') }) || 'Name is required';\n      this.bookingFormError.emit({\n        title: 'Booking form error',\n        description: 'Name is required',\n      });\n      return;\n    }\n    if (!email || email === '') {\n      this.isEmailValid = false;\n      this.validationError.email = i18next.t('fieldRequired', { field: i18next.t('email') }) || 'Email is required';\n      this.bookingFormError.emit({\n        title: 'Booking form error',\n        description: 'Email is required',\n      });\n      return;\n    }\n    if (!emailRegex.test(email)) {\n      this.isEmailValid = false;\n      this.validationError.email = i18next.t('invalidInputFormat', { field: i18next.t('email') });\n      this.bookingFormError.emit({\n        title: 'Booking form error',\n        description: i18next.t('invalidInputFormat', { field: i18next.t('email') }) || 'Invalid email',\n      });\n      return;\n    }\n\n    let guests: NylasSchedulerBookingParticipant[] = [];\n    if (this.guestEmails.length > 0) {\n      let hasError = false;\n      this.guestEmails.forEach((email: string, i: number) => {\n        if (email === '') {\n          hasError = true;\n          this.guestEmailErrors = { ...this.guestEmailErrors, [i]: i18next.t('fieldRequired', { field: i18next.t('email') }) };\n        } else if (!emailRegex.test(email)) {\n          hasError = true;\n          this.guestEmailErrors = { ...this.guestEmailErrors, [i]: i18next.t('invalidInputFormat', { field: i18next.t('email') }) };\n        }\n      });\n      if (hasError) {\n        this.bookingFormError.emit({\n          title: 'Booking form error',\n          description: i18next.t('invalidInputFormat', { field: i18next.t('guestEmail') }) || 'Invalid guest email',\n        });\n        return;\n      }\n      guests = this.guestEmails.map((email: string) => ({ name: email.trim(), email: email.trim() }));\n    } else if (this.bookingInfo?.guests) {\n      guests = this.bookingInfo?.guests;\n    }\n\n    const bookingInfoAdditionalFields = {};\n    if (this.bookingInfo?.additionalFields) {\n      const configAdditionalFields = this.configSettings?.scheduler?.additional_fields || {};\n      Object.entries(this.bookingInfo.additionalFields).forEach(([key, obj]) => {\n        if (key in configAdditionalFields) {\n          bookingInfoAdditionalFields[key] = obj.value;\n        }\n      });\n    }\n\n    this.detailsConfirmed.emit({\n      primaryParticipant: {\n        name: name,\n        email: email,\n      },\n      guests: guests,\n      additionalFields: { ...bookingInfoAdditionalFields, ...this.additionalFields },\n    });\n  };\n\n  updateAdditionalFields = (name: string, value: string) => {\n    if (this.additionalFields) {\n      this.additionalFields[name] = value;\n    }\n  };\n\n  @Listen('nylasFormInputChanged')\n  nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string; error: string; label: string; type?: string }>) {\n    switch (event.detail.name) {\n      case 'name':\n        this.changeName(event.detail.value);\n        break;\n      case 'email':\n        this.changeEmail(event.detail.value);\n        break;\n      default:\n        if (event.detail.error) {\n          this.bookingFormError.emit({\n            title: 'Booking form error',\n            description: event.detail.error,\n          });\n          return;\n        }\n        this.updateAdditionalFields(event.detail.name, event.detail.value);\n        break;\n    }\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  selectOptionChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; error?: string }>) {\n    if (event.detail.error) {\n      this.bookingFormError.emit({\n        title: 'Booking form error',\n        description: event.detail.error,\n      });\n      return;\n    }\n    this.updateAdditionalFields(event.detail.name, event.detail.value);\n  }\n\n  @Listen('nylasFormSwitchToggled')\n  switchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n    this.updateAdditionalFields(event.detail.name, event.detail.checked ? 'true' : 'false');\n  }\n\n  @Listen('nylasFormCheckboxToggled')\n  checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n    this.updateAdditionalFields(event.detail.name, event.detail.checked ? 'true' : 'false');\n  }\n\n  @Listen('nylasFormRadioChanged')\n  radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n    this.updateAdditionalFields(event.detail.name, event.detail.value);\n  }\n\n  @Listen('nylasFormDropdownDefaultSelected')\n  dropdownDefaultSelectedHandler(event: CustomEvent<{ value: string; name: string; label: string; error?: string }>) {\n    this.updateAdditionalFields(event.detail.name, event.detail.value);\n  }\n\n  @RegisterComponent<NylasBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booking-form',\n    stateToProps: new Map([\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.eventInfo', 'eventInfo'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n      },\n      nameChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setParticipantName(event.detail);\n      },\n      emailChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);\n      },\n      detailsConfirmed: async (event: CustomEvent<NylasSchedulerBookingDataWithFlatFields>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booking-form', 'detailsConfirmed', event.detail);\n      },\n      bookingFormSubmitted: async (event: CustomEvent<void>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booking-form', 'bookingFormSubmitted', event.detail);\n      },\n      bookingFormError: async (event: CustomEvent<Partial<Notification>>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booking-form', 'bookingFormError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <form onSubmit={e => this.bookButtonClickedHandler(e)} noValidate>\n          <div class=\"nylas-booking-form\" part=\"nbf\">\n            <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n              <input-component\n                label={i18next.t('name')}\n                name=\"name\"\n                id=\"name\"\n                defaultValue={this.bookingInfo?.primaryParticipant?.name || this.name}\n                placeholder={i18next.t('namePlaceholder')}\n                type=\"text\"\n                required={true}\n                requiredError={i18next.t('fieldRequired', { field: i18next.t('name') })}\n                patternError={i18next.t('invalidInputFormat', { field: i18next.t('name') })}\n                part=\"nbf__input-textfield\"\n              />\n            </div>\n            <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n              <input-component\n                label={i18next.t('email')}\n                name=\"email\"\n                id=\"email\"\n                pattern={emailRegex}\n                defaultValue={this.bookingInfo?.primaryParticipant?.email || this.email}\n                placeholder={i18next.t('emailPlaceholder')}\n                type=\"email\"\n                required={true}\n                requiredError={i18next.t('fieldRequired', { field: i18next.t('email') })}\n                patternError={i18next.t('invalidInputFormat', { field: i18next.t('email') })}\n                part=\"nbf__input-textfield\"\n              />\n            </div>\n            {this.configSettings?.scheduler?.hide_additional_guests !== true && (\n              <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                {this.guestEmails.map((email, index) => (\n                  <div class=\"input-wrapper button-wrapper\">\n                    <label\n                      class={{\n                        error: !!this.guestEmailErrors[index],\n                      }}\n                    >\n                      {i18next.t('guestEmail')}\n                    </label>\n                    <div class=\"guest-email-input\">\n                      <input\n                        type=\"email\"\n                        id={`guest-email-${index}`}\n                        maxLength={100}\n                        class={{\n                          'guest-email': true,\n                          'error': !!this.guestEmailErrors[index],\n                        }}\n                        placeholder={i18next.t('guestEmailPlaceholder')}\n                        value={email}\n                        data-index={index}\n                        part=\"nbf__input-textfield\"\n                        onBlur={(e: Event) => this.handleGuestBlur(index, (e.target as HTMLInputElement)?.value)}\n                        onInput={(e: Event) => this.handleGuestChange(index, (e.target as HTMLInputElement)?.value)}\n                      ></input>\n                      <button-component\n                        variant=\"basic\"\n                        tooltip=\"Remove guest\"\n                        onClick={(e: Event) => this.removeGuestButtonClickHandler(e, index)}\n                        class={{\n                          'remove-guest': true,\n                          'error': !!this.guestEmailErrors[index],\n                        }}\n                      >\n                        <close-icon />\n                      </button-component>\n                    </div>\n                    <p class=\"help-text\">{this.guestEmailErrors[index]}</p>\n                  </div>\n                ))}\n                <button-component class=\"add-guest\" variant=\"invisible\" part=\"nbf__button-ghost\" onClick={e => this.addGuestButtonClickedHandler(e)}>\n                  <div class=\"button-content\">\n                    <add-circle-icon slot=\"icon\"></add-circle-icon>\n                    {this.guestEmails.length > 0 ? `${i18next.t('addAnotherGuest')}` : `${i18next.t('addGuest')}`}\n                  </div>\n                </button-component>\n              </div>\n            )}\n            {Object.entries(\n              (this.configSettings?.scheduler?.additional_fields || {}) as Record<\n                string,\n                {\n                  required: boolean;\n                  type: 'email' | 'text' | 'phone_number' | 'dropdown' | 'checkbox' | 'radio_button' | 'multi_line_text';\n                  order: number;\n                  options?: string[];\n                  label: string;\n                }\n              >,\n            )\n              ?.sort((a, b) => a[1].order - b[1].order)\n              .map(x => {\n                const field = x[1];\n                const label = field.label;\n                const key = x[0];\n                const defaultValue = this.bookingInfo?.additionalFields?.[key]?.value || '';\n\n                switch (field.type) {\n                  case 'dropdown':\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <select-dropdown\n                          label={label}\n                          name={key}\n                          id={key}\n                          withSearch={false}\n                          defaultSelectedOption={defaultValue ? { value: defaultValue, label: defaultValue } : undefined}\n                          options={field.options?.map(option => ({ value: option, label: option }))}\n                          required={field.required}\n                          exportparts=\"sd_dropdown: nbf__dropdown, sd_dropdown-button: nbf__dropdown-button, sd_dropdown-content: nbf__dropdown-content\"\n                        />\n                      </div>\n                    );\n                  case 'checkbox':\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <checkbox-component label={label} name={key} id={key} checked={defaultValue === 'true'} required={field.required} part=\"nbf__checkbox-component\" />\n                      </div>\n                    );\n                  case 'radio_button':\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <radio-button-group\n                          label={label}\n                          name={key}\n                          id={key}\n                          defaultSelectedValue={defaultValue || field.options?.[0] || ''}\n                          options={field.options?.map(option => ({ value: option, label: option }))}\n                          required={field.required}\n                          part=\"nbf__radio-button-group\"\n                        />\n                      </div>\n                    );\n                  case 'multi_line_text':\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <textarea-component label={label} defaultValue={defaultValue} name={key} id={key} required={field.required} part=\"nbf__textarea-component\" />\n                      </div>\n                    );\n                  default:\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <input-component\n                          label={label}\n                          name={key}\n                          id={key}\n                          type={field.type}\n                          defaultValue={defaultValue || ''}\n                          requiredError={i18next.t('fieldRequired', { field: label })}\n                          required={field.required}\n                          part=\"nbf__input-textfield\"\n                        />\n                      </div>\n                    );\n                }\n              })}\n            {/* <slot name=\"custom-booking-form\"></slot> */}\n          </div>\n          <div class=\"cta\">\n            <button-component variant={'basic'} class=\"back\" part=\"nbf__button-outline\" isLoading={this.backButtonLoading && this.isLoading} onClick={this.handleBackButtonClicked}>\n              <slot name=\"booking-form-back-label\">{`${i18next.t('backButton')}`}</slot>\n            </button-component>\n            <button-component variant={'primary'} isLoading={!this.backButtonLoading && this.isLoading} disabled={this.isLoading} part=\"nbf__button-primary\" type=\"submit\">\n              <slot name=\"booking-form-book-label\">{`${i18next.t('bookNowButton')}`}</slot>\n            </button-component>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-booking-form2.js","mappings":"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","names":["sanitizeHtml","i18next"],"sources":["src/components/scheduler/nylas-booking-form/nylas-booking-form.scss?tag=nylas-booking-form&encapsulation=shadow","src/components/scheduler/nylas-booking-form/nylas-booking-form.tsx"],"sourcesContent":["@import '../../../common/mixins/inputs.scss';\n@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  height: 100%;\n}\n\n.nylas-booking-form {\n  width: 100%;\n  padding: 1.5rem;\n  box-sizing: border-box;\n  height: 450px;\n  overflow-y: auto;\n  height: 100%;\n}\n\nform {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n}\n\nsp-textfield {\n  --spectrum-corner-radius-100: var(--nylas-border-radius-2x); // Set guest input radius\n  --spectrum-textfield-border-color: var(--nylas-base-300);\n  position: relative;\n  width: 100%;\n  height: 48px;\n  margin-bottom: 16px;\n  color: var(--nylas-base-500);\n}\n\n.cta {\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n\n  @media #{$mobile} {\n    grid-template-columns: 1fr;\n  }\n\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: 14px;\n  box-sizing: border-box;\n  border-top: 1px solid var(--nylas-base-200);\n}\n\n.input-wrapper {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  margin-bottom: 1rem;\n\n  input::placeholder {\n    color: var(--nylas-base-300);\n  }\n\n  label,\n  input {\n    font-family: var(--nylas-font-family);\n    font-size: 16px;\n  }\n\n  .help-text {\n    margin: 0;\n    color: var(--nylas-error);\n  }\n}\n\n.button-wrapper {\n  width: 100%;\n  align-items: flex-start;\n  height: max-content;\n  position: relative;\n}\n\n.button-content {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\nsp-infield-button {\n  --spectrum-infield-button-background-color: transparent;\n  --spectrum-infield-button-background-color-hover: transparent;\n  --spectrum-infield-button-background-color-active: transparent;\n  --spectrum-infield-button-border-color: transparent;\n  --spectrum-infield-button-border-width: 1px;\n  --spectrum-infield-button-border-radius: 0;\n  color: var(--nylas-base-600);\n  background: transparent;\n  border: none;\n  outline: 1px solid var(--nylas-base-300);\n  border-radius: 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;\n  height: 52px;\n  width: 52px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  sp-icon-cross300 {\n    color: var(--nylas-base-600);\n  }\n\n  &.error {\n    border-width: 2px;\n    border-color: var(--nylas-error);\n  }\n}\n\ninput[type='text'],\ninput[type='email'] {\n  @include textfield;\n\n  &.guest-email {\n    color: var(--nylas-base-900);\n    padding-right: 52px; // Infield button width\n  }\n}\n\nlabel {\n  @include input-label;\n}\n\nbutton-component.remove-guest {\n  position: absolute;\n  height: 51px;\n  right: 0;\n\n  &.error {\n    button {\n      border-color: var(--nylas-error);\n    }\n  }\n\n  button {\n    height: inherit;\n    border-top-left-radius: initial;\n    border-bottom-left-radius: initial;\n    border: none !important;\n    border-left: 1px solid var(--nylas-base-300) !important;\n\n    &:hover,\n    &:focus {\n      outline: 1px solid var(--nylas-primary) !important;\n      color: var(--nylas-primary);\n    }\n  }\n}\n\nbutton-component.back {\n  button {\n    --dot-color: var(--nylas-base-800);\n  }\n}\n\n.guest-email-input {\n  position: relative;\n  display: flex;\n  width: 100%;\n}","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '@/connector/nylas-scheduler-connector';\nimport type { ConfigSettings } from '@/stores/scheduler-store';\nimport type { NylasSchedulerBookingDataWithFlatFields, NylasSchedulerBookingData, NylasEvent } from '@/common/types';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug, sanitize } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant, ThemeConfig } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\nimport i18next from '@/utils/i18n';\n\nconst emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;\n\n/**\n * The `nylas-booking-form` component is a UI component that allows users to book an event.\n *\n * The booking form component.\n * @part nbf - The booking form host.\n * @part nbf__input-textfield - The input textfield.\n * @part nbf__button-ghost - The ghost button.\n * @part nbf__button-outline - The outline button.\n * @part nbf__button-primary - The primary button.\n * @part nbf__input-wrapper - The input wrapper.\n * @part nbf__checkbox-component - The checkbox component.\n * @part nbf__radio-button-group - The radio button group.\n * @part nbf__textarea-component - The textarea component.\n * @part nbf__dropdown - The dropdown component.\n * @part nbf__dropdown-button - The dropdown button.\n * @part nbf__dropdown-content - The dropdown content.\n *\n */\n@Component({\n  tag: 'nylas-booking-form',\n  styleUrl: 'nylas-booking-form.scss',\n  shadow: true,\n})\nexport class NylasBookingForm {\n  /**\n   * The host element\n   */\n  @Element() readonly host!: HTMLNylasBookingFormElement;\n\n  /**\n   * @standalone\n   * The loading state.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The booking info.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * @standalone\n   * The booked event (Used to track if a booking is created in an eventOverride).\n   */\n  @Prop() readonly eventInfo?: NylasEvent;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * This event is fired when the name is changed.\n   */\n  @Event() nameChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the email is changed.\n   */\n  @Event() emailChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the cancel button is clicked.\n   */\n  @Event() backButtonClicked!: EventEmitter<boolean>;\n\n  /**\n   * This event is fired when the book button is clicked and the form validation is complete and successful.\n   * This event is fired before the booking request is sent.\n   */\n  @Event() detailsConfirmed!: EventEmitter<NylasSchedulerBookingDataWithFlatFields>;\n\n  /**\n   * This event is fired when an error occurs in the booking form validation.\n   */\n  @Event() bookingFormError!: EventEmitter<Partial<Notification>>;\n\n  /**\n   * This event is fired immediately after the book button is clicked.\n   * The booking form validation is not complete at this point.\n   */\n  @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n  /**\n   * The name of the user.\n   */\n  @State() name: string = '';\n\n  /**\n   * The email address of the user.\n   */\n  @State() email: string = '';\n\n  /**\n   * The guests of the user.\n   */\n  @State() guestEmails: string[] = [];\n\n  /**\n   * Guest email input errors.\n   */\n  @State() guestEmailErrors: { [key: number]: string } = {};\n\n  /**\n   * State to check if name is valid.\n   */\n  @State() isNameValid: boolean = true;\n\n  /**\n   * State to check if email is valid.\n   */\n  @State() isEmailValid: boolean = true;\n\n  @State() additionalFields?: Record<string, string> = {};\n\n  /**\n   * Error message state.\n   */\n  @State() validationError: { name: string; email: string } = { name: '', email: '' };\n\n  @State() backButtonLoading: boolean = false;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {\n    debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);\n  }\n\n  componentDidLoad() {\n    debug('nylas-booking-form', 'componentDidLoad', this.bookingInfo);\n    if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {\n      this.name = this.bookingInfo.primaryParticipant?.name;\n      this.email = this.bookingInfo.primaryParticipant?.email;\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  @Watch('bookingInfo')\n  bookingInfoChangedHandler(newValue: NylasSchedulerBookingData | undefined) {\n    if (newValue && newValue.primaryParticipant) {\n      this.name = newValue.primaryParticipant.name;\n      this.email = newValue.primaryParticipant.email;\n    }\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  /**\n   * Change the name.\n   * @param name The name to select.\n   */\n  changeName(name: string) {\n    // Reset the validation error\n    this.isNameValid = true;\n    this.validationError.name = '';\n\n    this.name = sanitize(name);\n    this.nameChanged.emit(name);\n  }\n\n  /**\n   * Change the email.\n   * @param email The email to select.\n   */\n  changeEmail(email: string) {\n    // Reset the validation error\n    this.isEmailValid = true;\n    this.validationError.email = '';\n\n    this.email = sanitizeHtml(email);\n    this.emailChanged.emit(email);\n  }\n\n  resetGuestEmailError(guestIndex: number) {\n    const errors = { ...this.guestEmailErrors };\n    delete errors[guestIndex];\n    this.guestEmailErrors = { ...errors };\n  }\n\n  /**\n   * Handle guest emails changed.\n   */\n  handleGuestChange = (guestIndex: number, email: string) => {\n    // Reset the validation error\n    this.resetGuestEmailError(guestIndex);\n    const guests = [...this.guestEmails];\n    guests[guestIndex] = sanitizeHtml(email);\n    this.guestEmails = [...guests];\n  };\n\n  /**\n   * Handle guest input blur.\n   */\n  handleGuestBlur = (guestIndex: number, email: string) => {\n    this.resetGuestEmailError(guestIndex);\n\n    if (email === '') {\n      this.guestEmailErrors[guestIndex] = i18next.t('fieldRequired', { field: i18next.t('email') });\n      return;\n    }\n    if (!emailRegex.test(email)) {\n      this.guestEmailErrors[guestIndex] = i18next.t('invalidInputFormat', { field: i18next.t('email') });\n      return;\n    }\n    this.handleGuestChange(guestIndex, email);\n  };\n\n  /**\n   * Handle add guest button clicked.\n   */\n  addGuestButtonClickedHandler = e => {\n    e.preventDefault();\n    this.guestEmails = [...this.guestEmails, ''];\n  };\n\n  /**\n   * Handle remove guest button clicked.\n   */\n  removeGuestButtonClickHandler = (e: Event, guestIndex: number) => {\n    e.preventDefault();\n    this.resetGuestEmailError(guestIndex);\n\n    const guests = [...this.guestEmails];\n    guests.splice(guestIndex, 1);\n    this.guestEmails = [...guests];\n  };\n\n  /**\n   * Handle back button clicked.\n   */\n  handleBackButtonClicked = e => {\n    e.preventDefault();\n    this.backButtonLoading = true;\n    this.backButtonClicked.emit();\n  };\n\n  /**\n   * Handle book button clicked.\n   */\n  bookButtonClickedHandler = async (e: Event) => {\n    e.preventDefault();\n    const formSubmittedEvent = this.bookingFormSubmitted.emit();\n    if (formSubmittedEvent.defaultPrevented) {\n      return;\n    }\n\n    debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);\n    const name = this.name || this.bookingInfo?.primaryParticipant?.name;\n    const email = this.email || this.bookingInfo?.primaryParticipant?.email;\n\n    if (!name || name === '') {\n      this.isNameValid = false;\n      this.validationError.name = i18next.t('fieldRequired', { field: i18next.t('name') }) || 'Name is required';\n      this.bookingFormError.emit({\n        title: 'Booking form error',\n        description: 'Name is required',\n      });\n      return;\n    }\n    if (!email || email === '') {\n      this.isEmailValid = false;\n      this.validationError.email = i18next.t('fieldRequired', { field: i18next.t('email') }) || 'Email is required';\n      this.bookingFormError.emit({\n        title: 'Booking form error',\n        description: 'Email is required',\n      });\n      return;\n    }\n    if (!emailRegex.test(email)) {\n      this.isEmailValid = false;\n      this.validationError.email = i18next.t('invalidInputFormat', { field: i18next.t('email') });\n      this.bookingFormError.emit({\n        title: 'Booking form error',\n        description: i18next.t('invalidInputFormat', { field: i18next.t('email') }) || 'Invalid email',\n      });\n      return;\n    }\n\n    let guests: NylasSchedulerBookingParticipant[] = [];\n    if (this.guestEmails.length > 0) {\n      let hasError = false;\n      this.guestEmails.forEach((email: string, i: number) => {\n        if (email === '') {\n          hasError = true;\n          this.guestEmailErrors = { ...this.guestEmailErrors, [i]: i18next.t('fieldRequired', { field: i18next.t('email') }) };\n        } else if (!emailRegex.test(email)) {\n          hasError = true;\n          this.guestEmailErrors = { ...this.guestEmailErrors, [i]: i18next.t('invalidInputFormat', { field: i18next.t('email') }) };\n        }\n      });\n      if (hasError) {\n        this.bookingFormError.emit({\n          title: 'Booking form error',\n          description: i18next.t('invalidInputFormat', { field: i18next.t('guestEmail') }) || 'Invalid guest email',\n        });\n        return;\n      }\n      guests = this.guestEmails.map((email: string) => ({ name: email.trim(), email: email.trim() }));\n    } else if (this.bookingInfo?.guests) {\n      guests = this.bookingInfo?.guests;\n    }\n\n    const bookingInfoAdditionalFields = {};\n    if (this.bookingInfo?.additionalFields) {\n      const configAdditionalFields = this.configSettings?.scheduler?.additional_fields || {};\n      Object.entries(this.bookingInfo.additionalFields).forEach(([key, obj]) => {\n        if (key in configAdditionalFields) {\n          bookingInfoAdditionalFields[key] = obj.value;\n        }\n      });\n    }\n\n    this.detailsConfirmed.emit({\n      primaryParticipant: {\n        name: name,\n        email: email,\n      },\n      guests: guests,\n      additionalFields: { ...bookingInfoAdditionalFields, ...this.additionalFields },\n    });\n  };\n\n  updateAdditionalFields = (name: string, value: string) => {\n    if (this.additionalFields) {\n      this.additionalFields[name] = value;\n    }\n  };\n\n  @Listen('nylasFormInputChanged')\n  nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string; error: string; label: string; type?: string }>) {\n    switch (event.detail.name) {\n      case 'name':\n        this.changeName(event.detail.value);\n        break;\n      case 'email':\n        this.changeEmail(event.detail.value);\n        break;\n      default:\n        if (event.detail.error) {\n          this.bookingFormError.emit({\n            title: 'Booking form error',\n            description: event.detail.error,\n          });\n          return;\n        }\n        this.updateAdditionalFields(event.detail.name, event.detail.value);\n        break;\n    }\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  selectOptionChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; error?: string }>) {\n    if (event.detail.error) {\n      this.bookingFormError.emit({\n        title: 'Booking form error',\n        description: event.detail.error,\n      });\n      return;\n    }\n    this.updateAdditionalFields(event.detail.name, event.detail.value);\n  }\n\n  @Listen('nylasFormSwitchToggled')\n  switchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n    this.updateAdditionalFields(event.detail.name, event.detail.checked ? 'true' : 'false');\n  }\n\n  @Listen('nylasFormCheckboxToggled')\n  checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n    this.updateAdditionalFields(event.detail.name, event.detail.checked ? 'true' : 'false');\n  }\n\n  @Listen('nylasFormRadioChanged')\n  radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n    this.updateAdditionalFields(event.detail.name, event.detail.value);\n  }\n\n  @Listen('nylasFormDropdownDefaultSelected')\n  dropdownDefaultSelectedHandler(event: CustomEvent<{ value: string; name: string; label: string; error?: string }>) {\n    this.updateAdditionalFields(event.detail.name, event.detail.value);\n  }\n\n  @RegisterComponent<NylasBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booking-form',\n    stateToProps: new Map([\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.eventInfo', 'eventInfo'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n      },\n      nameChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setParticipantName(event.detail);\n      },\n      emailChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);\n      },\n      detailsConfirmed: async (event: CustomEvent<NylasSchedulerBookingDataWithFlatFields>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booking-form', 'detailsConfirmed', event.detail);\n      },\n      bookingFormSubmitted: async (event: CustomEvent<void>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booking-form', 'bookingFormSubmitted', event.detail);\n      },\n      bookingFormError: async (event: CustomEvent<Partial<Notification>>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booking-form', 'bookingFormError', event.detail);\n      },\n    },\n    localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <form onSubmit={e => this.bookButtonClickedHandler(e)} noValidate>\n          <div class=\"nylas-booking-form\" part=\"nbf\">\n            <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n              <input-component\n                label={i18next.t('name')}\n                name=\"name\"\n                id=\"name\"\n                defaultValue={this.bookingInfo?.primaryParticipant?.name || this.name}\n                placeholder={i18next.t('namePlaceholder')}\n                type=\"text\"\n                required={true}\n                requiredError={i18next.t('fieldRequired', { field: i18next.t('name') })}\n                patternError={i18next.t('invalidInputFormat', { field: i18next.t('name') })}\n                part=\"nbf__input-textfield\"\n              />\n            </div>\n            <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n              <input-component\n                label={i18next.t('email')}\n                name=\"email\"\n                id=\"email\"\n                pattern={emailRegex}\n                defaultValue={this.bookingInfo?.primaryParticipant?.email || this.email}\n                placeholder={i18next.t('emailPlaceholder')}\n                type=\"email\"\n                required={true}\n                requiredError={i18next.t('fieldRequired', { field: i18next.t('email') })}\n                patternError={i18next.t('invalidInputFormat', { field: i18next.t('email') })}\n                part=\"nbf__input-textfield\"\n              />\n            </div>\n            {this.configSettings?.scheduler?.hide_additional_guests !== true && (\n              <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                {this.guestEmails.map((email, index) => (\n                  <div class=\"input-wrapper button-wrapper\">\n                    <label\n                      class={{\n                        error: !!this.guestEmailErrors[index],\n                      }}\n                    >\n                      {i18next.t('guestEmail')}\n                    </label>\n                    <div class=\"guest-email-input\">\n                      <input\n                        type=\"email\"\n                        id={`guest-email-${index}`}\n                        maxLength={100}\n                        class={{\n                          'guest-email': true,\n                          'error': !!this.guestEmailErrors[index],\n                        }}\n                        placeholder={i18next.t('guestEmailPlaceholder')}\n                        value={email}\n                        data-index={index}\n                        part=\"nbf__input-textfield\"\n                        onBlur={(e: Event) => this.handleGuestBlur(index, (e.target as HTMLInputElement)?.value)}\n                        onInput={(e: Event) => this.handleGuestChange(index, (e.target as HTMLInputElement)?.value)}\n                      ></input>\n                      <button-component\n                        variant=\"basic\"\n                        tooltip=\"Remove guest\"\n                        onClick={(e: Event) => this.removeGuestButtonClickHandler(e, index)}\n                        class={{\n                          'remove-guest': true,\n                          'error': !!this.guestEmailErrors[index],\n                        }}\n                      >\n                        <close-icon />\n                      </button-component>\n                    </div>\n                    <p class=\"help-text\">{this.guestEmailErrors[index]}</p>\n                  </div>\n                ))}\n                <button-component class=\"add-guest\" variant=\"invisible\" part=\"nbf__button-ghost\" onClick={e => this.addGuestButtonClickedHandler(e)}>\n                  <div class=\"button-content\">\n                    <add-circle-icon slot=\"icon\"></add-circle-icon>\n                    {this.guestEmails.length > 0 ? `${i18next.t('addAnotherGuest')}` : `${i18next.t('addGuest')}`}\n                  </div>\n                </button-component>\n              </div>\n            )}\n            {Object.entries(\n              (this.configSettings?.scheduler?.additional_fields || {}) as Record<\n                string,\n                {\n                  required: boolean;\n                  type: 'email' | 'text' | 'phone_number' | 'dropdown' | 'checkbox' | 'radio_button' | 'multi_line_text';\n                  order: number;\n                  options?: string[];\n                  label: string;\n                }\n              >,\n            )\n              ?.sort((a, b) => a[1].order - b[1].order)\n              .map(x => {\n                const field = x[1];\n                const label = field.label;\n                const key = x[0];\n                const defaultValue = this.bookingInfo?.additionalFields?.[key]?.value || '';\n\n                switch (field.type) {\n                  case 'dropdown':\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <select-dropdown\n                          label={label}\n                          name={key}\n                          id={key}\n                          withSearch={false}\n                          defaultSelectedOption={defaultValue ? { value: defaultValue, label: defaultValue } : undefined}\n                          options={field.options?.map(option => ({ value: option, label: option }))}\n                          required={field.required}\n                          exportparts=\"sd_dropdown: nbf__dropdown, sd_dropdown-button: nbf__dropdown-button, sd_dropdown-content: nbf__dropdown-content\"\n                        />\n                      </div>\n                    );\n                  case 'checkbox':\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <checkbox-component label={label} name={key} id={key} checked={defaultValue === 'true'} required={field.required} part=\"nbf__checkbox-component\" />\n                      </div>\n                    );\n                  case 'radio_button':\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <radio-button-group\n                          label={label}\n                          name={key}\n                          id={key}\n                          defaultSelectedValue={defaultValue || field.options?.[0] || ''}\n                          options={field.options?.map(option => ({ value: option, label: option }))}\n                          required={field.required}\n                          part=\"nbf__radio-button-group\"\n                        />\n                      </div>\n                    );\n                  case 'multi_line_text':\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <textarea-component label={label} defaultValue={defaultValue} name={key} id={key} required={field.required} part=\"nbf__textarea-component\" />\n                      </div>\n                    );\n                  default:\n                    return (\n                      <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n                        <input-component\n                          label={label}\n                          name={key}\n                          id={key}\n                          type={field.type}\n                          defaultValue={defaultValue || ''}\n                          requiredError={i18next.t('fieldRequired', { field: label })}\n                          required={field.required}\n                          part=\"nbf__input-textfield\"\n                        />\n                      </div>\n                    );\n                }\n              })}\n            {/* <slot name=\"custom-booking-form\"></slot> */}\n          </div>\n          <div class=\"cta\">\n            <button-component variant={'basic'} class=\"back\" part=\"nbf__button-outline\" isLoading={this.backButtonLoading && this.isLoading} onClick={this.handleBackButtonClicked}>\n              <slot name=\"booking-form-back-label\">{`${i18next.t('backButton')}`}</slot>\n            </button-component>\n            <button-component variant={'primary'} isLoading={!this.backButtonLoading && this.isLoading} disabled={this.isLoading} part=\"nbf__button-primary\" type=\"submit\">\n              <slot name=\"booking-form-book-label\">{`${i18next.t('bookNowButton')}`}</slot>\n            </button-component>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-cancel-booking-form2.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './loading.js';
 import { d as defineCustomElement$2 } from './textarea-component2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
 
-const nylasCancelBookingFormCss = ":host{--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;display:block;width:400px;font-family:var(--nylas-font-family)}.nylas-cancel-booking-form{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-cancel-booking-form form{width:100%}.nylas-cancel-booking-form__title{font-size:18px;font-weight:600;margin-bottom:0;color:var(--nylas-base-900)}.nylas-cancel-booking-form__description{font-size:1rem;font-style:normal;font-weight:400;line-height:140%;color:var(--nylas-base-600);padding-bottom:1.25rem}.nylas-cancel-booking-form__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}.footer{display:grid;grid-template-columns:1fr 1fr;width:100%;padding-top:1.25rem;gap:1rem;border-top:1px solid var(--nylas-base-200);margin-top:1.25rem}";
+const nylasCancelBookingFormCss = ":host{display:block;width:400px;font-family:var(--nylas-font-family)}.nylas-cancel-booking-form{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-cancel-booking-form form{width:100%}.nylas-cancel-booking-form__title{font-size:18px;font-weight:600;margin-bottom:0;color:var(--nylas-base-900)}.nylas-cancel-booking-form__description{font-size:1rem;font-style:normal;font-weight:400;line-height:140%;color:var(--nylas-base-600);padding-bottom:1.25rem}.nylas-cancel-booking-form__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}.footer{display:grid;grid-template-columns:1fr 1fr;width:100%;padding-top:1.25rem;gap:1rem;border-top:1px solid var(--nylas-base-200);margin-top:1.25rem}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -76,6 +76,7 @@ const NylasCancelBookingForm = proxyCustomElement(class NylasCancelBookingForm e
         this.configSettings = undefined;
         this.eventInfo = undefined;
         this.isLoading = undefined;
+        this.themeConfig = undefined;
         this.cancellationReason = '';
         this.cancellationError = '';
         this.cancellationPolicy = this.configSettings?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';
@@ -94,10 +95,18 @@ const NylasCancelBookingForm = proxyCustomElement(class NylasCancelBookingForm e
         if (!this.cancelBookingId) {
             console.warn(`[nylas-cancel-booking-form] No booking ID provided, "cancelBookingId" prop is required.`);
         }
+        this.applyThemeConfig(this.themeConfig);
     }
     disconnectedCallback() {
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     handleNylasFormInputChanged(event) {
         this.triggerValidation.emit({});
         if (event.detail.name === 'cancel-reason') {
@@ -106,8 +115,9 @@ const NylasCancelBookingForm = proxyCustomElement(class NylasCancelBookingForm e
         }
     }
     render() {
-        return (h(Host, { key: 'c4bdf11986a6efc5b9005e82583c3e0543c424b7', part: "ncbf" }, h("div", { key: 'be45863d677fc6f4e0e7a473367d4e668988a6e3', class: "nylas-cancel-booking-form", part: "ncbf__card" }, h("div", { key: 'acd1467de81bc7518ef026d18abaf2bec08ee9e7', class: "nylas-cancel-booking-form__calendar-icon", part: "ncbf__icon" }, h("calendar-cancel-icon", { key: '8622cec85da5c6767d4acd913d540ab5379d6a6b' })), h("h3", { key: 'b16e109071f7b3ce4bdeff18d75b395b6397ef66', class: "nylas-cancel-booking-form__title", part: "ncbf__title" }, instance.t('cancelBookingTitle')), h("div", { key: '99a98fda2cf78631fbf217425e98f50053819944', class: "nylas-cancel-booking-form__description", part: "ncbf__description" }, !this.configSettings?.scheduler?.cancellation_policy ? `${instance.t('cancelBookingMessage')}` : this.cancellationPolicy), h("form", { key: '4f139a76c233767562d69e6abbc8bed2fe7068a4', onSubmit: this.handleSubmitCancelBooking }, h("textarea-component", { key: 'cb9cb36cbc8054f0c99049230edd6867864b85eb', id: "cancel-reason", name: "cancel-reason", required: true, label: instance.t('reasonForCancellation'), class: this.cancellationError ? 'error' : '', part: "ncbf__reason-textarea", defaultValue: this.cancellationReason }), h("div", { key: 'd10517e31cc74630c726db714b2ec2f732ebb595', class: "footer" }, h("button-component", { key: '4074187227af0cb6c35a530faef004edde580f34', variant: 'destructive', class: "cancel", type: "submit", part: "ncbf__button-cta", disabled: this.isLoading }, instance.t('cancelBookingButton')), !!this.eventInfo && (h("button-component", { variant: 'basic', class: "back", part: "ncbf__button-outline", onClick: this.handleGoBackClicked }, instance.t('goBackButton'))))))));
+        return (h(Host, { key: '4e09c3c77a5a4a5138366431c50db2731ce08921', part: "ncbf" }, h("div", { key: '3cc3f35b457f947d6f368b7857d6529e640800e4', class: "nylas-cancel-booking-form", part: "ncbf__card" }, h("div", { key: '41001fcfa02096c97a909c1a2172349d5c77ceba', class: "nylas-cancel-booking-form__calendar-icon", part: "ncbf__icon" }, h("calendar-cancel-icon", { key: '328274c7fe7351574cb43565b4ee1d8500d0cdcf' })), h("h3", { key: '4a702b5a6b7712336370b82f993a5c36655a4de2', class: "nylas-cancel-booking-form__title", part: "ncbf__title" }, instance.t('cancelBookingTitle')), h("div", { key: '3d28b48ce8f84a843cfd96b57340d624e7cc0efc', class: "nylas-cancel-booking-form__description", part: "ncbf__description" }, !this.configSettings?.scheduler?.cancellation_policy ? `${instance.t('cancelBookingMessage')}` : this.cancellationPolicy), h("form", { key: 'd1363507571afe0b46f47697830ca603dd206abe', onSubmit: this.handleSubmitCancelBooking }, h("textarea-component", { key: '4256de3a9d7b2cf05a45388c9916f9bc38e82b80', id: "cancel-reason", name: "cancel-reason", required: true, label: instance.t('reasonForCancellation'), class: this.cancellationError ? 'error' : '', part: "ncbf__reason-textarea", defaultValue: this.cancellationReason }), h("div", { key: 'fc0169e6090700c9ac26db55b6b10f8614bf408e', class: "footer" }, h("button-component", { key: 'e348ccaabd354669178d4c5def1ac9c545b8b5ac', variant: 'destructive', class: "cancel", type: "submit", part: "ncbf__button-cta", disabled: this.isLoading }, instance.t('cancelBookingButton')), !!this.eventInfo && (h("button-component", { variant: 'basic', class: "back", part: "ncbf__button-outline", onClick: this.handleGoBackClicked }, instance.t('goBackButton'))))))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "configSettings": ["configSettingsChangedHandler"]
     }; }
@@ -119,6 +129,7 @@ const NylasCancelBookingForm = proxyCustomElement(class NylasCancelBookingForm e
         "configSettings": [16],
         "eventInfo": [16],
         "isLoading": [4, "is-loading"],
+        "themeConfig": [8, "theme-config"],
         "cancellationReason": [32],
         "cancellationError": [32],
         "cancellationPolicy": [32]
@@ -167,6 +178,7 @@ __decorate([
                 debug('nylas-cancel-booking-form', 'cancelBookingFormError', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),