@nylas/web-elements 1.0.0-prealpha1

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

@@ -0,0 +1,110 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import './sp-icon-chevron-left.js';
+import { d as debug } from './utils.js';
+import { T as TIMEZONE_MAP } from './constants.js';
+import { d as defineCustomElement$2 } from './calendar.js';
+import { d as defineCustomElement$1 } from './globe.js';
+
+const nylasSelectedEventCardCss = ":host{display:block}sp-theme{position:relative;height:inherit;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--nylas-font-family)}.event-card{display:flex;align-items:center;flex-direction:column;width:calc(100% - 3rem);background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:3rem 1.5rem 1.5rem 1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-selected-event-card__date{font-size:18px;font-weight:600}.nylas-selected-event-card__time{font-size:16px;font-weight:500}.calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-icon{display:flex;align-items:center;justify-content:center;height:100%}.event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;align-items:center}";
+const NylasSelectedEventCardStyle0 = nylasSelectedEventCardCss;
+
+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 NylasSelectedEventCard = proxyCustomElement(class NylasSelectedEventCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.selectedDate = undefined;
+        this.selectedTimeslot = undefined;
+        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.startTime = '';
+        this.endTime = '';
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-selected-event-card] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-selected-event-card] Component did load`);
+    }
+    handleSelectedTimeslotChange(selectedTimeslot) {
+        this.startTime = new Date(selectedTimeslot?.start_time).toLocaleString(undefined, { timeStyle: 'short' });
+        this.endTime = new Date(selectedTimeslot?.end_time).toLocaleString(undefined, { timeStyle: 'short' });
+    }
+    render() {
+        return (h(Host, { key: 'fcd961bcbdf8af96cb804f6cc55ba59b5c7aa2d3', part: "nsec" }, h("sp-theme", { key: '637833802175cbe45e78873a2447ca067d8d2420', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '7a286c9750f65cf5f220a5c7e4d89851aaaedb4c', class: "event-card", part: "nsec__card" }, h("div", { key: 'fef7ba53349b4130616027e91161a1c2027bf3c9', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: 'f8ee2f52ec98f311d6565c03d132ded574d75a19' })), h("div", { key: '7177ff09c1d05eec169072ea4748673c78c49b7c', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate?.toLocaleDateString(undefined, { dateStyle: 'full' })), h("div", { key: '004ae2949a997ed3c58e87e5742eadd6ca52aadd', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: 'a56d031c414542940c9b7194397927bffb126f68', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '01a763b6072345335403e0a5b497daa2dea42608' }), TIMEZONE_MAP[this.selectedTimezone]))));
+    }
+    static get watchers() { return {
+        "selectedTimeslot": ["handleSelectedTimeslotChange"]
+    }; }
+    static get style() { return NylasSelectedEventCardStyle0; }
+}, [1, "nylas-selected-event-card", {
+        "selectedDate": [16],
+        "selectedTimeslot": [16],
+        "selectedTimezone": [1, "selected-timezone"],
+        "startTime": [32],
+        "endTime": [32]
+    }, undefined, {
+        "selectedTimeslot": ["handleSelectedTimeslotChange"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-selected-event-card',
+        stateToProps: new Map([
+            ['scheduler.selectedDate', 'selectedDate'],
+            ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.selectedTimezone', 'selectedTimezone'],
+        ]),
+        eventToProps: {
+            backButtonClicked: async (_event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.toggleAdditionalData(false);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasSelectedEventCard.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-selected-event-card", "calendar-icon", "globe-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-selected-event-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasSelectedEventCard);
+            }
+            break;
+        case "calendar-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "globe-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasSelectedEventCard as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-selected-event-card2.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-selected-event-card2.js","mappings":";;;;;;;;AAAA,MAAM,yBAAyB,GAAG,y/BAAy/B,CAAC;AAC5hC,qCAAe,yBAAyB;;;;;;;;;;;;;;;;MCsB3B,sBAAsB;;;;;;;gCAa6C,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;yBAEjG,EAAE;uBACJ,EAAE;;IAE7B,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,gDAAgD,CAAC,CAAC;KACzD;IAGD,4BAA4B,CAAC,gBAA0B;QACrD,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,gBAAgB,EAAE,UAAkB,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC;QAClH,IAAI,CAAC,OAAO,GAAG,IAAI,IAAI,CAAC,gBAAgB,EAAE,QAAgB,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC;KAC/G;IAgBD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpD,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,IACvC,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,YAAY,IAC1C,uEAAiB,CACb,EACN,4DAAK,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,YAAY,IAC3D,IAAI,CAAC,YAAY,EAAE,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CACpE,EACN,4DAAK,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,YAAY,IAC3D,IAAI,CAAC,SAAS,SAAK,IAAI,CAAC,OAAO,CAC5B,CACF,EACN,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,gBAAgB,IAC/C,oEAAyB,EACxB,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAChC,CACG,CACN,EACP;KACH;;;;;;;;;;;;;;AAtBD;IAdC,iBAAiB,CAAgG;QAChH,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,wBAAwB,EAAE,cAAc,CAAC;YAC1C,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;SACnD,CAAC;QACF,YAAY,EAAE;YACZ,iBAAiB,EAAE,OAAO,MAA4B,EAAE,uBAAgD;gBACtG,uBAAuB,CAAC,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;aAC/D;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDAuBD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.scss?tag=nylas-selected-event-card&encapsulation=shadow","src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsp-theme {\n  position: relative;\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: calc(100% - 3rem);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 3rem 1.5rem 1.5rem 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-selected-event-card__date {\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.nylas-selected-event-card__time {\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\ncalendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n.event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  align-items: center;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { Timeslot } from '@nylas/core';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\n\n/**\n * The selected event card component.\n * @part nsec - The selected event card component.\n * @part nsec__card - The card component.\n * @part nsec__icon - The calendar icon.\n * @part nsec__date - The date selected.\n * @part nsec__time - The timeslot selected.\n * @part nsec__timezone - The timezone selected.\n */\n@Component({\n  tag: 'nylas-selected-event-card',\n  styleUrl: 'nylas-selected-event-card.scss',\n  shadow: true,\n})\nexport class NylasSelectedEventCard {\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date;\n\n  /**\n   * The selected time.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /***\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-selected-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-selected-event-card] Component did load`);\n  }\n\n  @Watch('selectedTimeslot')\n  handleSelectedTimeslotChange(selectedTimeslot: Timeslot) {\n    this.startTime = new Date(selectedTimeslot?.start_time as Date).toLocaleString(undefined, { timeStyle: 'short' });\n    this.endTime = new Date(selectedTimeslot?.end_time as Date).toLocaleString(undefined, { timeStyle: 'short' });\n  }\n\n  @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-selected-event-card',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nsec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"event-card\" part=\"nsec__card\">\n            <div class=\"calendar-icon\" part=\"nsec__icon\">\n              <calendar-icon />\n            </div>\n            <div class=\"nylas-selected-event-card__date\" part=\"nsec__date\">\n              {this.selectedDate?.toLocaleDateString(undefined, { dateStyle: 'full' })}\n            </div>\n            <div class=\"nylas-selected-event-card__time\" part=\"nsec__time\">\n              {this.startTime} - {this.endTime}\n            </div>\n          </div>\n          <div class=\"event-timezone\" part=\"nsec__timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-summarize-message-button.d.ts

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

