@nylas/web-elements 1.0.0-prealpha1

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

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-booking-form.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booking-form/nylas-booking-form.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -0,0 +1,78 @@
+: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);
+}

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

@@ -0,0 +1,107 @@
+var __decorate = (this && this.__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 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { h, Host } from "@stencil/core";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left";
+import { debug } from "../../../utils/utils";
+export class NylasCancelledEventCard {
+    constructor() {
+        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 is() { return "nylas-cancelled-event-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-cancelled-event-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-cancelled-event-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cancelledEvent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasEvent",
+                    "resolved": "{ id: string; event_id: string; owner_email: string; status: string; booking_data: { participants: { email: string; name: string; }[]; duration: number; event_type: number; start_time: number; end_time: number; title: string; description: string; timezone: string; }; created_at: string; updated_at: string; config: { id: number; data: { version: string; availability: { duration_minutes: number; interval_minutes: number; round_to_30_minutes: boolean; participants: { email: string; name: string; calendar_ids: string[]; open_hours: { days: number[]; timezone: string; start: string; end: string; }[]; }[]; }; event_booking: { title: string; description: string; type: number; organizer: { email: string; calendar_id: string; }; }; }; created_at: string; updated_at: string; is_session_defined: boolean; }; }",
+                    "references": {
+                        "NylasEvent": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::NylasEvent"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The participant's name who booked the event / is logged in."
+                }
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeCancelEventCardClicked",
+                "name": "closeCancelEventCardClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the close button is clicked on the cancelled event card."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+__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);
+//# sourceMappingURL=nylas-cancelled-event-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-cancelled-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG9E,OAAO,oEAAoE,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAgBtC,MAAM,OAAO,uBAAuB;;QA2B1B,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;QAC1C,CAAC,CAAC;;;IAlBF,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;IAC3D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAC/D,CAAC;IAWD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ;gBACpD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY;oBACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY;wBACtE,8EAAwB,CACpB;oBACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D;oBACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB;;wBACpC,IAAI,CAAC,cAAc,EAAE,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAC/G;oBACN,4DAAK,KAAK,EAAC,iCAAiC;wBAC1C,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAEnG,CACR,CACF,CACG,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAxBC;IALC,iBAAiB,CAAiG;QACjH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD","sourcesContent":["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"]}

package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.css

@@ -0,0 +1,150 @@
+:host {
+  display: block;
+}
+
+.header {
+  margin: 0 0.5rem;
+  margin-bottom: 1rem;
+}
+.header h2 {
+  font-size: 1.3rem;
+  font-weight: 400;
+  line-height: 1rem;
+  margin-bottom: 0.625rem;
+  color: var(--nylas-base-800);
+}
+.header h2 strong {
+  font-weight: 600;
+}
+
+@keyframes pulsate {
+  0% {
+    background-color: var(--nylas-base-50);
+  }
+  50% {
+    background-color: var(--nylas-base-100);
+  }
+  100% {
+    background-color: var(--nylas-base-50);
+  }
+}
+.dates {
+  display: grid;
+  justify-items: center;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.dates .date {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 3vh;
+  width: 3vh;
+  min-width: 3rem;
+  min-height: 3rem;
+  cursor: pointer;
+  border-radius: var(--nylas-border-radius-2x);
+  font-size: 1rem;
+  font-weight: 600;
+  font-family: inherit;
+  color: var(--nylas-base-text);
+  background-color: var(--nylas-base-100);
+  cursor: pointer;
+  border: none;
+}
+.dates .date:hover:not(:disabled) {
+  box-shadow: 0 0 0 2px var(--nylas-base-500) inset;
+}
+.dates .date.date.current-month {
+  color: var(--nylas-base-800);
+}
+.dates .date.date.selected {
+  background-color: var(--nylas-primary);
+  color: var(--nylas-base-0);
+  font-weight: 800;
+}
+.dates .date.date.day-skeleton {
+  color: var(--nylas-base-300);
+}
+.dates .date:disabled {
+  color: var(--nylas-base-300);
+  background-color: transparent;
+  font-weight: 400;
+  cursor: not-allowed;
+}
+.dates .day {
+  font-size: 0.75rem;
+  color: var(--nylas-base-800);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+.dates .date.day-skeleton {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--nylas-border-radius-2x);
+  animation: pulsate 1.5s infinite ease-in-out;
+  background-color: var(--nylas-base-50);
+}
+.dates .date.current-day::after {
+  content: "";
+  position: absolute;
+  bottom: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--nylas-base-500);
+}
+.dates .date.current-day.selected::after {
+  background-color: var(--nylas-base-100);
+}
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 92px;
+}
+.pagination .chevron-right {
+  transform: rotate(180deg);
+}
+.pagination .button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 3vh;
+  width: 3vh;
+  min-width: 3em;
+  min-height: 3em;
+  cursor: pointer;
+  border-radius: var(--nylas-border-radius-2x);
+  background-color: transparent;
+  color: var(--nylas-base-800);
+  cursor: pointer;
+  border: none;
+}
+.pagination .button:hover {
+  background-color: var(--nylas-base-50);
+}
+.pagination .button:active {
+  background-color: var(--nylas-base-100);
+}
+.pagination .button:disabled {
+  background-color: transparent;
+  color: var(--nylas-base-300);
+  cursor: not-allowed;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--nylas-base-500);
+}

