@nylas/web-elements 1.0.0-prealpha1

package/dist/components/nylas-if-state.js.map

@@ -0,0 +1 @@
+{"file":"nylas-if-state.js","mappings":"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","names":["NylasIfState"],"sources":["src/components/nylas-if-state/nylas-if-state.css?tag=nylas-if-state&encapsulation=shadow","src/components/nylas-if-state/nylas-if-state.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndiv {\n  height: inherit;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n.fade-in {\n  animation: fadeIn 1.5s;\n}\n\n.fade-out {\n  animation: fadeOut 1.5s;\n}\n\n@keyframes slideIn {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideOut {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(100%);\n  }\n}\n\n.slide-in {\n  animation: slideIn 1.5s;\n}\n\n.slide-out {\n  animation: slideOut 1.5s;\n}\n\n@keyframes swipeIn {\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes swipeOut {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.swipe-in {\n  animation: swipeIn 1.5s;\n}\n\n.swipe-out {\n  animation: swipeOut 1.5s;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug } from '@/utils/utils';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\n\nexport type Stores = Record<string, ObservableMap<any>>;\n\nexport type Transitions = 'none' | 'fade' | 'slide' | 'swipe';\n\n@Component({\n  tag: 'nylas-if-state',\n  styleUrl: 'nylas-if-state.css',\n  shadow: true,\n})\nexport class NylasIfState {\n  /**\n   * The name of the state to watch.\n   */\n  @Prop() readonly state?: string;\n  /**\n   * If true, then the component will render if the state is set (empty or not set).\n   * This prop is used with the `state` prop.\n   */\n  @Prop() readonly isStateSet?: boolean;\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 isBoolean?: boolean;\n  @Prop() readonly getStore?: <K extends keyof Stores>(name: K) => Stores[K];\n  @Prop() readonly transition: Transitions = 'none';\n\n  @State() show: boolean = false;\n  @State() classes: Record<string, boolean> = {};\n\n  constructor() {\n    this.initTransition = this.initTransition.bind(this);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-if-state] Component will load`);\n    this.watchStore(true);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-if-state] Component did load`);\n  }\n\n  private shouldRender() {\n    // If a period exists in the state name, then we need to split the state name into the store name and the state name.\n    // For example, if the state name is `nylas.scheduler.selectableDates`, then the store name is `nylas` and the state name is `scheduler.selectableDates`.\n    const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];\n    const getStore = this.getStore;\n    if (typeof getStore === 'undefined') {\n      debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { getStore });\n      return false;\n    }\n\n    const store = getStore(storeName as keyof Stores);\n    if (typeof store === 'undefined') {\n      debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { store });\n      return false;\n    }\n\n    const state = store.state[stateName as string];\n\n    if (typeof this.isStateSet === 'boolean') {\n      return (\n        (this.isStateSet === false && (typeof state === 'undefined' || state === null || state.length === 0)) ||\n        (this.isStateSet === true && typeof state !== 'undefined' && state !== null)\n      );\n    }\n\n    if (typeof this.isBoolean === 'boolean') {\n      return (this.isBoolean === true && typeof state !== 'undefined' && state === true) || (this.isBoolean === false && typeof state !== 'undefined' && state === false);\n    }\n\n    return false;\n  }\n\n  @Watch('getStore')\n  onGetStoreChange() {\n    this.watchStore(true);\n  }\n\n  private watchStore(immediate: boolean = false) {\n    // If a period exists in the state name, then we need to split the state name into the store name and the state name.\n    // For example, if the state name is `nylas.scheduler.selectableDates`, then the store name is `nylas` and the state name is `scheduler.selectableDates`.\n    const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];\n    const getStore = this.getStore;\n    if (typeof getStore === 'undefined') {\n      debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { getStore });\n      return null;\n    }\n\n    const store = getStore(storeName as keyof Stores);\n    if (typeof store === 'undefined') {\n      debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { store });\n      return null;\n    }\n\n    if (immediate === true) {\n      this.initTransition();\n    }\n\n    store.onChange(stateName as string, this.initTransition);\n  }\n\n  private initTransition() {\n    const show = this.shouldRender();\n    switch (this.transition) {\n      case 'fade':\n      case 'slide':\n      case 'swipe':\n        this.classes = {\n          [`${this.transition}-in`]: show,\n          [`${this.transition}-out`]: !show,\n        };\n        setTimeout(() => {\n          this.show = show;\n        }, 150);\n        break;\n      default:\n        this.show = this.shouldRender();\n        break;\n    }\n  }\n\n  @RegisterComponent({\n    name: 'nylas-if-state',\n    getStoresToProp: 'getStore',\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class={this.classes}>{this.show && <slot></slot>}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-list-folders.d.ts

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

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

@@ -0,0 +1,183 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { d as debug, t as toTitleCase, f as formatFolderName } from './utils.js';
+import { d as defineCustomElement$8 } from './archive.js';
+import { d as defineCustomElement$7 } from './folder.js';
+import { d as defineCustomElement$6 } from './inbox.js';
+import { d as defineCustomElement$5 } from './sent.js';
+import { d as defineCustomElement$4 } from './spam.js';
+import { d as defineCustomElement$3 } from './star.js';
+import { d as defineCustomElement$2 } from './trash.js';
+
+const nylasListFoldersCss = ":host{display:block}.folders{display:flex;flex-direction:column;align-items:self-start}.folders .folder{border:1px solid var(--nylas-color-primary-100);padding:0.5rem 0.75rem;margin-bottom:0.5rem;justify-content:left;width:100%;min-width:200px;border-radius:var(--nylas-border-radius);background-color:var(--nylas-color-primary-50)}.folders .folder:last-child{margin-bottom:0}.folders .folder.selected{background-color:var(--nylas-color-primary-100)}.folders .folder .icon{margin-right:0.5rem;stroke:var(--nylas-color-primary-900);fill:none}hr{width:100%;margin:1rem 0;border:0;border-top:1px solid var(--nylas-color-primary-100)}";
+const NylasListFoldersStyle0 = nylasListFoldersCss;
+
+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 NylasListFolders$1 = proxyCustomElement(class NylasListFolders extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.folderSelected = createEvent(this, "folderSelected", 7);
+        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 watchers() { return {
+        "folders": ["watchFolders"]
+    }; }
+    static get style() { return NylasListFoldersStyle0; }
+}, [1, "nylas-list-folders", {
+        "folders": [16],
+        "selectedFolder": [1, "selected-folder"],
+        "defaultFolders": [32],
+        "otherFolders": [32]
+    }, undefined, {
+        "folders": ["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$1.prototype, "render", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-list-folders", "archive-icon", "folder-icon", "inbox-icon", "sent-icon", "spam-icon", "star-icon", "trash-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-list-folders":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasListFolders$1);
+            }
+            break;
+        case "archive-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "folder-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "inbox-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "sent-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "spam-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "star-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "trash-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const NylasListFolders = NylasListFolders$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasListFolders, defineCustomElement };
+
+//# sourceMappingURL=nylas-list-folders.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-list-folders.js","mappings":"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","names":["NylasListFolders"],"sources":["src/components/mailbox/nylas-list-folders/nylas-list-folders.scss?tag=nylas-list-folders&encapsulation=shadow","src/components/mailbox/nylas-list-folders/nylas-list-folders.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.folders {\n  display: flex;\n  flex-direction: column;\n  align-items: self-start;\n\n  .folder {\n    border: 1px solid var(--nylas-color-primary-100);\n    padding: 0.5rem 0.75rem;\n    margin-bottom: 0.5rem;\n    justify-content: left;\n    width: 100%;\n\n    min-width: 200px;\n    border-radius: var(--nylas-border-radius);\n    background-color: var(--nylas-color-primary-50);\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n\n    &.selected {\n      background-color: var(--nylas-color-primary-100);\n    }\n\n    .icon {\n      margin-right: 0.5rem;\n      stroke: var(--nylas-color-primary-900);\n      fill: none;\n    }\n  }\n}\n\nhr {\n  width: 100%;\n  margin: 1rem 0;\n  border: 0;\n  border-top: 1px solid var(--nylas-color-primary-100);\n}\n","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"],"version":3}

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

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

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

@@ -0,0 +1,109 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { d as debug, c as formatParticipants, h as formatDateTime } from './utils.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$1 = proxyCustomElement(class NylasListThreads extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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)))))))));
+    }
+    static get style() { return NylasListThreadsStyle0; }
+}, [1, "nylas-list-threads", {
+        "threads": [16],
+        "isAuthenticated": [4, "is-authenticated"],
+        "tokenInfo": [16],
+        "state": [1],
+        "showCheckbox": [4, "show-checkbox"]
+    }]);
+__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$1.prototype, "render", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-list-threads"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-list-threads":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasListThreads$1);
+            }
+            break;
+    } });
+}
+
+const NylasListThreads = NylasListThreads$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasListThreads, defineCustomElement };
+
+//# sourceMappingURL=nylas-list-threads.js.map

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

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

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

