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

package/dist/collection/components/scheduler-editor/nylas-event-location/nylas-event-location.js

@@ -81,10 +81,10 @@ export class NylasEventLocation {
             { value: 'custom', label: 'Custom location' },
         ];
         const icons = {
-            none: h("location-off-icon", { key: 'e39a3de4016f364d16d16489e23c5929f1912aa2' }),
-            custom: h("location-icon", { key: 'ff871a8ca7974401f2801c45b3096882d6ab159b' }),
+            none: h("location-off-icon", { key: 'b83e4c1ee5292f3261fca8489ec10a6ded3378dc' }),
+            custom: h("location-icon", { key: '6ba8c483b7e242b0accf8a55ccb11efc8b4e19a5' }),
         };
-        return (h(Host, { key: 'cb8d5db9330e0bc55a260e812200e8f5338f54b6' }, h("div", { key: '522d05fbf3800885e70f2f427abefb3f9e580fe6', class: "nylas-event-location", part: "nel" }, h("label", { key: '7ab6905de1a4df4453c783a4e3c155681695fc7b', htmlFor: "location" }, "Location type", h("span", { key: '4d581262624b17301c1cce6104bf3d73101f4a43', class: "label-icon" }, h("tooltip-component", { key: '5ff2dbd32e34de47a8727fd8e60442a12943f08c' }, h("info-icon", { key: '39dce89e093228b1a96e74ffb62dd22981a6bdcd', slot: "tooltip-icon" }), h("span", { key: '69d64a3f59a6c6ba655a1816398dfdb052b90da4', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: 'f4baf4b56c8ed64527d281b9b4c5f4878773c549', class: "location-input" }, h("select-dropdown", { key: 'ee38d116156616c711b1d43f6ec835d513ea9bbd', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h("span", { key: 'edaaf4764f2b15d18014537512db2492198723ac', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: 'f65e817196207fa0397fb599bc89a8cb72b7e8e1' }, h("div", { key: '7410dde44d2b93d0aa655feb0c9dede3b14f3f1e', class: "nylas-event-location", part: "nel" }, h("label", { key: '4d158faf262e76e325e1dc35792bc36800a3df6f', htmlFor: "location" }, "Location type", h("span", { key: '28b4287f14b80b9a1db726470bf27dd017b3ba37', class: "label-icon" }, h("tooltip-component", { key: '65a2db2bdf57377beb1b5b4801a89f5a74320205' }, h("info-icon", { key: '350b0f6f2c7f442cc4fb3fdee838c600d271d667', slot: "tooltip-icon" }), h("span", { key: '31027673d5cd518b6cbc847c0010f482b0540de6', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: 'a902e62a97f181dcb6b0e0e4daea1ec4c817fe58', class: "location-input" }, h("select-dropdown", { key: '5f271d86549b8fa286b630f169e191d4c1d73e3d', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h("span", { key: 'cdc3f3fcdf971ffe3495f085b39cac2a1e77df11', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get is() { return "nylas-event-location"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.js

@@ -304,10 +304,10 @@ export class NylasEventTitle {
         return (h("div", { class: "token-label" }, h("span", { class: "token" }, token.token), h("span", { class: "description" }, token.description)));
     }
     render() {
-        return (h(Host, { key: '8e8de66d58ca4428f35effa133fc8c0b3e3c804f' }, h("div", { key: '411cf6eb2553063facf74bc0fcf46cbced1b2eb8', class: "nylas-event-title", part: "net" }, h("label", { key: '47c8a32d54022a41182ba71aa665f05275e0926b', htmlFor: "title" }, "Event title", h("span", { key: '664268aa456eeae43411ef0c59c3391dfebac185', class: "required" }, "*"), h("span", { key: 'c4db00b1f2f428c30344dbe098fabba19e15cf76', class: "label-icon" }, h("tooltip-component", { key: '9884d36d7237310d454cb2cce36ea7a7391a58e5' }, h("info-icon", { key: '6a2c57dc06b77fb2c8faaa21af08558f7cfcf98c', slot: "tooltip-icon" }), h("span", { key: '185fee4da67795d4cbad48ce905c573e42749b95', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: '80db52b66751ec73660465a2185d2e5c1304903d', class: {
+        return (h(Host, { key: 'ec414f2f4c738230078bed7b7c5477ba5fdbcb70' }, h("div", { key: '17f665e5f307c1b6510891e76daa765449958c3e', class: "nylas-event-title", part: "net" }, h("label", { key: 'e4beac83e857bab219ec4276238f7953645c4711', htmlFor: "title" }, "Event title", h("span", { key: '3033d6ef407f2a3df94dc1f80be2f5e3c378abd0', class: "required" }, "*"), h("span", { key: '29dba11e88726329513ef15078eba34f103914de', class: "label-icon" }, h("tooltip-component", { key: '29a373fc979f15eb3527b9e5a446bd7518ee4562' }, h("info-icon", { key: '12f9a0190185b96a2090cdb0ca7a43f6342cc016', slot: "tooltip-icon" }), h("span", { key: 'dd6e505591f9cded5bc70a812e448b44f1faa4e1', slot: "tooltip-content" }, "Enter a title for your event.")))), h("div", { key: '87807255004e909850b93d600b636d2d2e1d8ed1', class: {
                 title: true,
                 error: this.validationError !== '',
-            }, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (h("div", { class: "token-options", part: "net__dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (h("li", { tabindex: "0", key: option.label, id: option.label, class: { active: this.ariaActivedescendant === option.label }, onClick: e => this.selectOption(e, option), role: "option" }, this.getLabelHTML(option.labelHTML))))))), h("span", { key: '35d1099854f33517e668691f98a3bf296a8280d4', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
+            }, part: "net__title", ref: el => (this.titleRef = el), contentEditable: "true", onInput: e => this.handleChange(e), onKeyDown: event => this.handleInputKeyDown(event) }), this.showTokens && this.filteredTokens?.length > 0 && (h("div", { class: "token-options", part: "net__dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant }, this.filteredTokens.map(option => (h("li", { tabindex: "0", key: option.label, id: option.label, class: { active: this.ariaActivedescendant === option.label }, onClick: e => this.selectOption(e, option), role: "option" }, this.getLabelHTML(option.labelHTML))))))), h("span", { key: '3ba87900ffbc4b69c5f9fac01a8f9f577dd034c5', class: "help-text" }, "Create a dynamic templated event title by typing $. Learn more"), this.validationError != '' && h("span", { class: "error-message" }, this.validationError))));
     }
     static get is() { return "nylas-event-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-form-card/nylas-form-card.js

@@ -31,7 +31,7 @@ export class NylasFormCard {
         checkForMissingSlots(slots, this.host);
     }
     render() {
-        return (h(Host, { key: '481f5b89040a4b88cd2524dec46e228a2f495672' }, h("div", { key: 'bec08ca1ce504d6a6c797ac5995ce682a020256c', class: "nylas-form-card" }, h("div", { key: 'aa6be7ede7ee3595d7b1eeb31fe53cb2d26ea724', class: "nylas-form-card__header" }, h("slot", { key: 'a5053d6f0fd8b16d0001c92afa6fc8313a0f7044', name: "header-title" }), h("slot", { key: '18b2f5b6868def67b2e66a722d617e820d430858', name: "header-subtitle" })), h("div", { key: '89e52a3ea00fa5505129d5986858d18867d9f4cd', class: "nylas-form-card__content" }, h("slot", { key: '6b5087f1de1b228bf4b4ed57ba93bf39c489bcca', name: "content" })))));
+        return (h(Host, { key: 'b239c071fddb29c99417cd9df00e4e8a10cfc68d' }, h("div", { key: '03cea2cbfa42eaa9fa93a7b95507c182d9fb468e', class: "nylas-form-card" }, h("div", { key: '8c62d6d8b725d25aa139635d865d95d00f904c75', class: "nylas-form-card__header" }, h("slot", { key: '614613c87e4c5cf2eb54bea118a9179e8f684535', name: "header-title" }), h("slot", { key: '9cc70a1325e1e69c69a3313581bf14b2c638a421', name: "header-subtitle" })), h("div", { key: '8d557b743c717caae7d331b0084dcde441b64a80', class: "nylas-form-card__content" }, h("slot", { key: 'e35718fdfd24a984a39ca67e8356991d8b7000f2', name: "content" })))));
     }
     static get is() { return "nylas-form-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.js

@@ -90,7 +90,7 @@ export class NylasLimitFutureBookings {
         this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: '2c6b73be6a96ed0d4bdce35995608ba6edb0c699' }, h("div", { key: '0408bfa175effeba479a4653be178a4169557ad1', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'a7fef8092b1c05b3ca9db8164ed9d2517f589f65' }, "Limit future bookings", h("span", { key: '328b8e96e4020622b346f273c2dea1b3ad91261b', class: "label-icon" }, h("tooltip-component", { key: 'a9446903691a6caf6416fa7b02ccf7ade89baeb0' }, h("info-icon", { key: '1fda9c577f7298f195de760892381a7d64e3b72c', slot: "tooltip-icon" }), h("span", { key: 'd6efca56eaeaf190d4d09a904a8e1f835dcec659', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: '7348ab27b2aa85e3b41740e517b9b5b17e06f03c', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: '9efaf822025f476c80f4c5124f226e45ef9047f9' }, h("div", { key: 'acb0ed9bb24d9e789c01127b2343194d47c37c5f', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'b4bbe14a0870451be5c7754dbbd3adb029b1d24c' }, "Limit future bookings", h("span", { key: 'e1e671d334ec20347852549c4b4d63fa626a2186', class: "label-icon" }, h("tooltip-component", { key: '378c5a41fe7920cebd1f9de4ea16873e951584cf' }, h("info-icon", { key: 'dee6d8d027c746b19b4de42a7e57754a6dcf0a34', slot: "tooltip-icon" }), h("span", { key: 'f128781fb212013489d7db03e7b5fb1a02681b5a', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: 'fb00fd64c7dec2beb976132a397bb067e72c0cc3', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get is() { return "nylas-limit-future-bookings"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-min-booking-notice/nylas-min-booking-notice.js

@@ -115,7 +115,7 @@ export class NylasMinBookingNotice {
         this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: 'aabf96ed8c0a4f124ab36c48788650cd58c287cb' }, h("div", { key: 'd5b39e2a0a0837997e8eed19708d24bc213c03a8', class: "nylas-min-booking-notice", part: "nmbn" }, h("label", { key: '326d8374eea2f2bcd8beb22be8bb0f74ed7b63ab' }, "Minimum booking notice", h("span", { key: '6722f861efdee44774331f62eca0260fb8e3e241', class: "label-icon" }, h("tooltip-component", { key: '54f26a271650e81c9e91c9b7fcef707bb7dea27e' }, h("info-icon", { key: '7f941710f9d8442c69cfa0b893fd73a3ba92acfd', slot: "tooltip-icon" }), h("span", { key: 'fbe57ec513dae8f7db343960e58a8f74328f39c2', slot: "tooltip-content" }, "The minimum amount of time in the future for planning the event.")))), h("time-period-selector", { key: '353894c36a20314eb6d75a93ae5b15b616317b98', id: "min-booking-notice", exportparts: "tps__number-dropdown: nmbn__number-dropdown, tps__number-dropdown-button: nmbn__number-dropdown-button, tps__number-dropdown-content: nmbn__number-dropdown-content, tps__period-dropdown: nmbn__period-dropdown, tps__period-dropdown-button: nmbn__period-dropdown-button, tps__period-dropdown-content: nmbn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: 'b00e1ce3adc1082c819774df6888d86fd93b06b6' }, h("div", { key: '0cd17759b7e1d3790904fe868addfa02065a3115', class: "nylas-min-booking-notice", part: "nmbn" }, h("label", { key: 'c27bc50a60686fb925904c5f86c9f19a7ab8079c' }, "Minimum booking notice", h("span", { key: '67b1a1351adbe6265d549501609af036d993920b', class: "label-icon" }, h("tooltip-component", { key: '4e64d044707c9fe94aa84caa242a0e034c0a89f7' }, h("info-icon", { key: 'bf64b04e4d308449249dae8a19a6c4043f26c1dd', slot: "tooltip-icon" }), h("span", { key: '434e31ddf539c4fcb287b198d780b6593808a607', slot: "tooltip-content" }, "The minimum amount of time in the future for planning the event.")))), h("time-period-selector", { key: 'efd40f4731319bd7da2aed6995279c8068e505ac', id: "min-booking-notice", exportparts: "tps__number-dropdown: nmbn__number-dropdown, tps__number-dropdown-button: nmbn__number-dropdown-button, tps__number-dropdown-content: nmbn__number-dropdown-content, tps__period-dropdown: nmbn__period-dropdown, tps__period-dropdown-button: nmbn__period-dropdown-button, tps__period-dropdown-content: nmbn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get is() { return "nylas-min-booking-notice"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.js

@@ -115,7 +115,7 @@ export class NylasMinCancellationNotice {
         this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: '3ee0dbd86e7d53dcc7f95807eed480663673acee' }, h("div", { key: '83d71bcb1fe714766ab49f13643f2c4571e130da', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '643a6e3a8be08f647cc3074c0e1473686f7f0ad5' }, "Minimum cancellation notice", h("span", { key: 'f66c36b03e7d51bf2f5dcf5cc5c22143290768e1', class: "label-icon" }, h("tooltip-component", { key: '96ec38cd3e126c16cc51b9831ac205645cbe841d' }, h("info-icon", { key: 'a44ddbb0876bbc99129b0ba2c3622789613cb724', slot: "tooltip-icon" }), h("span", { key: 'b982780e6797311f12343fa63c376f16e925347d', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: 'fec77a977146df83263a257c1f09dd868782125b', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: '6c14649f767cebe544dd5fc3039e4bace051f759' }, h("div", { key: 'e6b0965bb6bc49b6e7ede7a4c2b2c2056a212c96', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '1998d897f882c0783e2012ca85b651c43517ba64' }, "Minimum cancellation notice", h("span", { key: 'eccae26b18bd269648d1bce2affae5d3e469ea02', class: "label-icon" }, h("tooltip-component", { key: '50caa33903115b0da9da25ed3a18cbbf8a4df353' }, h("info-icon", { key: '8b466b236668439cbca8e250d60524b69ce4f7f3', slot: "tooltip-icon" }), h("span", { key: 'c4c9d73798c85d317aa1f89a2b0f1c66c9ca41d2', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: 'bb4c0a9ecfb9bc9ebf88b229c871abd4b8427385', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get is() { return "nylas-min-cancellation-notice"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,98 @@
+:host {
+  display: block;
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
+  width: inherit;
+}
+
+.nylas-participants-custom-availability {
+  width: inherit;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem;
+  border-radius: var(--nylas-border-radius-2x);
+  border: 1px solid var(--nylas-base-200);
+}
+.nylas-participants-custom-availability .header {
+  padding: 1rem;
+}
+.nylas-participants-custom-availability .header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--nylas-base-900);
+  text-align: left;
+}
+.nylas-participants-custom-availability .header p {
+  margin: 0.25rem 0 0 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--nylas-base-600);
+  text-align: left;
+}
+.nylas-participants-custom-availability .content .participant-container {
+  padding-top: 8px;
+  border-top: 1px solid var(--nylas-base-200);
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 16px 12px;
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title p {
+  margin: 0;
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron {
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron:hover, .nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron:active {
+  color: var(--nylas-primary);
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.open {
+  transform: rotate(90deg);
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.closed {
+  transform: rotate(270deg);
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.disabled {
+  cursor: not-allowed;
+  color: var(--nylas-base-300);
+}
+.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.disabled:hover {
+  color: var(--nylas-base-300);
+}
+.nylas-participants-custom-availability .content .participant-container nylas-availability-picker::part(nap) {
+  margin: 0;
+  border: none;
+}

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

@@ -0,0 +1,219 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { debug } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasParticipantsCustomAvailability {
+    constructor() {
+        this.name = 'participant-custom-availability';
+        this.participants = undefined;
+        this.selectedParticipants = this.setParticipants(this.participants);
+    }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    participantsChangedHandler(newValue) {
+        debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue);
+        this.selectedParticipants = this.setParticipants(newValue);
+    }
+    connectedCallback() {
+        debug('nylas-participants-custom-availability', 'connectedCallback');
+    }
+    disconnectedCallback() {
+        debug('nylas-participants-custom-availability', 'disconnectedCallback');
+    }
+    componentWillLoad() {
+        debug('nylas-participants-custom-availability', 'componentWillLoad');
+    }
+    componentDidLoad() {
+        debug('nylas-participants-custom-availability', 'componentDidLoad');
+    }
+    nylasFormSwitchToggledHandler(event) {
+        debug('nylas-participants-custom-availability', 'nylasFormSwitchToggledHandler', event.detail);
+        this.selectedParticipants[event.detail.name]['isOpen'] = event.detail.checked;
+        this.selectedParticipants[event.detail.name]['setCustom'] = event.detail.checked;
+        this.selectedParticipants = { ...this.selectedParticipants };
+    }
+    handleValueChanged(event) {
+        debug('[nylas-editor-tabs]', 'handleValueChanged', event);
+        const { name, value } = event.detail;
+        if (!name.startsWith('participant-')) {
+            return;
+        }
+        if (!this.participantFormRef.checkValidity()) {
+            this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');
+            return;
+        }
+        else {
+            this.internals.setValidity({});
+        }
+        const jsonValue = JSON.parse(value);
+        const key = name.split('-')[2];
+        if (!this.selectedParticipants[key])
+            return;
+        this.selectedParticipants[key]['openHours'] = jsonValue.openHours;
+        this.selectedParticipants = { ...this.selectedParticipants };
+        const participantOpenHours = {};
+        this.participants.forEach(participant => {
+            participantOpenHours[participant.email] = this.selectedParticipants[participant.email].openHours;
+        });
+        this.internals.setFormValue(JSON.stringify(participantOpenHours), this.name);
+        this.valueChanged.emit({ value: JSON.stringify(participantOpenHours), name: this.name });
+    }
+    setParticipants(participants) {
+        const selectedParticipants = {};
+        participants.forEach(participant => {
+            const isOpen = participant.is_organizer ? true : false;
+            selectedParticipants[participant.email] = {
+                isOpen: isOpen,
+                setCustom: !!participant.availability?.open_hours ? true : false,
+                openHours: participant.availability?.open_hours || [],
+                name: participant.name || participant.email,
+                availability: participant.availability,
+            };
+        });
+        return selectedParticipants;
+    }
+    render() {
+        return (h(Host, { key: '051df44e8bf6bab14cfbccb0a3c5f920993cbae9' }, h("div", { key: '128d044cb2bbee76d695d6f5d4bc38a211d06360', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: 'ed326c442f9663b0613e5cf62a31aabf5fa1034d', class: "header", part: "npca__header" }, h("h3", { key: '10994aace54d17110ab2e70fc82a5c11231b5a23' }, "Set Custom Availability for Participants"), h("p", { key: '6df3bc37aec02f5a4468f6c6515c6de2c696e817' }, "Set custom availability for scheduling meetings, or default to general availability.")), h("div", { key: 'e1e67385b15430e8a7eb6d8411f9b87742621969', class: "content", part: "npca__content" }, h("form", { key: '589df249c050b132dc8da5b3ef7e58fa829ae300', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
+            const participant = this.selectedParticipants[key];
+            if (!participant || !participant.name || !participant.availability)
+                return;
+            return (h("div", { class: "participant-container", part: "npca__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npca__participant-title" }, h("p", null, "Set ", participant.name, "'s custom availability"), h("div", { class: "participant-toggle", part: "npca__participant-toggle--container" }, h("toggle-switch", { exportparts: "ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider", name: key, checked: !!participant.openHours && participant.openHours.length > 0 }), h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`, onClick: () => {
+                    if (!participant.setCustom)
+                        return;
+                    this.selectedParticipants[key].isOpen = !participant.isOpen;
+                    this.selectedParticipants = { ...this.selectedParticipants };
+                } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participant.openHours, defaultTimezone: participant.openHours?.[0]?.timezone, hideHeader: true }))));
+        }))))));
+    }
+    static get is() { return "nylas-participants-custom-availability"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-participants-custom-availability.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-participants-custom-availability.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the participants custom availability."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'participant-custom-availability'"
+            },
+            "participants": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Participant[]",
+                    "resolved": "Participant[]",
+                    "references": {
+                        "Participant": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Participant"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The participants selected in the add participants section."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedParticipants": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the participants custom availability changes."
+                },
+                "complexType": {
+                    "original": "{\n    value: string;\n    name: string;\n  }",
+                    "resolved": "{ value: string; name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "participants",
+                "methodName": "participantsChangedHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "nylasFormSwitchToggled",
+                "method": "nylasFormSwitchToggledHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "valueChanged",
+                "method": "handleValueChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-participants-custom-availability',
+        eventToProps: {},
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasParticipantsCustomAvailability.prototype, "render", null);
+//# sourceMappingURL=nylas-participants-custom-availability.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-participants-custom-availability.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Availability, OpenHours, Participant } from '@nylas/core';\n\n/**\n * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.\n *\n * @part npca - The participants custom availability container\n * @part npca__header - The header of the participants custom availability\n * @part npca__content - The content of the participants custom availability\n * @part npca__participant-container - The participant container\n * @part npca__participant-title - The title of the participant\n * @part npca__participant-toggle--container - The toggle container for the participant\n * @part npca__toggle-label - The label of the toggle\n * @part npca_toggle-input - The input of the toggle\n * @part npca_toggle-slider - The slider of the toggle\n */\n@Component({\n  tag: 'nylas-participants-custom-availability',\n  styleUrl: 'nylas-participants-custom-availability.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasParticipantsCustomAvailability {\n  @Element() host!: HTMLNylasParticipantsCustomAvailabilityElement;\n  private participantFormRef!: HTMLFormElement;\n\n  /**\n   * The name of the participants custom availability.\n   */\n  @Prop() name: string = 'participant-custom-availability';\n\n  /**\n   * The participants selected in the add participants section.\n   */\n  @Prop() participants!: Participant[];\n\n  /**\n   * This event is fired when the participants custom availability changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The state to store the custom availability setting for participants.\n   */\n  @State() selectedParticipants: {\n    [key: string]: {\n      setCustom: boolean;\n      isOpen: boolean;\n      openHours: OpenHours[];\n      name: string;\n      availability?: Availability;\n    };\n  } = this.setParticipants(this.participants);\n\n  // Watchers\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('participants')\n  participantsChangedHandler(newValue: Participant[]) {\n    debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue);\n    this.selectedParticipants = this.setParticipants(newValue);\n  }\n\n  // Lifecycle Methods\n  connectedCallback() {\n    debug('nylas-participants-custom-availability', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-participants-custom-availability', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-participants-custom-availability', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-participants-custom-availability', 'componentDidLoad');\n  }\n\n  // Event Handlers\n  @Listen('nylasFormSwitchToggled')\n  nylasFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: boolean }>) {\n    debug('nylas-participants-custom-availability', 'nylasFormSwitchToggledHandler', event.detail);\n    this.selectedParticipants[event.detail.name]['isOpen'] = event.detail.checked;\n    this.selectedParticipants[event.detail.name]['setCustom'] = event.detail.checked;\n    this.selectedParticipants = { ...this.selectedParticipants };\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n    if (!name.startsWith('participant-')) {\n      return;\n    }\n    // Validate the form\n    if (!this.participantFormRef.checkValidity()) {\n      this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');\n      return;\n    } else {\n      this.internals.setValidity({});\n    }\n\n    const jsonValue = JSON.parse(value);\n\n    const key = name.split('-')[2];\n    if (!this.selectedParticipants[key]) return;\n    this.selectedParticipants[key]['openHours'] = jsonValue.openHours;\n    this.selectedParticipants = { ...this.selectedParticipants };\n\n    const participantOpenHours = {};\n    this.participants.forEach(participant => {\n      participantOpenHours[participant.email] = this.selectedParticipants[participant.email].openHours;\n    });\n    this.internals.setFormValue(JSON.stringify(participantOpenHours), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(participantOpenHours), name: this.name });\n  }\n\n  setParticipants(participants: Participant[]) {\n    const selectedParticipants = {};\n    participants.forEach(participant => {\n      const isOpen = participant.is_organizer ? true : false;\n      selectedParticipants[participant.email] = {\n        isOpen: isOpen,\n        setCustom: !!participant.availability?.open_hours ? true : false,\n        openHours: participant.availability?.open_hours || [],\n        name: participant.name || participant.email,\n        availability: participant.availability,\n      };\n    });\n    return selectedParticipants;\n  }\n  @RegisterComponent<NylasParticipantsCustomAvailability, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-participants-custom-availability',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-participants-custom-availability\" part=\"npca\">\n          <div class=\"header\" part=\"npca__header\">\n            <h3>Set Custom Availability for Participants</h3>\n            <p>Set custom availability for scheduling meetings, or default to general availability.</p>\n          </div>\n          <div class=\"content\" part=\"npca__content\">\n            <form ref={el => (this.participantFormRef = el as HTMLFormElement)}>\n              {Object.keys(this.selectedParticipants).map((key, index) => {\n                const participant = this.selectedParticipants[key];\n                if (!participant || !participant.name || !participant.availability) return;\n                return (\n                  <div class=\"participant-container\" part=\"npca__participant-container\" key={`participant-conatiner-${index}`}>\n                    <div class=\"participant-title\" part=\"npca__participant-title\">\n                      <p>Set {participant.name}'s custom availability</p>\n                      <div class=\"participant-toggle\" part=\"npca__participant-toggle--container\">\n                        <toggle-switch\n                          exportparts=\"ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider\"\n                          name={key}\n                          checked={!!participant.openHours && participant.openHours.length > 0}\n                        />\n                        <span\n                          class={`chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`}\n                          onClick={() => {\n                            if (!participant.setCustom) return;\n                            this.selectedParticipants[key].isOpen = !participant.isOpen;\n                            this.selectedParticipants = { ...this.selectedParticipants };\n                          }}\n                        >\n                          <chevron-icon width=\"24\" height=\"24\" />\n                        </span>\n                      </div>\n                    </div>\n                    {participant.isOpen && (\n                      <nylas-availability-picker\n                        key={index}\n                        name={`participant-${index}-${key}`}\n                        openHours={participant.openHours}\n                        defaultTimezone={participant.openHours?.[0]?.timezone}\n                        hideHeader={true}\n                      />\n                    )}\n                  </div>\n                );\n              })}\n            </form>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -134,7 +134,7 @@ export class NylasSchedulerEditor {
         await this.nylasSchedulerConfigConnector.schedulerConfig?.getCalendars();
     }
     render() {
-        return (h(Host, { key: 'd5f019173d3ec4f80d802de6989182b0e8e4c2d0' }, h("div", { key: '7b1d14281fe950b0cd693349bb8cdd2cb428722f', class: "scheduler-editor-header", part: "nse__header" }, h("h1", { key: 'b24cf796d8db6a169757c552b9749568794b87fd', class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { key: 'd6721ba544b1c3c5f6e003034d491355de6b0cc7', width: "18", height: "18" }), "Scheduler editor"), h("button", { key: 'bb9ce5bfa2e6df362b55c7f8cd1a2f1e06056ce7', class: "scheduler-editor-close", title: "logout", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { key: '22dced4538079f05c5d036c9eef4882d79739cf9', width: "18", height: "18" }))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === null && (h("div", { class: "list-configurations" }, h("nylas-list-configurations", null))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'create' && (h("nylas-editor-tabs", { mode: "composable" }, h(ExpressFlow, null))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'edit' && (h("nylas-editor-tabs", { mode: this.mode }, this.mode === 'composable' && h("slot", null))), !this.stores?.schedulerConfig?.state.currentUser && (h("slot", { name: "login-required" }, h(LoginRequired, { authenticationUrl: this.authenticationUrl })))));
+        return (h(Host, { key: '9cff01340fae6ec631ddeaa1656eeedc47af9179' }, h("div", { key: '1c79bfbdf35dd6a1ebb7624d4b9f660e6e5acf14', class: "scheduler-editor-header", part: "nse__header" }, h("h1", { key: 'cc5b67f761d7f00ad88ec0d22a983d9e72634df2', class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { key: '730375a8d474dc546a33e6fd264b51576562292c', width: "18", height: "18" }), "Scheduler editor"), h("button", { key: '41b1c5604d6f4c4e6c057f69241e4aab92682396', class: "scheduler-editor-close", title: "logout", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { key: '09f961c3ab6601edf9bfbc89b97bd7fdbff90a6b', width: "18", height: "18" }))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === null && (h("div", { class: "list-configurations" }, h("nylas-list-configurations", null))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'create' && (h("nylas-editor-tabs", { mode: "composable" }, h(ExpressFlow, null))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'edit' && (h("nylas-editor-tabs", { mode: this.mode }, this.mode === 'composable' && h("slot", null))), !this.stores?.schedulerConfig?.state.currentUser && (h("slot", { name: "login-required" }, h(LoginRequired, { authenticationUrl: this.authenticationUrl })))));
     }
     static get is() { return "nylas-scheduler-editor"; }
     static get encapsulation() { return "shadow"; }
@@ -235,7 +235,7 @@ export class NylasSchedulerEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "SchedulerEditorEventOverride",
-                    "resolved": "Partial<{ valueChanged: (event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: ((event: CustomEvent<{ value: string[]; name: string; }>) => void) | undefined; } | { value: string; name: string; valueChanged?: ((event: CustomEvent<{ value: string; name: string; }>) => void) | undefined; } | { value: string; name: string; } | { value: string; name: string; } | { value: string; name: string; } | { value: { openHours: OpenHours[]; timezone: string; }; name: string; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; formSubmitted: (event: CustomEvent<void>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; schedulerConfigChanged: (event: CustomEvent<SchedulerEventDetail>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelButtonClick: (event: CustomEvent<void>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; previewButtonClicked: (event: CustomEvent<HTMLNylasEditorTabsElement>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; initListConfigurations: (event: CustomEvent<HTMLNylasListConfigurationsElement>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; createButtonClick: (event: CustomEvent<HTMLNylasListConfigurationsElement>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; editButtonClick: (event: CustomEvent<{ host: HTMLNylasListConfigurationsElement; configuration: Configuration; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; deleteButtonClick: (event: CustomEvent<{ host: HTMLNylasListConfigurationsElement; configuration: Configuration; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; }> & EventOverride<NylasSchedulerConfigConnectorInterface>",
+                    "resolved": "Partial<{ valueChanged: (event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: ((event: CustomEvent<{ value: string[]; name: string; }>) => void) | undefined; } | { value: string; name: string; valueChanged?: ((event: CustomEvent<{ value: string; name: string; }>) => void) | undefined; } | { value: string; name: string; } | { value: string; name: string; } | { value: string; name: string; } | { value: string; name: string; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; formSubmitted: (event: CustomEvent<void>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; schedulerConfigChanged: (event: CustomEvent<SchedulerEventDetail>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelButtonClick: (event: CustomEvent<void>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; previewButtonClicked: (event: CustomEvent<HTMLNylasEditorTabsElement>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; initListConfigurations: (event: CustomEvent<HTMLNylasListConfigurationsElement>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; createButtonClick: (event: CustomEvent<HTMLNylasListConfigurationsElement>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; editButtonClick: (event: CustomEvent<{ host: HTMLNylasListConfigurationsElement; configuration: Configuration; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; deleteButtonClick: (event: CustomEvent<{ host: HTMLNylasListConfigurationsElement; configuration: Configuration; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; }> & EventOverride<NylasSchedulerConfigConnectorInterface>",
                     "references": {
                         "SchedulerEditorEventOverride": {
                             "location": "import",

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

@@ -254,7 +254,7 @@ export class TimeInput {
         }
     }
     render() {
-        return (h(Host, { key: '3dcb132dc120ec0a5d6a87f7570ab80cb2e7ea4d' }, h("div", { key: '2c7cedc0ada83478cfbf494aec47a7ea74ef75a2', class: "time-picker", part: "time-picker" }, h("input", { key: '2aa4c3f63baf9a757bbc4bc328a4533f072371e8', type: "text", name: this.name, id: this.name, part: "time-input", class: {
+        return (h(Host, { key: 'e6e899509659691432e600fb64b1f4964d737e8f' }, h("div", { key: '6f177a2b2963e2462b842c26553f0059518dd713', class: "time-picker", part: "time-picker" }, h("input", { key: '4d290b135afdb54edcadb2279b5c18f9b1ed6ee1', type: "text", name: this.name, id: this.name, part: "time-input", class: {
                 'time-input': true,
                 'error': !!this.err || this.hasError,
             }, ref: el => (this.timeInput = el), value: this.time, onClick: () => {

package/dist/collection/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.js

@@ -115,9 +115,9 @@ export class NylasTimeslotInterval {
             { value: '45', label: '45 mins' },
             { value: '60', label: '60 mins' },
         ];
-        return (h(Host, { key: '9c18133d3cbd15e000d01a96e263a6733dcc8e99' }, h("div", { key: '7bd06065aafe18728f36459b77d7fc4806822f10', class: "nylas-timeslot-interval", part: "nti" }, h("div", { key: '15746bf796ff8c9e4fd53ddd90f63916050ee04b', class: "header", part: "nti__header" }, h("h3", { key: 'aa810ca197364fd7733cbf130b873c3d818faeb1' }, "Time-slot interval preferences"), h("p", { key: '82bc4717c917713f17e6bee8623a949e2bfef8e0' }, "Choose your interval preference for time-slots.")), h("div", { key: 'ee4fa651eda5c579122dde7ee2982a4d72463d57', class: "nylas-timeslot-interval__dropdown" }, h("span", { key: '81ebbbb0387a3bce67475cc8f4dc87ccca6c0bde', class: "label", part: "nti__input-label" }, "Select interval preference", h("tooltip-component", { key: '461710561b0433a0b11cfe94ee3992caf5e3219d' }, h("info-icon", { key: '76afb5257805385077723d9023f10186dbb7beff', slot: "tooltip-icon" }), h("span", { key: 'e1b549b0b9da7c25a98bb65f5f190ad0c491efa5', slot: "tooltip-content" }, "Set the interval preference for the time-slots."))), h("select-dropdown", { key: '9aca7454f181f124346314b775c21e1cb9d73268', name: "booking-calendar", options: intervalPreferenceOptions, withSearch: false, exportparts: "sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content", defaultSelectedOption: this.defaultIntervalMinutes == this.eventDurationMinutes
+        return (h(Host, { key: 'ebad4dc8f82dc565f4608c262d54f06495a69144' }, h("div", { key: '46641f5cd23afc527d14c57fa62fe2627d1a92f5', class: "nylas-timeslot-interval", part: "nti" }, h("div", { key: '729c8356b955ba357bd00f3cdf28c51bb42b741d', class: "header", part: "nti__header" }, h("h3", { key: '348543e170e107ea65c74a6154739627e7c4a271' }, "Time-slot interval preferences"), h("p", { key: '1cf34b79990edef1950d6c970932e5e0805e6d0a' }, "Choose your interval preference for time-slots.")), h("div", { key: '965fe8f8e235f9696bc237bc7774ca6fdea2cd42', class: "nylas-timeslot-interval__dropdown" }, h("span", { key: '6346e2f31c9322cc3264885f362ce2b29c4a4c2e', class: "label", part: "nti__input-label" }, "Select interval preference", h("tooltip-component", { key: '27901960cae97d4809153aac5d427c8c2ff7bf1e' }, h("info-icon", { key: '94c81d2c169da3714d2a1955da0fbe542b688fb6', slot: "tooltip-icon" }), h("span", { key: '6e8660e7696c16d81214d97e5e2087579f9fa1bd', slot: "tooltip-content" }, "Set the interval preference for the time-slots."))), h("select-dropdown", { key: '49b886894bb4d405ed13578809609511830389f1', name: "booking-calendar", options: intervalPreferenceOptions, withSearch: false, exportparts: "sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content", defaultSelectedOption: this.defaultIntervalMinutes == this.eventDurationMinutes
                 ? intervalPreferenceOptions[0]
-                : intervalPreferenceOptions.find(op => op.value == this.defaultIntervalMinutes.toString()) ?? intervalPreferenceOptions[0] }), h("span", { key: 'c035b67e0d48587909166fc254263e0c3132a802', class: "label", part: "nti__input-label" }, "Select the type of time-slot rounding", h("tooltip-component", { key: '7319296977085837167db8032c6e64da5c7a2de2' }, h("info-icon", { key: 'f5a4f712492db6dc31dbc951b1dc510db18b3de8', slot: "tooltip-icon" }), h("span", { key: '1e2ea5c7453132f26dec5b179bf91d2908b64060', slot: "tooltip-content" }, "Select if you want to round the time slots to the nearest interval."))), h("radio-button-group", { key: '871c8f566df35a7bc1db98eda4610d2f4b76ad85', name: "interval-preference", defaultSelectedValue: this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? 'rounding' : 'no-rounding', options: [
+                : intervalPreferenceOptions.find(op => op.value == this.defaultIntervalMinutes.toString()) ?? intervalPreferenceOptions[0] }), h("span", { key: '40079758106c1e7075b247f81a3bc30e11eb1138', class: "label", part: "nti__input-label" }, "Select the type of time-slot rounding", h("tooltip-component", { key: 'c1a1b86a732439b5474be36a1eb67d0a1fabe52c' }, h("info-icon", { key: '9e185781f8def48475c5f65cff916e5be6423b72', slot: "tooltip-icon" }), h("span", { key: 'df108083daab268e8980194ebff8485c945aab1c', slot: "tooltip-content" }, "Select if you want to round the time slots to the nearest interval."))), h("radio-button-group", { key: 'eb4c58b028ac0e2dd0468c30c1839558ae57178a', name: "interval-preference", defaultSelectedValue: this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? 'rounding' : 'no-rounding', options: [
                 { value: 'no-rounding', label: 'Default', description: 'Time-slots will be rounded to the nearest quarter-hour.' },
                 {
                     value: 'rounding',

package/dist/components/add-circle.js

@@ -10,7 +10,7 @@ const AddCircleIcon = proxyCustomElement(class AddCircleIcon extends HTMLElement
         this.height = '25';
     }
     render() {
-        return (h("svg", { key: '782fe7efbe621971c56deeeb6ced5aed9715b6e1', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e704848d80e541a418212fc6d2ac0c148ba5a6d1', d: "M12 2.5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10 4.477-10 10-10ZM12 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 3.5a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7.5Z", fill: "currentColor" })));
+        return (h("svg", { key: '61927c69799c46729dc3fd834e12d85039949e97', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9dda19a5a0521e3f26a5198af34e4a0b63778d57', d: "M12 2.5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10 4.477-10 10-10ZM12 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 3.5a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7.5Z", fill: "currentColor" })));
     }
     static get style() { return iconCss; }
 }, [2, "add-circle-icon", {

package/dist/components/archive.js

@@ -10,7 +10,7 @@ const ArchiveIcon = proxyCustomElement(class ArchiveIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: '418039a2785e3740d4f7f8cdc55edf72b52e3d93', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '24a9ed08a61b1ac9f73c58eeb63d36c1c2e814d4', d: "M3 6H5H21", stroke: "auto", "stroke-width": "1.5" }), h("path", { key: 'c9d1899e251a6a5418653417c5fc6a3a63a56c3b', d: "M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z", stroke: "auto", "stroke-width": "1.5" }), h("path", { key: '84d8bc7e44365fabe9311f9a99c1a14c40a8f4de', d: "M10 11V17", stroke: "auto", "stroke-width": "1.5" }), h("path", { key: '148027ffbc9744d02ab0ddedb2e9f9aefb5d3060', d: "M14 11V17", stroke: "auto", "stroke-width": "1.5" })));
+        return (h("svg", { key: 'edc983b37da8e7db7e2a11558a1b138dbb1abc3f', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4893693be863eef5e74928bc1d133164716d1b0b', d: "M3 6H5H21", stroke: "auto", "stroke-width": "1.5" }), h("path", { key: '1e647ff0a8d56a69c31ce256d3afe45801af8b2e', d: "M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z", stroke: "auto", "stroke-width": "1.5" }), h("path", { key: '09fff62dff0e658fdb49bb49637a1f2751380836', d: "M10 11V17", stroke: "auto", "stroke-width": "1.5" }), h("path", { key: '5caf6df24bc511fdc3ab7a3f6b5845d24ec46fca', d: "M14 11V17", stroke: "auto", "stroke-width": "1.5" })));
     }
     static get style() { return iconCss; }
 }, [2, "archive-icon", {

package/dist/components/arrow.js

@@ -10,7 +10,7 @@ const ArrowIcon = proxyCustomElement(class ArrowIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: 'e7497355cd40f954aebe8fa1cea719a0265afc8b', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '85246706016370c533b494b84c2336f24653485d', d: "M5 12H19M12 5L19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        return (h("svg", { key: 'f91776b937b299747bf935bbb23979633d1ca9eb', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '689c1b704163a79dc3f9f725b466325a9784778f', d: "M5 12H19M12 5L19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
     static get style() { return iconCss; }
 }, [2, "arrow-icon", {

package/dist/components/bold.js

@@ -10,7 +10,7 @@ const BoldIcon = proxyCustomElement(class BoldIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: 'ba0de60e850b0cc175debe770c0828d786d75337', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '26078f0661cee64fbdafbe006182e3bc028d2ef9', d: "M6 4V20M9.5 4H15.5C17.7091 4 19.5 5.79086 19.5 8C19.5 10.2091 17.7091 12 15.5 12H9.5H16.5C18.7091 12 20.5 13.7909 20.5 16C20.5 18.2091 18.7091 20 16.5 20H9.5M9.5 4V20M9.5 4H4M9.5 20H4", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        return (h("svg", { key: 'b939b233b3fd5b1117e775ac1591015538c370b3', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7c21770a23aef69e831b7943c0a994a2dc6425c3', d: "M6 4V20M9.5 4H15.5C17.7091 4 19.5 5.79086 19.5 8C19.5 10.2091 17.7091 12 15.5 12H9.5H16.5C18.7091 12 20.5 13.7909 20.5 16C20.5 18.2091 18.7091 20 16.5 20H9.5M9.5 4V20M9.5 4H4M9.5 20H4", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
     static get style() { return iconCss; }
 }, [2, "bold-icon", {

package/dist/components/button-component2.js

@@ -17,7 +17,7 @@ const ButtonComponent = proxyCustomElement(class ButtonComponent extends HTMLEle
     }
     render() {
         const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');
-        return (h("button", { key: 'e384a27359c08f60670fd25909d2510b9d7e5bb6', class: className, disabled: this.disabled, type: "type", onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, h("slot", { key: '0913c3c782a922a16abcdb4c4964e008bb71f193' })));
+        return (h("button", { key: 'bee09000c1e5c4fd748032ed56db6f36d307ce77', class: className, disabled: this.disabled, type: "type", onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, h("slot", { key: 'bedb527775bf845d865d7abb47cc409fe1245a27' })));
     }
     static get style() { return buttonComponentCss; }
 }, [6, "button-component", {

package/dist/components/calendar-cancel.js

@@ -10,7 +10,7 @@ const CalendarCancelIcon = proxyCustomElement(class CalendarCancelIcon extends H
         this.height = '20';
     }
     render() {
-        return (h("svg", { key: 'b1f37a30638b4e048e69a66a282c5722022898d0', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f147099684e55abd25ec0a92918a13d0d1fd0888', d: "M14.5 9a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm-2.476 3.024a.5.5 0 0 0 0 .707l1.769 1.77-1.767 1.766a.5.5 0 1 0 .707.708l1.767-1.767 1.77 1.769a.5.5 0 1 0 .707-.707L15.208 14.5l1.771-1.77a.5.5 0 0 0-.707-.707l-1.771 1.77-1.77-1.77a.5.5 0 0 0-.707 0ZM14.75 0A3.25 3.25 0 0 1 18 3.25l.001 5.773a6.47 6.47 0 0 0-1.5-.71L16.5 5.5h-15v9.25c0 .966.784 1.75 1.75 1.75h5.064a6.47 6.47 0 0 0 .709 1.501L3.25 18A3.25 3.25 0 0 1 0 14.75V3.25A3.25 3.25 0 0 1 3.25 0h11.5Zm0 1.5H3.25A1.75 1.75 0 0 0 1.5 3.25V4h15v-.75a1.75 1.75 0 0 0-1.75-1.75Z", fill: "currentColor" })));
+        return (h("svg", { key: 'fb587c9cf98886a8530da9d21fd08c86a60ae265', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '195db44fb75f5fa08efed7f28e1b897772f6f643', d: "M14.5 9a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm-2.476 3.024a.5.5 0 0 0 0 .707l1.769 1.77-1.767 1.766a.5.5 0 1 0 .707.708l1.767-1.767 1.77 1.769a.5.5 0 1 0 .707-.707L15.208 14.5l1.771-1.77a.5.5 0 0 0-.707-.707l-1.771 1.77-1.77-1.77a.5.5 0 0 0-.707 0ZM14.75 0A3.25 3.25 0 0 1 18 3.25l.001 5.773a6.47 6.47 0 0 0-1.5-.71L16.5 5.5h-15v9.25c0 .966.784 1.75 1.75 1.75h5.064a6.47 6.47 0 0 0 .709 1.501L3.25 18A3.25 3.25 0 0 1 0 14.75V3.25A3.25 3.25 0 0 1 3.25 0h11.5Zm0 1.5H3.25A1.75 1.75 0 0 0 1.5 3.25V4h15v-.75a1.75 1.75 0 0 0-1.75-1.75Z", fill: "currentColor" })));
     }
     static get style() { return iconCss; }
 }, [2, "calendar-cancel-icon", {

package/dist/components/calendar-check.js

@@ -10,7 +10,7 @@ const CalendarCheckIcon = proxyCustomElement(class CalendarCheckIcon extends HTM
         this.height = '20';
     }
     render() {
-        return (h("svg", { key: '2dd3abcd93cdfe09325e737f9a451bc3de56ed49', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd46bd482111c2cd20d91d5a9bf96b9b067a848c6', fill: "currentColor", d: "M14.75 0C16.5449 0 18 1.45507 18 3.25V9.02182C17.5368 8.72526 17.0335 8.48584 16.5 8.3135V5.5H1.5V14.75C1.5 15.7165 2.2835 16.5 3.25 16.5H8.3135C8.48584 17.0335 8.72526 17.5368 9.02182 18H3.25C1.45507 18 0 16.5449 0 14.75V3.25C0 1.45507 1.45507 0 3.25 0H14.75ZM14.75 1.5H3.25C2.2835 1.5 1.5 2.2835 1.5 3.25V4H16.5V3.25C16.5 2.2835 15.7165 1.5 14.75 1.5ZM20 14.5C20 17.5376 17.5376 20 14.5 20C11.4624 20 9 17.5376 9 14.5C9 11.4624 11.4624 9 14.5 9C17.5376 9 20 11.4624 20 14.5ZM17.8536 12.1464C17.6583 11.9512 17.3417 11.9512 17.1464 12.1464L13.5 15.7929L11.8536 14.1464C11.6583 13.9512 11.3417 13.9512 11.1464 14.1464C10.9512 14.3417 10.9512 14.6583 11.1464 14.8536L13.1464 16.8536C13.3417 17.0488 13.6583 17.0488 13.8536 16.8536L17.8536 12.8536C18.0488 12.6583 18.0488 12.3417 17.8536 12.1464Z" })));
+        return (h("svg", { key: '42f09a7de40d3a8e3057ffe5ac4e830529d3ffd4', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '98a99f4d91ed85319a0f699038036eb7cac9bf6e', fill: "currentColor", d: "M14.75 0C16.5449 0 18 1.45507 18 3.25V9.02182C17.5368 8.72526 17.0335 8.48584 16.5 8.3135V5.5H1.5V14.75C1.5 15.7165 2.2835 16.5 3.25 16.5H8.3135C8.48584 17.0335 8.72526 17.5368 9.02182 18H3.25C1.45507 18 0 16.5449 0 14.75V3.25C0 1.45507 1.45507 0 3.25 0H14.75ZM14.75 1.5H3.25C2.2835 1.5 1.5 2.2835 1.5 3.25V4H16.5V3.25C16.5 2.2835 15.7165 1.5 14.75 1.5ZM20 14.5C20 17.5376 17.5376 20 14.5 20C11.4624 20 9 17.5376 9 14.5C9 11.4624 11.4624 9 14.5 9C17.5376 9 20 11.4624 20 14.5ZM17.8536 12.1464C17.6583 11.9512 17.3417 11.9512 17.1464 12.1464L13.5 15.7929L11.8536 14.1464C11.6583 13.9512 11.3417 13.9512 11.1464 14.1464C10.9512 14.3417 10.9512 14.6583 11.1464 14.8536L13.1464 16.8536C13.3417 17.0488 13.6583 17.0488 13.8536 16.8536L17.8536 12.8536C18.0488 12.6583 18.0488 12.3417 17.8536 12.1464Z" })));
     }
     static get style() { return iconCss; }
 }, [2, "calendar-check-icon", {