@nylas/web-elements 1.0.0-prealpha1

package/dist/components/nylas-view-thread.js

@@ -0,0 +1,338 @@
+import { h, Fragment, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { q as formatTimeAgo, c as formatParticipants, r as formatRecipient, d as debug, t as toTitleCase } from './utils.js';
+import { d as defineCustomElement$e } from './bold.js';
+import { d as defineCustomElement$d } from './chevron.js';
+import { d as defineCustomElement$c } from './forward.js';
+import { d as defineCustomElement$b } from './italic.js';
+import { d as defineCustomElement$a } from './loading.js';
+import { d as defineCustomElement$9 } from './nylas-composer2.js';
+import { d as defineCustomElement$8 } from './nylas-summarize-message-button2.js';
+import { d as defineCustomElement$7 } from './nylas-view-email2.js';
+import { d as defineCustomElement$6 } from './play.js';
+import { d as defineCustomElement$5 } from './reply-all.js';
+import { d as defineCustomElement$4 } from './reply.js';
+import { d as defineCustomElement$3 } from './stop.js';
+import { d as defineCustomElement$2 } from './underline.js';
+
+function renderViewEmail(message, attachments, container, viewEmailElement, parent) {
+    if (!viewEmailElement) {
+        return;
+    }
+    if (!container) {
+        return;
+    }
+    if (container.children.length > 0) {
+        return;
+    }
+    debug(`[nylas-view-thread] Rendering email`, { message, attachments, viewEmailElement });
+    const viewEmailElementClone = viewEmailElement.cloneNode(true);
+    viewEmailElementClone.message = message.data;
+    viewEmailElementClone.parent = parent;
+    container.appendChild(viewEmailElementClone);
+}
+const ViewThreadMessage = ({ viewEmailElement, message, attachments, onMessageClick, onShowContactDataClick, parent }) => (h(Fragment, null,
+    h("div", { key: message.id, class: 'message' },
+        h("div", { class: 'sub-header', "data-id": message.data.id, onClick: onMessageClick },
+            h("div", { class: 'avatar' }, message.data.from && message.data.from[0]?.name && message.data.from[0]?.name[0]?.toUpperCase()),
+            h("div", { class: 'from' },
+                h("span", { class: 'name' }, message.data.from && message.data.from[0]?.name),
+                " ",
+                h("span", { class: "email" }, message.data.from && message.data.from[0]?.email)),
+            h("div", { class: 'date' },
+                new Date(message.data.date * 1000).toLocaleTimeString(undefined, {
+                    timeStyle: 'short',
+                }),
+                ' ',
+                "(",
+                formatTimeAgo(new Date(message.data.date * 1000)),
+                ")"),
+            h("sp-button-group", { class: "buttons" },
+                h("nylas-summarize-message-button", { message: message.data })),
+            message.collapse && h("div", { class: 'snippet' }, message.data.snippet),
+            !message.collapse && message.data.to && (h("div", { class: 'to' },
+                h("span", null, "to"),
+                " ",
+                formatParticipants(message.data.to),
+                ' ',
+                h("button", { type: "button", value: message.data.id, onClick: onShowContactDataClick, class: {
+                        'expand': true,
+                        'expand--showContactData': message.showContactData,
+                    } },
+                    h("chevron-icon", null))))),
+        message.showContactData && (h("div", { class: 'address-info' },
+            h("div", { class: 'label' }, "From"),
+            h("div", { class: 'value' }, formatRecipient(message.data?.from ? message?.data?.from[0] : { name: '', email: '' })),
+            message.data.to && (h(Fragment, null,
+                h("div", { class: 'label' }, "To"),
+                h("div", { class: 'value' }, message.data.to.map(to => (h("div", null, formatRecipient(to))))))),
+            typeof message.data.cc !== 'undefined' && message.data.cc.length > 0 && (h(Fragment, null,
+                h("div", { class: 'label' }, "CC"),
+                h("div", { class: 'value' }, message.data.cc.map(cc => (h("div", null, formatRecipient(cc))))))))),
+        !message.collapse && viewEmailElement && h("div", { key: message.id, ref: el => renderViewEmail(message, attachments, el, viewEmailElement, parent) }),
+        !message.collapse && !viewEmailElement && h("nylas-view-email", { key: message.id, message: message.data, parent: parent })),
+    h("hr", null)));
+
+const nylasViewThreadCss = ":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;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}@media only screen and (min-width: 768px){.view-thread .messages .message .sub-header .from span.email{display:inline}}";
+const NylasViewThreadStyle0 = nylasViewThreadCss;
+
+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 NylasViewThread$1 = proxyCustomElement(class NylasViewThread extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.threadSelected = createEvent(this, "threadSelected", 7);
+        this.showContactDataClicked = createEvent(this, "showContactDataClicked", 7);
+        this.messageClicked = createEvent(this, "messageClicked", 7);
+        this.nylasViewEmailElement = null;
+        this.nylasComposerElement = null;
+        this.onShowContactDataClick = (originalEvent) => {
+            originalEvent.stopPropagation();
+            const target = originalEvent.target;
+            const messageId = target.value;
+            const message = this.internalMessages.find(message => message.data.id === messageId);
+            if (!message) {
+                debug(`[nylas-view-thread] Could not find message ${messageId}`);
+                return;
+            }
+            const event = this.showContactDataClicked.emit(message.data);
+            if (!event.defaultPrevented) {
+                message.showContactData = !message.showContactData;
+                this.internalMessages = [...this.internalMessages];
+            }
+            debug(`[nylas-view-thread] show contact data clicked ${messageId} ${message.showContactData ? 'collapsed' : 'expanded'}`);
+        };
+        this.onMessageClick = (originalEvent) => {
+            const target = originalEvent.target;
+            const messageId = target.dataset.id;
+            const message = this.internalMessages.find(message => message.data.id === messageId);
+            if (!message) {
+                debug(`[nylas-view-thread] Could not find message ${messageId}`);
+                return;
+            }
+            const event = this.messageClicked.emit(message.data);
+            if (!event.defaultPrevented) {
+                if (message.id !== this.internalMessages[this.internalMessages.length - 1]?.id) {
+                    message.collapse = !message.collapse;
+                    if (message.collapse) {
+                        message.showContactData = false;
+                    }
+                }
+                this.internalMessages = [...this.internalMessages];
+            }
+            debug(`[nylas-view-thread] message clicked ${messageId} ${message.collapse ? 'collapsed' : 'expanded'}`);
+        };
+        this.onShowAllEmailsClick = () => {
+            this.showAllEmails = !this.showAllEmails;
+        };
+        this.showComposerClick = () => {
+            this.showComposer = !this.showComposer;
+        };
+        this.draft = undefined;
+        this.thread = undefined;
+        this.messages = [];
+        this.attachments = [];
+        this.state = 'loading';
+        this.internalMessages = [];
+        this.showAllEmails = false;
+        this.showComposer = false;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-view-thread] Component will load`);
+        this.updateInternalMessages(this.messages);
+        const template = this.host.querySelector('template.nylas-view-email');
+        if (!template) {
+            debug(`[nylas-view-thread] Could not find template`);
+            return;
+        }
+        const viewEmailTemplateClone = document.importNode(template.content, true);
+        this.nylasViewEmailElement = viewEmailTemplateClone.querySelector('nylas-view-email');
+        const composerTemplate = this.host.querySelector('template.nylas-composer');
+        if (!composerTemplate) {
+            debug(`[nylas-view-thread] Could not find composer template`);
+            return;
+        }
+        const composerTemplateClone = document.importNode(composerTemplate.content, true);
+        this.nylasComposerElement = composerTemplateClone.querySelector('nylas-composer');
+    }
+    async componentDidLoad() {
+        debug(`[nylas-view-thread] Component did load`);
+    }
+    async threadChanged(thread) {
+        debug(`[nylas-view-thread] Thread changed`, { thread: thread });
+        this.internalMessages = [];
+        const event = this.threadSelected.emit(thread);
+        if (!event.defaultPrevented) {
+            debug(`[nylas-view-thread] Default event not prevented, initializing`);
+        }
+    }
+    updateInternalMessages(messages) {
+        debug(`[nylas-view-thread] Updating internal messages`, { messages });
+        const internalMessages = messages
+            .sort((a, b) => {
+            return a.date > b.date ? 1 : -1;
+        })
+            .map((message, index) => ({
+            id: message.id,
+            data: message,
+            collapse: index === messages.length - 1 ? false : true,
+            showContactData: false,
+        }));
+        this.internalMessages = internalMessages;
+    }
+    render() {
+        const fistMessage = this.internalMessages.length > 2 ? this.internalMessages[0] : null;
+        const lastTwoMessages = this.internalMessages.slice(this.internalMessages.length - 2, this.internalMessages.length);
+        const remainingMessages = this.internalMessages.slice(1, this.internalMessages.length - 2);
+        const lastMessage = this.internalMessages[this.internalMessages.length - 1];
+        return (h(Host, { key: '99b11b1bd476708c89e6284a7d8fda1da9d886ff' }, h("sp-theme", { key: '23bc8c7387f08654aa38a187ee0da13e860ad207', scale: "medium", color: "dark" }, h("div", { key: 'fd78702832a02c3469dfea1b91aea94282cc566d', class: "view-thread" }, h("div", { key: '2405c194d2a7f80802cc25794129496453781445', class: "header" }, h("div", { key: 'f69ceef2127c53c38acb2be2033fd1e5b5502aad', class: 'subject' }, this.thread?.subject), h("div", { key: '2aceb0fa163a30aaa3e6a8f95b52b6ba0583d904', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '33a0f1c33dfd2072681c356a5144eaba7ef9522b', class: "messages" }, fistMessage && (h(ViewThreadMessage, { message: fistMessage, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement })), remainingMessages.length > 0 && this.messages.length > 1 && !this.showAllEmails && lastTwoMessages.length > 0 && (h(Fragment, null, h("div", { class: 'show-more' }, h("button", { type: "button", onClick: this.onShowAllEmailsClick }, h("span", { class: 'avatar' }, remainingMessages.length), " ", h("span", { class: 'sr-only' }, "Show ", remainingMessages.length, " more emails"))), h("hr", null))), remainingMessages.length > 0 &&
+            this.showAllEmails &&
+            this.messages.length > 2 &&
+            remainingMessages.map(email => (h(ViewThreadMessage, { message: email, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage?.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement }))), lastTwoMessages.length > 0 &&
+            lastTwoMessages.map(email => (h(ViewThreadMessage, { message: email, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage?.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement })))), !(this.showComposer && lastMessage) && (h("div", { class: "reply-buttons" }, h("sp-button", { variant: "cta", type: "button", onClick: this.showComposerClick }, h("span", { slot: "icon" }, h("reply-icon", null)), h("span", null, "Reply")), h("sp-button", { variant: "cta", type: "button" }, h("span", { slot: "icon" }, h("reply-all-icon", null)), h("span", null, "Reply All")), h("sp-button", { variant: "cta", type: "button" }, h("span", { slot: "icon" }, h("forward-icon", null)), h("span", null, "Forward")))), this.showComposer && lastMessage && (h("div", { class: "composer" }, h("nylas-composer", { message: lastMessage.data, onClose: this.showComposerClick, onSend: e => {
+                debug(`[nylas-view-thread] Send event`, { message: e.detail.message, replyBody: e.detail.replyBody });
+            } })))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "thread": ["threadChanged"],
+        "messages": ["updateInternalMessages"]
+    }; }
+    static get style() { return NylasViewThreadStyle0; }
+}, [1, "nylas-view-thread", {
+        "draft": [16],
+        "thread": [16],
+        "messages": [16],
+        "attachments": [16],
+        "state": [32],
+        "internalMessages": [32],
+        "showAllEmails": [32],
+        "showComposer": [32]
+    }, undefined, {
+        "thread": ["threadChanged"],
+        "messages": ["updateInternalMessages"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-view-thread',
+        stateToProps: new Map([
+            ['mailbox.selectedThread', 'thread'],
+            ['mailbox.messages', 'messages'],
+            ['mailbox.state', 'state'],
+        ]),
+        eventToProps: {
+            threadSelected: async (event, nylasConnector) => {
+                debug(`[nylas-view-thread] Nylas init event. Fetching thread messages.`, { event });
+                const thread = event.detail;
+                if (thread && thread.id) {
+                    await nylasConnector.messages.getThreadMessages(thread.id);
+                }
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasViewThread$1.prototype, "render", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-view-thread", "bold-icon", "chevron-icon", "forward-icon", "italic-icon", "loading-icon", "nylas-composer", "nylas-summarize-message-button", "nylas-view-email", "play-icon", "reply-all-icon", "reply-icon", "stop-icon", "underline-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-view-thread":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasViewThread$1);
+            }
+            break;
+        case "bold-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "chevron-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "forward-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "italic-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "loading-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "nylas-composer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "nylas-summarize-message-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "nylas-view-email":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "play-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "reply-all-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "reply-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "stop-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "underline-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const NylasViewThread = NylasViewThread$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasViewThread, defineCustomElement };
+
+//# sourceMappingURL=nylas-view-thread.js.map

package/dist/components/nylas-view-thread.js.map

@@ -0,0 +1 @@
+{"file":"nylas-view-thread.js","mappings":";;;;;;;;;;;;;;;;;AAqBA,SAAS,eAAe,CAAC,OAAwB,EAAE,WAAiC,EAAE,SAAuB,EAAE,gBAA4C,EAAE,MAAoB;IAE/K,IAAI,CAAC,gBAAgB,EAAE;QACrB,OAAO;KACR;IAGD,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;KACR;IAGD,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QACjC,OAAO;KACR;IAED,KAAK,CAAC,qCAAqC,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAIzF,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAA8B,CAAC;IAC5F,qBAAqB,CAAC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAC7C,qBAAqB,CAAC,MAAM,GAAG,MAAM,CAAC;IAGtC,SAAS,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;AAC/C,CAAC;AAEM,MAAM,iBAAiB,GAAgD,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,EAAE,MACvK,EAAC,QAAQ;IACP,WAAK,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS;QACpC,WAAK,KAAK,EAAE,YAAY,aAAW,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,cAAc;YACzE,WAAK,KAAK,EAAE,QAAQ,IAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAO;YAC7H,WAAK,KAAK,EAAE,MAAM;gBAChB,YAAM,KAAK,EAAE,MAAM,IAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAQ;;gBAAC,YAAM,KAAK,EAAC,OAAO,IAAE,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,CAAQ,CACvJ;YACN,WAAK,KAAK,EAAE,MAAM;gBACf,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE;oBAChE,SAAS,EAAE,OAAO;iBACnB,CAAC;gBAAE,GAAG;;gBACL,aAAa,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;oBAC/C;YACN,uBAAiB,KAAK,EAAC,SAAS;gBAC9B,sCAAgC,OAAO,EAAE,OAAO,CAAC,IAAI,GAAI,CACzC;YACjB,OAAO,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAE,SAAS,IAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAO;YAEvE,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,KACnC,WAAK,KAAK,EAAE,IAAI;gBACd,qBAAe;;gBAAE,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;gBAAE,GAAG;gBACzD,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,EACtB,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE;wBACL,QAAQ,EAAE,IAAI;wBACd,yBAAyB,EAAE,OAAO,CAAC,eAAe;qBACnD;oBAED,uBAAgB,CACT,CACL,CACP,CACG;QACL,OAAO,CAAC,eAAe,KACtB,WAAK,KAAK,EAAE,cAAc;YACxB,WAAK,KAAK,EAAE,OAAO,WAAY;YAC/B,WAAK,KAAK,EAAE,OAAO,IAAG,eAAe,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAO;YAElH,OAAO,CAAC,IAAI,CAAC,EAAE,KACd,EAAC,QAAQ;gBACP,WAAK,KAAK,EAAE,OAAO,SAAU;gBAC7B,WAAK,KAAK,EAAE,OAAO,IAChB,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KACrB,eAAM,eAAe,CAAC,EAAE,CAAC,CAAO,CACjC,CAAC,CACE,CACG,CACZ;YAEA,OAAO,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,KACnE,EAAC,QAAQ;gBACP,WAAK,KAAK,EAAE,OAAO,SAAU;gBAC7B,WAAK,KAAK,EAAE,OAAO,IAChB,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KACrB,eAAM,eAAe,CAAC,EAAE,CAAC,CAAO,CACjC,CAAC,CACE,CACG,CACZ,CACG,CACP;QACA,CAAC,OAAO,CAAC,QAAQ,IAAI,gBAAgB,IAAI,WAAK,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,IAAI,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,CAAC,GAAI;QAEjJ,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,gBAAgB,IAAI,wBAAkB,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,CACnH;IACN,aAAM,CACG,CACZ;;ACvHD,MAAM,kBAAkB,GAAG,mrJAAmrJ,CAAC;AAC/sJ,8BAAe,kBAAkB;;;;;;;;;;;;;;;;MCapBA,iBAAe;;;;;;;;QAmElB,0BAAqB,GAAqC,IAAI,CAAC;QAO/D,yBAAoB,GAAoC,IAAI,CAAC;QAkE7D,2BAAsB,GAAG,CAAC,aAAyB;YACzD,aAAa,CAAC,eAAe,EAAE,CAAC;YAChC,MAAM,MAAM,GAAG,aAAa,CAAC,MAA2B,CAAC;YACzD,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;YAE/B,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;YACrF,IAAI,CAAC,OAAO,EAAE;gBACZ,KAAK,CAAC,8CAA8C,SAAS,EAAE,CAAC,CAAC;gBACjE,OAAO;aACR;YACD,MAAM,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC7D,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;gBAC3B,OAAO,CAAC,eAAe,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC;gBACnD,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACpD;YAED,KAAK,CAAC,iDAAiD,SAAS,IAAI,OAAO,CAAC,eAAe,GAAG,WAAW,GAAG,UAAU,EAAE,CAAC,CAAC;SAC3H,CAAC;QAEM,mBAAc,GAAG,CAAC,aAAyB;YACjD,MAAM,MAAM,GAAG,aAAa,CAAC,MAAwB,CAAC;YACtD,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;YACrF,IAAI,CAAC,OAAO,EAAE;gBACZ,KAAK,CAAC,8CAA8C,SAAS,EAAE,CAAC,CAAC;gBACjE,OAAO;aACR;YACD,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;gBAC3B,IAAI,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;oBAC9E,OAAO,CAAC,QAAQ,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;oBACrC,IAAI,OAAO,CAAC,QAAQ,EAAE;wBACpB,OAAO,CAAC,eAAe,GAAG,KAAK,CAAC;qBACjC;iBACF;gBAED,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACpD;YACD,KAAK,CAAC,uCAAuC,SAAS,IAAI,OAAO,CAAC,QAAQ,GAAG,WAAW,GAAG,UAAU,EAAE,CAAC,CAAC;SAC1G,CAAC;QAEM,yBAAoB,GAAG;YAC7B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;SAC1C,CAAC;QAEM,sBAAiB,GAAG;YAC1B,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;SACxC,CAAC;;;wBAxKqC,EAAE;2BAKY,EAAE;qBAoBlB,SAAS;gCAMC,EAAE;6BAKf,KAAK;4BAKN,KAAK;;IAgBtC,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,yCAAyC,CAAC,CAAC;QACjD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAG3C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAsB,2BAA2B,CAAC,CAAC;QAC3F,IAAI,CAAC,QAAQ,EAAE;YACb,KAAK,CAAC,6CAA6C,CAAC,CAAC;YACrD,OAAO;SACR;QAED,MAAM,sBAAsB,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAC3E,IAAI,CAAC,qBAAqB,GAAG,sBAAsB,CAAC,aAAa,CAA4B,kBAAkB,CAAC,CAAC;QAGjH,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAsB,yBAAyB,CAAC,CAAC;QACjG,IAAI,CAAC,gBAAgB,EAAE;YACrB,KAAK,CAAC,sDAAsD,CAAC,CAAC;YAC9D,OAAO;SACR;QAED,MAAM,qBAAqB,GAAG,QAAQ,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAClF,IAAI,CAAC,oBAAoB,GAAG,qBAAqB,CAAC,aAAa,CAA2B,gBAAgB,CAAC,CAAC;KAC7G;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,wCAAwC,CAAC,CAAC;KACjD;IAGD,MAAM,aAAa,CAAC,MAA0B;QAC5C,KAAK,CAAC,oCAAoC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;QAGhE,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;QAE3B,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/C,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;YAC3B,KAAK,CAAC,+DAA+D,CAAC,CAAC;SACxE;KACF;IAGM,sBAAsB,CAAC,QAAmB;QAC/C,KAAK,CAAC,gDAAgD,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;QAEtE,MAAM,gBAAgB,GAAG,QAAQ;aAC9B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACT,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;SACjC,CAAC;aACD,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAAM;YACxB,EAAE,EAAE,OAAO,CAAC,EAAE;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,KAAK,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;YACtD,eAAe,EAAE,KAAK;SACvB,CAAC,CAAC,CAAC;QAEN,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;KAC1C;IAqED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;QACvF,MAAM,eAAe,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACpH,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC3F,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC5E,QACE,EAAC,IAAI,uDACH,iEAAU,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,IACnC,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAE,SAAS,IAAG,IAAI,CAAC,MAAM,EAAE,OAAO,CAAO,EACnD,4DAAK,KAAK,EAAE,SAAS,IAAG,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,IAAI,cAAQ,IAAI,EAAC,GAAG,IAAE,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAU,CAAC,CAAO,CAC1J,EACN,4DAAK,KAAK,EAAC,UAAU,IAClB,WAAW,KACV,EAAC,iBAAiB,IAChB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,IAAI,UAAU,CAAC,SAAS,KAAK,WAAW,CAAC,EAAE,CAAC,EAC3F,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,gBAAgB,EAAE,IAAI,CAAC,qBAAqB,EAC5C,eAAe,EAAE,IAAI,CAAC,oBAAoB,GAC1C,CACH,EACA,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,KAC5G,EAAC,QAAQ,QACP,WAAK,KAAK,EAAE,WAAW,IACrB,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,IACtD,YAAM,KAAK,EAAE,QAAQ,IAAG,iBAAiB,CAAC,MAAM,CAAQ,OAAC,YAAM,KAAK,EAAE,SAAS,aAAQ,iBAAiB,CAAC,MAAM,iBAAoB,CAC5H,CACL,EACN,aAAM,CACG,CACZ,EACA,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAC3B,IAAI,CAAC,aAAa;YAClB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;YACxB,iBAAiB,CAAC,GAAG,CAAC,KAAK,KACzB,EAAC,iBAAiB,IAChB,OAAO,EAAE,KAAK,EACd,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,IAAI,UAAU,CAAC,SAAS,KAAK,WAAW,EAAE,EAAE,CAAC,EAC5F,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,gBAAgB,EAAE,IAAI,CAAC,qBAAqB,EAC5C,eAAe,EAAE,IAAI,CAAC,oBAAoB,GAC1C,CACH,CAAC,EACH,eAAe,CAAC,MAAM,GAAG,CAAC;YACzB,eAAe,CAAC,GAAG,CAAC,KAAK,KACvB,EAAC,iBAAiB,IAChB,OAAO,EAAE,KAAK,EACd,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,IAAI,UAAU,CAAC,SAAS,KAAK,WAAW,EAAE,EAAE,CAAC,EAC5F,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,gBAAgB,EAAE,IAAI,CAAC,qBAAqB,EAC5C,eAAe,EAAE,IAAI,CAAC,oBAAoB,GAC1C,CACH,CAAC,CACA,EACL,EAAE,IAAI,CAAC,YAAY,IAAI,WAAW,CAAC,KAClC,WAAK,KAAK,EAAC,eAAe,IACxB,iBAAW,OAAO,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACpE,YAAM,IAAI,EAAC,MAAM,IACf,qBAAyB,CACpB,EACP,wBAAkB,CACR,EACZ,iBAAW,OAAO,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,IACpC,YAAM,IAAI,EAAC,MAAM,IACf,yBAAiC,CAC5B,EACP,4BAAsB,CACZ,EACZ,iBAAW,OAAO,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,IACpC,YAAM,IAAI,EAAC,MAAM,IACf,uBAA6B,CACxB,EACP,0BAAoB,CACV,CACR,CACP,EACA,IAAI,CAAC,YAAY,IAAI,WAAW,KAC/B,WAAK,KAAK,EAAC,UAAU,IACnB,sBACE,OAAO,EAAE,WAAW,CAAC,IAAI,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,MAAM,EAAE,CAAC;gBACP,KAAK,CAAC,gCAAgC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC;aACvG,GACe,CACd,CACP,CACG,CACG,CACN,EACP;KACH;;;;;;;;;;;;;;;;;;;;AAnGD;IAlBC,iBAAiB,CAAqF;QACrG,IAAI,EAAE,mBAAmB;QACzB,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,wBAAwB,EAAE,QAAQ,CAAC;YACpC,CAAC,kBAAkB,EAAE,UAAU,CAAC;YAChC,CAAC,eAAe,EAAE,OAAO,CAAC;SAC3B,CAAC;QACF,YAAY,EAAE;YACZ,cAAc,EAAE,OAAO,KAA0B,EAAE,cAAqC;gBACtF,KAAK,CAAC,iEAAiE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;gBACpF,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC5B,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,EAAE;oBACvB,MAAM,cAAc,CAAC,QAAQ,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;iBAC5D;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;+CAoGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NylasViewThread"],"sources":["src/components/mailbox/nylas-view-thread/view-thread-message.tsx","src/components/mailbox/nylas-view-thread/nylas-view-thread.scss?tag=nylas-view-thread&encapsulation=shadow","src/components/mailbox/nylas-view-thread/nylas-view-thread.tsx"],"sourcesContent":["import { InternalAttachment, InternalMessage } from '@/common/types';\nimport { debug, formatParticipants, formatRecipient, formatTimeAgo } from '@/utils/utils';\nimport { Fragment, FunctionalComponent, h } from '@stencil/core';\n\nexport type ViewThreadMessageProps = {\n  message: InternalMessage;\n  attachments: InternalAttachment[];\n  viewEmailElement?: HTMLNylasViewEmailElement | null;\n  composerElement?: HTMLNylasComposerElement | null;\n  onShowContactDataClick: (event: MouseEvent) => void;\n  onMessageClick: (event: MouseEvent) => void;\n  parent?: HTMLElement;\n};\n\n/**\n * Render view email element\n * @param container Container element to render view email element\n * @param message Message to render\n * @param viewEmailElement View email element to render\n * @param parent Parent element used for mobile view resizing\n */\nfunction renderViewEmail(message: InternalMessage, attachments: InternalAttachment[], container?: HTMLElement, viewEmailElement?: HTMLNylasViewEmailElement, parent?: HTMLElement) {\n  // Skip if message is not defined\n  if (!viewEmailElement) {\n    return;\n  }\n\n  // Skip if container is not defined\n  if (!container) {\n    return;\n  }\n\n  // Skip if container already has a child\n  if (container.children.length > 0) {\n    return;\n  }\n\n  debug(`[nylas-view-thread] Rendering email`, { message, attachments, viewEmailElement });\n\n  // Clone viewEmailElement so that we are not reusing the same element from another\n  // message in the thread\n  const viewEmailElementClone = viewEmailElement.cloneNode(true) as HTMLNylasViewEmailElement;\n  viewEmailElementClone.message = message.data;\n  viewEmailElementClone.parent = parent;\n\n  // Append viewEmailElement to container\n  container.appendChild(viewEmailElementClone);\n}\n\nexport const ViewThreadMessage: FunctionalComponent<ViewThreadMessageProps> = ({ viewEmailElement, message, attachments, onMessageClick, onShowContactDataClick, parent }) => (\n  <Fragment>\n    <div key={message.id} class={'message'}>\n      <div class={'sub-header'} data-id={message.data.id} onClick={onMessageClick}>\n        <div class={'avatar'}>{message.data.from && message.data.from[0]?.name && message.data.from[0]?.name[0]?.toUpperCase()}</div>\n        <div class={'from'}>\n          <span class={'name'}>{message.data.from && message.data.from[0]?.name}</span> <span class=\"email\">{message.data.from && message.data.from[0]?.email}</span>\n        </div>\n        <div class={'date'}>\n          {new Date(message.data.date * 1000).toLocaleTimeString(undefined, {\n            timeStyle: 'short',\n          })}{' '}\n          ({formatTimeAgo(new Date(message.data.date * 1000))})\n        </div>\n        <sp-button-group class=\"buttons\">\n          <nylas-summarize-message-button message={message.data} />\n        </sp-button-group>\n        {message.collapse && <div class={'snippet'}>{message.data.snippet}</div>}\n\n        {!message.collapse && message.data.to && (\n          <div class={'to'}>\n            <span>to</span> {formatParticipants(message.data.to)}{' '}\n            <button\n              type=\"button\"\n              value={message.data.id}\n              onClick={onShowContactDataClick}\n              class={{\n                'expand': true,\n                'expand--showContactData': message.showContactData,\n              }}\n            >\n              <chevron-icon />\n            </button>\n          </div>\n        )}\n      </div>\n      {message.showContactData && (\n        <div class={'address-info'}>\n          <div class={'label'}>From</div>\n          <div class={'value'}>{formatRecipient(message.data?.from ? message?.data?.from[0] : { name: '', email: '' })}</div>\n\n          {message.data.to && (\n            <Fragment>\n              <div class={'label'}>To</div>\n              <div class={'value'}>\n                {message.data.to.map(to => (\n                  <div>{formatRecipient(to)}</div>\n                ))}\n              </div>\n            </Fragment>\n          )}\n\n          {typeof message.data.cc !== 'undefined' && message.data.cc.length > 0 && (\n            <Fragment>\n              <div class={'label'}>CC</div>\n              <div class={'value'}>\n                {message.data.cc.map(cc => (\n                  <div>{formatRecipient(cc)}</div>\n                ))}\n              </div>\n            </Fragment>\n          )}\n        </div>\n      )}\n      {!message.collapse && viewEmailElement && <div key={message.id} ref={el => renderViewEmail(message, attachments, el, viewEmailElement, parent)} />}\n      {/* If no view element was provided, default to our own instance */}\n      {!message.collapse && !viewEmailElement && <nylas-view-email key={message.id} message={message.data} parent={parent} />}\n    </div>\n    <hr />\n  </Fragment>\n);\n",":host {\n  display: block;\n  font-size: inherit;\n}\n\n.avatar {\n  z-index: 1;\n  border-radius: 100%;\n  background-color: var(--nylas-color-primary-200);\n  height: 40px;\n  width: 40px;\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  border: 1px solid var(--nylas-color-primary-200);\n}\n\n.view-thread {\n  display: grid;\n  grid-auto-flow: row;\n  width: 100%;\n\n  .header {\n    display: grid;\n    grid-gap: 1rem;\n    /* grid-auto-flow: row;\n    grid-auto-columns: fit-content(50%); */\n    align-items: center;\n    margin-bottom: 1rem;\n\n    .subject {\n      font-size: 1.25rem;\n      font-weight: 600;\n      line-height: 1.5rem;\n    }\n\n    .folders {\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: min-content;\n      overflow-x: auto;\n      gap: 1rem;\n\n      .folder {\n        padding: 0 0.5rem;\n        font-size: 0.9rem;\n        color: var(--nylas-color-primary-900);\n        background-color: var(--nylas-color-primary-300);\n      }\n    }\n  }\n\n  .messages {\n    display: grid;\n    gap: 1rem;\n\n    hr {\n      margin: 0;\n      width: 100%;\n      border: 1px solid var(--nylas-color-primary-200);\n\n      &:last-of-type {\n        display: none;\n      }\n    }\n\n    .message {\n      display: grid;\n      grid-auto-flow: row;\n      gap: 1rem;\n\n      &:last-of-type .sub-header {\n        cursor: default;\n      }\n\n      .sub-header {\n        display: grid;\n        grid-template:\n          'avatar from date buttons'\n          'avatar to to buttons';\n        grid-column-gap: 1rem;\n        grid-template-columns: auto 1fr auto auto;\n        cursor: pointer;\n\n        > * {\n          pointer-events: none;\n        }\n\n        .avatar {\n          grid-area: avatar;\n        }\n\n        .from {\n          grid-area: from;\n          span.email {\n            display: none;\n            color: var(--nylas-color-primary-400);\n            font-weight: 600;\n          }\n        }\n\n        .buttons {\n          grid-area: buttons;\n          align-self: center;\n\n          * {\n            pointer-events: all;\n          }\n        }\n\n        .date {\n          grid-area: date;\n          align-self: center;\n          color: var(--nylas-color-primary-400);\n        }\n\n        .snippet {\n          width: 90%;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          color: var(--nylas-color-primary-600);\n        }\n\n        .to {\n          grid-area: to;\n          color: var(--nylas-color-primary-400);\n\n          > span {\n            color: var(--nylas-color-primary-400);\n          }\n\n          button {\n            border: 0;\n            background-color: transparent;\n            cursor: pointer;\n            pointer-events: all;\n            padding: 0;\n            margin: 0;\n\n            > * {\n              pointer-events: none;\n            }\n\n            chevron-icon {\n              display: inline-table;\n              fill: var(--nylas-color-primary-400);\n              width: 15px;\n              height: 15px;\n              vertical-align: middle;\n              svg {\n                width: 15px;\n                height: 15px;\n                transform: rotate(90deg);\n              }\n            }\n\n            &.expand--showContactData chevron-icon {\n              svg {\n                transform: rotate(270deg);\n              }\n            }\n          }\n        }\n      }\n\n      .address-info {\n        display: grid;\n        column-gap: 1rem;\n        row-gap: 0.5rem;\n        grid-template-columns: auto 1fr;\n        grid-template-rows: 1fr;\n        padding: 1rem 2rem;\n        border-radius: var(--nylas-border-radius-2x);\n        border: 1px solid var(--nylas-color-primary-200);\n        align-items: flex-start;\n        color: var(--nylas-color-primary-600);\n\n        .label {\n          color: var(--nylas-color-primary-400);\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n\n.show-more {\n  position: relative;\n  display: flex;\n  width: 100%;\n\n  .sr-only {\n    display: none;\n  }\n\n  button {\n    position: relative;\n    display: inline-flex;\n    width: 100%;\n    padding: 0;\n    border: 0;\n    background-color: transparent;\n    cursor: pointer;\n    text-align: left;\n    overflow: hidden;\n\n    span {\n      border: 1px solid var(--nylas-color-primary-400);\n    }\n\n    &:hover span {\n      background-color: var(--nylas-color-primary-700);\n    }\n\n    &::after {\n      border-top: 1px solid rgba(100, 121, 143, 0.122);\n      border-bottom: 1px solid rgba(100, 121, 143, 0.122);\n      content: '';\n      height: 4px;\n      width: 100%;\n      position: absolute;\n      top: 50%;\n    }\n  }\n}\n\n.loading {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: var(--loading__background-color);\n  top: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  display: grid;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.reply-buttons {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: min-content;\n  gap: 1rem;\n  margin-top: 1rem;\n\n  sp-button {\n    border-radius: var(--nylas-border-radius);\n    background-color: var(--nylas-color-primary-400);\n    color: var(--nylas-color-primary-900);\n    fill: var(--nylas-color-primary-900);\n\n    &:hover {\n      background-color: var(--nylas-color-primary-500);\n    }\n\n    &:disabled {\n      background-color: var(--nylas-color-primary-200);\n      color: var(--nylas-color-primary-600);\n      cursor: not-allowed;\n    }\n\n    & chevron-icon {\n      display: inline-block;\n    }\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  .view-thread {\n    .messages {\n      .message {\n        .sub-header {\n          .from {\n            span.email {\n              display: inline;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n/* Large devices (laptops/desktops, 992px and up) */\n@media only screen and (min-width: 992px) {\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { DataState, InternalAttachment, InternalMessage } from '@/common/types';\nimport { debug, toTitleCase } from '@/utils/utils';\nimport { Message, Thread } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../../components';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\nimport { ViewThreadMessage } from './view-thread-message';\n\n@Component({\n  tag: 'nylas-view-thread',\n  styleUrl: 'nylas-view-thread.scss',\n  shadow: true,\n})\nexport class NylasViewThread {\n  /**\n   * The host element\n   */\n  @Element() readonly host!: HTMLDivElement;\n\n  /**\n   * The draft message to display\n   */\n  @Prop() readonly draft?: Message;\n\n  /**\n   * Thread to display\n   */\n  @Prop() readonly thread?: Thread;\n\n  /**\n   * Messages within the thread to display\n   */\n  @Prop() readonly messages: Message[] = [];\n\n  /**\n   * Attachments for each message within the thread\n   */\n  @Prop() readonly attachments: InternalAttachment[] = [];\n\n  /**\n   * Event emitted when a thread is selected\n   */\n  @Event({ cancelable: true }) readonly threadSelected!: EventEmitter<Thread>;\n\n  /**\n   * Event emitted when a message contact data is clicked\n   */\n  @Event() showContactDataClicked!: EventEmitter<Message>;\n\n  /**\n   * Event emitted when a message is clicked\n   */\n  @Event() messageClicked!: EventEmitter<Message>;\n\n  /**\n   * THe data state of the mailbox (loading, ready, error)\n   */\n  @State() readonly state: DataState = 'loading';\n\n  /**\n   * Internal messages contains additional data for each message\n   * required for rendering\n   */\n  @State() internalMessages: InternalMessage[] = [];\n\n  /**\n   * A toggle state to all emails\n   */\n  @State() showAllEmails: boolean = false;\n\n  /**\n   * A toggle state to show the composer\n   */\n  @State() showComposer: boolean = false;\n\n  /**\n   * The view email element to render.\n   * This is the HTML element that is passed to this component\n   * and which is used to render the email body for each message.\n   */\n  private nylasViewEmailElement: HTMLNylasViewEmailElement | null = null;\n\n  /**\n   * The composer element to render.\n   * This is the HTML element that is passed to this component\n   * and which is used to render the composer for each message.\n   */\n  private nylasComposerElement: HTMLNylasComposerElement | null = null;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-view-thread] Component will load`);\n    this.updateInternalMessages(this.messages);\n\n    // Get the template with the class \"nylas-view-email\" and clone it\n    const template = this.host.querySelector<HTMLTemplateElement>('template.nylas-view-email');\n    if (!template) {\n      debug(`[nylas-view-thread] Could not find template`);\n      return;\n    }\n\n    const viewEmailTemplateClone = document.importNode(template.content, true);\n    this.nylasViewEmailElement = viewEmailTemplateClone.querySelector<HTMLNylasViewEmailElement>('nylas-view-email');\n\n    // Get the template with the class \"nylas-composer\" and clone it\n    const composerTemplate = this.host.querySelector<HTMLTemplateElement>('template.nylas-composer');\n    if (!composerTemplate) {\n      debug(`[nylas-view-thread] Could not find composer template`);\n      return;\n    }\n\n    const composerTemplateClone = document.importNode(composerTemplate.content, true);\n    this.nylasComposerElement = composerTemplateClone.querySelector<HTMLNylasComposerElement>('nylas-composer');\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-view-thread] Component did load`);\n  }\n\n  @Watch('thread')\n  async threadChanged(thread: Thread | undefined) {\n    debug(`[nylas-view-thread] Thread changed`, { thread: thread });\n\n    // Reset internal messages\n    this.internalMessages = [];\n\n    const event = this.threadSelected.emit(thread);\n    if (!event.defaultPrevented) {\n      debug(`[nylas-view-thread] Default event not prevented, initializing`);\n    }\n  }\n\n  @Watch('messages')\n  public updateInternalMessages(messages: Message[]) {\n    debug(`[nylas-view-thread] Updating internal messages`, { messages });\n\n    const internalMessages = messages\n      .sort((a, b) => {\n        return a.date > b.date ? 1 : -1;\n      })\n      .map((message, index) => ({\n        id: message.id,\n        data: message,\n        collapse: index === messages.length - 1 ? false : true,\n        showContactData: false,\n      }));\n\n    this.internalMessages = internalMessages;\n  }\n\n  private onShowContactDataClick = (originalEvent: MouseEvent) => {\n    originalEvent.stopPropagation();\n    const target = originalEvent.target as HTMLButtonElement;\n    const messageId = target.value;\n\n    const message = this.internalMessages.find(message => message.data.id === messageId);\n    if (!message) {\n      debug(`[nylas-view-thread] Could not find message ${messageId}`);\n      return;\n    }\n    const event = this.showContactDataClicked.emit(message.data);\n    if (!event.defaultPrevented) {\n      message.showContactData = !message.showContactData;\n      this.internalMessages = [...this.internalMessages];\n    }\n\n    debug(`[nylas-view-thread] show contact data clicked ${messageId} ${message.showContactData ? 'collapsed' : 'expanded'}`);\n  };\n\n  private onMessageClick = (originalEvent: MouseEvent) => {\n    const target = originalEvent.target as HTMLDivElement;\n    const messageId = target.dataset.id;\n    const message = this.internalMessages.find(message => message.data.id === messageId);\n    if (!message) {\n      debug(`[nylas-view-thread] Could not find message ${messageId}`);\n      return;\n    }\n    const event = this.messageClicked.emit(message.data);\n    if (!event.defaultPrevented) {\n      if (message.id !== this.internalMessages[this.internalMessages.length - 1]?.id) {\n        message.collapse = !message.collapse;\n        if (message.collapse) {\n          message.showContactData = false;\n        }\n      }\n\n      this.internalMessages = [...this.internalMessages];\n    }\n    debug(`[nylas-view-thread] message clicked ${messageId} ${message.collapse ? 'collapsed' : 'expanded'}`);\n  };\n\n  private onShowAllEmailsClick = () => {\n    this.showAllEmails = !this.showAllEmails;\n  };\n\n  private showComposerClick = () => {\n    this.showComposer = !this.showComposer;\n  };\n\n  @RegisterComponent<NylasViewThread, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-view-thread',\n    stateToProps: new Map([\n      ['mailbox.selectedThread', 'thread'],\n      ['mailbox.messages', 'messages'],\n      ['mailbox.state', 'state'],\n    ]),\n    eventToProps: {\n      threadSelected: async (event: CustomEvent<Thread>, nylasConnector: NylasMailboxConnector) => {\n        debug(`[nylas-view-thread] Nylas init event. Fetching thread messages.`, { event });\n        const thread = event.detail;\n        if (thread && thread.id) {\n          await nylasConnector.messages.getThreadMessages(thread.id);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const fistMessage = this.internalMessages.length > 2 ? this.internalMessages[0] : null;\n    const lastTwoMessages = this.internalMessages.slice(this.internalMessages.length - 2, this.internalMessages.length);\n    const remainingMessages = this.internalMessages.slice(1, this.internalMessages.length - 2);\n    const lastMessage = this.internalMessages[this.internalMessages.length - 1];\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <div class=\"view-thread\">\n            <div class=\"header\">\n              <div class={'subject'}>{this.thread?.subject}</div>\n              <div class={'folders'}>{this.thread?.folders?.map(folder => <sp-tag size=\"s\">{toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' '))}</sp-tag>)}</div>\n            </div>\n            <div class=\"messages\">\n              {fistMessage && (\n                <ViewThreadMessage\n                  message={fistMessage}\n                  attachments={this.attachments.filter(attachment => attachment.messageId === fistMessage.id)}\n                  onMessageClick={this.onMessageClick}\n                  onShowContactDataClick={this.onShowContactDataClick}\n                  parent={this.host}\n                  viewEmailElement={this.nylasViewEmailElement}\n                  composerElement={this.nylasComposerElement}\n                />\n              )}\n              {remainingMessages.length > 0 && this.messages.length > 1 && !this.showAllEmails && lastTwoMessages.length > 0 && (\n                <Fragment>\n                  <div class={'show-more'}>\n                    <button type=\"button\" onClick={this.onShowAllEmailsClick}>\n                      <span class={'avatar'}>{remainingMessages.length}</span> <span class={'sr-only'}>Show {remainingMessages.length} more emails</span>\n                    </button>\n                  </div>\n                  <hr />\n                </Fragment>\n              )}\n              {remainingMessages.length > 0 &&\n                this.showAllEmails &&\n                this.messages.length > 2 &&\n                remainingMessages.map(email => (\n                  <ViewThreadMessage\n                    message={email}\n                    attachments={this.attachments.filter(attachment => attachment.messageId === fistMessage?.id)}\n                    onMessageClick={this.onMessageClick}\n                    onShowContactDataClick={this.onShowContactDataClick}\n                    parent={this.host}\n                    viewEmailElement={this.nylasViewEmailElement}\n                    composerElement={this.nylasComposerElement}\n                  />\n                ))}\n              {lastTwoMessages.length > 0 &&\n                lastTwoMessages.map(email => (\n                  <ViewThreadMessage\n                    message={email}\n                    attachments={this.attachments.filter(attachment => attachment.messageId === fistMessage?.id)}\n                    onMessageClick={this.onMessageClick}\n                    onShowContactDataClick={this.onShowContactDataClick}\n                    parent={this.host}\n                    viewEmailElement={this.nylasViewEmailElement}\n                    composerElement={this.nylasComposerElement}\n                  />\n                ))}\n            </div>\n            {!(this.showComposer && lastMessage) && (\n              <div class=\"reply-buttons\">\n                <sp-button variant=\"cta\" type=\"button\" onClick={this.showComposerClick}>\n                  <span slot=\"icon\">\n                    <reply-icon></reply-icon>\n                  </span>\n                  <span>Reply</span>\n                </sp-button>\n                <sp-button variant=\"cta\" type=\"button\">\n                  <span slot=\"icon\">\n                    <reply-all-icon></reply-all-icon>\n                  </span>\n                  <span>Reply All</span>\n                </sp-button>\n                <sp-button variant=\"cta\" type=\"button\">\n                  <span slot=\"icon\">\n                    <forward-icon></forward-icon>\n                  </span>\n                  <span>Forward</span>\n                </sp-button>\n              </div>\n            )}\n            {this.showComposer && lastMessage && (\n              <div class=\"composer\">\n                <nylas-composer\n                  message={lastMessage.data}\n                  onClose={this.showComposerClick}\n                  onSend={e => {\n                    debug(`[nylas-view-thread] Send event`, { message: e.detail.message, replyBody: e.detail.replyBody });\n                  }}\n                ></nylas-composer>\n              </div>\n            )}\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/people-icon.d.ts

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

