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

package/dist/collection/components/design-system/time-period-selector/time-period-selector.js

@@ -93,7 +93,7 @@ export class TimePeriodSelector {
         this.selectedNumber = parseInt(this.numberOptions[0].value);
     }
     render() {
-        return (h("div", { key: 'b63e206295a197f95e212d444aa128bcf5d3dc69', class: "time-period-selector" }, typeof this.selectedNumber == 'number' && (h("input-dropdown", { id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) })), typeof this.selectedPeriod == 'string' && (h("select-dropdown", { id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod), withSearch: false }))));
+        return (h("div", { key: '7202ca7c6b64a08199ec356eb409b247b865683b', class: "time-period-selector" }, typeof this.selectedNumber == 'number' && (h("input-dropdown", { id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) })), typeof this.selectedPeriod == 'string' && (h("select-dropdown", { id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod), withSearch: false }))));
     }
     static get is() { return "time-period-selector"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/design-system/toggle-switch/toggle-switch.js

@@ -18,7 +18,7 @@ export class ToggleSwitchComponent {
         });
     }
     render() {
-        return (h("label", { key: '1439804b4d417fc2db52466c78382aab36d7ee1e', class: "switch", part: "ts_label" }, h("input", { key: '39d1b1eb59d8f1e6f8d9b89cf5c8e2421fb467c4', type: "checkbox", part: "ts_input", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("div", { key: 'be815cb3172e6370d56db571d3f30580308236a7', class: "slider round", part: "ts_slider" })));
+        return (h("label", { key: '7d74c0f5a452c3261e1cdd897a5092697a6782bb', class: "switch", part: "ts_label" }, h("input", { key: '80f5740b7e4a7af96b95648dd556b50c0537b505', type: "checkbox", part: "ts_input", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("div", { key: '5176ee85b2fd72586ae6faf41e84c2ef60598f32', class: "slider round", part: "ts_slider" })));
     }
     static get is() { return "toggle-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/design-system/tooltip-component/toolitp-component.js

@@ -12,7 +12,7 @@ export class TooltipComponent {
         event.target.nextElementSibling.style.opacity = '0';
     }
     render() {
-        return (h("div", { key: 'f7ed680c86f53928c284ced8d5a6c30cd6a8a158', class: "tooltip-container", part: "tc__container" }, h("span", { key: '07d396ac91688a025497e4ff9ea5ea4c9263e787', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: 'f8ed2155292bdd8f6e7adc72e0e89ed16a6fa823', name: "tooltip-icon" }, "i")), h("span", { key: '69f9669f987897f46ede1c67f6001824e7d27553', class: `tooltip-content ${this.position}`, part: "tc__content" }, h("slot", { key: 'f7e46722aca747f4ec8022df2080d08e5200e256', name: "tooltip-content" }, "This is a help text."))));
+        return (h("div", { key: 'dbfd3d300f3f3d3e139991f1cb84a12161b61a73', class: "tooltip-container", part: "tc__container" }, h("span", { key: '8a03f9657c641680d4fa166f3fc680d35aa24281', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: '0f8478af1526e2775907e17555a36db85f482ff4', name: "tooltip-icon" }, "i")), h("span", { key: '171ae65f59875214c68e80749f5a9c108fb365fb', class: `tooltip-content ${this.position}`, part: "tc__content" }, h("slot", { key: '888f7faaf29825faa27df7935e47526d6fa6f126', name: "tooltip-content" }, "This is a help text."))));
     }
     static get is() { return "tooltip-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nylas-if-state/nylas-if-state.js

@@ -97,7 +97,7 @@ export class NylasIfState {
         }
     }
     render() {
-        return (h(Host, { key: '8c7133e9d01ecb6d14db3a6f30321ecbb7047dcb' }, h("div", { key: '81ba387d18d24761a8f89da678161aaf5755c3f2', class: this.classes }, this.show && h("slot", null))));
+        return (h(Host, { key: '4ab162229644e4d5d9d571af164b417c3e503e2c' }, h("div", { key: 'f5b4dd56ac193ba63be4a7040bdb61d7a2e1da04', class: this.classes }, this.show && h("slot", null))));
     }
     static get is() { return "nylas-if-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nylas-login/nylas-login.js

@@ -69,7 +69,7 @@ export class NylasLogin {
     }
     render() {
         const splitProviders = this.providers?.split(',') || [];
-        return (h(Host, { key: 'c19348287c1ee1aac3efb379ff4c6e1f7b79601b' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
+        return (h(Host, { key: '0e8ae3287facdc3e67109cd57cb80a761897de76' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
                 minWidth: this.logoWidth,
             } }), h("h1", null, "Welcome")), h("p", null, "Log in to your account to continue to ", this.companyName), h("div", { class: "login-methods" }, splitProviders.includes('google') && (h("button", { class: "login-google", onClick: this._onGoogleButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 256 262" }, h("path", { fill: "#4285F4", d: "M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z" }), h("path", { fill: "#34A853", d: "M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z" }), h("path", { fill: "#FBBC05", d: "M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z" }), h("path", { fill: "#EA4335", d: "M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z" })), "Continue with Google")), splitProviders.includes('microsoft') && (h("button", { class: "login-microsoft", onClick: this._onMicrosoftButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 448 512" }, h("path", { fill: "#F3F3F3", d: "M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z" })), "Continue with Microsoft"))), h("form", { class: "login-form", method: "POST", onSubmit: this._onFormSubmit }, h("label", { htmlFor: "email" }, "Email"), h("input", { type: "email", id: "email", name: "email", required: true, value: this.email }), h("button", { type: "submit" }, "Next")))))));
     }

package/dist/collection/components/nylas-provider/nylas-provider.js

@@ -92,7 +92,7 @@ export class NylasProvider {
         return this.baseProvider?.getStore('schedulerConfig');
     }
     render() {
-        return (h(Host, { key: 'e4c9c9acb330cbbc466495c3153d54318b28d943' }, h("slot", { key: '7a5b931d0ca83c251074eba2aeb4f243f131ae05' })));
+        return (h(Host, { key: 'a07ace4fe61c7f7ee20b723d1858f7ebac56ff95' }, h("slot", { key: '7c10f2b5cf18450c28617b3f35215b720f1d8bd2' })));
     }
     static get is() { return "nylas-provider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.css

@@ -1,5 +1,28 @@
 :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 {

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js

@@ -54,10 +54,10 @@ export class NylasBookedEventCard {
         this.eventInfo = undefined;
         this.rescheduleBookingId = undefined;
         this.bookingInfo = undefined;
-        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        this.selectedTimeslot = undefined;
         this.configSettings = undefined;
         this.isLoading = undefined;
+        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.selectedTimeslot = undefined;
         this.selectedLanguage = navigator.language;
         this.startTime = '';
         this.endTime = '';
@@ -81,13 +81,13 @@ export class NylasBookedEventCard {
     render() {
         const bookingType = this.configSettings?.booking_type;
         const isManualConfirmation = bookingType && bookingType !== 'booking';
-        return (h(Host, { key: '3f0b76f9b5f26d05aaa2d31821a2efa255212b10', part: "nbec" }, h("div", { key: '64d6fcb473af121495dc22b5681ff13cc99cba93', class: "nylas-booked-event-card" }, h("div", { key: 'c0503453b6341171778619588452cf6b9be6034c', class: "booked-event-timezone" }, h("globe-icon", { key: '200569b371723f89d79361fa119c7c0668190c6c' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '09197fcc9429484c32c6030e7d76d94efc0b5e4e', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '8356550843fa7f6498db7a338cc494e0ab9e39f5', class: "calendar-icon" }, h("calendar-check-icon", { key: 'd04242aeb233d24a70ecc93fed80816545ec5adf' })), h("div", { key: 'ee7af6bc4207da846efe0e6cf550aeb7edc14806', class: "booked-event-header" }, h("h2", { key: '6d054e9429c7d3695725f4fb969b85f7e9f50f44', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
+        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
             ? `${i18next.t('bookingRescheduled')}`
             : isManualConfirmation && !this.isLoading
                 ? `${i18next.t('bookingSent')}`
-                : `${i18next.t('bookingConfirmed')}`, "!"), h("div", { key: '1ea44bacdc8f8013bbed3395bd4a601453765a6a', class: "card-description", part: "nbec__description" }, isManualConfirmation ? i18next.t('bookingSentDescription') : h("span", null, i18next.t('bookingConfirmedDescription')))), h("div", { key: '4d4cdf50ad8f80826d2c3e5d48db5dc7472e0b73', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'a3727ff8b06fd002f2126c6f587228ae482754dc' }), h("h3", { key: '4d3e6798e236c2da3e7ccc8b0c2982107fa93e61' }, i18next.t('bookingDateAndTimeHeader')), h("p", { key: '2669d3f2d99b7227c3781cf65e058ce47a8c6fe4' }, this.selectedTimeslot?.start_time
+                : `${i18next.t('bookingConfirmed')}`, "!"), h("div", { key: 'bb6cef397ebe5aec3ed49f455ac00430594c4c6f', class: "card-description", part: "nbec__description" }, isManualConfirmation ? i18next.t('bookingSentDescription') : h("span", null, i18next.t('bookingConfirmedDescription')))), h("div", { key: 'd4732fc9421c4d54062bdac74e69a476322f168a', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'caadcce299c4506d709a65bfbc3d10fec64ef6d6' }), h("h3", { key: '8a2dc813f1be6bab13a53328c4e9dbb5ec7d41df' }, i18next.t('bookingDateAndTimeHeader')), h("p", { key: 'fedc61f46ba1b96e424b23aff08c382296e4a6d3' }, this.selectedTimeslot?.start_time
             ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))
-            : '-', ' ', h("br", { key: '8f4f99417f8684678ff30d1300c655a5ab909da8' }), this.startTime, " - ", this.endTime)), h("div", { key: 'c37bfad518c9e0530755253706d39e0fdacf413b', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
+            : '-', ' ', h("br", { key: '6efc18bfd398bca545c359b5876ff9a16792485f' }), this.startTime, " - ", this.endTime)), h("div", { key: 'c972d3fc4f1541ec6a1fde958176de0adccf3bcd', 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',
@@ -125,8 +125,11 @@ export class NylasBookedEventCard {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The booked event."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The booked event."
+                        }],
+                    "text": ""
                 }
             },
             "rescheduleBookingId": {
@@ -140,8 +143,11 @@ export class NylasBookedEventCard {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Booking flow type."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "Booking flow type."
+                        }],
+                    "text": ""
                 },
                 "attribute": "reschedule-booking-id",
                 "reflect": false
@@ -163,12 +169,61 @@ export class NylasBookedEventCard {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The booking info used to book / reschedule the event."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The booking info used to book / reschedule the event."
+                        }],
+                    "text": ""
                 },
                 "attribute": "booking-info",
                 "reflect": false
             },
+            "configSettings": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfigSettings",
+                    "resolved": "any",
+                    "references": {
+                        "ConfigSettings": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::unknown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The config settings for the scheduler."
+                        }],
+                    "text": ""
+                },
+                "attribute": "config-settings",
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The loading state prop. Used to display loading state when fetching availability."
+                        }],
+                    "text": ""
+                },
+                "attribute": "is-loading",
+                "reflect": false
+            },
             "selectedTimezone": {
                 "type": "string",
                 "mutable": false,
@@ -208,46 +263,6 @@ export class NylasBookedEventCard {
                     "text": "The selected timeslot."
                 }
             },
-            "configSettings": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "ConfigSettings",
-                    "resolved": "any",
-                    "references": {
-                        "ConfigSettings": {
-                            "location": "import",
-                            "path": "../../..",
-                            "id": "src/index.ts::unknown"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The config settings for the scheduler."
-                },
-                "attribute": "config-settings",
-                "reflect": false
-            },
-            "isLoading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The loading state prop. Used to display loading state when fetching availability."
-                },
-                "attribute": "is-loading",
-                "reflect": false
-            },
             "selectedLanguage": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-booked-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG9E,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,OAAO,MAAM,cAAc,CAAC;AAiBnC,MAAM,OAAO,oBAAoB;;QA0FvB,qCAAgC,GAAG,GAAG,EAAE;YAC9C,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,CAAC;gBAChD,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;oBACzC,KAAK,EAAE;wBACL,KAAK,EAAE,oBAAoB;wBAC3B,OAAO,EAAE,wCAAwC,qBAAqB,wBAAwB;qBAC/F;iBACF,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC;YACjF,CAAC;QACH,CAAC,CAAC;QAEM,kCAA6B,GAAG,GAAG,EAAE;YAC3C,MAAM,YAAY,GAAG,CAAC,KAAkC,EAAE,EAAE;gBAC1D,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,CAAC,CAAC;YACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;QAC5F,CAAC,CAAC;QAEF,sBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE;YACnC,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,MAAM;oBACT,OAAO,MAAM,CAAC;gBAChB,KAAK,KAAK;oBACR,OAAO,KAAK,CAAC;gBACf;oBACE,OAAO,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC;;;;gCAvG0C,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;;;;gCAoBd,SAAS,CAAC,QAAQ;yBAEnE,EAAE;uBACJ,EAAE;;IA2B7B,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,+CAA+C,CAAC,CAAC;IACzD,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,8CAA8C,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CAAC,oJAAoJ,CAAC,CAAC;QACrK,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO,CAAC,IAAI,CAAC,wJAAwJ,CAAC,CAAC;QACzK,CAAC;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;IAChG,CAAC;IAsED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;QACtD,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,SAAS,CAAC;QAEtE,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,oEAAyB;oBACxB,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAChC;gBACN,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,YAAY;oBAC/C,4DAAK,KAAK,EAAC,eAAe;wBACxB,6EAAuB,CACnB;oBACN,4DAAK,KAAK,EAAC,qBAAqB;wBAC9B,2DAAI,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa;4BACrC,CAAC,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,SAAS;gCAC5C,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE;gCACtC,CAAC,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,SAAS;oCACvC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;oCAC/B,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE;gCAErC;wBACL,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,mBAAmB,IACnD,oBAAoB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,gBAAO,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAQ,CACjH,CACF;oBACN,4DAAK,KAAK,EAAC,mBAAmB;wBAC5B,+EAA+C;wBAC/C,6DAAK,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAM;wBAChD;4BACG,IAAI,CAAC,gBAAgB,EAAE,UAAU;gCAChC,CAAC,CAAC,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;gCACxJ,CAAC,CAAC,GAAG;4BAAE,GAAG;4BACZ,4DAAM;4BACL,IAAI,CAAC,SAAS;;4BAAK,IAAI,CAAC,OAAO,CAC9B,CACA;oBACN,4DAAK,KAAK,EAAC,sBAAsB,GAc3B;oBAEL,CAAC,oBAAoB,IAAI,CACxB,WAAK,KAAK,EAAC,kBAAkB;wBAC3B,WACE,KAAK,EAAE;gCACL,QAAQ,EAAE,IAAI;gCACd,WAAW,EACT,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,CAAC;oCACxH,IAAI,CAAC,cAAc,EAAE,YAAY,KAAK,wBAAwB;gCAChE,kBAAkB,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB;6BAC3I;4BAEA,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,CAC7D,wBAAkB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,IAAI,EAAC,uCAAuC,IACnI,GAAG,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAAE,CACrB,CACpB;4BACA,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,CAC7D,wBAAkB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,6BAA6B,EAAE,IAAI,EAAC,2CAA2C,IAC9H,GAAG,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,EAAE,CACzB,CACpB,CACG,CACF,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AApFC;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,KAAK,EAAE,KAAyC,EAAE,uBAAgD,EAAE,EAAE;gBAChI,uBAAuB,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YACtE,CAAC;YACD,uBAAuB,EAAE,KAAK,EAC5B,KAAsG,EACtG,uBAAgD,EAChD,EAAE;gBACF,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,IAAI,CAAC,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE,CAAC;oBACnD,YAAY,CAAC,MAAM,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC;YACD,0BAA0B,EAAE,KAAK,EAAE,KAA+C,EAAE,wBAAiD,EAAE,EAAE;gBACvI,KAAK,CAAC,yBAAyB,EAAE,4BAA4B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC/E,CAAC;YACD,gCAAgC,EAAE,KAAK,EAAE,KAAiE,EAAE,wBAAiD,EAAE,EAAE;gBAC/J,KAAK,CAAC,yBAAyB,EAAE,kCAAkC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YACrF,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;kDAoFD","sourcesContent":["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   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\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 config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\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-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.css

@@ -1,6 +1,29 @@
 :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 {

package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.js

@@ -117,8 +117,9 @@ export class NylasBookingForm {
             }
             const bookingInfoAdditionalFields = {};
             if (this.bookingInfo?.additionalFields) {
+                const configAdditionalFields = this.configSettings?.scheduler?.additional_fields || {};
                 Object.entries(this.bookingInfo.additionalFields).forEach(([key, obj]) => {
-                    if (key in this.configSettings?.scheduler?.additional_fields) {
+                    if (key in configAdditionalFields) {
                         bookingInfoAdditionalFields[key] = obj.value;
                     }
                 });
@@ -226,7 +227,7 @@ export class NylasBookingForm {
         this.updateAdditionalFields(event.detail.name, event.detail.value);
     }
     render() {
-        return (h(Host, { key: 'c5759aaa6dd8fe46bbca8d6948cb2f8b62b2f596' }, h("form", { key: '8b1def5e7238fe8c31fe190f772d5b852ea7297b', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, h("div", { key: '0ac8350dd52ee87af62aff182bbb2a302b4b9488', class: "nylas-booking-form", part: "nbf" }, h("div", { key: '3eed8eda2bc3e0e34d9ef72178d308276036abc3', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '2e6a8c3e0c578e98cb16133d5c2d2c3638b12a8e', label: i18next.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: i18next.t('namePlaceholder'), type: "text", required: true, requiredError: i18next.t('fieldRequired', { field: i18next.t('name') }), patternError: i18next.t('invalidInputFormat', { field: i18next.t('name') }), part: "nbf__input-textfield" })), h("div", { key: 'f750e23602d5cd20020ad18293a6122c46e858a8', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: 'd3e76502be140769b1bcfdca4e5fc119aa080b20', label: i18next.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: i18next.t('emailPlaceholder'), type: "email", required: true, requiredError: i18next.t('fieldRequired', { field: i18next.t('email') }), patternError: i18next.t('invalidInputFormat', { field: i18next.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: '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: i18next.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: i18next.t('namePlaceholder'), type: "text", required: true, requiredError: i18next.t('fieldRequired', { field: i18next.t('name') }), patternError: i18next.t('invalidInputFormat', { field: i18next.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '95de0dabca66d11e1370b282e4d23eb545fb33a6', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '712b25028a9d12bde236ada12c9b8ee15a70c885', label: i18next.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: i18next.t('emailPlaceholder'), type: "email", required: true, requiredError: i18next.t('fieldRequired', { field: i18next.t('email') }), patternError: i18next.t('invalidInputFormat', { field: i18next.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],
             } }, i18next.t('guestEmail')), h("div", { class: "guest-email-input" }, h("input", { type: "email", id: `guest-email-${index}`, maxLength: 100, class: {
                 'guest-email': true,
@@ -253,7 +254,7 @@ export class NylasBookingForm {
                 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: i18next.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
             }
-        })), h("div", { key: '49ce45d55dd541515a7015e352f864e8287cdfa4', class: "cta" }, h("button-component", { key: '0afa9b48216531170197a6bece9520d111789f5d', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '5396a9449f932af8c7ad4a1b93f0a11ef1c7b9e4', name: "booking-form-back-label" }, `${i18next.t('backButton')}`)), h("button-component", { key: '26090462808119a30db0506ddc1eed26ceaab8b7', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: '18c5675de4b737b486a122f31ba1049f6271e645', name: "booking-form-book-label" }, `${i18next.t('bookNowButton')}`))))));
+        })), 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" }, `${i18next.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" }, `${i18next.t('bookNowButton')}`))))));
     }
     static get is() { return "nylas-booking-form"; }
     static get encapsulation() { return "shadow"; }