package/dist/components/nylas-locale-switch.js

@@ -0,0 +1,8 @@
+import { N as NylasLocaleSwitch$1, d as defineCustomElement$1 } from './nylas-locale-switch2.js';
+
+const NylasLocaleSwitch = NylasLocaleSwitch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasLocaleSwitch, defineCustomElement };
+
+//# sourceMappingURL=nylas-locale-switch.js.map

package/dist/components/nylas-locale-switch.js.map

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

package/dist/components/nylas-locale-switch2.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { T as TIMEZONE_MAP, L as LANGUAGE_MAP } from './constants.js';
+import { R as RegisterComponent } from './register-component.js';
+import { d as defineCustomElement$2 } from './globe.js';
+import { d as defineCustomElement$1 } from './translate.js';
+
+const nylasLocaleSwitchCss = ":host {\n  display: block;\n}\n\n.nylas-locale-switch {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  height: 3rem;\n  padding: 10px 0;\n  border-left: none;\n  border-right: none;\n  color: var(--nylas-base-50);\n  font-size: 1rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: inherit;\n}\n\n.select-wrapper {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  align-items: center;\n  justify-content: center;\n  color: var(--nylas-base-800);\n  /* &.timezone {\n    width: 140px;\n  }\n  &.language {\n    width: 80px;\n  } */\n}\n.select-wrapper select {\n  color: var(--nylas-base-800);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: transparent;\n  margin: 0 0 1px;\n  padding: 2px;\n  vertical-align: middle;\n  &#timezone {\n    width: 140px;\n  }\n  &#language {\n    width: 80px;\n  }\n  text-overflow: ellipsis;\n}\n\nselect {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  background-color: transparent;\n  margin: 0 0 1px;\n  padding: 4px;\n  vertical-align: middle;\n  &#timezone {\n    width: 140px;\n  }\n  &#language {\n    width: 80px;\n  }\n}\n";
+const NylasLocaleSwitchStyle0 = nylasLocaleSwitchCss;
+
+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 NylasLocaleSwitch = proxyCustomElement(class NylasLocaleSwitch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.timezoneChanged = createEvent(this, "timezoneChanged", 7);
+        this.languageChanged = createEvent(this, "languageChanged", 7);
+        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.selectedLanguage = navigator.language;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    componentWillLoad() { }
+    changeTimezone(timezone) {
+        this.selectedTimezone = timezone;
+        this.timezoneChanged.emit(timezone);
+    }
+    changeLanguage(language) {
+        this.selectedLanguage = language;
+        this.languageChanged.emit(language);
+    }
+    render() {
+        return (h(Host, { key: '7ef0766e840f854c9faaee4047085efd07b77228' }, h("div", { key: '3e39eac4848f737ab463439fefee19cd2087480b', class: "nylas-locale-switch" }, h("div", { key: 'd505d2c6486addbdf83cfd45dd41817aa0c97567', class: {
+                'select-wrapper': true,
+                'timezone': true,
+            } }, h("globe-icon", { key: '5b3efa47132faf63e791e84d56554754fe83b7fb', width: "20", height: "20" }), h("select", { key: 'c395886f203427dcfe98bbef21956741fadc7f37', id: "timezone", onChange: (e) => this.changeTimezone(e.target?.value) }, Object.keys(TIMEZONE_MAP).map(key => (h("option", { value: key, selected: key == this.selectedTimezone }, TIMEZONE_MAP[key]))))), h("div", { key: 'c5f0cb9c98ee0400155e8cf7fc7f51b1218ac7b6', class: {
+                'select-wrapper': true,
+                'language': true,
+            } }, h("translate-icon", { key: 'a70ae3f605413ce99874a824ae09b0a387e62a78', width: "20", height: "20" }), h("select", { key: 'c58d6634d01701f37f83dfe43f4dd6ef459461a0', id: "language", onChange: (e) => this.changeLanguage(e.target?.value) }, Object.keys(LANGUAGE_MAP).map(key => (h("option", { value: key, selected: key == this.selectedLanguage }, LANGUAGE_MAP[key]))))))));
+    }
+    static get style() { return NylasLocaleSwitchStyle0; }
+}, [1, "nylas-locale-switch", {
+        "selectedTimezone": [1025, "selected-timezone"],
+        "selectedLanguage": [1025, "selected-language"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-locale-switch',
+        stateToProps: new Map([
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
+            ['scheduler.selectedTimezone', 'selectedTimezone'],
+        ]),
+        eventToProps: {
+            timezoneChanged: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.selectTimezone(event.detail);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasLocaleSwitch.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-locale-switch", "globe-icon", "translate-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-locale-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasLocaleSwitch);
+            }
+            break;
+        case "globe-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "translate-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasLocaleSwitch as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-locale-switch2.js.map

package/dist/components/nylas-locale-switch2.js.map

@@ -0,0 +1 @@
+{"file":"nylas-locale-switch2.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,syCAAsyC,CAAC;AACp0C,gCAAe,oBAAoB;;;;;;;;;;;;;;;;MCUtB,iBAAiB;;;;;;;gCAIwB,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;gCAKhD,SAAS,CAAC,QAAQ;;IAYtE,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,iBAAiB,MAAK;IAMd,cAAc,CAAC,QAAgB;QACrC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAMO,cAAc,CAAC,QAAgB;QACrC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAeD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,IAAI;aACjB,IAED,mEAAY,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,EACrC,+DAAQ,EAAE,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,cAAc,CAAE,CAAC,CAAC,MAA4B,EAAE,KAAK,CAAC,IACtG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,GAAG,KAChC,cAAQ,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,CAAC,gBAAgB,IACvD,YAAY,CAAC,GAAG,CAAC,CACX,CACV,CAAC,CACK,CACL,EACN,4DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,IAAI;aACjB,IAED,uEAAgB,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,EACzC,+DAAQ,EAAE,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,cAAc,CAAE,CAAC,CAAC,MAA4B,EAAE,KAAK,CAAC,IACtG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,GAAG,KAChC,cAAQ,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,CAAC,gBAAgB,IACvD,YAAY,CAAC,GAAG,CAAC,CACX,CACV,CAAC,CACK,CACL,CACF,CACD,EACP;KACH;;;;;;AArCD;IAbC,iBAAiB,CAA2F;QAC3G,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;SACnD,CAAC;QACF,YAAY,EAAE;YACZ,eAAe,EAAE,OAAO,KAA0B,EAAE,uBAAgD;gBAClG,uBAAuB,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAChE;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;+CAsCD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler/nylas-locale-switch/nylas-locale-switch.css?tag=nylas-locale-switch&encapsulation=shadow","src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.nylas-locale-switch {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  height: 3rem;\n  padding: 10px 0;\n  border-left: none;\n  border-right: none;\n  color: var(--nylas-base-50);\n  font-size: 1rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: inherit;\n}\n\n.select-wrapper {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  align-items: center;\n  justify-content: center;\n  color: var(--nylas-base-800);\n  /* &.timezone {\n    width: 140px;\n  }\n  &.language {\n    width: 80px;\n  } */\n}\n.select-wrapper select {\n  color: var(--nylas-base-800);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: transparent;\n  margin: 0 0 1px;\n  padding: 2px;\n  vertical-align: middle;\n  &#timezone {\n    width: 140px;\n  }\n  &#language {\n    width: 80px;\n  }\n  text-overflow: ellipsis;\n}\n\nselect {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  background-color: transparent;\n  margin: 0 0 1px;\n  padding: 4px;\n  vertical-align: middle;\n  &#timezone {\n    width: 140px;\n  }\n  &#language {\n    width: 80px;\n  }\n}\n","import { LANGUAGE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../../components';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\n\n@Component({\n  tag: 'nylas-locale-switch',\n  styleUrl: 'nylas-locale-switch.css',\n  shadow: true,\n})\nexport class NylasLocaleSwitch {\n  /**\n   * The selected timezone.\n   */\n  @Prop({ mutable: true }) selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ mutable: true }) selectedLanguage: string = navigator.language;\n\n  /**\n   * This event is fired when the timezone is changed.\n   */\n  @Event() timezoneChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the language is changed.\n   */\n  @Event() languageChanged!: EventEmitter<string>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Change the timezone.\n   * @param timezone The timezone to select.\n   */\n  private changeTimezone(timezone: string) {\n    this.selectedTimezone = timezone;\n    this.timezoneChanged.emit(timezone);\n  }\n\n  /**\n   * Change the language.\n   * @param language The language to select.\n   */\n  private changeLanguage(language: string) {\n    this.selectedLanguage = language;\n    this.languageChanged.emit(language);\n  }\n\n  @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-locale-switch',\n    stateToProps: new Map([\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-locale-switch\">\n          <div\n            class={{\n              'select-wrapper': true,\n              'timezone': true,\n            }}\n          >\n            <globe-icon width=\"20\" height=\"20\" />\n            <select id=\"timezone\" onChange={(e: Event) => this.changeTimezone((e.target as HTMLSelectElement)?.value)}>\n              {Object.keys(TIMEZONE_MAP).map(key => (\n                <option value={key} selected={key == this.selectedTimezone}>\n                  {TIMEZONE_MAP[key]}\n                </option>\n              ))}\n            </select>\n          </div>\n          <div\n            class={{\n              'select-wrapper': true,\n              'language': true,\n            }}\n          >\n            <translate-icon width=\"20\" height=\"20\" />\n            <select id=\"language\" onChange={(e: Event) => this.changeLanguage((e.target as HTMLSelectElement)?.value)}>\n              {Object.keys(LANGUAGE_MAP).map(key => (\n                <option value={key} selected={key == this.selectedLanguage}>\n                  {LANGUAGE_MAP[key]}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-login.d.ts

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