package/dist/components/nylas-summarize-message-button.js

@@ -0,0 +1,8 @@
+import { N as NylasSummarizeMessageButton$1, d as defineCustomElement$1 } from './nylas-summarize-message-button2.js';
+
+const NylasSummarizeMessageButton = NylasSummarizeMessageButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasSummarizeMessageButton, defineCustomElement };
+
+//# sourceMappingURL=nylas-summarize-message-button.js.map

package/dist/components/nylas-summarize-message-button.js.map

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

package/dist/components/nylas-summarize-message-button2.js

@@ -0,0 +1,233 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debug, m as htmlToPlainText } from './utils.js';
+import { R as RegisterComponent } from './register-component.js';
+import { d as defineCustomElement$3 } from './loading.js';
+import { d as defineCustomElement$2 } from './play.js';
+import { d as defineCustomElement$1 } from './stop.js';
+
+const nylasSummarizeMessageButtonCss = ":host{display:block}sp-button{padding:0;border:0;border-radius:var(--nylas-border-radius);min-block-size:50%;min-inline-size:2rem;background-color:var(--nylas-color-primary-300);fill:var(--nylas-color-primary-800)}sp-button:hover{background-color:var(--nylas-color-primary-400)}.summarize-button.stopped{animation:none}.summarize-button.playing{animation:pulse 2s infinite}.summarize-button.loading{display:flex;align-content:center;height:1.5rem;width:2rem;vertical-align:middle;animation:pulse 2s infinite;flex-wrap:wrap}.summarize-button.loading loading-icon{--dot-color:var(--nylas-color-primary-600)}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 0 0 var(--nylas-color-primary-300)}70%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(255, 69, 0, 0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255, 69, 0, 0)}}@keyframes wave{0%{transform:translateX(0)}50%{transform:translateX(100%)}100%{transform:translateX(0)}}";
+const NylasSummarizeMessageButtonStyle0 = nylasSummarizeMessageButtonCss;
+
+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 NylasSummarizeMessageButton = proxyCustomElement(class NylasSummarizeMessageButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.summarize = createEvent(this, "summarize", 7);
+        this.abortController = new AbortController();
+        this.onClick = async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.state === 'stopped') {
+                if (this.message) {
+                    this.abortController = new AbortController();
+                    const event = this.summarize.emit({
+                        abortController: this.abortController,
+                        playAudio: this.playAudio,
+                        message: this.message,
+                        updateState: this.updateState,
+                    });
+                    if (!event.defaultPrevented) {
+                        debug(`[nylas-summarize-message-button] Default event not prevented, summarizing message`);
+                        if (this.audioRef) {
+                            await this.audioRef
+                                .play()
+                                .then(() => this.audioRef?.pause())
+                                .catch(error => console.error('Error playing audio:', error));
+                            await this.audioRef.play().catch(error => console.error('Error playing audio:', error));
+                        }
+                    }
+                }
+            }
+            else if (this.state === 'playing') {
+                this.abortController?.abort();
+                this.audioRef?.pause();
+            }
+            else {
+                this.state = 'stopped';
+            }
+        };
+        this.message = undefined;
+        this.state = 'stopped';
+        this.playAudio = this.playAudio.bind(this);
+        this.updateState = this.updateState.bind(this);
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-summarize-message-button] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-summarize-message-button] Component did load`);
+    }
+    async updateState(state) {
+        this.state = state;
+    }
+    async playAudio(ttsResponseBody) {
+        if (!this.audioRef) {
+            this.state = 'stopped';
+            return;
+        }
+        if (!ttsResponseBody) {
+            this.state = 'stopped';
+            return;
+        }
+        const audioElement = this.audioRef;
+        if (!('MediaSource' in window)) {
+            const rb = await ttsResponseBody;
+            if (rb == null) {
+                throw new Error('ReadableStream not yet supported in this browser.');
+            }
+            const reader = rb.getReader();
+            const chunks = [];
+            await this.readChunk(reader, chunks);
+            const blob = new Blob(chunks, { type: 'audio/mpeg' });
+            const blobUrl = URL.createObjectURL(blob);
+            audioElement.src = blobUrl;
+            return;
+        }
+        const mediaSource = new MediaSource();
+        let sourceBuffer;
+        let sourceDone = false;
+        audioElement.src = URL.createObjectURL(mediaSource);
+        mediaSource.addEventListener('sourceopen', onMediaSourceOpen);
+        async function onMediaSourceOpen() {
+            sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
+            sourceBuffer.addEventListener('updateend', onUpdateEnd);
+            const rb = await ttsResponseBody;
+            if (rb == null) {
+                throw new Error('ReadableStream not yet supported in this browser.');
+            }
+            const reader = rb.getReader();
+            const pump = () => {
+                reader
+                    .read()
+                    .then(({ done, value }) => {
+                    if (done) {
+                        sourceDone = true;
+                        return;
+                    }
+                    if (!sourceBuffer.updating) {
+                        sourceBuffer.appendBuffer(value);
+                    }
+                    pump();
+                })
+                    .catch(error => {
+                    console.error('Error while fetching and appending chunks:', error);
+                });
+            };
+            pump();
+            if (audioElement.paused) {
+                audioElement.play().catch(error => console.error('Error playing audio:', error));
+            }
+        }
+        function onUpdateEnd() {
+            if (sourceDone) {
+                mediaSource.endOfStream();
+                mediaSource.removeEventListener('sourceopen', onMediaSourceOpen);
+                mediaSource.removeEventListener('sourceclose', () => {
+                    debug(`[nylas-summarize-message-button] Source closed`);
+                });
+                sourceBuffer.removeEventListener('updateend', onUpdateEnd);
+                return;
+            }
+        }
+    }
+    async readChunk(reader, chunks) {
+        return reader.read().then(({ done, value }) => {
+            if (done) {
+                return chunks;
+            }
+            chunks.push(value);
+            return this.readChunk(reader, chunks);
+        });
+    }
+    render() {
+        return (h(Host, { key: '507fa8a1d6570be296501c8e154ef8b85cda0871' }, h("sp-theme", { key: '2db0d8c57e95c758f240a0e9328c26ec4e3d2e77', scale: "medium", color: "dark" }, h("sp-button", { key: 'df8bb0eb9069456125bd570eb280f018e0ebb9e3', label: "Summarize email", "icon-only": true, onClickCapture: this.onClick, class: {
+                'summarize-button': true,
+                'stopped': this.state === 'stopped',
+                'loading': this.state === 'loading',
+                'playing': this.state === 'playing',
+            } }, this.state === 'stopped' && h("play-icon", null), this.state === 'loading' && h("loading-icon", null), this.state === 'playing' && h("stop-icon", null)), h("audio", { key: '3bc2427c264410ae9c68f1aec3d3b0c675ae108b', ref: r => (this.audioRef = r), autoPlay: true, onPlaying: () => (this.state = 'playing'), onPause: () => (this.state = 'stopped'), onEnded: () => {
+                this.state = 'stopped';
+                debug(`[nylas-summarize-message-button] Audio ended`);
+            } }))));
+    }
+    static get style() { return NylasSummarizeMessageButtonStyle0; }
+}, [1, "nylas-summarize-message-button", {
+        "message": [16],
+        "state": [32],
+        "updateState": [64],
+        "playAudio": [64]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-summarize-message-button',
+        eventToProps: {
+            summarize: async (event, nylasConnector) => {
+                const { playAudio, updateState, abortController, message } = event.detail;
+                const text = htmlToPlainText(message.body || '');
+                await updateState('loading');
+                try {
+                    const summary = await nylasConnector.messages.summarizeText(text);
+                    const ttsResponseBody = nylasConnector.messages.textToSpeech(summary, abortController);
+                    await playAudio(ttsResponseBody);
+                }
+                catch (error) {
+                    await updateState('stopped');
+                    console.error('Error summarizing message:', error);
+                }
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasSummarizeMessageButton.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-summarize-message-button", "loading-icon", "play-icon", "stop-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-summarize-message-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasSummarizeMessageButton);
+            }
+            break;
+        case "loading-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "play-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stop-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasSummarizeMessageButton as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-summarize-message-button2.js.map

package/dist/components/nylas-summarize-message-button2.js.map

@@ -0,0 +1 @@
+{"file":"nylas-summarize-message-button2.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.scss?tag=nylas-summarize-message-button&encapsulation=shadow","src/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsp-button {\n  padding: 0;\n  border: 0;\n  border-radius: var(--nylas-border-radius);\n  min-block-size: 50%;\n  min-inline-size: 2rem;\n\n  background-color: var(--nylas-color-primary-300);\n  fill: var(--nylas-color-primary-800);\n\n  &:hover {\n    background-color: var(--nylas-color-primary-400);\n  }\n}\n\n.summarize-button {\n  &.stopped {\n    animation: none;\n  }\n  &.playing {\n    animation: pulse 2s infinite;\n  }\n  &.loading {\n    display: flex;\n    align-content: center;\n    height: 1.5rem;\n    width: 2rem;\n    vertical-align: middle;\n    animation: pulse 2s infinite;\n    flex-wrap: wrap;\n    loading-icon {\n      --dot-color: var(--nylas-color-primary-600);\n    }\n  }\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 var(--nylas-color-primary-300);\n  }\n  70% {\n    transform: scale(1.05);\n    box-shadow: 0 0 0 10px rgba(255, 69, 0, 0);\n  }\n  100% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0);\n  }\n}\n\n@keyframes wave {\n  0% {\n    transform: translateX(0);\n  }\n  50% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n","import { Message } from '@nylas/core';\nimport { Component, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../../components';\nimport { debug, htmlToPlainText } from '@/utils/utils';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\n\nexport type SummarizeEvent = {\n  playAudio: (ttsResponseBody: Promise<ReadableStream<Uint8Array> | null>) => Promise<void>;\n  updateState: (state: 'loading' | 'playing' | 'stopped') => Promise<void>;\n  abortController: AbortController;\n  message: Message;\n};\n\n@Component({\n  tag: 'nylas-summarize-message-button',\n  styleUrl: 'nylas-summarize-message-button.scss',\n  shadow: true,\n})\nexport class NylasSummarizeMessageButton {\n  /**\n   * The message to summarize\n   */\n  @Prop() readonly message?: Message;\n\n  /**\n   * The on summarize event handler\n   */\n  @Event() readonly summarize!: EventEmitter<SummarizeEvent>;\n\n  /**\n   * The state of the summarize button\n   */\n  @State() state: 'loading' | 'playing' | 'stopped' = 'stopped';\n\n  /**\n   * The audio element used to play the summary\n   */\n  private audioRef?: HTMLAudioElement;\n\n  /**\n   * The AbortController used to cancel the summarize request\n   */\n  private abortController: AbortController = new AbortController();\n\n  constructor() {\n    this.playAudio = this.playAudio.bind(this);\n    this.updateState = this.updateState.bind(this);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-summarize-message-button] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-summarize-message-button] Component did load`);\n  }\n\n  /**\n   * Handle summarize button click\n   * @param event Click event\n   */\n  private onClick = async (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.state === 'stopped') {\n      if (this.message) {\n        this.abortController = new AbortController();\n        const event = this.summarize.emit({\n          abortController: this.abortController,\n          playAudio: this.playAudio,\n          message: this.message,\n          updateState: this.updateState,\n        });\n\n        if (!event.defaultPrevented) {\n          debug(`[nylas-summarize-message-button] Default event not prevented, summarizing message`);\n\n          if (this.audioRef) {\n            await this.audioRef\n              .play()\n              .then(() => this.audioRef?.pause())\n              .catch(error => console.error('Error playing audio:', error));\n            await this.audioRef.play().catch(error => console.error('Error playing audio:', error));\n          }\n        }\n      }\n    } else if (this.state === 'playing') {\n      this.abortController?.abort();\n      this.audioRef?.pause();\n    } else {\n      this.state = 'stopped';\n    }\n  };\n\n  /**\n   * Update the state of the summarize button\n   * @param state The new state\n   * @returns Promise<void>\n   */\n  @Method()\n  public async updateState(state: 'loading' | 'playing' | 'stopped') {\n    this.state = state;\n  }\n\n  /**\n   * Play audio\n   * @param ttsResponseBody Text to speech response body\n   * @param audioRef Audio element\n   */\n  @Method()\n  public async playAudio(ttsResponseBody: Promise<ReadableStream<Uint8Array> | null>) {\n    if (!this.audioRef) {\n      this.state = 'stopped';\n      return;\n    }\n\n    if (!ttsResponseBody) {\n      this.state = 'stopped';\n      return;\n    }\n\n    const audioElement: HTMLAudioElement = this.audioRef;\n\n    // If no MediaSource support, use a blob URL\n    if (!('MediaSource' in window)) {\n      const rb = await ttsResponseBody;\n\n      if (rb == null) {\n        throw new Error('ReadableStream not yet supported in this browser.');\n      }\n\n      const reader: ReadableStreamDefaultReader<Uint8Array> = rb.getReader();\n      const chunks: Uint8Array[] = [];\n\n      // Start reading chunks\n      await this.readChunk(reader, chunks);\n\n      // Create a blob from the chunks\n      const blob = new Blob(chunks, { type: 'audio/mpeg' });\n      const blobUrl = URL.createObjectURL(blob);\n      audioElement.src = blobUrl;\n      return;\n    }\n\n    const mediaSource = new MediaSource();\n    let sourceBuffer: SourceBuffer;\n\n    let sourceDone: boolean = false;\n\n    audioElement.src = URL.createObjectURL(mediaSource);\n    mediaSource.addEventListener('sourceopen', onMediaSourceOpen);\n\n    async function onMediaSourceOpen() {\n      sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');\n      sourceBuffer.addEventListener('updateend', onUpdateEnd);\n      const rb = await ttsResponseBody;\n\n      if (rb == null) {\n        throw new Error('ReadableStream not yet supported in this browser.');\n      }\n\n      const reader = rb.getReader();\n      const pump = () => {\n        reader\n          .read()\n          .then(({ done, value }) => {\n            if (done) {\n              sourceDone = true;\n              return;\n            }\n            if (!sourceBuffer.updating) {\n              sourceBuffer.appendBuffer(value);\n            }\n            pump();\n          })\n          .catch(error => {\n            console.error('Error while fetching and appending chunks:', error);\n          });\n      };\n\n      pump();\n\n      if (audioElement.paused) {\n        audioElement.play().catch(error => console.error('Error playing audio:', error));\n      }\n    }\n\n    function onUpdateEnd() {\n      if (sourceDone) {\n        mediaSource.endOfStream();\n        mediaSource.removeEventListener('sourceopen', onMediaSourceOpen);\n        mediaSource.removeEventListener('sourceclose', () => {\n          debug(`[nylas-summarize-message-button] Source closed`);\n        });\n        sourceBuffer.removeEventListener('updateend', onUpdateEnd);\n        return;\n      }\n    }\n  }\n\n  /**\n   * Read chunks from the ReadableStream\n   * @param reader The reader to read chunks from for the TTS audio\n   * @param chunks The chunks array to append the chunks to\n   * @returns Promise<Uint8Array[]>\n   */\n  private async readChunk(reader: ReadableStreamDefaultReader<Uint8Array>, chunks: Uint8Array[]): Promise<Uint8Array[]> {\n    return reader.read().then(({ done, value }) => {\n      if (done) {\n        // All chunks have been read, return the chunks array\n        return chunks;\n      }\n      chunks.push(value);\n      return this.readChunk(reader, chunks); // Read the next chunk\n    });\n  }\n\n  @RegisterComponent<NylasSummarizeMessageButton, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-summarize-message-button',\n    eventToProps: {\n      summarize: async (event: CustomEvent<SummarizeEvent>, nylasConnector: NylasMailboxConnector) => {\n        const { playAudio, updateState, abortController, message } = event.detail;\n        const text = htmlToPlainText(message.body || '');\n        await updateState('loading');\n        try {\n          const summary = await nylasConnector.messages.summarizeText(text);\n          const ttsResponseBody = nylasConnector.messages.textToSpeech(summary, abortController);\n          await playAudio(ttsResponseBody);\n        } catch (error) {\n          await updateState('stopped');\n          console.error('Error summarizing message:', error);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <sp-button\n            label=\"Summarize email\"\n            icon-only\n            onClickCapture={this.onClick}\n            class={{\n              'summarize-button': true,\n              'stopped': this.state === 'stopped',\n              'loading': this.state === 'loading',\n              'playing': this.state === 'playing',\n            }}\n          >\n            {this.state === 'stopped' && <play-icon />}\n            {this.state === 'loading' && <loading-icon />}\n            {this.state === 'playing' && <stop-icon />}\n          </sp-button>\n          <audio\n            ref={r => (this.audioRef = r)}\n            autoPlay={true}\n            onPlaying={() => (this.state = 'playing')}\n            onPause={() => (this.state = 'stopped')}\n            onEnded={() => {\n              this.state = 'stopped';\n              debug(`[nylas-summarize-message-button] Audio ended`);\n            }}\n          ></audio>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-threads-refresh.d.ts

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

package/dist/components/nylas-threads-refresh.js

@@ -0,0 +1,149 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { d as debug } from './utils.js';
+import { d as defineCustomElement$3 } from './arrow.js';
+import { d as defineCustomElement$2 } from './refresh.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$1 = proxyCustomElement(class NylasThreadsRefresh extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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' })))));
+    }
+    static get style() { return NylasThreadsRefreshStyle0; }
+}, [1, "nylas-threads-refresh", {
+        "start": [32],
+        "state": [32],
+        "pulling": [32],
+        "updateState": [64]
+    }]);
+__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$1.prototype, "render", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-threads-refresh", "arrow-icon", "refresh-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-threads-refresh":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasThreadsRefresh$1);
+            }
+            break;
+        case "arrow-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "refresh-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const NylasThreadsRefresh = NylasThreadsRefresh$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasThreadsRefresh, defineCustomElement };
+
+//# sourceMappingURL=nylas-threads-refresh.js.map

package/dist/components/nylas-threads-refresh.js.map

@@ -0,0 +1 @@
+{"file":"nylas-threads-refresh.js","mappings":"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","names":["NylasThreadsRefresh"],"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/components/nylas-threads-search.d.ts

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