package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.js

@@ -0,0 +1,213 @@
+var __decorate = (this && this.__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 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+import { timeDay } from "d3-time";
+export class NylasDatePicker {
+    constructor() {
+        this.selectableDates = undefined;
+        this.selectedDate = undefined;
+        this.loadingState = undefined;
+        this.month = this.selectedDate || new Date();
+        this.dates = this.getDates();
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    componentWillLoad() { }
+    getDates() {
+        const lastDayOfMonth = getLastDayOfMonth(this.month);
+        const firstDayOfMonth = getFirstDayOfMonth(this.month);
+        return timeDay.range(timeDay.offset(firstDayOfMonth, -firstDayOfMonth.getDay()), timeDay.offset(lastDayOfMonth, 7 - lastDayOfMonth.getDay()));
+    }
+    selectDate(date) {
+        this.dateSelected.emit(date);
+    }
+    changeMonth(change) {
+        this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);
+        this.dates = this.getDates();
+        this.monthChanged.emit(this.month);
+        this.selectDate();
+    }
+    isSelected(date, selectedDate, selectableDates) {
+        return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;
+    }
+    render() {
+        return (h(Host, { key: '5cab50ccbf616d67120903145df37a1d7a67286d', part: "ndp" }, h("div", { key: 'afefcaac8f8236afb3b01b907a5070eb554d81ff', class: 'header flex-row' }, h("h2", { key: '194de73b58850398d4619f2a38dc2d50e9a8ec81', part: 'ndp__month-header' }, h("strong", { key: '17187c92e9acb9942493e590d5004dfb4caafbc1' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: '1aa4c7b8ee24944a90b9e1e6166cea1ddd9a43d9', class: 'pagination' }, h("button", { key: '0949a1855c5971bba761ff088a065c548f742592', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: 'a89b6c735a1c1f1470b7fa3c69033f32ef3f90ae' })), h("button", { key: '11fb5bb84e9cebbb7087f9d9b0e8a31f30406ffb', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, part: "ndp__month-button" }, h("chevron-icon", { key: '42ecd273a5d33997a37acbb404c915dedf3af86f' })))), h("div", { key: '084bdae3a4d72cc9b241e7183b8fa478a3d3b72b', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
+            return (h("div", { class: 'day', part: "ndp__day" }, day));
+        }), this.dates.map((date, i) => {
+            if (this.loadingState && this.loadingState?.api === 'availability') {
+                return (h("button", { disabled: true, class: {
+                        'date day-skeleton': true,
+                        'current-month': isSameMonth(date, this.month),
+                    }, style: { animationDelay: `${i * 20}ms` }, part: 'ndp__date' }, date.getDate()));
+            }
+            return (h("button", { class: {
+                    'date': true,
+                    'selected': !!(this.selectedDate && isSameDay(date, this.selectedDate) && this.selectableDates && this.selectableDates?.length > 0),
+                    'current-day': isSameDay(date, new Date()),
+                    'current-month': isSameMonth(date, this.month),
+                }, "aria-lang": date.toLocaleDateString(undefined, { dateStyle: 'full' }), disabled: this.selectableDates && this.selectableDates?.find(d => isSameDay(d, date)) === undefined, onClick: () => this.selectDate(date), part: `ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}` }, date.getDate()));
+        }))));
+    }
+    static get is() { return "nylas-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectableDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date[]",
+                    "resolved": "Date[] | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The dates that are selectable."
+                }
+            },
+            "selectedDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date."
+                }
+            },
+            "loadingState": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingState",
+                    "resolved": "any",
+                    "references": {
+                        "LoadingState": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::unknown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The loading state."
+                },
+                "attribute": "loading-state",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "month": {},
+            "dates": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateSelected",
+                "name": "dateSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when a date is selected."
+                },
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "monthChanged",
+                "name": "monthChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the month is changed."
+                },
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-date-picker',
+        stateToProps: new Map([
+            ['scheduler.selectableDates', 'selectableDates'],
+            ['scheduler.selectedDate', 'selectedDate'],
+            ['scheduler.loadingState', 'loadingState'],
+        ]),
+        eventToProps: {
+            dateSelected: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.selectDate(event.detail);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasDatePicker.prototype, "render", null);
+//# sourceMappingURL=nylas-date-picker.js.map

