@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/common/register-component.js

@@ -0,0 +1,134 @@
+import { debug, error } from "../utils/utils";
+import { getElement } from "@stencil/core";
+export function createComponentEvent(instance, registeredComponent, eventName = 'registerComponent') {
+    return new CustomEvent(eventName, {
+        bubbles: true,
+        composed: true,
+        detail: registeredComponent,
+    });
+}
+export function unregisterComponentEvent(instance, registeredComponent, eventName = 'unregisterComponent') {
+    return new CustomEvent(eventName, {
+        bubbles: true,
+        composed: true,
+        detail: registeredComponent,
+    });
+}
+export function RegisterComponent(config) {
+    return (target, propKey) => {
+        const componentName = config.name;
+        debug(`[${componentName}] Registering component ${componentName} being called on ${propKey}`);
+        const origionalCallback = target.componentWillLoad;
+        if (!origionalCallback) {
+            error(`[${componentName}] componentWillLoad lifecycle method in ${componentName} missing. Required for RegisterComponent decorator.`);
+            return;
+        }
+        const origionalConnectCallback = target.connectedCallback;
+        if (!origionalConnectCallback) {
+            error(`[${componentName}] connectedCallback lifecycle method in ${componentName} missing. Required for RegisterComponent decorator.`);
+            return;
+        }
+        const origionalDisconnectCallback = target.disconnectedCallback;
+        if (!origionalDisconnectCallback) {
+            error(`[${componentName}] disconnectedCallback lifecycle method in ${componentName} missing. Required for RegisterComponent decorator.`);
+            return;
+        }
+        if (config.storeToProps && config.stateToProps) {
+            const storeToPropsKeys = Array.from(config.storeToProps.values());
+            const stateToPropsKeys = Array.from(config.stateToProps.values());
+            const intersection = storeToPropsKeys.filter(key => stateToPropsKeys.includes(key));
+            if (intersection.length > 0) {
+                error(`[${componentName}] Overlapping prop keys detected in ${componentName} for storeToProps and stateToProps. Make sure to only define them once. Overlapping keys: ${intersection.join(', ')}`);
+                return;
+            }
+        }
+        const eventToPropsMap = new Map();
+        if (config.eventToProps) {
+            Object.keys(config.eventToProps).forEach(key => {
+                eventToPropsMap.set(key, config.eventToProps?.[key]);
+            });
+        }
+        target.connectedCallback = function () {
+            debug(`[~${componentName}] connectedCallback called`);
+            const origionalResult = origionalConnectCallback?.call(this);
+            const host = getElement(this);
+            if (host.dataset.nylasId) {
+                return origionalResult;
+            }
+            Object.defineProperty(host, 'registerNylasComponent', {
+                get() {
+                    return true;
+                },
+                enumerable: true,
+            });
+            Object.defineProperty(host, 'stateToProps', {
+                get() {
+                    return config.stateToProps;
+                },
+                enumerable: true,
+            });
+            Object.defineProperty(host, 'getStoresToProp', {
+                get() {
+                    return config.getStoresToProp;
+                },
+                enumerable: true,
+            });
+            Object.defineProperty(host, 'storeToProps', {
+                get() {
+                    return config.storeToProps;
+                },
+                enumerable: true,
+            });
+            Object.defineProperty(host, 'eventToProps', {
+                get() {
+                    return eventToPropsMap;
+                },
+                enumerable: true,
+            });
+            Object.defineProperty(host, 'authToProp', {
+                get() {
+                    return config.authToProp;
+                },
+                enumerable: true,
+            });
+            Object.defineProperty(host, 'connectorToProp', {
+                get() {
+                    return config.connectorToProp;
+                },
+                enumerable: true,
+            });
+            return origionalResult;
+        };
+        if (config.fireRegisterEvent) {
+            target.componentWillLoad = function () {
+                const origionalResult = origionalCallback?.call(this);
+                const host = getElement(this);
+                const registeredComponent = {
+                    element: host,
+                    ...config,
+                    eventToProps: eventToPropsMap,
+                };
+                const event = createComponentEvent(target, registeredComponent, config.registrationEventName);
+                if (host.dispatchEvent(event)) {
+                    debug(`[${componentName}] Component ${componentName} successfully fired registration event`);
+                }
+                return origionalResult;
+            };
+            target.disconnectedCallback = function () {
+                const origionalResult = origionalDisconnectCallback?.call(this);
+                const host = getElement(this);
+                const registeredComponent = {
+                    element: host,
+                    ...config,
+                    eventToProps: eventToPropsMap,
+                };
+                const event = unregisterComponentEvent(target, registeredComponent, config.unregistrationEventName);
+                if (host.dispatchEvent(event)) {
+                    debug(`[${componentName}] Component ${componentName} successfully fired unregistration event`);
+                }
+                return origionalResult;
+            };
+        }
+    };
+}
+//# sourceMappingURL=register-component.js.map