package/dist/components/people-icon.js

@@ -0,0 +1,8 @@
+import { P as PeopleIcon$1, d as defineCustomElement$1 } from './people.js';
+
+const PeopleIcon = PeopleIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PeopleIcon, defineCustomElement };
+
+//# sourceMappingURL=people-icon.js.map

package/dist/components/people-icon.js.map

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

package/dist/components/people.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const iconCss = ".sc-people-icon-h{display:flex}";
+const PeopleIconStyle0 = iconCss;
+
+const PeopleIcon = proxyCustomElement(class PeopleIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.width = '20';
+        this.height = '20';
+    }
+    render() {
+        return (h("svg", { key: '47396b31a1992ee2ff4e9cf49ddcd0cec9a7da6b', xmlns: "http://www.w3.org/2000/svg", width: this.width, height: this.height, fill: "none", viewBox: "0 0 20 20" }, h("path", { key: '3dfcdeb916edef1da0193d38d867c6425ac99a34', fill: "currentColor", d: "M11 10a2 2 0 0 1 2 2v1.5c0 2.054-2.088 3.5-5.5 3.5S2 15.554 2 13.5V12a2 2 0 0 1 2-2h7Zm0 1H4a1 1 0 0 0-1 1v1.5C3 14.907 4.579 16 7.5 16c2.921 0 4.5-1.093 4.5-2.5V12a1 1 0 0 0-1-1Zm5-1a2 2 0 0 1 2 2v.5c0 2.089-1.568 3.5-4.5 3.5-.141 0-.28-.003-.414-.01.208-.242.382-.502.522-.781l.097-.213h.039C15.976 14.931 17 13.96 17 12.5V12a1 1 0 0 0-1-1h-2.171a3 3 0 0 0-.594-1H16ZM7.5 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm7 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-7-1a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm7 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" })));
+    }
+    static get style() { return PeopleIconStyle0; }
+}, [2, "people-icon", {
+        "width": [1],
+        "height": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["people-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "people-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PeopleIcon);
+            }
+            break;
+    } });
+}
+
+export { PeopleIcon as P, defineCustomElement as d };
+
+//# sourceMappingURL=people.js.map

