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

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

@@ -0,0 +1,105 @@
+:host {
+  display: block;
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: var(--nylas-base-900);
+}
+.header p {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--nylas-base-700);
+}
+.header .actions {
+  justify-self: end;
+}
+
+.configurations {
+  border: 1px solid var(--nylas-base-200);
+  border-radius: var(--nylas-border-radius-2x);
+}
+.configurations table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.configurations table tr {
+  border-bottom: 1px solid var(--nylas-base-200);
+}
+.configurations table tr:last-of-type {
+  border-bottom: 0;
+}
+.configurations table tr.no-configurations td > div {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: var(--nylas-border-radius-3x);
+}
+.configurations table tr.no-configurations td > div h3 {
+  margin: 0 0 1rem 0;
+  color: var(--nylas-base-700);
+}
+.configurations table tr.no-configurations td > div p {
+  margin: 0 0 1rem 0;
+  color: var(--nylas-base-600);
+}
+.configurations table tr.no-configurations td > div calendar-icon {
+  margin-bottom: 1rem;
+  color: var(--nylas-base-200);
+}
+.configurations table th,
+.configurations table td {
+  text-align: left;
+  padding: 1rem;
+}
+.configurations table .actions {
+  text-align: right;
+}
+.configurations table .actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+.configurations table .title {
+  display: flex;
+  flex-direction: column;
+}
+.configurations table .title .config-event-title {
+  font-weight: 600;
+}
+.configurations table .title .config-event-description {
+  font-size: 0.75rem;
+}

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