package/dist/collection/common/register-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-component.js","sourceRoot":"","sources":["../../src/common/register-component.ts"],"names":[],"mappings":"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","sourcesContent":["import { BaseNylasConnectorInterface } from '@/connector/connector-interface';\nimport { debug, error } from '@/utils/utils';\nimport { ComponentInterface, getElement } from '@stencil/core';\nimport { CombinedStoreStateKeys, EventEmitterEventType, ExtractEventEmitterKeys, ExtractEventEmitterProperties } from './types';\nexport interface RegisteredComponent<H extends ComponentInterface, B extends BaseNylasConnectorInterface, MailboxStores = string> {\n  name: string;\n  element: HTMLElement;\n  getStoresToProp?: keyof H;\n  storeToProps?: Map<string, keyof H>;\n  stateToProps?: Map<MailboxStores, keyof H>;\n  eventToProps?: Map<ExtractEventEmitterKeys<H>, (event: CustomEvent<EventEmitterEventType<H[ExtractEventEmitterKeys<H>]>>, nylasConnector: B) => Promise<void>>;\n  authToProp?: keyof H;\n  connectorToProp?: keyof H;\n  registrationEventName?: string;\n  unregistrationEventName?: string;\n}\n\nexport function createComponentEvent<T extends ComponentInterface, B extends BaseNylasConnectorInterface>(\n  instance: T,\n  registeredComponent: RegisteredComponent<T, B>,\n  eventName: string = 'registerComponent',\n) {\n  return new CustomEvent<RegisteredComponent<typeof instance, B>>(eventName, {\n    bubbles: true,\n    composed: true,\n    detail: registeredComponent,\n  });\n}\n\nexport function unregisterComponentEvent<T extends ComponentInterface, B extends BaseNylasConnectorInterface>(\n  instance: T,\n  registeredComponent: RegisteredComponent<T, B>,\n  eventName: string = 'unregisterComponent',\n) {\n  return new CustomEvent<RegisteredComponent<typeof instance, B>>(eventName, {\n    bubbles: true,\n    composed: true,\n    detail: registeredComponent,\n  });\n}\n\nexport interface RegisterComponentConfig<H extends ComponentInterface, B extends BaseNylasConnectorInterface, MailboxStores>\n  extends Omit<RegisteredComponent<H, B, MailboxStores>, 'eventToProps' | 'name' | 'element'> {\n  name: string;\n  eventToProps?: Partial<{\n    [P in ExtractEventEmitterProperties<H> as P['key']]: (event: CustomEvent<P['eventType']>, nylasConnector: B) => Promise<void>;\n  }>;\n  fireRegisterEvent?: boolean;\n}\n\nexport interface NylasComponentInterface extends ComponentInterface {\n  authToProp?: keyof this;\n  connectorToProp?: keyof this;\n}\n\nexport function RegisterComponent<H extends NylasComponentInterface, B extends BaseNylasConnectorInterface, MailboxStores extends Record<string, any>>(\n  config: RegisterComponentConfig<H, B, CombinedStoreStateKeys<keyof MailboxStores, MailboxStores>>,\n) {\n  return (target: H, propKey: string) => {\n    const componentName = config.name;\n    debug(`[${componentName}] Registering component ${componentName} being called on ${propKey}`);\n\n    const origionalCallback = target.componentWillLoad;\n    if (!origionalCallback) {\n      error(`[${componentName}] componentWillLoad lifecycle method in ${componentName} missing. Required for RegisterComponent decorator.`);\n      return;\n    }\n\n    const origionalConnectCallback = target.connectedCallback;\n    if (!origionalConnectCallback) {\n      error(`[${componentName}] connectedCallback lifecycle method in ${componentName} missing. Required for RegisterComponent decorator.`);\n      return;\n    }\n\n    const origionalDisconnectCallback = target.disconnectedCallback;\n    if (!origionalDisconnectCallback) {\n      error(`[${componentName}] disconnectedCallback lifecycle method in ${componentName} missing. Required for RegisterComponent decorator.`);\n      return;\n    }\n\n    // Detect a conflict if config.storeToProps and config.stateToProps are both defined\n    // for overlapping prop keys\n    if (config.storeToProps && config.stateToProps) {\n      const storeToPropsKeys = Array.from(config.storeToProps.values());\n      const stateToPropsKeys = Array.from(config.stateToProps.values());\n      const intersection = storeToPropsKeys.filter(key => stateToPropsKeys.includes(key));\n      if (intersection.length > 0) {\n        error(\n          `[${componentName}] Overlapping prop keys detected in ${componentName} for storeToProps and stateToProps. Make sure to only define them once. Overlapping keys: ${intersection.join(\n            ', ',\n          )}`,\n        );\n        return;\n      }\n    }\n\n    // Convert the record of eventToProps to a map\n    const eventToPropsMap = new Map<ExtractEventEmitterKeys<H>, (event: CustomEvent<EventEmitterEventType<H[ExtractEventEmitterKeys<H>]>>, nylasConnector: B) => Promise<void>>();\n    if (config.eventToProps) {\n      Object.keys(config.eventToProps).forEach(key => {\n        eventToPropsMap.set(\n          key as ExtractEventEmitterKeys<H>,\n          config.eventToProps?.[key as ExtractEventEmitterKeys<H>] as (\n            event: CustomEvent<EventEmitterEventType<H[ExtractEventEmitterKeys<H>]>>,\n            nylasConnector: B,\n          ) => Promise<void>,\n        );\n      });\n    }\n\n    target.connectedCallback = function () {\n      debug(`[~${componentName}] connectedCallback called`);\n      const origionalResult = origionalConnectCallback?.call(this);\n      const host = getElement(this);\n\n      // If the nylas id is already set, then we don't need to do anything\n      if (host.dataset.nylasId) {\n        return origionalResult;\n      }\n\n      Object.defineProperty(host, 'registerNylasComponent', {\n        get() {\n          return true;\n        },\n        enumerable: true,\n      });\n      Object.defineProperty(host, 'stateToProps', {\n        get() {\n          return config.stateToProps;\n        },\n        enumerable: true,\n      });\n      Object.defineProperty(host, 'getStoresToProp', {\n        get() {\n          return config.getStoresToProp;\n        },\n        enumerable: true,\n      });\n      Object.defineProperty(host, 'storeToProps', {\n        get() {\n          return config.storeToProps;\n        },\n        enumerable: true,\n      });\n      Object.defineProperty(host, 'eventToProps', {\n        get() {\n          return eventToPropsMap;\n        },\n        enumerable: true,\n      });\n      Object.defineProperty(host, 'authToProp', {\n        get() {\n          return config.authToProp;\n        },\n        enumerable: true,\n      });\n      Object.defineProperty(host, 'connectorToProp', {\n        get() {\n          return config.connectorToProp;\n        },\n        enumerable: true,\n      });\n      return origionalResult;\n    };\n\n    if (config.fireRegisterEvent) {\n      target.componentWillLoad = function () {\n        const origionalResult = origionalCallback?.call(this);\n        const host = getElement(this);\n\n        // We use our host element to dispatch a registration event that is picked up by the\n        // the nylas-provider component.\n        const registeredComponent: RegisteredComponent<H, B> = {\n          element: host,\n          ...config,\n          eventToProps: eventToPropsMap,\n        };\n        const event = createComponentEvent(target, registeredComponent, config.registrationEventName);\n        if (host.dispatchEvent(event)) {\n          debug(`[${componentName}] Component ${componentName} successfully fired registration event`);\n        }\n\n        return origionalResult;\n      };\n\n      target.disconnectedCallback = function () {\n        const origionalResult = origionalDisconnectCallback?.call(this);\n        const host = getElement(this);\n\n        // We use our host element to dispatch a registration event that is picked up by the\n        // the nylas-provider component.\n        const registeredComponent: RegisteredComponent<H, B> = {\n          element: host,\n          ...config,\n          eventToProps: eventToPropsMap,\n        };\n        const event = unregisterComponentEvent(target, registeredComponent, config.unregistrationEventName);\n        if (host.dispatchEvent(event)) {\n          debug(`[${componentName}] Component ${componentName} successfully fired unregistration event`);\n        }\n\n        return origionalResult;\n      };\n    }\n  };\n}\n"]}

package/dist/collection/common/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/common/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/common/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Message } from '@nylas/core';\nimport { EventEmitter } from '@stencil/core';\n\nexport type DataState = 'loading' | 'ready';\n\ntype StoresType = unknown;\ntype StoreInstances = {\n  [K in keyof StoresType]: StoresType[K];\n};\ntype StoreStateKeys<T> = T extends { state: infer S } ? keyof S : never;\n\n/**\n * This type is used to create a union of all possible store state keys.\n * Example:\n * type CombinedStoreStateKeys = \"nylas.messages\" | \"nylasTheme.colour\"\n */\nexport type CombinedStoreStateKeys<SK extends keyof S, S = StoreInstances> = {\n  [StoreKey in SK]: StoreStateKeys<S[StoreKey]> extends never | undefined ? never : `${StoreKey & string}.${StoreStateKeys<S[StoreKey]> & string}`;\n}[SK];\n\nexport type InternalMessage = {\n  id: string;\n  data: Message;\n  collapse: boolean;\n  showContactData: boolean;\n};\n\nexport type InternalAttachment = {\n  blob: Blob;\n  filename: string;\n  contentType: string;\n  size: number;\n  messageId: string;\n};\n\nexport type MethodKeys<T> = {\n  [K in keyof T]: T[K] extends Function ? K : never;\n}[keyof T];\n\n// TODO: Move this to @nylas/core\nexport type AvailabilityTimeslot = {\n  emails: string[];\n  start_time: number;\n  end_time: number;\n};\n\nexport type AvailabilityResponse = {\n  time_slots: AvailabilityTimeslot[];\n  participants: {\n    email: string;\n    name: string;\n  }[];\n  duration: number;\n};\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterKeys<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<any> ? K : never;\n}[keyof T];\n\n// Extracts the event type from an EventEmitter\nexport type EventEmitterEventType<T> = T extends EventEmitter<infer U> ? U : never;\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterProperties<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<infer U> ? { key: K; eventType: U } : never;\n}[keyof T];\n\nexport type NylasEvent = {\n  id: string;\n  event_id: string;\n  owner_email: string;\n  status: string;\n  booking_data: {\n    participants: {\n      email: string;\n      name: string;\n    }[];\n    duration: number;\n    event_type: number;\n    start_time: number;\n    end_time: number;\n    title: string;\n    description: string;\n    timezone: string;\n  };\n  created_at: string;\n  updated_at: string;\n  config: {\n    id: number;\n    data: {\n      version: string;\n      availability: {\n        duration_minutes: number;\n        interval_minutes: number;\n        round_to_30_minutes: boolean;\n        participants: {\n          email: string;\n          name: string;\n          calendar_ids: string[];\n          open_hours: {\n            days: number[];\n            timezone: string;\n            start: string;\n            end: string;\n          }[];\n        }[];\n      };\n      event_booking: {\n        title: string;\n        description: string;\n        type: number;\n        organizer: {\n          email: string;\n          calendar_id: string;\n        };\n      };\n    };\n    created_at: string;\n    updated_at: string;\n    is_session_defined: boolean;\n  };\n};\n"]}

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

@@ -0,0 +1,89 @@
+:host {
+  display: grid;
+  color: var(--nylas-color-primary-900);
+}
+
+.editor {
+  position: relative;
+  display: block;
+  max-height: 300px;
+  overflow: auto;
+  padding: 1rem;
+  border: 1px solid var(--nylas-color-primary-300);
+}
+.editor blockquote {
+  visibility: hidden;
+  overflow: hidden;
+  position: relative;
+  transition: height 0.3s ease;
+  margin: 0;
+}
+.editor blockquote::before {
+  content: "...";
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--nylas-color-primary-300);
+  width: 20px;
+  text-align: center;
+  color: var(--nylas-color-primary-800);
+  vertical-align: middle;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  cursor: pointer;
+}
+.editor .collapsed {
+  height: 20px;
+}
+.editor .expanded {
+  visibility: visible;
+  opacity: 1;
+  height: auto; /* Height to fit the content */
+  margin: 0px 0px 0px 0.8ex;
+  border-left: 1px solid var(--nylas-color-primary-300);
+  padding-left: 1rem;
+}
+.editor .expanded::before {
+  display: none; /* Hide the '...' when content is expanded */
+}
+
+.buttons {
+  display: flex;
+  margin-top: 1rem;
+  justify-content: space-between;
+}
+.buttons 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);
+}
+.buttons sp-button:hover {
+  background-color: var(--nylas-color-primary-500);
+}
+.buttons sp-button:disabled {
+  background-color: var(--nylas-color-primary-200);
+  color: var(--nylas-color-primary-600);
+  cursor: not-allowed;
+}
+.buttons sp-button chevron-icon {
+  display: inline-block;
+}
+.buttons .close {
+  justify-self: end;
+}
+
+.toolbar {
+  position: absolute;
+  display: none;
+  background-color: var(--nylas-color-primary-200);
+  border-radius: var(--nylas-border-radius);
+  z-index: 1;
+}
+.toolbar sp-button {
+  border: 0;
+}

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