package/dist/components/people.js.map

@@ -0,0 +1 @@
+{"file":"people.js","mappings":";;AAAA,MAAM,OAAO,GAAG,iCAAiC,CAAC;AAClD,yBAAe,OAAO;;MCMT,UAAU;;;;qBACG,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,IAC7G,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0hBAA0hB,GAC5hB,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/common/icons/icon.css?tag=people-icon&encapsulation=scoped","src/common/icons/people.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'people-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class PeopleIcon {\n  @Prop() width: string = '20';\n  @Prop() height: string = '20';\n\n  render() {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width={this.width} height={this.height} fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"currentColor\"\n          d=\"M11 10a2 2 0 0 1 2 2v1.5c0 2.054-2.088 3.5-5.5 3.5S2 15.554 2 13.5V12a2 2 0 0 1 2-2h7Zm0 1H4a1 1 0 0 0-1 1v1.5C3 14.907 4.579 16 7.5 16c2.921 0 4.5-1.093 4.5-2.5V12a1 1 0 0 0-1-1Zm5-1a2 2 0 0 1 2 2v.5c0 2.089-1.568 3.5-4.5 3.5-.141 0-.28-.003-.414-.01.208-.242.382-.502.522-.781l.097-.213h.039C15.976 14.931 17 13.96 17 12.5V12a1 1 0 0 0-1-1h-2.171a3 3 0 0 0-.594-1H16ZM7.5 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm7 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-7-1a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm7 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/play-icon.d.ts

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

package/dist/components/play-icon.js

@@ -0,0 +1,8 @@
+import { P as PlayIcon$1, d as defineCustomElement$1 } from './play.js';
+
+const PlayIcon = PlayIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PlayIcon, defineCustomElement };
+
+//# sourceMappingURL=play-icon.js.map

