npm - @nylas/web-elements - Versions diffs - 1.0.0-prealpha1 - Mend

@nylas/web-elements 1.0.0-prealpha1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (879) hide show

package/dist/collection/components/mailbox/nylas-view-email/nylas-view-email.js ADDED Viewed

@@ -0,0 +1,282 @@
+import { processStyles } from "../../../utils/color-utils";
+import { debug, detectHTMLOrPlainText, detectIfMessageIsHTML, parsePlainTextToHTML } from "../../../utils/utils";
+import { Fragment, Host, h } from "@stencil/core";
+import DOMPurify from "dompurify";
+DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+    if ('target' in node) {
+        node.setAttribute('target', '_blank');
+        node.setAttribute('rel', 'noopener');
+    }
+});
+export class NylasViewEmail {
+    constructor() {
+        this.htmlElement = document.createElement('html');
+        this.setBody = (body) => {
+            this.state = 'loading';
+            this.styles = [];
+            this.hoistedFontURLs = new Map();
+            this.sanitizedBody = '';
+            document.querySelectorAll('.nylas-view-email-font').forEach(link => {
+                link.remove();
+            });
+            const isHTML = this.message ? detectIfMessageIsHTML(this.message) : detectHTMLOrPlainText(body);
+            if (!isHTML) {
+                body = `<html><body>${parsePlainTextToHTML(body)}</body></html>`;
+            }
+            this.htmlElement.innerHTML = body;
+            if (this.detectDarkMode) {
+                processStyles(this.htmlElement);
+            }
+            this.htmlElement.querySelectorAll('link').forEach(link => {
+                console.debug(`[nylas-view-email] Hoisting link: ${link.getAttribute('href')}`);
+                if (link.getAttribute('rel') === 'stylesheet' && link.getAttribute('href')) {
+                    const href = link.getAttribute('href');
+                    if (href) {
+                        const url = new URL(href, window.location.href);
+                        if (url.protocol === 'https:' || url.protocol === 'http:') {
+                            this.hoistedFontURLs.set(url.href, url.href);
+                        }
+                    }
+                }
+            });
+            this.htmlElement.querySelectorAll('style').forEach(style => {
+                style.innerHTML.split('\n').forEach(line => {
+                    const match = line.match(/@import url\((.*)\)/);
+                    if (match) {
+                        const url = new URL(match[1], window.location.href);
+                        if (url.protocol === 'https:' || url.protocol === 'http:') {
+                            this.hoistedFontURLs.set(url.href, url.href);
+                        }
+                    }
+                });
+                style.innerHTML = style.innerHTML.replace('body', ':host');
+                this.styles.push(style);
+                style.remove();
+            });
+            this.htmlElement.querySelectorAll('a').forEach(a => {
+                a.setAttribute('target', '_blank');
+            });
+            const gmailQuote = this.htmlElement.querySelector('.gmail_quote');
+            if (gmailQuote) {
+                const toggleButton = document.createElement('button');
+                toggleButton.classList.add('nylas-view-email-toggle-button');
+                toggleButton.setAttribute('aria-label', 'Show quoted text');
+                toggleButton.innerText = '...';
+                gmailQuote.parentElement?.insertBefore(toggleButton, gmailQuote);
+            }
+            this.sanitizedBody = DOMPurify.sanitize(this.htmlElement.innerHTML);
+            this.hoistedFontURLs.forEach((url, _key) => {
+                const link = document.createElement('link');
+                link.setAttribute('rel', 'stylesheet');
+                link.setAttribute('href', url);
+                link.classList.add('nylas-view-email-font');
+                document.head.appendChild(link);
+            });
+            this.state = 'ready';
+        };
+        this.handleMobileSize = () => {
+            const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+            if (vw <= 768) {
+                const viewEmailReact = this.viewEmailElement?.getBoundingClientRect();
+                if (viewEmailReact && this.viewEmailElement && this.parent) {
+                    if (viewEmailReact.width > vw) {
+                        const parentElement = this.parent;
+                        const parentReact = parentElement?.getBoundingClientRect();
+                        debug('Parent width:', parentReact?.width, 'Parent height:', parentReact?.height);
+                        debug('Parent client width:', parentElement.clientWidth, 'Parent client height:', parentElement.clientHeight);
+                        const scaleX = parentReact.width / viewEmailReact.width;
+                        const scaleY = parentReact.height / viewEmailReact.height;
+                        const scale = Math.min(scaleX, scaleY);
+                        debug('Scale:', scale);
+                        this.viewEmailElement.style.setProperty('transform', `scale(${scale})`);
+                        this.viewEmailElement.style.setProperty('transform-origin', `top left`);
+                        this.viewEmailElement.style.setProperty('height', `${viewEmailReact.height * scale}px`);
+                    }
+                }
+            }
+            else {
+                this.viewEmailElement?.style.removeProperty('transform');
+                this.viewEmailElement?.style.removeProperty('transform-origin');
+                this.viewEmailElement?.style.removeProperty('height');
+            }
+        };
+        this.message = undefined;
+        this.parent = undefined;
+        this.attachments = [];
+        this.detectDarkMode = true;
+        this.state = 'loading';
+        this.sanitizedBody = '';
+        this.styles = [];
+        this.viewEmailElement = undefined;
+        this.hoistedFontURLs = new Map();
+    }
+    connectedCallback() { }
+    disconnectedCallback() {
+        debug(`[nylas-view-email] Component disconnected`);
+        this.state = 'loading';
+        this.styles = [];
+        this.hoistedFontURLs = new Map();
+        this.sanitizedBody = '';
+        document.querySelectorAll('.nylas-view-email-font').forEach(link => {
+            link.remove();
+        });
+    }
+    async componentWillLoad() {
+        debug(`[nylas-view-email] component loaded`);
+        this.setBody(this.message?.body ?? '');
+    }
+    async componentDidLoad() {
+        debug(`[nylas-view-thread] Component did load`);
+        this.handleMobileSize();
+    }
+    async messageChanged() {
+        debug(`[nylas-view-thread] Message changed`, { message: this.message });
+        this.setBody(this.message?.body ?? '');
+    }
+    handleScroll() {
+        this.handleMobileSize();
+    }
+    viewEmailElementChanged() {
+        const toggleButton = this.viewEmailElement?.querySelectorAll('.nylas-view-email-toggle-button');
+        if (toggleButton) {
+            toggleButton.forEach(button => {
+                button.addEventListener('click', () => {
+                    const gmailQuote = this.viewEmailElement?.querySelector('.gmail_quote');
+                    if (gmailQuote) {
+                        gmailQuote.classList.toggle('show');
+                    }
+                });
+            });
+        }
+    }
+    render() {
+        console.debug(`[nylas-view-email] render`, { hoistedFontURLs: this.hoistedFontURLs });
+        return (h(Host, { key: 'c32409cd5bf30781d0d400103e9715bf48e13b23' }, this.state === 'loading' && h("div", null, "Loading..."), this.state === 'ready' && (h(Fragment, null, this.styles.map(style => (h("style", null, DOMPurify.sanitize(style.innerHTML)))), h("div", { class: 'view-email', part: "view-email", innerHTML: this.sanitizedBody, ref: el => (this.viewEmailElement = el) })))));
+    }
+    static get is() { return "nylas-view-email"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-view-email.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-view-email.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": ""
+                }
+            },
+            "parent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "attachments": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InternalAttachment[]",
+                    "resolved": "InternalAttachment[]",
+                    "references": {
+                        "InternalAttachment": {
+                            "location": "import",
+                            "path": "@/common/types",
+                            "id": "src/common/types.ts::InternalAttachment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "detectDarkMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "detect-dark-mode",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "state": {},
+            "sanitizedBody": {},
+            "styles": {},
+            "viewEmailElement": {},
+            "hoistedFontURLs": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "message",
+                "methodName": "messageChanged"
+            }, {
+                "propName": "viewEmailElement",
+                "methodName": "viewEmailElementChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=nylas-view-email.js.map

package/dist/collection/components/mailbox/nylas-view-email/nylas-view-email.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nylas-view-email.js","sourceRoot":"","sources":["../../../../src/components/mailbox/nylas-view-email/nylas-view-email.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE1G,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClG,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,SAAS,CAAC,OAAO,CAAC,yBAAyB,EAAE,UAAU,IAAI;IAEzD,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACvC,CAAC;AACH,CAAC,CAAC,CAAC;AAOH,MAAM,OAAO,cAAc;;QAeR,gBAAW,GAAoB,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAmCvE,YAAO,GAAG,CAAC,IAAY,EAAE,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;YAEvB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;YACjB,IAAI,CAAC,eAAe,GAAG,IAAI,GAAG,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;YAGxB,QAAQ,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACjE,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,CAAC,CAAC,CAAC;YAGH,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAChG,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,IAAI,GAAG,eAAe,oBAAoB,CAAC,IAAI,CAAC,gBAAgB,CAAC;YACnE,CAAC;YAED,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;YAGlC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAClC,CAAC;YAGD,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACvD,OAAO,CAAC,KAAK,CAAC,qCAAqC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBAChF,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC3E,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;oBACvC,IAAI,IAAI,EAAE,CAAC;wBACT,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;wBAChD,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,IAAI,GAAG,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;4BAC1D,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;wBAC/C,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;YAKH,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBAEzD,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACzC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;oBAChD,IAAI,KAAK,EAAE,CAAC;wBACV,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;wBACpD,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,IAAI,GAAG,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;4BAC1D,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;wBAC/C,CAAC;oBACH,CAAC;gBACH,CAAC,CAAC,CAAC;gBAGH,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;gBAC3D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAGxB,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,CAAC,CAAC,CAAC;YAGH,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBACjD,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACrC,CAAC,CAAC,CAAC;YAKH,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAClE,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBACtD,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;gBAC7D,YAAY,CAAC,YAAY,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC;gBAC5D,YAAY,CAAC,SAAS,GAAG,KAAK,CAAC;gBAC/B,UAAU,CAAC,aAAa,EAAE,YAAY,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;YACnE,CAAC;YAGD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YAGpE,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;gBACzC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC5C,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;gBACvC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;gBAC/B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;gBAC5C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;QACvB,CAAC,CAAC;QAyBM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC;YAEvF,IAAI,EAAE,IAAI,GAAG,EAAE,CAAC;gBACd,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,qBAAqB,EAAE,CAAC;gBACtE,IAAI,cAAc,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAC3D,IAAI,cAAc,CAAC,KAAK,GAAG,EAAE,EAAE,CAAC;wBAC9B,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;wBAClC,MAAM,WAAW,GAAG,aAAa,EAAE,qBAAqB,EAAE,CAAC;wBAC3D,KAAK,CAAC,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;wBAClF,KAAK,CAAC,sBAAsB,EAAE,aAAa,CAAC,WAAW,EAAE,uBAAuB,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;wBAE9G,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;wBACxD,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;wBAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;wBAEvC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;wBAEvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC;wBACxE,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;wBACxE,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,cAAc,CAAC,MAAM,GAAG,KAAK,IAAI,CAAC,CAAC;oBAC1F,CAAC;gBACH,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;gBACzD,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;gBAChE,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;YACxD,CAAC;QACH,CAAC,CAAC;;;2BA9LmD,EAAE;8BACZ,IAAI;qBAET,SAAS;6BACd,EAAE;sBACG,EAAE;;+BAGgB,IAAI,GAAG,EAAE;;IAIjE,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB;QAClB,KAAK,CAAC,2CAA2C,CAAC,CAAC;QACnD,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QAEvB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,GAAG,IAAI,GAAG,EAAE,CAAC;QACjC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QAGxB,QAAQ,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACjE,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,qCAAqC,CAAC,CAAC;QAC7C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IACzC,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAChD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAGD,KAAK,CAAC,cAAc;QAClB,KAAK,CAAC,qCAAqC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACxE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IACzC,CAAC;IAiGD,YAAY;QACV,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAGD,uBAAuB;QAIrB,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,iCAAiC,CAAC,CAAC;QAChG,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC5B,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;oBACpC,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;oBACxE,IAAI,UAAU,EAAE,CAAC;wBACf,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;oBACtC,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAgCD,MAAM;QACJ,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QACtF,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,4BAAqB;YACjD,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,CACzB,EAAC,QAAQ;gBACN,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACxB,iBAAQ,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAS,CACrD,CAAC;gBACF,WAAK,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,GAAI,CAC7G,CACZ,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { InternalAttachment } from '@/common/types';\nimport { processStyles } from '@/utils/color-utils';\nimport { debug, detectHTMLOrPlainText, detectIfMessageIsHTML, parsePlainTextToHTML } from '@/utils/utils';\nimport { Message } from '@nylas/core';\nimport { Component, Element, Fragment, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport DOMPurify from 'dompurify';\n\nDOMPurify.addHook('afterSanitizeAttributes', function (node) {\n // set all elements owning target to target=_blank\n if ('target' in node) {\n node.setAttribute('target', '_blank');\n node.setAttribute('rel', 'noopener');\n }\n});\n\n@Component({\n tag: 'nylas-view-email',\n styleUrl: 'nylas-view-email.scss',\n shadow: true,\n})\nexport class NylasViewEmail {\n @Element() readonly host!: HTMLDivElement;\n\n @Prop() readonly message?: Message;\n @Prop() readonly parent?: HTMLElement;\n @Prop() readonly attachments: InternalAttachment[] = [];\n @Prop() readonly detectDarkMode: boolean = true;\n\n @State() state: 'loading' | 'ready' = 'loading';\n @State() sanitizedBody: string = '';\n @State() styles: HTMLStyleElement[] = [];\n\n @State() private viewEmailElement?: HTMLDivElement;\n @State() private hoistedFontURLs: Map<string, string> = new Map();\n\n private readonly htmlElement: HTMLHtmlElement = document.createElement('html');\n\n connectedCallback() {}\n\n disconnectedCallback() {\n debug(`[nylas-view-email] Component disconnected`);\n this.state = 'loading';\n\n this.styles = [];\n this.hoistedFontURLs = new Map();\n this.sanitizedBody = '';\n\n // Find all hoisted font links and remove them\n document.querySelectorAll('.nylas-view-email-font').forEach(link => {\n link.remove();\n });\n }\n\n // TODO: We should obfuscate and randomize ids and classes\n async componentWillLoad() {\n debug(`[nylas-view-email] component loaded`);\n this.setBody(this.message?.body ?? '');\n }\n\n async componentDidLoad() {\n debug(`[nylas-view-thread] Component did load`);\n this.handleMobileSize();\n }\n\n @Watch('message')\n async messageChanged() {\n debug(`[nylas-view-thread] Message changed`, { message: this.message });\n this.setBody(this.message?.body ?? '');\n }\n\n private setBody = (body: string) => {\n this.state = 'loading';\n\n this.styles = [];\n this.hoistedFontURLs = new Map();\n this.sanitizedBody = '';\n\n // Find all hoisted font links and remove them\n document.querySelectorAll('.nylas-view-email-font').forEach(link => {\n link.remove();\n });\n\n // Detect if the body is HTML or plain text\n const isHTML = this.message ? detectIfMessageIsHTML(this.message) : detectHTMLOrPlainText(body);\n if (!isHTML) {\n body = `<html><body>${parsePlainTextToHTML(body)}</body></html>`;\n }\n\n this.htmlElement.innerHTML = body;\n\n // Applies styles to handle darkmode and other things\n if (this.detectDarkMode) {\n processStyles(this.htmlElement);\n }\n\n // Find any font links and hoist them to the parent\n this.htmlElement.querySelectorAll('link').forEach(link => {\n console.debug(`[nylas-view-email] Hoisting link: ${link.getAttribute('href')}`);\n if (link.getAttribute('rel') === 'stylesheet' && link.getAttribute('href')) {\n const href = link.getAttribute('href');\n if (href) {\n const url = new URL(href, window.location.href);\n if (url.protocol === 'https:' || url.protocol === 'http:') {\n this.hoistedFontURLs.set(url.href, url.href);\n }\n }\n }\n });\n\n // We need to take out all the styles fromm the email body\n // and inject them into the shadow dom, otherwise they will\n // not be applied\n this.htmlElement.querySelectorAll('style').forEach(style => {\n // Find any font links imported in the style\n style.innerHTML.split('\\n').forEach(line => {\n const match = line.match(/@import url\$(.*)\$/);\n if (match) {\n const url = new URL(match[1], window.location.href);\n if (url.protocol === 'https:' || url.protocol === 'http:') {\n this.hoistedFontURLs.set(url.href, url.href);\n }\n }\n });\n\n // There is no body in shadow dom, so we replace it with :host\n style.innerHTML = style.innerHTML.replace('body', ':host');\n this.styles.push(style);\n\n // No need to keep the style in the body\n style.remove();\n });\n\n // We want all links to open in a new tab\n this.htmlElement.querySelectorAll('a').forEach(a => {\n a.setAttribute('target', '_blank');\n });\n\n // Find the first instance of `.gmail_quote` and append a toggle button to it\n // When the toggle button is clicked, a \"show\" class is appended to\n // `.gmail_quote` which shows/hides the rest of the email\n const gmailQuote = this.htmlElement.querySelector('.gmail_quote');\n if (gmailQuote) {\n const toggleButton = document.createElement('button');\n toggleButton.classList.add('nylas-view-email-toggle-button');\n toggleButton.setAttribute('aria-label', 'Show quoted text');\n toggleButton.innerText = '...';\n gmailQuote.parentElement?.insertBefore(toggleButton, gmailQuote);\n }\n\n // Sanitize the body before rendering it in the shadow dom\n this.sanitizedBody = DOMPurify.sanitize(this.htmlElement.innerHTML);\n\n // Set the fonts on the document head, with a class so we can remove them later\n this.hoistedFontURLs.forEach((url, _key) => {\n const link = document.createElement('link');\n link.setAttribute('rel', 'stylesheet');\n link.setAttribute('href', url);\n link.classList.add('nylas-view-email-font');\n document.head.appendChild(link);\n });\n\n this.state = 'ready';\n };\n\n @Listen('resize', { target: 'window' })\n handleScroll() {\n this.handleMobileSize();\n }\n\n @Watch('viewEmailElement')\n viewEmailElementChanged() {\n // If the view email element changes, find all instances of\n // .nylas-view-email-toggle-button and add a click handler to them\n // that toggles the .show class on .gmail_quote\n const toggleButton = this.viewEmailElement?.querySelectorAll('.nylas-view-email-toggle-button');\n if (toggleButton) {\n toggleButton.forEach(button => {\n button.addEventListener('click', () => {\n const gmailQuote = this.viewEmailElement?.querySelector('.gmail_quote');\n if (gmailQuote) {\n gmailQuote.classList.toggle('show');\n }\n });\n });\n }\n }\n\n private handleMobileSize = () => {\n const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);\n // Mobile size detection\n if (vw <= 768) {\n const viewEmailReact = this.viewEmailElement?.getBoundingClientRect();\n if (viewEmailReact && this.viewEmailElement && this.parent) {\n if (viewEmailReact.width > vw) {\n const parentElement = this.parent;\n const parentReact = parentElement?.getBoundingClientRect();\n debug('Parent width:', parentReact?.width, 'Parent height:', parentReact?.height);\n debug('Parent client width:', parentElement.clientWidth, 'Parent client height:', parentElement.clientHeight);\n\n const scaleX = parentReact.width / viewEmailReact.width;\n const scaleY = parentReact.height / viewEmailReact.height;\n const scale = Math.min(scaleX, scaleY);\n\n debug('Scale:', scale);\n\n this.viewEmailElement.style.setProperty('transform', `scale(${scale})`);\n this.viewEmailElement.style.setProperty('transform-origin', `top left`);\n this.viewEmailElement.style.setProperty('height', `${viewEmailReact.height * scale}px`);\n }\n }\n } else {\n this.viewEmailElement?.style.removeProperty('transform');\n this.viewEmailElement?.style.removeProperty('transform-origin');\n this.viewEmailElement?.style.removeProperty('height');\n }\n };\n\n render() {\n console.debug(`[nylas-view-email] render`, { hoistedFontURLs: this.hoistedFontURLs });\n return (\n <Host>\n {this.state === 'loading' && <div>Loading...</div>}\n {this.state === 'ready' && (\n <Fragment>\n {this.styles.map(style => (\n <style>{DOMPurify.sanitize(style.innerHTML)}</style>\n ))}\n <div class={'view-email'} part=\"view-email\" innerHTML={this.sanitizedBody} ref={el => (this.viewEmailElement = el)} />\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/mailbox/nylas-view-thread/nylas-view-thread.css ADDED Viewed

@@ -0,0 +1,243 @@
+:host {
+  display: block;
+  font-size: inherit;
+}
+.avatar {
+  z-index: 1;
+  border-radius: 100%;
+  background-color: var(--nylas-color-primary-200);
+  height: 40px;
+  width: 40px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border: 1px solid var(--nylas-color-primary-200);
+}
+.view-thread {
+  display: grid;
+  grid-auto-flow: row;
+  width: 100%;
+}
+.view-thread .header {
+  display: grid;
+  grid-gap: 1rem;
+  /* grid-auto-flow: row;
+  grid-auto-columns: fit-content(50%); */
+  align-items: center;
+  margin-bottom: 1rem;
+}
+.view-thread .header .subject {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+}
+.view-thread .header .folders {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: min-content;
+  overflow-x: auto;
+  gap: 1rem;
+}
+.view-thread .header .folders .folder {
+  padding: 0 0.5rem;
+  font-size: 0.9rem;
+  color: var(--nylas-color-primary-900);
+  background-color: var(--nylas-color-primary-300);
+}
+.view-thread .messages {
+  display: grid;
+  gap: 1rem;
+}
+.view-thread .messages hr {
+  margin: 0;
+  width: 100%;
+  border: 1px solid var(--nylas-color-primary-200);
+}
+.view-thread .messages hr:last-of-type {
+  display: none;
+}
+.view-thread .messages .message {
+  display: grid;
+  grid-auto-flow: row;
+  gap: 1rem;
+}
+.view-thread .messages .message:last-of-type .sub-header {
+  cursor: default;
+}
+.view-thread .messages .message .sub-header {
+  display: grid;
+  grid-template: "avatar from date buttons" "avatar to to buttons";
+  grid-column-gap: 1rem;
+  grid-template-columns: auto 1fr auto auto;
+  cursor: pointer;
+}
+.view-thread .messages .message .sub-header > * {
+  pointer-events: none;
+}
+.view-thread .messages .message .sub-header .avatar {
+  grid-area: avatar;
+}
+.view-thread .messages .message .sub-header .from {
+  grid-area: from;
+}
+.view-thread .messages .message .sub-header .from span.email {
+  display: none;
+  color: var(--nylas-color-primary-400);
+  font-weight: 600;
+}
+.view-thread .messages .message .sub-header .buttons {
+  grid-area: buttons;
+  align-self: center;
+}
+.view-thread .messages .message .sub-header .buttons * {
+  pointer-events: all;
+}
+.view-thread .messages .message .sub-header .date {
+  grid-area: date;
+  align-self: center;
+  color: var(--nylas-color-primary-400);
+}
+.view-thread .messages .message .sub-header .snippet {
+  width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--nylas-color-primary-600);
+}
+.view-thread .messages .message .sub-header .to {
+  grid-area: to;
+  color: var(--nylas-color-primary-400);
+}
+.view-thread .messages .message .sub-header .to > span {
+  color: var(--nylas-color-primary-400);
+}
+.view-thread .messages .message .sub-header .to button {
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  pointer-events: all;
+  padding: 0;
+  margin: 0;
+}
+.view-thread .messages .message .sub-header .to button > * {
+  pointer-events: none;
+}
+.view-thread .messages .message .sub-header .to button chevron-icon {
+  display: inline-table;
+  fill: var(--nylas-color-primary-400);
+  width: 15px;
+  height: 15px;
+  vertical-align: middle;
+}
+.view-thread .messages .message .sub-header .to button chevron-icon svg {
+  width: 15px;
+  height: 15px;
+  transform: rotate(90deg);
+}
+.view-thread .messages .message .sub-header .to button.expand--showContactData chevron-icon svg {
+  transform: rotate(270deg);
+}
+.view-thread .messages .message .address-info {
+  display: grid;
+  column-gap: 1rem;
+  row-gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr;
+  padding: 1rem 2rem;
+  border-radius: var(--nylas-border-radius-2x);
+  border: 1px solid var(--nylas-color-primary-200);
+  align-items: flex-start;
+  color: var(--nylas-color-primary-600);
+}
+.view-thread .messages .message .address-info .label {
+  color: var(--nylas-color-primary-400);
+  font-weight: 600;
+}
+.show-more {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.show-more .sr-only {
+  display: none;
+}
+.show-more button {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  text-align: left;
+  overflow: hidden;
+}
+.show-more button span {
+  border: 1px solid var(--nylas-color-primary-400);
+}
+.show-more button:hover span {
+  background-color: var(--nylas-color-primary-700);
+}
+.show-more button::after {
+  border-top: 1px solid rgba(100, 121, 143, 0.122);
+  border-bottom: 1px solid rgba(100, 121, 143, 0.122);
+  content: "";
+  height: 4px;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+}
+.loading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--loading__background-color);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  overflow: hidden;
+}
+.reply-buttons {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: min-content;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+.reply-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);
+}
+.reply-buttons sp-button:hover {
+  background-color: var(--nylas-color-primary-500);
+}
+.reply-buttons sp-button:disabled {
+  background-color: var(--nylas-color-primary-200);
+  color: var(--nylas-color-primary-600);
+  cursor: not-allowed;
+}
+.reply-buttons sp-button chevron-icon {
+  display: inline-block;
+}
+/* Extra small devices (phones, 600px and down) */
+/* Small devices (portrait tablets and large phones, 600px and up) */
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  .view-thread .messages .message .sub-header .from span.email {
+    display: inline;
+  }
+}
+/* Large devices (laptops/desktops, 992px and up) */