@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/mailbox/nylas-view-thread/nylas-view-thread.js

@@ -0,0 +1,342 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { debug, toTitleCase } from "../../../utils/utils";
+import { Fragment, Host, h } from "@stencil/core";
+import { ViewThreadMessage } from "./view-thread-message";
+export class NylasViewThread {
+    constructor() {
+        this.nylasViewEmailElement = null;
+        this.nylasComposerElement = null;
+        this.onShowContactDataClick = (originalEvent) => {
+            originalEvent.stopPropagation();
+            const target = originalEvent.target;
+            const messageId = target.value;
+            const message = this.internalMessages.find(message => message.data.id === messageId);
+            if (!message) {
+                debug(`[nylas-view-thread] Could not find message ${messageId}`);
+                return;
+            }
+            const event = this.showContactDataClicked.emit(message.data);
+            if (!event.defaultPrevented) {
+                message.showContactData = !message.showContactData;
+                this.internalMessages = [...this.internalMessages];
+            }
+            debug(`[nylas-view-thread] show contact data clicked ${messageId} ${message.showContactData ? 'collapsed' : 'expanded'}`);
+        };
+        this.onMessageClick = (originalEvent) => {
+            const target = originalEvent.target;
+            const messageId = target.dataset.id;
+            const message = this.internalMessages.find(message => message.data.id === messageId);
+            if (!message) {
+                debug(`[nylas-view-thread] Could not find message ${messageId}`);
+                return;
+            }
+            const event = this.messageClicked.emit(message.data);
+            if (!event.defaultPrevented) {
+                if (message.id !== this.internalMessages[this.internalMessages.length - 1]?.id) {
+                    message.collapse = !message.collapse;
+                    if (message.collapse) {
+                        message.showContactData = false;
+                    }
+                }
+                this.internalMessages = [...this.internalMessages];
+            }
+            debug(`[nylas-view-thread] message clicked ${messageId} ${message.collapse ? 'collapsed' : 'expanded'}`);
+        };
+        this.onShowAllEmailsClick = () => {
+            this.showAllEmails = !this.showAllEmails;
+        };
+        this.showComposerClick = () => {
+            this.showComposer = !this.showComposer;
+        };
+        this.draft = undefined;
+        this.thread = undefined;
+        this.messages = [];
+        this.attachments = [];
+        this.state = 'loading';
+        this.internalMessages = [];
+        this.showAllEmails = false;
+        this.showComposer = false;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-view-thread] Component will load`);
+        this.updateInternalMessages(this.messages);
+        const template = this.host.querySelector('template.nylas-view-email');
+        if (!template) {
+            debug(`[nylas-view-thread] Could not find template`);
+            return;
+        }
+        const viewEmailTemplateClone = document.importNode(template.content, true);
+        this.nylasViewEmailElement = viewEmailTemplateClone.querySelector('nylas-view-email');
+        const composerTemplate = this.host.querySelector('template.nylas-composer');
+        if (!composerTemplate) {
+            debug(`[nylas-view-thread] Could not find composer template`);
+            return;
+        }
+        const composerTemplateClone = document.importNode(composerTemplate.content, true);
+        this.nylasComposerElement = composerTemplateClone.querySelector('nylas-composer');
+    }
+    async componentDidLoad() {
+        debug(`[nylas-view-thread] Component did load`);
+    }
+    async threadChanged(thread) {
+        debug(`[nylas-view-thread] Thread changed`, { thread: thread });
+        this.internalMessages = [];
+        const event = this.threadSelected.emit(thread);
+        if (!event.defaultPrevented) {
+            debug(`[nylas-view-thread] Default event not prevented, initializing`);
+        }
+    }
+    updateInternalMessages(messages) {
+        debug(`[nylas-view-thread] Updating internal messages`, { messages });
+        const internalMessages = messages
+            .sort((a, b) => {
+            return a.date > b.date ? 1 : -1;
+        })
+            .map((message, index) => ({
+            id: message.id,
+            data: message,
+            collapse: index === messages.length - 1 ? false : true,
+            showContactData: false,
+        }));
+        this.internalMessages = internalMessages;
+    }
+    render() {
+        const fistMessage = this.internalMessages.length > 2 ? this.internalMessages[0] : null;
+        const lastTwoMessages = this.internalMessages.slice(this.internalMessages.length - 2, this.internalMessages.length);
+        const remainingMessages = this.internalMessages.slice(1, this.internalMessages.length - 2);
+        const lastMessage = this.internalMessages[this.internalMessages.length - 1];
+        return (h(Host, { key: '99b11b1bd476708c89e6284a7d8fda1da9d886ff' }, h("sp-theme", { key: '23bc8c7387f08654aa38a187ee0da13e860ad207', scale: "medium", color: "dark" }, h("div", { key: 'fd78702832a02c3469dfea1b91aea94282cc566d', class: "view-thread" }, h("div", { key: '2405c194d2a7f80802cc25794129496453781445', class: "header" }, h("div", { key: 'f69ceef2127c53c38acb2be2033fd1e5b5502aad', class: 'subject' }, this.thread?.subject), h("div", { key: '2aceb0fa163a30aaa3e6a8f95b52b6ba0583d904', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '33a0f1c33dfd2072681c356a5144eaba7ef9522b', class: "messages" }, fistMessage && (h(ViewThreadMessage, { message: fistMessage, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement })), remainingMessages.length > 0 && this.messages.length > 1 && !this.showAllEmails && lastTwoMessages.length > 0 && (h(Fragment, null, h("div", { class: 'show-more' }, h("button", { type: "button", onClick: this.onShowAllEmailsClick }, h("span", { class: 'avatar' }, remainingMessages.length), " ", h("span", { class: 'sr-only' }, "Show ", remainingMessages.length, " more emails"))), h("hr", null))), remainingMessages.length > 0 &&
+            this.showAllEmails &&
+            this.messages.length > 2 &&
+            remainingMessages.map(email => (h(ViewThreadMessage, { message: email, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage?.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement }))), lastTwoMessages.length > 0 &&
+            lastTwoMessages.map(email => (h(ViewThreadMessage, { message: email, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage?.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement })))), !(this.showComposer && lastMessage) && (h("div", { class: "reply-buttons" }, h("sp-button", { variant: "cta", type: "button", onClick: this.showComposerClick }, h("span", { slot: "icon" }, h("reply-icon", null)), h("span", null, "Reply")), h("sp-button", { variant: "cta", type: "button" }, h("span", { slot: "icon" }, h("reply-all-icon", null)), h("span", null, "Reply All")), h("sp-button", { variant: "cta", type: "button" }, h("span", { slot: "icon" }, h("forward-icon", null)), h("span", null, "Forward")))), this.showComposer && lastMessage && (h("div", { class: "composer" }, h("nylas-composer", { message: lastMessage.data, onClose: this.showComposerClick, onSend: e => {
+                debug(`[nylas-view-thread] Send event`, { message: e.detail.message, replyBody: e.detail.replyBody });
+            } })))))));
+    }
+    static get is() { return "nylas-view-thread"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-view-thread.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-view-thread.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "draft": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Message",
+                    "resolved": "Message | undefined",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Message"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The draft message to display"
+                }
+            },
+            "thread": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Thread",
+                    "resolved": "Thread | undefined",
+                    "references": {
+                        "Thread": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Thread"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Thread to display"
+                }
+            },
+            "messages": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Message[]",
+                    "resolved": "Message[]",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Message"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Messages within the thread to display"
+                },
+                "defaultValue": "[]"
+            },
+            "attachments": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InternalAttachment[]",
+                    "resolved": "InternalAttachment[]",
+                    "references": {
+                        "InternalAttachment": {
+                            "location": "import",
+                            "path": "@/common/types",
+                            "id": "src/common/types.ts::InternalAttachment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attachments for each message within the thread"
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "state": {},
+            "internalMessages": {},
+            "showAllEmails": {},
+            "showComposer": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "threadSelected",
+                "name": "threadSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a thread is selected"
+                },
+                "complexType": {
+                    "original": "Thread",
+                    "resolved": "Thread",
+                    "references": {
+                        "Thread": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Thread"
+                        }
+                    }
+                }
+            }, {
+                "method": "showContactDataClicked",
+                "name": "showContactDataClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a message contact data is clicked"
+                },
+                "complexType": {
+                    "original": "Message",
+                    "resolved": "Message",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Message"
+                        }
+                    }
+                }
+            }, {
+                "method": "messageClicked",
+                "name": "messageClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a message is clicked"
+                },
+                "complexType": {
+                    "original": "Message",
+                    "resolved": "Message",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Message"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "thread",
+                "methodName": "threadChanged"
+            }, {
+                "propName": "messages",
+                "methodName": "updateInternalMessages"
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-view-thread',
+        stateToProps: new Map([
+            ['mailbox.selectedThread', 'thread'],
+            ['mailbox.messages', 'messages'],
+            ['mailbox.state', 'state'],
+        ]),
+        eventToProps: {
+            threadSelected: async (event, nylasConnector) => {
+                debug(`[nylas-view-thread] Nylas init event. Fetching thread messages.`, { event });
+                const thread = event.detail;
+                if (thread && thread.id) {
+                    await nylasConnector.messages.getThreadMessages(thread.id);
+                }
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasViewThread.prototype, "render", null);
+//# sourceMappingURL=nylas-view-thread.js.map

package/dist/collection/components/mailbox/nylas-view-thread/nylas-view-thread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-view-thread.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-view-thread/nylas-view-thread.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { DataState, InternalAttachment, InternalMessage } from '@/common/types';\nimport { debug, toTitleCase } from '@/utils/utils';\nimport { Message, Thread } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../../components';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\nimport { ViewThreadMessage } from './view-thread-message';\n\n@Component({\n  tag: 'nylas-view-thread',\n  styleUrl: 'nylas-view-thread.scss',\n  shadow: true,\n})\nexport class NylasViewThread {\n  /**\n   * The host element\n   */\n  @Element() readonly host!: HTMLDivElement;\n\n  /**\n   * The draft message to display\n   */\n  @Prop() readonly draft?: Message;\n\n  /**\n   * Thread to display\n   */\n  @Prop() readonly thread?: Thread;\n\n  /**\n   * Messages within the thread to display\n   */\n  @Prop() readonly messages: Message[] = [];\n\n  /**\n   * Attachments for each message within the thread\n   */\n  @Prop() readonly attachments: InternalAttachment[] = [];\n\n  /**\n   * Event emitted when a thread is selected\n   */\n  @Event({ cancelable: true }) readonly threadSelected!: EventEmitter<Thread>;\n\n  /**\n   * Event emitted when a message contact data is clicked\n   */\n  @Event() showContactDataClicked!: EventEmitter<Message>;\n\n  /**\n   * Event emitted when a message is clicked\n   */\n  @Event() messageClicked!: EventEmitter<Message>;\n\n  /**\n   * THe data state of the mailbox (loading, ready, error)\n   */\n  @State() readonly state: DataState = 'loading';\n\n  /**\n   * Internal messages contains additional data for each message\n   * required for rendering\n   */\n  @State() internalMessages: InternalMessage[] = [];\n\n  /**\n   * A toggle state to all emails\n   */\n  @State() showAllEmails: boolean = false;\n\n  /**\n   * A toggle state to show the composer\n   */\n  @State() showComposer: boolean = false;\n\n  /**\n   * The view email element to render.\n   * This is the HTML element that is passed to this component\n   * and which is used to render the email body for each message.\n   */\n  private nylasViewEmailElement: HTMLNylasViewEmailElement | null = null;\n\n  /**\n   * The composer element to render.\n   * This is the HTML element that is passed to this component\n   * and which is used to render the composer for each message.\n   */\n  private nylasComposerElement: HTMLNylasComposerElement | null = null;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-view-thread] Component will load`);\n    this.updateInternalMessages(this.messages);\n\n    // Get the template with the class \"nylas-view-email\" and clone it\n    const template = this.host.querySelector<HTMLTemplateElement>('template.nylas-view-email');\n    if (!template) {\n      debug(`[nylas-view-thread] Could not find template`);\n      return;\n    }\n\n    const viewEmailTemplateClone = document.importNode(template.content, true);\n    this.nylasViewEmailElement = viewEmailTemplateClone.querySelector<HTMLNylasViewEmailElement>('nylas-view-email');\n\n    // Get the template with the class \"nylas-composer\" and clone it\n    const composerTemplate = this.host.querySelector<HTMLTemplateElement>('template.nylas-composer');\n    if (!composerTemplate) {\n      debug(`[nylas-view-thread] Could not find composer template`);\n      return;\n    }\n\n    const composerTemplateClone = document.importNode(composerTemplate.content, true);\n    this.nylasComposerElement = composerTemplateClone.querySelector<HTMLNylasComposerElement>('nylas-composer');\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-view-thread] Component did load`);\n  }\n\n  @Watch('thread')\n  async threadChanged(thread: Thread | undefined) {\n    debug(`[nylas-view-thread] Thread changed`, { thread: thread });\n\n    // Reset internal messages\n    this.internalMessages = [];\n\n    const event = this.threadSelected.emit(thread);\n    if (!event.defaultPrevented) {\n      debug(`[nylas-view-thread] Default event not prevented, initializing`);\n    }\n  }\n\n  @Watch('messages')\n  public updateInternalMessages(messages: Message[]) {\n    debug(`[nylas-view-thread] Updating internal messages`, { messages });\n\n    const internalMessages = messages\n      .sort((a, b) => {\n        return a.date > b.date ? 1 : -1;\n      })\n      .map((message, index) => ({\n        id: message.id,\n        data: message,\n        collapse: index === messages.length - 1 ? false : true,\n        showContactData: false,\n      }));\n\n    this.internalMessages = internalMessages;\n  }\n\n  private onShowContactDataClick = (originalEvent: MouseEvent) => {\n    originalEvent.stopPropagation();\n    const target = originalEvent.target as HTMLButtonElement;\n    const messageId = target.value;\n\n    const message = this.internalMessages.find(message => message.data.id === messageId);\n    if (!message) {\n      debug(`[nylas-view-thread] Could not find message ${messageId}`);\n      return;\n    }\n    const event = this.showContactDataClicked.emit(message.data);\n    if (!event.defaultPrevented) {\n      message.showContactData = !message.showContactData;\n      this.internalMessages = [...this.internalMessages];\n    }\n\n    debug(`[nylas-view-thread] show contact data clicked ${messageId} ${message.showContactData ? 'collapsed' : 'expanded'}`);\n  };\n\n  private onMessageClick = (originalEvent: MouseEvent) => {\n    const target = originalEvent.target as HTMLDivElement;\n    const messageId = target.dataset.id;\n    const message = this.internalMessages.find(message => message.data.id === messageId);\n    if (!message) {\n      debug(`[nylas-view-thread] Could not find message ${messageId}`);\n      return;\n    }\n    const event = this.messageClicked.emit(message.data);\n    if (!event.defaultPrevented) {\n      if (message.id !== this.internalMessages[this.internalMessages.length - 1]?.id) {\n        message.collapse = !message.collapse;\n        if (message.collapse) {\n          message.showContactData = false;\n        }\n      }\n\n      this.internalMessages = [...this.internalMessages];\n    }\n    debug(`[nylas-view-thread] message clicked ${messageId} ${message.collapse ? 'collapsed' : 'expanded'}`);\n  };\n\n  private onShowAllEmailsClick = () => {\n    this.showAllEmails = !this.showAllEmails;\n  };\n\n  private showComposerClick = () => {\n    this.showComposer = !this.showComposer;\n  };\n\n  @RegisterComponent<NylasViewThread, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-view-thread',\n    stateToProps: new Map([\n      ['mailbox.selectedThread', 'thread'],\n      ['mailbox.messages', 'messages'],\n      ['mailbox.state', 'state'],\n    ]),\n    eventToProps: {\n      threadSelected: async (event: CustomEvent<Thread>, nylasConnector: NylasMailboxConnector) => {\n        debug(`[nylas-view-thread] Nylas init event. Fetching thread messages.`, { event });\n        const thread = event.detail;\n        if (thread && thread.id) {\n          await nylasConnector.messages.getThreadMessages(thread.id);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const fistMessage = this.internalMessages.length > 2 ? this.internalMessages[0] : null;\n    const lastTwoMessages = this.internalMessages.slice(this.internalMessages.length - 2, this.internalMessages.length);\n    const remainingMessages = this.internalMessages.slice(1, this.internalMessages.length - 2);\n    const lastMessage = this.internalMessages[this.internalMessages.length - 1];\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <div class=\"view-thread\">\n            <div class=\"header\">\n              <div class={'subject'}>{this.thread?.subject}</div>\n              <div class={'folders'}>{this.thread?.folders?.map(folder => <sp-tag size=\"s\">{toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' '))}</sp-tag>)}</div>\n            </div>\n            <div class=\"messages\">\n              {fistMessage && (\n                <ViewThreadMessage\n                  message={fistMessage}\n                  attachments={this.attachments.filter(attachment => attachment.messageId === fistMessage.id)}\n                  onMessageClick={this.onMessageClick}\n                  onShowContactDataClick={this.onShowContactDataClick}\n                  parent={this.host}\n                  viewEmailElement={this.nylasViewEmailElement}\n                  composerElement={this.nylasComposerElement}\n                />\n              )}\n              {remainingMessages.length > 0 && this.messages.length > 1 && !this.showAllEmails && lastTwoMessages.length > 0 && (\n                <Fragment>\n                  <div class={'show-more'}>\n                    <button type=\"button\" onClick={this.onShowAllEmailsClick}>\n                      <span class={'avatar'}>{remainingMessages.length}</span> <span class={'sr-only'}>Show {remainingMessages.length} more emails</span>\n                    </button>\n                  </div>\n                  <hr />\n                </Fragment>\n              )}\n              {remainingMessages.length > 0 &&\n                this.showAllEmails &&\n                this.messages.length > 2 &&\n                remainingMessages.map(email => (\n                  <ViewThreadMessage\n                    message={email}\n                    attachments={this.attachments.filter(attachment => attachment.messageId === fistMessage?.id)}\n                    onMessageClick={this.onMessageClick}\n                    onShowContactDataClick={this.onShowContactDataClick}\n                    parent={this.host}\n                    viewEmailElement={this.nylasViewEmailElement}\n                    composerElement={this.nylasComposerElement}\n                  />\n                ))}\n              {lastTwoMessages.length > 0 &&\n                lastTwoMessages.map(email => (\n                  <ViewThreadMessage\n                    message={email}\n                    attachments={this.attachments.filter(attachment => attachment.messageId === fistMessage?.id)}\n                    onMessageClick={this.onMessageClick}\n                    onShowContactDataClick={this.onShowContactDataClick}\n                    parent={this.host}\n                    viewEmailElement={this.nylasViewEmailElement}\n                    composerElement={this.nylasComposerElement}\n                  />\n                ))}\n            </div>\n            {!(this.showComposer && lastMessage) && (\n              <div class=\"reply-buttons\">\n                <sp-button variant=\"cta\" type=\"button\" onClick={this.showComposerClick}>\n                  <span slot=\"icon\">\n                    <reply-icon></reply-icon>\n                  </span>\n                  <span>Reply</span>\n                </sp-button>\n                <sp-button variant=\"cta\" type=\"button\">\n                  <span slot=\"icon\">\n                    <reply-all-icon></reply-all-icon>\n                  </span>\n                  <span>Reply All</span>\n                </sp-button>\n                <sp-button variant=\"cta\" type=\"button\">\n                  <span slot=\"icon\">\n                    <forward-icon></forward-icon>\n                  </span>\n                  <span>Forward</span>\n                </sp-button>\n              </div>\n            )}\n            {this.showComposer && lastMessage && (\n              <div class=\"composer\">\n                <nylas-composer\n                  message={lastMessage.data}\n                  onClose={this.showComposerClick}\n                  onSend={e => {\n                    debug(`[nylas-view-thread] Send event`, { message: e.detail.message, replyBody: e.detail.replyBody });\n                  }}\n                ></nylas-composer>\n              </div>\n            )}\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/mailbox/nylas-view-thread/view-thread-message.js