package/dist/components/play-icon.js.map

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

package/dist/components/play.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const iconCss = ".sc-play-icon-h{display:flex}";
+const PlayIconStyle0 = iconCss;
+
+const PlayIcon = proxyCustomElement(class PlayIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.width = '15';
+        this.height = '15';
+    }
+    render() {
+        return (h("svg", { key: '5f4b005784b461f0f7c5da20c0a3b3289f51100a', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '88fbd7a18f4e3f5e88cf134246af8d319d309352', d: "M21 12L3 21V3L21 12Z", stroke: "auto", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+    static get style() { return PlayIconStyle0; }
+}, [2, "play-icon", {
+        "width": [1],
+        "height": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["play-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "play-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PlayIcon);
+            }
+            break;
+    } });
+}
+
+export { PlayIcon as P, defineCustomElement as d };
+
+//# sourceMappingURL=play.js.map

package/dist/components/play.js.map

@@ -0,0 +1 @@
+{"file":"play.js","mappings":";;AAAA,MAAM,OAAO,GAAG,+BAA+B,CAAC;AAChD,uBAAe,OAAO;;MCMT,QAAQ;;;;qBACK,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QAEE,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC7G,6DAAM,CAAC,EAAC,sBAAsB,EAAC,MAAM,EAAC,MAAM,kBAAc,KAAK,oBAAgB,OAAO,qBAAiB,OAAO,GAAG,CAC7G,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/common/icons/icon.css?tag=play-icon&encapsulation=scoped","src/common/icons/play.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'play-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class PlayIcon {\n  @Prop() width: string = '15';\n  @Prop() height: string = '15';\n\n  render() {\n    return (\n      // Play icon svg\n      <svg width={this.width} height={this.height} viewBox=\"0 0 24 24\" fill=\"auto\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21 12L3 21V3L21 12Z\" stroke=\"auto\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    );\n  }\n}\n"],"version":3}