@@ -0,0 +1,293 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { debug, parsePreviewLink } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasListConfigurations {
+    constructor() {
+        this.configurations = [];
+        this.schedulerPreviewLink = '';
+        this.state = 'loading';
+    }
+    connectedCallback() {
+        debug('[nylas-list-configurations]', 'connectedCallback');
+    }
+    componentWillLoad() {
+        debug('[nylas-list-configurations]', 'componentWillLoad');
+        if (this.configurations && this.configurations.length > 0) {
+            this.state = 'loaded';
+        }
+    }
+    componentDidLoad() {
+        debug('[nylas-list-configurations]', 'componentDidLoad');
+        this.initListConfigurations.emit(this.host);
+    }
+    disconnectedCallback() {
+        debug('[nylas-list-configurations]', 'disconnectedCallback');
+    }
+    async getState() {
+        return this.state;
+    }
+    async setState(state) {
+        this.state = state;
+    }
+    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: () => {
+                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: () => {
+                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 => {
+                    event.preventDefault();
+                    window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');
+                } }, "Preview"), h("button-component", { variant: 'basic', clickHandler: event => {
+                    event.preventDefault();
+                    this.editButtonClick.emit({ host: this.host, configuration: config });
+                } }, "Edit"), h("button-component", { variant: 'basic', clickHandler: event => {
+                    event.preventDefault();
+                    this.deleteButtonClick.emit({ host: this.host, configuration: config });
+                } }, "Delete")))))))))));
+    }
+    static get is() { return "nylas-list-configurations"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-list-configurations.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-list-configurations.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "configurations": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration[]",
+                    "resolved": "Configuration[]",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The list of configurations to display."
+                },
+                "defaultValue": "[]"
+            },
+            "schedulerPreviewLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The scheduler preview link to use when the user clicks on the preview button.\nYou can use a placeholder `{config.id}` to replace the configuration id anywhere in the link."
+                },
+                "attribute": "scheduler-preview-link",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "state": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "initListConfigurations",
+                "name": "initListConfigurations",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the component is initialized."
+                },
+                "complexType": {
+                    "original": "HTMLNylasListConfigurationsElement",
+                    "resolved": "HTMLNylasListConfigurationsElement",
+                    "references": {
+                        "HTMLNylasListConfigurationsElement": {
+                            "location": "global",
+                            "id": "global::HTMLNylasListConfigurationsElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "createButtonClick",
+                "name": "createButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the user clicks the create event button."
+                },
+                "complexType": {
+                    "original": "HTMLNylasListConfigurationsElement",
+                    "resolved": "HTMLNylasListConfigurationsElement",
+                    "references": {
+                        "HTMLNylasListConfigurationsElement": {
+                            "location": "global",
+                            "id": "global::HTMLNylasListConfigurationsElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "editButtonClick",
+                "name": "editButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the user clicks the edit event button."
+                },
+                "complexType": {
+                    "original": "{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }",
+                    "resolved": "{ host: HTMLNylasListConfigurationsElement; configuration: Configuration; }",
+                    "references": {
+                        "HTMLNylasListConfigurationsElement": {
+                            "location": "global",
+                            "id": "global::HTMLNylasListConfigurationsElement"
+                        },
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                }
+            }, {
+                "method": "deleteButtonClick",
+                "name": "deleteButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the user clicks the delete event button."
+                },
+                "complexType": {
+                    "original": "{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }",
+                    "resolved": "{ host: HTMLNylasListConfigurationsElement; configuration: Configuration; }",
+                    "references": {
+                        "HTMLNylasListConfigurationsElement": {
+                            "location": "global",
+                            "id": "global::HTMLNylasListConfigurationsElement"
+                        },
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getState": {
+                "complexType": {
+                    "signature": "() => Promise<\"loading\" | \"error\" | \"loaded\">",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<\"loading\" | \"error\" | \"loaded\">"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setState": {
+                "complexType": {
+                    "signature": "(state: 'loading' | 'loaded' | 'error') => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "\"loading\" | \"error\" | \"loaded\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-list-configurations',
+        stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),
+        localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),
+        eventToProps: {
+            initListConfigurations: async (event, connector) => {
+                const host = event.detail;
+                await host.setState('loading');
+                await connector.schedulerConfig.getConfigurations();
+                await host.setState('loaded');
+            },
+            createButtonClick: async (_, connector) => {
+                connector.schedulerConfigStore.state.config = {};
+                connector.schedulerConfigStore.state.action = 'create';
+            },
+            deleteButtonClick: async (event, connector) => {
+                const { configuration } = event.detail;
+                await connector.schedulerConfig.deleteConfiguration(configuration.id);
+            },
+            editButtonClick: async (event, connector) => {
+                const { configuration } = event.detail;
+                connector.schedulerConfigStore.state.config = configuration;
+                connector.schedulerConfigStore.state.action = 'edit';
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasListConfigurations.prototype, "render", null);
+//# sourceMappingURL=nylas-list-configurations.js.map

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

@@ -0,0 +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"]}

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

@@ -70,10 +70,10 @@ export class NylasLocationComponent {
             { value: 'custom', label: 'Custom location' },
         ];
         const icons = {
-            none: h("location-off-icon", { key: 'b6ed0f7da911d13fe204658d1dbfbc29d569a99a' }),
-            custom: h("location-icon", { key: '08a5c193876813578037ee6003ab03fd947fb87d' }),
+            none: h("location-off-icon", { key: '694d28e2c953bd5519209e10435bf646578d114a' }),
+            custom: h("location-icon", { key: '7062ec4488bff42737000d61ea2bf139a873a2c5' }),
         };
-        return (h(Host, { key: 'e512133eb2a9213bfacc2edad0581b7a6ad41bbc' }, h("div", { key: '1f0e59707c41f7836805ff26efbd5cc119dfef11', class: "nylas-event-location", part: "nel" }, h("label", { key: '60e264aa383ae29342678ecf23b12631fff1bc98', htmlFor: "location" }, "Location type", h("span", { key: '64c34dbeafa4b5c033be3d1facede6e737b915e1', class: "label-icon" }, h("tooltip-component", { key: '0c569694141c72418e997a85328127968d05eac1' }, h("info-icon", { key: '411fe82e0b6296b34aae95459c9da8bc07bd8131', slot: "tooltip-icon" }), h("span", { key: '67b4582af4fe7085c748e842b5fda1a46a454edf', 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: '3f7b59eaae37afcd7abc4af3c608c5e6dc3ebc30', class: "location-input" }, h("select-dropdown", { key: '424550ac2c3fd61e7c59d2e8c98cedfd156d5661', 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: '300fd4134259f97fcf3ba09d3d296c15ca18eec7', 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: '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) }))))));
     }
     static get is() { return "nylas-location-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,7 @@ export class NylasMinCancellationNotice {
         }
     }
     render() {
-        return (h(Host, { key: '594c4e6ca9c565f486f5c09159de518fe586f7b8' }, h("div", { key: '712baa63d3ea867b5a7893a254954fcea49c80f0', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '7256ab66b7908dc8b972b2987276e0d2d04dd0ee' }, "Minimum cancellation notice", h("span", { key: '515772bd9028f2718ad350acef7b293269e12279', class: "label-icon" }, h("tooltip-component", { key: '1fe93b6067d38d4d78fe0c16fbd21d67ea5db0fd' }, h("info-icon", { key: '2b1e4eb5c88b329441a98009d2e81fbe6c807ccd', slot: "tooltip-icon" }), h("span", { key: '44f83c20d9041f31bb4b58c190c5877cfcdd41b3', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: '4b1725b8d90355b2481a37d8b894414ea5549cd8', 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: '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 }))));
     }
     static get is() { return "nylas-min-cancellation-notice"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,30 @@
+import { h } from "@stencil/core";
+export const LoginRequired = ({ authenticationUrl }) => (h("div", { class: 'login-required' }, h("div", { class: 'card' }, h("p", null, "Log into your account to use the Scheduler Editor."), h("button", { class: "google-button", onClick: async (event) => {
+        event.preventDefault();
+        const authUrl = await authenticationUrl('google');
+        if (authUrl) {
+            window.location.href = authUrl;
+        }
+        else {
+            console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
+        }
+    } }, h("span", { class: "icon" }, h("google-logo-icon", { width: "15", height: "15" })), "Continue with Google"), h("button", { class: "microsoft-button", onClick: async (event) => {
+        event.preventDefault();
+        const authUrl = await authenticationUrl('microsoft');
+        if (authUrl) {
+            window.location.href = authUrl;
+        }
+        else {
+            console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
+        }
+    } }, h("span", { class: "icon" }, h("microsoft-logo-icon", { width: "15", height: "15" })), "Continue with Microsoft"), h("button", { class: "other-provider-button", onClick: async (event) => {
+        event.preventDefault();
+        const authUrl = await authenticationUrl();
+        if (authUrl) {
+            window.location.href = authUrl;
+        }
+        else {
+            console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
+        }
+    } }, "View all providers ", h("chevron-icon", { width: "17", height: "17" })), h("small", { class: "disclaimer-text" }, "* You will be redirected to authenticate your account."))));
+//# sourceMappingURL=LoginRequired.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginRequired.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-scheduler-editor/LoginRequired.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMlC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,iBAAiB,EAAsB,EAAE,EAAE,CAAC,CAC1E,WAAK,KAAK,EAAE,gBAAgB;IAC1B,WAAK,KAAK,EAAE,MAAM;QAChB,kEAAyD;QAEzD,cACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,OAAO,GAAG,MAAM,iBAAiB,CAAC,QAAQ,CAAC,CAAC;gBAClD,IAAI,OAAO,EAAE,CAAC;oBACZ,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,KAAK,CAAC,4DAA4D,CAAC,CAAC;gBAC9E,CAAC;YACH,CAAC;YAED,YAAM,KAAK,EAAC,MAAM;gBAChB,wBAAkB,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CACtC;mCAEA;QAET,cACE,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,OAAO,GAAG,MAAM,iBAAiB,CAAC,WAAW,CAAC,CAAC;gBACrD,IAAI,OAAO,EAAE,CAAC;oBACZ,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,KAAK,CAAC,4DAA4D,CAAC,CAAC;gBAC9E,CAAC;YACH,CAAC;YAED,YAAM,KAAK,EAAC,MAAM;gBAChB,2BAAqB,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CACzC;sCAEA;QAET,cACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,OAAO,GAAG,MAAM,iBAAiB,EAAE,CAAC;gBAC1C,IAAI,OAAO,EAAE,CAAC;oBACZ,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,KAAK,CAAC,4DAA4D,CAAC,CAAC;gBAC9E,CAAC;YACH,CAAC;;YAEkB,oBAAc,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CACnD;QAET,aAAO,KAAK,EAAC,iBAAiB,6DAA+D,CACzF,CACF,CACP,CAAC","sourcesContent":["import { h } from '@stencil/core';\n\nexport type LoginRequiredProps = {\n  authenticationUrl: (provider?: string) => Promise<string>;\n};\n\nexport const LoginRequired = ({ authenticationUrl }: LoginRequiredProps) => (\n  <div class={'login-required'}>\n    <div class={'card'}>\n      <p>Log into your account to use the Scheduler Editor.</p>\n\n      <button\n        class=\"google-button\"\n        onClick={async event => {\n          event.preventDefault();\n          const authUrl = await authenticationUrl('google');\n          if (authUrl) {\n            window.location.href = authUrl;\n          } else {\n            console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);\n          }\n        }}\n      >\n        <span class=\"icon\">\n          <google-logo-icon width=\"15\" height=\"15\" />\n        </span>\n        Continue with Google\n      </button>\n\n      <button\n        class=\"microsoft-button\"\n        onClick={async event => {\n          event.preventDefault();\n          const authUrl = await authenticationUrl('microsoft');\n          if (authUrl) {\n            window.location.href = authUrl;\n          } else {\n            console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);\n          }\n        }}\n      >\n        <span class=\"icon\">\n          <microsoft-logo-icon width=\"15\" height=\"15\" />\n        </span>\n        Continue with Microsoft\n      </button>\n\n      <button\n        class=\"other-provider-button\"\n        onClick={async event => {\n          event.preventDefault();\n          const authUrl = await authenticationUrl();\n          if (authUrl) {\n            window.location.href = authUrl;\n          } else {\n            console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);\n          }\n        }}\n      >\n        View all providers <chevron-icon width=\"17\" height=\"17\" />\n      </button>\n\n      <small class=\"disclaimer-text\">* You will be redirected to authenticate your account.</small>\n    </div>\n  </div>\n);\n"]}

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

@@ -101,11 +101,13 @@ nylas-editor-tabs {
 .login-required .microsoft-button,
 .login-required .google-button {
   height: 48px;
-  border: none;
+  border: 1px solid var(--nylas-base-300);
   border-radius: var(--nylas-border-radius-2x);
   font-size: 1rem;
   line-height: 24px;
   padding: 0 1rem;
+  background-color: var(--nylas-base-0);
+  font-weight: 600;
   cursor: pointer;
   display: flex;
   margin-bottom: 1rem;
@@ -120,13 +122,19 @@ nylas-editor-tabs {
 .login-required .google-button:hover {
   background-color: var(--nylas-base-25);
 }
+.login-required .microsoft-button:hover,
+.login-required .google-button:hover {
+  background-color: var(--nylas-base-25);
+}
 .login-required .other-provider-button {
   height: 48px;
-  border: none;
+  border: 1px solid var(--nylas-base-300);
   border-radius: var(--nylas-border-radius-2x);
   font-size: 1rem;
   line-height: 24px;
   padding: 0 1rem;
+  background-color: var(--nylas-base-0);
+  font-weight: 600;
   cursor: pointer;
   display: flex;
   border: 0;
@@ -138,6 +146,9 @@ nylas-editor-tabs {
   gap: 0.25rem;
   align-items: center;
 }
+.login-required .other-provider-button:hover {
+  background-color: var(--nylas-base-25);
+}
 .login-required .other-provider-button svg {
   transform: rotate(180deg);
 }
@@ -148,4 +159,8 @@ nylas-editor-tabs {
   font-size: 0.75rem;
   color: var(--nylas-base-600);
   align-self: center;
+}
+
+.list-configurations {
+  padding: 2rem;
 }