@@ -0,0 +1,25 @@
+import { debug, formatParticipants, formatRecipient, formatTimeAgo } from "../../../utils/utils";
+import { Fragment, h } from "@stencil/core";
+function renderViewEmail(message, attachments, container, viewEmailElement, parent) {
+    if (!viewEmailElement) {
+        return;
+    }
+    if (!container) {
+        return;
+    }
+    if (container.children.length > 0) {
+        return;
+    }
+    debug(`[nylas-view-thread] Rendering email`, { message, attachments, viewEmailElement });
+    const viewEmailElementClone = viewEmailElement.cloneNode(true);
+    viewEmailElementClone.message = message.data;
+    viewEmailElementClone.parent = parent;
+    container.appendChild(viewEmailElementClone);
+}
+export const ViewThreadMessage = ({ viewEmailElement, message, attachments, onMessageClick, onShowContactDataClick, parent }) => (h(Fragment, null, h("div", { key: message.id, class: 'message' }, h("div", { class: 'sub-header', "data-id": message.data.id, onClick: onMessageClick }, h("div", { class: 'avatar' }, message.data.from && message.data.from[0]?.name && message.data.from[0]?.name[0]?.toUpperCase()), h("div", { class: 'from' }, h("span", { class: 'name' }, message.data.from && message.data.from[0]?.name), " ", h("span", { class: "email" }, message.data.from && message.data.from[0]?.email)), h("div", { class: 'date' }, new Date(message.data.date * 1000).toLocaleTimeString(undefined, {
+    timeStyle: 'short',
+}), ' ', "(", formatTimeAgo(new Date(message.data.date * 1000)), ")"), h("sp-button-group", { class: "buttons" }, h("nylas-summarize-message-button", { message: message.data })), message.collapse && h("div", { class: 'snippet' }, message.data.snippet), !message.collapse && message.data.to && (h("div", { class: 'to' }, h("span", null, "to"), " ", formatParticipants(message.data.to), ' ', h("button", { type: "button", value: message.data.id, onClick: onShowContactDataClick, class: {
+        'expand': true,
+        'expand--showContactData': message.showContactData,
+    } }, h("chevron-icon", null))))), message.showContactData && (h("div", { class: 'address-info' }, h("div", { class: 'label' }, "From"), h("div", { class: 'value' }, formatRecipient(message.data?.from ? message?.data?.from[0] : { name: '', email: '' })), message.data.to && (h(Fragment, null, h("div", { class: 'label' }, "To"), h("div", { class: 'value' }, message.data.to.map(to => (h("div", null, formatRecipient(to))))))), typeof message.data.cc !== 'undefined' && message.data.cc.length > 0 && (h(Fragment, null, h("div", { class: 'label' }, "CC"), h("div", { class: 'value' }, message.data.cc.map(cc => (h("div", null, formatRecipient(cc))))))))), !message.collapse && viewEmailElement && h("div", { key: message.id, ref: el => renderViewEmail(message, attachments, el, viewEmailElement, parent) }), !message.collapse && !viewEmailElement && h("nylas-view-email", { key: message.id, message: message.data, parent: parent })), h("hr", null)));
+//# sourceMappingURL=view-thread-message.js.map