@@ -280,8 +281,11 @@ export class NylasBookingForm {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The loading state."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The loading state."
+                        }],
+                    "text": ""
                 },
                 "attribute": "is-loading",
                 "reflect": false
@@ -303,8 +307,11 @@ export class NylasBookingForm {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The booking info."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The booking info."
+                        }],
+                    "text": ""
                 }
             },
             "eventInfo": {
@@ -316,40 +323,44 @@ export class NylasBookingForm {
                     "references": {
                         "NylasEvent": {
                             "location": "import",
-                            "path": "../../..",
-                            "id": "src/index.ts::NylasEvent"
+                            "path": "@/common/types",
+                            "id": "src/common/types.ts::NylasEvent"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The booked event (Used to track if a booking is created in an eventOverride)."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The booked event (Used to track if a booking is created in an eventOverride)."
+                        }],
+                    "text": ""
                 }
             },
             "configSettings": {
-                "type": "any",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
                     "original": "ConfigSettings",
-                    "resolved": "any",
+                    "resolved": "undefined | { configuration_id: string; scheduler: { available_days_in_future: number; min_cancellation_notice: number; min_booking_notice: number; rescheduling_url?: string | undefined; cancellation_url?: string | undefined; cancellation_policy?: string | undefined; hide_additional_guests?: boolean | undefined; hide_cancellation_options?: boolean | undefined; hide_rescheduling_options?: boolean | undefined; additional_fields?: Record<string, AdditionalFields> | undefined; confirmation_redirect_url?: string | undefined; organizer_confirmation_url?: string | undefined; }; organizer: { name: string; email: string; }; slug: string; appearance: Appearance; booking_type: string; name: string; }",
                     "references": {
                         "ConfigSettings": {
                             "location": "import",
-                            "path": "../../..",
-                            "id": "src/index.ts::unknown"
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::ConfigSettings"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The config settings for the scheduler."
-                },
-                "attribute": "config-settings",
-                "reflect": false
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The config settings for the scheduler."
+                        }],
+                    "text": ""
+                }
             }
         };
     }
@@ -423,13 +434,13 @@ export class NylasBookingForm {
                     "text": "This event is fired when the book button is clicked and the form validation is complete and successful.\nThis event is fired before the booking request is sent."
                 },
                 "complexType": {
-                    "original": "NylasSchedulerBookingData",
-                    "resolved": "{ primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date | undefined; endTime?: Date | undefined; timezone?: string | undefined; guests?: NylasSchedulerBookingParticipant[] | undefined; additionalFields?: Record<string, { value: string; type: string; }> | undefined; }",
+                    "original": "NylasSchedulerBookingDataWithFlatFields",
+                    "resolved": "Omit<NylasSchedulerBookingData, \"additionalFields\"> & { additionalFields?: Record<string, string> | undefined; }",
                     "references": {
-                        "NylasSchedulerBookingData": {
+                        "NylasSchedulerBookingDataWithFlatFields": {
                             "location": "import",
                             "path": "@/common/types",
-                            "id": "src/common/types.ts::NylasSchedulerBookingData"
+                            "id": "src/common/types.ts::NylasSchedulerBookingDataWithFlatFields"
                         }
                     }
                 }