@nylas/web-elements 1.0.0-prealpha1

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

@@ -0,0 +1,85 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-b2270b4a.js';
+import { R as RegisterComponent } from './register-component-55376f31.js';
+import { d as debug, b as formatParticipants, c as formatDateTime } from './utils-5074a070.js';
+
+const nylasListThreadsCss = ":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}@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)}}";
+const NylasListThreadsStyle0 = nylasListThreadsCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasListThreads = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.threadSelected = createEvent(this, "threadSelected", 7);
+        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)))))))));
+    }
+};
+__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);
+NylasListThreads.style = NylasListThreadsStyle0;
+
+export { NylasListThreads as nylas_list_threads };
+
+//# sourceMappingURL=nylas-list-threads.entry.js.map

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

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

package/dist/esm/nylas-mailbox-pagination.entry.js

@@ -0,0 +1,136 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b2270b4a.js';
+import { R as RegisterComponent } from './register-component-55376f31.js';
+import { d as debug } from './utils-5074a070.js';
+
+const nylasMailboxPaginationCss = ":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)}}";
+const NylasMailboxPaginationStyle0 = nylasMailboxPaginationCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasMailboxPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.next = createEvent(this, "next", 7);
+        this.previous = createEvent(this, "previous", 7);
+        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")))));
+    }
+    get host() { return getElement(this); }
+};
+__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);
+NylasMailboxPagination.style = NylasMailboxPaginationStyle0;
+
+export { NylasMailboxPagination as nylas_mailbox_pagination };
+
+//# sourceMappingURL=nylas-mailbox-pagination.entry.js.map

package/dist/esm/nylas-mailbox-pagination.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-mailbox-pagination.entry.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.scss?tag=nylas-mailbox-pagination&encapsulation=shadow","src/components/mailbox/nylas-mailbox-pagination/nylas-mailbox-pagination.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.container {\n  height: var(--container-height, 100dvh);\n  overflow-y: var(--container-overflow-y, auto);\n}\n\n.pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--nylas-color-primary-600);\n\n  sp-button {\n    svg {\n      animation: rotate 1s linear infinite;\n    }\n  }\n}\n\nsp-button {\n  border-radius: var(--nylas-border-radius);\n  background-color: var(--nylas-color-primary-400);\n  color: var(--nylas-color-primary-900);\n  fill: var(--nylas-color-primary-900);\n\n  &:hover {\n    background-color: var(--nylas-color-primary-500);\n  }\n\n  &:disabled {\n    background-color: var(--nylas-color-primary-200);\n    color: var(--nylas-color-primary-600);\n    cursor: not-allowed;\n  }\n\n  chevron-icon {\n    svg {\n      width: 15px;\n      height: 15px;\n    }\n  }\n}\n\n.next {\n  chevron-icon {\n    transform: rotate(180deg);\n  }\n}\n\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n","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"],"version":3}

package/dist/esm/nylas-mailbox-toolbar-button.entry.js

