npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.5 → 1.1.0-canary.8 - Mend

@nylas/web-elements 1.1.0-canary.5 → 1.1.0-canary.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (807) hide show

package/dist/nylas-web-elements/nylas-availability-picker.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug, s as timeToMinutes, v as convertTo12HourFormat, w as minutesToTime, x as convertTo24HourFormat } from './utils-73d8a928.js';
-import { T as TIMEZONE_MAP } from './constants-335dffcf.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug, s as timeToMinutes, v as convertTo12HourFormat, w as minutesToTime, x as convertTo24HourFormat } from './utils-3e18e0b2.js';
+import { T as TIMEZONE_MAP } from './constants-bf39e913.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasAvailabilityPickerCss = ":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-availability-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-availability-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-availability-picker .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-availability-picker .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-availability-picker .content{padding:1rem;color:var(--nylas-base-900);font-size:16px;font-family:var(--nylas-font-family)}@media screen and (max-width: 504px){.nylas-availability-picker .content{font-size:15px}}.nylas-availability-picker .content .select-timezone{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nylas-base-200);padding-bottom:1rem;gap:1rem}.nylas-availability-picker .content .select-timezone h4{display:flex;gap:0.5rem;align-items:center;margin:0;font-size:16px;font-weight:500;line-height:20px}@media screen and (max-width: 504px){.nylas-availability-picker .content .select-timezone h4{font-size:15px}}.nylas-availability-picker .content .select-timezone select-dropdown{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-availability-picker .content .availability{display:flex;flex-direction:column;gap:1rem;padding:0 0.5rem;margin:1rem 0}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability{gap:0.5rem;padding:0}}.nylas-availability-picker .content .availability .availability-day{display:grid;grid-template-columns:minmax(auto, 65px) 1fr minmax(auto, 40px);gap:1rem;align-items:baseline}@media screen and (max-width: 768px){.nylas-availability-picker .content .availability .availability-day{grid-template-columns:78px 1fr auto}}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day{display:inline-grid;gap:8px;grid-template-columns:60px 1fr auto}}.nylas-availability-picker .content .availability .availability-day .day{display:flex;gap:0.5rem;align-items:center}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .day{gap:0.25rem}}.nylas-availability-picker .content .availability .availability-day .day input[type=checkbox]{transform:scale(1.3)}.nylas-availability-picker .content .availability .availability-day .time-ranges span.unavailable{height:48px;display:flex;align-items:center;justify-content:center}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{justify-content:unset;gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{display:flex;gap:1rem}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers span{margin-top:0.75rem}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range:not(:last-of-type){margin-bottom:1rem}.nylas-availability-picker .content .availability .availability-day .time-ranges p.error{color:var(--nylas-error)}.nylas-availability-picker .content .availability .availability-day button{border:none;background:transparent;height:40px;cursor:pointer;color:var(--nylas-base-800)}.nylas-availability-picker .content .availability .availability-day button:hover,.nylas-availability-picker .content .availability .availability-day button:active{color:var(--nylas-primary)}";
@@ -31,6 +31,7 @@ const NylasAvailabilityPicker = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        this.selectedConfiguration = undefined;
         this.openHours = undefined;
         this.name = 'availability';
         this.defaultTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -50,10 +51,19 @@ const NylasAvailabilityPicker = class {
         debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    configChangedHandler(newConfig) {
+        const organizerParticipant = newConfig?.participants?.find(p => p.is_organizer);
+        if (organizerParticipant && organizerParticipant?.availability?.open_hours) {
+            this.openHoursToSchedule(organizerParticipant?.availability?.open_hours);
+        }
+    }
     scheduleChanged(newValue, oldValue) {
         if (newValue !== oldValue) {
             this.valueChanged.emit({
-                value: this.scheduleToOpenHours(newValue, this.timezone),
+                value: {
+                    openHours: this.scheduleToOpenHours(newValue),
+                    timezone: this.timezone,
+                },
                 name: this.name,
             });
             let overlapDays = {};
@@ -78,7 +88,10 @@ const NylasAvailabilityPicker = class {
             }
             else {
                 this.internals.setValidity({ customError: false });
-                this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(newValue, this.timezone)));
+                this.internals.setFormValue(JSON.stringify({
+                    openHours: this.scheduleToOpenHours(this.schedule),
+                    timezone: this.timezone,
+                }));
             }
         }
     }
