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

package/dist/nylas-web-elements/nylas-min-cancellation-notice.entry.js

@@ -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-8e4e394f.js';
-import { a as debug } from './utils-49a1d17b.js';
+import { r as registerInstance, a as createEvent, h, e as Host, i as getElement } from './index-582cfc93.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { a as debug } from './utils-04c10cbd.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
 

package/dist/nylas-web-elements/nylas-notification.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as Host, F as Fragment } from './index-8362ce5c.js';
-import { a as debug } from './utils-49a1d17b.js';
+import { r as registerInstance, h, e as Host, F as Fragment } from './index-582cfc93.js';
+import { a as debug } from './utils-04c10cbd.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
 
@@ -53,7 +53,7 @@ const NylasNotification = class {
         this.notifications = this.notifications.filter(notif => notif.id !== id);
     }
     render() {
-        return (h(Host, { key: 'ab83962fa679505585445e3baab12b31bf1abd00' }, h(Fragment, { key: '3f4c77b79718eb71600129910be78980a70c3022' }, this.notifications.map(notif => (h("div", { class: `notif ${notif.type}`, key: notif.id }, h("div", { class: "content" }, h("span", { class: `icon ${notif.type}` }, (notif.type === 'error' || notif.type === 'warning') && h("warning-icon", null)), h("span", { class: "message" }, h("span", { class: "title" }, notif.title), notif.description && h("span", { class: "description" }, notif.description))), h("button", { class: "dismiss-btn", onClick: () => this.dismissNotification(notif.id) }, h("close-icon", null))))), h("slot", { key: '45286b7e48b19c7b76089ef2d661e9cd176b4a8f' }))));
+        return (h(Host, { key: '9011372a63b5b706177dedf93b14df8158e14e04' }, h(Fragment, { key: 'd06168682c50f2b5330f8c923ecaec19dfc44add' }, this.notifications.map(notif => (h("div", { class: `notif ${notif.type}`, key: notif.id }, h("div", { class: "content" }, h("span", { class: `icon ${notif.type}` }, (notif.type === 'error' || notif.type === 'warning') && h("warning-icon", null)), h("span", { class: "message" }, h("span", { class: "title" }, notif.title), notif.description && h("span", { class: "description" }, notif.description))), h("button", { class: "dismiss-btn", onClick: () => this.dismissNotification(notif.id) }, h("close-icon", null))))), h("slot", { key: '6cfe1ecaea1c313ca1549d01b3b8c1627af0d8f2' }))));
     }
 };
 NylasNotification.style = nylasNotificationCss;

package/dist/nylas-web-elements/nylas-participants-custom-availability.entry.js

@@ -0,0 +1,138 @@
+import { r as registerInstance, a as createEvent, h, e as Host, i as getElement } from './index-582cfc93.js';
+import { R as RegisterComponent } from './register-component-aef40ec4.js';
+import { a as debug } from './utils-04c10cbd.js';
+import './buffer-es6-5510d761.js';
+import './_commonjsHelpers-6cbf8316.js';
+
+const nylasParticipantsCustomAvailabilityCss = ":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}";
+
+var __decorate = (undefined && undefined.__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 = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasParticipantsCustomAvailability = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        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 formAssociated() { return true; }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "name": ["elementNameChangedHandler"],
+        "participants": ["participantsChangedHandler"]
+    }; }
+};
+__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);
+NylasParticipantsCustomAvailability.style = nylasParticipantsCustomAvailabilityCss;
+
+export { NylasParticipantsCustomAvailability as nylas_participants_custom_availability };
+
+//# sourceMappingURL=nylas-participants-custom-availability.entry.js.map