package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-date-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-date-picker/nylas-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { timeDay } from 'd3-time';\nimport { LoadingState, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\n\n/**\n * The date picker component.\n * @part ndp - The date picker host.\n * @part ndp__month-header - The month header.\n * @part ndp__month-button - The month button.\n * @part ndp__day - The day.\n * @part ndp__date - The date.\n * @part ndp__date--selected - The selected date.\n * @part ndp__date--current-day - The current day.\n * @part ndp__date--current-month - The dates in the current month.\n */\n@Component({\n  tag: 'nylas-date-picker',\n  styleUrl: 'nylas-date-picker.scss',\n  shadow: true,\n})\nexport class NylasDatePicker {\n  /**\n   * The dates that are selectable.\n   */\n  @Prop() selectableDates?: Date[];\n\n  /**\n   * The selected date.\n   */\n  @Prop() selectedDate?: Date;\n\n  /**\n   * The loading state.\n   */\n  @Prop() readonly loadingState?: LoadingState;\n\n  /**\n   * The month to display.\n   */\n  @State() month: Date = this.selectedDate || new Date();\n\n  /**\n   * The dates to render.\n   */\n  @State() dates: Date[] = this.getDates();\n\n  /**\n   * This event is fired when a date is selected.\n   */\n  @Event() dateSelected!: EventEmitter<Date>;\n\n  /**\n   * This event is fired when the month is changed.\n   */\n  @Event() monthChanged!: EventEmitter<Date>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Get the dates to render, including the days from the previous and next months.\n   * @returns The dates to render.\n   */\n  private getDates() {\n    const lastDayOfMonth = getLastDayOfMonth(this.month);\n    const firstDayOfMonth = getFirstDayOfMonth(this.month);\n\n    return timeDay.range(timeDay.offset(firstDayOfMonth, -firstDayOfMonth.getDay()), timeDay.offset(lastDayOfMonth, 7 - lastDayOfMonth.getDay()));\n  }\n\n  /**\n   * Select a date.\n   * @param date The date to select.\n   */\n  private selectDate(date?: Date) {\n    this.dateSelected.emit(date);\n  }\n\n  /**\n   * Change the month.\n   * @param change The change in months.\n   */\n  private changeMonth(change: number) {\n    this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);\n    this.dates = this.getDates();\n    this.monthChanged.emit(this.month);\n    // unset selected date when changing month\n    this.selectDate();\n  }\n\n  private isSelected(date: Date | undefined, selectedDate: Date | undefined, selectableDates: Date[] | undefined) {\n    return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;\n  }\n\n  @RegisterComponent<NylasDatePicker, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-date-picker',\n    stateToProps: new Map([\n      ['scheduler.selectableDates', 'selectableDates'],\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.loadingState', 'loadingState'],\n    ]),\n    eventToProps: {\n      dateSelected: async (event: CustomEvent<Date>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectDate(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ndp\">\n        <div class={'header flex-row'}>\n          <h2 part={'ndp__month-header'}>\n            <strong>{this.month.toLocaleDateString(undefined, { month: 'long' })}</strong>\n            &nbsp;\n            {this.month.toLocaleDateString(undefined, { year: 'numeric' })}\n          </h2>\n          <div class={'pagination'}>\n            <button onClick={() => this.changeMonth(-1)} class={{ 'chevron-left': true, 'button': true }} disabled={this.month <= new Date()} part=\"ndp__month-button\">\n              <chevron-icon />\n            </button>\n            <button onClick={() => this.changeMonth(1)} class={{ 'chevron-right': true, 'button': true }} part=\"ndp__month-button\">\n              <chevron-icon />\n            </button>\n          </div>\n        </div>\n\n        <div class={'dates'}>\n          {['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {\n            return (\n              <div class={'day'} part=\"ndp__day\">\n                {day}\n              </div>\n            );\n          })}\n          {this.dates.map((date, i) => {\n            if (this.loadingState && this.loadingState?.api === 'availability') {\n              return (\n                <button\n                  disabled\n                  class={{\n                    'date day-skeleton': true,\n                    'current-month': isSameMonth(date, this.month),\n                  }}\n                  style={{ animationDelay: `${i * 20}ms` }}\n                  part={'ndp__date'}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            }\n            return (\n              <button\n                class={{\n                  'date': true,\n                  'selected': !!(this.selectedDate && isSameDay(date, this.selectedDate) && this.selectableDates && this.selectableDates?.length > 0),\n                  'current-day': isSameDay(date, new Date()),\n                  'current-month': isSameMonth(date, this.month),\n                }}\n                aria-lang={date.toLocaleDateString(undefined, { dateStyle: 'full' })}\n                disabled={this.selectableDates && this.selectableDates?.find(d => isSameDay(d, date)) === undefined}\n                onClick={() => this.selectDate(date)}\n                part={`ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}`}\n              >\n                {date.getDate()}\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}