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

package/dist/collection/components/scheduler-editor/nylas-editor-tabs/tab-contents.js

@@ -17,6 +17,8 @@ export default function TabContents({ id, formState, activeTab, calendars }) {
             return (h("div", { key: id }, h("nylas-booking-calendar-picker", { name: "booking-calendar", calendars: calendars ?? [], defaultBookingCalendar: bookingCalendar, exportparts: 'nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content' }), h("nylas-calendar-picker", { name: "calendars", calendars: calendars ?? [], defaultSelectedCalendars: selectedCalendars, exportparts: 'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content' }), h("nylas-availability-picker", { name: "availability", openHours: openHours, defaultTimezone: timezone, exportparts: 'nap__header, nap__select-timezone, nap__select-timezone-button, nap__select-timezone-dropdown-content, nap__availability, nap__day, nap__time-ranges, nap__time-range, nap__add-time-range, nap__time-picker-container, nap__time-picker-input, nap__time-picker-times' })));
         case 'bookingOptions':
             return (h("div", { key: id }, h("nylas-buffer-time", { name: "buffer-time", buffer: formState.buffer, exportparts: 'nbt, nbt__header, nbt__body, nbt__dropdown-before, nbt__dropdown-button-before, nbt__dropdown-content-before, nbt__dropdown-after, nbt__dropdown-button-after, nbt__dropdown-content-after, nbt__preview' }), h("nylas-event-limits", null, h("div", { slot: "inputs" }, h("nylas-min-booking-notice", { name: "min-booking-notice", minBookingNotice: formState.minBookingNotice, exportparts: "nmbn, nmbn__number-dropdown, nmbn__number-dropdown-button, nmbn__number-dropdown-content, nmbn__period-dropdown, nmbn__period-dropdown-button, nmbn__period-dropdown-content" }), h("nylas-limit-future-bookings", { name: "limit-future-bookings", availableDaysInFuture: formState.availableDaysInFuture, exportparts: "nlfb, nlfb__number-dropdown, nlfb__number-dropdown-button, nlfb__number-dropdown-content, nlfb__period-dropdown, nlfb__period-dropdown-button, nlfb__period-dropdown-content" }), h("nylas-min-cancellation-notice", { name: "min-cancellation-notice", minCancellationNotice: formState.minCancellationNotice, exportparts: "nmcn, nmcn__number-dropdown, nmcn__number-dropdown-button, nmcn__number-dropdown-content, nmcn__period-dropdown, nmcn__period-dropdown-button, nmcn__period-dropdown-content" }), h("nylas-cancellation-policy", { name: "cancellation-policy", cancellationPolicy: formState.cancellationPolicy, exportparts: "ncpolicy, ncpolicy__textarea" }))), h("nylas-timeslot-interval", { name: "timeslot-interval", eventDurationMinutes: parseInt(formState.duration), exportparts: "nti, nti__header, nti__input-label, nti__dropdown, nti__dropdown-button, nti__dropdown-content" }), h("nylas-customize-booking-settings", { name: "customize-booking-settings", exportparts: "ncbs, ncbs__header, ncbs__settings, ncbs__settings-div, ncbs__additional_guests, ncbs__cancellation_options, ncbs__rescheduling_options" })));
+        case 'participants':
+            return (h("div", { key: id }, h("nylas-additional-participants", { name: "participants", eventParticipants: formState.participants, exportparts: "nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant" }), h("nylas-participants-custom-availability", { name: "participant-custom-availability", participants: formState.participants, exportparts: "npca, npca__header, npca__content, npca__participant-container, npca__participant-title, npca__participant-toggle--container, npca__toggle-label, npca__toggle-input, npca__toggle-slider" })));
     }
 }
 //# sourceMappingURL=tab-contents.js.map