package/dist/nylas-web-elements/nylas-participants-custom-availability.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-participants-custom-availability.entry.esm.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.scss?tag=nylas-participants-custom-availability&encapsulation=shadow","src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.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-participants-custom-availability {\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    h3 {\n      margin: 0;\n      font-size: 16px;\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  .content {\n    .participant-container {\n      padding-top: 8px;\n      border-top: 1px solid var(--nylas-base-200);\n      .participant-title {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 4px 16px 12px;\n        p {\n          margin: 0;\n        }\n        .participant-toggle {\n          display: flex;\n          gap: 24px;\n          align-items: center;\n          .chevron {\n            display: flex;\n            align-self: center;\n            cursor: pointer;\n\n            &:hover,\n            &:active {\n              color: var(--nylas-primary);\n            }\n\n            &.open {\n              transform: rotate(90deg);\n            }\n\n            &.closed {\n              transform: rotate(270deg);\n            }\n\n            &.disabled {\n              cursor: not-allowed;\n              color: var(--nylas-base-300);\n              &:hover {\n                color: var(--nylas-base-300);\n              }\n            }\n          }\n        }\n      }\n      nylas-availability-picker::part(nap) {\n        margin: 0;\n        border: none;\n      }\n    }\n  }\n}\n","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"],"version":3}

package/dist/nylas-web-elements/nylas-provider.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, i as createEvent, h, a as Host, e as getElement } from './index-8362ce5c.js';
-import { N as NylasBaseProvider, e as es } from './index.es-896126fc.js';
-import { a as debug } from './utils-49a1d17b.js';
-import { N as NylasAuthConnector, a as NylasThreadsConnector, b as NylasMessagesConnector, c as NylasFoldersConnector, C as CreateNylasAuthStore, d as CreateNylasMailboxStore, H as HashRouter } from './mailbox-store-11fa8387.js';
-import { N as NylaSchedulerAPIConnector, C as CreateNylasSchedulerStore } from './scheduler-store-c3af2560.js';
-import { C as CreateNylasSchedulerConfigStore } from './scheduler-config-store-8ccc8dc7.js';
+import { r as registerInstance, a as createEvent, h, e as Host, i as getElement } from './index-582cfc93.js';
+import { N as NylasBaseProvider, e as es } from './index.es-c5a8a1ac.js';
+import { a as debug } from './utils-04c10cbd.js';
+import { N as NylasAuthConnector, a as NylasThreadsConnector, b as NylasMessagesConnector, c as NylasFoldersConnector, C as CreateNylasAuthStore, d as CreateNylasMailboxStore, H as HashRouter } from './mailbox-store-94133e15.js';
+import { N as NylaSchedulerAPIConnector, C as CreateNylasSchedulerStore } from './scheduler-store-6c4866d6.js';
+import { C as CreateNylasSchedulerConfigStore } from './scheduler-config-store-f20845ad.js';
 import './buffer-es6-5510d761.js';
 import './_commonjsHelpers-6cbf8316.js';
-import './index-11d12497.js';
+import './index-2c7e4f4b.js';
 
 class NylasConnector {
     constructor(router, nylasAuth, nylasAuthStore, nylasMailboxStore, nylasSchedulerStore, nylasSchedulerConfigStore, schedulerAPIURL = 'https://api.us.nylas.com') {
@@ -183,7 +183,7 @@ const NylasProvider = class {
         return this.baseProvider?.getStore('schedulerConfig');
     }
     render() {
-        return (h(Host, { key: '57612ac13296cebf2c8731bcb9329f980db034d3' }, h("slot", { key: 'd752cd8c4cd47c9c17d57e23477d3a7720cbc8f5' })));
+        return (h(Host, { key: '7fee35047bafd5dc2f77e83012fe5149f17f7f9f' }, h("slot", { key: '96dcdef76b63b551e2deb56bfd0d1497ff897114' })));
     }
     get host() { return getElement(this); }
 };

package/dist/nylas-web-elements/nylas-scheduler-editor.entry.js

@@ -1,12 +1,12 @@
-import { h, F as Fragment$1, r as registerInstance, i as createEvent, a as Host, e as getElement } from './index-8362ce5c.js';
-import { X as Xr, N as NylasBaseProvider } from './index.es-896126fc.js';
-import { N as NylasIdentityRequestWrapper } from './nylas-api-request-27e81d64.js';
-import { d as dataResponse, a as debug } from './utils-49a1d17b.js';
-import { C as CreateNylasSchedulerConfigStore } from './scheduler-config-store-8ccc8dc7.js';
+import { h, F as Fragment$1, r as registerInstance, a as createEvent, e as Host, i as getElement } from './index-582cfc93.js';
+import { X as Xr, N as NylasBaseProvider } from './index.es-c5a8a1ac.js';
+import { N as NylasIdentityRequestWrapper } from './nylas-api-request-5ac7887c.js';
+import { d as dataResponse, a as debug } from './utils-04c10cbd.js';
+import { C as CreateNylasSchedulerConfigStore } from './scheduler-config-store-f20845ad.js';
 import { B as Buffer } from './buffer-es6-5510d761.js';
 import { p as process } from './index-e7777c5d.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-6cbf8316.js';
-import './index-11d12497.js';
+import './index-2c7e4f4b.js';
 
 class NylasSchedulerConfigAPIConnector {
     constructor({ nylasApiRequest, nylasSchedulerConfigStore }) {
@@ -5419,6 +5419,7 @@ const NylasSchedulerEditor = class {
         this.schedulerPreviewLink = '';
         this.defaultSchedulerConfigState = undefined;
         this.mode = 'app';
+        this.additionalParticipants = undefined;
         this.automaticComponentRegistration = true;
     }
     connectedCallback() {
@@ -5429,6 +5430,7 @@ const NylasSchedulerEditor = class {
         this.stores = {
             schedulerConfig: CreateNylasSchedulerConfigStore({
                 ...this.defaultSchedulerConfigState,
+                additionalParticipants: this.additionalParticipants,
             }),
         };
         if (!this.nylasApiRequest && this.nylasSessionsConfig) {
@@ -5518,7 +5520,7 @@ const NylasSchedulerEditor = class {
         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 })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {