@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.css

@@ -0,0 +1,55 @@
+:host {
+  display: contents;
+}
+
+.container {
+  height: var(--container-height, 100dvh);
+  overflow-y: var(--container-overflow-y, auto);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--nylas-color-primary-600);
+}
+.pagination sp-button svg {
+  animation: rotate 1s linear infinite;
+}
+
+sp-button {
+  border-radius: var(--nylas-border-radius);
+  background-color: var(--nylas-color-primary-400);
+  color: var(--nylas-color-primary-900);
+  fill: var(--nylas-color-primary-900);
+}
+sp-button:hover {
+  background-color: var(--nylas-color-primary-500);
+}
+sp-button:disabled {
+  background-color: var(--nylas-color-primary-200);
+  color: var(--nylas-color-primary-600);
+  cursor: not-allowed;
+}
+sp-button chevron-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.next chevron-icon {
+  transform: rotate(180deg);
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.js

@@ -0,0 +1,371 @@
+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 } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasMailboxPagination {
+    constructor() {
+        this.state = 'ready';
+        this.hasNextPage = false;
+        this.hasPreviousPage = false;
+        this.scrollTarget = 'container';
+        this.mobileOnlyInfiniteScroll = true;
+        this.mobileViewPortWidth = 768;
+        debug(`[nylas-pagination] Constructed`);
+        this.isScrollAtContainerBottom = this.isScrollAtContainerBottom.bind(this);
+        this.isScrollAtPageBottom = this.isScrollAtPageBottom.bind(this);
+        this.nextPage = this.nextPage.bind(this);
+        this.previousPage = this.previousPage.bind(this);
+        this.handlePageScroll = this.handlePageScroll.bind(this);
+        this.handleContainerScroll = this.handleContainerScroll.bind(this);
+    }
+    connectedCallback() {
+        debug(`[nylas-pagination] Component connected`);
+    }
+    async componentWillLoad() {
+        debug(`[nylas-pagination] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-pagination] Component did load`);
+        if (this.containerElement) {
+            this.containerElement.addEventListener('scroll', this.handleContainerScroll);
+        }
+    }
+    async componentWillRender() {
+        debug(`[nylas-pagination] Component will render`);
+    }
+    disconnectedCallback() {
+        debug(`[nylas-pagination] Component disconnected`);
+        if (this.containerElement) {
+            this.containerElement.removeEventListener('scroll', this.handleContainerScroll);
+        }
+    }
+    handlePageScroll(_event) {
+        if (this.isScrollAtPageBottom() && this.canScroll && this.scrollTarget === 'page') {
+            this.nextPage();
+        }
+    }
+    async nextPage() {
+        const hasChildren = this.host.children.length > 0;
+        this.next.emit({
+            hasChildren,
+        });
+    }
+    async previousPage() {
+        const hasChildren = this.host.children.length > 0;
+        this.previous.emit({
+            hasChildren,
+        });
+    }
+    handleContainerScroll(_event) {
+        if (this.isScrollAtContainerBottom() && this.canScroll && this.scrollTarget === 'container') {
+            this.nextPage();
+        }
+    }
+    isScrollAtContainerBottom() {
+        if (!this.containerElement) {
+            return false;
+        }
+        return this.containerElement && this.containerElement.scrollTop + this.containerElement.clientHeight >= this.containerElement.scrollHeight;
+    }
+    isScrollAtPageBottom() {
+        return window.innerHeight + window.scrollY >= document.body.offsetHeight;
+    }
+    get canScroll() {
+        const hasChildren = this.host.children.length > 0;
+        return this.state === 'ready' && hasChildren && (!this.mobileOnlyInfiniteScroll || window.innerWidth < this.mobileViewPortWidth);
+    }
+    render() {
+        const hasChildren = this.host.children.length > 0;
+        if (hasChildren) {
+            return (h(Host, null, h("div", { class: "container", ref: r => (this.containerElement = r) }, h("slot", null), this.canScroll && (h("div", { class: 'pagination' }, h("sp-theme", { scale: "medium", color: "dark" }, this.state === 'ready' && this.hasNextPage && (h("sp-button", { onClick: this.nextPage }, h("div", { slot: "icon" }, h("refresh-icon", { class: 'refres-icon' })), ' ', "Load more..."))))))));
+        }
+        return (h(Host, null, h("sp-theme", { scale: "medium", color: "dark" }, this.hasPreviousPage && (h("sp-button", { class: 'previous', parr: "previous", onClick: this.previousPage }, h("div", { slot: "icon" }, h("chevron-icon", { class: 'previous-icon' })), ' ', "Previous")), this.hasPreviousPage && this.hasNextPage && ' ', this.hasNextPage && (h("sp-button", { class: 'next', parr: "next", onClick: this.nextPage }, h("div", { slot: "icon" }, h("chevron-icon", { class: 'next-icon' })), ' ', "Next")))));
+    }
+    static get is() { return "nylas-mailbox-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-mailbox-pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-mailbox-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'ready' | 'loading' | 'error'",
+                    "resolved": "\"error\" | \"loading\" | \"ready\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The state of the mailbox"
+                        }],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "'ready'"
+            },
+            "hasNextPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Whether or not the mailbox has a next or previous page of threads"
+                        }],
+                    "text": ""
+                },
+                "attribute": "has-next-page",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hasPreviousPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Whether or not the mailbox has a previous page of threads"
+                        }],
+                    "text": ""
+                },
+                "attribute": "has-previous-page",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "scrollTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'container' | 'page'",
+                    "resolved": "\"container\" | \"page\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Whether or not the mailbox has a next or previous page of threads"
+                        }],
+                    "text": ""
+                },
+                "attribute": "scroll-target",
+                "reflect": false,
+                "defaultValue": "'container'"
+            },
+            "mobileOnlyInfiniteScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Whether or not the infinity scroll should only be enabled on mobile devices"
+                        }],
+                    "text": ""
+                },
+                "attribute": "mobile-only-infinite-scroll",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "mobileViewPortWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The width of the mobile viewport"
+                        }],
+                    "text": ""
+                },
+                "attribute": "mobile-view-port-width",
+                "reflect": false,
+                "defaultValue": "768"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "next",
+                "name": "next",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "An event that is fired when the user scrolls to the bottom of the page"
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PaginationEvent",
+                    "resolved": "{ hasChildren: boolean; }",
+                    "references": {
+                        "PaginationEvent": {
+                            "location": "local",
+                            "path": "/Users/aarondemello/Developer/nylas/nylas/packages/nylas-web-elements/src/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.tsx",
+                            "id": "src/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.tsx::PaginationEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "previous",
+                "name": "previous",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "An event that is fired when the user scrolls to the top of the page"
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PaginationEvent",
+                    "resolved": "{ hasChildren: boolean; }",
+                    "references": {
+                        "PaginationEvent": {
+                            "location": "local",
+                            "path": "/Users/aarondemello/Developer/nylas/nylas/packages/nylas-web-elements/src/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.tsx",
+                            "id": "src/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.tsx::PaginationEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "nextPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "description",
+                            "text": "Go to the next page of threads"
+                        }]
+                }
+            },
+            "previousPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "description",
+                            "text": "Go to the previous page of threads"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "handlePageScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-pagination',
+        stateToProps: new Map([
+            ['mailbox.hasNextThreadPage', 'hasNextPage'],
+            ['mailbox.hasPreviousThreadPage', 'hasPreviousPage'],
+            ['mailbox.state', 'state'],
+        ]),
+        eventToProps: {
+            next: async (event, nylasConnector) => {
+                debug(`[nylas-pagination] Next page event fired`);
+                const { hasChildren } = event.detail;
+                await nylasConnector.threads.nextThreadPage(hasChildren ? 'append' : 'overwrite', !hasChildren);
+            },
+            previous: async (event, nylasConnector) => {
+                debug(`[nylas-pagination] Previous page event fired`);
+                const { hasChildren } = event.detail;
+                await nylasConnector.threads.previousThreadPage(hasChildren ? 'append' : 'overwrite', !hasChildren);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasMailboxPagination.prototype, "render", null);
+//# sourceMappingURL=nylas-mailbox-pagination.js.map

package/dist/collection/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-mailbox-pagination.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\n\nexport type PaginationEvent = {\n  hasChildren: boolean;\n};\n\n@Component({\n  tag: 'nylas-mailbox-pagination',\n  styleUrl: 'nylas-mailbox-pagination.scss',\n  shadow: true,\n})\nexport class NylasMailboxPagination {\n  /**\n   * @description The host element\n   */\n  @Element() host!: HTMLNylasMailboxPaginationElement;\n\n  /**\n   * @description The state of the mailbox\n   */\n  @Prop() state: 'ready' | 'loading' | 'error' = 'ready';\n\n  /**\n   * @description Whether or not the mailbox has a next or previous page of threads\n   */\n  @Prop() hasNextPage: boolean = false;\n\n  /**\n   * @description Whether or not the mailbox has a previous page of threads\n   */\n  @Prop() hasPreviousPage: boolean = false;\n\n  /**\n   * @description Whether or not the mailbox has a next or previous page of threads\n   */\n  @Prop() scrollTarget: 'container' | 'page' = 'container';\n\n  /**\n   * @description Whether or not the infinity scroll should only be enabled on mobile devices\n   */\n  @Prop() mobileOnlyInfiniteScroll: boolean = true;\n\n  /**\n   * @description The width of the mobile viewport\n   */\n  @Prop() mobileViewPortWidth: number = 768;\n\n  /**\n   * @description An event that is fired when the user scrolls to the bottom of the page\n   */\n  @Event() next!: EventEmitter<PaginationEvent>;\n\n  /**\n   * @description An event that is fired when the user scrolls to the top of the page\n   */\n  @Event() previous!: EventEmitter<PaginationEvent>;\n\n  /**\n   * @description The container element\n   */\n  private containerElement?: HTMLDivElement;\n\n  constructor() {\n    debug(`[nylas-pagination] Constructed`);\n    this.isScrollAtContainerBottom = this.isScrollAtContainerBottom.bind(this);\n    this.isScrollAtPageBottom = this.isScrollAtPageBottom.bind(this);\n    this.nextPage = this.nextPage.bind(this);\n    this.previousPage = this.previousPage.bind(this);\n    this.handlePageScroll = this.handlePageScroll.bind(this);\n    this.handleContainerScroll = this.handleContainerScroll.bind(this);\n  }\n\n  connectedCallback() {\n    debug(`[nylas-pagination] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-pagination] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-pagination] Component did load`);\n    if (this.containerElement) {\n      this.containerElement.addEventListener('scroll', this.handleContainerScroll);\n    }\n  }\n\n  async componentWillRender() {\n    debug(`[nylas-pagination] Component will render`);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-pagination] Component disconnected`);\n    if (this.containerElement) {\n      this.containerElement.removeEventListener('scroll', this.handleContainerScroll);\n    }\n  }\n\n  /**\n   * @description Listen for scroll events and fire the next page event when the user scrolls to the bottom of the page\n   * @param _event An event that is fired when the user scrolls\n   */\n  @Listen('scroll', { target: 'window' })\n  public handlePageScroll(_event: Event) {\n    if (this.isScrollAtPageBottom() && this.canScroll && this.scrollTarget === 'page') {\n      this.nextPage();\n    }\n  }\n\n  /**\n   * @description Go to the next page of threads\n   */\n  @Method()\n  public async nextPage() {\n    const hasChildren = this.host.children.length > 0;\n    this.next.emit({\n      hasChildren,\n    });\n  }\n\n  /**\n   * @description Go to the previous page of threads\n   */\n  @Method()\n  public async previousPage() {\n    const hasChildren = this.host.children.length > 0;\n    this.previous.emit({\n      hasChildren,\n    });\n  }\n\n  /**\n   * @description Handle the scroll event\n   * @param event An event that is fired when the user scrolls\n   */\n  private handleContainerScroll(_event: Event) {\n    if (this.isScrollAtContainerBottom() && this.canScroll && this.scrollTarget === 'container') {\n      this.nextPage();\n    }\n  }\n\n  /**\n   * @description Check if the user has scrolled to the bottom of the page\n   */\n  private isScrollAtContainerBottom() {\n    if (!this.containerElement) {\n      return false;\n    }\n    return this.containerElement && this.containerElement.scrollTop + this.containerElement.clientHeight >= this.containerElement.scrollHeight;\n  }\n\n  /**\n   * @description Check if the user has scrolled to the bottom of the page\n   */\n  private isScrollAtPageBottom() {\n    return window.innerHeight + window.scrollY >= document.body.offsetHeight;\n  }\n\n  /**\n   * @description Check if the user can scroll to the next page\n   * @returns boolean\n   */\n  private get canScroll() {\n    const hasChildren = this.host.children.length > 0;\n    return this.state === 'ready' && hasChildren && (!this.mobileOnlyInfiniteScroll || window.innerWidth < this.mobileViewPortWidth);\n  }\n\n  @RegisterComponent<NylasMailboxPagination, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-pagination',\n    stateToProps: new Map([\n      ['mailbox.hasNextThreadPage', 'hasNextPage'],\n      ['mailbox.hasPreviousThreadPage', 'hasPreviousPage'],\n      ['mailbox.state', 'state'],\n    ]),\n    eventToProps: {\n      next: async (event: CustomEvent<PaginationEvent>, nylasConnector: NylasMailboxConnector) => {\n        debug(`[nylas-pagination] Next page event fired`);\n        const { hasChildren } = event.detail;\n        await nylasConnector.threads.nextThreadPage(hasChildren ? 'append' : 'overwrite', !hasChildren);\n      },\n      previous: async (event: CustomEvent<PaginationEvent>, nylasConnector: NylasMailboxConnector) => {\n        debug(`[nylas-pagination] Previous page event fired`);\n        const { hasChildren } = event.detail;\n        await nylasConnector.threads.previousThreadPage(hasChildren ? 'append' : 'overwrite', !hasChildren);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const hasChildren = this.host.children.length > 0;\n    if (hasChildren) {\n      return (\n        <Host>\n          <div class=\"container\" ref={r => (this.containerElement = r)}>\n            <slot></slot>\n            {this.canScroll && (\n              <div class={'pagination'}>\n                <sp-theme scale=\"medium\" color=\"dark\">\n                  {this.state === 'ready' && this.hasNextPage && (\n                    <sp-button onClick={this.nextPage}>\n                      <div slot=\"icon\">\n                        <refresh-icon class={'refres-icon'} />\n                      </div>{' '}\n                      Load more...\n                    </sp-button>\n                  )}\n                </sp-theme>\n              </div>\n            )}\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          {this.hasPreviousPage && (\n            <sp-button class={'previous'} parr=\"previous\" onClick={this.previousPage}>\n              <div slot=\"icon\">\n                <chevron-icon class={'previous-icon'} />\n              </div>{' '}\n              Previous\n            </sp-button>\n          )}\n          {this.hasPreviousPage && this.hasNextPage && ' '}\n          {this.hasNextPage && (\n            <sp-button class={'next'} parr=\"next\" onClick={this.nextPage}>\n              <div slot=\"icon\">\n                <chevron-icon class={'next-icon'} />\n              </div>{' '}\n              Next\n            </sp-button>\n          )}\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-mailbox-pagination.e2e.js","sourceRoot":"","sources":["../../../../../src/components/mailbox/nylas-mailbox-pagination/test/nylas-mailbox-pagination.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uDAAuD,CAAC,CAAC;QAE/E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC5D,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-pagination', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<nylas-mailbox-pagination></nylas-mailbox-pagination>');\n\n    const element = await page.find('nylas-mailbox-pagination');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-mailbox-pagination.spec.js","sourceRoot":"","sources":["../../../../../src/components/mailbox/nylas-mailbox-pagination/test/nylas-mailbox-pagination.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,sBAAsB,CAAC;YACpC,IAAI,EAAE,uDAAuD;SAC9D,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 { NylasMailboxPagination } from '../nylas-mailbox-pagination';\n\ndescribe('nylas-pagination', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [NylasMailboxPagination],\n      html: `<nylas-mailbox-pagination></nylas-mailbox-pagination>`,\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+}
+
+sp-button {
+  border-radius: var(--nylas-border-radius);
+  background-color: var(--nylas-color-primary-400);
+  color: var(--nylas-color-primary-900);
+  fill: var(--nylas-color-primary-900);
+}
+sp-button:hover {
+  background-color: var(--nylas-color-primary-500);
+}
+sp-button:disabled {
+  background-color: var(--nylas-color-primary-200);
+  color: var(--nylas-color-primary-600);
+  cursor: not-allowed;
+}