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

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

@@ -1,5 +1,9 @@
 :host {
-  display: block;
+  display: grid;
+  grid-auto-flow: row;
+  width: 100%;
+  font-family: inherit;
+  font-optical-sizing: auto;
   --nylas-primary: #2563eb;
   --nylas-error: #cc4841;
   --nylas-error-pressed: #992222;
@@ -29,12 +33,19 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
+  gap: 1rem;
+}
+@media screen and (max-width: 768px) {
+  .header {
+    flex-direction: column;
+  }
 }
 .header h2 {
   margin: 0;
   font-size: 1.25rem;
   color: var(--nylas-base-900);
+  font-weight: 600;
 }
 .header p {
   margin: 0;
@@ -44,22 +55,38 @@
 .header .actions {
   justify-self: end;
 }
+@media screen and (max-width: 768px) {
+  .header .actions {
+    width: 100%;
+  }
+}
 
 .configurations {
   border: 1px solid var(--nylas-base-200);
   border-radius: var(--nylas-border-radius-2x);
+  overflow-x: auto;
 }
 .configurations table {
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
+  font-family: inherit;
 }
 .configurations table tr {
+  color: var(--nylas-base-800);
   border-bottom: 1px solid var(--nylas-base-200);
+  font-family: inherit;
 }
 .configurations table tr:last-of-type {
   border-bottom: 0;
 }
+.configurations table tr.hide {
+  display: none;
+}
+.configurations table th {
+  font-weight: 600;
+  text-transform: uppercase;
+}
 .configurations table tr.no-configurations td > div {
   display: flex;
   height: 100%;
@@ -84,6 +111,7 @@
 .configurations table td {
   text-align: left;
   padding: 1rem;
+  font-family: inherit;
 }
 .configurations table .actions {
   text-align: right;
@@ -102,4 +130,13 @@
 }
 .configurations table .title .config-event-description {
   font-size: 0.75rem;
+}
+
+.error-container {
+  margin-top: 1.5rem;
+}
+.error-container .error {
+  color: var(--nylas-error);
+  padding: 0.5rem 0;
+  margin: 1rem 0 0;
 }

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

@@ -20,6 +20,7 @@ export class NylasListConfigurations {
         this.configurations = [];
         this.schedulerPreviewLink = '';
         this.state = 'loading';
+        this.error = '';
     }
     connectedCallback() {
         debug('[nylas-list-configurations]', 'connectedCallback');
@@ -43,10 +44,15 @@ export class NylasListConfigurations {
     async setState(state) {
         this.state = state;
     }
+    async setError(error) {
+        this.error = error;
+    }
     render() {
-        return (h(Host, { key: 'c6579bd33e43be81caa460d87e99ed53f8123c6a' }, h("div", { key: 'd3ff4fc25e34a2dab3820b774f52a845c37bb282', class: "nylas-list-configurations" }, h("div", { key: 'fc6ff138be7cf63196217b7ef7524ae8f0a82c5c', class: "header" }, h("div", { key: 'a518d44c645bfc5d5e8449119ebc4be7c475a5f3', class: "description" }, h("h2", { key: 'a9d999a93c26ee3d9040dcae09306ecb7da43fb5' }, "All scheduling configurations"), h("p", { key: '6361799617ce1ccf7469cce6a0064d94d97701b0' }, "Create, edit and manage all your scheduling configurations.")), this.configurations && this.configurations.length > 0 && (h("div", { class: "actions" }, h("button-component", { clickHandler: () => {
+        return (h(Host, null, h("div", { class: "header" }, h("div", { class: "description" }, h("h2", null, "All scheduling pages"), h("p", null, "Create, edit and manage all your scheduling pages.")), this.configurations && this.configurations.length > 0 && (h("div", { class: "actions" }, h("button-component", { clickHandler: () => {
                 this.createButtonClick.emit(this.host);
-            } }, "Create new")))), h("div", { key: '3f26491b35427c4364bcc1c5e1cbffdfabd52d37', class: "configurations" }, h("table", { key: 'ca8bf13b620b92cd4892b8dbf218988915ce4fc0' }, h("tr", { key: '09526ab48bbc988b0595f8060a184c340f1d43cc' }, h("th", { key: '7367e03d461f854eaf84e166d65471d356f44ee5' }, "Configuration event title"), h("th", { key: 'f983dcae11fdd33e21f0f202eb9b43a7d409b714' }, "Duration"), h("th", { key: '828c60e134498a1db8bd31ce0311bb8a771cb435', class: "actions" }, "Actions")), this.state === 'loading' && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("h3", null, "Loading..."), h("p", null, "Please wait while we fetch your configurations"))))), this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("calendar-icon", { width: "48", height: "48" }), h("h3", null, "No configurations found"), h("p", null, "Get started with creating your first scheduling page"), h("button-component", { clickHandler: () => {
+            } }, "Create new")))), h("div", { class: "configurations" }, h("table", null, h("tr", { class: {
+                hide: this.state === 'loading' || (this.configurations && this.configurations.length === 0),
+            } }, h("th", null, "Scheduling page event title"), h("th", null, "Duration"), h("th", { class: "actions" }, "Actions")), this.state === 'loading' && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("h3", null, "Loading..."), h("p", null, "Please wait while we fetch the scheduling pages"))))), this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("calendar-icon", { width: "48", height: "48" }), h("h3", null, "No scheduling pages found"), h("p", null, "Get started with creating your first scheduling page"), h("button-component", { clickHandler: () => {
                 this.createButtonClick.emit(this.host);
             } }, "Create new"))))), this.state !== 'loading' &&
             this.configurations.map(config => (h("tr", { key: config.id }, h("td", null, h("div", { class: "title" }, h("span", { class: 'config-event-title' }, config.event_booking.title), h("span", { class: 'config-event-description' }, config.event_booking.description))), h("td", null, h("div", null, config.availability.duration_minutes, " mins")), h("td", null, h("div", { class: "actions" }, h("button-component", { variant: 'basic', clickHandler: event => {
@@ -58,7 +64,7 @@ export class NylasListConfigurations {
                 } }, "Edit"), h("button-component", { variant: 'basic', clickHandler: event => {
                     event.preventDefault();
                     this.deleteButtonClick.emit({ host: this.host, configuration: config });
-                } }, "Delete")))))))))));
+                } }, "Delete")))))))), h("div", { class: "error-container" }, h("p", { class: 'error' }, this.state === 'error' && this.error))));
     }
     static get is() { return "nylas-list-configurations"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +124,8 @@ export class NylasListConfigurations {
     }
     static get states() {
         return {
-            "state": {}
+            "state": {},
+            "error": {}
         };
     }
     static get events() {
@@ -253,6 +260,27 @@ export class NylasListConfigurations {
                     "text": "",
                     "tags": []
                 }
+            },
+            "setError": {
+                "complexType": {
+                    "signature": "(error: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "error",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
@@ -267,20 +295,29 @@ __decorate([
             initListConfigurations: async (event, connector) => {
                 const host = event.detail;
                 await host.setState('loading');
-                await connector.schedulerConfig.getConfigurations();
+                const [data, error] = await connector.schedulerConfig.getConfigurations();
+                if (!data && error && error.message) {
+                    await host.setState('error');
+                    await host.setError(error.message);
+                    return;
+                }
                 await host.setState('loaded');
             },
             createButtonClick: async (_, connector) => {
-                connector.schedulerConfigStore.state.config = {};
+                connector.schedulerConfigStore.resetSelectedConfiguration();
                 connector.schedulerConfigStore.state.action = 'create';
             },
             deleteButtonClick: async (event, connector) => {
-                const { configuration } = event.detail;
-                await connector.schedulerConfig.deleteConfiguration(configuration.id);
+                const { host, configuration } = event.detail;
+                const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);
+                if (!data && error && error.message) {
+                    await host.setState('error');
+                    await host.setError(error.message);
+                }
             },
             editButtonClick: async (event, connector) => {
                 const { configuration } = event.detail;
-                connector.schedulerConfigStore.state.config = configuration;
+                connector.schedulerConfigStore.state.selectedConfiguration = configuration;
                 connector.schedulerConfigStore.state.action = 'edit';
             },
         },

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-list-configurations.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, parsePreviewLink } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-list-configurations` component displays a list of scheduling configurations.\n */\n@Component({\n  tag: 'nylas-list-configurations',\n  styleUrl: 'nylas-list-configurations.scss',\n  shadow: true,\n})\nexport class NylasListConfigurations {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasListConfigurationsElement;\n\n  /**\n   * The list of configurations to display.\n   */\n  @Prop() configurations: Configuration[] = [];\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   * Event emitted when the component is initialized.\n   */\n  @Event() initListConfigurations!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the create event button.\n   */\n  @Event() createButtonClick!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the edit event button.\n   */\n  @Event() editButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * Event emitted when the user clicks the delete event button.\n   */\n  @Event() deleteButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * The current state of the component.\n   */\n  @State() private state: 'loading' | 'loaded' | 'error' = 'loading';\n\n  connectedCallback() {\n    debug('[nylas-list-configurations]', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('[nylas-list-configurations]', 'componentWillLoad');\n\n    // If we have configurations, we will set the state to loaded.\n    if (this.configurations && this.configurations.length > 0) {\n      this.state = 'loaded';\n    }\n  }\n\n  componentDidLoad() {\n    debug('[nylas-list-configurations]', 'componentDidLoad');\n\n    // Fire the init event. By default, we will fetch the configurations.\n    // This is defined in the eventToProps object in the RegisterComponent decorator.\n    this.initListConfigurations.emit(this.host);\n  }\n\n  disconnectedCallback() {\n    debug('[nylas-list-configurations]', 'disconnectedCallback');\n  }\n\n  @Method()\n  async getState() {\n    return this.state;\n  }\n\n  @Method()\n  async setState(state: 'loading' | 'loaded' | 'error') {\n    this.state = state;\n  }\n\n  @RegisterComponent<NylasListConfigurations, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-list-configurations',\n    stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),\n    localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n    eventToProps: {\n      initListConfigurations: async (event, connector) => {\n        const host = event.detail;\n        await host.setState('loading');\n        await connector.schedulerConfig.getConfigurations();\n        await host.setState('loaded');\n      },\n      createButtonClick: async (_, connector) => {\n        connector.schedulerConfigStore.state.config = {};\n        connector.schedulerConfigStore.state.action = 'create';\n      },\n      deleteButtonClick: async (event, connector) => {\n        const { configuration } = event.detail;\n        await connector.schedulerConfig.deleteConfiguration(configuration.id);\n      },\n      editButtonClick: async (event, connector) => {\n        const { configuration } = event.detail;\n        connector.schedulerConfigStore.state.config = configuration;\n        connector.schedulerConfigStore.state.action = 'edit';\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-list-configurations\">\n          <div class=\"header\">\n            <div class=\"description\">\n              <h2>All scheduling configurations</h2>\n              <p>Create, edit and manage all your scheduling configurations.</p>\n            </div>\n            {this.configurations && this.configurations.length > 0 && (\n              <div class=\"actions\">\n                <button-component\n                  clickHandler={() => {\n                    this.createButtonClick.emit(this.host);\n                  }}\n                >\n                  Create new\n                </button-component>\n              </div>\n            )}\n          </div>\n          <div class=\"configurations\">\n            <table>\n              <tr>\n                <th>Configuration event title</th>\n                <th>Duration</th>\n                <th class=\"actions\">Actions</th>\n              </tr>\n              {this.state === 'loading' && (\n                <tr class=\"no-configurations\">\n                  <td colSpan={3}>\n                    <div>\n                      <h3>Loading...</h3>\n                      <p>Please wait while we fetch your configurations</p>\n                    </div>\n                  </td>\n                </tr>\n              )}\n              {this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (\n                <tr class=\"no-configurations\">\n                  <td colSpan={3}>\n                    <div>\n                      <calendar-icon width=\"48\" height=\"48\"></calendar-icon>\n                      <h3>No configurations found</h3>\n                      <p>Get started with creating your first scheduling page</p>\n                      <button-component\n                        clickHandler={() => {\n                          this.createButtonClick.emit(this.host);\n                        }}\n                      >\n                        Create new\n                      </button-component>\n                    </div>\n                  </td>\n                </tr>\n              )}\n              {this.state !== 'loading' &&\n                this.configurations.map(config => (\n                  <tr key={config.id}>\n                    <td>\n                      <div class=\"title\">\n                        <span class={'config-event-title'}>{config.event_booking.title}</span>\n                        <span class={'config-event-description'}>{config.event_booking.description}</span>\n                      </div>\n                    </td>\n                    <td>\n                      <div>{config.availability.duration_minutes} mins</div>\n                    </td>\n                    <td>\n                      <div class=\"actions\">\n                        <button-component\n                          variant={'basic'}\n                          clickHandler={event => {\n                            event.preventDefault();\n                            window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');\n                          }}\n                        >\n                          Preview\n                        </button-component>\n                        <button-component\n                          variant={'basic'}\n                          clickHandler={event => {\n                            event.preventDefault();\n                            this.editButtonClick.emit({ host: this.host, configuration: config });\n                          }}\n                        >\n                          Edit\n                        </button-component>\n                        <button-component\n                          variant={'basic'}\n                          clickHandler={event => {\n                            event.preventDefault();\n                            this.deleteButtonClick.emit({ host: this.host, configuration: config });\n                          }}\n                        >\n                          Delete\n                        </button-component>\n                      </div>\n                    </td>\n                  </tr>\n                ))}\n            </table>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-list-configurations.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, parsePreviewLink } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-list-configurations` component displays a list of scheduling pages.\n */\n@Component({\n  tag: 'nylas-list-configurations',\n  styleUrl: 'nylas-list-configurations.scss',\n  shadow: true,\n})\nexport class NylasListConfigurations {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasListConfigurationsElement;\n\n  /**\n   * The list of configurations to display.\n   */\n  @Prop() configurations: Configuration[] = [];\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   * Event emitted when the component is initialized.\n   */\n  @Event() initListConfigurations!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the create event button.\n   */\n  @Event() createButtonClick!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the edit event button.\n   */\n  @Event() editButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * Event emitted when the user clicks the delete event button.\n   */\n  @Event() deleteButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * The current state of the component.\n   */\n  @State() private state: 'loading' | 'loaded' | 'error' = 'loading';\n\n  /**\n   * The error message to display.\n   */\n  @State() private error: string = '';\n\n  connectedCallback() {\n    debug('[nylas-list-configurations]', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('[nylas-list-configurations]', 'componentWillLoad');\n\n    // If we have configurations, we will set the state to loaded.\n    if (this.configurations && this.configurations.length > 0) {\n      this.state = 'loaded';\n    }\n  }\n\n  componentDidLoad() {\n    debug('[nylas-list-configurations]', 'componentDidLoad');\n\n    // Fire the init event. By default, we will fetch the configurations.\n    // This is defined in the eventToProps object in the RegisterComponent decorator.\n    this.initListConfigurations.emit(this.host);\n  }\n\n  disconnectedCallback() {\n    debug('[nylas-list-configurations]', 'disconnectedCallback');\n  }\n\n  @Method()\n  async getState() {\n    return this.state;\n  }\n\n  @Method()\n  async setState(state: 'loading' | 'loaded' | 'error') {\n    this.state = state;\n  }\n\n  @Method()\n  async setError(error: string) {\n    this.error = error;\n  }\n\n  @RegisterComponent<NylasListConfigurations, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-list-configurations',\n    stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),\n    localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n    eventToProps: {\n      initListConfigurations: async (event, connector) => {\n        const host = event.detail;\n        await host.setState('loading');\n        const [data, error] = await connector.schedulerConfig.getConfigurations();\n        if (!data && error && error.message) {\n          await host.setState('error');\n          await host.setError(error.message);\n          return;\n        }\n        await host.setState('loaded');\n      },\n      createButtonClick: async (_, connector) => {\n        connector.schedulerConfigStore.resetSelectedConfiguration();\n        connector.schedulerConfigStore.state.action = 'create';\n      },\n      deleteButtonClick: async (event, connector) => {\n        const { host, configuration } = event.detail;\n        const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);\n        if (!data && error && error.message) {\n          await host.setState('error');\n          await host.setError(error.message);\n        }\n      },\n      editButtonClick: async (event, connector) => {\n        const { configuration } = event.detail;\n        connector.schedulerConfigStore.state.selectedConfiguration = configuration;\n        connector.schedulerConfigStore.state.action = 'edit';\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"description\">\n            <h2>All scheduling pages</h2>\n            <p>Create, edit and manage all your scheduling pages.</p>\n          </div>\n          {this.configurations && this.configurations.length > 0 && (\n            <div class=\"actions\">\n              <button-component\n                clickHandler={() => {\n                  this.createButtonClick.emit(this.host);\n                }}\n              >\n                Create new\n              </button-component>\n            </div>\n          )}\n        </div>\n        <div class=\"configurations\">\n          <table>\n            <tr\n              class={{\n                hide: this.state === 'loading' || (this.configurations && this.configurations.length === 0),\n              }}\n            >\n              <th>Scheduling page event title</th>\n              <th>Duration</th>\n              <th class=\"actions\">Actions</th>\n            </tr>\n            {this.state === 'loading' && (\n              <tr class=\"no-configurations\">\n                <td colSpan={3}>\n                  <div>\n                    <h3>Loading...</h3>\n                    <p>Please wait while we fetch the scheduling pages</p>\n                  </div>\n                </td>\n              </tr>\n            )}\n            {this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (\n              <tr class=\"no-configurations\">\n                <td colSpan={3}>\n                  <div>\n                    <calendar-icon width=\"48\" height=\"48\"></calendar-icon>\n                    <h3>No scheduling pages found</h3>\n                    <p>Get started with creating your first scheduling page</p>\n                    <button-component\n                      clickHandler={() => {\n                        this.createButtonClick.emit(this.host);\n                      }}\n                    >\n                      Create new\n                    </button-component>\n                  </div>\n                </td>\n              </tr>\n            )}\n            {this.state !== 'loading' &&\n              this.configurations.map(config => (\n                <tr key={config.id}>\n                  <td>\n                    <div class=\"title\">\n                      <span class={'config-event-title'}>{config.event_booking.title}</span>\n                      <span class={'config-event-description'}>{config.event_booking.description}</span>\n                    </div>\n                  </td>\n                  <td>\n                    <div>{config.availability.duration_minutes} mins</div>\n                  </td>\n                  <td>\n                    <div class=\"actions\">\n                      <button-component\n                        variant={'basic'}\n                        clickHandler={event => {\n                          event.preventDefault();\n                          window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');\n                        }}\n                      >\n                        Preview\n                      </button-component>\n                      <button-component\n                        variant={'basic'}\n                        clickHandler={event => {\n                          event.preventDefault();\n                          this.editButtonClick.emit({ host: this.host, configuration: config });\n                        }}\n                      >\n                        Edit\n                      </button-component>\n                      <button-component\n                        variant={'basic'}\n                        clickHandler={event => {\n                          event.preventDefault();\n                          this.deleteButtonClick.emit({ host: this.host, configuration: config });\n                        }}\n                      >\n                        Delete\n                      </button-component>\n                    </div>\n                  </td>\n                </tr>\n              ))}\n          </table>\n        </div>\n        <div class=\"error-container\">\n          <p class={'error'}>{this.state === 'error' && this.error}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -33,8 +33,8 @@
 .nylas-event-location label {
   display: flex;
   align-items: center;
-  color: var(--nylas-base-nylas-base-800);
-  font-size: 14px;
+  color: var(--nylas-base-800);
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%; /* 21px */

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":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAkB9H,MAAM,OAAO,sBAAsB;;;;wBAOL,IAAI,CAAC,aAAa,IAAI,EAAE;sCACV,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;oBAGzD,UAAU;;IAQjC,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,0BAA0B,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACzE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAGD,mCAAmC,CAAC,QAAuB,EAAE,QAAuB;QAClF,KAAK,CAAC,2BAA2B,EAAE,qCAAqC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC9F,MAAM,cAAc,GAAG,QAAQ,EAAE,aAAa,EAAE,QAAQ,CAAC;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,sBAAsB,GAAG,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;YACjE,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC;QACjC,CAAC;IACH,CAAC;IAGD,2BAA2B,CAAC,QAAgB,EAAE,QAAgB;QAC5D,KAAK,CAAC,0BAA0B,EAAE,6BAA6B,EAAE,QAAQ,CAAC,CAAC;QAC3E,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,sBAAsB,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7D,CAAC;IAOD,iBAAiB;QACf,KAAK,CAAC,0BAA0B,EAAE,mBAAmB,CAAC,CAAC;IACzD,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,0BAA0B,EAAE,mBAAmB,CAAC,CAAC;QACvD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;IACxD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,0BAA0B,EAAE,sBAAsB,CAAC,CAAC;IAC5D,CAAC;IAGD,4BAA4B,CAAC,KAAqC;QAChE,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACjD,IAAI,IAAI,CAAC,sBAAsB,KAAK,MAAM,EAAE,CAAC;YAC3C,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;YAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACzD,CAAC;IACH,CAAC;IAED,YAAY,CAAC,KAAa,EAAE,IAAY;QACtC,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YACtD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACzE,CAAC;IAQD,MAAM;QACJ,MAAM,eAAe,GAAG;YACtB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAChC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAE;SAC9C,CAAC;QACF,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,2EAAqB;YAC3B,MAAM,EAAE,uEAAiB;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,KAAK;gBAC1C,8DAAO,OAAO,EAAC,UAAU;;oBAEvB,6DAAM,KAAK,EAAC,YAAY;wBACtB;4BACE,kEAAW,IAAI,EAAC,cAAc,GAAG;4BACjC,6DAAM,IAAI,EAAC,iBAAiB,kJAErB,CACW,CACf,CACD;gBACR,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,wEACE,UAAU,EAAE,KAAK,EACjB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,eAAe,EACxB,qBAAqB,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,sBAAsB,CAAC,EACxF,WAAW,EAAC,qHAAqH;wBAEjI,6DAAM,IAAI,EAAC,aAAa,IAAE,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAQ,CACpD;oBACjB,IAAI,CAAC,sBAAsB,KAAK,QAAQ,IAAI,CAC3C,aAAO,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,CACpJ,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AA1CC;IANC,iBAAiB,CAA4G;QAC5H,IAAI,EAAE,0BAA0B;QAChC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,uCAAuC,EAAE,uBAAuB,CAAC,CAAC,CAAC;QAC3F,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDA0CD","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;