@nylas/web-elements 1.0.0-prealpha1

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

@@ -0,0 +1,121 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import './sp-icon-chevron-left.js';
+import { d as debug } from './utils.js';
+import { T as TIMEZONE_MAP } from './constants.js';
+import { d as defineCustomElement$4 } from './calendar-check.js';
+import { d as defineCustomElement$3 } from './checkmark-circle.js';
+import { d as defineCustomElement$2 } from './globe.js';
+import { d as defineCustomElement$1 } from './people.js';
+
+const nylasBookedEventCardCss = ":host{display:block}sp-theme{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)}.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)}.booked-event-header{margin:1.5rem 0;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.5rem;font-size:1.125rem;font-weight:600}.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:1rem;font-weight:600;line-height:1.25rem}.booking-date-time p,.booking-participants p{font-size:0.875rem;margin:0;font-weight:400}.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}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:1rem;padding-top:2px}sp-button.cancel{color:var(--nylas-error)}sp-button.cancel:hover{border-color:var(--nylas-error)}sp-button.cancel:active{color:var(--nylas-error-pressed);border-color:var(--nylas-error-pressed)}sp-button.reschedule:hover{border-color:var(--nylas-primary)}sp-button.reschedule:active{border-color:var(--nylas-base-600)}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
+const NylasBookedEventCardStyle0 = nylasBookedEventCardCss;
+
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.cancelBookingButtonClicked = createEvent(this, "cancelBookingButtonClicked", 7);
+        this.rescheduleButtonClicked = createEvent(this, "rescheduleButtonClicked", 7);
+        this.handleCancelBookingButtonClicked = () => {
+            this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.id });
+        };
+        this.handleRescheduleButtonClicked = () => {
+            this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.id });
+        };
+        this.eventInfo = undefined;
+        this.bookingFlow = 'booking';
+        this.bookingInfo = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-booked-event-card] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-booked-event-card] Component did load`);
+    }
+    render() {
+        return (h(Host, { key: '4fe778a5b04ec6d1af49faf276ea343c35579e2b', part: "nbec" }, h("sp-theme", { key: '6db0e4e75b5cfa02ce671a55d1585dc9f6715beb', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '0af608a68c96252a9a1260a6bab7b220e444d521', class: "booked-event-timezone" }, h("globe-icon", { key: '85f9f0afbc385a41f42f5cb36946737e3cf36dc4' }), TIMEZONE_MAP[this.eventInfo?.booking_data?.timezone]), h("div", { key: 'c0cd863f8415a51dd194b5c32528a474e08e7973', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '87e61df0cc32e4c97328fb49c08e6a684f9dd880', class: "calendar-icon" }, h("calendar-check-icon", { key: '61d625ea649af4dfa2a636b5e4ac6ded80d8a0ee' })), h("div", { key: 'c498c4ae048f6bd551df5a60035afc0a28645f45', class: "booked-event-header" }, h("h2", { key: '13f7942a7088b8e3b1479ae5c9541ee88feecb31', slot: "card-title", part: "nbec__title" }, "Booking ", this.bookingFlow === 'rescheduling' ? 'rescheduled' : 'confirmed', "!"), h("div", { key: 'e3529efda5ff6915f2a9935a8b35d17d17a142a8', part: "nbec__description" }, this.eventInfo?.config?.data?.event_booking?.organizer.email, " \u00A0&\u00A0 ", this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '0a22beaf559877d046b760f1d60b57cff82e1210' }), h("div", { key: '8a03a51879a43e7e3799c35fb1f40ac60d9af2ce', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'c1d1d829247d1f5234d9448961ae30febfac45bc' }), h("h3", { key: '1632748199bba9118beea332ebb7b7da51facac6' }, "Booking date and time"), h("p", { key: '6b65ae60b424a2129d0d57a8e7615c144c8763a3' }, new Date(this.eventInfo?.booking_data?.start_time * 1000).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: '8b6961d12d8181afbe42ded8cd0aadd059318933' }), new Date(this.eventInfo?.booking_data?.start_time * 1000).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.eventInfo?.booking_data?.end_time * 1000).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '072c94034fdfb53e136fc70a4d245ddf24233be7', class: "booking-participants" }, h("people-icon", { key: '2342e4e9b33f3846acefb704cdbe6f8fe9095df5' }), h("h3", { key: '4594855262abf5223cc0154db85f3fd6abce5af8' }, "All participants"), this.eventInfo?.config?.data?.event_booking?.organizer && (h("p", null, `${this.eventInfo?.config?.data?.event_booking?.organizer.email} (organizer)`, h("br", null), this.eventInfo?.booking_data?.participants.map((participant) => {
+            return (h("span", { class: "block" }, participant.email, ' ', participant.name == this.bookingInfo?.primaryParticipant?.name || participant.email == this.bookingInfo?.primaryParticipant?.email ? '(You)' : ''));
+        })))), h("sp-divider", { key: 'e6110f8def748ee67351d524946c74143bc1b303' }), h("div", { key: 'a5016e1b9fa8e2800bf3cc2478c272145251cb71', class: "footer" }, h("sp-button", { key: '4cdc8f83d90c1f5b5512844aa664692320b7c9eb', variant: "secondary", treatment: "outline", size: "xl", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: 'e14e0f48e8c28c12b254a20dfc52863addbe192c', variant: "secondary", treatment: "outline", size: "xl", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
+    }
+    static get style() { return NylasBookedEventCardStyle0; }
+}, [1, "nylas-booked-event-card", {
+        "eventInfo": [16],
+        "bookingFlow": [1, "booking-flow"],
+        "bookingInfo": [8, "booking-info"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-booked-event-card',
+        stateToProps: new Map([
+            ['scheduler.bookingFlow', 'bookingFlow'],
+            ['scheduler.bookingInfo', 'bookingInfo'],
+        ]),
+        eventToProps: {
+            cancelBookingButtonClicked: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId);
+            },
+            rescheduleButtonClicked: async (event, nylasSchedulerConnector) => {
+                await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasBookedEventCard.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-booked-event-card", "calendar-check-icon", "checkmark-circle-icon", "globe-icon", "people-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-booked-event-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasBookedEventCard);
+            }
+            break;
+        case "calendar-check-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "checkmark-circle-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "globe-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "people-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasBookedEventCard as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-booked-event-card2.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-booked-event-card2.js","mappings":"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","names":[],"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":[":host {\n  display: block;\n}\n\nsp-theme {\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  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}\n\n.booked-event-header {\n  margin: 1.5rem 0;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.5rem;\n    font-size: 1.125rem;\n    font-weight: 600;\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: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n  }\n  p {\n    font-size: 0.875rem;\n    margin: 0;\n    font-weight: 400;\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.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  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n}\n\nsp-button {\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 1rem;\n  padding-top: 2px;\n  &.cancel {\n    color: var(--nylas-error);\n    &:hover {\n      border-color: var(--nylas-error);\n    }\n    &:active {\n      color: var(--nylas-error-pressed);\n      border-color: var(--nylas-error-pressed);\n    }\n  }\n  &.reschedule {\n    &:hover {\n      border-color: var(--nylas-primary);\n    }\n    &:active {\n      border-color: var(--nylas-base-600);\n    }\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 } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\n\n/**\n * The booked event card component.\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 bookingFlow: 'booking' | 'rescheduling' = 'booking';\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\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 }>;\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  }\n\n  private handleCancelBookingButtonClicked = () => {\n    this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.id });\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.id });\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingFlow', 'bookingFlow'],\n      ['scheduler.bookingInfo', 'bookingInfo'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.eventInfo?.booking_data?.timezone]}\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                Booking {this.bookingFlow === 'rescheduling' ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.eventInfo?.config?.data?.event_booking?.organizer.email} &nbsp;&amp;&nbsp; {this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.eventInfo?.booking_data?.start_time * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.eventInfo?.booking_data?.start_time * 1000).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.eventInfo?.booking_data?.end_time * 1000).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.config?.data?.event_booking?.organizer && (\n                <p>\n                  {`${this.eventInfo?.config?.data?.event_booking?.organizer.email} (organizer)`}\n                  <br />\n                  {this.eventInfo?.booking_data?.participants.map((participant: any) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email}{' '}\n                        {participant.name == this.bookingInfo?.primaryParticipant?.name || participant.email == this.bookingInfo?.primaryParticipant?.email ? '(You)' : ''}\n                      </span>\n                    );\n                  })}\n                </p>\n              )}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button\n                variant=\"secondary\"\n                treatment=\"outline\"\n                size=\"xl\"\n                class=\"cancel\"\n                onClick={this.handleCancelBookingButtonClicked}\n                part=\"nbec__button-outline nbec__cancel-cta\"\n              >\n                Cancel booking\n              </sp-button>\n              <sp-button\n                variant=\"secondary\"\n                treatment=\"outline\"\n                size=\"xl\"\n                class=\"reschedule\"\n                onClick={this.handleRescheduleButtonClicked}\n                part=\"nbec__button-outline nbec__reschedule-cta\"\n              >\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-booking-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NylasBookingForm extends Components.NylasBookingForm, HTMLElement {}
+export const NylasBookingForm: {
+    prototype: NylasBookingForm;
+    new (): NylasBookingForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { N as NylasBookingForm$1, d as defineCustomElement$1 } from './nylas-booking-form2.js';
+
+const NylasBookingForm = NylasBookingForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasBookingForm, defineCustomElement };
+
+//# sourceMappingURL=nylas-booking-form.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-booking-form.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -0,0 +1,224 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { t as tag, I as IconBase, s as setCustomTemplateLiteralTag, d as defineElement } from './define-element.js';
+import { x } from './property.js';
+import { R as RegisterComponent } from './register-component.js';
+import { d as debug } from './utils.js';
+import { d as defineCustomElement$1 } from './loading.js';
+
+const AddCircleIcon=({width:a=24,height:e=24,hidden:t=!1,title:r="Add Circle"}={})=>tag`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width=${a}
+    height=${e}
+    viewBox="0 0 36 36"
+    aria-hidden=${t?"true":"false"}
+    role="img"
+    fill="currentColor"
+    aria-label=${r}
+  >
+    <path
+      d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10 17a1 1 0 0 1-1 1h-7v7a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-7H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h7V9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h7a1 1 0 0 1 1 1Z"
+    />
+  </svg>`;
+
+class IconAddCircle extends IconBase{render(){return setCustomTemplateLiteralTag(x),AddCircleIcon({hidden:!this.label,title:this.label})}}
+
+defineElement("sp-icon-add-circle",IconAddCircle);
+
+const RemoveCircleIcon=({width:e=24,height:t=24,hidden:a=!1,title:r="Remove Circle"}={})=>tag`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height=${t}
+    viewBox="0 0 36 36"
+    width=${e}
+    aria-hidden=${a?"true":"false"}
+    role="img"
+    fill="currentColor"
+    aria-label=${r}
+  >
+    <path
+      d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10 17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1Z"
+    />
+  </svg>`;
+
+class IconRemoveCircle extends IconBase{render(){return setCustomTemplateLiteralTag(x),RemoveCircleIcon({hidden:!this.label,title:this.label})}}
+
+defineElement("sp-icon-remove-circle",IconRemoveCircle);
+
+const nylasBookingFormCss = ":host{display:block}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.error{padding:0.5rem 1rem;background:var(--nylas-error);color:var(--nylas-base-25);border-radius:var(--nylas-border-radius-2x);font-weight:600}sp-field-label{font-size:14px;color:var(--nylas-base-800)}sp-textfield{--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;background-color:var(--nylas-base-100);color:var(--nylas-base-500)}.cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:0.5rem;box-sizing:border-box;border-top:1px solid var(--nylas-base-100)}sp-button{background-color:transparent;color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x)}sp-button:hover{background-color:var(--nylas-base-100);color:var(--nylas-primary);border-radius:var(--nylas-border-radius-2x)}sp-button:active{background-color:var(--nylas-base-200);color:var(--nylas-base-800)}sp-button.back{width:50%;background-color:transparent;color:var(--nylas-base-600);border:1px solid var(--nylas-base-300)}sp-button.back:hover{border-color:var(--nylas-primary)}sp-button.back:active{border:2px solid var(--nylas-base-800)}sp-button.book{width:50%;background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.book:hover{background-color:var(--nylas-base-600)}sp-button.book:active{background-color:var(--nylas-base-800)}.input-wrapper sp-button{margin-bottom:1rem}.button-wrapper{width:100%;display:flex;flex-direction:row;align-items:flex-start;height:max-content;position:relative}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:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius) var(--nylas-border-radius) 0;height:48px;width:48px;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)}";
+const NylasBookingFormStyle0 = nylasBookingFormCss;
+
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nameChanged = createEvent(this, "nameChanged", 7);
+        this.emailChanged = createEvent(this, "emailChanged", 7);
+        this.backButtonClicked = createEvent(this, "backButtonClicked", 7);
+        this.detailsConfirmed = createEvent(this, "detailsConfirmed", 7);
+        this.handleGuestChange = (guestIndex, email) => {
+            if (email === '') {
+                return;
+            }
+            const guests = [...this.guestEmails];
+            guests[guestIndex] = email;
+            this.guestEmails = [...guests];
+        };
+        this.addGuestButtonClickedHandler = () => {
+            this.guestEmails = [...this.guestEmails, ''];
+        };
+        this.removeGuestButtonClickHandler = (e, guestIndex) => {
+            e.preventDefault();
+            const guests = [...this.guestEmails];
+            guests.splice(guestIndex, 1);
+            this.guestEmails = [...guests];
+        };
+        this.handleBackButtonClicked = () => {
+            this.backButtonClicked.emit();
+        };
+        this.bookButtonClickedHandler = async (e) => {
+            e.preventDefault();
+            debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);
+            const name = this.name || this.bookingInfo?.primaryParticipant?.name;
+            const email = this.email || this.bookingInfo?.primaryParticipant?.email;
+            if (!name || name === '') {
+                this.isNameValid = false;
+                return;
+            }
+            if (!email || email === '') {
+                this.isEmailValid = false;
+                return;
+            }
+            let guests = [];
+            if (this.guestEmails.length > 0) {
+                guests = this.guestEmails.map((email) => ({ name: '', email: email.trim() }));
+            }
+            else if (this.bookingInfo?.guests) {
+                guests = this.bookingInfo?.guests;
+            }
+            this.detailsConfirmed.emit({
+                primaryParticipant: {
+                    name: name,
+                    email: email,
+                },
+                guests: guests,
+                additionalFields: {
+                    ...this.bookingInfo?.additionalFields,
+                },
+            });
+        };
+        this.bookedEventLoading = false;
+        this.bookedEventError = undefined;
+        this.bookingInfo = undefined;
+        this.eventInfo = undefined;
+        this.name = '';
+        this.email = '';
+        this.guestEmails = [];
+        this.isNameValid = true;
+        this.isEmailValid = true;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    componentWillLoad() {
+        debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);
+        if (this.bookingInfo) {
+            this.name = this.bookingInfo.primaryParticipant?.name;
+            this.email = this.bookingInfo.primaryParticipant?.email;
+        }
+    }
+    bookingInfoChangedHandler(newValue) {
+        if (newValue && newValue.primaryParticipant) {
+            this.name = newValue.primaryParticipant.name;
+            this.email = newValue.primaryParticipant.email;
+        }
+    }
+    changeName(name) {
+        this.name = name;
+        this.nameChanged.emit(name);
+    }
+    changeEmail(email) {
+        this.email = email;
+        this.emailChanged.emit(email);
+    }
+    render() {
+        return (h(Host, { key: 'd1b5e42daaf9155d36be5aba04642b89d72c3006' }, h("sp-theme", { key: '33eeac6223a0f340ad0d0d79915e5d8bc4b43f80', theme: "spectrum", color: "light", scale: "medium" }, h("form", { key: '618fc2aceaefb86274709fa6f515feeb3f5296bf', onSubmit: e => this.bookButtonClickedHandler(e) }, h("div", { key: '81f12bae5be882228409f434625b1786103dc5f4', class: "nylas-booking-form" }, this.bookedEventError && h("div", { class: 'error' }, "Something went wrong, please try again later."), h("slot", { key: 'a47185490947bff761fdc2866827756a2ac89b7a', name: "custom-booking-form" }, h("div", { key: 'ba30a43eaa91ab4fbbe1e854f58e2fb8261e9697', class: "input-wrapper" }, h("sp-field-label", { key: '15d1aa9618cb7d51b02263c930244734a372a7ed', required: true, size: "xl", for: "name-0-m", part: "nbf__input-label" }, "Name"), h("sp-textfield", { key: 'cb49bb4ac417a51bb791188c52760a8528978086', id: "name-0-m", size: "xl", placeholder: "Enter your name", value: this.name, invalid: !this.isNameValid, part: "nbf__input-textfield", onChange: (e) => this.changeName(e.target?.value) })), h("div", { key: '4e5f5c838366b75edf633e902863be4c688ef433', class: "input-wrapper" }, h("sp-field-label", { key: '80db8aa592a0ea8ed2cf225e658dda682d6d45bd', required: true, size: "xl", for: "email-0-m", part: "nbf__input-label" }, "Email"), h("sp-textfield", { key: '57b09051465afe3bc1f236bdf8425d944f11b46a', id: "email-0-m", size: "xl", placeholder: "Enter your email", value: this.email, invalid: !this.isEmailValid, part: "nbf__input-textfield", onChange: (e) => this.changeEmail(e.target?.value) })), h("div", { key: '4ea1880e69b9bd417e695aa9e052198b6b714a25', class: "input-wrapper" }, h("sp-button", { key: '97589401abd16e760c4d0366d7033a5fc9bede06', class: "add-guest", variant: "primary", part: "nbf__button-ghost", onClick: this.addGuestButtonClickedHandler }, h("sp-icon-add-circle", { key: '200a59dc938d5ea8db764b9b4f0cfde4b2e94524', slot: "icon" }), "Add guest"), this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("sp-textfield", { id: `guest-email-${index}-m`, size: "xl", class: "guest-email", placeholder: "Enter guest email", value: email, part: "nbf__input-textfield", onChange: (e) => this.handleGuestChange(index, e.target?.value) }), h("sp-infield-button", { size: "s", class: "remove-guest", treatment: "outline", inline: "end", onClick: (e) => this.removeGuestButtonClickHandler(e, index) }, h("sp-icon-cross300", { size: "s" })))))))), h("div", { key: '6d8daa11ae3f21fd09c05eb5fbff0ee8cfa719ef', class: "cta" }, h("sp-button", { key: '730d4d1418e6ed8bfecd8145b5e2d649f671cd31', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", size: "xl", onClick: this.handleBackButtonClicked }, "Back"), h("sp-button", { key: 'e4eae4433807cfec0bb14e733442156977e5362b', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit", size: "xl" }, this.bookedEventLoading && h("loading-icon", { slot: "icon" }), "Book now"))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "bookingInfo": ["bookingInfoChangedHandler"]
+    }; }
+    static get style() { return NylasBookingFormStyle0; }
+}, [1, "nylas-booking-form", {
+        "bookedEventLoading": [4, "booked-event-loading"],
+        "bookedEventError": [8, "booked-event-error"],
+        "bookingInfo": [8, "booking-info"],
+        "eventInfo": [16],
+        "name": [32],
+        "email": [32],
+        "guestEmails": [32],
+        "isNameValid": [32],
+        "isEmailValid": [32]
+    }, undefined, {
+        "bookingInfo": ["bookingInfoChangedHandler"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-booking-form',
+        stateToProps: new Map([
+            ['scheduler.bookedEventLoading', 'bookedEventLoading'],
+            ['scheduler.bookedEventError', 'bookedEventError'],
+            ['scheduler.bookingInfo', 'bookingInfo'],
+            ['scheduler.eventInfo', 'eventInfo'],
+        ]),
+        eventToProps: {
+            backButtonClicked: async (_event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.toggleAdditionalData(false);
+            },
+            nameChanged: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.setParticipantName(event.detail);
+            },
+            emailChanged: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasBookingForm.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-booking-form", "loading-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-booking-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasBookingForm);
+            }
+            break;
+        case "loading-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasBookingForm as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-booking-form2.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-booking-form2.js","mappings":"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","names":["l","t","e","r","c","o"],"sources":["../../node_modules/.pnpm/@spectrum-web-components+icons-workflow@0.40.4/node_modules/@spectrum-web-components/icons-workflow/src/icons/AddCircle.js","../../node_modules/.pnpm/@spectrum-web-components+icons-workflow@0.40.4/node_modules/@spectrum-web-components/icons-workflow/src/elements/IconAddCircle.js","../../node_modules/.pnpm/@spectrum-web-components+icons-workflow@0.40.4/node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-add-circle.js","../../node_modules/.pnpm/@spectrum-web-components+icons-workflow@0.40.4/node_modules/@spectrum-web-components/icons-workflow/src/icons/RemoveCircle.js","../../node_modules/.pnpm/@spectrum-web-components+icons-workflow@0.40.4/node_modules/@spectrum-web-components/icons-workflow/src/elements/IconRemoveCircle.js","../../node_modules/.pnpm/@spectrum-web-components+icons-workflow@0.40.4/node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-remove-circle.js","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":["\"use strict\";import{tag as l}from\"../custom-tag.js\";export{setCustomTemplateLiteralTag}from\"../custom-tag.js\";export const AddCircleIcon=({width:a=24,height:e=24,hidden:t=!1,title:r=\"Add Circle\"}={})=>l`<svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=${a}\n    height=${e}\n    viewBox=\"0 0 36 36\"\n    aria-hidden=${t?\"true\":\"false\"}\n    role=\"img\"\n    fill=\"currentColor\"\n    aria-label=${r}\n  >\n    <path\n      d=\"M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10 17a1 1 0 0 1-1 1h-7v7a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-7H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h7V9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h7a1 1 0 0 1 1 1Z\"\n    />\n  </svg>`;\n//# sourceMappingURL=AddCircle.js.map\n","\"use strict\";import{html as e}from\"@spectrum-web-components/base\";import{IconBase as t}from\"@spectrum-web-components/icon\";import{AddCircleIcon as r}from\"../icons/AddCircle.js\";import{setCustomTemplateLiteralTag as l}from\"../custom-tag.js\";export class IconAddCircle extends t{render(){return l(e),r({hidden:!this.label,title:this.label})}}\n//# sourceMappingURL=IconAddCircle.js.map\n","\"use strict\";import{IconAddCircle as e}from\"../src/elements/IconAddCircle.js\";import{defineElement as c}from\"@spectrum-web-components/base/src/define-element.js\";c(\"sp-icon-add-circle\",e);\n//# sourceMappingURL=sp-icon-add-circle.js.map\n","\"use strict\";import{tag as l}from\"../custom-tag.js\";export{setCustomTemplateLiteralTag}from\"../custom-tag.js\";export const RemoveCircleIcon=({width:e=24,height:t=24,hidden:a=!1,title:r=\"Remove Circle\"}={})=>l`<svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=${t}\n    viewBox=\"0 0 36 36\"\n    width=${e}\n    aria-hidden=${a?\"true\":\"false\"}\n    role=\"img\"\n    fill=\"currentColor\"\n    aria-label=${r}\n  >\n    <path\n      d=\"M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10 17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1Z\"\n    />\n  </svg>`;\n//# sourceMappingURL=RemoveCircle.js.map\n","\"use strict\";import{html as e}from\"@spectrum-web-components/base\";import{IconBase as t}from\"@spectrum-web-components/icon\";import{RemoveCircleIcon as r}from\"../icons/RemoveCircle.js\";import{setCustomTemplateLiteralTag as l}from\"../custom-tag.js\";export class IconRemoveCircle extends t{render(){return l(e),r({hidden:!this.label,title:this.label})}}\n//# sourceMappingURL=IconRemoveCircle.js.map\n","\"use strict\";import{IconRemoveCircle as e}from\"../src/elements/IconRemoveCircle.js\";import{defineElement as o}from\"@spectrum-web-components/base/src/define-element.js\";o(\"sp-icon-remove-circle\",e);\n//# sourceMappingURL=sp-icon-remove-circle.js.map\n",":host {\n  display: block;\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}\n\nform {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.error {\n  padding: 0.5rem 1rem;\n  background: var(--nylas-error);\n  color: var(--nylas-base-25);\n  border-radius: var(--nylas-border-radius-2x);\n  font-weight: 600;\n}\n\nsp-field-label {\n  font-size: 14px;\n  color: var(--nylas-base-800);\n}\n\nsp-textfield {\n  --spectrum-textfield-border-color: var(--nylas-base-300);\n  position: relative;\n  width: 100%;\n  height: 48px;\n  margin-bottom: 16px;\n  background-color: var(--nylas-base-100);\n  color: var(--nylas-base-500);\n}\n\n.cta {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: 0.5rem;\n  box-sizing: border-box;\n  border-top: 1px solid var(--nylas-base-100);\n}\n\nsp-button {\n  background-color: transparent;\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  &:hover {\n    background-color: var(--nylas-base-100);\n    color: var(--nylas-primary);\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  &:active {\n    background-color: var(--nylas-base-200);\n    color: var(--nylas-base-800);\n  }\n\n  &.back {\n    width: 50%;\n    background-color: transparent;\n    color: var(--nylas-base-600);\n    border: 1px solid var(--nylas-base-300);\n    &:hover {\n      border-color: var(--nylas-primary);\n    }\n    &:active {\n      border: 2px solid var(--nylas-base-800);\n    }\n  }\n\n  &.book {\n    width: 50%;\n    background-color: var(--nylas-primary);\n    color: var(--nylas-base-0);\n    &:hover {\n      background-color: var(--nylas-base-600);\n    }\n    &:active {\n      background-color: var(--nylas-base-800);\n    }\n  }\n}\n\n.input-wrapper sp-button {\n  margin-bottom: 1rem;\n}\n\n.button-wrapper {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  height: max-content;\n  position: relative;\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: 1px solid var(--nylas-base-300);\n  border-radius: 0 var(--nylas-border-radius) var(--nylas-border-radius) 0;\n  height: 48px;\n  width: 48px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  sp-icon-cross300 {\n    color: var(--nylas-base-600);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-add-circle';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-remove-circle';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasErrorResponse, NylasSchedulerConnector } from '../../..';\nimport type { NylasEvent, NylasSchedulerBookingData } from '../../..';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\nimport { debug } from '@/utils/utils';\nimport { NylasSchedulerBookingParticipant } from '@nylas/core';\n\n/**\n * The booking form component.\n * @part nbf - The booking form host.\n * @part nbf__input-label - The input label.\n * @part nbf__input-textfield - The input textfield.\n * @part nbf__button-ghost - The ghost button for adding guests.\n * @part nbf__button-primary - The primary button for booking.\n * @part nbf__button-outline - The outline button for canceling.\n * @slot custom-booking-form - The custom booking form.\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  @Prop() readonly bookedEventLoading?: boolean = false;\n  @Prop() readonly bookedEventError?: NylasErrorResponse = undefined;\n\n  /**\n   * The booking info.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The booked event (Used to track if a booking is created in an eventOverride).\n   */\n  @Prop() readonly eventInfo?: NylasEvent;\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.\n   */\n  @Event() detailsConfirmed!: EventEmitter<NylasSchedulerBookingData>;\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   * 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  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {\n    debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);\n    if (this.bookingInfo) {\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  private changeName(name: string) {\n    this.name = name;\n    this.nameChanged.emit(name);\n  }\n\n  /**\n   * Change the email.\n   * @param email The email to select.\n   */\n  private changeEmail(email: string) {\n    this.email = email;\n    this.emailChanged.emit(email);\n  }\n\n  /**\n   * Handle guest emails changed.\n   */\n  private handleGuestChange = (guestIndex: number, email: string) => {\n    if (email === '') {\n      return;\n    }\n    const guests = [...this.guestEmails];\n    guests[guestIndex] = email;\n    this.guestEmails = [...guests];\n  };\n\n  /**\n   * Handle add guest button clicked.\n   */\n  private addGuestButtonClickedHandler = () => {\n    this.guestEmails = [...this.guestEmails, ''];\n  };\n\n  /**\n   * Handle remove guest button clicked.\n   */\n  private removeGuestButtonClickHandler = (e: Event, guestIndex: number) => {\n    e.preventDefault();\n    const guests = [...this.guestEmails];\n    guests.splice(guestIndex, 1);\n    this.guestEmails = [...guests];\n  };\n\n  /**\n   * Handle back button clicked.\n   */\n  private handleBackButtonClicked = () => {\n    this.backButtonClicked.emit();\n  };\n\n  /**\n   *\n   * Handle book button clicked.\n   */\n  private bookButtonClickedHandler = async (e: Event) => {\n    e.preventDefault();\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      return; // TODO: Add error handling\n    }\n    if (!email || email === '') {\n      this.isEmailValid = false;\n      return; // TODO: Add error handling\n    }\n\n    let guests: NylasSchedulerBookingParticipant[] = [];\n    if (this.guestEmails.length > 0) {\n      guests = this.guestEmails.map((email: string) => ({ name: '', email: email.trim() }));\n    } else if (this.bookingInfo?.guests) {\n      guests = this.bookingInfo?.guests;\n    }\n\n    this.detailsConfirmed.emit({\n      primaryParticipant: {\n        name: name,\n        email: email,\n      },\n      guests: guests,\n      additionalFields: {\n        ...this.bookingInfo?.additionalFields,\n      },\n    });\n  };\n\n  @RegisterComponent<NylasBookingForm, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-booking-form',\n    stateToProps: new Map([\n      ['scheduler.bookedEventLoading', 'bookedEventLoading'],\n      ['scheduler.bookedEventError', 'bookedEventError'],\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.eventInfo', 'eventInfo'],\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    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <sp-theme theme=\"spectrum\" color=\"light\" scale=\"medium\">\n          <form onSubmit={e => this.bookButtonClickedHandler(e)}>\n            <div class=\"nylas-booking-form\">\n              {this.bookedEventError && <div class={'error'}>Something went wrong, please try again later.</div>}\n              <slot name=\"custom-booking-form\">\n                <div class=\"input-wrapper\">\n                  <sp-field-label required size=\"xl\" for=\"name-0-m\" part=\"nbf__input-label\">\n                    Name\n                  </sp-field-label>\n                  <sp-textfield\n                    id=\"name-0-m\"\n                    size=\"xl\"\n                    placeholder=\"Enter your name\"\n                    value={this.name}\n                    invalid={!this.isNameValid}\n                    part=\"nbf__input-textfield\"\n                    onChange={(e: Event) => this.changeName((e.target as HTMLInputElement)?.value)}\n                  ></sp-textfield>\n                </div>\n                <div class=\"input-wrapper\">\n                  <sp-field-label required size=\"xl\" for=\"email-0-m\" part=\"nbf__input-label\">\n                    Email\n                  </sp-field-label>\n                  <sp-textfield\n                    id=\"email-0-m\"\n                    size=\"xl\"\n                    placeholder=\"Enter your email\"\n                    value={this.email}\n                    invalid={!this.isEmailValid}\n                    part=\"nbf__input-textfield\"\n                    onChange={(e: Event) => this.changeEmail((e.target as HTMLInputElement)?.value)}\n                  ></sp-textfield>\n                </div>\n                <div class=\"input-wrapper\">\n                  <sp-button class=\"add-guest\" variant=\"primary\" part=\"nbf__button-ghost\" onClick={this.addGuestButtonClickedHandler}>\n                    <sp-icon-add-circle slot=\"icon\"></sp-icon-add-circle>\n                    Add guest\n                  </sp-button>\n                  {this.guestEmails.map((email, index) => (\n                    <div class=\"input-wrapper button-wrapper\">\n                      <sp-textfield\n                        id={`guest-email-${index}-m`}\n                        size=\"xl\"\n                        class=\"guest-email\"\n                        placeholder=\"Enter guest email\"\n                        value={email}\n                        part=\"nbf__input-textfield\"\n                        onChange={(e: Event) => this.handleGuestChange(index, (e.target as HTMLInputElement)?.value)}\n                      ></sp-textfield>\n                      <sp-infield-button size=\"s\" class=\"remove-guest\" treatment=\"outline\" inline=\"end\" onClick={(e: Event) => this.removeGuestButtonClickHandler(e, index)}>\n                        <sp-icon-cross300 size=\"s\"></sp-icon-cross300>\n                      </sp-infield-button>\n                    </div>\n                  ))}\n                </div>\n              </slot>\n            </div>\n            <div class=\"cta\">\n              <sp-button treatment=\"outline\" variant=\"secondary\" class={'back'} part=\"nbf__button-outline\" size=\"xl\" onClick={this.handleBackButtonClicked}>\n                Back\n              </sp-button>\n              <sp-button variant=\"primary\" class={'book'} part=\"nbf__button-primary\" type=\"submit\" size=\"xl\">\n                {this.bookedEventLoading && <loading-icon slot=\"icon\"></loading-icon>}\n                Book now\n              </sp-button>\n            </div>\n          </form>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-cancelled-event-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NylasCancelledEventCard extends Components.NylasCancelledEventCard, HTMLElement {}
+export const NylasCancelledEventCard: {
+    prototype: NylasCancelledEventCard;
+    new (): NylasCancelledEventCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nylas-cancelled-event-card.js

@@ -0,0 +1,8 @@
+import { N as NylasCancelledEventCard$1, d as defineCustomElement$1 } from './nylas-cancelled-event-card2.js';
+
+const NylasCancelledEventCard = NylasCancelledEventCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasCancelledEventCard, defineCustomElement };
+
+//# sourceMappingURL=nylas-cancelled-event-card.js.map