package/dist/collection/components/scheduler-editor/nylas-editor-tabs/tab-contents.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-contents.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-editor-tabs/tab-contents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\n\nexport type TabContentsProps = {\n  id: string;\n  formState: any;\n  activeTab: string;\n  calendars?: any[];\n};\n\nexport default function TabContents({ id, formState, activeTab, calendars }: TabContentsProps) {\n  switch (activeTab) {\n    case 'eventInfo':\n      const eventTitle = formState.title;\n      const eventDescription = formState.description;\n      const eventDuration = parseInt(formState.duration);\n      const location = formState.location;\n      // const eventParticipants = formState.participants;\n\n      return (\n        <div key={id}>\n          <nylas-event-info>\n            <div slot=\"inputs\">\n              <nylas-event-title name=\"title\" eventTitle={eventTitle} exportparts=\"net, net__title, net__dropdown-content\" />\n              <nylas-event-duration\n                name=\"duration\"\n                eventDurationMinutes={eventDuration}\n                exportparts=\"ned, ned__dropdown, ned__dropdown-button, ned__dropdown-content, ned__input_dropdown, ned__input_dropdown-input, ned__input_dropdown-content\"\n              />\n              <nylas-event-location name=\"location\" eventLocation={location} exportparts=\"nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content\" />\n              <nylas-event-description name=\"description\" eventDescription={eventDescription} exportparts=\"nedesc, nedesc__textarea\" />\n            </div>\n          </nylas-event-info>\n          {/* <nylas-additional-participants\n              name=\"participants\"\n              eventParticipants={eventParticipants}\n              exportparts={'nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant, nap__add-participant'}\n            /> */}\n        </div>\n      );\n    case 'availability':\n      const openHours = formState.availability.openHours;\n      const timezone = formState.availability.timezone ? formState.availability.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;\n      const organizer = formState.participants?.find(p => p.is_organizer);\n      const organizerEmail = organizer?.email ?? 'primary';\n      const selectedCalendars = formState.calendarIds.length > 0 ? formState.calendarIds : [organizerEmail];\n      const bookingCalendar = formState.bookingCalendar == 'primary' ? organizerEmail : formState.bookingCalendar;\n      return (\n        <div key={id}>\n          <nylas-booking-calendar-picker\n            name=\"booking-calendar\"\n            calendars={calendars ?? []}\n            defaultBookingCalendar={bookingCalendar}\n            exportparts={'nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content'}\n          />\n          <nylas-calendar-picker\n            name=\"calendars\"\n            calendars={calendars ?? []}\n            defaultSelectedCalendars={selectedCalendars}\n            exportparts={'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content'}\n          />\n          <nylas-availability-picker\n            name=\"availability\"\n            openHours={openHours}\n            defaultTimezone={timezone}\n            exportparts={\n              'nap__header, nap__select-timezone, nap__select-timezone-button, nap__select-timezone-dropdown-content, nap__availability, nap__day, nap__time-ranges, nap__time-range, nap__add-time-range, nap__time-picker-container, nap__time-picker-input, nap__time-picker-times'\n            }\n          />\n        </div>\n      );\n    case 'bookingOptions':\n      return (\n        <div key={id}>\n          <nylas-buffer-time\n            name=\"buffer-time\"\n            buffer={formState.buffer}\n            exportparts={\n              'nbt, nbt__header, nbt__body, nbt__dropdown-before, nbt__dropdown-button-before, nbt__dropdown-content-before, nbt__dropdown-after, nbt__dropdown-button-after, nbt__dropdown-content-after, nbt__preview'\n            }\n          />\n          {/* <nylas-custom-booking-flow\n            name=\"booking-type\"\n            bookingType={formState.bookingType}\n            exportparts={'ncbf, ncbf__header, ncbf__dropdown, ncbf__dropdown-button, ncbf__dropdown-content'}\n          /> */}\n          <nylas-event-limits>\n            <div slot=\"inputs\">\n              <nylas-min-booking-notice\n                name=\"min-booking-notice\"\n                minBookingNotice={formState.minBookingNotice}\n                exportparts=\"nmbn, nmbn__number-dropdown, nmbn__number-dropdown-button, nmbn__number-dropdown-content, nmbn__period-dropdown, nmbn__period-dropdown-button, nmbn__period-dropdown-content\"\n              />\n              <nylas-limit-future-bookings\n                name=\"limit-future-bookings\"\n                availableDaysInFuture={formState.availableDaysInFuture}\n                exportparts=\"nlfb, nlfb__number-dropdown, nlfb__number-dropdown-button, nlfb__number-dropdown-content, nlfb__period-dropdown, nlfb__period-dropdown-button, nlfb__period-dropdown-content\"\n              />\n              <nylas-min-cancellation-notice\n                name=\"min-cancellation-notice\"\n                minCancellationNotice={formState.minCancellationNotice}\n                exportparts=\"nmcn, nmcn__number-dropdown, nmcn__number-dropdown-button, nmcn__number-dropdown-content, nmcn__period-dropdown, nmcn__period-dropdown-button, nmcn__period-dropdown-content\"\n              />\n              <nylas-cancellation-policy name=\"cancellation-policy\" cancellationPolicy={formState.cancellationPolicy} exportparts=\"ncpolicy, ncpolicy__textarea\" />\n            </div>\n          </nylas-event-limits>\n          <nylas-timeslot-interval\n            name=\"timeslot-interval\"\n            eventDurationMinutes={parseInt(formState.duration)}\n            exportparts=\"nti, nti__header, nti__input-label, nti__dropdown, nti__dropdown-button, nti__dropdown-content\"\n          />\n          <nylas-customize-booking-settings\n            name=\"customize-booking-settings\"\n            exportparts=\"ncbs, ncbs__header, ncbs__settings, ncbs__settings-div, ncbs__additional_guests, ncbs__cancellation_options, ncbs__rescheduling_options\"\n          />\n        </div>\n      );\n  }\n}\n"]}
+{"version":3,"file":"tab-contents.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-editor-tabs/tab-contents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\n\nexport type TabContentsProps = {\n  id: string;\n  formState: any;\n  activeTab: string;\n  calendars?: any[];\n};\n\nexport default function TabContents({ id, formState, activeTab, calendars }: TabContentsProps) {\n  switch (activeTab) {\n    case 'eventInfo':\n      const eventTitle = formState.title;\n      const eventDescription = formState.description;\n      const eventDuration = parseInt(formState.duration);\n      const location = formState.location;\n\n      return (\n        <div key={id}>\n          <nylas-event-info>\n            <div slot=\"inputs\">\n              <nylas-event-title name=\"title\" eventTitle={eventTitle} exportparts=\"net, net__title, net__dropdown-content\" />\n              <nylas-event-duration\n                name=\"duration\"\n                eventDurationMinutes={eventDuration}\n                exportparts=\"ned, ned__dropdown, ned__dropdown-button, ned__dropdown-content, ned__input_dropdown, ned__input_dropdown-input, ned__input_dropdown-content\"\n              />\n              <nylas-event-location name=\"location\" eventLocation={location} exportparts=\"nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content\" />\n              <nylas-event-description name=\"description\" eventDescription={eventDescription} exportparts=\"nedesc, nedesc__textarea\" />\n            </div>\n          </nylas-event-info>\n        </div>\n      );\n    case 'availability':\n      const openHours = formState.availability.openHours;\n      const timezone = formState.availability.timezone ? formState.availability.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;\n      const organizer = formState.participants?.find(p => p.is_organizer);\n      const organizerEmail = organizer?.email ?? 'primary';\n      const selectedCalendars = formState.calendarIds.length > 0 ? formState.calendarIds : [organizerEmail];\n      const bookingCalendar = formState.bookingCalendar == 'primary' ? organizerEmail : formState.bookingCalendar;\n      return (\n        <div key={id}>\n          <nylas-booking-calendar-picker\n            name=\"booking-calendar\"\n            calendars={calendars ?? []}\n            defaultBookingCalendar={bookingCalendar}\n            exportparts={'nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content'}\n          />\n          <nylas-calendar-picker\n            name=\"calendars\"\n            calendars={calendars ?? []}\n            defaultSelectedCalendars={selectedCalendars}\n            exportparts={'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content'}\n          />\n          <nylas-availability-picker\n            name=\"availability\"\n            openHours={openHours}\n            defaultTimezone={timezone}\n            exportparts={\n              'nap__header, nap__select-timezone, nap__select-timezone-button, nap__select-timezone-dropdown-content, nap__availability, nap__day, nap__time-ranges, nap__time-range, nap__add-time-range, nap__time-picker-container, nap__time-picker-input, nap__time-picker-times'\n            }\n          />\n        </div>\n      );\n    case 'bookingOptions':\n      return (\n        <div key={id}>\n          <nylas-buffer-time\n            name=\"buffer-time\"\n            buffer={formState.buffer}\n            exportparts={\n              'nbt, nbt__header, nbt__body, nbt__dropdown-before, nbt__dropdown-button-before, nbt__dropdown-content-before, nbt__dropdown-after, nbt__dropdown-button-after, nbt__dropdown-content-after, nbt__preview'\n            }\n          />\n          {/* <nylas-custom-booking-flow\n            name=\"booking-type\"\n            bookingType={formState.bookingType}\n            exportparts={'ncbf, ncbf__header, ncbf__dropdown, ncbf__dropdown-button, ncbf__dropdown-content'}\n          /> */}\n          <nylas-event-limits>\n            <div slot=\"inputs\">\n              <nylas-min-booking-notice\n                name=\"min-booking-notice\"\n                minBookingNotice={formState.minBookingNotice}\n                exportparts=\"nmbn, nmbn__number-dropdown, nmbn__number-dropdown-button, nmbn__number-dropdown-content, nmbn__period-dropdown, nmbn__period-dropdown-button, nmbn__period-dropdown-content\"\n              />\n              <nylas-limit-future-bookings\n                name=\"limit-future-bookings\"\n                availableDaysInFuture={formState.availableDaysInFuture}\n                exportparts=\"nlfb, nlfb__number-dropdown, nlfb__number-dropdown-button, nlfb__number-dropdown-content, nlfb__period-dropdown, nlfb__period-dropdown-button, nlfb__period-dropdown-content\"\n              />\n              <nylas-min-cancellation-notice\n                name=\"min-cancellation-notice\"\n                minCancellationNotice={formState.minCancellationNotice}\n                exportparts=\"nmcn, nmcn__number-dropdown, nmcn__number-dropdown-button, nmcn__number-dropdown-content, nmcn__period-dropdown, nmcn__period-dropdown-button, nmcn__period-dropdown-content\"\n              />\n              <nylas-cancellation-policy name=\"cancellation-policy\" cancellationPolicy={formState.cancellationPolicy} exportparts=\"ncpolicy, ncpolicy__textarea\" />\n            </div>\n          </nylas-event-limits>\n          <nylas-timeslot-interval\n            name=\"timeslot-interval\"\n            eventDurationMinutes={parseInt(formState.duration)}\n            exportparts=\"nti, nti__header, nti__input-label, nti__dropdown, nti__dropdown-button, nti__dropdown-content\"\n          />\n          <nylas-customize-booking-settings\n            name=\"customize-booking-settings\"\n            exportparts=\"ncbs, ncbs__header, ncbs__settings, ncbs__settings-div, ncbs__additional_guests, ncbs__cancellation_options, ncbs__rescheduling_options\"\n          />\n        </div>\n      );\n    case 'participants':\n      return (\n        <div key={id}>\n          <nylas-additional-participants\n            name=\"participants\"\n            eventParticipants={formState.participants}\n            exportparts=\"nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant\"\n          />\n          <nylas-participants-custom-availability\n            name=\"participant-custom-availability\"\n            participants={formState.participants}\n            exportparts=\"npca, npca__header, npca__content, npca__participant-container, npca__participant-title, npca__participant-toggle--container, npca__toggle-label, npca__toggle-input, npca__toggle-slider\"\n          />\n        </div>\n      );\n  }\n}\n"]}

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: '5590f983de527efa3e79d854e9cb2b49e433d64b' }, h("div", { key: '7a016a7a277b077a4edd63d433a185a7d2f7aaab', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: '7fb61474d9b80c59844dd2ca67cd00e95ee2a2be', class: "header", part: "npca__header" }, h("h3", { key: 'dc66f0262309a5c08c887bbbf5c408233ebd1c00' }, "Set Custom Availability for Participants"), h("p", { key: '60686b9f1c4aab680caf07de6c22561c5ec1a9e5' }, "Set custom availability for scheduling meetings, or default to general availability.")), h("div", { key: '8782a3b4e48ce7eb74eb6e41e239b16d9840fb80', class: "content", part: "npca__content" }, h("form", { key: 'c2f23d7eebc4a113fbfa2cbcd7623c99b5a87f89', 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":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAuB9H,MAAM,OAAO,mCAAmC;;oBAOvB,iCAAiC;;oCA+BpD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC;;IAI3C,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,wCAAwC,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACvF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAGD,0BAA0B,CAAC,QAAuB;QAChD,KAAK,CAAC,wCAAwC,EAAE,4BAA4B,EAAE,QAAQ,CAAC,CAAC;QACxF,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC7D,CAAC;IAGD,iBAAiB;QACf,KAAK,CAAC,wCAAwC,EAAE,mBAAmB,CAAC,CAAC;IACvE,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,wCAAwC,EAAE,sBAAsB,CAAC,CAAC;IAC1E,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,wCAAwC,EAAE,mBAAmB,CAAC,CAAC;IACvE,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,wCAAwC,EAAE,kBAAkB,CAAC,CAAC;IACtE,CAAC;IAID,6BAA6B,CAAC,KAAsE;QAClG,KAAK,CAAC,wCAAwC,EAAE,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAC/F,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC9E,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QACjF,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC/D,CAAC;IAGD,kBAAkB,CAAC,KAAkB;QACnC,KAAK,CAAC,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,CAAC,CAAC;QAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,aAAa,EAAE,EAAE,CAAC;YAC7C,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,yCAAyC,CAAC,CAAC;YAC7F,OAAO;QACT,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACjC,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAEpC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC;YAAE,OAAO;QAC5C,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC;QAClE,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE7D,MAAM,oBAAoB,GAAG,EAAE,CAAC;QAChC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;YACtC,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC;QACnG,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7E,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC3F,CAAC;IAED,eAAe,CAAC,YAA2B;QACzC,MAAM,oBAAoB,GAAG,EAAE,CAAC;QAChC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;YACjC,MAAM,MAAM,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YACvD,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG;gBACxC,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;gBAChE,SAAS,EAAE,WAAW,CAAC,YAAY,EAAE,UAAU,IAAI,EAAE;gBACrD,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,KAAK;gBAC3C,YAAY,EAAE,WAAW,CAAC,YAAY;aACvC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAC,MAAM;gBAC7D,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc;oBACrC,wGAAiD;oBACjD,mJAA2F,CACvF;gBACN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe;oBACvC,6DAAM,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAqB,CAAC,IAC/D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;wBACzD,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;wBACnD,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY;4BAAE,OAAO;wBAC3E,OAAO,CACL,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,6BAA6B,EAAC,GAAG,EAAE,yBAAyB,KAAK,EAAE;4BACzG,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,yBAAyB;gCAC3D;;oCAAQ,WAAW,CAAC,IAAI;6DAA2B;gCACnD,WAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,qCAAqC;oCACxE,qBACE,WAAW,EAAC,0FAA0F,EACtG,IAAI,EAAE,GAAG,EACT,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,SAAS,IAAI,WAAW,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,GACpE;oCACF,YACE,KAAK,EAAE,WAAW,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,EACrG,OAAO,EAAE,GAAG,EAAE;4CACZ,IAAI,CAAC,WAAW,CAAC,SAAS;gDAAE,OAAO;4CACnC,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC;4CAC5D,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;wCAC/D,CAAC;wCAED,oBAAc,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CAClC,CACH,CACF;4BACL,WAAW,CAAC,MAAM,IAAI,CACrB,iCACE,GAAG,EAAE,KAAK,EACV,IAAI,EAAE,eAAe,KAAK,IAAI,GAAG,EAAE,EACnC,SAAS,EAAE,WAAW,CAAC,SAAS,EAChC,eAAe,EAAE,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EACrD,UAAU,EAAE,IAAI,GAChB,CACH,CACG,CACP,CAAC;oBACJ,CAAC,CAAC,CACG,CACH,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AArDC;IALC,iBAAiB,CAAyH;QACzI,IAAI,EAAE,wCAAwC;QAC9C,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;iEAqDD","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

@@ -33,6 +33,7 @@ export class NylasSchedulerEditor {
         this.schedulerPreviewLink = '';
         this.defaultSchedulerConfigState = undefined;
         this.mode = 'app';
+        this.additionalParticipants = undefined;
         this.automaticComponentRegistration = true;
     }
     connectedCallback() {
@@ -43,6 +44,7 @@ export class NylasSchedulerEditor {
         this.stores = {
             schedulerConfig: CreateNylasSchedulerConfigStore({
                 ...this.defaultSchedulerConfigState,
+                additionalParticipants: this.additionalParticipants,
             }),
         };
         if (!this.nylasApiRequest && this.nylasSessionsConfig) {
@@ -132,7 +134,7 @@ export class NylasSchedulerEditor {
         await this.nylasSchedulerConfigConnector.schedulerConfig?.getCalendars();
     }
     render() {
-        return (h(Host, { key: 'e002a44eed281858acbac383ed43cbecc33f8787' }, h("div", { key: '45b6210474e128efb8b9ed9652fb193ba4116483', class: "scheduler-editor-header", part: "nse__header" }, h("h1", { key: '4a32b5953b88d41abe3c461cc009b4810e307e29', class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { key: '14d24a40119d1f3aa37efe37a468c8abceae3903', width: "18", height: "18" }), "Scheduler editor"), h("button", { key: 'dcbf3accf800d65dbd268da096ddd8ec93854096', class: "scheduler-editor-close", title: "logout", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { key: '1f2b11860228f8d83a30427f7f1fd8412b61047b', 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: '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 })))));
     }
     static get is() { return "nylas-scheduler-editor"; }
     static get encapsulation() { return "shadow"; }
@@ -233,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",
@@ -273,7 +275,7 @@ export class NylasSchedulerEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<NylasSchedulerConfigStoreState>",
-                    "resolved": "undefined | { selectedConfiguration?: RecursivePartial<Configuration> | undefined; configurations?: Configuration[] | undefined; calendars?: Calendar[] | undefined; currentUser?: User | null | undefined; action?: \"create\" | \"edit\" | null | undefined; }",
+                    "resolved": "undefined | { selectedConfiguration?: RecursivePartial<Configuration> | undefined; configurations?: Configuration[] | undefined; calendars?: Calendar[] | undefined; currentUser?: User | null | undefined; action?: \"create\" | \"edit\" | null | undefined; additionalParticipants?: Participant[] | undefined; }",
                     "references": {
                         "Partial": {
                             "location": "global",
@@ -310,6 +312,27 @@ export class NylasSchedulerEditor {
                 "attribute": "mode",
                 "reflect": false,
                 "defaultValue": "'app'"
+            },
+            "additionalParticipants": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Participant[]",
+                    "resolved": "Participant[] | undefined",
+                    "references": {
+                        "Participant": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Participant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop is used to populate the additional participants and\ntheir availability in the scheduler editor."
+                }
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-scheduler-editor.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NylasBaseProvider } from '@/common/abstract-provider';\nimport type { SchedulerEditorEventOverride } from '@/common/component-types';\nimport { AuthArgs, NylasIdentityRequestWrapper, User, type NylasApiRequest } from '@/common/nylas-api-request';\nimport { RegisteredComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { CreateNylasSchedulerConfigStore, NylasSchedulerConfigStoreState, NylasSchedulerConfigStoreType } from '@/stores/scheduler-config-store';\nimport { debug } from '@/utils/utils';\nimport { Config, NylasSessions } from '@nylas/identity';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { LoginRequired } from './LoginRequired';\nimport { ExpressFlow } from './ExpressFlow';\n\n/**\n * The `nylas-scheduler-editor` component is a form that allows users to configure the settings for the Nylas Scheduler.\n *\n * @slot login-required - This slot is used to display a message when the user is not logged in.\n */\n@Component({\n  tag: 'nylas-scheduler-editor',\n  styleUrl: 'nylas-scheduler-editor.scss',\n  shadow: true,\n})\nexport class NylasSchedulerEditor {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: {\n    schedulerConfig: NylasSchedulerConfigStoreType;\n  };\n\n  /**\n   * This is a base provide that defines the common methods and properties\n   * that all providers should have.\n   *\n   * Because stencil does not support abstract classes, we have to use a\n   * property to store the base provider instance.\n   */\n  private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n  /**\n   * The Nylas Scheduler Config Connector instance.\n   * The brains of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasSchedulerConfigConnector?: NylasSchedulerConfigConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSchedulerEditorElement;\n\n  /***\n   * The configuration id to use for the scheduler editor.\n   * If provided, then the scheduler editor will try and fetch the configuration\n   * with the provided id. If found, it will automatically load the editor\n   * with the configuration settings for editing.\n   */\n  @Prop({ mutable: true }) configurationId?: string;\n\n  /**\n   * The Nylas Api Request instance.\n   * Used to make requests to the Nylas API.\n   */\n  @Prop({ mutable: true }) nylasApiRequest?: NylasApiRequest;\n\n  /**\n   * The Nylas Sessions configuration.\n   * Used to configure the Nylas Sessions instance.\n   */\n  @Prop() nylasSessionsConfig?: Config;\n\n  /**\n   * The default authentication arguments to use when authenticating a user.\n   */\n  @Prop() defaultAuthArgs?: AuthArgs[];\n\n  /**\n   * This provides a way to override the default event handlers.\n   */\n  @Prop() eventOverrides: SchedulerEditorEventOverride = {};\n\n  /**\n   * The scheduler preview link to use when the user clicks on the preview button.\n   * You can use the placeholder `{config.id}` to replace the configuration id anywhere in the link.\n   */\n  @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n\n  /**\n   * The default scheduler config store state.\n   * Used to set the initial state of the scheduler config store.\n   * This state can be used to pass defaults to newly created configurations.\n   */\n  @Prop({ attribute: 'default-scheduler-config-store-state' }) readonly defaultSchedulerConfigState?: Partial<NylasSchedulerConfigStoreState>;\n\n  /**\n   * This is used to set the mode for the scheduler config.\n   * The mode can be 'app' or 'composable'.\n   * The default mode is 'app'.\n   */\n  @Prop({ attribute: 'mode' }) readonly mode: 'app' | 'composable' = 'app';\n\n  /**\n   * This event is fired when the provider is initialized.\n   * By default, this event handles determining if the user is logged in or not.\n   * In addition, it fetches the provided configuration if a valid configuration id is provided.\n   */\n  @Event({ cancelable: true }) readonly init!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the the NylasAuth isAuthenticated state changes\n   * to true.\n   */\n  @Event({ cancelable: true }) readonly loggedIn!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the the NylasAuth isAuthenticated state changes\n   * to false.\n   */\n  @Event({ cancelable: true }) readonly loggedOut!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the close button on scheduler config is clicked.\n   */\n  @Event({ cancelable: true }) readonly schedulerConfigCloseClicked!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * Automatically register components that have the `@RegisterComponent` decorator.\n   * If this is set to false, you will need to manually register components using the\n   * `registerComponent` method.\n   * @default true\n   */\n  @State() automaticComponentRegistration: boolean = true;\n\n  connectedCallback() {\n    debug(`[nylas-scheduler-editor] connectedCallback`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-scheduler-editor] componentWillLoad`);\n    this.stores = {\n      schedulerConfig: CreateNylasSchedulerConfigStore({\n        ...this.defaultSchedulerConfigState,\n      }),\n    };\n\n    if (!this.nylasApiRequest && this.nylasSessionsConfig) {\n      const nylasSession = new NylasSessions(this.nylasSessionsConfig);\n\n      // We must check if the user is logged in before continuing\n      // otherwise, a PCKE code will not be generated and the user\n      // will not be able to log in.\n      await nylasSession.isLoggedIn();\n\n      // Watch for login events so that we can automatically update the state\n      nylasSession.onLoginSuccess(async () => {\n        const currentUser = await this.nylasSchedulerConfigConnector?.schedulerConfig?.currentUser();\n        if (currentUser) {\n          this.loggedIn.emit(this.host);\n          this.loggedInHandler(currentUser);\n        }\n      });\n\n      // Watch for logout events so that we can automatically update the state\n      nylasSession.onLoginFail(async () => {\n        this.stores?.schedulerConfig?.set('currentUser', null);\n        this.loggedOut.emit(this.host);\n      });\n\n      this.nylasApiRequest = new NylasIdentityRequestWrapper(nylasSession);\n    }\n\n    if (this.nylasApiRequest && this.defaultAuthArgs) {\n      this.nylasApiRequest.setDefaultAuthArgs(this.defaultAuthArgs);\n    }\n\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    const nylasSchedulerConfigStore = this.baseProvider.getStore('schedulerConfig');\n    this.nylasSchedulerConfigConnector = new NylasSchedulerConfigConnector({\n      nylasApiRequest: this.nylasApiRequest,\n      nylasSchedulerConfigStore: nylasSchedulerConfigStore,\n    });\n\n    const initEvent = this.init.emit(this.host);\n    if (!initEvent.defaultPrevented) {\n      const currentUser = await this.nylasSchedulerConfigConnector?.schedulerConfig?.currentUser();\n      if (currentUser) {\n        this.loggedIn.emit(this.host);\n        await this.loggedInHandler(currentUser);\n      } else {\n        this.stores?.schedulerConfig?.set('currentUser', null);\n        this.loggedOut.emit(this.host);\n      }\n    }\n\n    // Watch for store changes\n    this.stores?.schedulerConfig?.onChange('selectedConfiguration', async config => {\n      if (config && config.id) {\n        this.configurationId = config.id;\n      }\n    });\n\n    this.baseProvider?.componentWillLoad(this.nylasSchedulerConfigConnector);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-scheduler-editor] componentDidLoad`);\n    this.baseProvider?.componentDidLoad();\n  }\n\n  componentDisconnected() {\n    this.baseProvider?.componentDisconnected();\n  }\n\n  /**\n   * Watch for changes to the configuration id and automatically fetch the configuration\n   * when the configuration id changes. If the configuration id is cleared, then the\n   * configuration is cleared as well.\n   * @param newConfigurationId The new configuration id\n   */\n  @Watch('configurationId')\n  async configurationIdChanged(newConfigurationId: string) {\n    if (newConfigurationId) {\n      await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(newConfigurationId);\n      this.stores?.schedulerConfig?.set('action', 'edit');\n    } else {\n      // Clear the configuration\n      this.stores?.schedulerConfig?.set('selectedConfiguration', {});\n      this.stores?.schedulerConfig?.set('action', null);\n    }\n  }\n\n  /**\n   * This method is used to get the NylasSchedulerConfigStore instance.\n   * You can use this instance to update or get the state of the store.\n   * @returns Promise<NylasSchedulerConfigStoreType | undefined>\n   */\n  @Method()\n  async store(): Promise<NylasSchedulerConfigStoreType | undefined> {\n    return this.stores?.schedulerConfig;\n  }\n\n  /**\n   * This method is used to get the NylasSchedulerConfigConnector instance.\n   * You can use this instance to make requests to the Nylas API.\n   * @returns Promise<NylasSchedulerConfigConnector | undefined>\n   */\n  @Method()\n  async schedulerConnector(): Promise<NylasSchedulerConfigConnector | undefined> {\n    return this.nylasSchedulerConfigConnector;\n  }\n\n  /**\n   * This is a custom event handler that is used to register a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to register\n   * @returns Promise<void>\n   */\n  @Listen('registerComponent')\n  async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.registerComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to unregister a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to unregister\n   * @returns Promise<void>\n   */\n  @Listen('unregisterComponent')\n  async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.unregisterComponent(event.detail);\n  }\n\n  /**\n   * Upon login, set the current user and fetch the configuration and calendars.\n   * @param currentUser The current user that is logged in\n   */\n  private async loggedInHandler(currentUser: User) {\n    this.stores?.schedulerConfig?.set('currentUser', currentUser);\n\n    if (!this.nylasSchedulerConfigConnector) {\n      return;\n    }\n\n    if (this.configurationId) {\n      const data = await this.nylasSchedulerConfigConnector.schedulerConfig?.getConfigurationById(this.configurationId);\n      if (data && data[0]?.id) {\n        this.stores?.schedulerConfig?.set('action', 'edit');\n      }\n    }\n\n    await this.nylasSchedulerConfigConnector.schedulerConfig?.getCalendars();\n  }\n\n  /**\n   * This is a custom event handler that is used to update the state of the provider.\n   */\n  private handleSchedulerConfigCloseClicked = (_event: Event) => {\n    const event = this.schedulerConfigCloseClicked.emit(this.host);\n    if (!event.defaultPrevented) {\n      localStorage.removeItem('grant');\n      localStorage.removeItem('user');\n      window.location.reload();\n    }\n  };\n\n  /**\n   * This method is used to get the authentication URL for a provider.\n   * @param provider The provider to get the authentication URL for (e.g. google, microsoft, etc.)\n   * @returns Promise<string> The authentication URL to redirect the user for the provider\n   */\n  private authenticationUrl = async (provider?: string) => {\n    if (!this.nylasApiRequest) {\n      console.error(`[nylas-scheduler-editor] Nylas API Request is not initialized.`);\n      return '';\n    }\n    const url = await this.nylasApiRequest.authenticationUrl({ provider });\n\n    return url || '';\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"scheduler-editor-header\" part=\"nse__header\">\n          <h1 class=\"scheduler-editor-title\" part=\"nse__title\">\n            <calendar-icon width=\"18\" height=\"18\" />\n            Scheduler editor\n          </h1>\n          <button class=\"scheduler-editor-close\" title=\"logout\" onClick={e => this.handleSchedulerConfigCloseClicked(e)} part=\"nse__close-button\">\n            <close-icon width=\"18\" height=\"18\" />\n          </button>\n        </div>\n        {this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === null && (\n          <div class=\"list-configurations\">\n            <nylas-list-configurations></nylas-list-configurations>\n          </div>\n        )}\n        {this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'create' && (\n          // If the mode is 'app', then render the editor tabs in a composable mode with children for creating a new configuration (Express flow).\n          <nylas-editor-tabs mode=\"composable\">\n            <ExpressFlow />\n          </nylas-editor-tabs>\n        )}\n        {this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'edit' && (\n          <nylas-editor-tabs mode={this.mode}>{this.mode === 'composable' && <slot />}</nylas-editor-tabs>\n        )}\n        {!this.stores?.schedulerConfig?.state.currentUser && (\n          <slot name=\"login-required\">\n            <LoginRequired authenticationUrl={this.authenticationUrl} />\n          </slot>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-scheduler-editor.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NylasBaseProvider } from '@/common/abstract-provider';\nimport type { SchedulerEditorEventOverride } from '@/common/component-types';\nimport { AuthArgs, NylasIdentityRequestWrapper, User, type NylasApiRequest } from '@/common/nylas-api-request';\nimport { RegisteredComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { CreateNylasSchedulerConfigStore, NylasSchedulerConfigStoreState, NylasSchedulerConfigStoreType } from '@/stores/scheduler-config-store';\nimport { debug } from '@/utils/utils';\nimport { Config, NylasSessions } from '@nylas/identity';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { LoginRequired } from './LoginRequired';\nimport { ExpressFlow } from './ExpressFlow';\nimport { Participant } from '@nylas/core';\n\n/**\n * The `nylas-scheduler-editor` component is a form that allows users to configure the settings for the Nylas Scheduler.\n *\n * @slot login-required - This slot is used to display a message when the user is not logged in.\n */\n@Component({\n  tag: 'nylas-scheduler-editor',\n  styleUrl: 'nylas-scheduler-editor.scss',\n  shadow: true,\n})\nexport class NylasSchedulerEditor {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: {\n    schedulerConfig: NylasSchedulerConfigStoreType;\n  };\n\n  /**\n   * This is a base provide that defines the common methods and properties\n   * that all providers should have.\n   *\n   * Because stencil does not support abstract classes, we have to use a\n   * property to store the base provider instance.\n   */\n  private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n  /**\n   * The Nylas Scheduler Config Connector instance.\n   * The brains of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasSchedulerConfigConnector?: NylasSchedulerConfigConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSchedulerEditorElement;\n\n  /***\n   * The configuration id to use for the scheduler editor.\n   * If provided, then the scheduler editor will try and fetch the configuration\n   * with the provided id. If found, it will automatically load the editor\n   * with the configuration settings for editing.\n   */\n  @Prop({ mutable: true }) configurationId?: string;\n\n  /**\n   * The Nylas Api Request instance.\n   * Used to make requests to the Nylas API.\n   */\n  @Prop({ mutable: true }) nylasApiRequest?: NylasApiRequest;\n\n  /**\n   * The Nylas Sessions configuration.\n   * Used to configure the Nylas Sessions instance.\n   */\n  @Prop() nylasSessionsConfig?: Config;\n\n  /**\n   * The default authentication arguments to use when authenticating a user.\n   */\n  @Prop() defaultAuthArgs?: AuthArgs[];\n\n  /**\n   * This provides a way to override the default event handlers.\n   */\n  @Prop() eventOverrides: SchedulerEditorEventOverride = {};\n\n  /**\n   * The scheduler preview link to use when the user clicks on the preview button.\n   * You can use the placeholder `{config.id}` to replace the configuration id anywhere in the link.\n   */\n  @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n\n  /**\n   * The default scheduler config store state.\n   * Used to set the initial state of the scheduler config store.\n   * This state can be used to pass defaults to newly created configurations.\n   */\n  @Prop({ attribute: 'default-scheduler-config-store-state' }) readonly defaultSchedulerConfigState?: Partial<NylasSchedulerConfigStoreState>;\n\n  /**\n   * This is used to set the mode for the scheduler config.\n   * The mode can be 'app' or 'composable'.\n   * The default mode is 'app'.\n   */\n  @Prop({ attribute: 'mode' }) readonly mode: 'app' | 'composable' = 'app';\n\n  /**\n   * This prop is used to populate the additional participants and\n   * their availability in the scheduler editor.\n   */\n  @Prop({ attribute: 'additional-participants' }) additionalParticipants?: Participant[];\n\n  /**\n   * This event is fired when the provider is initialized.\n   * By default, this event handles determining if the user is logged in or not.\n   * In addition, it fetches the provided configuration if a valid configuration id is provided.\n   */\n  @Event({ cancelable: true }) readonly init!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the the NylasAuth isAuthenticated state changes\n   * to true.\n   */\n  @Event({ cancelable: true }) readonly loggedIn!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the the NylasAuth isAuthenticated state changes\n   * to false.\n   */\n  @Event({ cancelable: true }) readonly loggedOut!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the close button on scheduler config is clicked.\n   */\n  @Event({ cancelable: true }) readonly schedulerConfigCloseClicked!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * Automatically register components that have the `@RegisterComponent` decorator.\n   * If this is set to false, you will need to manually register components using the\n   * `registerComponent` method.\n   * @default true\n   */\n  @State() automaticComponentRegistration: boolean = true;\n\n  connectedCallback() {\n    debug(`[nylas-scheduler-editor] connectedCallback`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-scheduler-editor] componentWillLoad`);\n    this.stores = {\n      schedulerConfig: CreateNylasSchedulerConfigStore({\n        ...this.defaultSchedulerConfigState,\n        additionalParticipants: this.additionalParticipants,\n      }),\n    };\n\n    if (!this.nylasApiRequest && this.nylasSessionsConfig) {\n      const nylasSession = new NylasSessions(this.nylasSessionsConfig);\n\n      // We must check if the user is logged in before continuing\n      // otherwise, a PCKE code will not be generated and the user\n      // will not be able to log in.\n      await nylasSession.isLoggedIn();\n\n      // Watch for login events so that we can automatically update the state\n      nylasSession.onLoginSuccess(async () => {\n        const currentUser = await this.nylasSchedulerConfigConnector?.schedulerConfig?.currentUser();\n        if (currentUser) {\n          this.loggedIn.emit(this.host);\n          this.loggedInHandler(currentUser);\n        }\n      });\n\n      // Watch for logout events so that we can automatically update the state\n      nylasSession.onLoginFail(async () => {\n        this.stores?.schedulerConfig?.set('currentUser', null);\n        this.loggedOut.emit(this.host);\n      });\n\n      this.nylasApiRequest = new NylasIdentityRequestWrapper(nylasSession);\n    }\n\n    if (this.nylasApiRequest && this.defaultAuthArgs) {\n      this.nylasApiRequest.setDefaultAuthArgs(this.defaultAuthArgs);\n    }\n\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    const nylasSchedulerConfigStore = this.baseProvider.getStore('schedulerConfig');\n    this.nylasSchedulerConfigConnector = new NylasSchedulerConfigConnector({\n      nylasApiRequest: this.nylasApiRequest,\n      nylasSchedulerConfigStore: nylasSchedulerConfigStore,\n    });\n\n    const initEvent = this.init.emit(this.host);\n    if (!initEvent.defaultPrevented) {\n      const currentUser = await this.nylasSchedulerConfigConnector?.schedulerConfig?.currentUser();\n      if (currentUser) {\n        this.loggedIn.emit(this.host);\n        await this.loggedInHandler(currentUser);\n      } else {\n        this.stores?.schedulerConfig?.set('currentUser', null);\n        this.loggedOut.emit(this.host);\n      }\n    }\n\n    // Watch for store changes\n    this.stores?.schedulerConfig?.onChange('selectedConfiguration', async config => {\n      if (config && config.id) {\n        this.configurationId = config.id;\n      }\n    });\n\n    this.baseProvider?.componentWillLoad(this.nylasSchedulerConfigConnector);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-scheduler-editor] componentDidLoad`);\n    this.baseProvider?.componentDidLoad();\n  }\n\n  componentDisconnected() {\n    this.baseProvider?.componentDisconnected();\n  }\n\n  /**\n   * Watch for changes to the configuration id and automatically fetch the configuration\n   * when the configuration id changes. If the configuration id is cleared, then the\n   * configuration is cleared as well.\n   * @param newConfigurationId The new configuration id\n   */\n  @Watch('configurationId')\n  async configurationIdChanged(newConfigurationId: string) {\n    if (newConfigurationId) {\n      await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(newConfigurationId);\n      this.stores?.schedulerConfig?.set('action', 'edit');\n    } else {\n      // Clear the configuration\n      this.stores?.schedulerConfig?.set('selectedConfiguration', {});\n      this.stores?.schedulerConfig?.set('action', null);\n    }\n  }\n\n  /**\n   * This method is used to get the NylasSchedulerConfigStore instance.\n   * You can use this instance to update or get the state of the store.\n   * @returns Promise<NylasSchedulerConfigStoreType | undefined>\n   */\n  @Method()\n  async store(): Promise<NylasSchedulerConfigStoreType | undefined> {\n    return this.stores?.schedulerConfig;\n  }\n\n  /**\n   * This method is used to get the NylasSchedulerConfigConnector instance.\n   * You can use this instance to make requests to the Nylas API.\n   * @returns Promise<NylasSchedulerConfigConnector | undefined>\n   */\n  @Method()\n  async schedulerConnector(): Promise<NylasSchedulerConfigConnector | undefined> {\n    return this.nylasSchedulerConfigConnector;\n  }\n\n  /**\n   * This is a custom event handler that is used to register a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to register\n   * @returns Promise<void>\n   */\n  @Listen('registerComponent')\n  async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.registerComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to unregister a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to unregister\n   * @returns Promise<void>\n   */\n  @Listen('unregisterComponent')\n  async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.unregisterComponent(event.detail);\n  }\n\n  /**\n   * Upon login, set the current user and fetch the configuration and calendars.\n   * @param currentUser The current user that is logged in\n   */\n  private async loggedInHandler(currentUser: User) {\n    this.stores?.schedulerConfig?.set('currentUser', currentUser);\n\n    if (!this.nylasSchedulerConfigConnector) {\n      return;\n    }\n\n    if (this.configurationId) {\n      const data = await this.nylasSchedulerConfigConnector.schedulerConfig?.getConfigurationById(this.configurationId);\n      if (data && data[0]?.id) {\n        this.stores?.schedulerConfig?.set('action', 'edit');\n      }\n    }\n\n    await this.nylasSchedulerConfigConnector.schedulerConfig?.getCalendars();\n  }\n\n  /**\n   * This is a custom event handler that is used to update the state of the provider.\n   */\n  private handleSchedulerConfigCloseClicked = (_event: Event) => {\n    const event = this.schedulerConfigCloseClicked.emit(this.host);\n    if (!event.defaultPrevented) {\n      localStorage.removeItem('grant');\n      localStorage.removeItem('user');\n      window.location.reload();\n    }\n  };\n\n  /**\n   * This method is used to get the authentication URL for a provider.\n   * @param provider The provider to get the authentication URL for (e.g. google, microsoft, etc.)\n   * @returns Promise<string> The authentication URL to redirect the user for the provider\n   */\n  private authenticationUrl = async (provider?: string) => {\n    if (!this.nylasApiRequest) {\n      console.error(`[nylas-scheduler-editor] Nylas API Request is not initialized.`);\n      return '';\n    }\n    const url = await this.nylasApiRequest.authenticationUrl({ provider });\n\n    return url || '';\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"scheduler-editor-header\" part=\"nse__header\">\n          <h1 class=\"scheduler-editor-title\" part=\"nse__title\">\n            <calendar-icon width=\"18\" height=\"18\" />\n            Scheduler editor\n          </h1>\n          <button class=\"scheduler-editor-close\" title=\"logout\" onClick={e => this.handleSchedulerConfigCloseClicked(e)} part=\"nse__close-button\">\n            <close-icon width=\"18\" height=\"18\" />\n          </button>\n        </div>\n        {this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === null && (\n          <div class=\"list-configurations\">\n            <nylas-list-configurations></nylas-list-configurations>\n          </div>\n        )}\n        {this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'create' && (\n          // If the mode is 'app', then render the editor tabs in a composable mode with children for creating a new configuration (Express flow).\n          <nylas-editor-tabs mode=\"composable\">\n            <ExpressFlow />\n          </nylas-editor-tabs>\n        )}\n        {this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === 'edit' && (\n          <nylas-editor-tabs mode={this.mode}>{this.mode === 'composable' && <slot />}</nylas-editor-tabs>\n        )}\n        {!this.stores?.schedulerConfig?.state.currentUser && (\n          <slot name=\"login-required\">\n            <LoginRequired authenticationUrl={this.authenticationUrl} />\n          </slot>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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: 'a6c2e840c56397a1365b3205e793df4157c734d0' }, h("div", { key: 'd36acf9fb02fa1ae9337d02b161d51880a68422e', class: "time-picker", part: "time-picker" }, h("input", { key: 'd574493f83e42ef66a64d14a21abaaf38f7926c3', type: "text", name: this.name, id: this.name, part: "time-input", class: {
+        return (h(Host, { key: '51ee1081a47b86693eb0fcd034a53333728f0a8a' }, h("div", { key: '29616cbfd3978f2fb38d2583214e2cb67e86ecd2', class: "time-picker", part: "time-picker" }, h("input", { key: '0eedc68542c5dd6c2d051f89b806016e31ae21d4', 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: () => {