@@ -0,0 +1,241 @@
+import { debug } from "../../../utils/utils";
+import { h, Host } from "@stencil/core";
+export class NylasComposer {
+    constructor() {
+        this.closeComposer = (event) => {
+            this.close.emit(event);
+        };
+        this.sendComposer = (event) => {
+            if (!this.editorEl) {
+                debug('no editor element');
+                return;
+            }
+            const messageBody = this.editorEl.querySelector('.message-body');
+            if (!messageBody) {
+                debug('no message body');
+                return;
+            }
+            if (this.message) {
+                this.send.emit({
+                    message: this.message,
+                    replyBody: messageBody.querySelector('.message-body')?.innerHTML || '',
+                });
+                this.close.emit(event);
+                this.editorEl.innerHTML = '';
+            }
+        };
+        this.message = undefined;
+        this.viewEmailElement = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() {
+        if (this.editorEl) {
+            this.editorEl.innerHTML = '';
+        }
+    }
+    componentWillLoad() { }
+    async componentDidLoad() {
+        if (this.message) {
+            this.watchBody(this.message);
+        }
+        if (!this.editorEl) {
+            debug('[connectedCallback] no editor element');
+            return;
+        }
+        if (!this.toolbarEl) {
+            debug('[connectedCallback] no toolbar element');
+            return;
+        }
+        const editorEl = this.editorEl;
+        const toolbarEl = this.toolbarEl;
+        editorEl.addEventListener('mouseup', _ => {
+            const selection = this.host.shadowRoot?.getSelection();
+            if (!selection) {
+                debug('no selection');
+                return;
+            }
+            const range = selection.getRangeAt(0);
+            const text = selection.toString();
+            if (!text) {
+                toolbarEl.style.display = 'none';
+                return;
+            }
+            const messageBody = editorEl.querySelector('.message-body');
+            if (!messageBody) {
+                debug('no message body');
+                return;
+            }
+            const foundNode = range.commonAncestorContainer;
+            const foundElement = foundNode.parentElement;
+            if (!foundElement) {
+                return;
+            }
+            const messageBodyRect = messageBody.getBoundingClientRect();
+            debug('messageBodyRect', { messageBodyRect });
+            const foundRect = foundElement.getBoundingClientRect();
+            debug('foundRect', { foundRect });
+            const textNode = foundElement.childNodes[0];
+            const textContent = textNode.textContent || '';
+            const textPosition = textContent.indexOf(text);
+            const fontSize = window.getComputedStyle(foundElement).fontSize;
+            const fontSizeNumber = parseInt(fontSize.replace('px', ''), 10);
+            const top = foundRect.top - messageBodyRect.top - toolbarEl.clientHeight;
+            const left = textPosition * (1 / fontSizeNumber) * 100;
+            toolbarEl.style.top = `${top}px`;
+            toolbarEl.style.left = `${left}px`;
+            toolbarEl.style.display = 'block';
+        });
+    }
+    watchBody(newMessage) {
+        if (!this.editorEl) {
+            debug('no editor element');
+            return;
+        }
+        this.editorEl.querySelectorAll('.message-body').forEach(el => el.remove());
+        const messageBody = document.createElement('div');
+        messageBody.classList.add('message-body');
+        const emptyParagraph = document.createElement('p');
+        emptyParagraph.innerHTML = ' ';
+        messageBody.appendChild(emptyParagraph);
+        const br = document.createElement('br');
+        messageBody.appendChild(br);
+        const replyText = document.createElement('div');
+        replyText.classList.add('reply-text');
+        replyText.innerText = `On ${new Date(newMessage.date * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <${newMessage.from
+            ?.map(from => from.name || from.email)
+            .join(', ')}> wrote:`;
+        messageBody.appendChild(replyText);
+        if (newMessage.body) {
+            const replyElement = document.createElement('html');
+            replyElement.innerHTML = newMessage.body;
+            const replyContainer = document.createElement('blockquote');
+            replyContainer.classList.add('collapsed');
+            replyContainer.classList.add('gmail_quote');
+            replyContainer.innerHTML = replyElement.innerHTML;
+            messageBody.appendChild(replyContainer);
+            debug('replyContainer', { replyContainer });
+        }
+        this.editorEl.appendChild(messageBody);
+        this.editorEl.querySelectorAll('blockquote.collapsed').forEach(blockquote => {
+            blockquote.addEventListener('click', function (event) {
+                event.preventDefault();
+                const el = event.target;
+                el.classList.remove('collapsed');
+                el.classList.add('expanded');
+            }, { once: true });
+        });
+        this.editorEl.focus();
+    }
+    render() {
+        return (h(Host, { key: 'a1e6e146356d27b4612c1381a051e421468016f9' }, h("sp-theme", { key: 'a55f43e956e35a41e0854b7653f3eaa0472e4603', scale: "medium", color: "dark" }, h("div", { key: 'dca393d6d4cae7d64630c2e684fa403638135aab', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: 'e77b4c9ea8b843cb15ebe92b49120bcf7b6a7ce4', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '0b825b12e643a37c4e746eec4fc51608f576a58b', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '95051b6e9b07e9792e180e09a0ca74c834a6f6c8', slot: "icon" }, h("bold-icon", { key: '6f33cd1e9525984d8c9b001f2b3a114bf08ec9a5' })), h("div", { key: '250323dfd86467b528903b7cdbfc704efffcc789', slot: "label" }, "Bold")), h("sp-button", { key: 'af4d4302617dd0ee1ad3d50161e4a019e4fbc1e7', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'aa2e4a6c9be743d228b5ebc7a8c59d59cbed5b2c', slot: "icon" }, h("underline-icon", { key: '6833ead83e35cd0b07c0c88b81be3446d3efd824' })), h("div", { key: '1c18f62267adfa70e176efed64f745dd202c0230', slot: "label" }, "Underline")), h("sp-button", { key: '08139372218452b7b83aa9580cb9a797106b189f', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'bd439d444ae836a0c612e57f92b7c0e303ff732a', slot: "icon" }, h("italic-icon", { key: 'c25d86181198e1f1b176caad9ccfc0ecd5653c15' })), h("div", { key: 'c6231490b7c86113f8dbcfc8386ec5581f6b2a3a', slot: "label" }, "Italic")))), h("div", { key: '95921362af8283ee5d04cf17faf4c8b5725ba7bd', class: 'buttons' }, h("sp-button", { key: '6c21a44e39720b78fddda544d3b3e3dd2597d9c3', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: '2d0354668c676f6e723be1f0e9614cff6120d361', onClick: this.closeComposer, class: "close" }, "Close")))));
+    }
+    static get is() { return "nylas-composer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-composer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-composer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Message",
+                    "resolved": "Message | undefined",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Message"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The message to reply to or forward"
+                }
+            },
+            "viewEmailElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLNylasViewEmailElement | null",
+                    "resolved": "HTMLNylasViewEmailElement | null | undefined",
+                    "references": {
+                        "HTMLNylasViewEmailElement": {
+                            "location": "global",
+                            "id": "global::HTMLNylasViewEmailElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The view email element"
+                }
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the composer is closed"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "send",
+                "name": "send",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the send button is clicked"
+                },
+                "complexType": {
+                    "original": "{\n    message: Message;\n    replyBody: string;\n  }",
+                    "resolved": "{ message: Message; replyBody: string; }",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Message"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "message",
+                "methodName": "watchBody"
+            }];
+    }
+}
+//# sourceMappingURL=nylas-composer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-composer.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-composer/nylas-composer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { debug } from '@/utils/utils';\nimport { Message } from '@nylas/core';\nimport { Component, Event, EventEmitter, Element, Prop, Watch, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'nylas-composer',\n  styleUrl: 'nylas-composer.scss',\n  shadow: true,\n})\nexport class NylasComposer {\n  /**\n   * The host element\n   */\n  @Element() readonly host!: HTMLElement;\n\n  /**\n   * The message to reply to or forward\n   */\n  @Prop() readonly message?: Message;\n\n  /**\n   * The view email element\n   */\n  @Prop() readonly viewEmailElement?: HTMLNylasViewEmailElement | null;\n\n  /**\n   * Fired when the composer is closed\n   */\n  @Event() readonly close!: EventEmitter<MouseEvent>;\n\n  /**\n   * Fired when the send button is clicked\n   */\n  @Event() readonly send!: EventEmitter<{\n    message: Message;\n    replyBody: string;\n  }>;\n\n  /**\n   * The editor element\n   */\n  private editorEl?: HTMLDivElement;\n\n  /**\n   * The toolbar element\n   */\n  private toolbarEl?: HTMLDivElement;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this.editorEl) {\n      this.editorEl.innerHTML = '';\n    }\n  }\n\n  componentWillLoad() {}\n\n  async componentDidLoad() {\n    if (this.message) {\n      this.watchBody(this.message);\n    }\n\n    if (!this.editorEl) {\n      debug('[connectedCallback] no editor element');\n      return;\n    }\n\n    if (!this.toolbarEl) {\n      debug('[connectedCallback] no toolbar element');\n      return;\n    }\n\n    const editorEl = this.editorEl;\n    const toolbarEl = this.toolbarEl;\n\n    // On highlight, show the toolbar\n    editorEl.addEventListener('mouseup', _ => {\n      interface ShadowRootWithSelection extends ShadowRoot {\n        getSelection(): Selection | null;\n      }\n\n      const selection: Selection | null = (this.host.shadowRoot as ShadowRootWithSelection)?.getSelection();\n      if (!selection) {\n        debug('no selection');\n        return;\n      }\n\n      // Get range\n      const range = selection.getRangeAt(0);\n\n      // Get text selection\n      const text = selection.toString();\n      if (!text) {\n        toolbarEl.style.display = 'none';\n        return;\n      }\n\n      // Find .message-body in the editor\n      const messageBody = editorEl.querySelector('.message-body');\n      if (!messageBody) {\n        debug('no message body');\n        return;\n      }\n\n      // Get commonAncestorContainer\n      const foundNode = range.commonAncestorContainer;\n\n      // Get rect\n      const foundElement = foundNode.parentElement;\n\n      // If we didn't find the text, then don't show the toolbar\n      if (!foundElement) {\n        return;\n      }\n\n      // Get the bounding rect of the message body\n      const messageBodyRect = messageBody.getBoundingClientRect();\n      debug('messageBodyRect', { messageBodyRect });\n\n      const foundRect = foundElement.getBoundingClientRect();\n      debug('foundRect', { foundRect });\n\n      // Find the text position within the found node\n      // without using document.createRange()\n\n      // Get the text node\n      const textNode = foundElement.childNodes[0];\n\n      // Get the text content\n      const textContent = textNode.textContent || '';\n\n      // Get the text position\n      const textPosition = textContent.indexOf(text);\n\n      // Calcualte the font width\n      const fontSize = window.getComputedStyle(foundElement).fontSize;\n      const fontSizeNumber = parseInt(fontSize.replace('px', ''), 10);\n\n      // Top\n      const top = foundRect.top - messageBodyRect.top - toolbarEl.clientHeight;\n      const left = textPosition * (1 / fontSizeNumber) * 100;\n\n      // Position the toolbar\n      toolbarEl.style.top = `${top}px`;\n      toolbarEl.style.left = `${left}px`;\n      toolbarEl.style.display = 'block';\n    });\n  }\n\n  @Watch('message')\n  watchBody(newMessage: Message) {\n    if (!this.editorEl) {\n      debug('no editor element');\n      return;\n    }\n\n    // Find .message-body elements and remove them\n    this.editorEl.querySelectorAll('.message-body').forEach(el => el.remove());\n\n    // Create a container for the body of the reply\n    const messageBody = document.createElement('div');\n    messageBody.classList.add('message-body');\n\n    // Add an empty paragraph to the reply body\n    const emptyParagraph = document.createElement('p');\n    emptyParagraph.innerHTML = '&nbsp;';\n    messageBody.appendChild(emptyParagraph);\n\n    // Also add a break to separate the reply from the rest of the email\n    const br = document.createElement('br');\n    messageBody.appendChild(br);\n\n    // Append a reply header\n    const replyText = document.createElement('div');\n    replyText.classList.add('reply-text');\n    replyText.innerText = `On ${new Date(newMessage.date * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <${newMessage.from\n      ?.map(from => from.name || from.email)\n      .join(', ')}> wrote:`;\n    messageBody.appendChild(replyText);\n\n    // If we have a reply body, separate the contents with a horizontal rule\n    if (newMessage.body) {\n      // For the reply HTML, we want to wrap the contents in a custom element\n      // with a shadow root. This will allow us to style the contents of the\n      // reply without affecting the rest of the page.\n\n      // First convert the HTML string to a DOM element\n      const replyElement = document.createElement('html');\n      replyElement.innerHTML = newMessage.body;\n\n      const replyContainer = document.createElement('blockquote');\n      replyContainer.classList.add('collapsed');\n      replyContainer.classList.add('gmail_quote');\n\n      // Now add the reply element to the container\n      replyContainer.innerHTML = replyElement.innerHTML;\n\n      messageBody.appendChild(replyContainer);\n\n      debug('replyContainer', { replyContainer });\n    }\n\n    // Add the message body to the editor\n    this.editorEl.appendChild(messageBody);\n\n    this.editorEl.querySelectorAll('blockquote.collapsed').forEach(blockquote => {\n      blockquote.addEventListener(\n        'click',\n        function (event) {\n          event.preventDefault();\n          const el = event.target as HTMLElement;\n          el.classList.remove('collapsed');\n          el.classList.add('expanded');\n        },\n        { once: true },\n      );\n    });\n\n    // Focus the editor\n    this.editorEl.focus();\n  }\n\n  private closeComposer = (event: MouseEvent) => {\n    this.close.emit(event);\n  };\n\n  private sendComposer = (event: MouseEvent) => {\n    if (!this.editorEl) {\n      debug('no editor element');\n      return;\n    }\n\n    const messageBody = this.editorEl.querySelector('.message-body');\n    if (!messageBody) {\n      debug('no message body');\n      return;\n    }\n\n    // Send the message\n    if (this.message) {\n      this.send.emit({\n        message: this.message,\n        replyBody: messageBody.querySelector('.message-body')?.innerHTML || '',\n      });\n\n      // Close the composer\n      this.close.emit(event);\n\n      // Clear the editor\n      this.editorEl.innerHTML = '';\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <div class=\"editor\" contentEditable={true} ref={r => (this.editorEl = r)}>\n            <div class=\"toolbar\" ref={r => (this.toolbarEl = r)} contentEditable={false}>\n              <sp-button quiet onClick={() => document.execCommand('bold')}>\n                <div slot=\"icon\">\n                  <bold-icon></bold-icon>\n                </div>\n                <div slot=\"label\">Bold</div>\n              </sp-button>\n              <sp-button quiet onClick={() => document.execCommand('underline')}>\n                <div slot=\"icon\">\n                  <underline-icon></underline-icon>\n                </div>\n                <div slot=\"label\">Underline</div>\n              </sp-button>\n              <sp-button quiet onClick={() => document.execCommand('italic')}>\n                <div slot=\"icon\">\n                  <italic-icon></italic-icon>\n                </div>\n                <div slot=\"label\">Italic</div>\n              </sp-button>\n            </div>\n          </div>\n          <div class={'buttons'}>\n            <sp-button onClick={this.sendComposer} class=\"send\">\n              Send\n            </sp-button>\n            <sp-button onClick={this.closeComposer} class=\"close\">\n              Close\n            </sp-button>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-composer.spec-disabled.js","sourceRoot":"","sources":["../../../../../src/components/mailbox/nylas-composer/test/nylas-composer.spec-disabled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,mCAAmC;SAC1C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasComposer } from '../nylas-composer';\n\ndescribe('nylas-composer', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [NylasComposer],\n      html: `<nylas-composer></nylas-composer>`,\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,37 @@
+: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);
+}