@@ -89,7 +102,10 @@ const NylasAvailabilityPicker = class {
             if (typeof this.internals.setFormValue !== 'function') {
                 return;
             }
-            this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(this.schedule, this.timezone)));
+            this.internals.setFormValue(JSON.stringify({
+                openHours: this.scheduleToOpenHours(this.schedule),
+                timezone: this.timezone,
+            }));
         }
     }
     connectedCallback() {
@@ -105,12 +121,15 @@ const NylasAvailabilityPicker = class {
     componentDidLoad() {
         debug('nylas-availability-picker', 'componentDidLoad');
         if (this.openHours && this.openHours.length > 0) {
-            this.updateSchedule(this.openHours);
+            this.openHoursToSchedule(this.openHours);
         }
         if (typeof this.internals.setFormValue !== 'function') {
             return;
         }
-        this.internals.setFormValue(JSON.stringify(this.scheduleToOpenHours(this.schedule, this.timezone)));
+        this.internals.setFormValue(JSON.stringify({
+            openHours: this.scheduleToOpenHours(this.schedule),
+            timezone: this.timezone,
+        }));
     }
     getOverlaps(timeRanges) {
         let timeRangesInMinutes = timeRanges.map((range, index) => ({
@@ -203,7 +222,7 @@ const NylasAvailabilityPicker = class {
             this.internals.setValidity({ customError: true }, `Invalid ${timeType} time`, element);
         }
     }
-    updateSchedule(openHours) {
+    openHoursToSchedule(openHours) {
         const newSchedule = {
             SUN: [],
             MON: [],
@@ -233,17 +252,14 @@ const NylasAvailabilityPicker = class {
                 }
             });
         });
-        if (openHours.length === 0) {
-            this.timezone = openHours[0].timezone;
-        }
-        this.timezone = openHours[0].timezone;
+        this.timezone = this.defaultTimezone;
         this.schedule = newSchedule;
     }
     getDayKey(dayIndex) {
         const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
         return days[dayIndex];
     }
-    scheduleToOpenHours(schedule, timezone = 'UTC') {
+    scheduleToOpenHours(schedule) {
         const dayKeys = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
         let openHoursMap = new Map();
         dayKeys.forEach((dayKey, index) => {
@@ -271,7 +287,6 @@ const NylasAvailabilityPicker = class {
                 days: value.days,
                 start: value.start,
                 end: value.end,
-                timezone: timezone,
             });
         });
         return selectedOpenHours;
@@ -281,7 +296,7 @@ const NylasAvailabilityPicker = class {
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: '440dc2f314a9c47eb8186f4ed965ed3052301ddf' }, h("div", { key: '2d31ef10ae53275fc065f4e9f68c32f42b60d829', class: "nylas-availability-picker" }, h("div", { key: 'aa6695b6054b81ece7ede5f5e089545a041800f6', class: "header", part: "nap__header" }, h("h3", { key: '86e0d18ca7b70d74159c5cead0d6f5a17a145fa7' }, "General availability"), h("p", { key: '05da67e03befbe936793af5ee98f801b512d28e7' }, "Set your availability for scheduling meetings.")), h("div", { key: '84c6bf714ccea4aff07d6e660d8ca3f96ce9a8cc', class: "content" }, h("div", { key: '16edf74e06bed5440df5f5ea73e90cfa83d08b29', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '1025677efcaf114cb86ce57324c299eeea79b37e', class: "sub-header" }, "Select timezone", h("span", { key: '6d65a6457da202c5a3d5c5cd4e185903a12cec7f', class: "icon" }, h("tooltip-component", { key: '61a40ea06c06f1d306a8b352d9ae883d09768249' }, h("info-icon", { key: '2d447cc2e6a619ee7b1cf1fd3e2b6424fcd6db5b', slot: "tooltip-icon" }), h("span", { key: '35742354ba0841bc1c17170094bab09d536208e6', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '3532c95b077fc701cdbf89cd13668acc675cf0e4', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'c1e870c593966e29d72c3f519f3309f84e4b9a9a', slot: "select-icon" }, h("globe-icon", { key: 'df23e31168778926b6118651cd636ab801f062f1', width: "20", height: "20" })))), h("div", { key: '5ad8cf7078dc104d1258f77e1c69bebf8c82d8dd', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: '396ba889df619966df24cb5eb33de1a77be3a2ba' }, h("div", { key: 'bb2a28befc3aa0481fe265a6af99049b528fca42', class: "nylas-availability-picker" }, h("div", { key: '729c24276d5e773dfbc67791fede7aa0c0bcc747', class: "header", part: "nap__header" }, h("h3", { key: 'ba7c73778a8b3dd197ca850cead346d2f00836b7' }, "General availability"), h("p", { key: '6f946e8e00921f0620b16a3412f290f176dd5b9b' }, "Set your availability for scheduling meetings.")), h("div", { key: '7753c38b6160be28c495cc9803015e0dc0003b2a', class: "content" }, h("div", { key: '8d79379263f772f29443b24f5996d017db12e764', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: 'e6a3658ecf3d92c0dda352532a3a0c71fb59f96e', class: "sub-header" }, "Select timezone", h("span", { key: 'fdb95f85f111a1557897309ff0bd682a77499684', class: "icon" }, h("tooltip-component", { key: '37b47d8e5b24bd4620e6be932ea23c8553b4822f' }, h("info-icon", { key: 'f1192d767cc0e1c67f989b47af093e3539d7c55c', slot: "tooltip-icon" }), h("span", { key: '2b3b949fc18e0118199a3ed9668ec0ca19283c79', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '4729bd6e7b7c05a3fb47cf94010a00db51394c7e', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: '2157b7fb691541f42713a77dc1338dbb9f0e26c2', slot: "select-icon" }, h("globe-icon", { key: '17138c37b7df667e46873af1caa5278120fa4ce1', width: "20", height: "20" })))), h("div", { key: '9a49a84812b5fb544ebfd07d5dd1aba35679224e', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
             return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "nap__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
@@ -304,12 +319,14 @@ const NylasAvailabilityPicker = class {
     get host() { return getElement(this); }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["configChangedHandler"],
         "schedule": ["scheduleChanged"]
     }; }
 };
 __decorate([
     RegisterComponent({
         name: 'nylas-availability-picker',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

package/dist/nylas-web-elements/nylas-availability-picker.entry.js.map CHANGED Viewed

package/dist/nylas-web-elements/nylas-booked-event-card.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, a as Host } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug } from './utils-73d8a928.js';
-import { T as TIMEZONE_MAP } from './constants-335dffcf.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug } from './utils-3e18e0b2.js';
+import { T as TIMEZONE_MAP } from './constants-bf39e913.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasBookedEventCardCss = ":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}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:1rem;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;padding:8px;font-family:var(--nylas-font-family);font-weight:600;height:48px;line-height:24px}sp-button.cancel{color:var(--nylas-error)}sp-button.cancel:hover,sp-button.cancel:focus{border-color:var(--nylas-error)}sp-button.cancel:active{color:var(--nylas-error-pressed);border-color:var(--nylas-error-pressed)}sp-button.reschedule:hover,sp-button.reschedule:focus{border-color:var(--nylas-primary)}sp-button.reschedule:active{border-color:var(--nylas-base-600)}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";

package/dist/nylas-web-elements/nylas-booking-calendar-picker.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasBookingCalendarPickerCss = ":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-booking-calendar-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-booking-calendar-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-booking-calendar-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-booking-calendar-picker .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-booking-calendar-picker .nylas-booking-calendar-picker__loading{padding-bottom:1rem;display:flex;flex-direction:column;gap:4px}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .loading-button span{padding:0 1rem}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown{padding:1rem;display:flex;flex-direction:column;gap:4px}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label tooltip-component{display:flex}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
@@ -31,7 +31,8 @@ const NylasBookingCalendarPicker = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.calendars = undefined;
-        this.name = 'calendar';
+        this.currentUser = undefined;
+        this.name = 'booking-calendar';
         this.defaultBookingCalendar = '';
         this.selectedCalendar = '';
     }
@@ -47,10 +48,11 @@ const NylasBookingCalendarPicker = class {
     }
     componentDidLoad() {
         debug('nylas-booking-calendar-picker', 'componentDidLoad');
+        this.defaultBookingCalendar = this.defaultBookingCalendar || this.currentUser?.email || '';
         if (typeof this.internals.setFormValue === 'function') {
             this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');
         }
-        this.selectedCalendar = this.defaultBookingCalendar;
+        this.selectedCalendar = this.defaultBookingCalendar || this.currentUser?.email || '';
     }
     componentWillUpdate() {
         debug('nylas-booking-calendar-picker', 'componentWillUpdate');
@@ -73,9 +75,9 @@ const NylasBookingCalendarPicker = class {
         const valueChanged = (event) => {
             const { value } = event.detail;
             this.selectedCalendar = value;
-            this.internals.setFormValue(value.toString(), 'booking-calendar');
+            this.internals.setFormValue(value.toString(), this.name);
         };
-        this.valueChanged.emit({ ...event.detail, valueChanged });
+        this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });
     }
     render() {
         const calendarOptions = this.calendars?.map(calendar => {
@@ -95,6 +97,10 @@ const NylasBookingCalendarPicker = class {
 __decorate([
     RegisterComponent({
         name: 'nylas-booking-calendar-picker',
+        stateToProps: new Map([
+            ['schedulerConfig.calendars', 'calendars'],
+            ['schedulerConfig.currentUser', 'currentUser'],
+        ]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChanged } = event.detail;

package/dist/nylas-web-elements/nylas-booking-calendar-picker.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-booking-calendar-picker.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-booking-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-booking-calendar-picker__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar;\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\" part=\"nbcp__input-label\">\n Select a calendar to book meetings on\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booking-calendar-picker.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-booking-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-booking-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: black;\n font-size: 1rem;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n span {\n padding: 0 1rem;\n }\n }\n }\n .nylas-booking-calendar-picker__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\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 { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n The default selected calendars.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected calendars change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\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-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'selectedOptionChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\" part=\"nbcp__input-label\">\n Select a calendar to book meetings on\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/nylas-web-elements/nylas-booking-form.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasBookingFormCss = ":host{display:block;height:100%;--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}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto;height:100%}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}sp-textfield{--spectrum-corner-radius-100:var(--nylas-border-radius-2x);--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;color:var(--nylas-base-500)}.cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:10px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{flex-direction:column-reverse}}sp-button{background-color:transparent;color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);--button-width:50%;font-family:var(--nylas-font-family);font-size:16px;font-weight:600;border:none;height:48px;padding:14px}@media screen and (max-width: 768px){sp-button{--button-width:100%}}sp-button:hover,sp-button:focus{background-color:var(--nylas-base-100);color:var(--nylas-primary);border-radius:var(--nylas-border-radius-2x)}sp-button:active{background-color:var(--nylas-base-200);color:var(--nylas-base-800)}sp-button.back{width:var(--button-width);background-color:transparent;color:var(--nylas-base-700);outline:1px solid var(--nylas-base-300)}sp-button.back:hover,sp-button.back:focus{outline-color:var(--nylas-primary)}sp-button.back:active{outline:2px solid var(--nylas-base-600)}sp-button.book{width:var(--button-width);background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.book:hover,sp-button.book:focus{background-color:var(--nylas-base-600)}sp-button.book:active{background-color:var(--nylas-base-800)}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper input::placeholder{color:var(--nylas-base-300)}.input-wrapper label,.input-wrapper input{font-family:var(--nylas-font-family)}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}sp-infield-button{--spectrum-infield-button-background-color:transparent;--spectrum-infield-button-background-color-hover:transparent;--spectrum-infield-button-background-color-active:transparent;--spectrum-infield-button-border-color:transparent;--spectrum-infield-button-border-width:1px;--spectrum-infield-button-border-radius:0;color:var(--nylas-base-600);background:transparent;border:none;outline:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;height:52px;width:52px;display:flex;position:absolute;right:0;align-items:center;justify-content:center;cursor:pointer}sp-infield-button sp-icon-cross300{color:var(--nylas-base-600)}sp-infield-button.error{border-width:2px;border-color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text].guest-email,input[type=email].guest-email{color:var(--nylas-base-900);padding-right:52px}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}";

package/dist/nylas-web-elements/nylas-buffer-time.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasBufferTimeCss = ":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-buffer-time{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-buffer-time .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-buffer-time .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-buffer-time .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-buffer-time .nylas-buffer-time__body{display:grid;grid-template-columns:1fr auto}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--nylas-base-200)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row label{width:200px}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row .dropdown-container{display:flex;gap:1rem;align-items:center}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:200px;padding:1rem;background:var(--nylas-base-25);border-bottom-right-radius:var(--nylas-border-radius-2x)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview h4{font-size:12px;line-height:24px;color:var(--nylas-base-600);font-family:var(--nylas-font-family);font-weight:500;text-align:center}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot{background-color:transparent;border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot.active{background-color:var(--nylas-base-100)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot:last-of-type{border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .event-slot{background-color:var(--nylas-base-600);border-top:1px solid var(--nylas-base-300);border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button){width:104px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-content){width:100%}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";

package/dist/nylas-web-elements/nylas-calendar-picker.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-e5afe237.js';
-import { a as debug } from './utils-73d8a928.js';
+import { R as RegisterComponent } from './register-component-ff6f5df4.js';
+import { a as debug } from './utils-3e18e0b2.js';
 import './_commonjsHelpers-7c16df4a.js';
 const nylasCalendarPickerCss = ":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-calendar-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-calendar-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-calendar-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-calendar-picker .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-calendar-picker .nylas-calendar-picker__loading{padding-bottom:1rem;display:flex;flex-direction:column;gap:4px}.nylas-calendar-picker .nylas-calendar-picker__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-calendar-picker .nylas-calendar-picker__loading .label tooltip-component{display:flex}.nylas-calendar-picker .nylas-calendar-picker__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-calendar-picker .nylas-calendar-picker__loading .loading-button span{padding:0 1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown{padding:1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown){width:100%;display:flex;flex-direction:column;gap:4px}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-content){width:100%;max-width:unset}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
@@ -31,11 +31,15 @@ const NylasCalendarPicker = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.calendars = undefined;
-        this.organizerEmail = undefined;
+        this.currentUser = undefined;
         this.name = 'calendar';
         this.defaultSelectedCalendars = [];
         this.selectedCalendars = [];
     }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
     connectedCallback() {
         debug('nylas-calendar-picker', 'connectedCallback');
     }
@@ -64,10 +68,6 @@ const NylasCalendarPicker = class {
     componentDidRender() {
         debug('nylas-calendar-picker', 'componentDidRender');
     }
-    elementNameChangedHandler(newValue) {
-        debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
-        this.host.setAttribute('name', newValue);
-    }
     selectedOptionsChangedHandler(event) {
         debug('nylas-calendar-picker', 'selectedOptionChangedHandler', event.detail);
         const valueChangedHandler = (event) => {
@@ -82,7 +82,8 @@ const NylasCalendarPicker = class {
             return {
                 value: calendar.id,
                 label: calendar.name,
-                selected: this.defaultSelectedCalendars?.includes(calendar.id) || (this.defaultSelectedCalendars?.includes('primary') && calendar.id === this.organizerEmail),
+                selected: this.defaultSelectedCalendars?.includes(calendar.id) ||
+                    (this.defaultSelectedCalendars?.includes('primary') || this.defaultSelectedCalendars?.length === 0 ? calendar.id === this.currentUser?.email : false),
             };
         }) ?? [];
         return (h(Host, null, h("div", { class: "nylas-calendar-picker", part: "ncp" }, h("div", { class: "header", part: "ncp__header" }, h("h3", null, "Calendar availability"), h("p", null, "Select calendars that you\u2019d like to use for checking your availability.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-calendar-picker__dropdown" }, h("multi-select-dropdown", { name: 'calendar', label: "Select calendars that will be checked for availability", options: calendarOptions, exportparts: "msd__dropdown: ncp__dropdown, msd__dropdown-button: ncp__dropdown-button, msd__dropdown-content: ncp__dropdown-content" }, h("span", { slot: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available. The default is your primary calendar if none are selected.")))))) : (h("div", { class: "nylas-calendar-picker__loading" }, h("span", { class: "label" }, "Select calendars that will be checked for availability ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
@@ -96,6 +97,10 @@ const NylasCalendarPicker = class {
 __decorate([
     RegisterComponent({
         name: 'nylas-calendar-picker',
+        stateToProps: new Map([
+            ['schedulerConfig.calendars', 'calendars'],
+            ['schedulerConfig.currentUser', 'currentUser'],
+        ]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChangedHandler } = event.detail;