package/dist/collection/components/mailbox/nylas-view-thread/view-thread-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-thread-message.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-view-thread/view-thread-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { InternalAttachment, InternalMessage } from '@/common/types';\nimport { debug, formatParticipants, formatRecipient, formatTimeAgo } from '@/utils/utils';\nimport { Fragment, FunctionalComponent, h } from '@stencil/core';\n\nexport type ViewThreadMessageProps = {\n  message: InternalMessage;\n  attachments: InternalAttachment[];\n  viewEmailElement?: HTMLNylasViewEmailElement | null;\n  composerElement?: HTMLNylasComposerElement | null;\n  onShowContactDataClick: (event: MouseEvent) => void;\n  onMessageClick: (event: MouseEvent) => void;\n  parent?: HTMLElement;\n};\n\n/**\n * Render view email element\n * @param container Container element to render view email element\n * @param message Message to render\n * @param viewEmailElement View email element to render\n * @param parent Parent element used for mobile view resizing\n */\nfunction renderViewEmail(message: InternalMessage, attachments: InternalAttachment[], container?: HTMLElement, viewEmailElement?: HTMLNylasViewEmailElement, parent?: HTMLElement) {\n  // Skip if message is not defined\n  if (!viewEmailElement) {\n    return;\n  }\n\n  // Skip if container is not defined\n  if (!container) {\n    return;\n  }\n\n  // Skip if container already has a child\n  if (container.children.length > 0) {\n    return;\n  }\n\n  debug(`[nylas-view-thread] Rendering email`, { message, attachments, viewEmailElement });\n\n  // Clone viewEmailElement so that we are not reusing the same element from another\n  // message in the thread\n  const viewEmailElementClone = viewEmailElement.cloneNode(true) as HTMLNylasViewEmailElement;\n  viewEmailElementClone.message = message.data;\n  viewEmailElementClone.parent = parent;\n\n  // Append viewEmailElement to container\n  container.appendChild(viewEmailElementClone);\n}\n\nexport const ViewThreadMessage: FunctionalComponent<ViewThreadMessageProps> = ({ viewEmailElement, message, attachments, onMessageClick, onShowContactDataClick, parent }) => (\n  <Fragment>\n    <div key={message.id} class={'message'}>\n      <div class={'sub-header'} data-id={message.data.id} onClick={onMessageClick}>\n        <div class={'avatar'}>{message.data.from && message.data.from[0]?.name && message.data.from[0]?.name[0]?.toUpperCase()}</div>\n        <div class={'from'}>\n          <span class={'name'}>{message.data.from && message.data.from[0]?.name}</span> <span class=\"email\">{message.data.from && message.data.from[0]?.email}</span>\n        </div>\n        <div class={'date'}>\n          {new Date(message.data.date * 1000).toLocaleTimeString(undefined, {\n            timeStyle: 'short',\n          })}{' '}\n          ({formatTimeAgo(new Date(message.data.date * 1000))})\n        </div>\n        <sp-button-group class=\"buttons\">\n          <nylas-summarize-message-button message={message.data} />\n        </sp-button-group>\n        {message.collapse && <div class={'snippet'}>{message.data.snippet}</div>}\n\n        {!message.collapse && message.data.to && (\n          <div class={'to'}>\n            <span>to</span> {formatParticipants(message.data.to)}{' '}\n            <button\n              type=\"button\"\n              value={message.data.id}\n              onClick={onShowContactDataClick}\n              class={{\n                'expand': true,\n                'expand--showContactData': message.showContactData,\n              }}\n            >\n              <chevron-icon />\n            </button>\n          </div>\n        )}\n      </div>\n      {message.showContactData && (\n        <div class={'address-info'}>\n          <div class={'label'}>From</div>\n          <div class={'value'}>{formatRecipient(message.data?.from ? message?.data?.from[0] : { name: '', email: '' })}</div>\n\n          {message.data.to && (\n            <Fragment>\n              <div class={'label'}>To</div>\n              <div class={'value'}>\n                {message.data.to.map(to => (\n                  <div>{formatRecipient(to)}</div>\n                ))}\n              </div>\n            </Fragment>\n          )}\n\n          {typeof message.data.cc !== 'undefined' && message.data.cc.length > 0 && (\n            <Fragment>\n              <div class={'label'}>CC</div>\n              <div class={'value'}>\n                {message.data.cc.map(cc => (\n                  <div>{formatRecipient(cc)}</div>\n                ))}\n              </div>\n            </Fragment>\n          )}\n        </div>\n      )}\n      {!message.collapse && viewEmailElement && <div key={message.id} ref={el => renderViewEmail(message, attachments, el, viewEmailElement, parent)} />}\n      {/* If no view element was provided, default to our own instance */}\n      {!message.collapse && !viewEmailElement && <nylas-view-email key={message.id} message={message.data} parent={parent} />}\n    </div>\n    <hr />\n  </Fragment>\n);\n"]}

package/dist/collection/components/nylas-if-state/nylas-if-state.css

@@ -0,0 +1,84 @@
+:host {
+  display: block;
+}
+
+div {
+  height: inherit;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.fade-in {
+  animation: fadeIn 1.5s;
+}
+
+.fade-out {
+  animation: fadeOut 1.5s;
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+.slide-in {
+  animation: slideIn 1.5s;
+}
+
+.slide-out {
+  animation: slideOut 1.5s;
+}
+
+@keyframes swipeIn {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes swipeOut {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.swipe-in {
+  animation: swipeIn 1.5s;
+}
+
+.swipe-out {
+  animation: swipeOut 1.5s;
+}