@nylas/web-elements 1.0.0-prealpha1

package/dist/cjs/nylas-view-thread.cjs.entry.js

@@ -0,0 +1,234 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-34e64e2d.js');
+const registerComponent = require('./register-component-f76b61a6.js');
+const utils = require('./utils-f91d4c73.js');
+
+function renderViewEmail(message, attachments, container, viewEmailElement, parent) {
+    if (!viewEmailElement) {
+        return;
+    }
+    if (!container) {
+        return;
+    }
+    if (container.children.length > 0) {
+        return;
+    }
+    utils.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 }) => (index.h(index.Fragment, null,
+    index.h("div", { key: message.id, class: 'message' },
+        index.h("div", { class: 'sub-header', "data-id": message.data.id, onClick: onMessageClick },
+            index.h("div", { class: 'avatar' }, message.data.from && message.data.from[0]?.name && message.data.from[0]?.name[0]?.toUpperCase()),
+            index.h("div", { class: 'from' },
+                index.h("span", { class: 'name' }, message.data.from && message.data.from[0]?.name),
+                " ",
+                index.h("span", { class: "email" }, message.data.from && message.data.from[0]?.email)),
+            index.h("div", { class: 'date' },
+                new Date(message.data.date * 1000).toLocaleTimeString(undefined, {
+                    timeStyle: 'short',
+                }),
+                ' ',
+                "(",
+                utils.formatTimeAgo(new Date(message.data.date * 1000)),
+                ")"),
+            index.h("sp-button-group", { class: "buttons" },
+                index.h("nylas-summarize-message-button", { message: message.data })),
+            message.collapse && index.h("div", { class: 'snippet' }, message.data.snippet),
+            !message.collapse && message.data.to && (index.h("div", { class: 'to' },
+                index.h("span", null, "to"),
+                " ",
+                utils.formatParticipants(message.data.to),
+                ' ',
+                index.h("button", { type: "button", value: message.data.id, onClick: onShowContactDataClick, class: {
+                        'expand': true,
+                        'expand--showContactData': message.showContactData,
+                    } },
+                    index.h("chevron-icon", null))))),
+        message.showContactData && (index.h("div", { class: 'address-info' },
+            index.h("div", { class: 'label' }, "From"),
+            index.h("div", { class: 'value' }, utils.formatRecipient(message.data?.from ? message?.data?.from[0] : { name: '', email: '' })),
+            message.data.to && (index.h(index.Fragment, null,
+                index.h("div", { class: 'label' }, "To"),
+                index.h("div", { class: 'value' }, message.data.to.map(to => (index.h("div", null, utils.formatRecipient(to))))))),
+            typeof message.data.cc !== 'undefined' && message.data.cc.length > 0 && (index.h(index.Fragment, null,
+                index.h("div", { class: 'label' }, "CC"),
+                index.h("div", { class: 'value' }, message.data.cc.map(cc => (index.h("div", null, utils.formatRecipient(cc))))))))),
+        !message.collapse && viewEmailElement && index.h("div", { key: message.id, ref: el => renderViewEmail(message, attachments, el, viewEmailElement, parent) }),
+        !message.collapse && !viewEmailElement && index.h("nylas-view-email", { key: message.id, message: message.data, parent: parent })),
+    index.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.threadSelected = index.createEvent(this, "threadSelected", 7);
+        this.showContactDataClicked = index.createEvent(this, "showContactDataClicked", 7);
+        this.messageClicked = index.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) {
+                utils.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];
+            }
+            utils.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) {
+                utils.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];
+            }
+            utils.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() {
+        utils.debug(`[nylas-view-thread] Component will load`);
+        this.updateInternalMessages(this.messages);
+        const template = this.host.querySelector('template.nylas-view-email');
+        if (!template) {
+            utils.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) {
+            utils.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() {
+        utils.debug(`[nylas-view-thread] Component did load`);
+    }
+    async threadChanged(thread) {
+        utils.debug(`[nylas-view-thread] Thread changed`, { thread: thread });
+        this.internalMessages = [];
+        const event = this.threadSelected.emit(thread);
+        if (!event.defaultPrevented) {
+            utils.debug(`[nylas-view-thread] Default event not prevented, initializing`);
+        }
+    }
+    updateInternalMessages(messages) {
+        utils.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 (index.h(index.Host, { key: '99b11b1bd476708c89e6284a7d8fda1da9d886ff' }, index.h("sp-theme", { key: '23bc8c7387f08654aa38a187ee0da13e860ad207', scale: "medium", color: "dark" }, index.h("div", { key: 'fd78702832a02c3469dfea1b91aea94282cc566d', class: "view-thread" }, index.h("div", { key: '2405c194d2a7f80802cc25794129496453781445', class: "header" }, index.h("div", { key: 'f69ceef2127c53c38acb2be2033fd1e5b5502aad', class: 'subject' }, this.thread?.subject), index.h("div", { key: '2aceb0fa163a30aaa3e6a8f95b52b6ba0583d904', class: 'folders' }, this.thread?.folders?.map(folder => index.h("sp-tag", { size: "s" }, utils.toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), index.h("div", { key: '33a0f1c33dfd2072681c356a5144eaba7ef9522b', class: "messages" }, fistMessage && (index.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 && (index.h(index.Fragment, null, index.h("div", { class: 'show-more' }, index.h("button", { type: "button", onClick: this.onShowAllEmailsClick }, index.h("span", { class: 'avatar' }, remainingMessages.length), " ", index.h("span", { class: 'sr-only' }, "Show ", remainingMessages.length, " more emails"))), index.h("hr", null))), remainingMessages.length > 0 &&
+            this.showAllEmails &&
+            this.messages.length > 2 &&
+            remainingMessages.map(email => (index.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 => (index.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) && (index.h("div", { class: "reply-buttons" }, index.h("sp-button", { variant: "cta", type: "button", onClick: this.showComposerClick }, index.h("span", { slot: "icon" }, index.h("reply-icon", null)), index.h("span", null, "Reply")), index.h("sp-button", { variant: "cta", type: "button" }, index.h("span", { slot: "icon" }, index.h("reply-all-icon", null)), index.h("span", null, "Reply All")), index.h("sp-button", { variant: "cta", type: "button" }, index.h("span", { slot: "icon" }, index.h("forward-icon", null)), index.h("span", null, "Forward")))), this.showComposer && lastMessage && (index.h("div", { class: "composer" }, index.h("nylas-composer", { message: lastMessage.data, onClose: this.showComposerClick, onSend: e => {
+                utils.debug(`[nylas-view-thread] Send event`, { message: e.detail.message, replyBody: e.detail.replyBody });
+            } })))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "thread": ["threadChanged"],
+        "messages": ["updateInternalMessages"]
+    }; }
+};
+__decorate([
+    registerComponent.RegisterComponent({
+        name: 'nylas-view-thread',
+        stateToProps: new Map([
+            ['mailbox.selectedThread', 'thread'],
+            ['mailbox.messages', 'messages'],
+            ['mailbox.state', 'state'],
+        ]),
+        eventToProps: {
+            threadSelected: async (event, nylasConnector) => {
+                utils.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.prototype, "render", null);
+NylasViewThread.style = NylasViewThreadStyle0;
+
+exports.nylas_view_thread = NylasViewThread;
+
+//# sourceMappingURL=nylas-view-thread.cjs.entry.js.map

package/dist/cjs/nylas-view-thread.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-view-thread.entry.cjs.js","mappings":"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","names":["debug","h","Fragment","formatTimeAgo","formatParticipants","formatRecipient","Host","toTitleCase","RegisterComponent"],"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/cjs/nylas-web-elements.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-34e64e2d.js');
+const appGlobals = require('./app-globals-d58ac016.js');
+
+/*
+ Stencil Client Patch Browser v4.12.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('nylas-web-elements.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  appGlobals.globalScripts();
+  return index.bootstrapLazy([["nylas-scheduler.cjs",[[1,"nylas-scheduler",{"mode":[1],"defaultSchedulerStoreState":[16],"sessionId":[1,"session-id"],"schedulerApiUrl":[1,"scheduler-api-url"],"bookingInfo":[16],"rescheduleId":[1,"reschedule-id"],"eventOverrides":[16],"loadingState":[16],"themeConfig":[16],"automaticComponentRegistration":[32],"selectedDateLabel":[32],"getNylasSchedulerStore":[64],"getNylasSchedulerConnector":[64],"getRef":[64]},[[0,"registerComponent","registerComponentHandler"],[0,"unregisterComponent","unregisterComponentHandler"],[0,"monthChanged","monthChangedHandler"],[0,"detailsConfirmed","bookButtonClickedHandler"],[0,"cancelButtonClicked","cancelButtonClickedHandler"],[0,"dateSelected","selectedDateChanged"]],{"bookingInfo":["bookingInfoChanged"]}]]],["nylas-view-thread.cjs",[[1,"nylas-view-thread",{"draft":[16],"thread":[16],"messages":[16],"attachments":[16],"state":[32],"internalMessages":[32],"showAllEmails":[32],"showComposer":[32]},null,{"thread":["threadChanged"],"messages":["updateInternalMessages"]}]]],["nylas-list-folders.cjs",[[1,"nylas-list-folders",{"folders":[16],"selectedFolder":[1,"selected-folder"],"defaultFolders":[32],"otherFolders":[32]},null,{"folders":["watchFolders"]}]]],["nylas-mailbox-pagination.cjs",[[1,"nylas-mailbox-pagination",{"state":[1],"hasNextPage":[4,"has-next-page"],"hasPreviousPage":[4,"has-previous-page"],"scrollTarget":[1,"scroll-target"],"mobileOnlyInfiniteScroll":[4,"mobile-only-infinite-scroll"],"mobileViewPortWidth":[2,"mobile-view-port-width"],"nextPage":[64],"previousPage":[64]},[[9,"scroll","handlePageScroll"]]]]],["nylas-threads-refresh.cjs",[[1,"nylas-threads-refresh",{"start":[32],"state":[32],"pulling":[32],"updateState":[64]}]]],["nylas-if-state_3.cjs",[[1,"nylas-if-state",{"state":[1],"isStateSet":[4,"is-state-set"],"isBoolean":[4,"is-boolean"],"getStore":[16],"transition":[1],"show":[32],"classes":[32]},null,{"getStore":["onGetStoreChange"]}],[1,"nylas-login",{"isAuthenticated":[4,"is-authenticated"],"nylasConnector":[16],"scopes":[16],"loginMethod":[1,"login-method"],"companyName":[1,"company-name"],"logoUrl":[1,"logo-url"],"logoWidth":[1,"logo-width"],"providers":[1],"buttonText":[1,"button-text"],"email":[32]}],[1,"nylas-mailbox",{"automaticComponentRegistration":[4,"automatic-component-registration"],"eventOverrides":[16],"authConfig":[16],"defaultAuthStoreState":[16],"defaultMailboxStoreState":[16],"getMailboxStore":[64],"getAuthStore":[64],"getNylasAuth":[64],"getNylasMailboxConnector":[64]},[[0,"registerComponent","registerComponentHandler"],[0,"unregisterComponent","unregisterComponentHandler"]]]]],["document-refresh-icon.cjs",[[2,"document-refresh-icon",{"width":[1],"height":[1]}]]],["nylas-list-threads.cjs",[[1,"nylas-list-threads",{"threads":[16],"isAuthenticated":[4,"is-authenticated"],"tokenInfo":[16],"state":[1],"showCheckbox":[4,"show-checkbox"]}]]],["nylas-mailbox-toolbar-button.cjs",[[1,"nylas-mailbox-toolbar-button",{"method":[1],"dataState":[1,"data-state"],"iconOnly":[4,"icon-only"],"mailboxConnector":[16]}]]],["nylas-open-hours-picker.cjs",[[1,"nylas-open-hours-picker",{"openHours":[16],"startTime":[1040],"endTime":[1040],"stepMinutes":[2,"step-minutes"],"dragThreshold":[2,"drag-threshold"],"mobileViewPortWidth":[2,"mobile-view-port-width"],"intervalMinutes":[32],"times":[32],"availableTimes":[32],"draggingStartDate":[32],"draggingEndDate":[32],"inverse":[32],"isMobile":[32]},[[9,"resize","onResize"]],{"openHours":["whenOpenHoursChanged"],"availableTimes":["availableTimesChanged"],"inverse":["inverseChanged"]}]]],["nylas-provider.cjs",[[1,"nylas-provider",{"authConfig":[16],"eventOverrides":[16],"automaticComponentRegistration":[4,"automatic-component-registration"],"getNylasAuth":[64],"getNylasConnector":[64],"getMailboxStore":[64],"getAuthStore":[64],"getNylasSchedulerStore":[64]},[[0,"registerComponent","registerComponentHandler"],[0,"unregisterComponent","unregisterComponentHandler"]]]]],["nylas-threads-search.cjs",[[1,"nylas-threads-search",{"query":[1],"internalQuery":[32]},null,{"query":["onQueryChange"]}]]],["arrow-icon.cjs",[[2,"arrow-icon",{"width":[1],"height":[1]}]]],["calendar-cancel-icon.cjs",[[2,"calendar-cancel-icon",{"width":[1],"height":[1]}]]],["calendar-icon.cjs",[[2,"calendar-icon",{"width":[1],"height":[1]}]]],["refresh-icon.cjs",[[2,"refresh-icon",{"width":[1],"height":[1]}]]],["translate-icon.cjs",[[2,"translate-icon",{"width":[1],"height":[1]}]]],["close-icon_2.cjs",[[2,"close-icon",{"width":[1],"height":[1]}],[2,"warning-icon",{"width":[1],"height":[1]}]]],["play-icon_2.cjs",[[2,"play-icon",{"width":[1],"height":[1]}],[2,"stop-icon",{"width":[1],"height":[1]}]]],["chevron-icon.cjs",[[2,"chevron-icon",{"width":[1],"height":[1]}]]],["globe-icon.cjs",[[2,"globe-icon",{"width":[1],"height":[1]}]]],["loading-icon.cjs",[[1,"loading-icon",{"width":[1],"height":[1]}]]],["bold-icon_3.cjs",[[2,"bold-icon",{"width":[1],"height":[1]}],[2,"italic-icon",{"width":[1],"height":[1]}],[2,"underline-icon",{"width":[1],"height":[1]}]]],["forward-icon_6.cjs",[[1,"nylas-composer",{"message":[16],"viewEmailElement":[16]},null,{"message":["watchBody"]}],[1,"nylas-summarize-message-button",{"message":[16],"state":[32],"updateState":[64],"playAudio":[64]}],[2,"forward-icon",{"width":[1],"height":[1]}],[1,"nylas-view-email",{"message":[16],"parent":[16],"attachments":[16],"detectDarkMode":[4,"detect-dark-mode"],"state":[32],"sanitizedBody":[32],"styles":[32],"viewEmailElement":[32],"hoistedFontURLs":[32]},[[9,"resize","handleScroll"]],{"message":["messageChanged"],"viewEmailElement":["viewEmailElementChanged"]}],[2,"reply-all-icon",{"width":[1],"height":[1]}],[2,"reply-icon",{"width":[1],"height":[1]}]]],["calendar-check-icon_3.cjs",[[2,"calendar-check-icon",{"width":[1],"height":[1]}],[2,"checkmark-circle-icon",{"width":[1],"height":[1]}],[2,"people-icon",{"width":[1],"height":[1]}]]],["archive-icon_7.cjs",[[2,"archive-icon",{"width":[1],"height":[1]}],[2,"folder-icon",{"width":[1],"height":[1]}],[2,"inbox-icon",{"width":[1],"height":[1]}],[2,"sent-icon",{"width":[1],"height":[1]}],[2,"spam-icon",{"width":[1],"height":[1]}],[2,"star-icon",{"width":[1],"height":[1]}],[2,"trash-icon",{"width":[1],"height":[1]}]]],["nylas-booked-event-card_9.cjs",[[1,"nylas-booked-event-card",{"eventInfo":[16],"bookingFlow":[1,"booking-flow"],"bookingInfo":[8,"booking-info"]}],[1,"nylas-locale-switch",{"selectedTimezone":[1025,"selected-timezone"],"selectedLanguage":[1025,"selected-language"]}],[1,"nylas-notification",{"ttl":[2],"allowedCategories":[16],"notifications":[32]},[[16,"nylasSchedulerError","onError"],[16,"nylasSchedulerWarning","onWarning"],[16,"nylasSchedulerInfo","onInfo"],[16,"nylasSchedulerSuccess","onSuccess"]]],[1,"nylas-selected-event-card",{"selectedDate":[16],"selectedTimeslot":[16],"selectedTimezone":[1,"selected-timezone"],"startTime":[32],"endTime":[32]},null,{"selectedTimeslot":["handleSelectedTimeslotChange"]}],[1,"nylas-booking-form",{"bookedEventLoading":[4,"booked-event-loading"],"bookedEventError":[8,"booked-event-error"],"bookingInfo":[8,"booking-info"],"eventInfo":[16],"name":[32],"email":[32],"guestEmails":[32],"isNameValid":[32],"isEmailValid":[32]},null,{"bookingInfo":["bookingInfoChangedHandler"]}],[1,"nylas-cancelled-event-card",{"cancelledEvent":[16]}],[1,"nylas-date-picker",{"selectableDates":[16],"selectedDate":[16],"loadingState":[8,"loading-state"],"month":[32],"dates":[32]}],[2,"nylas-logo",{"width":[1],"height":[1]}],[1,"nylas-timeslot-picker",{"selectedDate":[16],"availability":[16],"selectedTimeslot":[16],"loadingState":[16],"selectedTimezone":[1,"selected-timezone"],"times":[32],"hoveredTimeslotIndex":[32],"selectedTimeslotIndex":[32]},null,{"selectedDate":["selectedDateChanged"],"availability":["availabilityChanged"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+
+//# sourceMappingURL=nylas-web-elements.cjs.js.map

package/dist/cjs/nylas-web-elements.cjs.js.map

@@ -0,0 +1 @@
+{"file":"nylas-web-elements.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,oNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAC/B,EAAEC,wBAAa,EAAE,CAAC;AAClB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@4.12.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.12.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/cjs/play-icon_2.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-34e64e2d.js');
+
+const iconCss$1 = ".sc-play-icon-h{display:flex}";
+const PlayIconStyle0 = iconCss$1;
+
+const PlayIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.width = '15';
+        this.height = '15';
+    }
+    render() {
+        return (index.h("svg", { key: '5f4b005784b461f0f7c5da20c0a3b3289f51100a', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '88fbd7a18f4e3f5e88cf134246af8d319d309352', d: "M21 12L3 21V3L21 12Z", stroke: "auto", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+};
+PlayIcon.style = PlayIconStyle0;
+
+const iconCss = ".sc-stop-icon-h{display:flex}";
+const StopIconStyle0 = iconCss;
+
+const StopIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.width = '15';
+        this.height = '15';
+    }
+    render() {
+        return (index.h("svg", { key: '1738ceb2d3e19179e090b1e8788cf71248abe6da', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '22daa75c459a24bb2d8af5784e306eb87aa4f98a', d: "M4 4H20V20H4V4Z", stroke: "auto", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+};
+StopIcon.style = StopIconStyle0;
+
+exports.play_icon = PlayIcon;
+exports.stop_icon = StopIcon;
+
+//# sourceMappingURL=play-icon_2.cjs.entry.js.map

package/dist/cjs/play-icon_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"play-icon.stop-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAMA,SAAO,GAAG,+BAA+B,CAAC;AAChD,uBAAeA,SAAO;;MCMT,QAAQ;;;qBACK,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QAEEC,kEAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC7GA,mEAAM,CAAC,EAAC,sBAAsB,EAAC,MAAM,EAAC,MAAM,kBAAc,KAAK,oBAAgB,OAAO,qBAAiB,OAAO,GAAG,CAC7G,EACN;KACH;;;;AClBH,MAAM,OAAO,GAAG,+BAA+B,CAAC;AAChD,uBAAe,OAAO;;MCMT,QAAQ;;;qBACK,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QAEEA,kEAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC7GA,mEAAM,CAAC,EAAC,iBAAiB,EAAC,MAAM,EAAC,MAAM,kBAAc,KAAK,oBAAgB,OAAO,qBAAiB,OAAO,GAAG,CACxG,EACN;KACH;;;;;;;","names":["iconCss","h"],"sources":["src/common/icons/icon.css?tag=play-icon&encapsulation=scoped","src/common/icons/play.tsx","src/common/icons/icon.css?tag=stop-icon&encapsulation=scoped","src/common/icons/stop.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",":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'stop-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class StopIcon {\n  @Prop() width: string = '15';\n  @Prop() height: string = '15';\n\n  render() {\n    return (\n      // Stop 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=\"M4 4H20V20H4V4Z\" stroke=\"auto\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/property-d934a711.js

@@ -0,0 +1,47 @@
+'use strict';
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=window,e$3=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),n$4=new WeakMap;class o$3{constructor(t,e,n){if(this._$cssResult$=!0,n!==s$3)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=n$4.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n$4.set(s,t));}return t}toString(){return this.cssText}}const r$2=t=>new o$3("string"==typeof t?t:t+"",void 0,s$3),i$2=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[n+1]),t[0]);return new o$3(n,t,s$3)},S$1=(s,n)=>{e$3?s.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((e=>{const n=document.createElement("style"),o=t$1.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=e.cssText,s.appendChild(n);}));},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var s$2;const e$2=window,r$1=e$2.trustedTypes,h$1=r$1?r$1.emptyScript:"",o$2=e$2.reactiveElementPolyfillSupport,n$3={toAttribute(t,i){switch(i){case Boolean:t=t?h$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a$1=(t,i)=>i!==t&&(i==i||t==t),l$2={attribute:!0,type:String,converter:n$3,reflect:!1,hasChanged:a$1},d$1="finalized";class u$1 extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu();}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$2){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$2}static finalize(){if(this.hasOwnProperty(d$1))return !1;this[d$1]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c$1(i));}else void 0!==i&&s.push(c$1(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S$1(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$2){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$3).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$3;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a$1)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}}u$1[d$1]=!0,u$1.elementProperties=new Map,u$1.elementStyles=[],u$1.shadowRootOptions={mode:"open"},null==o$2||o$2({ReactiveElement:u$1}),(null!==(s$2=e$2.reactiveElementVersions)&&void 0!==s$2?s$2:e$2.reactiveElementVersions=[]).push("1.6.3");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var t;const i$1=window,s$1=i$1.trustedTypes,e$1=s$1?s$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$1="$lit$",n$2=`lit$${(Math.random()+"").slice(9)}$`,l$1="?"+n$2,h=`<${l$1}>`,r=document,u=()=>r.createComment(""),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,c=Array.isArray,v=t=>c(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),a="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,w=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=w(1),b=w(2),T=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),E=new WeakMap,C=r.createTreeWalker(r,129,null,!1);function P(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$1?e$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,e=[];let l,r=2===i?"<svg>":"",u=f;for(let i=0;i<s;i++){const s=t[i];let d,c,v=-1,a=0;for(;a<s.length&&(u.lastIndex=a,c=u.exec(s),null!==c);)a=u.lastIndex,u===f?"!--"===c[1]?u=_:void 0!==c[1]?u=m:void 0!==c[2]?(y.test(c[2])&&(l=RegExp("</"+c[2],"g")),u=p):void 0!==c[3]&&(u=p):u===p?">"===c[0]?(u=null!=l?l:f,v=-1):void 0===c[1]?v=-2:(v=u.lastIndex-c[2].length,d=c[1],u=void 0===c[3]?p:'"'===c[3]?$:g):u===$||u===g?u=p:u===_||u===m?u=f:(u=p,l=void 0);const w=u===p&&t[i+1].startsWith("/>")?" ":"";r+=u===f?s+h:v>=0?(e.push(d),s.slice(0,v)+o$1+s.slice(v)+n$2+w):s+n$2+(-2===v?(e.push(void 0),i):w);}return [P(t,r+(t[s]||"<?>")+(2===i?"</svg>":"")),e]};class N{constructor({strings:t,_$litType$:i},e){let h;this.parts=[];let r=0,d=0;const c=t.length-1,v=this.parts,[a,f]=V(t,i);if(this.el=N.createElement(a,e),C.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(h=C.nextNode())&&v.length<c;){if(1===h.nodeType){if(h.hasAttributes()){const t=[];for(const i of h.getAttributeNames())if(i.endsWith(o$1)||i.startsWith(n$2)){const s=f[d++];if(t.push(i),void 0!==s){const t=h.getAttribute(s.toLowerCase()+o$1).split(n$2),i=/([.?@])?(.*)/.exec(s);v.push({type:1,index:r,name:i[2],strings:t,ctor:"."===i[1]?H:"?"===i[1]?L:"@"===i[1]?z:k});}else v.push({type:6,index:r});}for(const i of t)h.removeAttribute(i);}if(y.test(h.tagName)){const t=h.textContent.split(n$2),i=t.length-1;if(i>0){h.textContent=s$1?s$1.emptyScript:"";for(let s=0;s<i;s++)h.append(t[s],u()),C.nextNode(),v.push({type:2,index:++r});h.append(t[i],u());}}}else if(8===h.nodeType)if(h.data===l$1)v.push({type:2,index:r});else {let t=-1;for(;-1!==(t=h.data.indexOf(n$2,t+1));)v.push({type:7,index:r}),t+=n$2.length-1;}r++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){var o,n,l,h;if(i===T)return i;let r=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const u=d(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==u&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===u?r=void 0:(r=new u(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Co)&&void 0!==l?l:h._$Co=[])[e]=r:s._$Cl=r),void 0!==r&&(i=S(t,r._$AS(t,i.values),r,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:r).importNode(s,!0);C.currentNode=o;let n=C.nextNode(),l=0,h=0,u=e[0];for(;void 0!==u;){if(l===u.index){let i;2===u.type?i=new R(n,n.nextSibling,this,t):1===u.type?i=new u.ctor(n,u.name,u.strings,this,t):6===u.type&&(i=new Z(n,this,t)),this._$AV.push(i),u=e[++h];}l!==(null==u?void 0:u.index)&&(n=C.nextNode(),l++);}return C.currentNode=r,o}v(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{constructor(t,i,s,e){var o;this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cp=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),d(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):v(t)?this.T(t):this._(t);}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t));}_(t){this._$AH!==A&&d(this._$AH)?this._$AA.nextSibling.data=t:this.$(r.createTextNode(t)),this._$AH=t;}g(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=N.createElement(P(e.h,e.h[0]),this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(s);else {const t=new M(o,this),i=t.u(this.options);t.v(s),this.$(i),this._$AH=t;}}_$AC(t){let i=E.get(t.strings);return void 0===i&&E.set(t.strings,i=new N(t)),i}T(t){c(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new R(this.k(u()),this.k(u()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class k{constructor(t,i,s,e,o){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=S(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==T,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=S(this,e[s+l],i,l),h===T&&(h=this._$AH[l]),n||(n=!d(h)||h!==this._$AH[l]),h===A?t=A:t!==A&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}const I=s$1?s$1.emptyScript:"";class L extends k{constructor(){super(...arguments),this.type=4;}j(t){t&&t!==A?this.element.setAttribute(this.name,I):this.element.removeAttribute(this.name);}}class z extends k{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=S(this,t,i,0))&&void 0!==s?s:A)===T)return;const e=this._$AH,o=t===A&&e!==A||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==A&&(e===A||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j={O:o$1,P:n$2,A:l$1,C:1,M:V,L:M,R:v,D:S,I:R,V:k,H:L,N:z,U:H,F:Z},B=i$1.litHtmlPolyfillSupport;null==B||B(N,R),(null!==(t=i$1.litHtmlVersions)&&void 0!==t?t:i$1.litHtmlVersions=[]).push("2.8.0");const D=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new R(i.insertBefore(u(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var l,o;class s extends u$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return T}}s.finalized=!0,s._$litElement$=!0,null===(l=globalThis.litElementHydrateSupport)||void 0===l||l.call(globalThis,{LitElement:s});const n$1=globalThis.litElementPolyfillSupport;null==n$1||n$1({LitElement:s});(null!==(o=globalThis.litElementVersions)&&void 0!==o?o:globalThis.litElementVersions=[]).push("3.3.3");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}},e=(i,e,n)=>{e.constructor.createProperty(n,i);};function n(n){return (t,o)=>void 0!==o?e(n,t,o):i(n,t)}
+
+exports.A = A;
+exports.D = D;
+exports.T = T;
+exports.b = b;
+exports.e = e$3;
+exports.i = i$2;
+exports.j = j;
+exports.n = n;
+exports.s = s;
+exports.x = x;
+
+//# sourceMappingURL=property-d934a711.js.map