@@ -0,0 +1,96 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-b2270b4a.js';
+import { R as RegisterComponent } from './register-component-55376f31.js';
+import { d as debug } from './utils-5074a070.js';
+
+const nylasMailboxToolbarButtonCss = ":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}";
+const NylasMailboxToolbarButtonStyle0 = nylasMailboxToolbarButtonCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasMailboxToolbarButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onClick = async () => {
+            const method = this.method;
+            debug(`[nylas-mailbox-toolbar-button] onClick`, { method, mailboxConnector: this.mailboxConnector });
+            if (this.mailboxConnector && method) {
+                const methodToCall = this.callMethod(this.mailboxConnector, method);
+                if (methodToCall) {
+                    await methodToCall();
+                }
+            }
+        };
+        this.method = undefined;
+        this.dataState = undefined;
+        this.iconOnly = false;
+        this.mailboxConnector = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-if-state] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-if-state] Component did load`);
+    }
+    callMethod(obj, accessString) {
+        const parts = accessString.split('.');
+        let current = obj;
+        for (const part of parts.slice(0, -1)) {
+            current = current[part];
+            if (!current) {
+                return undefined;
+            }
+        }
+        const methodName = parts[parts.length - 1];
+        const method = current[methodName];
+        if (typeof method === 'function') {
+            return method.bind(current);
+        }
+        return undefined;
+    }
+    renderByState(state) {
+        return state ? h("slot", { name: "loading" }, "Loading...") : h("slot", null, "Click");
+    }
+    hasSlot(name) {
+        return !!this.host.querySelector(`[slot="${name}"]`);
+    }
+    render() {
+        let state = false;
+        const store = this.mailboxConnector?.nylasMailboxStore;
+        if (typeof store !== 'undefined') {
+            const storeKey = String(this.dataState);
+            state = this.dataState ? store.get(storeKey) === 'loading' : false;
+        }
+        const key = state ? `state-loading` : 'state-ready';
+        return (h(Host, { key: '8885d53e61f2fb52afc9a8b795a71de850b2fbe7' }, h("sp-theme", { key: '7b7d856caa9e2389eaaff33381d374092572f922', scale: "medium", color: "dark" }, h("sp-button", { onClick: this.onClick, disabled: state, key: key, "icon-only": this.iconOnly, label: this.renderByState(state) }, this.hasSlot('icon') && (h("div", { slot: "icon", class: 'slot' }, h("slot", { name: "icon" }))), !this.iconOnly && this.renderByState(state)))));
+    }
+    get host() { return getElement(this); }
+};
+__decorate([
+    RegisterComponent({
+        name: 'nylas-mailbox-toolbar-button',
+        connectorToProp: 'mailboxConnector',
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasMailboxToolbarButton.prototype, "render", null);
+NylasMailboxToolbarButton.style = NylasMailboxToolbarButtonStyle0;
+
+export { NylasMailboxToolbarButton as nylas_mailbox_toolbar_button };
+
+//# sourceMappingURL=nylas-mailbox-toolbar-button.entry.js.map

package/dist/esm/nylas-mailbox-toolbar-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-mailbox-toolbar-button.entry.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.scss?tag=nylas-mailbox-toolbar-button&encapsulation=shadow","src/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsp-button {\n  border-radius: var(--nylas-border-radius);\n  background-color: var(--nylas-color-primary-400);\n  color: var(--nylas-color-primary-900);\n  fill: var(--nylas-color-primary-900);\n\n  &:hover {\n    background-color: var(--nylas-color-primary-500);\n  }\n\n  &:disabled {\n    background-color: var(--nylas-color-primary-200);\n    color: var(--nylas-color-primary-600);\n    cursor: not-allowed;\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { MethodKeys } from '@/common/types';\nimport { NylasMailboxConnectorInterface } from '@/connector/connector-interface';\nimport { debug } from '@/utils/utils';\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\n\nexport type Stores = Record<string, ObservableMap<any>>;\nexport type PublicMethodsOfNylasMailboxConnector = Pick<NylasMailboxConnectorInterface, MethodKeys<NylasMailboxConnectorInterface>>;\nexport type PropertyPaths<T> = T extends object\n  ? {\n      [K in keyof T]: T[K] extends Function ? `${K & string}` : `${K & string}.${PropertyPaths<T[K]>}`;\n    }[keyof T]\n  : '';\nexport type MethodsOfNylasMailboxConnector = PropertyPaths<NylasMailboxConnectorInterface>;\n\n@Component({\n  tag: 'nylas-mailbox-toolbar-button',\n  styleUrl: 'nylas-mailbox-toolbar-button.scss',\n  shadow: true,\n})\nexport class NylasMailboxToolbarButton {\n  @Element() private host!: HTMLNylasMailboxToolbarButtonElement;\n\n  /**\n   * The name of the mailbox connector method to call.\n   */\n  @Prop({ attribute: 'method' }) readonly method!: MethodsOfNylasMailboxConnector;\n\n  /**\n   * The value of the state to compare against to check if the data is loading, error, or ready.\n   */\n  @Prop({ attribute: 'data-state' }) readonly dataState?: string;\n\n  /**\n   * If true, then the component will render the icon only.\n   */\n  @Prop() readonly iconOnly: boolean = false;\n\n  /**\n   * If true, then the component will render if the state is true.\n   * This prop is used with the `state` prop.\n   */\n  @Prop() readonly mailboxConnector?: NylasMailboxConnectorInterface;\n\n  constructor() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-if-state] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-if-state] Component did load`);\n  }\n\n  /**\n   * The click handler for the button.\n   */\n  private onClick = async () => {\n    const method = this.method as unknown as string;\n    debug(`[nylas-mailbox-toolbar-button] onClick`, { method, mailboxConnector: this.mailboxConnector });\n    if (this.mailboxConnector && method) {\n      const methodToCall = this.callMethod(this.mailboxConnector, method);\n      if (methodToCall) {\n        await methodToCall();\n      }\n    }\n  };\n\n  /**\n   * Traverses the object to find the method.\n   * @param obj The object to traverse.\n   * @param accessString The string to access the method.\n   * @returns The method if it exists, undefined otherwise.\n   */\n  private callMethod(obj: any, accessString: string): (() => void) | undefined {\n    // Split the string into parts\n    const parts = accessString.split('.');\n\n    // Traverse the object to find the method\n    let current = obj;\n    for (const part of parts.slice(0, -1)) {\n      current = current[part];\n      if (!current) {\n        return undefined;\n      }\n    }\n\n    // Get the method\n    const methodName = parts[parts.length - 1];\n    const method = current[methodName];\n\n    // Check if the method is a function\n    if (typeof method === 'function') {\n      return method.bind(current);\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Renders the slot based on the state.\n   * @param state The state of the data.\n   */\n  private renderByState(state: boolean) {\n    return state ? <slot name=\"loading\">Loading...</slot> : <slot>Click</slot>;\n  }\n\n  /**\n   * Checks if the slot exists.\n   * @param name The name of the slot.\n   * @returns True if the slot exists, false otherwise.\n   */\n  private hasSlot(name: string) {\n    return !!this.host.querySelector(`[slot=\"${name}\"]`);\n  }\n\n  @RegisterComponent({\n    name: 'nylas-mailbox-toolbar-button',\n    connectorToProp: 'mailboxConnector',\n    fireRegisterEvent: true,\n  })\n  render() {\n    let state = false;\n    const store = this.mailboxConnector?.nylasMailboxStore;\n    if (typeof store !== 'undefined') {\n      const storeKey = String(this.dataState) as keyof typeof store.state;\n      state = this.dataState ? store.get(storeKey) === 'loading' : false;\n    }\n    const key = state ? `state-loading` : 'state-ready';\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <sp-button onClick={this.onClick} disabled={state} key={key} icon-only={this.iconOnly} label={this.renderByState(state)}>\n            {this.hasSlot('icon') && (\n              <div slot=\"icon\" class={'slot'}>\n                <slot name=\"icon\" />\n              </div>\n            )}\n            {!this.iconOnly && this.renderByState(state)}\n          </sp-button>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}