package/dist/components/nylas-cancelled-event-card.js.map

@@ -0,0 +1 @@
+{"file":"nylas-cancelled-event-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -0,0 +1,85 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import './sp-icon-chevron-left.js';
+import { d as debug } from './utils.js';
+import { d as defineCustomElement$1 } from './calendar-cancel.js';
+
+const nylasCancelledEventCardCss = ":host{display:block}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.nylas-cancelled-event-card{display:flex;align-items:center;flex-direction:column;width:400px;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-cancelled-event-card__title{font-size:18px;font-weight:600}.nylas-cancelled-event-description{font-size:16px;font-weight:500}.nylas-cancelled-event-card__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)}.nylas-cancelled-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:1rem;padding:0.25rem;width:100%}sp-button:hover{border-color:var(--nylas-primary)}sp-button:active{border-color:var(--nylas-base-600)}";
+const NylasCancelledEventCardStyle0 = nylasCancelledEventCardCss;
+
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasCancelledEventCard = proxyCustomElement(class NylasCancelledEventCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeCancelEventCardClicked = createEvent(this, "closeCancelEventCardClicked", 7);
+        this.handleCloseClicked = () => {
+            this.closeCancelEventCardClicked.emit();
+        };
+        this.cancelledEvent = undefined;
+    }
+    connectedCallback() {
+        debug(`[nylas-cancelled-event-card] Component connected`);
+    }
+    async componentWillLoad() {
+        debug(`[nylas-cancelled-event-card] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-cancelled-event-card] Component did load`);
+    }
+    disconnectedCallback() {
+        debug(`[nylas-cancelled-event-card] Component disconnected`);
+    }
+    render() {
+        return (h(Host, { key: 'ef4e854de0efd23e0699b4d93e97e5f747afd93e', part: "ncec" }, h("sp-theme", { key: 'ad4600c349e7bf73810a655ec26aca447a2d1549', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '067155046482e7e460ae1d7ab1122b3c20da4cb6', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '814b26b7ff5f759d6f29959e1db62e7311590a07', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '1ad45993fa5515a7bc985ec911b7ba1c9c42d616' })), h("h3", { key: 'a51c173fdadade257d0f3f9f504f3db57a4fac6e', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '30cb6513af6b7b4c808d6c6e0b64a76c97c2d38f', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A confirmation email has been sent to ", this.cancelledEvent?.booking_data?.participants.map(p => p.email).join(', ')), h("div", { key: '6bfe6cf05556540aaf68cd7e205fab7bc9765144', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: 'df62948244cd18582a3f51198dc5ddd3986d1014', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
+    }
+    static get style() { return NylasCancelledEventCardStyle0; }
+}, [1, "nylas-cancelled-event-card", {
+        "cancelledEvent": [16]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-cancelled-event-card',
+        eventToProps: {},
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasCancelledEventCard.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-cancelled-event-card", "calendar-cancel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-cancelled-event-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasCancelledEventCard);
+            }
+            break;
+        case "calendar-cancel-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasCancelledEventCard as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-cancelled-event-card2.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-cancelled-event-card2.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,8zCAA8zC,CAAC;AACl2C,sCAAe,0BAA0B;;;;;;;;;;;;;;;;MCoB5B,uBAAuB;;;;;;QA2B1B,uBAAkB,GAAG;YAC3B,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;SACzC,CAAC;;;IAlBF,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;IAWD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,IACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY,IACtE,8EAAwB,CACpB,EACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D,EACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,8CACpC,IAAI,CAAC,cAAc,EAAE,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAC/G,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAEnG,CACR,CACF,CACG,CACN,EACP;KACH;;;;;AAvBD;IALC,iBAAiB,CAAiG;QACjH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.scss?tag=nylas-cancelled-event-card&encapsulation=shadow","src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsp-theme {\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.nylas-cancelled-event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 400px;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 1.5rem;\n  position: relative;\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.nylas-cancelled-event-card__title {\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.nylas-cancelled-event-description {\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.nylas-cancelled-event-card__calendar-icon {\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}\n\n.nylas-cancelled-event-card__cta {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  margin-top: 1rem;\n}\n\ncalendar-cancel-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nsp-button {\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 1rem;\n  padding: 0.25rem;\n  width: 100%;\n  &:hover {\n    border-color: var(--nylas-primary);\n  }\n  &:active {\n    border-color: var(--nylas-base-600);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left';\nimport { debug } from '@/utils/utils';\n\n/**\n * The cancelled event card component.\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEvent!: NylasEvent;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<void>;\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  private handleCloseClicked = () => {\n    this.closeCancelEventCardClicked.emit();\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n            <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n              Your booking has been cancelled successfully!\n            </h3>\n            <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n              A confirmation email has been sent to {this.cancelledEvent?.booking_data?.participants.map(p => p.email).join(', ')}\n            </div>\n            <div class=\"nylas-cancelled-event-card__cta\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n                Close\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-composer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NylasComposer extends Components.NylasComposer, HTMLElement {}
+export const NylasComposer: {
+    prototype: NylasComposer;
+    new (): NylasComposer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;