@nylas/web-elements 1.0.0-prealpha1

package/dist/esm/nylas-scheduler.entry.js

@@ -0,0 +1,238 @@
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-b2270b4a.js';
+import { N as NylasBaseProvider, n as nr } from './index.es-6f3582a1.js';
+import { d as debug } from './utils-5074a070.js';
+import { N as NylaSchedulerAPIConnector, C as CreateNylasSchedulerStore } from './scheduler-store-5a39585a.js';
+import './index-2b85580a.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+    static get watchers() { return {
+        "bookingInfo": ["bookingInfoChanged"]
+    }; }
+};
+NylasScheduler.style = NylasSchedulerStyle0;
+
+export { NylasScheduler as nylas_scheduler };
+
+//# sourceMappingURL=nylas-scheduler.entry.js.map

package/dist/esm/nylas-scheduler.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-scheduler.entry.js","mappings":"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","names":["NotificationType"],"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/esm/nylas-threads-refresh.entry.js

@@ -0,0 +1,114 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-b2270b4a.js';
+import { R as RegisterComponent } from './register-component-55376f31.js';
+import { d as debug } from './utils-5074a070.js';
+
+const nylasThreadsRefreshCss = ":host{display:contents}.container{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}.pull-to-refresh{display:none;border:0;background-color:transparent;text-align:center;width:100%;justify-content:center}.pulling{position:relative;display:flex;margin:0 auto;padding:1rem}.pulling svg{width:24px;height:24px;color:var(--nylas-color-primary-500);transform:rotate(90deg)}.refreshing{position:relative;display:flex;margin:0 auto;padding:1rem}.refreshing svg{width:24px;height:24px;fill:var(--nylas-color-primary-500);animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+const NylasThreadsRefreshStyle0 = nylasThreadsRefreshCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasThreadsRefresh = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.refresh = createEvent(this, "refresh", 7);
+        this.threshold = 100;
+        this.onTouchStart = (e) => {
+            debug(`[nylas-threads-refresh] Touch start`, e.touches[0].pageY, this.containerElement?.scrollTop, this.containerElement?.offsetHeight, this.contentElement?.scrollTop);
+            if (this.containerElement?.scrollTop === 0) {
+                this.start = e.touches[0].pageY;
+            }
+            else {
+                this.start = 0;
+            }
+        };
+        this.onTouchMove = (e) => {
+            if (this.start) {
+                const distance = e.touches[0].pageY - this.start;
+                if (distance > this.threshold) {
+                    this.pulling = true;
+                }
+                else {
+                    this.pulling = false;
+                }
+            }
+        };
+        this.onTouchEnd = (e) => {
+            if (this.start) {
+                const distance = e.changedTouches[0].pageY - this.start;
+                if (distance > this.threshold) {
+                    this.pulling = false;
+                    this.refresh.emit({
+                        updateState: this.updateState,
+                    });
+                }
+                this.start = 0;
+            }
+        };
+        this.start = 0;
+        this.state = 'ready';
+        this.pulling = false;
+        debug(`[nylas-threads-refresh] Constructor`);
+        this.updateState = this.updateState.bind(this);
+    }
+    connectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-threads-refresh] Component will load`);
+    }
+    componentDidLoad() {
+        debug(`[nylas-threads-refresh] Component did load`);
+        this.containerElement?.addEventListener('touchstart', this.onTouchStart);
+        this.containerElement?.addEventListener('touchmove', this.onTouchMove);
+        this.containerElement?.addEventListener('touchend', this.onTouchEnd);
+    }
+    disconnectedCallback() {
+        debug(`[nylas-threads-refresh] Component disconnected`);
+        this.containerElement?.removeEventListener('touchstart', this.onTouchStart);
+        this.containerElement?.removeEventListener('touchmove', this.onTouchMove);
+        this.containerElement?.removeEventListener('touchend', this.onTouchEnd);
+    }
+    async updateState(state) {
+        this.state = state;
+    }
+    render() {
+        return (h(Host, { key: '978dd26b52dbef9d43245a2a0e9c57695ee0d0b3' }, h("div", { key: '0062815cd33f0575ef5ced1bed59bc34863cd5a3', class: "container", ref: r => (this.containerElement = r) }, h("button", { key: '33cb5977a2d535631030a2e27a74f8fcea5a3977', class: {
+                'pull-to-refresh': true,
+                'pulling': this.pulling,
+                'refreshing': this.state === 'loading',
+            }, "aria-label": "Refreshing..." }, this.state === 'loading' && h("refresh-icon", { slot: "icon" }), this.state !== 'loading' && h("arrow-icon", { slot: "icon" })), h("div", { key: '83a120b8da04de8ccdc98821d1f046b7d87fd3d0', class: "content", ref: r => (this.contentElement = r) }, h("slot", { key: '47612e8d4765a94f9564d2e5bcd6c764dc03d887' })))));
+    }
+};
+__decorate([
+    RegisterComponent({
+        name: 'nylas-threads-refresh',
+        eventToProps: {
+            refresh: async (event, nylasConnector) => {
+                debug(`[nylas-threads-refresh] Refreshing threads`);
+                const { updateState } = event.detail;
+                await updateState('loading');
+                await nylasConnector.threads.getThreads(undefined, 'overwrite', false);
+                await updateState('ready');
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasThreadsRefresh.prototype, "render", null);
+NylasThreadsRefresh.style = NylasThreadsRefreshStyle0;
+
+export { NylasThreadsRefresh as nylas_threads_refresh };
+
+//# sourceMappingURL=nylas-threads-refresh.entry.js.map

package/dist/esm/nylas-threads-refresh.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-threads-refresh.entry.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-threads-refresh/nylas-threads-refresh.scss?tag=nylas-threads-refresh&encapsulation=shadow","src/components/mailbox/nylas-threads-refresh/nylas-threads-refresh.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.container {\n  width: 100%;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.pull-to-refresh {\n  display: none;\n  border: 0;\n  background-color: transparent;\n  text-align: center;\n  width: 100%;\n  justify-content: center;\n}\n\n.pulling {\n  position: relative;\n  display: flex;\n  margin: 0 auto;\n  padding: 1rem;\n  svg {\n    width: 24px;\n    height: 24px;\n    color: var(--nylas-color-primary-500);\n    transform: rotate(90deg);\n  }\n}\n\n.refreshing {\n  position: relative;\n  display: flex;\n  margin: 0 auto;\n  padding: 1rem;\n  svg {\n    width: 24px;\n    height: 24px;\n    fill: var(--nylas-color-primary-500);\n    animation: rotate 1s linear infinite;\n  }\n}\n\n@keyframes rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../../components';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\nimport { debug } from '@/utils/utils';\n\nexport type RefreshEvent = {\n  updateState: (state: 'ready' | 'loading' | 'error') => Promise<void>;\n};\n\n@Component({\n  tag: 'nylas-threads-refresh',\n  styleUrl: 'nylas-threads-refresh.scss',\n  shadow: true,\n})\nexport class NylasThreadsRefresh {\n  private readonly threshold: number = 100;\n\n  @State() start: number = 0;\n\n  @State() state: 'ready' | 'loading' | 'error' = 'ready';\n\n  @State() pulling: boolean = false;\n\n  @Event() refresh!: EventEmitter<RefreshEvent>;\n\n  private containerElement?: HTMLElement;\n  private contentElement?: HTMLElement;\n\n  constructor() {\n    debug(`[nylas-threads-refresh] Constructor`);\n    this.updateState = this.updateState.bind(this);\n  }\n\n  connectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-threads-refresh] Component will load`);\n  }\n\n  componentDidLoad() {\n    debug(`[nylas-threads-refresh] Component did load`);\n    this.containerElement?.addEventListener('touchstart', this.onTouchStart);\n    this.containerElement?.addEventListener('touchmove', this.onTouchMove);\n    this.containerElement?.addEventListener('touchend', this.onTouchEnd);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-threads-refresh] Component disconnected`);\n    this.containerElement?.removeEventListener('touchstart', this.onTouchStart);\n    this.containerElement?.removeEventListener('touchmove', this.onTouchMove);\n    this.containerElement?.removeEventListener('touchend', this.onTouchEnd);\n  }\n\n  @Method()\n  public async updateState(state: 'ready' | 'loading' | 'error') {\n    this.state = state;\n  }\n\n  private onTouchStart = (e: TouchEvent) => {\n    debug(`[nylas-threads-refresh] Touch start`, e.touches[0].pageY, this.containerElement?.scrollTop, this.containerElement?.offsetHeight, this.contentElement?.scrollTop);\n    if (this.containerElement?.scrollTop === 0) {\n      this.start = e.touches[0].pageY;\n    } else {\n      this.start = 0;\n    }\n  };\n\n  private onTouchMove = (e: TouchEvent) => {\n    if (this.start) {\n      const distance = e.touches[0].pageY - this.start;\n      if (distance > this.threshold) {\n        this.pulling = true;\n      } else {\n        this.pulling = false;\n      }\n    }\n  };\n\n  private onTouchEnd = (e: TouchEvent) => {\n    if (this.start) {\n      const distance = e.changedTouches[0].pageY - this.start;\n      if (distance > this.threshold) {\n        this.pulling = false;\n        this.refresh.emit({\n          updateState: this.updateState,\n        });\n      }\n      this.start = 0;\n    }\n  };\n  @RegisterComponent<NylasThreadsRefresh, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-threads-refresh',\n    eventToProps: {\n      refresh: async (event: CustomEvent<RefreshEvent>, nylasConnector: NylasMailboxConnector) => {\n        debug(`[nylas-threads-refresh] Refreshing threads`);\n        const { updateState } = event.detail;\n        await updateState('loading');\n        await nylasConnector.threads.getThreads(undefined, 'overwrite', false);\n        await updateState('ready');\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" ref={r => (this.containerElement = r)}>\n          <button\n            class={{\n              'pull-to-refresh': true,\n              'pulling': this.pulling,\n              'refreshing': this.state === 'loading',\n            }}\n            aria-label=\"Refreshing...\"\n          >\n            {this.state === 'loading' && <refresh-icon slot=\"icon\" />}\n            {this.state !== 'loading' && <arrow-icon slot=\"icon\" />}\n          </button>\n          <div class=\"content\" ref={r => (this.contentElement = r)}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nylas-threads-search.entry.js

@@ -0,0 +1,80 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-b2270b4a.js';
+import { R as RegisterComponent } from './register-component-55376f31.js';
+import { d as debug } from './utils-5074a070.js';
+
+const nylasThreadsSearchCss = ":host{display:block}sp-search{width:100%;border:0}";
+const NylasThreadsSearchStyle0 = nylasThreadsSearchCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasThreadsSearch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.search = createEvent(this, "search", 7);
+        this.onSearch = async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const target = event.target;
+            const value = target.value;
+            if (value === this.internalQuery) {
+                return;
+            }
+            this.internalQuery = value;
+            this.search.emit(this.internalQuery);
+        };
+        this.query = '';
+        this.internalQuery = '';
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-threads-search] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-threads-search] Component did load`);
+    }
+    onQueryChange() {
+        this.internalQuery = this.query;
+    }
+    render() {
+        return (h(Host, { key: '8cec946ccaeb5fe2bf8f1282eaf5bb1e471fdc1d' }, h("sp-theme", { key: '5795406abf802029c3722835aced9fd8bc562ef1', scale: "medium", color: "dark" }, h("sp-search", { key: 'e8c140f3a65a05106156af09a7bdf1c35f709ed1', quiet: true, onSubmit: this.onSearch, onBlur: this.onSearch, value: this.internalQuery }))));
+    }
+    static get watchers() { return {
+        "query": ["onQueryChange"]
+    }; }
+};
+__decorate([
+    RegisterComponent({
+        name: 'nylas-pagination',
+        stateToProps: new Map([['mailbox.searchQuery', 'query']]),
+        eventToProps: {
+            search: async (_event, nylasConnector) => {
+                await nylasConnector.threads.getThreads({
+                    search_query_native: _event.detail || undefined,
+                    page_token: undefined,
+                });
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasThreadsSearch.prototype, "render", null);
+NylasThreadsSearch.style = NylasThreadsSearchStyle0;
+
+export { NylasThreadsSearch as nylas_threads_search };
+
+//# sourceMappingURL=nylas-threads-search.entry.js.map

package/dist/esm/nylas-threads-search.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-threads-search.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,oDAAoD,CAAC;AACnF,iCAAe,qBAAqB;;;;;;;;;;;;;;;;MCUvB,kBAAkB;;;;QAsCrB,aAAQ,GAAG,OAAO,KAAY;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAE3B,IAAI,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE;gBAChC,OAAO;aACR;YAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SACtC,CAAC;qBA/C+B,EAAE;6BAUF,EAAE;;IAEnC,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,4CAA4C,CAAC,CAAC;KACrD;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,2CAA2C,CAAC,CAAC;KACpD;IAGD,aAAa;QACX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;KACjC;IAmCD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,iEAAU,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,IACnC,kEAAW,KAAK,QAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,GAAc,CAC/F,CACN,EACP;KACH;;;;;AARD;IAbC,iBAAiB,CAAwF;QACxG,IAAI,EAAE,kBAAkB;QACxB,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC,CAAC;QACzD,YAAY,EAAE;YACZ,MAAM,EAAE,OAAO,MAA2B,EAAE,cAAqC;gBAC/E,MAAM,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC;oBACtC,mBAAmB,EAAE,MAAM,CAAC,MAAM,IAAI,SAAS;oBAC/C,UAAU,EAAE,SAAS;iBACtB,CAAC,CAAC;aACJ;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;gDASD;;;;;","names":[],"sources":["src/components/mailbox/nylas-threads-search/nylas-threads-search.scss?tag=nylas-threads-search&encapsulation=shadow","src/components/mailbox/nylas-threads-search/nylas-threads-search.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsp-search {\n  width: 100%;\n  border: 0;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\n\n@Component({\n  tag: 'nylas-threads-search',\n  styleUrl: 'nylas-threads-search.scss',\n  shadow: true,\n})\nexport class NylasThreadsSearch {\n  /**\n   * The query to search for threads\n   */\n  @Prop() readonly query: string = '';\n\n  /**\n   * Event emitted when the query changes\n   */\n  @Event() readonly search!: EventEmitter<string>;\n\n  /**\n   * A copy of the query that is used internally, we can mutate this.\n   */\n  @State() internalQuery: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-threads-search] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-threads-search] Component did load`);\n  }\n\n  @Watch('query')\n  onQueryChange() {\n    this.internalQuery = this.query;\n  }\n\n  /**\n   * On search event\n   * @param event On blur event\n   * @returns void\n   */\n  private onSearch = async (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const target = event.target as HTMLInputElement;\n    const value = target.value;\n\n    if (value === this.internalQuery) {\n      return;\n    }\n\n    this.internalQuery = value;\n    this.search.emit(this.internalQuery);\n  };\n\n  @RegisterComponent<NylasThreadsSearch, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-pagination',\n    stateToProps: new Map([['mailbox.searchQuery', 'query']]),\n    eventToProps: {\n      search: async (_event: CustomEvent<string>, nylasConnector: NylasMailboxConnector) => {\n        await nylasConnector.threads.getThreads({\n          search_query_native: _event.detail || undefined,\n          page_token: undefined,\n        });\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <sp-search quiet onSubmit={this.onSearch} onBlur={this.onSearch} value={this.internalQuery}></sp-search>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}