@nylas/web-elements 1.1.0-canary.4 → 1.1.0-canary.7

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

@@ -127,7 +127,7 @@ export class NylasComposer {
         this.editorEl.focus();
     }
     render() {
-        return (h(Host, { key: '89cdb2c6c606698704a06507ddbe301a37134ca4' }, h("sp-theme", { key: '4946560c2ab8518e5172e506caf36fa98fbc3912', scale: "medium", color: "dark" }, h("div", { key: 'b21a8843aaebb1fd4169ce2b849fb801bce46df4', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '830a97d7947b65c0312630184d539d4f8c7a48eb', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '2fb11d997b13e4ec6e700155e3001d30f52bb217', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '5c4fd64a8a3ccb94f36675047c05a662a1846426', slot: "icon" }, h("bold-icon", { key: '033043849fddd392bc078dbb2fd843f6701c0501' })), h("div", { key: '585b08407297a97e3214d716505331f0889ea68f', slot: "label" }, "Bold")), h("sp-button", { key: 'b01e3c9c40fbe11122ca7be4b5120ba19262e1d5', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'e407e888cb414fc4e5b15e9d21349038c7871f83', slot: "icon" }, h("underline-icon", { key: '838cf6c3b7b42708b5ed6e5c53072cda29043f40' })), h("div", { key: 'c662e1cefa352cb8910050a77e5b0a2e18de6bed', slot: "label" }, "Underline")), h("sp-button", { key: '7e39fdbbdaeafabf1de93f42758f3b499c70206b', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: '8d7c7be8cf3959726b7541ed64e4e41995461258', slot: "icon" }, h("italic-icon", { key: 'ae07a6648728e3f9720dfdc3e3f91e8e4cbf86d9' })), h("div", { key: 'fc3fc026d47610df27752ec8a310db99e280014c', slot: "label" }, "Italic")))), h("div", { key: '9d4abb27a5d5a6b2c884da58191ca8f014e9ab43', class: 'buttons' }, h("sp-button", { key: '43f2b6d9a4a6d5513eb6fd52fb8f68f416077b37', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'fbae8e0490814b13347e3cc09bfd922ff5fceb43', onClick: this.closeComposer, class: "close" }, "Close")))));
+        return (h(Host, { key: '8d7f9c145099757c2a8dc48f1d2a223831f82cda' }, h("sp-theme", { key: 'e92e457e86701838f55d97b3f2c1c0f70f14bf59', scale: "medium", color: "dark" }, h("div", { key: '50eba2b6ee0c84d8eeb392385872604b74b11025', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '38bdd2ec58e62699e2c604b1b2c586cb5ecf105a', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '6415e5f9910a2d9798e7c85162329f359e500aeb', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: 'e03cfe0f5736836f64aa350165fa519508e212f7', slot: "icon" }, h("bold-icon", { key: '1ad03230cff2f0843d6da22153716c3818ed04f7' })), h("div", { key: 'd90c50aff88b9ac7774d6792b91ea3ced21f4419', slot: "label" }, "Bold")), h("sp-button", { key: '466621fcdf2e8e1e85b613bba82b948ed2177a88', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: '6be0737cf685b02f3ee8ef7c34fd18674793af00', slot: "icon" }, h("underline-icon", { key: '278b1b79d3aec25ab2c2181c3e5c631063b04e29' })), h("div", { key: '169d3039815082e208eb476b4490181f7eb54ee6', slot: "label" }, "Underline")), h("sp-button", { key: '92c20b2d03b709f08c63af3a1e88b10e407243d7', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: '67eb3d5b5a2118d90bfb81c7b51d52c41b5ab2a2', slot: "icon" }, h("italic-icon", { key: '35ac96f9ff3f3f0c38c7e486092f42dc9451eb63' })), h("div", { key: 'f29fe84363cca6e178a3651a1c8e56929ebb3e32', slot: "label" }, "Italic")))), h("div", { key: '3d89b191642ab291fc338ffd66be16fe999950b1', class: 'buttons' }, h("sp-button", { key: 'f78c122acf4c69c788d411d2dcfd49649c99919e', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'b46873c911cb796e9af22eb7d19bf6e1cd2cd1be', onClick: this.closeComposer, class: "close" }, "Close")))));
     }
     static get is() { return "nylas-composer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class NylasListFolders {
         }
     }
     render() {
-        return (h(Host, { key: '216a4856e0e4484bd21a13c8b52f60056838e355' }, h("div", { key: '3dfa827f612e13c3abec08c7e50a3f52ece2f677', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+        return (h(Host, { key: '222ae81308d17cbdc7c3a44f0902fc683c88da1d' }, h("div", { key: '5ac1653c3b9ea1e3712e7597becc4d38435f3fa1', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
                 folder: true,
                 selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),
             } }, h("div", { slot: "icon", class: "icon" }, this.getFolderIcon(folder)), this.formatFolderName(folder))))), this.otherFolders && (h(Fragment, null, h("hr", null), h("div", { class: "folders" }, this.otherFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {

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

@@ -43,7 +43,7 @@ export class NylasListThreads {
         debug(`[nylas-list-threads] Component did load`, { isAuthenticated: this.isAuthenticated });
     }
     render() {
-        return (h(Host, { key: '4cd99954b325347a5bcf2fdda5440224f188ca4d' }, h("div", { key: '876dd6bf8cd63ce8c8ca9894559b32b3c5885597', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
+        return (h(Host, { key: 'f943d924f47f9e1133bf87fcd32ee78e5b9bbf01' }, h("div", { key: '2159737dbb20305da9f966959d9da7a1830b9b2b', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
             this.threads.map(thread => (h("button", { key: thread?.id, class: {
                     'thread': true,
                     'unread': thread?.unread === true,

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

@@ -119,7 +119,7 @@ export class NylasMailbox {
         return this.nylasMailboxConnector;
     }
     render() {
-        return (h(Host, { key: 'c60eb0c2f7929884b9ac702c50451ab6e09a2b6c' }, h("slot", { key: '7c5e0f6dfb81b7e3e4dd67a700b78e1143e2bf53' })));
+        return (h(Host, { key: '662c4d3f763c5cf9db31c4d2ba26bcdf47ead164' }, h("slot", { key: '5c2b75a569779dd2af6388648a4304721e82ba76' })));
     }
     static get is() { return "nylas-mailbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.js

@@ -70,7 +70,7 @@ export class NylasMailboxToolbarButton {
             state = this.dataState ? store.get(storeKey) === 'loading' : false;
         }
         const key = state ? `state-loading` : 'state-ready';
-        return (h(Host, { key: 'bc4a3e76b0b9ea32d5c640b6ef5944bc45edb2b1' }, h("sp-theme", { key: 'c52ad12f24b96ca8ee1da8f026db2441ae87d40e', scale: "medium", color: "dark" }, h("sp-button", { onClick: this.onClick, disabled: state, key: key, "icon-only": this.iconOnly, label: this.renderByState(state) }, this.hasSlot('icon') && (h("div", { slot: "icon", class: 'slot' }, h("slot", { name: "icon" }))), !this.iconOnly && this.renderByState(state)))));
+        return (h(Host, { key: '2454ef2e4270d1642cabe57dacf53908fcdb34e6' }, h("sp-theme", { key: '97d71094fabc3466b87142dfdd1d0bb22659fd32', scale: "medium", color: "dark" }, h("sp-button", { onClick: this.onClick, disabled: state, key: key, "icon-only": this.iconOnly, label: this.renderByState(state) }, this.hasSlot('icon') && (h("div", { slot: "icon", class: 'slot' }, h("slot", { name: "icon" }))), !this.iconOnly && this.renderByState(state)))));
     }
     static get is() { return "nylas-mailbox-toolbar-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.js

@@ -146,12 +146,12 @@ export class NylasSummarizeMessageButton {
         });
     }
     render() {
-        return (h(Host, { key: 'b14f3bab7ebd190d54a66a3e00704f9e4b147a8f' }, h("sp-theme", { key: '3a5b0782c84bbc7dba7b15306d608b885b5a6edc', scale: "medium", color: "dark" }, h("sp-button", { key: 'd63121e6f80bd09f1e7ca35e1176aa3a070517b3', label: "Summarize email", "icon-only": true, onClickCapture: this.onClick, class: {
+        return (h(Host, { key: '09d693158ce9480c000957afe31566d47f6fb5f2' }, h("sp-theme", { key: '21f246783a3d5786c1cee8f438e89947ee5f574d', scale: "medium", color: "dark" }, h("sp-button", { key: '7ef9c60895da162d3b521ddc7c070ff463e51094', label: "Summarize email", "icon-only": true, onClickCapture: this.onClick, class: {
                 'summarize-button': true,
                 'stopped': this.state === 'stopped',
                 'loading': this.state === 'loading',
                 'playing': this.state === 'playing',
-            } }, this.state === 'stopped' && h("play-icon", null), this.state === 'loading' && h("loading-icon", null), this.state === 'playing' && h("stop-icon", null)), h("audio", { key: '954be0517a3b7328149830b2058d073ae9da591d', ref: r => (this.audioRef = r), autoPlay: true, onPlaying: () => (this.state = 'playing'), onPause: () => (this.state = 'stopped'), onEnded: () => {
+            } }, this.state === 'stopped' && h("play-icon", null), this.state === 'loading' && h("loading-icon", null), this.state === 'playing' && h("stop-icon", null)), h("audio", { key: '7481ceeb62b6eb21c627d0e04be0e0e7a9e986ec', ref: r => (this.audioRef = r), autoPlay: true, onPlaying: () => (this.state = 'playing'), onPause: () => (this.state = 'stopped'), onEnded: () => {
                 this.state = 'stopped';
                 debug(`[nylas-summarize-message-button] Audio ended`);
             } }))));

package/dist/collection/components/mailbox/nylas-threads-refresh/nylas-threads-refresh.js

@@ -76,11 +76,11 @@ export class NylasThreadsRefresh {
         this.state = state;
     }
     render() {
-        return (h(Host, { key: '8b1c69762b81b03cbe942f980fd7c3f2c861a72e' }, h("div", { key: 'f79595227147faeb6fe37c4928f0f9e715c7870c', class: "container", ref: r => (this.containerElement = r) }, h("button", { key: 'e897c025006514ffff9a0c799b7716ec17c3febb', class: {
+        return (h(Host, { key: '9027360ae546f7cb1cf5c1e8f977d2e8f85eb3fd' }, h("div", { key: '7bf8bf464971f8669d6cb1fc31c478ed29fbda63', class: "container", ref: r => (this.containerElement = r) }, h("button", { key: 'af4dc6f3ec1e45554f13f0dbee2945a7b60acc6c', class: {
                 'pull-to-refresh': true,
                 'pulling': this.pulling,
                 'refreshing': this.state === 'loading',
-            }, "aria-label": "Refreshing..." }, this.state === 'loading' && h("refresh-icon", { slot: "icon" }), this.state !== 'loading' && h("arrow-icon", { slot: "icon" })), h("div", { key: 'ba683ed78ab4c0a4131ec319abb4322de618e6d7', class: "content", ref: r => (this.contentElement = r) }, h("slot", { key: '3111550c7d75d3d610394ed0c8a64b5a520d092c' })))));
+            }, "aria-label": "Refreshing..." }, this.state === 'loading' && h("refresh-icon", { slot: "icon" }), this.state !== 'loading' && h("arrow-icon", { slot: "icon" })), h("div", { key: 'd2bceb3b11369e03a9eefa80f983f341bae71239', class: "content", ref: r => (this.contentElement = r) }, h("slot", { key: 'c88b393187aa10285fd940d11bf7b792ac4dbf14' })))));
     }
     static get is() { return "nylas-threads-refresh"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-threads-search/nylas-threads-search.js

@@ -43,7 +43,7 @@ export class NylasThreadsSearch {
         this.internalQuery = this.query;
     }
     render() {
-        return (h(Host, { key: '4273fc9982039d507cadbc07c36b1eb67fa1c087' }, h("sp-theme", { key: 'a78cf6506d82e5cfd91ecbacccb1580be3693c89', scale: "medium", color: "dark" }, h("sp-search", { key: '1ca66aa0b045344ab4fdf003681923a389980c29', quiet: true, onSubmit: this.onSearch, onBlur: this.onSearch, value: this.internalQuery }))));
+        return (h(Host, { key: '9e91a330bea4dc84fa96070591e95926f52ee0bb' }, h("sp-theme", { key: '6d1df81ced09a5b721d8f161e40450633ae2cd98', scale: "medium", color: "dark" }, h("sp-search", { key: 'cb81bba4b4f1d279f1fd48bda9a2fb003cb65fcd', quiet: true, onSubmit: this.onSearch, onBlur: this.onSearch, value: this.internalQuery }))));
     }
     static get is() { return "nylas-threads-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -151,7 +151,7 @@ export class NylasViewEmail {
     }
     render() {
         console.debug(`[nylas-view-email] render`, { hoistedFontURLs: this.hoistedFontURLs });
-        return (h(Host, { key: '5209aa3727b4c8013cec3ee0a33afdb38e9925d9' }, this.state === 'loading' && h("div", null, "Loading..."), this.state === 'ready' && (h(Fragment, null, this.styles.map(style => (h("style", null, DOMPurify.sanitize(style.innerHTML)))), h("div", { class: 'view-email', part: "view-email", innerHTML: this.sanitizedBody, ref: el => (this.viewEmailElement = el) })))));
+        return (h(Host, { key: 'fe606c06674789e63156056d8b71a5cb2202cf47' }, this.state === 'loading' && h("div", null, "Loading..."), this.state === 'ready' && (h(Fragment, null, this.styles.map(style => (h("style", null, DOMPurify.sanitize(style.innerHTML)))), h("div", { class: 'view-email', part: "view-email", innerHTML: this.sanitizedBody, ref: el => (this.viewEmailElement = el) })))));
     }
     static get is() { return "nylas-view-email"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,7 +121,7 @@ export class NylasViewThread {
         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: '836293c4ebe84588af8bc245f79ef45548d99d64' }, h("sp-theme", { key: '7d66ec6cb6d487a0f454ee27d81c20e41e5f7649', scale: "medium", color: "dark" }, h("div", { key: 'd70c54528874a783aa31c8c16aa2023d08a14da1', class: "view-thread" }, h("div", { key: 'd1de0e04665f48d83fa2e913f9c48beea42e2149', class: "header" }, h("div", { key: 'a08529d41372857db86f3abfaed8a2d5f7898392', class: 'subject' }, this.thread?.subject), h("div", { key: 'e26cddf45f1ff869837184f136ce44225911aca9', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '03d81b5879b0003b991f1b34f78961358008324c', 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 &&
+        return (h(Host, { key: '08d6981bb00f24f18212060a784da5ec7129197e' }, h("sp-theme", { key: '0f7f54486f61beb490fc96a0f84753868ef384aa', scale: "medium", color: "dark" }, h("div", { key: '9aad086eae2344a6d0d28b1fb4fb39921dcf53f0', class: "view-thread" }, h("div", { key: 'fcef6cd0bfed78b7d6f9df5a2a8719a32b1e294f', class: "header" }, h("div", { key: '0673aebc8626e082deb3f0a9b9eb9c18a1841349', class: 'subject' }, this.thread?.subject), h("div", { key: '10ee64da01595dcb658f99b9a8d90c1fe9237816', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '469007a98202e151206e4ac329956882f069b618', 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 &&

package/dist/collection/components/nylas-login/nylas-login.js

@@ -69,7 +69,7 @@ export class NylasLogin {
     }
     render() {
         const splitProviders = this.providers?.split(',') || [];
-        return (h(Host, { key: 'bff99d93c49f3a70e4e8f28ea97082853af37be0' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
+        return (h(Host, { key: '124b2f41ebcd01e13b0c031a1240120835610fbb' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
                 minWidth: this.logoWidth,
             } }), h("h1", null, "Welcome")), h("p", null, "Log in to your account to continue to ", this.companyName), h("div", { class: "login-methods" }, splitProviders.includes('google') && (h("button", { class: "login-google", onClick: this._onGoogleButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 256 262" }, h("path", { fill: "#4285F4", d: "M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z" }), h("path", { fill: "#34A853", d: "M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z" }), h("path", { fill: "#FBBC05", d: "M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z" }), h("path", { fill: "#EA4335", d: "M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z" })), "Continue with Google")), splitProviders.includes('microsoft') && (h("button", { class: "login-microsoft", onClick: this._onMicrosoftButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 448 512" }, h("path", { fill: "#F3F3F3", d: "M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z" })), "Continue with Microsoft"))), h("form", { class: "login-form", method: "POST", onSubmit: this._onFormSubmit }, h("label", { htmlFor: "email" }, "Email"), h("input", { type: "email", id: "email", name: "email", required: true, value: this.email }), h("button", { type: "submit" }, "Next")))))));
     }

package/dist/collection/components/nylas-provider/nylas-provider.js

@@ -101,7 +101,7 @@ export class NylasProvider {
         return this.baseProvider?.getStore('schedulerConfig');
     }
     render() {
-        return (h(Host, { key: 'cf7646d512fe6614ad4a73ac63c3581f20af1ab2' }, h("slot", { key: 'bf17dda1b22695e9862a549866fcd140b5d2e0db' })));
+        return (h(Host, { key: '782d47608825fb870d87153c8d43d778dc6c2b87' }, h("slot", { key: '2b01537d9d4a0cf4c81ad0b77ce3e6d761f3e1db' })));
     }
     static get is() { return "nylas-provider"; }
     static get encapsulation() { return "shadow"; }
@@ -425,7 +425,7 @@ export class NylasProvider {
                             "id": "src/stores/scheduler-config-store.ts::NylasSchedulerConfigStoreType"
                         }
                     },
-                    "return": "Promise<ObservableMap<NylasSchedulerConfigStoreState> | undefined>"
+                    "return": "Promise<CreateNylasSchedulerConfigStoreReturnType | undefined>"
                 },
                 "docs": {
                     "text": "This method is used to retrieve the NylasSchedulerConfig instance",

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-booked-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  private getOrganizer = (eventInfo: NylasEvent) => {\n    const organizer = eventInfo?.organizer;\n    return organizer;\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email}&nbsp;&amp;&nbsp;\n                {this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-booked-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  private getOrganizer = (eventInfo: NylasEvent) => {\n    const organizer = eventInfo?.organizer;\n    return organizer;\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email}&nbsp;&amp;&nbsp;\n                {this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.js

@@ -54,7 +54,7 @@ export class NylasCancelBookingForm {
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '3e77b83049c0b9cd2ed968cc97e665017f76837e', part: "ncec" }, h("sp-theme", { key: '857ac295df09b0f642eb1e9d01021531b935c7ad', theme: "spectrum", scale: "medium" }, h("div", { key: '9f52787bc3efc81618e5eac14219c5674f4efe5a', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '07ddd2cd5664aacf4e123d822bde07af562a8571', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '04ccbf1eb7ccd7d9053265e1991f8fd494b7e4ae' })), h("h3", { key: '2fdbd40021dae8eb98e4288793af8719d3cc6226', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '3af3918de0c111bcf90f6ad44a468efdcab185ac', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: '7e136e261b22e513b395e47dfc2db696aced945f', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'fa566625fafbc74f98bb7c012dcb1c71093c0227', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: 'fb567a86677bfc33c63b6118ed9ce71eed7a5084', class: "required" }, "*")), h("sp-textfield", { key: 'c585d1f070700a4ccb39d52fdc7dba764c19d43f', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: 'cf6d0e82b648ee662fa9244a793cfcaa64913c4c', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'b8e17a34e57faaaa61585ea4beb2205537c38c49', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'eafb068d14d0680d8ea5cd7e42fd358d3582e99a', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
+        return (h(Host, { key: '98dc29d53d8a05beb16dea271cab5c574df4dfd0', part: "ncec" }, h("sp-theme", { key: '04feb774090fb57270a3d3c05576687ec78c230d', theme: "spectrum", scale: "medium" }, h("div", { key: '024a947c805b9f2ab6204a8548e9c775078fa969', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '93295919797719199fbbe6eccdef4e42045c330d', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'b8da092aa626ebdef64dd3f2f54ca2df5082d1f3' })), h("h3", { key: '8e33cc23c5bc26aa8e5c979814fa5a398c798237', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '2c8cd37241e6cfe38bb012be4d700ae03c33876e', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: 'be720382bd84086cd8a25279dd4ec58dbfc113e6', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'fadd2793a898975b8ba8da0549bcbb37879a68bf', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: '0748781625ea7ec8332b4ca20eae8986ad9e8efb', class: "required" }, "*")), h("sp-textfield", { key: 'e8daf40a5c26b1e6b9b59ab42bbe613da72c987a', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: 'f876e2f41098845a235fe2b563e85891843d5351', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'a05211715fda7fa75935c974bd20ce6c6ef4206a', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: '3dd7832e698181eaca4df52835d64c09b664f5f9', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
     }
     static get is() { return "nylas-cancel-booking-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.js

@@ -35,7 +35,7 @@ export class NylasCancelledEventCard {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '52b1d729c8df61770be08c165665671f54189c9a', part: "ncec" }, h("sp-theme", { key: '94633560e146be20b9321e9548edb007bf570e1c', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'a18a0006aa5e84e58daa6f9446e2b85908867196', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '67cc5524db58cb7777feaf9b249070e5d713b17b', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '87b0379d4847388505e4f6ddd62d059af9156303' })), h("h3", { key: 'b7d36ece20f5926c8bb2d0e796a35ed44772e8cf', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '808a6cdf14cec2782990c85e06c23e5b9936bc56', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: 'cfd161ea961c637ab2247a568143e659bfb1b7da', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: 'ab549c146571e0dd4e86cce46d9947875794a437', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
+        return (h(Host, { key: '656dd5537bf436780d779e06362974295b6cf552', part: "ncec" }, h("sp-theme", { key: 'e6aa25eb233fd0bca7006fd9bf63c9fb54738a66', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '005da251e2cad861ca1cb2bc276b01990618995f', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'b30f8abc7dede57b909d69beb11a7da0015bf044', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9cc6e10a041979ff5a2a76c9d3e04446fdbfa27f' })), h("h3", { key: '0419fbe2aad08be631618146b77869307832f752', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: 'c3fb84c05112e0a4055f6eaaf878ad7afda8726e', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: '0409b5465346ffea4c43789fa027f9b5a853d263', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '1d2efade3b5cd5ff48f3924c6b1e8248d2e478a3', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
     }
     static get is() { return "nylas-cancelled-event-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler/nylas-notification/nylas-notification.js

@@ -47,7 +47,7 @@ export class NylasNotification {
         this.notifications = this.notifications.filter(notif => notif.id !== id);
     }
     render() {
-        return (h(Host, { key: '947c58f3617a73e55731cc6f6c03c1931008d000' }, h(Fragment, { key: 'd84045b56a35c322a194e4bf4c9d3982a5ce6d32' }, this.notifications.map(notif => (h("div", { class: `notif ${notif.type}`, key: notif.id }, h("div", { class: "content" }, h("span", { class: `icon ${notif.type}` }, (notif.type === 'error' || notif.type === 'warning') && h("warning-icon", null)), h("span", { class: "message" }, h("span", { class: "title" }, notif.title), notif.description && h("span", { class: "description" }, notif.description))), h("button", { class: "dismiss-btn", onClick: () => this.dismissNotification(notif.id) }, h("close-icon", null))))), h("slot", { key: 'e246e847f46fe0d99370eb909cc89a3546186089' }))));
+        return (h(Host, { key: '16bd673245819e3ed76ba5689c3292be510e3cd7' }, h(Fragment, { key: 'd88e8ea863d00a8c982c7e26007c975526c7457f' }, this.notifications.map(notif => (h("div", { class: `notif ${notif.type}`, key: notif.id }, h("div", { class: "content" }, h("span", { class: `icon ${notif.type}` }, (notif.type === 'error' || notif.type === 'warning') && h("warning-icon", null)), h("span", { class: "message" }, h("span", { class: "title" }, notif.title), notif.description && h("span", { class: "description" }, notif.description))), h("button", { class: "dismiss-btn", onClick: () => this.dismissNotification(notif.id) }, h("close-icon", null))))), h("slot", { key: 'c40cb61ce0a1dbd3416824b7c26e08e3aea01eae' }))));
     }
     static get is() { return "nylas-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.js

@@ -63,7 +63,7 @@ export class NylasAdditionalParticipants {
         this.internals.setFormValue(JSON.stringify(this.participants), 'participants');
     }
     render() {
-        return (h(Host, { key: 'cc6d22c88c41ea406313ab95ec7f90a38704fc5b' }, h("nylas-form-card", { key: '033b0b3497b62ee3a17ee8f480a332d6103f143e' }, h("h3", { key: 'e88c9a1e05adda093bb0b1a1a85f7c3f36d69684', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), h("p", { key: 'aab3da584eecd3437e7d93fc726d1e8718bd066c', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: '0a4d920d8ea788eca41e2fb46b532df4614925b6', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '9aa1c1e851de4e73b97c022f7eed52c91b8c826f' }, this.participants.map((participant, index) => {
+        return (h(Host, { key: '2cee2dd98939f98fdfc950f609fce3f6045ced9f' }, h("nylas-form-card", { key: 'e587c19e99fa1b40c9d876123fd50cde51e8882c' }, h("h3", { key: '6c4a90291f5918e98d62e03b599619ff4f345391', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), h("p", { key: 'ad4fac5ca4cdb1430f889c723215d9a1538a266f', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: '80b29a9b1275363dac86274be18cc52210e59de7', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '5adf8a7d2be8c780dbc5859b8b634efc114536c2' }, this.participants.map((participant, index) => {
             return (h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, h("label", null, participant.is_organizer ? 'Organizer' : `Participant ${index}`), h("div", { part: "nap__input_wrapper", class: `nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}` }, h("div", { class: "nylas-additional-participants__input", part: "nap__input" }, h("input", { type: "text", value: participant.email, onInput: e => {
                     this.onParticipantChange(e, index);
                 }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(participant.email), part: "nap__remove-participant" }, h("close-icon", null))))));

package/dist/collection/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.js

@@ -18,6 +18,7 @@ import { Host, h } from "@stencil/core";
 import { TIMEZONE_MAP } from "../../../common/constants";
 export class NylasAvailabilityPicker {
     constructor() {
+        this.selectedConfiguration = undefined;
         this.openHours = undefined;
         this.name = 'availability';
         this.defaultTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -37,10 +38,19 @@ export class NylasAvailabilityPicker {
         debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    configChangedHandler(newConfig) {
+        const organizerParticipant = newConfig?.participants?.find(p => p.is_organizer);
+        if (organizerParticipant && organizerParticipant?.availability?.open_hours) {
+            this.openHoursToSchedule(organizerParticipant?.availability?.open_hours);
+        }
+    }
     scheduleChanged(newValue, oldValue) {
         if (newValue !== oldValue) {
             this.valueChanged.emit({
-                value: this.scheduleToOpenHours(newValue, this.timezone),
+                value: {
+                    openHours: this.scheduleToOpenHours(newValue),
+                    timezone: this.timezone,
+                },
                 name: this.name,
             });
             let overlapDays = {};
@@ -65,7 +75,10 @@ export class NylasAvailabilityPicker {
             }
             else {
                 this.internals.setValidity({ customError: false });
-                this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(newValue, this.timezone)));
+                this.internals.setFormValue(JSON.stringify({
+                    openHours: this.scheduleToOpenHours(this.schedule),
+                    timezone: this.timezone,
+                }));
             }
         }
     }
@@ -76,7 +89,10 @@ export class NylasAvailabilityPicker {
             if (typeof this.internals.setFormValue !== 'function') {
                 return;
             }
-            this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(this.schedule, this.timezone)));
+            this.internals.setFormValue(JSON.stringify({
+                openHours: this.scheduleToOpenHours(this.schedule),
+                timezone: this.timezone,
+            }));
         }
     }
     connectedCallback() {
@@ -92,12 +108,15 @@ export class NylasAvailabilityPicker {
     componentDidLoad() {
         debug('nylas-availability-picker', 'componentDidLoad');
         if (this.openHours && this.openHours.length > 0) {
-            this.updateSchedule(this.openHours);
+            this.openHoursToSchedule(this.openHours);
         }
         if (typeof this.internals.setFormValue !== 'function') {
             return;
         }
-        this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(this.schedule, this.timezone)));
+        this.internals.setFormValue(JSON.stringify({
+            openHours: this.scheduleToOpenHours(this.schedule),
+            timezone: this.timezone,
+        }));
     }
     getOverlaps(timeRanges) {
         let timeRangesInMinutes = timeRanges.map((range, index) => ({
@@ -190,7 +209,7 @@ export class NylasAvailabilityPicker {
             this.internals.setValidity({ customError: true }, `Invalid ${timeType} time`, element);
         }
     }
-    updateSchedule(openHours) {
+    openHoursToSchedule(openHours) {
         const newSchedule = {
             SUN: [],
             MON: [],
@@ -220,17 +239,14 @@ export class NylasAvailabilityPicker {
                 }
             });
         });
-        if (openHours.length === 0) {
-            this.timezone = openHours[0].timezone;
-        }
-        this.timezone = openHours[0].timezone;
+        this.timezone = this.defaultTimezone;
         this.schedule = newSchedule;
     }
     getDayKey(dayIndex) {
         const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
         return days[dayIndex];
     }
-    scheduleToOpenHours(schedule, timezone = 'UTC') {
+    scheduleToOpenHours(schedule) {
         const dayKeys = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
         let openHoursMap = new Map();
         dayKeys.forEach((dayKey, index) => {
@@ -258,7 +274,6 @@ export class NylasAvailabilityPicker {
                 days: value.days,
                 start: value.start,
                 end: value.end,
-                timezone: timezone,
             });
         });
         return selectedOpenHours;
@@ -268,7 +283,7 @@ export class NylasAvailabilityPicker {
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: '440dc2f314a9c47eb8186f4ed965ed3052301ddf' }, h("div", { key: '2d31ef10ae53275fc065f4e9f68c32f42b60d829', class: "nylas-availability-picker" }, h("div", { key: 'aa6695b6054b81ece7ede5f5e089545a041800f6', class: "header", part: "nap__header" }, h("h3", { key: '86e0d18ca7b70d74159c5cead0d6f5a17a145fa7' }, "General availability"), h("p", { key: '05da67e03befbe936793af5ee98f801b512d28e7' }, "Set your availability for scheduling meetings.")), h("div", { key: '84c6bf714ccea4aff07d6e660d8ca3f96ce9a8cc', class: "content" }, h("div", { key: '16edf74e06bed5440df5f5ea73e90cfa83d08b29', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '1025677efcaf114cb86ce57324c299eeea79b37e', class: "sub-header" }, "Select timezone", h("span", { key: '6d65a6457da202c5a3d5c5cd4e185903a12cec7f', class: "icon" }, h("tooltip-component", { key: '61a40ea06c06f1d306a8b352d9ae883d09768249' }, h("info-icon", { key: '2d447cc2e6a619ee7b1cf1fd3e2b6424fcd6db5b', slot: "tooltip-icon" }), h("span", { key: '35742354ba0841bc1c17170094bab09d536208e6', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '3532c95b077fc701cdbf89cd13668acc675cf0e4', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'c1e870c593966e29d72c3f519f3309f84e4b9a9a', slot: "select-icon" }, h("globe-icon", { key: 'df23e31168778926b6118651cd636ab801f062f1', width: "20", height: "20" })))), h("div", { key: '5ad8cf7078dc104d1258f77e1c69bebf8c82d8dd', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: '396ba889df619966df24cb5eb33de1a77be3a2ba' }, h("div", { key: 'bb2a28befc3aa0481fe265a6af99049b528fca42', class: "nylas-availability-picker" }, h("div", { key: '729c24276d5e773dfbc67791fede7aa0c0bcc747', class: "header", part: "nap__header" }, h("h3", { key: 'ba7c73778a8b3dd197ca850cead346d2f00836b7' }, "General availability"), h("p", { key: '6f946e8e00921f0620b16a3412f290f176dd5b9b' }, "Set your availability for scheduling meetings.")), h("div", { key: '7753c38b6160be28c495cc9803015e0dc0003b2a', class: "content" }, h("div", { key: '8d79379263f772f29443b24f5996d017db12e764', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: 'e6a3658ecf3d92c0dda352532a3a0c71fb59f96e', class: "sub-header" }, "Select timezone", h("span", { key: 'fdb95f85f111a1557897309ff0bd682a77499684', class: "icon" }, h("tooltip-component", { key: '37b47d8e5b24bd4620e6be932ea23c8553b4822f' }, h("info-icon", { key: 'f1192d767cc0e1c67f989b47af093e3539d7c55c', slot: "tooltip-icon" }), h("span", { key: '2b3b949fc18e0118199a3ed9668ec0ca19283c79', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '4729bd6e7b7c05a3fb47cf94010a00db51394c7e', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: '2157b7fb691541f42713a77dc1338dbb9f0e26c2', slot: "select-icon" }, h("globe-icon", { key: '17138c37b7df667e46873af1caa5278120fa4ce1', width: "20", height: "20" })))), h("div", { key: '9a49a84812b5fb544ebfd07d5dd1aba35679224e', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
             return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "nap__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
@@ -302,6 +317,27 @@ export class NylasAvailabilityPicker {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
             "openHours": {
                 "type": "unknown",
                 "mutable": false,
@@ -379,8 +415,8 @@ export class NylasAvailabilityPicker {
                     "text": "This event is fired when the selected availability / open hours change."
                 },
                 "complexType": {
-                    "original": "{\n    value: OpenHours[];\n    name: string;\n  }",
-                    "resolved": "{ value: OpenHours[]; name: string; }",
+                    "original": "{\n    value: {\n      openHours: OpenHours[];\n      timezone: string;\n    };\n    name: string;\n  }",
+                    "resolved": "{ value: { openHours: OpenHours[]; timezone: string; }; name: string; }",
                     "references": {
                         "OpenHours": {
                             "location": "global",
@@ -395,6 +431,9 @@ export class NylasAvailabilityPicker {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "configChangedHandler"
             }, {
                 "propName": "schedule",
                 "methodName": "scheduleChanged"
@@ -414,6 +453,7 @@ export class NylasAvailabilityPicker {
 __decorate([
     RegisterComponent({
         name: 'nylas-availability-picker',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),