@nylas/web-elements 1.1.0-canary.16 → 1.1.0-canary.17

package/dist/collection/components/design-system/toggle-switch/toggle-switch.js

@@ -18,7 +18,7 @@ export class ToggleSwitchComponent {
         });
     }
     render() {
-        return (h("label", { key: 'e1666e95609e7e7b8364dc92630b3549786db8cd', class: "switch", htmlFor: "checkbox" }, h("input", { key: 'ed6b39d27fd625e94a8176dc35ac550f73b9aac9', type: "checkbox", id: "checkbox", name: this.name }), h("div", { key: 'f589add79b5f1941377b590e48627996c90b6730', class: "slider round" })));
+        return (h("label", { key: 'd91b5d5853ab8a256953c4fde8a79b1ef739433d', class: "switch", part: "ts_label" }, h("input", { key: '6f694e5a07cefacc05e155a0319fe99ec1714354', type: "checkbox", part: "ts_input", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("div", { key: 'e2db848dbad679562201ba8151a523fa1b9dc2b9', class: "slider round", part: "ts_slider" })));
     }
     static get is() { return "toggle-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/design-system/toggle-switch/toggle-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../../src/components/design-system/toggle-switch/toggle-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,qBAAqB;;oBACT,eAAe;uBACX,KAAK;qBACR,EAAE;yBAEI,IAAI,CAAC,OAAO;;IAQ1C,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAChC,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAC/B,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DAAO,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU;YACtC,8DAAO,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACxD,4DAAK,KAAK,EAAC,cAAc,GAAO,CAC1B,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'toggle-switch',\n  styleUrl: 'toggle-switch.scss',\n  shadow: true,\n})\nexport class ToggleSwitchComponent {\n  @Prop() name: string = 'toggle-switch';\n  @Prop() checked: boolean = false;\n  @Prop() label: string = '';\n\n  @State() isChecked: boolean = this.checked;\n\n  @Event() nylasFormSwitchToggled!: EventEmitter<{\n    checked: boolean;\n    name: string;\n    label: string;\n  }>;\n\n  componentWillLoad() {\n    this.isChecked = this.checked;\n  }\n\n  toggleCheck() {\n    this.isChecked = !this.isChecked;\n    this.nylasFormSwitchToggled.emit({\n      checked: this.isChecked,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <label class=\"switch\" htmlFor=\"checkbox\">\n        <input type=\"checkbox\" id=\"checkbox\" name={this.name} />\n        <div class=\"slider round\"></div>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../../src/components/design-system/toggle-switch/toggle-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAc/E,MAAM,OAAO,qBAAqB;;oBACT,eAAe;uBACX,KAAK;qBACR,EAAE;yBAEI,IAAI,CAAC,OAAO;;IAQ1C,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAChC,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAC/B,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DAAO,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,UAAU;YACnC,8DAAO,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAI;YACvH,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,WAAW,GAAO,CAC3C,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n/**\n * The `toggle-switch` component is a UI component that allows users to toggle a switch.\n *\n * @part ts_label - The label of the toggle switch\n * @part ts_input - The input of the toggle switch\n * @part ts_slider - The slider of the toggle switch\n */\n@Component({\n  tag: 'toggle-switch',\n  styleUrl: 'toggle-switch.scss',\n  shadow: true,\n})\nexport class ToggleSwitchComponent {\n  @Prop() name: string = 'toggle-switch';\n  @Prop() checked: boolean = false;\n  @Prop() label: string = '';\n\n  @State() isChecked: boolean = this.checked;\n\n  @Event() nylasFormSwitchToggled!: EventEmitter<{\n    checked: boolean;\n    name: string;\n    label: string;\n  }>;\n\n  componentWillLoad() {\n    this.isChecked = this.checked;\n  }\n\n  toggleCheck() {\n    this.isChecked = !this.isChecked;\n    this.nylasFormSwitchToggled.emit({\n      checked: this.isChecked,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <label class=\"switch\" part=\"ts_label\">\n        <input type=\"checkbox\" part=\"ts_input\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n        <div class=\"slider round\" part=\"ts_slider\"></div>\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components/design-system/tooltip-component/toolitp-component.js

@@ -12,7 +12,7 @@ export class TooltipComponent {
         event.target.nextElementSibling.style.opacity = '0';
     }
     render() {
-        return (h("div", { key: 'ea47f5cff4c14535dd36483a6a3c89da000ddfc0', class: "tooltip-container", part: "tc__container" }, h("span", { key: 'be5171a0f003a2f9be9e70c5b8ecf2f4599c0218', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: 'd031260e240c50cc93d0096909e75d2f617239e7', name: "tooltip-icon" }, "i")), h("span", { key: '0d1d4f0a7474116b9d083a4ad558bb934be2dc65', class: `tooltip-content ${this.position}`, part: "tc__content" }, h("slot", { key: '0165a825160db148833ffafff525fe9b305ac80b', name: "tooltip-content" }, "This is a help text."))));
+        return (h("div", { key: 'bd8af6d53895dd9582768009c12e0c382c35941a', class: "tooltip-container", part: "tc__container" }, h("span", { key: '66dfae699129a52375a63cc0e1d9c27155cce633', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: '0a174fa4c95159a405df1562f33677e12f931381', name: "tooltip-icon" }, "i")), h("span", { key: '7594838f601b42b759c13263bdbc08bd2574a918', class: `tooltip-content ${this.position}`, part: "tc__content" }, h("slot", { key: '555bb30de6e5bee11f3cb65c8480f5ce21d996c5', name: "tooltip-content" }, "This is a help text."))));
     }
     static get is() { return "tooltip-component"; }
     static get encapsulation() { return "shadow"; }

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: 'c8ab18162320c10834660c655141a985c36958ac' }, h("sp-theme", { key: '01a86b0ddef68c16b139cdb95bf3f9df102ead60', scale: "medium", color: "dark" }, h("div", { key: '280d8dfbee592023d7461e6691805a6e44e8837b', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '35437f24077f1e5a9b629bfca6437ec6740c8780', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '378551180f48beb175216d045acd4d65355f3234', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: 'a7a6872cfc4d34939aaeba4e45e67d8ca1ac52ab', slot: "icon" }, h("bold-icon", { key: '198210356c76239162c2d44251845529b5765e04' })), h("div", { key: '6ecdf762f2a29a39bce8c49da6cc366594218c52', slot: "label" }, "Bold")), h("sp-button", { key: '6ee0821abd7462a9105f13228a4441ed302d0df9', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: '37745f4ee7e5bac2d4bba65d3682338590b49c88', slot: "icon" }, h("underline-icon", { key: '9b7a46dbf44378c001c16afca0e8c30e0b1ea12f' })), h("div", { key: '54e6ce111dcc82421b475040a0a85d26c648c1d4', slot: "label" }, "Underline")), h("sp-button", { key: 'ae292c9f8f55a7ae82ddfaaa75ba9a045c80c02d', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'fdfdf0265a51eeca44c72ec7de634f9c23a5a846', slot: "icon" }, h("italic-icon", { key: '6308247060d42eb21284e6687a0abc18cf63e32c' })), h("div", { key: '49487a1f0677fc394dd617abfdb645c56e441f55', slot: "label" }, "Italic")))), h("div", { key: '08b56206aef08fbc262ec615c1c593949ef05c82', class: 'buttons' }, h("sp-button", { key: 'f099e2091f8070adaf80cd9fd4299e53e25ef39b', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: '78c73f9aec9dd29a7b1360192ef190d20f0bb092', onClick: this.closeComposer, class: "close" }, "Close")))));
+        return (h(Host, { key: '272229753ac9d990a72c4e1d743b34d01d57d3e3' }, h("sp-theme", { key: 'a43065734dff3bbda8163f9d39f381619020e603', scale: "medium", color: "dark" }, h("div", { key: '11d5f1e8d8c3e7debda04af54a2c6ef5c63b3260', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '6c936b9bfb1fdce1d8f073405bd80a582849e175', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: 'b6c5c51c52d707165367990fa76b5a80fc837936', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: 'e8d07f19efe1bcbb1eb0efd69fe0566df8a656d3', slot: "icon" }, h("bold-icon", { key: 'cd5c2e7b5883e1ff5c6d34106a0b4086ffb9b1d2' })), h("div", { key: '8efca1559b463fc356fe69d0bf7fc327f90ab846', slot: "label" }, "Bold")), h("sp-button", { key: '1d7703909feab13241fd75052946f198ad01d1b6', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'ab1d89e8d5ebca33447274cffbcda5574f41bdde', slot: "icon" }, h("underline-icon", { key: '0598b423ac6724aef96ca5343ce1449fb56f8766' })), h("div", { key: 'c091c8f3d08798fa7d49b86508b29047e5e4ea44', slot: "label" }, "Underline")), h("sp-button", { key: '60ea18e3f3ff95760910fef22119255477375a8f', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'ed6f703adc15b721e0e3cfc72ab438a620b34dbd', slot: "icon" }, h("italic-icon", { key: 'adb995c72136305499b149eb706841b4ca8291c8' })), h("div", { key: '481da563cadf1885efe1f466c5299913f78442a7', slot: "label" }, "Italic")))), h("div", { key: '5c2185ee0ba3c99bde46c13094c696fba33bfe6a', class: 'buttons' }, h("sp-button", { key: 'f73a9a795a24e59d2c835b5a9a1cb7e2d16532c6', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: '2a2ef56256878c45da84f03933e292a98069c44d', 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: '1e11d6ec60787049e26f1a3e68cfb5b47f602936' }, h("div", { key: '8da3cbb6045f0e41f0e400cc9b8a16215c9bb62a', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+        return (h(Host, { key: 'e90f5f811be2c0a00228edfee0b1fd31e1a428f7' }, h("div", { key: 'ef0f2e871c60c23905f56be5cd65c33bd9484e51', 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: '3e4faece512aaa677f0317b10605cb44c486a67b' }, h("div", { key: '1d8beb8103757fd1166cc3a92fdd17ccaa6d9e93', 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: 'f7b5d28a1a147ce235b3d850e23d1fc9aa565711' }, h("div", { key: 'ac9e58127a7862bedac849e0f45d0c7f92210315', 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: '9476c9f8e2108d10a35aac74b489a49228292027' }, h("slot", { key: '0d7ea47221ef6359f55a5b7b0e14f3756b093973' })));
+        return (h(Host, { key: '6bb1038fff2fd94cfb9a8097cbef1b22c2dd89a7' }, h("slot", { key: '156a3f9369cee85f1cca5b44897c4c48850f3bf2' })));
     }
     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: '4839dbd45155bb5d0fe239bf4e88f52a4561ea7d' }, h("sp-theme", { key: '92567f9780858879c10aa49a83e473b84d2d84b0', 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: '7bdbe8488503110273c66be8925b9c54f233010e' }, h("sp-theme", { key: '9339a7c050ae944b2816e13cbc0e7d8057646fa4', 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: '62f141a0a4bdba909ee313c05be61dfa5000bcaf' }, h("sp-theme", { key: '3839bf561000187ab456ae201cb539df420ec653', scale: "medium", color: "dark" }, h("sp-button", { key: '5bc73336c7afc299ac213c9b2903424a014a3f13', label: "Summarize email", "icon-only": true, onClickCapture: this.onClick, class: {
+        return (h(Host, { key: 'ab54db8a781cad602a1bd07093c407a8073934be' }, h("sp-theme", { key: 'bf0cbbed7ca686cfc5cc94d0209d61237359776a', scale: "medium", color: "dark" }, h("sp-button", { key: '51f6a0e1db8ae2fd8be3175886a522ca519170bf', 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: 'acf15db8df8104a59f452f29b797f4967f8243b3', 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: 'c8e6e048f53002956ea54465b1e7ebc4cbec1282', 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: '1a5e154e652550169d5cbdc160be06da9ac1b8fd' }, h("div", { key: '294009192190ba042e972b35d669afe9eda99301', class: "container", ref: r => (this.containerElement = r) }, h("button", { key: '7ca1d0bcfe649891fb6448b5b31fd7d80238b47c', class: {
+        return (h(Host, { key: '78623dead3d55974c4f23b65b404fe4e23f899ef' }, h("div", { key: '5f569606f9e27b49a5e621bf5576713749053275', class: "container", ref: r => (this.containerElement = r) }, h("button", { key: '3a11bbafb81272c310ce0cad0a806293f04d231b', 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: '6086b2714b71f1c20d12afae5fc155d8653345e9', class: "content", ref: r => (this.contentElement = r) }, h("slot", { key: 'f4c19825eaf317f60ac4c254f97c36237e123926' })))));
+            }, "aria-label": "Refreshing..." }, this.state === 'loading' && h("refresh-icon", { slot: "icon" }), this.state !== 'loading' && h("arrow-icon", { slot: "icon" })), h("div", { key: 'e348316e54c25bce6df68d89d51a637657a91131', class: "content", ref: r => (this.contentElement = r) }, h("slot", { key: '502f560a3e42519b3b05f5009d71562ec8e257a4' })))));
     }
     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: '9ac2361052b4def43a8bd3296a417a9c67044866' }, h("sp-theme", { key: 'd5a0bfbb7b354b88e24f677038234c118c69a8e6', scale: "medium", color: "dark" }, h("sp-search", { key: '8080a39d996626207153323910be28951e21a2e5', quiet: true, onSubmit: this.onSearch, onBlur: this.onSearch, value: this.internalQuery }))));
+        return (h(Host, { key: '1687f5f2753a274f3ded1633a69873ff54ffb56c' }, h("sp-theme", { key: '63c6d6be18695a7e78eaf5a15745f5e6772c7f4d', scale: "medium", color: "dark" }, h("sp-search", { key: '2a107fb7f19d21db7a62ebed0775a8f7c31d4f9c', 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: '2b8f2ef90fc96788d4925a70b1cdb692b7e7d183' }, 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: '1a82db1175c9bffed825dc2941b277ab699ff457' }, 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: 'd23da82f6e20bdd064fe7401ec7132546af2f45b' }, h("sp-theme", { key: '7af6f252ef74d89e3dc791dfe8323b13df9a9f92', scale: "medium", color: "dark" }, h("div", { key: '3feeeb134b11d39ff6530e911c305211f18b134f', class: "view-thread" }, h("div", { key: '235b80ce3983526e0544eb1a07c0b309187b9a38', class: "header" }, h("div", { key: 'b78c5f6e8eb8d4733c8a1cf131df8682a5a18469', class: 'subject' }, this.thread?.subject), h("div", { key: '2297fb41c56a1bba769e0a60289f48b3c5f47ce2', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '2a22974a7b7bcc878c30d47f11e296bfdf728b0b', 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: 'a886c18c380e985cfb63a6a4ab523a93b2160ced' }, h("sp-theme", { key: 'dba4495bbb475f8825f5ade124f84f8bbe2c7c45', scale: "medium", color: "dark" }, h("div", { key: '05c602d7c43e31402c433cdaaaccb26c8d88fc7e', class: "view-thread" }, h("div", { key: '0b2900754126998aa4495a916b03ad2ea4157f34', class: "header" }, h("div", { key: '38db0766a5bc2dfc37b5269cf1e63ad25531ee8d', class: 'subject' }, this.thread?.subject), h("div", { key: 'bb73a5220497288f51b7c9d31e54cb685cfe54d5', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '7d774b36fbfc216c05ed8cabbab79ad6b80e0e87', 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-if-state/nylas-if-state.js

@@ -97,7 +97,7 @@ export class NylasIfState {
         }
     }
     render() {
-        return (h(Host, { key: 'd6ab8fe21a9c0313509654e37beaac599d118e0c' }, h("div", { key: '7c78c97f67b2ceeb1f9002002ffeb9d7593264ad', class: this.classes }, this.show && h("slot", null))));
+        return (h(Host, { key: 'a54c576c586d31c138132ac5486c628bbcdf97df' }, h("div", { key: 'e5376f5282b5eeb4dd6b3a8a38ea2a3187c8da64', class: this.classes }, this.show && h("slot", null))));
     }
     static get is() { return "nylas-if-state"; }
     static get encapsulation() { return "shadow"; }

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: 'ab43fd9982b371f0f43984849df45764505b3e7a' }, 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: 'd177bbbc08a869a96d94c09de2c9f7c40ed479e5' }, 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: '57612ac13296cebf2c8731bcb9329f980db034d3' }, h("slot", { key: 'd752cd8c4cd47c9c17d57e23477d3a7720cbc8f5' })));
+        return (h(Host, { key: '7fee35047bafd5dc2f77e83012fe5149f17f7f9f' }, h("slot", { key: '96dcdef76b63b551e2deb56bfd0d1497ff897114' })));
     }
     static get is() { return "nylas-provider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class NylasCancelBookingForm {
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '073a93d34ef7f08acaa827d0e5f391481572c447', part: "ncec" }, h("sp-theme", { key: 'b2183d3473931a5d1dd18dfdbe32fed0128d5dc1', theme: "spectrum", scale: "medium" }, h("div", { key: 'f9147a9d4041b5848bd11f06da7c96e98af3d9bd', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '15da6ffbfe870b80bd057415469a4c94c1b3a243', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'f3f36d408dbbe9717ff2ca13981714c36a4ba160' })), h("h3", { key: '56cd0d658ba9a1c63cd0017514a190c42796dbf4', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: 'db6672c70cc566544ec748f9c7a7426000e0c619', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, this.cancellationPolicy), h("form", { key: 'd227b962561915e823a151a289b135c1d9065510', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: '42eea73d2ffb041b90fbdffdc0c7e16603eee949', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: '57978569e7bd5828b9dfaee053de9a8fae0892d5', class: "required" }, "*")), h("sp-textfield", { key: '08eb8ef56d7536053939086f5da1d5137e43b201', 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: 'dd985c41efd6427e1cec09874caee5c5d345c1cb', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: '97705e808b56f0d373dc1fa705fd61b912ed643e', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: '21ae78e3492ad79cbee485709bb863c29f4b041f', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
+        return (h(Host, { key: '25f45d91057f52263ae313ffed14d56ba22a783d', part: "ncec" }, h("sp-theme", { key: 'c213bc36d8459f0c206ca19bdd77d2d6b5ba5c1b', theme: "spectrum", scale: "medium" }, h("div", { key: 'bd50aa9a5c416825bc6b05c0bf47d85a31021c29', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '9654b0cbda12436ac025265f82aa8bfe0a127fbd', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '3a97606f7c5f2e0f9c08dc7f0b199e56a4afa7f4' })), h("h3", { key: '26c0a115101786847fa681fa2cb3492561516f64', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '05fe59fff1fa6b8bf38313bef5457d4022674570', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, this.cancellationPolicy), h("form", { key: '6c3c1365bde80d1915026f125be9208c3c16d69c', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'fca2f04d8300b0e1be7a8071fed69c714f82491e', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: '1a77038fbda4048fca0e7cc8a39ad357a10f0fd7', class: "required" }, "*")), h("sp-textfield", { key: 'dbb19d14b09f7b85776ca288ec8f9fe58d5080f5', 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: 'e2e0c9794cae46b4a5cc857156d904a1236ccb49', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'a647e3e70704325f3986e6a869b65a5ec7495354', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'b8b732ceafaf6d1090cf7b1a3d979854e17684ca', 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

@@ -45,7 +45,7 @@ export class NylasCancelledEventCard {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '11c4720a791169b5d562f484fecc2e5586bbdeaf', part: "ncec" }, h("sp-theme", { key: 'ccd04e6a1a895ad4be18bdb14d27a1c7403a0568', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'a0360afadc55f58d20e651cb33036aa364a3740e', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '727eba1d97de774c9a51909bec714688d9e60c1c', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: 'bd96caf7b68ee65a470e5949d6622de0893c112d' })), h("h3", { key: '9bcb27d08117825255c2a5625e7b8f630e35b1e5', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: 'f356c2776a296b89efe9ff9b02dd0f928ea1c0c8', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '50130b11b9806a5c6adfd67f436d273fbec91774', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '77e8e62722ac4ace0a667b45feed6684b3bb6056', variant: "secondary", treatment: "outline", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? 'Closing...' : 'Close'))))));
+        return (h(Host, { key: '9c4e8c3d74888d794d747e048ab368ae4f9fce9f', part: "ncec" }, h("sp-theme", { key: 'fe7c297e3da3ec06c54b8c4eddce779e283a6f8c', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '1154b9e1271af9d613401f1958937a2dc87ad2e9', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'c1d5e51311db568bdfd14c45cdb17a341d1222ad', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9c3f516a80498ff983fe17dd2fbc84d9ee0ac7b8' })), h("h3", { key: '82ed5d4165dbc590bb996569252a5661ac915d98', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '5a01351f61614bee349cb350395d00d61b43c574', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: 'c82b6b6260111bdecf664a475591cbfab6d4321e', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '34fdcee6945a44597a2084c3043aa3375cd560cb', variant: "secondary", treatment: "outline", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? 'Closing...' : '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: 'ab83962fa679505585445e3baab12b31bf1abd00' }, h(Fragment, { key: '3f4c77b79718eb71600129910be78980a70c3022' }, 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: '45286b7e48b19c7b76089ef2d661e9cd176b4a8f' }))));
+        return (h(Host, { key: '9011372a63b5b706177dedf93b14df8158e14e04' }, h(Fragment, { key: 'd06168682c50f2b5330f8c923ecaec19dfc44add' }, 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: '6cfe1ecaea1c313ca1549d01b3b8c1627af0d8f2' }))));
     }
     static get is() { return "nylas-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class NylasAdditionalParticipants {
     }
     componentDidLoad() {
         debug('nylas-additional-participants', 'componentDidLoad');
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     disconnectedCallback() {
         debug('nylas-additional-participants', 'disconnectedCallback');
@@ -46,34 +46,37 @@ export class NylasAdditionalParticipants {
         const index = event.detail.name;
         this.participants[index].email = event.detail.value;
         const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);
+        this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;
         this.participants[index].name = participant?.name || event.detail.value;
         this.participants = [...this.participants];
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     onParticipantChange(event, index) {
         debug('nylas-additional-participants', 'onParticipantChange');
         this.participants[index].email = event.target.value;
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     addParticipant() {
         debug('nylas-additional-participants', 'addParticipant');
-        this.participants = [...this.participants, { name: '', email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];
+        this.updateFormValue();
     }
     removeParticipant(index) {
         debug('nylas-additional-participants', 'removeParticipant');
         this.participants = this.participants.filter((_, i) => i !== index);
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     validate(email, index) {
         debug('nylas-additional-participants', 'validate');
         const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         const valid = regex.test(String(email).toLowerCase());
         this.participants[index].is_valid = valid;
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
-    participantsWithouOrganizer() {
-        return this.participants.filter(participant => !participant.is_organizer);
+    updateFormValue() {
+        debug('nylas-additional-participants', 'updateFormValue');
+        this.internals.setFormValue(JSON.stringify(this.participants), this.name);
+        this.valueChanged.emit({ value: JSON.stringify(this.participants), name: this.name });
     }
     getArrayDifference(array1, array2) {
         const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));
@@ -82,11 +85,11 @@ export class NylasAdditionalParticipants {
         });
     }
     render() {
-        return (h(Host, { key: '5f2ab58dd16c4052b17111fa260d676c908bcf58' }, h("nylas-form-card", { key: 'a636c3ef694cc333b15830c35eb13fb51ff69ca0' }, h("h3", { key: '13425f0338b7b88746844c79104f008323bdcbf1', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), h("p", { key: '7ebe90bb5ef933b7632c8b30aa9b1ccf8f08c6a6', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: '3662713253e568cbf70b4d73e4eb883bb6c329a2', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '577176dfd841875992a420e243be2905968452d5' }, this.participants.map((participant, index) => {
+        return (h(Host, { key: '67454437ca6e9771da4373e293b8b1d468c79680' }, h("nylas-form-card", { key: '844913ba1bca33b83b0d7c0a89323ca48f5ce1dd' }, h("h3", { key: 'bbdbf1e9addc3238a013697bff343a1065758928', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), h("p", { key: '37520f9fcc4996b9635821a52ed5d9c0350af88f', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: '76a8d8118f9012cced55357e4243b897ec41e385', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: 'bb5d6f6e7ebf486eb4c8395ff3ab971335d19750' }, 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': true, 'organizer': participant.is_organizer }, part: "nap__input" }, participant.is_organizer ? (h("input", { type: "text", value: participant.email, onInput: e => {
                     this.onParticipantChange(e, index);
-                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })) : (h("input-dropdown", { name: `${index}`, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nap__remove-participant" }, h("close-icon", null)))))));
-        })), h("button", { key: '74f99ea0eb6a5a5873a7b5dbed5caa4bf557fa4e', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '9d139a5ba18bdec17acaa1dc9d9d773d0a7b1a5d' }), " ", h("span", { key: '89778f530c53d8ffa55c7e3bb67bdd5b19c4f881' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
+                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })) : (h("input-dropdown", { name: `${index}`, filterable: true, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nap__remove-participant" }, h("close-icon", null)))))));
+        })), h("button", { key: '14febbe15dc97b44304e98c14d7e084ea5126304', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '8f60f39d5d3b3b4532a78eacb0d4bf907a8b7836' }), " ", h("span", { key: '8e2c9a49072d04ab571470c68c3277a76706e60e' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
     }
     static get is() { return "nylas-additional-participants"; }
     static get encapsulation() { return "shadow"; }
@@ -169,6 +172,24 @@ export class NylasAdditionalParticipants {
             "participantsValid": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the selected participants change."
+                },
+                "complexType": {
+                    "original": "{\n    value: string;\n    name: string;\n  }",
+                    "resolved": "{ value: string; name: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-additional-participants.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @Prop() participantOptions?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const index = event.detail.name;\n    this.participants[index].email = event.detail.value;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n\n  participantsWithouOrganizer() {\n    return this.participants.filter(participant => !participant.is_organizer);\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: Participant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      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'}`}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input\n                            type=\"text\"\n                            value={participant.email}\n                            onInput={e => {\n                              this.onParticipantChange(e, index);\n                            }}\n                            readOnly={participant.is_organizer}\n                            onBlur={() => this.validate(participant.email, index)}\n                          />\n                        ) : (\n                          <input-dropdown name={`${index}`} inputValue={participant.email} options={this.getArrayDifference(this.participantOptions || [], this.participants)} />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-additional-participants.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @Prop() participantOptions?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * This event is fired when the selected participants change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.updateFormValue();\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const index = event.detail.name;\n    this.participants[index].email = event.detail.value;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n    this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.updateFormValue();\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.updateFormValue();\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n    this.updateFormValue();\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.updateFormValue();\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.updateFormValue();\n  }\n\n  updateFormValue() {\n    debug('nylas-additional-participants', 'updateFormValue');\n    this.internals.setFormValue(JSON.stringify(this.participants), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.participants), name: this.name });\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: Participant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      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'}`}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input\n                            type=\"text\"\n                            value={participant.email}\n                            onInput={e => {\n                              this.onParticipantChange(e, index);\n                            }}\n                            readOnly={participant.is_organizer}\n                            onBlur={() => this.validate(participant.email, index)}\n                          />\n                        ) : (\n                          <input-dropdown\n                            name={`${index}`}\n                            filterable={true}\n                            inputValue={participant.email}\n                            options={this.getArrayDifference(this.participantOptions || [], this.participants)}\n                          />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -36,7 +36,6 @@
 }
 .nylas-availability-picker .header {
   padding: 1rem;
-  border-bottom: 1px solid var(--nylas-base-200);
 }
 .nylas-availability-picker .header h3 {
   margin: 0;
@@ -59,6 +58,7 @@
   color: var(--nylas-base-900);
   font-size: 16px;
   font-family: var(--nylas-font-family);
+  border-top: 1px solid var(--nylas-base-200);
 }
 @media screen and (max-width: 504px) {
   .nylas-availability-picker .content {