@nylas/web-elements 1.0.0-prealpha1

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

@@ -0,0 +1 @@
+{"file":"nylas-provider.js","mappings":"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","names":["NylasProvider","NylasAuth"],"sources":["src/connector/nylas-connector/index.ts","src/components/nylas-provider/nylas-provider.css?tag=nylas-provider&encapsulation=shadow","src/components/nylas-provider/nylas-provider.tsx"],"sourcesContent":["import { RouterInterface } from '@/routers/router-interface';\nimport { NylasAuthStoreType } from '@/stores/auth-store';\nimport { NylasMailboxStoreType } from '@/stores/mailbox-store';\nimport { NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport { debug } from '@/utils/utils';\nimport type { NylasAuthType } from '@nylas/core';\nimport { NylasConnectorInterface } from '../connector-interface';\nimport { NylasAuthConnector } from '../shared/api/auth';\nimport { NylasFoldersConnector } from '../shared/api/folders';\nimport { NylasMessagesConnector } from '../shared/api/messages';\nimport { NylaSchedulerAPIConnector } from '../shared/api/scheduler';\nimport { NylasThreadsConnector } from '../shared/api/threads';\n/**\n * Base class for the Nylas connector.\n */\nexport class NylasConnector implements NylasConnectorInterface {\n  public router: RouterInterface;\n  public nylasAuth: NylasAuthType;\n  public nylasAuthStore: NylasAuthStoreType;\n  public nylasMailboxStore: NylasMailboxStoreType;\n  public nylasSchedulerStore: NylasSchedulerStoreType;\n  public schedulerAPIURL: string;\n\n  private _authConnector: NylasAuthConnector | undefined;\n  private _threadConnector: NylasThreadsConnector | undefined;\n  private _messageConnector: NylasMessagesConnector | undefined;\n  private _schedulerAPIConnector: NylaSchedulerAPIConnector | undefined;\n  private _foldersConnector: NylasFoldersConnector | undefined;\n\n  constructor(\n    router: RouterInterface,\n    nylasAuth: NylasAuthType,\n    nylasAuthStore: NylasAuthStoreType,\n    nylasMailboxStore: NylasMailboxStoreType,\n    nylasSchedulerStore: NylasSchedulerStoreType,\n    schedulerAPIURL: string = 'https://scheduler.nylas.com',\n  ) {\n    this.router = router;\n    this.schedulerAPIURL = schedulerAPIURL;\n    this.nylasAuth = nylasAuth;\n    this.nylasAuthStore = nylasAuthStore;\n    this.nylasMailboxStore = nylasMailboxStore;\n    this.nylasSchedulerStore = nylasSchedulerStore;\n  }\n\n  public init() {\n    debug('NylasConnector init');\n  }\n\n  public get authStore() {\n    return this.nylasAuthStore;\n  }\n\n  public get mailboxStore() {\n    return this.nylasMailboxStore;\n  }\n\n  public get schedulerStore() {\n    return this.nylasSchedulerStore;\n  }\n\n  public get auth() {\n    if (this._authConnector) {\n      return this._authConnector;\n    }\n    this._authConnector = new NylasAuthConnector(this.nylasAuth, this.nylasAuthStore);\n    return this._authConnector;\n  }\n\n  public get threads() {\n    if (this._threadConnector) {\n      return this._threadConnector;\n    }\n    this._threadConnector = new NylasThreadsConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore, this.router);\n    return this._threadConnector;\n  }\n\n  public get messages() {\n    if (this._messageConnector) {\n      return this._messageConnector;\n    }\n    this._messageConnector = new NylasMessagesConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore);\n    return this._messageConnector;\n  }\n\n  public get folders() {\n    if (this._foldersConnector) {\n      return this._foldersConnector;\n    }\n    this._foldersConnector = new NylasFoldersConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore);\n    return this._foldersConnector;\n  }\n\n  public get scheduler() {\n    if (this._schedulerAPIConnector) {\n      return this._schedulerAPIConnector;\n    }\n    this._schedulerAPIConnector = new NylaSchedulerAPIConnector({\n      schedulerAPIURL: this.schedulerAPIURL,\n      schedulerStore: this.schedulerStore,\n    });\n    return this._schedulerAPIConnector;\n  }\n\n  public getAuth() {\n    return this.nylasAuth;\n  }\n\n  public resetStores() {\n    this.nylasAuthStore.reset();\n    this.nylasMailboxStore.reset();\n  }\n\n  public async logout() {\n    await this.nylasAuth.logout();\n    this.resetStores();\n  }\n}\n\nexport type PublicMethods<T> = {\n  [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;\n}[keyof T];\n\nexport type NylasConnectorPublicMethods = PublicMethods<NylasConnector>;\n",":host {\n  display: contents;\n}\n","import { NylasBaseProvider } from '@/common/abstract-provider';\nimport { RegisteredComponent } from '@/common/register-component';\nimport { NylasConnector } from '@/connector/nylas-connector';\nimport { HashRouter } from '@/routers/hash-router';\nimport { CreateNylasAuthStore, NylasAuthStoreType } from '@/stores/auth-store';\nimport { CreateNylasMailboxStore, NylasMailboxStoreType } from '@/stores/mailbox-store';\nimport { CreateNylasSchedulerStore, NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport type { NylasAuthType } from '@nylas/core';\nimport { AuthConfg, NylasAuth } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, h } from '@stencil/core';\nimport type { EventOverride } from '@/common/component-types';\nimport { debug } from '@/utils/utils';\n\n/**\n * The Nylas Provider component.\n * This component is used to manage the Nylas Provider.\n * It is used to manage the Nylas Auth instance, the Nylas Connector instance,\n * and the Nylas Store instance.\n */\n@Component({\n  tag: 'nylas-provider',\n  styleUrl: 'nylas-provider.css',\n  shadow: true,\n})\nexport class NylasProvider {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: {\n    auth: NylasAuthStoreType;\n    mailbox: NylasMailboxStoreType;\n    scheduler: NylasSchedulerStoreType;\n  };\n\n  /**\n   * This is a base provide that defines the common methods and properties\n   * that all providers should have.\n   *\n   * Because stencil does not support abstract classes, we have to use a\n   * property to store the base provider instance.\n   */\n  private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n  /**\n   * The Nylas Auth instance.\n   * Used to manage all things authentication with Nylas.\n   */\n  private nylasAuth?: NylasAuthType;\n\n  /**\n   * The Nylas Mailbox Connector instance.\n   * The branins of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasConnector?: NylasConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasProviderElement;\n\n  /**\n   * The Nylas Auth configuration.\n   * Used to manage all things authentication with Nylas.\n   */\n  @Prop({ attribute: 'auth-config' }) readonly authConfig?: AuthConfg;\n\n  /**\n   * This provides a way to override the default event handlers.\n   */\n  @Prop() eventOverrides: EventOverride<Exclude<typeof this.nylasConnector, undefined>> = {};\n\n  /**\n   * Automatically register components that have the `@RegisterComponent` decorator.\n   * If this is set to false, you will need to manually register components using the\n   * `registerComponent` method.\n   * @default true\n   */\n  @Prop() automaticComponentRegistration: boolean = true;\n\n  /**\n   * This event is fired when the provider is initialized.\n   * It can be used to set the initial state of the provider,\n   * or to prevent the provider from firing some default behavior.\n   */\n  @Event({ cancelable: true }) init!: EventEmitter<HTMLNylasProviderElement>;\n\n  /**\n   * This event is fired when the the NyalsAuth isAuthenticated state changes\n   * to true.\n   */\n  @Event({ cancelable: true }) loggedIn!: EventEmitter<HTMLNylasProviderElement>;\n\n  /**\n   * This event is fired when the the NyalsAuth isAuthenticated state changes\n   * to true.\n   */\n  @Event({ cancelable: true }) loggedOut!: EventEmitter<HTMLNylasProviderElement>;\n\n  connectedCallback() {\n    debug('[nylas-provider] connectedCallback');\n  }\n\n  async componentWillLoad() {\n    debug('[nylas-provider] componentWillLoad');\n\n    this.stores = {\n      auth: CreateNylasAuthStore(),\n      mailbox: CreateNylasMailboxStore(),\n      scheduler: CreateNylasSchedulerStore(),\n    };\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    const router = new HashRouter();\n\n    /**\n     * Create the NylasAuth instance.\n     * This is used to manage all things authentication with Nylas.\n     */\n    this.nylasAuth = NylasAuth({\n      apiUri: 'https://api.us.nylas.com',\n      elementsApiUri: 'https://elements.us.nylas.com',\n      storageType: 'indexeddb',\n      clientId: 'YOUR_CLIENT_ID',\n      defaultScopes: [],\n      redirectURI: '/',\n      ...this.authConfig,\n    });\n\n    const nylasMailboxStore = this.baseProvider?.getStore('mailbox');\n    if (!nylasMailboxStore) {\n      throw new Error('The mailbox store is not set');\n    }\n\n    const nylasAuthStore = this.baseProvider?.getStore('auth');\n    if (!nylasAuthStore) {\n      throw new Error('The auth store is not set');\n    }\n\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    if (!nylasSchedulerStore) {\n      throw new Error('The scheduler store is not set');\n    }\n\n    this.nylasConnector = new NylasConnector(router, this.nylasAuth, nylasAuthStore, nylasMailboxStore, nylasSchedulerStore);\n\n    const initEvent = this.init.emit(this.host);\n    if (!initEvent.defaultPrevented) {\n      /**\n       * By default, on init, we will validate the session.\n       * This will check if the user is logged in and if the session is still valid.\n       * If the session is not valid, the user will be logged out.\n       */\n      await this.nylasConnector?.auth.validateSession();\n    }\n\n    /**\n     * Listen for changes in the NylasAuth isAuthenticated state.\n     * This is used to fire the loggedIn and loggedOut events.\n     */\n    this.handleAuthChange(nylasAuthStore.state.isAuthenticated);\n\n    this.baseProvider?.componentWillLoad(this.nylasConnector);\n  }\n\n  componentDidLoad() {\n    const nylasAuthStore = this.baseProvider?.getStore('auth');\n    nylasAuthStore?.onChange('isAuthenticated', this.handleAuthChange);\n\n    this.baseProvider?.componentDidLoad();\n  }\n\n  componentDisconnected() {\n    this.baseProvider?.componentDisconnected();\n  }\n\n  /**\n   * This is a custom event handler that is used to register a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to register\n   * @returns Promise<void>\n   */\n  @Listen('registerComponent')\n  async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.registerComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to unregister a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to unregister\n   * @returns Promise<void>\n   */\n  @Listen('unregisterComponent')\n  async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.unregisterComponent(event.detail);\n  }\n\n  /**\n   * This method is used to handle changes in the NylasAuth isAuthenticated state\n   * @param isAuthenticated isAuthenticated state\n   * @returns void\n   */\n  private handleAuthChange = async (isAuthenticated: boolean) => {\n    if (isAuthenticated) {\n      this.loggedIn.emit(this.host);\n    } else {\n      this.loggedOut.emit(this.host);\n    }\n  };\n\n  /**\n   * This method is used to retrieve the NylasAuth instance\n   * @returns The NylasAuth instance\n   */\n  @Method()\n  async getNylasAuth(): Promise<NylasAuthType | undefined> {\n    return this.nylasAuth;\n  }\n\n  /**\n   * This method is used to retrieve the NylasConnector instance\n   * @returns The NylasConnector instance\n   */\n  @Method()\n  async getNylasConnector() {\n    return this.nylasConnector;\n  }\n\n  /**\n   * This method is used to retrieve the mailboxStore instance\n   * @returns The mailboxStore instance\n   */\n  @Method()\n  async getMailboxStore(): Promise<NylasMailboxStoreType | undefined> {\n    return this.baseProvider?.getStore('mailbox');\n  }\n\n  /**\n   * This method is used to retrieve the authStore instance\n   * @returns The authStore instance\n   */\n  @Method()\n  async getAuthStore(): Promise<NylasAuthStoreType | undefined> {\n    return this.baseProvider?.getStore('auth');\n  }\n\n  /**\n   * This method is used to retrieve the NylasScheduler instance\n   * @returns The NylasScheduler instance\n   */\n  @Method()\n  async getNylasSchedulerStore(): Promise<NylasSchedulerStoreType | undefined> {\n    return this.baseProvider?.getStore('scheduler');\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/nylas-scheduler.js

@@ -0,0 +1,392 @@
+import { h, Fragment, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { N as NylasBaseProvider, n as nr } from './index.es.js';
+import { d as debug } from './utils.js';
+import { N as NylaSchedulerAPIConnector, C as CreateNylasSchedulerStore } from './scheduler-store.js';
+import { d as defineCustomElement$l } from './calendar-cancel.js';
+import { d as defineCustomElement$k } from './calendar-check.js';
+import { d as defineCustomElement$j } from './calendar.js';
+import { d as defineCustomElement$i } from './checkmark-circle.js';
+import { d as defineCustomElement$h } from './chevron.js';
+import { d as defineCustomElement$g } from './close.js';
+import { d as defineCustomElement$f } from './globe.js';
+import { d as defineCustomElement$e } from './loading.js';
+import { d as defineCustomElement$d } from './nylas-booked-event-card2.js';
+import { d as defineCustomElement$c } from './nylas-booking-form2.js';
+import { d as defineCustomElement$b } from './nylas-cancelled-event-card2.js';
+import { d as defineCustomElement$a } from './nylas-date-picker2.js';
+import { d as defineCustomElement$9 } from './nylas-locale-switch2.js';
+import { d as defineCustomElement$8 } from './nylas-logo2.js';
+import { d as defineCustomElement$7 } from './nylas-notification2.js';
+import { d as defineCustomElement$6 } from './nylas-selected-event-card2.js';
+import { d as defineCustomElement$5 } from './nylas-timeslot-picker2.js';
+import { d as defineCustomElement$4 } from './people.js';
+import { d as defineCustomElement$3 } from './translate.js';
+import { d as defineCustomElement$2 } from './warning.js';
+
+class NylasSchedulerConnector {
+    constructor({ schedulerAPIURL, nylasSchedulerStore, sessionId }) {
+        if (!schedulerAPIURL) {
+            throw new Error('schedulerAPIURL is required');
+        }
+        if (!nylasSchedulerStore) {
+            throw new Error('nylasSchedulerStore is required');
+        }
+        if (!sessionId) {
+            throw new Error('sessionId is required');
+        }
+        if (schedulerAPIURL === '/') {
+            const url = new URL(window.location.href);
+            schedulerAPIURL = url.origin;
+        }
+        this.sessionId = sessionId;
+        this.schedulerAPIURL = schedulerAPIURL;
+        this.nylasSchedulerStore = nylasSchedulerStore;
+    }
+    init() {
+        debug('NylasConnector init');
+    }
+    get schedulerStore() {
+        return this.nylasSchedulerStore;
+    }
+    get scheduler() {
+        if (this._schedulerAPIConnector) {
+            return this._schedulerAPIConnector;
+        }
+        this._schedulerAPIConnector = new NylaSchedulerAPIConnector({
+            schedulerAPIURL: this.schedulerAPIURL,
+            schedulerStore: this.schedulerStore,
+            sessionId: this.sessionId,
+        });
+        return this._schedulerAPIConnector;
+    }
+    resetStores() {
+        this.nylasSchedulerStore.reset();
+    }
+}
+
+const SchedulerView = (props, children) => {
+    const isLoading = props.loadingState && !!props.loadingState.api;
+    return (h(Fragment, null,
+        isLoading && (h("div", { class: 'loading' },
+            h("div", { class: 'left' },
+                h("div", { class: 'skeleton' })),
+            h("div", { class: 'right' },
+                h("div", { class: 'skeleton' }),
+                h("div", { class: 'skeleton' }),
+                h("div", { class: 'skeleton' }),
+                h("div", { class: 'skeleton' }),
+                h("div", { class: 'skeleton' })))),
+        !isLoading && children,
+        h("nylas-notification", null),
+        h("div", { class: 'footer' },
+            "Powered by\u00A0 ",
+            h("nylas-logo", null))));
+};
+
+const nylasSchedulerCss = ":host{display:flex;flex-direction:column;overflow:visible;border-radius:var(--nylas-border-radius-2x);box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;background:var(--nylas-base-0);position:relative}.error{padding:8rem 12rem;color:var(--nylas-base-0);background-color:var(--nylas-error);margin:1.5rem;border-radius:var(--nylas-border-radius-2x)}.loading{margin:1.5rem;display:flex;gap:1rem}.loading .skeleton{border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite}.loading .skeleton:nth-child(2){animation-delay:-100ms}.loading .skeleton:nth-child(3){animation-delay:-200ms}.loading .skeleton:nth-child(4){animation-delay:-300ms}.loading .skeleton:nth-child(5){animation-delay:-400ms}.loading .left .skeleton{height:100%;width:400px}.loading .right .skeleton{height:5rem;width:300px;margin-bottom:1rem}.loading .right .skeleton:last-child{margin-bottom:0}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.select-date-page,.additional-data-page{display:flex}.additional-data-page{background-color:var(--nylas-base-50)}.booked-event-page{background-color:var(--nylas-base-50)}.cancelled-event-page{padding:1rem;height:496px;display:flex;justify-content:center;align-items:center}.booked-event-page,.cancelled-event-page{min-width:784px}.left-panel{padding-left:1.5rem;padding-right:1.5rem;padding-top:1rem;gap:1rem;border-right-width:1px;height:500px;min-width:384px}.border{margin-left:-1.5rem;margin-right:-1.5rem;border-top-width:1px;height:1px;background-color:var(--nylas-base-200)}.right-panel{display:flex;overflow:hidden;flex-direction:column;justify-content:flex-start;align-items:center;min-width:360px;background-color:var(--nylas-base-50)}.right-panel .wrapper{width:100%}.right-panel .wrapper h2{display:flex;margin-bottom:1rem;margin-top:1.5rem;gap:0.25rem;justify-content:center;align-items:center;width:100%;font-size:1.125rem;line-height:1.75rem;font-weight:600;text-align:center;width:100%}nylas-selected-event-card,nylas-booking-form{height:496px}.footer{display:flex;justify-content:flex-end;align-items:center;padding:16px;font-size:14px;font-weight:300;color:var(--nylas-base-500);border-top:1px solid var(--nylas-base-100)}.footer svg{fill:var(--nylas-base-500)}.footer svg{margin-top:1px}nylas-selected-event-card::part(nsec__timezone){position:absolute;bottom:0}";
+const NylasSchedulerStyle0 = nylasSchedulerCss;
+
+const genericError = { title: 'Something went wrong...', type: nr.Error, category: 'internal' };
+const NylasScheduler$1 = proxyCustomElement(class NylasScheduler extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.init = createEvent(this, "init", 7);
+        this.nylasSchedulerError = createEvent(this, "nylasSchedulerError", 7);
+        this.mode = 'app';
+        this.defaultSchedulerStoreState = undefined;
+        this.sessionId = undefined;
+        this.schedulerApiUrl = 'https://elements-staging.us.nylas.com';
+        this.bookingInfo = undefined;
+        this.rescheduleId = undefined;
+        this.eventOverrides = {};
+        this.loadingState = undefined;
+        this.themeConfig = undefined;
+        this.automaticComponentRegistration = true;
+        this.selectedDateLabel = new Date().toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';
+    }
+    connectedCallback() {
+        debug(`[nylas-scheduler] connectedCallback`);
+    }
+    async componentWillLoad() {
+        debug(`[nylas-scheduler] Component will load`, { eventOverrides: this.eventOverrides });
+        if (!this.sessionId) {
+            throw new Error('The page slug or session Id is required');
+        }
+        this.stores = {
+            scheduler: CreateNylasSchedulerStore({
+                bookingInfo: this.bookingInfo,
+                ...this.defaultSchedulerStoreState,
+            }),
+        };
+        this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);
+        const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
+        this.nylasSchedulerConnector = new NylasSchedulerConnector({
+            schedulerAPIURL: this.schedulerApiUrl,
+            sessionId: this.sessionId,
+            nylasSchedulerStore,
+        });
+        this.init.emit(this.host);
+        this.baseProvider?.componentWillLoad(this.nylasSchedulerConnector);
+        if (this.themeConfig) {
+            for (const [key, value] of Object.entries(this.themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
+    async componentDidLoad() {
+        this.baseProvider?.componentDidLoad();
+        let result;
+        const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
+        const selectedDate = nylasSchedulerStore?.get('selectedDate');
+        if (!selectedDate) {
+            result = await this.nylasSchedulerConnector?.scheduler.getAvailability();
+        }
+        else {
+            const startTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1).getTime() / 1000;
+            const endTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 1).getTime() / 1000;
+            result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);
+        }
+        if (!result || 'error' in result) {
+            this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });
+        }
+        const firstAvailableDate = nylasSchedulerStore?.get('availability').find((timeslot) => new Date(timeslot.start_time) > new Date());
+        let _selectedDate = new Date();
+        if (firstAvailableDate)
+            _selectedDate = firstAvailableDate.start_time;
+        nylasSchedulerStore?.set('selectedDate', _selectedDate);
+        this.selectedDateLabel = _selectedDate.toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';
+    }
+    componentDisconnected() {
+        this.baseProvider?.componentDisconnected();
+    }
+    bookingInfoChanged(newVal) {
+        this.stores?.scheduler.set('bookingInfo', newVal);
+    }
+    async registerComponentHandler(event) {
+        this.baseProvider?.registerComponent(event.detail);
+    }
+    async unregisterComponentHandler(event) {
+        this.baseProvider?.unregisterComponent(event.detail);
+    }
+    async monthChangedHandler(event) {
+        const date = event.detail;
+        const startTime = new Date(date.getFullYear(), date.getMonth(), 1).getTime() / 1000;
+        const endTime = new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() / 1000;
+        const result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);
+        if (!result || 'error' in result) {
+            this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });
+        }
+    }
+    async bookButtonClickedHandler(event) {
+        if (this.rescheduleId) {
+            const result = await this.nylasSchedulerConnector?.scheduler.rescheduleBooking(this.rescheduleId, event.detail);
+            if (!result || 'error' in result) {
+                this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });
+            }
+            else {
+                this.baseProvider?.getStore('scheduler').set('showThankYouMessage', true);
+            }
+            return;
+        }
+        const result = await this.nylasSchedulerConnector?.scheduler.bookTimeslot(event.detail);
+        if (!result || 'error' in result) {
+            this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });
+        }
+        else {
+            this.baseProvider?.getStore('scheduler').set('showThankYouMessage', true);
+        }
+    }
+    async cancelButtonClickedHandler() {
+        this.baseProvider?.getStore('scheduler').set('bookedEventLoading', false);
+        this.baseProvider?.getStore('scheduler').set('bookedEventError', null);
+    }
+    selectedDateChanged(event) {
+        const date = event.detail;
+        this.selectedDateLabel = date ? date.toLocaleDateString(undefined, { dateStyle: 'full' }) : 'No date selected';
+    }
+    async getNylasSchedulerStore() {
+        return this.baseProvider?.getStore('scheduler');
+    }
+    async getNylasSchedulerConnector() {
+        return this.nylasSchedulerConnector;
+    }
+    async getRef() {
+        return this.host;
+    }
+    getErrorObject(error) {
+        return {
+            title: error?.title || genericError.title,
+            category: error?.type || genericError.category,
+            type: nr.Error,
+            description: error?.message || '',
+            id: new Date().getTime().toString(),
+        };
+    }
+    render() {
+        const showDefaultScheduler = this.mode === 'app';
+        const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
+        const eventInfo = nylasSchedulerStore?.get('eventInfo');
+        const showThankYouMessage = nylasSchedulerStore?.get('showThankYouMessage');
+        const showBookingForm = nylasSchedulerStore?.get('showBookingForm');
+        const cancelledEvent = nylasSchedulerStore?.get('cancelledEvent');
+        if (showDefaultScheduler && cancelledEvent) {
+            return (h(Host, null, h(SchedulerView, { loadingState: this.loadingState }, h("div", { class: "cancelled-event-page", part: "cancelled-event-page" }, h("nylas-cancelled-event-card", { cancelledEvent: cancelledEvent, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" })))));
+        }
+        if (showDefaultScheduler && showThankYouMessage && eventInfo) {
+            return (h(Host, null, h(SchedulerView, { loadingState: this.loadingState }, h("div", { class: "booked-event-page", part: "booked-event-page" }, h("nylas-booked-event-card", { eventInfo: eventInfo, exportparts: "nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta" })))));
+        }
+        if (showDefaultScheduler && !showThankYouMessage && !showBookingForm) {
+            const timeslotPickerCTALabel = this.host.querySelector('[slot="timeslot-picker-cta-label"]');
+            return (h(Host, null, h(SchedulerView, { loadingState: this.loadingState }, h("div", { class: "select-date-page", part: "select-date-page" }, h("div", { class: "left-panel" }, h("nylas-date-picker", { exportparts: "ndp, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--selected, ndp__date--current-day, ndp__date--current-month" }), h("div", { class: "border" }), h("nylas-locale-switch", null)), h("div", { class: "right-panel" }, h("div", { class: "wrapper" }, h("h2", null, h("calendar-icon", null), h("span", { id: "selectedDate" }, this.selectedDateLabel)), h("nylas-timeslot-picker", { exportparts: "ntp, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary" }, timeslotPickerCTALabel && (h("span", { slot: "timeslot-picker-cta-label" }, h("slot", { name: "timeslot-picker-cta-label" }))))))))));
+        }
+        if (showDefaultScheduler && !showThankYouMessage && showBookingForm) {
+            const customTemplateSlot = this.host.querySelector('[slot="custom-booking-form"]');
+            return (h(Host, null, h(SchedulerView, { loadingState: this.loadingState }, h("div", { class: "additional-data-page", part: "additional-data-page" }, h("div", { class: "left-panel" }, h("div", { class: "wrapper" }, h("nylas-selected-event-card", { exportparts: "nsec, nsec__card, nsec__icon, nsec__date, nsec__time" }))), h("div", { class: "right-panel" }, h("div", { class: "wrapper" }, h("nylas-booking-form", { exportparts: "nbf, nbf__input-label, nbf__input-textfield, nbf__button-ghost, nbf__button-primary, nbf__button-outline" }, customTemplateSlot && (h("div", { slot: "custom-booking-form" }, h("slot", { name: "custom-booking-form" }))))))))));
+        }
+        return (h(Host, null, h("slot", null)));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "bookingInfo": ["bookingInfoChanged"]
+    }; }
+    static get style() { return NylasSchedulerStyle0; }
+}, [1, "nylas-scheduler", {
+        "mode": [1],
+        "defaultSchedulerStoreState": [16],
+        "sessionId": [1, "session-id"],
+        "schedulerApiUrl": [1, "scheduler-api-url"],
+        "bookingInfo": [16],
+        "rescheduleId": [1, "reschedule-id"],
+        "eventOverrides": [16],
+        "loadingState": [16],
+        "themeConfig": [16],
+        "automaticComponentRegistration": [32],
+        "selectedDateLabel": [32],
+        "getNylasSchedulerStore": [64],
+        "getNylasSchedulerConnector": [64],
+        "getRef": [64]
+    }, [[0, "registerComponent", "registerComponentHandler"], [0, "unregisterComponent", "unregisterComponentHandler"], [0, "monthChanged", "monthChangedHandler"], [0, "detailsConfirmed", "bookButtonClickedHandler"], [0, "cancelButtonClicked", "cancelButtonClickedHandler"], [0, "dateSelected", "selectedDateChanged"]], {
+        "bookingInfo": ["bookingInfoChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-scheduler", "calendar-cancel-icon", "calendar-check-icon", "calendar-icon", "checkmark-circle-icon", "chevron-icon", "close-icon", "globe-icon", "loading-icon", "nylas-booked-event-card", "nylas-booking-form", "nylas-cancelled-event-card", "nylas-date-picker", "nylas-locale-switch", "nylas-logo", "nylas-notification", "nylas-selected-event-card", "nylas-timeslot-picker", "people-icon", "translate-icon", "warning-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-scheduler":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasScheduler$1);
+            }
+            break;
+        case "calendar-cancel-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "calendar-check-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "calendar-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "checkmark-circle-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "chevron-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "close-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "globe-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "loading-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "nylas-booked-event-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "nylas-booking-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "nylas-cancelled-event-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "nylas-date-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "nylas-locale-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "nylas-logo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "nylas-notification":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "nylas-selected-event-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "nylas-timeslot-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "people-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "translate-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "warning-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const NylasScheduler = NylasScheduler$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasScheduler, defineCustomElement };
+
+//# sourceMappingURL=nylas-scheduler.js.map

package/dist/components/nylas-scheduler.js.map

@@ -0,0 +1 @@
+{"file":"nylas-scheduler.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;MAaa,uBAAuB;IAOlC,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,SAAS,EAAkC;QAC7F,IAAI,CAAC,eAAe,EAAE;YACpB,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;SAChD;QAED,IAAI,CAAC,mBAAmB,EAAE;YACxB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;SACpD;QAED,IAAI,CAAC,SAAS,EAAE;YACd,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;SAC1C;QAID,IAAI,eAAe,KAAK,GAAG,EAAE;YAC3B,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC1C,eAAe,GAAG,GAAG,CAAC,MAAM,CAAC;SAC9B;QAED,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QACvC,IAAI,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;KAChD;IAEM,IAAI;QACT,KAAK,CAAC,qBAAqB,CAAC,CAAC;KAC9B;IAED,IAAW,cAAc;QACvB,OAAO,IAAI,CAAC,mBAAmB,CAAC;KACjC;IAED,IAAW,SAAS;QAClB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,OAAO,IAAI,CAAC,sBAAsB,CAAC;SACpC;QACD,IAAI,CAAC,sBAAsB,GAAG,IAAI,yBAAyB,CAAC;YAC1D,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,sBAAsB,CAAC;KACpC;IAEM,WAAW;QAChB,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;KAClC;;;ACzDI,MAAM,aAAa,GAA4C,CAAC,KAAyB,EAAE,QAAQ;IACxG,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC;IACjE,QACE,EAAC,QAAQ;QACN,SAAS,KACR,WAAK,KAAK,EAAE,SAAS;YACnB,WAAK,KAAK,EAAE,MAAM;gBAChB,WAAK,KAAK,EAAE,UAAU,GAAI,CACtB;YACN,WAAK,KAAK,EAAE,OAAO;gBACjB,WAAK,KAAK,EAAE,UAAU,GAAI;gBAC1B,WAAK,KAAK,EAAE,UAAU,GAAI;gBAC1B,WAAK,KAAK,EAAE,UAAU,GAAI;gBAC1B,WAAK,KAAK,EAAE,UAAU,GAAI;gBAC1B,WAAK,KAAK,EAAE,UAAU,GAAI,CACtB,CACF,CACP;QACA,CAAC,SAAS,IAAI,QAAQ;QACvB,6BAAyC;QACzC,WAAK,KAAK,EAAE,QAAQ;;YACD,qBAAc,CAC3B,CACG,EACX;AACJ,CAAC;;ACnCD,MAAM,iBAAiB,GAAG,+1FAA+1F,CAAC;AAC13F,6BAAe,iBAAiB;;ACShC,MAAM,YAAY,GAAG,EAAE,KAAK,EAAE,yBAAyB,EAAE,IAAI,EAAEA,EAAgB,CAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;MAkDjGC,gBAAc;;;;;;;oBAkCqB,KAAK;;;+BAiBR,uCAAuC;;;8BAsBQ,EAAE;;;8CAuBzC,IAAI;iCAMlB,IAAI,IAAI,EAAE,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,IAAI,kBAAkB;;IAoB1H,iBAAiB;QACf,KAAK,CAAC,qCAAqC,CAAC,CAAC;KAC9C;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,uCAAuC,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAIxF,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;SAC5D;QAED,IAAI,CAAC,MAAM,GAAG;YACZ,SAAS,EAAE,yBAAyB,CAAC;gBACnC,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,GAAG,IAAI,CAAC,0BAA0B;aACnC,CAAC;SACH,CAAC;QAEF,IAAI,CAAC,YAAY,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,8BAA8B,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAE5H,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QACrE,IAAI,CAAC,uBAAuB,GAAG,IAAI,uBAAuB,CAAC;YACzD,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,mBAAmB;SACpB,CAAC,CAAC;QACH,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1B,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAEnE,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC;aAC9C;SACF;KACF;IAED,MAAM,gBAAgB;QACpB,IAAI,CAAC,YAAY,EAAE,gBAAgB,EAAE,CAAC;QAEtC,IAAI,MAAM,CAAC;QACX,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QACrE,MAAM,YAAY,GAAG,mBAAmB,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;QAE9D,IAAI,CAAC,YAAY,EAAE;YACjB,MAAM,GAAG,MAAM,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,eAAe,EAAE,CAAC;SAC1E;aAAM;YACL,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;YACpG,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;YACtG,MAAM,GAAG,MAAM,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;SAC5F;QAED,IAAI,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,EAAE;YAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;SAC1E;QAED,MAAM,kBAAkB,GAAG,mBAAmB,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,QAAa,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC,CAAC;QAExI,IAAI,aAAa,GAAG,IAAI,IAAI,EAAE,CAAC;QAC/B,IAAI,kBAAkB;YAAE,aAAa,GAAG,kBAAkB,CAAC,UAAU,CAAC;QAEtE,mBAAmB,EAAE,GAAG,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;QACxD,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,IAAI,kBAAkB,CAAC;KACnH;IAED,qBAAqB;QACnB,IAAI,CAAC,YAAY,EAAE,qBAAqB,EAAE,CAAC;KAC5C;IAGD,kBAAkB,CAAC,MAAkC;QACnD,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KACnD;IASD,MAAM,wBAAwB,CAAC,KAAiD;QAC9E,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACpD;IASD,MAAM,0BAA0B,CAAC,KAAiD;QAChF,IAAI,CAAC,YAAY,EAAE,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACtD;IAMD,MAAM,mBAAmB,CAAC,KAAwB;QAChD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;QAC1B,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QACpF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QAEtF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAEjG,IAAI,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,EAAE;YAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;SAC1E;KACF;IAMD,MAAM,wBAAwB,CAAC,KAA6C;QAC1E,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAChH,IAAI,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,EAAE;gBAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;aAC1E;iBAAM;gBACL,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;aAC3E;YACD,OAAO;SACR;QACD,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxF,IAAI,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,EAAE;YAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;SAC1E;aAAM;YACL,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;SAC3E;KACF;IAMD,MAAM,0BAA0B;QAC9B,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;QAC1E,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;KACxE;IAMD,mBAAmB,CAAC,KAAwB;QAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;QAC1B,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,GAAG,kBAAkB,CAAC;KAChH;IAOD,MAAM,sBAAsB;QAC1B,OAAO,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;KACjD;IAOD,MAAM,0BAA0B;QAC9B,OAAO,IAAI,CAAC,uBAAuB,CAAC;KACrC;IAGD,MAAM,MAAM;QACV,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAEO,cAAc,CAAC,KAAkC;QACvD,OAAO;YACL,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,YAAY,CAAC,KAAK;YACzC,QAAQ,EAAE,KAAK,EAAE,IAAI,IAAI,YAAY,CAAC,QAAQ;YAC9C,IAAI,EAAED,EAAgB,CAAC,KAAK;YAC5B,WAAW,EAAE,KAAK,EAAE,OAAO,IAAI,EAAE;YACjC,EAAE,EAAE,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;SACpC,CAAC;KACH;IAED,MAAM;QACJ,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;QACjD,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QACrE,MAAM,SAAS,GAAG,mBAAmB,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;QACxD,MAAM,mBAAmB,GAAG,mBAAmB,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC;QAC5E,MAAM,eAAe,GAAG,mBAAmB,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACpE,MAAM,cAAc,GAAG,mBAAmB,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAGlE,IAAI,oBAAoB,IAAI,cAAc,EAAE;YAC1C,QACE,EAAC,IAAI,QACH,EAAC,aAAa,IAAC,YAAY,EAAE,IAAI,CAAC,YAAY,IAC5C,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,sBAAsB,IAC3D,kCAA4B,cAAc,EAAE,cAAc,EAAE,WAAW,EAAC,oFAAoF,GAAG,CAC3J,CACQ,CACX,EACP;SACH;QAED,IAAI,oBAAoB,IAAI,mBAAmB,IAAI,SAAS,EAAE;YAC5D,QACE,EAAC,IAAI,QACH,EAAC,aAAa,IAAC,YAAY,EAAE,IAAI,CAAC,YAAY,IAC5C,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,mBAAmB,IACrD,+BACE,SAAS,EAAE,SAAS,EACpB,WAAW,EAAC,gHAAgH,GAC5H,CACE,CACQ,CACX,EACP;SACH;QAED,IAAI,oBAAoB,IAAI,CAAC,mBAAmB,IAAI,CAAC,eAAe,EAAE;YACpE,MAAM,sBAAsB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oCAAoC,CAAC,CAAC;YAC7F,QACE,EAAC,IAAI,QACH,EAAC,aAAa,IAAC,YAAY,EAAE,IAAI,CAAC,YAAY,IAC5C,WAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,kBAAkB,IACnD,WAAK,KAAK,EAAC,YAAY,IACrB,yBAAmB,WAAW,EAAC,uIAAuI,GAAqB,EAC3L,WAAK,KAAK,EAAC,QAAQ,GAAO,EAC1B,8BAA2C,CACvC,EACN,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,SAAS,IAClB,cACE,wBAA+B,EAC/B,YAAM,EAAE,EAAC,cAAc,IAAE,IAAI,CAAC,iBAAiB,CAAQ,CACpD,EACL,6BAAuB,WAAW,EAAC,kEAAkE,IAClG,sBAAsB,KACrB,YAAM,IAAI,EAAC,2BAA2B,IACpC,YAAM,IAAI,EAAC,2BAA2B,GAAQ,CACzC,CACR,CACqB,CACpB,CACF,CACF,CACQ,CACX,EACP;SACH;QAED,IAAI,oBAAoB,IAAI,CAAC,mBAAmB,IAAI,eAAe,EAAE;YAEnE,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC;YAEnF,QACE,EAAC,IAAI,QACH,EAAC,aAAa,IAAC,YAAY,EAAE,IAAI,CAAC,YAAY,IAC5C,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,sBAAsB,IAC3D,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,KAAK,EAAC,SAAS,IAClB,iCAA2B,WAAW,EAAC,sDAAsD,GAA6B,CACtH,CACF,EACN,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,SAAS,IAClB,0BAAoB,WAAW,EAAC,0GAA0G,IACvI,kBAAkB,KACjB,WAAK,IAAI,EAAC,qBAAqB,IAC7B,YAAM,IAAI,EAAC,qBAAqB,GAAQ,CACpC,CACP,CACkB,CACjB,CACF,CACF,CACQ,CACX,EACP;SACH;QAED,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NotificationType","NylasScheduler"],"sources":["src/connector/nylas-scheduler-connector/index.ts","src/components/scheduler/nylas-scheduler/scheduler-view.tsx","src/components/scheduler/nylas-scheduler/nylas-scheduler.scss?tag=nylas-scheduler&encapsulation=shadow","src/components/scheduler/nylas-scheduler/nylas-scheduler.tsx"],"sourcesContent":["import { NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport { debug } from '@/utils/utils';\nimport { NylasSchedulerConnectorInterface } from '../connector-interface';\nimport { NylaSchedulerAPIConnector } from '../shared/api/scheduler';\n\ntype NylasSchedulerConnectorOptions = {\n  schedulerAPIURL: string;\n  nylasSchedulerStore: NylasSchedulerStoreType;\n  sessionId?: string;\n};\n/**\n * Base class for the Nylas connector.\n */\nexport class NylasSchedulerConnector implements NylasSchedulerConnectorInterface {\n  public schedulerAPIURL: string;\n  public nylasSchedulerStore: NylasSchedulerStoreType;\n  public sessionId: string | undefined;\n\n  private _schedulerAPIConnector: NylaSchedulerAPIConnector | undefined;\n\n  constructor({ schedulerAPIURL, nylasSchedulerStore, sessionId }: NylasSchedulerConnectorOptions) {\n    if (!schedulerAPIURL) {\n      throw new Error('schedulerAPIURL is required');\n    }\n\n    if (!nylasSchedulerStore) {\n      throw new Error('nylasSchedulerStore is required');\n    }\n\n    if (!sessionId) {\n      throw new Error('sessionId is required');\n    }\n\n    // If the url is only /, then we need to add the base url.\n    // We assume that the base url is the same as the current url.\n    if (schedulerAPIURL === '/') {\n      const url = new URL(window.location.href);\n      schedulerAPIURL = url.origin;\n    }\n\n    this.sessionId = sessionId;\n    this.schedulerAPIURL = schedulerAPIURL;\n    this.nylasSchedulerStore = nylasSchedulerStore;\n  }\n\n  public init() {\n    debug('NylasConnector init');\n  }\n\n  public get schedulerStore() {\n    return this.nylasSchedulerStore;\n  }\n\n  public get scheduler() {\n    if (this._schedulerAPIConnector) {\n      return this._schedulerAPIConnector;\n    }\n    this._schedulerAPIConnector = new NylaSchedulerAPIConnector({\n      schedulerAPIURL: this.schedulerAPIURL,\n      schedulerStore: this.schedulerStore,\n      sessionId: this.sessionId,\n    });\n    return this._schedulerAPIConnector;\n  }\n\n  public resetStores() {\n    this.nylasSchedulerStore.reset();\n  }\n}\nexport type PublicMethods<T> = {\n  [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;\n}[keyof T];\n\nexport type NylasSchedulerConnectorPublicMethods = PublicMethods<NylasSchedulerConnector>;\n","import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { LoadingState } from '../../../components';\n\nexport type SchedulerViewProps = {\n  loadingState?: LoadingState;\n};\n\n/**\n * The Scheduler view component.\n */\nexport const SchedulerView: FunctionalComponent<SchedulerViewProps> = (props: SchedulerViewProps, children) => {\n  const isLoading = props.loadingState && !!props.loadingState.api;\n  return (\n    <Fragment>\n      {isLoading && (\n        <div class={'loading'}>\n          <div class={'left'}>\n            <div class={'skeleton'} />\n          </div>\n          <div class={'right'}>\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n          </div>\n        </div>\n      )}\n      {!isLoading && children}\n      <nylas-notification></nylas-notification>\n      <div class={'footer'}>\n        Powered by&nbsp; <nylas-logo />\n      </div>\n    </Fragment>\n  );\n};\n",":host {\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n  border-radius: var(--nylas-border-radius-2x);\n  box-shadow:\n    0px 4px 6px -2px rgba(0, 0, 0, 0.05),\n    0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n  --nylas-primary: #2563eb;\n  --nylas-error: #cc4841;\n  --nylas-error-pressed: #992222;\n  --nylas-wraning: #f06c00;\n  --nylas-success: #16a392;\n  --nylas-info: #2b8fc2;\n  --nylas-base-0: #ffffff;\n  --nylas-base-25: #fcfcfd;\n  --nylas-base-50: #f8f9fc;\n  --nylas-base-100: #eaecf5;\n  --nylas-base-200: #d5d9eb;\n  --nylas-base-300: #b3b8d8;\n  --nylas-base-400: #717bbc;\n  --nylas-base-500: #4e5ba6;\n  --nylas-base-600: #3e4784;\n  --nylas-base-700: #263f72;\n  --nylas-base-800: #293056;\n  --nylas-base-900: #101323;\n  --nylas-base-950: #0e101b;\n\n  background: var(--nylas-base-0);\n  position: relative;\n}\n\n.error {\n  padding: 8rem 12rem;\n  color: var(--nylas-base-0);\n  background-color: var(--nylas-error);\n  margin: 1.5rem;\n  border-radius: var(--nylas-border-radius-2x);\n}\n\n.loading {\n  margin: 1.5rem;\n  display: flex;\n  gap: 1rem;\n\n  .skeleton {\n    border-radius: var(--nylas-border-radius-2x);\n    animation: pulsate 1.5s infinite;\n    &:nth-child(2) {\n      animation-delay: -100ms;\n    }\n    &:nth-child(3) {\n      animation-delay: -200ms;\n    }\n    &:nth-child(4) {\n      animation-delay: -300ms;\n    }\n    &:nth-child(5) {\n      animation-delay: -400ms;\n    }\n  }\n\n  .left .skeleton {\n    height: 100%;\n    width: 400px;\n  }\n  .right .skeleton {\n    height: 5rem;\n    width: 300px;\n    margin-bottom: 1rem;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n\n@keyframes pulsate {\n  0% {\n    background-color: var(--nylas-base-50);\n  }\n  50% {\n    background-color: var(--nylas-base-100);\n  }\n  100% {\n    background-color: var(--nylas-base-50);\n  }\n}\n\n.select-date-page,\n.additional-data-page {\n  display: flex;\n}\n\n.additional-data-page {\n  background-color: var(--nylas-base-50);\n}\n\n.booked-event-page {\n  background-color: var(--nylas-base-50);\n}\n\n.cancelled-event-page {\n  padding: 1rem;\n  height: 496px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.booked-event-page,\n.cancelled-event-page {\n  min-width: 784px;\n}\n\n.left-panel {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 1rem;\n  gap: 1rem;\n  border-right-width: 1px;\n  height: 500px;\n  min-width: 384px;\n}\n\n.border {\n  margin-left: -1.5rem;\n  margin-right: -1.5rem;\n  border-top-width: 1px;\n  height: 1px;\n  background-color: var(--nylas-base-200);\n}\n\n.right-panel {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  min-width: 360px;\n  background-color: var(--nylas-base-50);\n}\n\n.right-panel .wrapper {\n  width: 100%;\n}\n\n.right-panel .wrapper h2 {\n  display: flex;\n  margin-bottom: 1rem;\n  margin-top: 1.5rem;\n  gap: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  text-align: center;\n  width: 100%;\n}\n\nnylas-selected-event-card,\nnylas-booking-form {\n  height: 496px;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 16px;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--nylas-base-500);\n  border-top: 1px solid var(--nylas-base-100);\n  svg {\n    fill: var(--nylas-base-500);\n  }\n}\n\n.footer svg {\n  margin-top: 1px;\n}\n\nnylas-selected-event-card::part(nsec__timezone) {\n  position: absolute;\n  bottom: 0;\n}\n","import { NylasBaseProvider } from '@/common/abstract-provider';\nimport { RegisteredComponent } from '@/common/register-component';\nimport type { SchedulerEventOverride } from '@/common/component-types';\nimport { NylasSchedulerConnector } from '@/connector/nylas-scheduler-connector';\nimport { CreateNylasSchedulerStore, LoadingState, NylasSchedulerStoreState, NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport { NylasSchedulerBookingData, ThemeConfig, Notification, NotificationType, NylasErrorResponse } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { debug } from '@/utils/utils';\nimport { SchedulerView } from './scheduler-view';\n\nconst genericError = { title: 'Something went wrong...', type: NotificationType.Error, category: 'internal' };\n\n/**\n * The Nylas Scheduler component is used to show the Nylas Scheduler UI.\n *\n * @slot custom-booking-form - This slot is used to pass a custom booking form to the Nylas Scheduler.\n * @slot timeslot-picker-cta-label - This slot is used to pass a custom label to the timeslot picker CTA. The default label is \"Next\".\n *\n * @part ndp - [nylas-date-picker] The date picker host.\n * @part ndp__month-header - [nylas-date-picker] The month header.\n * @part ndp__month-button - [nylas-date-picker] The month button.\n * @part ndp__day - [nylas-date-picker] The day.\n * @part ndp__date - [nylas-date-picker] The date.\n * @part ndp__date--selected - [nylas-date-picker] The selected date.\n * @part ndp__date--current-day - [nylas-date-picker] The current day.\n * @part ndp__date--current-month - [nylas-date-picker] The dates in the current month.\n * @part ntp - [nylas-timeslot-picker] The timeslot picker component.\n * @part ntp__timeslot - [nylas-timeslot-picker] The timeslot button.\n * @part ntp__timeslot--selected - [nylas-timeslot-picker] The selected timeslot button.\n * @part ntp__button-primary - [nylas-timeslot-picker] The timeslot picker CTA.\n * @part nsec - [nylas-selected-event-card] The selected event card component.\n * @part nsec__card - [nylas-selected-event-card] The card component.\n * @part nsec__icon - [nylas-selected-event-card] The calendar icon.\n * @part nsec__date - [nylas-selected-event-card] The date selected.\n * @part nsec__time - [nylas-selected-event-card] The timeslot selected.\n * @part nbf - [nylas-booking-form] The booking form host.\n * @part nbf__input-label - [nylas-booking-form] The input label.\n * @part nbf__input-textfield - [nylas-booking-form] The input textfield.\n * @part nbf__button-ghost - [nylas-booking-form] The ghost button for adding guests.\n * @part nbf__button-primary - [nylas-booking-form] The primary button for booking.\n * @part nbf__button-outline - [nylas-booking-form] The outline button for canceling.\n * @part ncec - [nylas-cancelled-event-card] The cancelled event card host.\n * @part ncec__icon - [nylas-cancelled-event-card] The calendar icon.\n * @part ncec__title - [nylas-cancelled-event-card] The title of the cancelled event card.\n * @part ncec__description - [nylas-cancelled-event-card] The description of the cancelled event card.\n * @part ncec__button-outline - [nylas-cancelled-event-card] The close button CTA.\n * @part ncec__card - [nylas-cancelled-event-card] The cancelled event card.\n * @part nbec - [nylas-booked-event-card] The booked event card host.\n * @part nbec__card - [nylas-booked-event-card] The booked event card.\n * @part nbec__title - [nylas-booked-event-card] The title of the booked event card.\n * @part nbec__description - [nylas-booked-event-card] The description of the booked event card.\n * @part nbec__button-outline - [nylas-booked-event-card] The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - [nylas-booked-event-card] The cancel button CTA.\n * @part nbec__reschedule-cta - [nylas-booked-event-card] The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-scheduler',\n  styleUrl: 'nylas-scheduler.scss',\n  shadow: true,\n})\nexport class NylasScheduler {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: { scheduler: NylasSchedulerStoreType };\n\n  /**\n   * This is a base provide that defines the common methods and properties\n   * that all providers should have.\n   *\n   * Because stencil does not support abstract classes, we have to use a\n   * property to store the base provider instance.\n   */\n  private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n  /**\n   * The Nylas Scheduler Connector instance.\n   * The branins of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasSchedulerConnector?: NylasSchedulerConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSchedulerElement;\n\n  /**\n   * This is used to set the mode for the Nylas Scheduler.\n   * The mode can be either `app` or `composable`. The default mode is `app`.\n   * - `app`: This mode is used to show the default Nylas Scheduler UI.\n   * - `composable`: This mode is used to show the composable Nylas Scheduler UI\n   *    by passing the individual scheduler components as children.\n   */\n  @Prop() readonly mode: 'app' | 'composable' = 'app';\n\n  /**\n   * The default scheduler store state.\n   * Used to set the initial state of the scheduler store.\n   */\n  @Prop({ attribute: 'default-scheduler-store-state' }) readonly defaultSchedulerStoreState?: NylasSchedulerStoreState;\n\n  /**\n   * The session ID for the Nylas Scheduler.\n   * This is used to authenticate the user.\n   */\n  @Prop() readonly sessionId?: string;\n\n  /**\n   * The URL for the Nylas Scheduler API. (staging or production URL)\n   */\n  @Prop() readonly schedulerApiUrl: string = 'https://elements-staging.us.nylas.com';\n\n  /**\n   * This enables passing the bookingInfo object to the Scheduler UI for direct booking event creation.\n   * When used with timeslotConfirmedHandler, it bypasses the additional data page and immediately\n   * invokes the handler after booking.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * Booking Id required for rescheduling flow.\n   */\n  @Prop() readonly rescheduleId?: string;\n\n  /**\n   * This provides an easy way to override the default function of the event emitter.\n   * An example of this is the `timeslotConfirmed` event. By default, this event will set the scheduler store state for `showBookingForm` to `true` which will\n   * show the booking form. However, if you want to override this behavior, you can pass in the prop `eventOverride` like:\n   * ```html\n   * <nylas-scheduler eventOverride={{\"timeslotConfirmed\": (event, nylasConnector) => { console.log(\"Timeslot confirmed event fired!\"); } }} />\n   * ```\n   */\n  @Prop({ attribute: 'event-overrides' }) readonly eventOverrides: SchedulerEventOverride = {};\n\n  /**\n   * The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data.\n   * For example, when fetching availability, the loading state can be set to:\n   * ```js\n   *  loadingState={ api: 'availability' }\n   * ```\n   */\n  @Prop() readonly loadingState?: LoadingState;\n\n  /**\n   * Theme config, used to automatically generate a theme with color palette and\n   * CSS variables to customize the look and feel of the Nylas Scheduler.\n   */\n  @Prop() readonly themeConfig?: ThemeConfig;\n\n  /**\n   * Automatically register components that have the `@RegisterComponent` decorator.\n   * If this is set to false, you will need to manually register components using the\n   * `registerComponent` method.\n   * @default true\n   */\n  @State() automaticComponentRegistration: boolean = true;\n\n  /**\n   * The selected date label for the Nylas Scheduler.\n   * This is used to set the initial date label for the Nylas Scheduler.\n   */\n  @State() selectedDateLabel: string = new Date().toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';\n\n  /**\n   * This event is fired when the provider is initialized.\n   * It can be used to set the initial state of the provider,\n   * or to prevent the provider from firing some default behavior.\n   */\n  @Event({ cancelable: true }) init!: EventEmitter<HTMLNylasSchedulerElement>;\n\n  @Event({\n    eventName: 'nylasSchedulerError',\n  })\n  nylasSchedulerError!: EventEmitter<Notification>;\n\n  /**\n   * This function is called when the component is connected to the DOM.\n   * At this point in the component lifecycle, the base provider has not yet\n   * been initialized. So avoid using the base provider in this method or stores\n   * in this method.\n   */\n  connectedCallback() {\n    debug(`[nylas-scheduler] connectedCallback`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-scheduler] Component will load`, { eventOverrides: this.eventOverrides });\n\n    // Throw an error if the page slug is not set\n    // TODO: We should not throw errors like this, the end user cannot handle them if we do that.\n    if (!this.sessionId) {\n      throw new Error('The page slug or session Id is required');\n    }\n\n    this.stores = {\n      scheduler: CreateNylasSchedulerStore({\n        bookingInfo: this.bookingInfo,\n        ...this.defaultSchedulerStoreState,\n      }),\n    };\n\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    this.nylasSchedulerConnector = new NylasSchedulerConnector({\n      schedulerAPIURL: this.schedulerApiUrl,\n      sessionId: this.sessionId,\n      nylasSchedulerStore,\n    });\n    this.init.emit(this.host);\n\n    this.baseProvider?.componentWillLoad(this.nylasSchedulerConnector);\n    // Override theme\n    if (this.themeConfig) {\n      for (const [key, value] of Object.entries(this.themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  async componentDidLoad() {\n    this.baseProvider?.componentDidLoad();\n\n    let result;\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    const selectedDate = nylasSchedulerStore?.get('selectedDate');\n\n    if (!selectedDate) {\n      result = await this.nylasSchedulerConnector?.scheduler.getAvailability();\n    } else {\n      const startTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1).getTime() / 1000;\n      const endTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 1).getTime() / 1000;\n      result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);\n    }\n\n    if (!result || 'error' in result) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n    }\n\n    const firstAvailableDate = nylasSchedulerStore?.get('availability').find((timeslot: any) => new Date(timeslot.start_time) > new Date());\n\n    let _selectedDate = new Date();\n    if (firstAvailableDate) _selectedDate = firstAvailableDate.start_time;\n\n    nylasSchedulerStore?.set('selectedDate', _selectedDate);\n    this.selectedDateLabel = _selectedDate.toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';\n  }\n\n  componentDisconnected() {\n    this.baseProvider?.componentDisconnected();\n  }\n\n  @Watch('bookingInfo')\n  bookingInfoChanged(newVal?: NylasSchedulerBookingData) {\n    this.stores?.scheduler.set('bookingInfo', newVal);\n  }\n\n  /**\n   * This is a custom event handler that is used to register a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to register\n   * @returns Promise<void>\n   */\n  @Listen('registerComponent')\n  async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.registerComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to unregister a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to unregister\n   * @returns Promise<void>\n   */\n  @Listen('unregisterComponent')\n  async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.unregisterComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to refetch the availability when the month is changed.\n   */\n  @Listen('monthChanged')\n  async monthChangedHandler(event: CustomEvent<Date>) {\n    const date = event.detail;\n    const startTime = new Date(date.getFullYear(), date.getMonth(), 1).getTime() / 1000;\n    const endTime = new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() / 1000;\n\n    const result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);\n\n    if (!result || 'error' in result) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n    }\n  }\n\n  /**\n   * This is a custom event handler to book an event.\n   */\n  @Listen('detailsConfirmed')\n  async bookButtonClickedHandler(event: CustomEvent<NylasSchedulerBookingData>) {\n    if (this.rescheduleId) {\n      const result = await this.nylasSchedulerConnector?.scheduler.rescheduleBooking(this.rescheduleId, event.detail);\n      if (!result || 'error' in result) {\n        this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n      } else {\n        this.baseProvider?.getStore('scheduler').set('showThankYouMessage', true);\n      }\n      return;\n    }\n    const result = await this.nylasSchedulerConnector?.scheduler.bookTimeslot(event.detail);\n    if (!result || 'error' in result) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n    } else {\n      this.baseProvider?.getStore('scheduler').set('showThankYouMessage', true);\n    }\n  }\n\n  /**\n   * This is a custom event handler to cancel booking an event.\n   */\n  @Listen('cancelButtonClicked')\n  async cancelButtonClickedHandler() {\n    this.baseProvider?.getStore('scheduler').set('bookedEventLoading', false);\n    this.baseProvider?.getStore('scheduler').set('bookedEventError', null);\n  }\n\n  /**\n   * This is a custom event handler to update the selected date label.\n   */\n  @Listen('dateSelected')\n  selectedDateChanged(event: CustomEvent<Date>) {\n    const date = event.detail;\n    this.selectedDateLabel = date ? date.toLocaleDateString(undefined, { dateStyle: 'full' }) : 'No date selected';\n  }\n\n  /**\n   * This method is used to retrieve the NylasScheduler instance\n   * @returns The NylasScheduler instance\n   */\n  @Method()\n  async getNylasSchedulerStore(): Promise<NylasSchedulerStoreType | undefined> {\n    return this.baseProvider?.getStore('scheduler');\n  }\n\n  /**\n   * This method is used to retrieve the NylasConnector instance\n   * @returns The NylasConnector instance\n   */\n  @Method()\n  async getNylasSchedulerConnector() {\n    return this.nylasSchedulerConnector;\n  }\n\n  @Method()\n  async getRef() {\n    return this.host;\n  }\n\n  private getErrorObject(error: NylasErrorResponse['error']): Notification {\n    return {\n      title: error?.title || genericError.title,\n      category: error?.type || genericError.category,\n      type: NotificationType.Error,\n      description: error?.message || '',\n      id: new Date().getTime().toString(),\n    };\n  }\n\n  render() {\n    const showDefaultScheduler = this.mode === 'app';\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    const eventInfo = nylasSchedulerStore?.get('eventInfo');\n    const showThankYouMessage = nylasSchedulerStore?.get('showThankYouMessage');\n    const showBookingForm = nylasSchedulerStore?.get('showBookingForm');\n    const cancelledEvent = nylasSchedulerStore?.get('cancelledEvent');\n\n    // Cancelled event card is shown when the event is cancelled\n    if (showDefaultScheduler && cancelledEvent) {\n      return (\n        <Host>\n          <SchedulerView loadingState={this.loadingState}>\n            <div class=\"cancelled-event-page\" part=\"cancelled-event-page\">\n              <nylas-cancelled-event-card cancelledEvent={cancelledEvent} exportparts=\"ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card\" />\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Booked event card is shown when the event is booked\n    if (showDefaultScheduler && showThankYouMessage && eventInfo) {\n      return (\n        <Host>\n          <SchedulerView loadingState={this.loadingState}>\n            <div class=\"booked-event-page\" part=\"booked-event-page\">\n              <nylas-booked-event-card\n                eventInfo={eventInfo}\n                exportparts=\"nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta\"\n              />\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Date and time picker is shown when the event is not booked and no additional data is shown\n    if (showDefaultScheduler && !showThankYouMessage && !showBookingForm) {\n      const timeslotPickerCTALabel = this.host.querySelector('[slot=\"timeslot-picker-cta-label\"]');\n      return (\n        <Host>\n          <SchedulerView loadingState={this.loadingState}>\n            <div class=\"select-date-page\" part=\"select-date-page\">\n              <div class=\"left-panel\">\n                <nylas-date-picker exportparts=\"ndp, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--selected, ndp__date--current-day, ndp__date--current-month\"></nylas-date-picker>\n                <div class=\"border\"></div>\n                <nylas-locale-switch></nylas-locale-switch>\n              </div>\n              <div class=\"right-panel\">\n                <div class=\"wrapper\">\n                  <h2>\n                    <calendar-icon></calendar-icon>\n                    <span id=\"selectedDate\">{this.selectedDateLabel}</span>\n                  </h2>\n                  <nylas-timeslot-picker exportparts=\"ntp, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary\">\n                    {timeslotPickerCTALabel && (\n                      <span slot=\"timeslot-picker-cta-label\">\n                        <slot name=\"timeslot-picker-cta-label\"></slot>\n                      </span>\n                    )}\n                  </nylas-timeslot-picker>\n                </div>\n              </div>\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Additional data is shown when the time is selected, event is not booked and additional data is shown\n    if (showDefaultScheduler && !showThankYouMessage && showBookingForm) {\n      // Check if a \"custom-booking-form\" slot is provided\n      const customTemplateSlot = this.host.querySelector('[slot=\"custom-booking-form\"]');\n\n      return (\n        <Host>\n          <SchedulerView loadingState={this.loadingState}>\n            <div class=\"additional-data-page\" part=\"additional-data-page\">\n              <div class=\"left-panel\">\n                <div class=\"wrapper\">\n                  <nylas-selected-event-card exportparts=\"nsec, nsec__card, nsec__icon, nsec__date, nsec__time\"></nylas-selected-event-card>\n                </div>\n              </div>\n              <div class=\"right-panel\">\n                <div class=\"wrapper\">\n                  <nylas-booking-form exportparts=\"nbf, nbf__input-label, nbf__input-textfield, nbf__button-ghost, nbf__button-primary, nbf__button-outline\">\n                    {customTemplateSlot && (\n                      <div slot=\"custom-booking-form\">\n                        <slot name=\"custom-booking-form\"></slot>\n                      </div>\n                    )}\n                  </nylas-booking-form>\n                </div>\n              </div>\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

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