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

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

@@ -17,6 +17,7 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasLocationComponent {
     constructor() {
+        this.selectedConfiguration = undefined;
         this.eventLocation = undefined;
         this.location = this.eventLocation ?? '';
         this.selectedLocationOption = this.eventLocation ? 'custom' : 'none';
@@ -26,6 +27,14 @@ export class NylasLocationComponent {
         debug('nylas-location-component', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newValue, oldValue) {
+        debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);
+        const configLocation = newValue?.event_booking?.location;
+        if (configLocation) {
+            this.selectedLocationOption = configLocation ? 'custom' : 'none';
+            this.location = configLocation;
+        }
+    }
     eventLocationChangedHandler(newValue, oldValue) {
         debug('nylas-location-component', 'eventLocationChangedHandler', newValue);
         if (newValue === oldValue) {
@@ -70,10 +79,10 @@ export class NylasLocationComponent {
             { value: 'custom', label: 'Custom location' },
         ];
         const icons = {
-            none: h("location-off-icon", { key: '694d28e2c953bd5519209e10435bf646578d114a' }),
-            custom: h("location-icon", { key: '7062ec4488bff42737000d61ea2bf139a873a2c5' }),
+            none: h("location-off-icon", { key: '5344819790f0d245e78de8808b05005eaa610991' }),
+            custom: h("location-icon", { key: '6d931006f7ea79e3290bde60cbdd3c1ca8e827f8' }),
         };
-        return (h(Host, { key: 'fc9ae763769cb2eb7bc441b1badd42247875f398' }, h("div", { key: '7af34d7e80f9f54c27625e8740c6b5474087e737', class: "nylas-event-location", part: "nel" }, h("label", { key: 'f5023e444ca97848346897f51fce28352f267d49', htmlFor: "location" }, "Location type", h("span", { key: 'f5b34257a36a986f22e7d6d912976c23ebe979ad', class: "label-icon" }, h("tooltip-component", { key: '68ac23d32ce98388faa32476c4d5630e7fe8b684' }, h("info-icon", { key: '57a204c6d75da1132272e1e1d59e1fd46e9677fc', slot: "tooltip-icon" }), h("span", { key: '1dd7951c0aa0f5024a02f64a83495c2d241daa84', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: 'e059381733d12841294fdb781ad59a6a12f49a74', class: "location-input" }, h("select-dropdown", { key: '006b90371c0fde6f2e8dc3be75b40e398ceaf62d', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content" }, h("span", { key: '6f61a147ebbc95c142ffa379886d15031168f837', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: '2117e5636492cd1b3bc3b975fdc1398c030df9a4' }, h("div", { key: '093c3fdfaf0ad88955f8f785a5c589708d941e57', class: "nylas-event-location", part: "nel" }, h("label", { key: 'e2754216f675fc82cdc7813bacfe0e928e9ed50e', htmlFor: "location" }, "Location type", h("span", { key: 'e402fccc0065a4f6fd0cbd05af345b73b06c4464', class: "label-icon" }, h("tooltip-component", { key: 'c818dbca3cbbf29e34c56bbc9caea7fc3816d808' }, h("info-icon", { key: '5ea673e0d49efe7e0a4ac04c3ec64427a63b8843', slot: "tooltip-icon" }), h("span", { key: 'dac6ddf369aa6caf62a870ca349745f546ed3959', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: 'bf334b9e8e03b660f661d264c9ca52444ee859b6', class: "location-input" }, h("select-dropdown", { key: 'f216e1589bb3b72a9ed6b9cfbec5683795e1b08e', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content" }, h("span", { key: '6ca96d9f95ac189195c1490e6872b2478cd0d270', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get is() { return "nylas-location-component"; }
     static get encapsulation() { return "shadow"; }
@@ -90,6 +99,27 @@ export class NylasLocationComponent {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "eventLocation": {
                 "type": "string",
                 "mutable": false,
@@ -156,6 +186,9 @@ export class NylasLocationComponent {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }, {
                 "propName": "eventLocation",
                 "methodName": "eventLocationChangedHandler"
@@ -175,6 +208,7 @@ export class NylasLocationComponent {
 __decorate([
     RegisterComponent({
         name: 'nylas-location-component',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-location-component.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-location-component/nylas-location-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-location-component` component is a form input for the description of an event.\n * @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-location-component',\n  styleUrl: 'nylas-location-component.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLocationComponent {\n  @Prop() eventLocation?: string;\n  @State() location: string = this.eventLocation ?? '';\n  @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'location';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-location-component', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n  @Watch('eventLocation')\n  eventLocationChangedHandler(newValue: string, oldValue: string) {\n    debug('nylas-location-component', 'eventLocationChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.selectedLocationOption = newValue ? 'custom' : 'none';\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-location-component', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-location-component', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-location-component', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-location-component', 'disconnectedCallback');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string }>) {\n    this.selectedLocationOption = event.detail.value;\n    if (this.selectedLocationOption === 'none') {\n      this.location = '';\n      this.setFormValue('', 'location');\n      this.valueChanged.emit({ value: '', name: this.name });\n    }\n  }\n\n  setFormValue(value: string, name: string) {\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(value, name);\n    }\n  }\n\n  handleChange(event) {\n    this.location = event.target.value;\n    this.setFormValue(event.target.value, 'location');\n    this.valueChanged.emit({ value: event.target.value, name: this.name });\n  }\n\n  @RegisterComponent<NylasLocationComponent, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-location-component',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const locationOptions = [\n      { value: 'none', label: 'None' },\n      { value: 'custom', label: 'Custom location' },\n    ];\n    const icons = {\n      none: <location-off-icon />,\n      custom: <location-icon />,\n    };\n\n    return (\n      <Host>\n        <div class=\"nylas-event-location\" part=\"nel\">\n          <label htmlFor=\"location\">\n            Location type\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n                </span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div class=\"location-input\">\n            <select-dropdown\n              withSearch={false}\n              name=\"location\"\n              options={locationOptions}\n              defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}\n              exportparts=\"sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content\"\n            >\n              <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n            </select-dropdown>\n            {this.selectedLocationOption === 'custom' && (\n              <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-location-component.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-location-component/nylas-location-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-location-component` component is a form input for the description of an event.\n * @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-location-component',\n  styleUrl: 'nylas-location-component.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLocationComponent {\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  @Prop() eventLocation?: string;\n  @State() location: string = this.eventLocation ?? '';\n  @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'location';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-location-component', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n    const configLocation = newValue?.event_booking?.location;\n    if (configLocation) {\n      this.selectedLocationOption = configLocation ? 'custom' : 'none';\n      this.location = configLocation;\n    }\n  }\n\n  @Watch('eventLocation')\n  eventLocationChangedHandler(newValue: string, oldValue: string) {\n    debug('nylas-location-component', 'eventLocationChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.selectedLocationOption = newValue ? 'custom' : 'none';\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-location-component', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-location-component', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-location-component', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-location-component', 'disconnectedCallback');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string }>) {\n    this.selectedLocationOption = event.detail.value;\n    if (this.selectedLocationOption === 'none') {\n      this.location = '';\n      this.setFormValue('', 'location');\n      this.valueChanged.emit({ value: '', name: this.name });\n    }\n  }\n\n  setFormValue(value: string, name: string) {\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(value, name);\n    }\n  }\n\n  handleChange(event) {\n    this.location = event.target.value;\n    this.setFormValue(event.target.value, 'location');\n    this.valueChanged.emit({ value: event.target.value, name: this.name });\n  }\n\n  @RegisterComponent<NylasLocationComponent, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-location-component',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const locationOptions = [\n      { value: 'none', label: 'None' },\n      { value: 'custom', label: 'Custom location' },\n    ];\n    const icons = {\n      none: <location-off-icon />,\n      custom: <location-icon />,\n    };\n\n    return (\n      <Host>\n        <div class=\"nylas-event-location\" part=\"nel\">\n          <label htmlFor=\"location\">\n            Location type\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n                </span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div class=\"location-input\">\n            <select-dropdown\n              withSearch={false}\n              name=\"location\"\n              options={locationOptions}\n              defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}\n              exportparts=\"sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content\"\n            >\n              <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n            </select-dropdown>\n            {this.selectedLocationOption === 'custom' && (\n              <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -17,6 +17,7 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasMinCancellationNotice {
     constructor() {
+        this.selectedConfiguration = undefined;
         this.minCancellationNotice = undefined;
         this.name = 'min-cancellation-notice';
         this.selectedNumber = 1;
@@ -26,10 +27,14 @@ export class NylasMinCancellationNotice {
         debug('nylas-min-cancellation-notice', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newVal) {
+        const minCancellationNotice = newVal?.scheduler?.min_cancellation_notice;
+        if (minCancellationNotice) {
+            this.updateNumberAndPeriodFromMinutes(minCancellationNotice);
+        }
+    }
     availableDaysInFutureChanged(newValue) {
-        const { number, period } = this.calculateNumberAndPeriodFromMinutes(newValue);
-        this.selectedNumber = number;
-        this.selectedPeriod = period;
+        this.updateNumberAndPeriodFromMinutes(newValue);
     }
     connectedCallback() {
         debug('nylas-min-cancellation-notice', 'connectedCallback');
@@ -74,35 +79,43 @@ export class NylasMinCancellationNotice {
         else {
             totalMinutes = 0;
         }
-        this.valueChanged.emit({ value: totalMinutes, name: this.name });
+        this.valueChanged.emit({ value: totalMinutes, name: 'minCancellationNotice' });
         if (typeof this.internals.setFormValue !== 'function') {
             return;
         }
         this.internals.setFormValue(totalMinutes.toString(), this.name);
     }
-    calculateNumberAndPeriodFromMinutes(minutes) {
+    updateNumberAndPeriodFromMinutes(minutes) {
         const minutesInHour = 60;
         const minutesInDay = minutesInHour * 24;
         const minutesInWeek = minutesInDay * 7;
         const minutesInMonth = minutesInDay * 30;
+        let number, period;
         if (minutes >= minutesInMonth) {
-            return { number: Math.floor(minutes / minutesInMonth), period: 'month' };
+            number = Math.floor(minutes / minutesInMonth);
+            period = 'month';
         }
         else if (minutes >= minutesInWeek) {
-            return { number: Math.floor(minutes / minutesInWeek), period: 'week' };
+            number = Math.floor(minutes / minutesInWeek);
+            period = 'week';
         }
         else if (minutes >= minutesInDay) {
-            return { number: Math.floor(minutes / minutesInDay), period: 'day' };
+            number = Math.floor(minutes / minutesInDay);
+            period = 'day';
         }
         else if (minutes >= minutesInHour) {
-            return { number: Math.floor(minutes / minutesInHour), period: 'hour' };
+            number = Math.floor(minutes / minutesInHour);
+            period = 'hour';
         }
         else {
-            return { number: minutes, period: 'minute' };
+            number = minutes;
+            period = 'minute';
         }
+        this.selectedNumber = number;
+        this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: 'e8638ae7a5b45140fa0abc7e50d4ec751faed4a4' }, h("div", { key: '282e956cdf1b1b9b2f42ea497fb80ae3cc422d58', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '18c52355a024ff02a896cd6727fb947d4892d3d6' }, "Minimum cancellation notice", h("span", { key: '0ebeecfaadaf1a6b2c96ab0370516b744e79ecbf', class: "label-icon" }, h("tooltip-component", { key: 'e216327d62b98e954286a16bef997115617c9fb8' }, h("info-icon", { key: 'b2ac6e0031012959ed6282deb04b73eabb5e84de', slot: "tooltip-icon" }), h("span", { key: '05e0bb93d0468b97d0ce815fafe5ca0ab6be31cc', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: '28e31fad6667ee1b7c05e63620a5716167262c5f', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: 'd2eb0d080d1ce4645a642a4f5d55270ed170e882' }, h("div", { key: '2743c3c781ad47c9d0d53fdad2773f45d172e1f4', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '457729b50558651645ecb10398586af1078cfd34' }, "Minimum cancellation notice", h("span", { key: '00b310035def5b8bbc183fa03d2bcb37d7c04b42', class: "label-icon" }, h("tooltip-component", { key: '27c7695f6302e2d043899656f15a70846c2858e2' }, h("info-icon", { key: '10f878cb410cc284e86890a0d6047c27bdc7f455', slot: "tooltip-icon" }), h("span", { key: 'e853afaa116b43371d01fcb3b801e622902e22cd', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: '8bb3955f8cce7661e213fbf2c107f8326937b467', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get is() { return "nylas-min-cancellation-notice"; }
     static get encapsulation() { return "shadow"; }
@@ -119,6 +132,27 @@ export class NylasMinCancellationNotice {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "minCancellationNotice": {
                 "type": "number",
                 "mutable": false,
@@ -185,6 +219,9 @@ export class NylasMinCancellationNotice {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }, {
                 "propName": "availableDaysInFuture",
                 "methodName": "availableDaysInFutureChanged"
@@ -204,6 +241,7 @@ export class NylasMinCancellationNotice {
 __decorate([
     RegisterComponent({
         name: 'nylas-min-cancellation-notice',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-min-cancellation-notice.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-min-cancellation-notice` component is a form input for the description of an event.\n * @part nmcn - The minimum cancellation notice container\n * @part nmcn__number-dropdown - The number dropdown container\n * @part nmcn__number-dropdown-button - The number dropdown button\n * @part nmcn__number-dropdown-content - The number dropdown content\n * @part nmcn__period-dropdown - The period dropdown container\n * @part nmcn__period-dropdown-button - The period dropdown button\n * @part nmcn__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-min-cancellation-notice',\n  styleUrl: 'nylas-min-cancellation-notice.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasMinCancellationNotice {\n  @Prop() minCancellationNotice?: number;\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'min-cancellation-notice';\n\n  @State() selectedNumber: number = 1;\n  @State() selectedPeriod: string = 'day';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-min-cancellation-notice', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    const { number, period } = this.calculateNumberAndPeriodFromMinutes(newValue);\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-min-cancellation-notice', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-min-cancellation-notice', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-min-cancellation-notice', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.minCancellationNotice ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.minCancellationNotice?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-min-cancellation-notice', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let totalMinutes;\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (period === 'minute') {\n      totalMinutes = number;\n    } else if (period === 'hour') {\n      totalMinutes = number * minutesInHour;\n    } else if (period === 'day') {\n      totalMinutes = number * minutesInDay;\n    } else if (period === 'week') {\n      totalMinutes = number * minutesInWeek;\n    } else if (period === 'month') {\n      totalMinutes = number * minutesInMonth;\n    } else {\n      totalMinutes = 0;\n    }\n    this.valueChanged.emit({ value: totalMinutes, name: this.name });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(totalMinutes.toString(), this.name);\n  }\n\n  private calculateNumberAndPeriodFromMinutes(minutes: number): { number: number; period: string } {\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (minutes >= minutesInMonth) {\n      return { number: Math.floor(minutes / minutesInMonth), period: 'month' };\n    } else if (minutes >= minutesInWeek) {\n      return { number: Math.floor(minutes / minutesInWeek), period: 'week' };\n    } else if (minutes >= minutesInDay) {\n      return { number: Math.floor(minutes / minutesInDay), period: 'day' };\n    } else if (minutes >= minutesInHour) {\n      return { number: Math.floor(minutes / minutesInHour), period: 'hour' };\n    } else {\n      return { number: minutes, period: 'minute' };\n    }\n  }\n\n  @RegisterComponent<NylasMinCancellationNotice, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-min-cancellation-notice',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-min-cancellation-notice\" part=\"nmcn\">\n          <label>\n            Minimum cancellation notice\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set the minimum amount of time required to cancel an event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"min-cancellation-notice\"\n            exportparts=\"tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content\"\n            timePeriods={['minute', 'hour', 'day', 'week']}\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-min-cancellation-notice.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-min-cancellation-notice` component is a form input for the description of an event.\n * @part nmcn - The minimum cancellation notice container\n * @part nmcn__number-dropdown - The number dropdown container\n * @part nmcn__number-dropdown-button - The number dropdown button\n * @part nmcn__number-dropdown-content - The number dropdown content\n * @part nmcn__period-dropdown - The period dropdown container\n * @part nmcn__period-dropdown-button - The period dropdown button\n * @part nmcn__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-min-cancellation-notice',\n  styleUrl: 'nylas-min-cancellation-notice.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasMinCancellationNotice {\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  @Prop() minCancellationNotice?: number;\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'min-cancellation-notice';\n\n  @State() selectedNumber: number = 1;\n  @State() selectedPeriod: string = 'day';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-min-cancellation-notice', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const minCancellationNotice = newVal?.scheduler?.min_cancellation_notice;\n    if (minCancellationNotice) {\n      this.updateNumberAndPeriodFromMinutes(minCancellationNotice);\n    }\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    this.updateNumberAndPeriodFromMinutes(newValue);\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-min-cancellation-notice', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-min-cancellation-notice', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-min-cancellation-notice', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.minCancellationNotice ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.minCancellationNotice?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-min-cancellation-notice', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let totalMinutes;\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (period === 'minute') {\n      totalMinutes = number;\n    } else if (period === 'hour') {\n      totalMinutes = number * minutesInHour;\n    } else if (period === 'day') {\n      totalMinutes = number * minutesInDay;\n    } else if (period === 'week') {\n      totalMinutes = number * minutesInWeek;\n    } else if (period === 'month') {\n      totalMinutes = number * minutesInMonth;\n    } else {\n      totalMinutes = 0;\n    }\n    this.valueChanged.emit({ value: totalMinutes, name: 'minCancellationNotice' });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(totalMinutes.toString(), this.name);\n  }\n\n  private updateNumberAndPeriodFromMinutes(minutes: number): void {\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n    let number, period;\n    if (minutes >= minutesInMonth) {\n      number = Math.floor(minutes / minutesInMonth);\n      period = 'month';\n    } else if (minutes >= minutesInWeek) {\n      number = Math.floor(minutes / minutesInWeek);\n      period = 'week';\n    } else if (minutes >= minutesInDay) {\n      number = Math.floor(minutes / minutesInDay);\n      period = 'day';\n    } else if (minutes >= minutesInHour) {\n      number = Math.floor(minutes / minutesInHour);\n      period = 'hour';\n    } else {\n      number = minutes;\n      period = 'minute';\n    }\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @RegisterComponent<NylasMinCancellationNotice, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-min-cancellation-notice',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-min-cancellation-notice\" part=\"nmcn\">\n          <label>\n            Minimum cancellation notice\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set the minimum amount of time required to cancel an event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"min-cancellation-notice\"\n            exportparts=\"tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content\"\n            timePeriods={['minute', 'hour', 'day', 'week']}\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -77,6 +77,12 @@ div.scheduler-editor-header button:disabled {
 nylas-editor-tabs {
   width: auto;
 }
+nylas-editor-tabs nylas-event-info div[slot=inputs],
+nylas-editor-tabs nylas-event-limits div[slot=inputs] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 
 .card {
   display: flex;

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

@@ -23,6 +23,7 @@ export class NylasSchedulerEditor {
         this.configurationId = undefined;
         this.nylasApiRequest = undefined;
         this.nylasSessionsConfig = undefined;
+        this.defaultAuthArgs = undefined;
         this.eventOverrides = {};
         this.schedulerPreviewLink = '';
         this.defaultSchedulerConfigStoreState = undefined;
@@ -56,6 +57,9 @@ export class NylasSchedulerEditor {
             });
             this.nylasApiRequest = new NylasIdentityRequestWrapper(nylasSession);
         }
+        if (this.nylasApiRequest && this.defaultAuthArgs) {
+            this.nylasApiRequest.setDefaultAuthArgs(this.defaultAuthArgs);
+        }
         this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);
         const nylasSchedulerConfigStore = this.baseProvider.getStore('schedulerConfig');
         this.nylasSchedulerConfigConnector = new NylasSchedulerConfigConnector({
@@ -74,7 +78,7 @@ export class NylasSchedulerEditor {
                 this.loggedOut.emit(this.host);
             }
         }
-        this.stores?.schedulerConfig?.onChange('config', async (config) => {
+        this.stores?.schedulerConfig?.onChange('selectedConfiguration', async (config) => {
             if (config && config.id) {
                 this.configurationId = config.id;
             }
@@ -97,7 +101,7 @@ export class NylasSchedulerEditor {
             this.stores?.schedulerConfig?.set('action', 'edit');
         }
         else {
-            this.stores?.schedulerConfig?.set('config', {});
+            this.stores?.schedulerConfig?.set('selectedConfiguration', {});
             this.stores?.schedulerConfig?.set('action', null);
         }
     }
@@ -124,11 +128,7 @@ export class NylasSchedulerEditor {
         await this.nylasSchedulerConfigConnector.schedulerConfig?.getCalendars();
     }
     render() {
-        const defaultEditor = this.mode === 'app';
-        if (defaultEditor) {
-            return (h(Host, null, h("div", { class: "scheduler-editor-header", part: "nse__header" }, h("h1", { class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { width: "18", height: "18" }), "Scheduler editor"), h("button", { class: "scheduler-editor-close", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { 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' || this.stores.schedulerConfig.state.action === 'edit') && (h("nylas-editor-tabs", null)), !this.stores?.schedulerConfig?.state.currentUser && (h("slot", { name: "login-required" }, h(LoginRequired, { authenticationUrl: this.authenticationUrl })))));
-        }
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '14880638bcb9c031f748d72fe0052b6eb0df463d' }, h("div", { key: 'f0ee0e9a97eddbd350dfc41469257475e6178e3d', class: "scheduler-editor-header", part: "nse__header" }, h("h1", { key: 'eb85113f9650853bb6f3f348e6517ba83112f28f', class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { key: '48e6edb5828fbdb111a3360a5c49ef762008c69a', width: "18", height: "18" }), "Scheduler editor"), h("button", { key: 'f3d02137c2a999e6305b20b6735efc77370a6a83', class: "scheduler-editor-close", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { key: '05280d7af113731d30b659d9de308b23aa3ea014', 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("nylas-event-info", null, h("div", { slot: "inputs" }, h("nylas-event-title", null), h("nylas-event-duration", null), h("nylas-location-component", null))), h("nylas-booking-calendar-picker", 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"; }
@@ -221,12 +221,33 @@ export class NylasSchedulerEditor {
                     "text": "The Nylas Sessions configuration.\nUsed to configure the Nylas Sessions instance."
                 }
             },
+            "defaultAuthArgs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AuthArgs",
+                    "resolved": "undefined | { provider?: string | undefined; scope?: string[] | undefined; loginHint?: string | undefined; includeGrantScopes?: boolean | undefined; prompt?: string | undefined; metadata?: string | undefined; state?: string | undefined; }",
+                    "references": {
+                        "AuthArgs": {
+                            "location": "import",
+                            "path": "@/common/nylas-api-request",
+                            "id": "src/common/nylas-api-request.ts::AuthArgs"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The default authentication arguments to use when authenticating a user."
+                }
+            },
             "eventOverrides": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
                     "original": "SchedulerEditorEventOverride",
-                    "resolved": "Partial<{ valueChanged: (event: CustomEvent<{ value: OpenHours[]; name: string; } | { 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; }>, 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: { openHours: OpenHours[]; timezone: string; }; name: string; } | { 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; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; schedulerConfigChanged: (event: CustomEvent<SchedulerEventDetail>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelButtonClick: (event: CustomEvent<void>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; formSubmitted: (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",
@@ -265,9 +286,13 @@ export class NylasSchedulerEditor {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "NylasSchedulerConfigStoreState",
-                    "resolved": "NylasSchedulerConfigStoreState | undefined",
+                    "original": "Partial<NylasSchedulerConfigStoreState>",
+                    "resolved": "undefined | { selectedConfiguration?: Partial<Configuration> | undefined; configurations?: Configuration[] | undefined; calendars?: Calendar[] | undefined; currentUser?: User | null | undefined; action?: \"create\" | \"edit\" | null | undefined; defaultRequiresSessionAuth?: boolean | undefined; }",
                     "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
                         "NylasSchedulerConfigStoreState": {
                             "location": "import",
                             "path": "@/stores/scheduler-config-store",
@@ -401,18 +426,13 @@ export class NylasSchedulerEditor {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "NylasSchedulerConfigStoreState": {
-                            "location": "import",
-                            "path": "@/stores/scheduler-config-store",
-                            "id": "src/stores/scheduler-config-store.ts::NylasSchedulerConfigStoreState"
-                        },
                         "NylasSchedulerConfigStoreType": {
                             "location": "import",
                             "path": "@/stores/scheduler-config-store",
                             "id": "src/stores/scheduler-config-store.ts::NylasSchedulerConfigStoreType"
                         }
                     },
-                    "return": "Promise<ObservableMap<NylasSchedulerConfigStoreState> | undefined>"
+                    "return": "Promise<CreateNylasSchedulerConfigStoreReturnType | undefined>"
                 },
                 "docs": {
                     "text": "This method is used to get the NylasSchedulerConfigStore instance.\nYou can use this instance to update or get the state of the store.",

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":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,2BAA2B,EAA8B,MAAM,4BAA4B,CAAC;AAErG,OAAO,EAAE,6BAA6B,EAAE,MAAM,8CAA8C,CAAC;AAC7F,OAAO,EAAE,+BAA+B,EAAiE,MAAM,iCAAiC,CAAC;AACjJ,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAU,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAYhD,MAAM,OAAO,oBAAoB;;QA4RvB,sCAAiC,GAAG,CAAC,MAAa,EAAE,EAAE;YAC5D,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnD,CAAC,CAAC;QAOM,sBAAiB,GAAG,KAAK,EAAE,QAAiB,EAAE,EAAE;YACtD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC1B,OAAO,CAAC,KAAK,CAAC,gEAAgE,CAAC,CAAC;gBAChF,OAAO,EAAE,CAAC;YACZ,CAAC;YACD,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;YAEvE,OAAO,GAAG,IAAI,EAAE,CAAC;QACnB,CAAC,CAAC;0CA1Q6D,IAAI;;;;8BAyBZ,EAAE;oCAMqB,EAAE;;oBAab,KAAK;8CAgCrB,IAAI;;IAEvD,iBAAiB;QACf,KAAK,CAAC,4CAA4C,CAAC,CAAC;IACtD,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,4CAA4C,CAAC,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG;YACZ,eAAe,EAAE,+BAA+B,CAAC;gBAC/C,GAAG,IAAI,CAAC,gCAAgC;aACzC,CAAC;SACH,CAAC;QAGF,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,4BAA4B,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAEjG,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACtD,MAAM,YAAY,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAKjE,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;YAGhC,YAAY,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE;gBACrC,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,6BAA6B,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC;gBAC7F,IAAI,WAAW,EAAE,CAAC;oBAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC9B,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC,CAAC,CAAC;YAGH,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;gBAClC,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;gBACvD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjC,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,eAAe,GAAG,IAAI,2BAA2B,CAAC,YAAY,CAAC,CAAC;QACvE,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,8BAA8B,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAE5H,MAAM,yBAAyB,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;QAChF,IAAI,CAAC,6BAA6B,GAAG,IAAI,6BAA6B,CAAC;YACrE,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,yBAAyB,EAAE,yBAAyB;SACrD,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAChC,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,6BAA6B,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC;YAC7F,IAAI,WAAW,EAAE,CAAC;gBAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC9B,MAAM,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;gBACvD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;QAGD,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,EAAC,EAAE;YAC9D,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,EAAE,CAAC;gBACxB,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,EAAE,CAAC;YACnC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;IAC3E,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,2CAA2C,CAAC,CAAC;QACnD,IAAI,CAAC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACxC,CAAC;IAED,qBAAqB;QACnB,IAAI,CAAC,YAAY,EAAE,qBAAqB,EAAE,CAAC;IAC7C,CAAC;IAQD,iCAAiC,CAAC,qBAA8B;QAC9D,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,4BAA4B,EAAE,qBAAqB,CAAC,CAAC;IACzF,CAAC;IASD,KAAK,CAAC,sBAAsB,CAAC,kBAA0B;QACrD,IAAI,kBAAkB,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,6BAA6B,EAAE,eAAe,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;YACpG,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YAEN,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAChD,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAQD,KAAK,CAAC,KAAK;QACT,OAAO,IAAI,CAAC,MAAM,EAAE,eAAe,CAAC;IACtC,CAAC;IAQD,KAAK,CAAC,kBAAkB;QACtB,OAAO,IAAI,CAAC,6BAA6B,CAAC;IAC5C,CAAC;IASD,KAAK,CAAC,wBAAwB,CAAC,KAAiD;QAC9E,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACrD,CAAC;IASD,KAAK,CAAC,0BAA0B,CAAC,KAAiD;QAChF,IAAI,CAAC,YAAY,EAAE,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAMO,KAAK,CAAC,eAAe,CAAC,WAAiB;QAC7C,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QAE9D,IAAI,CAAC,IAAI,CAAC,6BAA6B,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,MAAM,IAAI,CAAC,6BAA6B,CAAC,eAAe,EAAE,oBAAoB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACvG,CAAC;QAED,MAAM,IAAI,CAAC,6BAA6B,CAAC,eAAe,EAAE,YAAY,EAAE,CAAC;IAC3E,CAAC;IAwBD,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;QAE1C,IAAI,aAAa,EAAE,CAAC;YAClB,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,aAAa;oBACrD,UAAI,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,YAAY;wBAClD,qBAAe,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG;2CAErC;oBACL,cAAQ,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,mBAAmB;wBACtH,kBAAY,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CAC9B,CACL;gBACL,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,IAAI,CACvG,WAAK,KAAK,EAAC,qBAAqB;oBAC9B,oCAAuD,CACnD,CACP;gBACA,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,CACpK,4BAAuC,CACxC;gBACA,CAAC,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,WAAW,IAAI,CACnD,YAAM,IAAI,EAAC,gBAAgB;oBACzB,EAAC,aAAa,IAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,GAAI,CACvD,CACR,CACI,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { NylasBaseProvider } from '@/common/abstract-provider';\nimport type { SchedulerEditorEventOverride } from '@/common/component-types';\nimport { 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';\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 default require session auth flag to used to set the default value for the requireSessionAuth\n   * property when creating a configuration. If set to true, then a session token must be provided\n   * to the <nylas-scheduling/> component. If set to false, then a session token is not required\n   * and the configuration id can passed to the <nylas-scheduling/> component instead.\n   */\n  @Prop({ mutable: true }) defaultRequiresSessionAuth: boolean = true;\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   * 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 a 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   */\n  @Prop({ attribute: 'default-scheduler-config-store-state' }) readonly defaultSchedulerConfigStoreState?: NylasSchedulerConfigStoreState;\n\n  /**\n   * The 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 NyalsAuth 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 NyalsAuth isAuthenticated state changes\n   * to true.\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.defaultSchedulerConfigStoreState,\n      }),\n    };\n\n    // Update our store state\n    this.stores?.schedulerConfig?.set('defaultRequiresSessionAuth', this.defaultRequiresSessionAuth);\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    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('config', 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 defaultRequiresSessionAuth property and update the\n   * defaultRequiresSessionAuth property in the scheduler config store.\n   * @param newRequireSessionAuth The new value for the defaultRequiresSessionAuth property\n   */\n  @Watch('defaultRequiresSessionAuth')\n  defaultRequiresSessionAuthChanged(newRequireSessionAuth: boolean) {\n    this.stores?.schedulerConfig?.set('defaultRequiresSessionAuth', newRequireSessionAuth);\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('config', {});\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      await this.nylasSchedulerConfigConnector.schedulerConfig?.getConfigurationById(this.configurationId);\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    this.schedulerConfigCloseClicked.emit(this.host);\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    const defaultEditor = this.mode === 'app';\n\n    if (defaultEditor) {\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\" 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' || this.stores.schedulerConfig.state.action === 'edit') && (\n            <nylas-editor-tabs></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    return (\n      <Host>\n        <slot></slot>\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';\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 default require session auth flag to used to set the default value for the requireSessionAuth\n   * property when creating a configuration. If set to true, then a session token must be provided\n   * to the <nylas-scheduling/> component. If set to false, then a session token is not required\n   * and the configuration id can passed to the <nylas-scheduling/> component instead.\n   */\n  @Prop({ mutable: true }) defaultRequiresSessionAuth: boolean = true;\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 a 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   */\n  @Prop({ attribute: 'default-scheduler-config-store-state' }) readonly defaultSchedulerConfigStoreState?: Partial<NylasSchedulerConfigStoreState>;\n\n  /**\n   * The 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 NyalsAuth 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 NyalsAuth isAuthenticated state changes\n   * to true.\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.defaultSchedulerConfigStoreState,\n      }),\n    };\n\n    // Update our store state\n    this.stores?.schedulerConfig?.set('defaultRequiresSessionAuth', this.defaultRequiresSessionAuth);\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 defaultRequiresSessionAuth property and update the\n   * defaultRequiresSessionAuth property in the scheduler config store.\n   * @param newRequireSessionAuth The new value for the defaultRequiresSessionAuth property\n   */\n  @Watch('defaultRequiresSessionAuth')\n  defaultRequiresSessionAuthChanged(newRequireSessionAuth: boolean) {\n    this.stores?.schedulerConfig?.set('defaultRequiresSessionAuth', newRequireSessionAuth);\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      await this.nylasSchedulerConfigConnector.schedulerConfig?.getConfigurationById(this.configurationId);\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    this.schedulerConfigCloseClicked.emit(this.host);\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\" 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            <nylas-event-info>\n              <div slot=\"inputs\">\n                <nylas-event-title />\n                <nylas-event-duration />\n                <nylas-location-component />\n              </div>\n            </nylas-event-info>\n            <nylas-booking-calendar-picker />\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

@@ -230,7 +230,7 @@ export class TimeInput {
         }
     }
     render() {
-        return (h(Host, { key: '68fb5327c6e823e29aafa4fd7e81bddac7ab19e9' }, h("div", { key: 'c1f7edbdc95926f66fb627cfe0eb7044611518a5', class: "time-picker", part: "time-picker" }, h("input", { key: 'f1c274637b24b9e4e88798ab83524efb8e75de36', type: "text", name: this.name, id: this.name, part: "time-input", class: {
+        return (h(Host, { key: 'fe86daaa8256c8fb59ffe2dfcbf50220f3a7b746' }, h("div", { key: '8cffe49df87c5bf2b73cef66236c806b47d623d4', class: "time-picker", part: "time-picker" }, h("input", { key: '6f735244c63287b0ec0668b688bbb18bb405346b', type: "text", name: this.name, id: this.name, part: "time-input", class: {
                 'time-input': true,
                 'error': !!this.err || this.hasError,
             }, ref: el => (this.timeInput = el), value: this.time, onClick: () => {

package/dist/collection/connector/nylas-scheduler-connector/errors/index.js

@@ -9,6 +9,7 @@ export var ComponentErrorType;
     ComponentErrorType["endtime_not_in_future"] = "endtime_not_in_future";
     ComponentErrorType["no_booking_info"] = "no_booking_info";
     ComponentErrorType["no_timeslot_selected"] = "no_timeslot_selected";
+    ComponentErrorType["no_timezone_selected"] = "no_timezone_selected";
     ComponentErrorType["no_booking_id"] = "no_booking_id";
     ComponentErrorType["invalid_start_time"] = "invalid_start_time";
     ComponentErrorType["invalid_end_time"] = "invalid_end_time";
@@ -49,6 +50,13 @@ export class Errors {
                         category,
                     };
                 },
+                no_timezone_selected: (message = 'No timezone selected') => {
+                    return {
+                        title,
+                        message,
+                        category,
+                    };
+                },
                 no_booking_id: (message = 'No booking id provided') => {
                     return {
                         title,