@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/mailbox/nylas-list-folders/nylas-list-folders.js

@@ -0,0 +1,193 @@
+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, formatFolderName, toTitleCase } from "../../../utils/utils";
+import { Fragment, Host, h } from "@stencil/core";
+export class NylasListFolders {
+    constructor() {
+        this.folderSelectedHandler = (folder) => {
+            this.folderSelected?.emit(folder);
+        };
+        this.folders = undefined;
+        this.selectedFolder = undefined;
+        this.defaultFolders = undefined;
+        this.otherFolders = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-list-folders] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-list-folders] Component did load`);
+    }
+    watchFolders(newFolders) {
+        debug(`[nylas-list-folders] watchFolders`, { newFolders });
+        const defaultFolders = ['inbox', 'drafts', 'sent', 'starred', 'spam', 'archive', 'trash'];
+        this.defaultFolders = defaultFolders
+            .filter(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))
+            .map(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))
+            .filter(folder => typeof folder !== 'undefined')
+            .sort((a, b) => defaultFolders.indexOf(a?.name ?? '') - defaultFolders.indexOf(b?.name ?? ''));
+        this.otherFolders = newFolders
+            .filter(folder => !defaultFolders.find(folderName => folder.name?.toLowerCase() === folderName.toLowerCase()))
+            .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? ''));
+    }
+    formatFolderName(folder) {
+        return toTitleCase(folder.name?.replace('CATEGORY_', '') ?? 'Unknown');
+    }
+    getFolderIcon(folder) {
+        switch (folder.name?.toLowerCase()) {
+            case 'inbox':
+                return h("inbox-icon", null);
+            case 'drafts':
+                return h("drafts-icon", null);
+            case 'sent':
+                return h("sent-icon", null);
+            case 'starred':
+                return h("star-icon", null);
+            case 'spam':
+                return h("spam-icon", null);
+            case 'archive':
+                return h("archive-icon", null);
+            case 'trash':
+                return h("trash-icon", null);
+            default:
+                return h("folder-icon", null);
+        }
+    }
+    render() {
+        return (h(Host, { key: '68480d02623588939b4223197e10c567d0ee8bf7' }, h("div", { key: '840ceb51b17a2681b8c1b5717a26513afbb0db02', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+                folder: true,
+                selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),
+            } }, h("div", { slot: "icon", class: "icon" }, this.getFolderIcon(folder)), this.formatFolderName(folder))))), this.otherFolders && (h(Fragment, null, h("hr", null), h("div", { class: "folders" }, this.otherFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+                folder: true,
+                selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),
+            } }, h("div", { slot: "icon", class: "icon" }, this.getFolderIcon(folder)), this.formatFolderName(folder)))))))));
+    }
+    static get is() { return "nylas-list-folders"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-list-folders.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-list-folders.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "folders": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Folder[]",
+                    "resolved": "Folder[] | undefined",
+                    "references": {
+                        "Folder": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Folder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "selectedFolder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected-folder",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "defaultFolders": {},
+            "otherFolders": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "folderSelected",
+                "name": "folderSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Folder",
+                    "resolved": "{ background_color?: string | undefined; child_count?: number | undefined; grant_id?: string | undefined; id?: string | undefined; name?: string | undefined; object?: string | undefined; parent_id?: string | undefined; system_folder?: boolean | undefined; text_color?: string | undefined; total_count?: number | undefined; unread_count?: number | undefined; }",
+                    "references": {
+                        "Folder": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Folder"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "folders",
+                "methodName": "watchFolders"
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-pagination',
+        stateToProps: new Map([
+            ['mailbox.folders', 'folders'],
+            ['mailbox.selectedFolder', 'selectedFolder'],
+        ]),
+        eventToProps: {
+            folderSelected: async (_event, nylasConnector) => {
+                debug(`[nylas-list-folders] folderSelected event`, { _event });
+                await nylasConnector.threads.getThreads({
+                    page_token: undefined,
+                    in: formatFolderName(_event.detail.id ?? 'inbox'),
+                });
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasListFolders.prototype, "render", null);
+//# sourceMappingURL=nylas-list-folders.js.map

package/dist/collection/components/mailbox/nylas-list-folders/nylas-list-folders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-list-folders.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-list-folders/nylas-list-folders.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { debug, formatFolderName, toTitleCase } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\nimport { Folder } from '@nylas/core';\n\n@Component({\n  tag: 'nylas-list-folders',\n  styleUrl: 'nylas-list-folders.scss',\n  shadow: true,\n})\nexport class NylasListFolders {\n  @Prop() readonly folders?: Folder[];\n  @Prop() readonly selectedFolder?: string;\n\n  @Event() readonly folderSelected!: EventEmitter<Folder>;\n\n  @State() defaultFolders?: Folder[];\n  @State() otherFolders?: Folder[];\n\n  constructor() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-list-folders] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-list-folders] Component did load`);\n  }\n\n  @Watch('folders')\n  watchFolders(newFolders: Folder[]) {\n    debug(`[nylas-list-folders] watchFolders`, { newFolders });\n    // Expected default folders\n    const defaultFolders = ['inbox', 'drafts', 'sent', 'starred', 'spam', 'archive', 'trash'];\n\n    // Only include default folders that are in the list of folders, and sort them by the default order\n    this.defaultFolders = defaultFolders\n      .filter(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))\n      .map(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))\n      .filter(folder => typeof folder !== 'undefined')\n      .sort((a, b) => defaultFolders.indexOf(a?.name ?? '') - defaultFolders.indexOf(b?.name ?? '')) as Folder[];\n\n    // Only include folders that are not default folders, and sort them by name\n    this.otherFolders = newFolders\n      .filter(folder => !defaultFolders.find(folderName => folder.name?.toLowerCase() === folderName.toLowerCase()))\n      .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')) as Folder[];\n  }\n\n  private folderSelectedHandler = (folder: Folder) => {\n    this.folderSelected?.emit(folder);\n  };\n\n  private formatFolderName(folder: Folder) {\n    return toTitleCase(folder.name?.replace('CATEGORY_', '') ?? 'Unknown');\n  }\n\n  private getFolderIcon(folder: Folder) {\n    switch (folder.name?.toLowerCase()) {\n      case 'inbox':\n        return <inbox-icon></inbox-icon>;\n      case 'drafts':\n        return <drafts-icon></drafts-icon>;\n      case 'sent':\n        return <sent-icon></sent-icon>;\n      case 'starred':\n        return <star-icon></star-icon>;\n      case 'spam':\n        return <spam-icon></spam-icon>;\n      case 'archive':\n        return <archive-icon></archive-icon>;\n      case 'trash':\n        return <trash-icon></trash-icon>;\n      default:\n        return <folder-icon></folder-icon>;\n    }\n  }\n\n  @RegisterComponent<NylasListFolders, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-pagination',\n    stateToProps: new Map([\n      ['mailbox.folders', 'folders'],\n      ['mailbox.selectedFolder', 'selectedFolder'],\n    ]),\n    eventToProps: {\n      folderSelected: async (_event, nylasConnector) => {\n        debug(`[nylas-list-folders] folderSelected event`, { _event });\n        await nylasConnector.threads.getThreads({\n          page_token: undefined,\n          in: formatFolderName(_event.detail.id ?? 'inbox'),\n        });\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"folders\">\n          {this.defaultFolders?.map(folder => (\n            <sp-button\n              onClick={() => this.folderSelectedHandler(folder)}\n              class={{\n                folder: true,\n                selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),\n              }}\n            >\n              <div slot=\"icon\" class=\"icon\">\n                {this.getFolderIcon(folder)}\n              </div>\n              {this.formatFolderName(folder)}\n            </sp-button>\n          ))}\n        </div>\n        {this.otherFolders && (\n          <Fragment>\n            <hr />\n            <div class=\"folders\">\n              {this.otherFolders?.map(folder => (\n                <sp-button\n                  onClick={() => this.folderSelectedHandler(folder)}\n                  class={{\n                    folder: true,\n                    selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),\n                  }}\n                >\n                  <div slot=\"icon\" class=\"icon\">\n                    {this.getFolderIcon(folder)}\n                  </div>\n                  {this.formatFolderName(folder)}\n                </sp-button>\n              ))}\n            </div>\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/mailbox/nylas-list-folders/test/nylas-list-folders.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('nylas-list-folders', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<nylas-list-folders></nylas-list-folders>');
+        const element = await page.find('nylas-list-folders');
+        expect(element).toHaveClass('hydrated');
+    });
+});
+//# sourceMappingURL=nylas-list-folders.e2e.js.map

package/dist/collection/components/mailbox/nylas-list-folders/test/nylas-list-folders.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-list-folders.e2e.js","sourceRoot":"","sources":["../../../../../src/components/mailbox/nylas-list-folders/test/nylas-list-folders.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2CAA2C,CAAC,CAAC;QAEnE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACtD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('nylas-list-folders', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<nylas-list-folders></nylas-list-folders>');\n\n    const element = await page.find('nylas-list-folders');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/mailbox/nylas-list-folders/test/nylas-list-folders.spec.js

@@ -0,0 +1,12 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NylasListFolders } from "../nylas-list-folders";
+describe('nylas-list-folders', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [NylasListFolders],
+            html: `<nylas-list-folders></nylas-list-folders>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=nylas-list-folders.spec.js.map

package/dist/collection/components/mailbox/nylas-list-folders/test/nylas-list-folders.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-list-folders.spec.js","sourceRoot":"","sources":["../../../../../src/components/mailbox/nylas-list-folders/test/nylas-list-folders.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE,2CAA2C;SAClD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasListFolders } from '../nylas-list-folders';\n\ndescribe('nylas-list-folders', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [NylasListFolders],\n      html: `<nylas-list-folders></nylas-list-folders>`,\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/mailbox/nylas-list-threads/nylas-list-threads.css

@@ -0,0 +1,156 @@
+:host {
+  display: block;
+  font-size: var(--nylas-font-size, inherit);
+  font-family: var(--nylas-font-family, inherit);
+}
+
+.list-thread {
+  display: grid;
+  grid-auto-flow: row;
+  color: var(--nylas-color-primary-800);
+  width: 100%;
+}
+
+.thread {
+  position: relative;
+  width: 100%;
+  display: grid;
+  padding: 0.5rem 1rem;
+  column-gap: 0.25rem;
+  grid-template-areas: "........ from    count   ....... date actions" "checkbox subject subject subject subject actions" "........ snippet snippet snippet snippet actions";
+  grid-template-columns: auto auto auto auto auto auto;
+  margin-bottom: 0.75rem;
+  border-radius: var(--nylas-border-radius-2x);
+  color: var(--nylas-color-primary-00);
+  background-color: var(--nylas-color-primary-50);
+  border: 0;
+  box-sizing: border-box;
+  text-align: left;
+  cursor: pointer;
+  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.3);
+  font-size: inherit;
+  font-family: inherit;
+}
+.thread.loading {
+  animation: pulsate 1.5s infinite ease-in-out;
+  width: 100%;
+  height: 90px;
+}
+.thread:last-of-type {
+  margin-bottom: 0;
+}
+.thread.selected {
+  box-shadow: 0 2px 0 0 var(--nylas-color-primary-200);
+  background-color: var(--nylas-color-primary-100);
+}
+.thread:hover {
+  box-shadow: 0 2px 0 0 var(--nylas-color-primary-200);
+  background-color: var(--nylas-color-primary-100);
+}
+.thread > div {
+  align-self: center;
+  pointer-events: all !important;
+}
+.thread .actions {
+  grid-area: actions;
+}
+.thread .actions sp-action-menu {
+  pointer-events: initial !important;
+}
+.thread .actions sp-action-button {
+  pointer-events: initial !important;
+}
+.thread .actions sp-menu-item {
+  pointer-events: initial !important;
+}
+.thread .checkbox {
+  grid-area: checkbox;
+  margin-right: 0.5rem;
+  pointer-events: initial !important;
+}
+.thread .checkbox sp-checkbox {
+  pointer-events: initial !important;
+}
+.thread .star {
+  grid-area: star;
+  justify-self: end;
+}
+.thread .from {
+  grid-area: from;
+  color: var(--nylas-color-primary-600);
+}
+.thread .count {
+  grid-area: count;
+  color: var(--nylas-color-primary-600);
+}
+.thread .subject {
+  grid-area: subject;
+  color: var(--nylas-color-primary-600);
+}
+.thread .snippet {
+  grid-area: snippet;
+  color: var(--nylas-color-primary-500);
+}
+.thread .date {
+  grid-area: date;
+  align-self: center;
+  color: var(--nylas-color-primary-500);
+}
+.thread.unread .from,
+.thread.unread .count,
+.thread.unread .subject,
+.thread.unread .date {
+  font-weight: 600;
+  color: var(--nylas-color-primary-800);
+}
+.thread.unread .snippet {
+  color: var(--nylas-color-primary-700);
+}
+.thread .from {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.thread .snippet {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.thread .subject {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Extra small devices (phones, 600px and down) */
+/* Small devices (portrait tablets and large phones, 600px and up) */
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  .thread {
+    column-gap: 1rem;
+    grid-template-areas: "checkbox from count subject snippet date actions";
+    grid-template-columns: auto minmax(auto, 200px) auto auto 1fr auto auto;
+    margin-bottom: 0.5rem;
+    border: 1px solid var(--nylas-color-primary-100);
+  }
+  .thread.no-checkbox {
+    grid-template-areas: "from count subject snippet date actions";
+    grid-template-columns: minmax(auto, 200px) auto auto 1fr auto auto;
+  }
+  .thread .checkbox {
+    margin-right: 0;
+  }
+}
+@keyframes pulsate {
+  0% {
+    background-color: var(--nylas-color-primary-50);
+  }
+  50% {
+    background-color: var(--nylas-color-primary-100);
+  }
+  100% {
+    background-color: var(--nylas-color-primary-50);
+  }
+}
+/* Large devices (laptops/desktops, 992px and up) */
+/* Extra large devices (large laptops and desktops, 1200px and up) */

package/dist/collection/components/mailbox/nylas-list-threads/nylas-list-threads.js

@@ -0,0 +1,218 @@
+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, formatDateTime, formatParticipants } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasListThreads {
+    constructor() {
+        this.handleThreadSelected = async (thread) => {
+            debug(`[nylas-list-threads] Thread selected`, { thread });
+            const event = this.threadSelected.emit(thread);
+            if (!event.defaultPrevented) {
+                debug(`[nylas-list-threads] Default event not prevented, selecting thread`);
+            }
+        };
+        this.handleCheckboxClick = async (event) => {
+            debug(`[nylas-list-threads] Checkbox clicked`, { event });
+            event.stopPropagation();
+        };
+        this.threads = [];
+        this.isAuthenticated = false;
+        this.tokenInfo = undefined;
+        this.state = 'ready';
+        this.showCheckbox = false;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-list-threads] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-list-threads] Component did load`, { isAuthenticated: this.isAuthenticated });
+    }
+    render() {
+        return (h(Host, { key: 'f8224d16a4bbf0202ae3bece1840871ad278b747' }, h("div", { key: '266e3536d199a4de04abfd57c0d4f8ea2bb84d95', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
+            this.threads.map(thread => (h("button", { key: thread?.id, class: {
+                    'thread': true,
+                    'unread': thread?.unread === true,
+                    'no-checkbox': this.showCheckbox === false,
+                }, part: "thread", "aria-label": `Thread with subject ${thread?.subject}`, onClick: () => this.handleThreadSelected(thread) }, this.showCheckbox && (h("div", { class: "checkbox", part: "checkbox" }, h("sp-checkbox", { size: "s", value: thread?.id, onClick: this.handleCheckboxClick }))), h("div", { class: "from", part: "from" }, formatParticipants(thread.participants ?? [], this.tokenInfo?.email, thread?.message_ids?.length || 1, 1)), h("div", { class: "subject", part: "subject" }, thread?.subject), h("div", { class: "count", part: "count" }, thread?.message_ids?.length || 1), h("div", { class: "snippet", part: "snippet" }, thread?.snippet?.trim()), thread.latest_message_received_date && (h("div", { class: "date", "aria-label": `${Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(new Date(thread.latest_message_received_date * 1000))}`, part: "date" }, formatDateTime(thread.latest_message_received_date)))))))));
+    }
+    static get is() { return "nylas-list-threads"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-list-threads.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-list-threads.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "threads": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Thread[]",
+                    "resolved": "Thread[]",
+                    "references": {
+                        "Thread": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Thread"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "isAuthenticated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-authenticated",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tokenInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TokenInfo",
+                    "resolved": "undefined | { grant_id: string; email: string; expires_in: number; id_token: string; token_type: string; scope: string; refresh_token: string; }",
+                    "references": {
+                        "TokenInfo": {
+                            "location": "import",
+                            "path": "@nylas/core/dist/auth",
+                            "id": "../nylas-js-core/dist/auth/index.d.ts::TokenInfo"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DataState",
+                    "resolved": "\"loading\" | \"ready\"",
+                    "references": {
+                        "DataState": {
+                            "location": "import",
+                            "path": "@/common/types",
+                            "id": "src/common/types.ts::DataState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "'ready'"
+            },
+            "showCheckbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-checkbox",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "threadSelected",
+                "name": "threadSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Thread",
+                    "resolved": "Thread",
+                    "references": {
+                        "Thread": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Thread"
+                        }
+                    }
+                }
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-list-threads',
+        stateToProps: new Map([
+            ['auth.isAuthenticated', 'isAuthenticated'],
+            ['auth.tokenInfo', 'tokenInfo'],
+            ['mailbox.threads', 'threads'],
+            ['mailbox.state', 'state'],
+        ]),
+        eventToProps: {
+            threadSelected: async (event, nylasConnector) => {
+                debug(`[nylas-list-threads] Thread selected`, { event });
+                await nylasConnector.threads.selectThread(event.detail);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasListThreads.prototype, "render", null);
+//# sourceMappingURL=nylas-list-threads.js.map

package/dist/collection/components/mailbox/nylas-list-threads/nylas-list-threads.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-list-threads.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-list-threads/nylas-list-threads.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { DataState } from '@/common/types';\nimport { debug, formatDateTime, formatParticipants } from '@/utils/utils';\nimport { Thread } from '@nylas/core';\nimport { TokenInfo } from '@nylas/core/dist/auth';\nimport { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\n\n@Component({\n  tag: 'nylas-list-threads',\n  styleUrl: 'nylas-list-threads.scss',\n  shadow: true,\n})\nexport class NylasListThreads {\n  @Prop() readonly threads: Thread[] = [];\n  @Prop() readonly isAuthenticated: boolean = false;\n  @Prop() readonly tokenInfo?: TokenInfo;\n  @Prop() readonly state: DataState = 'ready';\n  @Prop() readonly showCheckbox: boolean = false;\n  @Event({ cancelable: true }) readonly threadSelected!: EventEmitter<Thread>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-list-threads] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-list-threads] Component did load`, { isAuthenticated: this.isAuthenticated });\n  }\n\n  /**\n   * Handle thread selected\n   * @param thread The thread that was selected\n   * @returns void\n   * @emits threadSelected\n   */\n  private handleThreadSelected = async (thread: Thread) => {\n    debug(`[nylas-list-threads] Thread selected`, { thread });\n    const event = this.threadSelected.emit(thread);\n    if (!event.defaultPrevented) {\n      debug(`[nylas-list-threads] Default event not prevented, selecting thread`);\n    }\n  };\n\n  /**\n   * Handle checkbox click\n   * @param event The click event\n   * @returns void\n   */\n  private handleCheckboxClick = async (event: Event) => {\n    debug(`[nylas-list-threads] Checkbox clicked`, { event });\n    event.stopPropagation();\n  };\n\n  @RegisterComponent<NylasListThreads, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-list-threads',\n    stateToProps: new Map([\n      ['auth.isAuthenticated', 'isAuthenticated'],\n      ['auth.tokenInfo', 'tokenInfo'],\n      ['mailbox.threads', 'threads'],\n      ['mailbox.state', 'state'],\n    ]),\n    eventToProps: {\n      threadSelected: async (event: CustomEvent<Thread>, nylasConnector: NylasMailboxConnector) => {\n        debug(`[nylas-list-threads] Thread selected`, { event });\n        await nylasConnector.threads.selectThread(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class={'list-thread'} part=\"list-thread\">\n          {this.state === 'loading' && new Array(10).fill(0).map((_, i) => <div class=\"thread loading\" style={{ animationDelay: `${i * 20}ms` }} />)}\n          {this.state === 'ready' &&\n            this.threads.map(thread => (\n              <button\n                key={thread?.id}\n                class={{\n                  'thread': true,\n                  'unread': thread?.unread === true,\n                  'no-checkbox': this.showCheckbox === false,\n                }}\n                part=\"thread\"\n                aria-label={`Thread with subject ${thread?.subject}`}\n                onClick={() => this.handleThreadSelected(thread)}\n              >\n                {this.showCheckbox && (\n                  <div class=\"checkbox\" part=\"checkbox\">\n                    <sp-checkbox size=\"s\" value={thread?.id} onClick={this.handleCheckboxClick} />\n                  </div>\n                )}\n                <div class=\"from\" part=\"from\">\n                  {formatParticipants(thread.participants ?? [], this.tokenInfo?.email, thread?.message_ids?.length || 1, 1)}\n                </div>\n                <div class=\"subject\" part=\"subject\">\n                  {thread?.subject}\n                </div>\n                <div class=\"count\" part=\"count\">\n                  {thread?.message_ids?.length || 1}\n                </div>\n                <div class=\"snippet\" part=\"snippet\">\n                  {thread?.snippet?.trim()}\n                </div>\n                {thread.latest_message_received_date && (\n                  <div\n                    class=\"date\"\n                    aria-label={`${Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(new Date(thread.latest_message_received_date * 1000))}`}\n                    part=\"date\"\n                  >\n                    {formatDateTime(thread.latest_message_received_date)}\n                  </div>\n                )}\n              </button>\n            ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/mailbox/nylas-list-threads/test/nylas-list-threads.e2e.js

@@ -0,0 +1,22 @@
+import threads from "../../../../common/mocks/threads";
+import { newE2EPage } from "@stencil/core/testing";
+describe('nylas-list-threads', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<nylas-list-threads></nylas-list-threads>');
+        const element = await page.find('nylas-list-threads');
+        expect(element).toHaveClass('hydrated');
+    });
+    it('renders threas when passed via props', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<nylas-list-threads></nylas-list-threads>');
+        const component = await page.find('nylas-list-threads');
+        component.setProperty('threads', threads);
+        await page.waitForChanges();
+        const items = await page.findAll('nylas-list-threads >>> .thread');
+        expect(items).toHaveLength(threads.length);
+        const firstItem = await items[0].find('.subject');
+        expect(firstItem).toEqualText(threads[0].subject);
+    });
+});
+//# sourceMappingURL=nylas-list-threads.e2e.js.map