@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

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

@@ -1,33 +1,22 @@
 import { NylasBaseProvider } from "../../../common/abstract-provider";
 import { NylasSchedulerConfigConnector } from "../../../connector/nylas-scheduler-config-connector/index";
-import { Host, h } from "@stencil/core";
-import { debug } from "../../../utils/utils";
 import { CreateNylasSchedulerConfigStore } from "../../../stores/scheduler-config-store";
-import { CreateNylasAuthStore } from "../../../stores/auth-store";
-import { NylasAuth } from "@nylas/core";
+import { debug } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+import { NylasIdentityRequestWrapper } from "../../../common/nylas-api-request";
+import { NylasSessions } from "@nylas/identity";
 export class NylasSchedulerEditor {
     constructor() {
-        this.handleAuthChange = async (isAuthenticated) => {
-            if (isAuthenticated) {
-                this.loggedIn.emit(this.host);
-            }
-            else {
-                const loggedOutEvent = this.loggedOut.emit(this.host);
-                if (!loggedOutEvent.defaultPrevented) {
-                    await this.nylasSchedulerConfigConnector?.logout();
-                }
-            }
-        };
         this.handleSchedulerConfigCloseClicked = (_event) => {
             this.schedulerConfigCloseClicked.emit(this.host);
         };
-        this.authConfig = undefined;
+        this.configurationId = undefined;
+        this.nylasApiRequest = undefined;
+        this.nylasSessionsConfig = undefined;
         this.eventOverrides = {};
-        this.defaultAuthStoreState = undefined;
         this.defaultSchedulerConfigStoreState = undefined;
         this.mode = 'app';
         this.automaticComponentRegistration = true;
-        this.loggedInUser = '';
     }
     connectedCallback() {
         debug(`[nylas-scheduler-editor] connectedCallback`);
@@ -35,37 +24,40 @@ export class NylasSchedulerEditor {
     async componentWillLoad() {
         debug(`[nylas-scheduler-editor] componentWillLoad`);
         this.stores = {
-            auth: CreateNylasAuthStore(this.defaultAuthStoreState),
             schedulerConfig: CreateNylasSchedulerConfigStore({
                 ...this.defaultSchedulerConfigStoreState,
             }),
         };
+        if (!this.nylasApiRequest && this.nylasSessionsConfig) {
+            const nylasSession = new NylasSessions(this.nylasSessionsConfig);
+            this.nylasApiRequest = new NylasIdentityRequestWrapper(nylasSession);
+        }
+        if (!this.nylasApiRequest) {
+            debug(`[nylas-scheduler-editor] No NylasApiRequest provided. Unable to continue.`);
+            console.error(`[nylas-scheduler-editor] No NylasApiRequest provided. Unable to continue.`);
+            return;
+        }
         this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);
-        this.nylasAuth = NylasAuth({
-            apiUri: 'https://api.us.nylas.com',
-            elementsApiUri: 'https://elements.us.nylas.com',
-            storageType: 'indexeddb',
-            clientId: 'YOUR_CLIENT_ID',
-            defaultScopes: [],
-            redirectURI: '/',
-            ...this.authConfig,
-        });
-        const authStore = this.baseProvider?.getStore('auth');
         const nylasSchedulerConfigStore = this.baseProvider.getStore('schedulerConfig');
         this.nylasSchedulerConfigConnector = new NylasSchedulerConfigConnector({
-            nylasAuth: this.nylasAuth,
-            nylasAuthStore: this.stores.auth,
+            nylasApiRequest: this.nylasApiRequest,
             nylasSchedulerConfigStore: nylasSchedulerConfigStore,
         });
         const initEvent = this.init.emit(this.host);
         if (!initEvent.defaultPrevented) {
-            await this.nylasSchedulerConfigConnector?.auth.validateSession();
-            const token = await this.nylasSchedulerConfigConnector?.auth.getTokenInfo();
-            if (token) {
-                this.loggedInUser = token.email;
+            const currentUser = await this.nylasSchedulerConfigConnector?.schedulerConfig?.currentUser();
+            if (currentUser) {
+                this.stores?.schedulerConfig?.set('currentUser', currentUser);
+                if (this.configurationId) {
+                    await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(this.configurationId);
+                }
+                this.loggedIn.emit(this.host);
+            }
+            else {
+                this.stores?.schedulerConfig?.set('currentUser', null);
+                this.loggedOut.emit(this.host);
             }
         }
-        this.handleAuthChange(authStore.state.isAuthenticated);
         this.baseProvider?.componentWillLoad(this.nylasSchedulerConfigConnector);
     }
     async componentDidLoad() {
@@ -76,6 +68,20 @@ export class NylasSchedulerEditor {
     componentDisconnected() {
         this.baseProvider?.componentDisconnected();
     }
+    async configurationIdChanged(newConfigurationId) {
+        if (newConfigurationId) {
+            await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(newConfigurationId);
+        }
+        else {
+            this.stores?.schedulerConfig?.set('config', {});
+        }
+    }
+    async store() {
+        return this.stores?.schedulerConfig;
+    }
+    async schedulerConnector() {
+        return this.nylasSchedulerConfigConnector;
+    }
     async registerComponentHandler(event) {
         this.baseProvider?.registerComponent(event.detail);
     }
@@ -85,7 +91,31 @@ export class NylasSchedulerEditor {
     render() {
         const defaultEditor = this.mode === 'app';
         if (defaultEditor) {
-            return (h(Host, null, h("div", { class: "scheduler-editor-header" }, h("h1", { class: "scheduler-editor-title" }, h("calendar-icon", { width: "18", height: "18" }), "Schedule editor"), h("button", { class: "scheduler-editor-close", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nsc-close-button" }, h("close-icon", { width: "18", height: "18" }))), h("nylas-editor-tabs", null)));
+            return (h(Host, null, h("div", { class: "scheduler-editor-header", part: "nse__header" }, h("h1", { class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { width: "18", height: "18" }), "Scheduler editor"), h("button", { class: "scheduler-editor-close", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { width: "18", height: "18" }))), this.stores?.schedulerConfig?.state.currentUser && h("nylas-editor-tabs", null), !this.stores?.schedulerConfig?.state.currentUser && (h("slot", { name: "login-required" }, 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 () => {
+                    const authUrl = await this.nylasApiRequest?.authenticationUrl({ provider: '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 () => {
+                    const authUrl = await this.nylasApiRequest?.authenticationUrl({ provider: '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 () => {
+                    const authUrl = await this.nylasApiRequest?.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.")))))));
         }
         return (h(Host, null, h("slot", null)));
     }
@@ -103,17 +133,34 @@ export class NylasSchedulerEditor {
     }
     static get properties() {
         return {
-            "authConfig": {
+            "configurationId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "*\nThe configuration id to use for the scheduler editor.\nIf provided, then the scheduler editor will try and fetch the configuration\nwith the provided id. If found, it will automatically load the editor\nwith the configuration settings for editing."
+                },
+                "attribute": "configuration-id",
+                "reflect": false
+            },
+            "nylasApiRequest": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "AuthConfig",
-                    "resolved": "undefined | { apiUri: string; elementsApiUri: string; clientId: string; defaultScopes: string[]; storageType: \"indexeddb\" | \"localstorage\"; redirectURI: string; }",
+                    "original": "NylasApiRequest",
+                    "resolved": "NylasApiRequest | undefined",
                     "references": {
-                        "AuthConfig": {
+                        "NylasApiRequest": {
                             "location": "import",
-                            "path": "@nylas/core",
-                            "id": "../nylas-js-core/dist/index.d.ts::AuthConfig"
+                            "path": "@/common/nylas-api-request",
+                            "id": "src/common/nylas-api-request.ts::NylasApiRequest"
                         }
                     }
                 },
@@ -121,51 +168,51 @@ export class NylasSchedulerEditor {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The Nylas Auth configuration.\nUsed to manage all things authentication with Nylas."
+                    "text": "The Nylas Api Request instance.\nUsed to make requests to the Nylas API."
                 }
             },
-            "eventOverrides": {
+            "nylasSessionsConfig": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SchedulerEditorEventOverride",
-                    "resolved": "Partial<{ valueChanged: (event: CustomEvent<{ value: OpenHours[]; name: string; } | { value: string[]; name: string; valueChangedHandler?: ((event: CustomEvent<{ value: string[]; name: string; }>) => void) | undefined; } | { value: string; name: string; valueChanged?: ((event: CustomEvent<{ value: string; name: string; }>) => void) | undefined; } | { value: string; name: string; } | { value: string; name: string; } | { value: string; name: string; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; schedulerConfigChanged: (event: CustomEvent<SchedulerEventDetail>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; }> & EventOverride<NylasSchedulerConfigConnectorInterface>",
+                    "original": "Config",
+                    "resolved": "Config | undefined",
                     "references": {
-                        "SchedulerEditorEventOverride": {
+                        "Config": {
                             "location": "import",
-                            "path": "@/common/component-types",
-                            "id": "src/common/component-types.ts::SchedulerEditorEventOverride"
+                            "path": "@nylas/identity",
+                            "id": "../nylas-identity/esm/index.d.ts::Config"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "This provides a way to override the default event handlers."
-                },
-                "defaultValue": "{}"
+                    "text": "The Nylas Sessions configuration.\nUsed to configure the Nylas Sessions instance."
+                }
             },
-            "defaultAuthStoreState": {
+            "eventOverrides": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "NylasAuthStoreState",
-                    "resolved": "NylasAuthStoreState | undefined",
+                    "original": "SchedulerEditorEventOverride",
+                    "resolved": "Partial<{ valueChanged: (event: CustomEvent<{ value: OpenHours[]; name: string; } | { value: string[]; name: string; valueChangedHandler?: ((event: CustomEvent<{ value: string[]; name: string; }>) => void) | undefined; } | { value: string; name: string; valueChanged?: ((event: CustomEvent<{ value: string; name: string; }>) => void) | undefined; } | { value: string; name: string; } | { value: string; name: string; } | { value: string; name: string; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; schedulerConfigChanged: (event: CustomEvent<SchedulerEventDetail>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; }> & EventOverride<NylasSchedulerConfigConnectorInterface>",
                     "references": {
-                        "NylasAuthStoreState": {
+                        "SchedulerEditorEventOverride": {
                             "location": "import",
-                            "path": "../../..",
-                            "id": "src/index.ts::NylasAuthStoreState"
+                            "path": "@/common/component-types",
+                            "id": "src/common/component-types.ts::SchedulerEditorEventOverride"
                         }
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The default auth store state.\nUsed to set the initial state of the auth store."
-                }
+                    "text": "This provides a way to override the default event handlers."
+                },
+                "defaultValue": "{}"
             },
             "defaultSchedulerConfigStoreState": {
                 "type": "unknown",
@@ -210,8 +257,7 @@ export class NylasSchedulerEditor {
     }
     static get states() {
         return {
-            "automaticComponentRegistration": {},
-            "loggedInUser": {}
+            "automaticComponentRegistration": {}
         };
     }
     static get events() {
@@ -223,7 +269,7 @@ export class NylasSchedulerEditor {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is fired when the provider is initialized.\nIt can be used to set the initial state of the provider,\nor to prevent the provider from firing some default behavior."
+                    "text": "This event is fired when the provider is initialized.\nBy default, this event handles determining if the user is logged in or not.\nIn addition, it fetches the provided configuration if a valid configuration id is provided."
                 },
                 "complexType": {
                     "original": "HTMLNylasSchedulerEditorElement",
@@ -297,7 +343,72 @@ export class NylasSchedulerEditor {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "store": {
+                "complexType": {
+                    "signature": "() => Promise<NylasSchedulerConfigStoreType | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NylasSchedulerConfigStoreState": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-config-store",
+                            "id": "src/stores/scheduler-config-store.ts::NylasSchedulerConfigStoreState"
+                        },
+                        "NylasSchedulerConfigStoreType": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-config-store",
+                            "id": "src/stores/scheduler-config-store.ts::NylasSchedulerConfigStoreType"
+                        }
+                    },
+                    "return": "Promise<ObservableMap<NylasSchedulerConfigStoreState> | undefined>"
+                },
+                "docs": {
+                    "text": "This method is used to get the NylasSchedulerConfigStore instance.\nYou can use this instance to update or get the state of the store.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<NylasSchedulerConfigStoreType | undefined>"
+                        }]
+                }
+            },
+            "schedulerConnector": {
+                "complexType": {
+                    "signature": "() => Promise<NylasSchedulerConfigConnector | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NylasSchedulerConfigConnector": {
+                            "location": "import",
+                            "path": "@/connector/nylas-scheduler-config-connector",
+                            "id": "src/connector/nylas-scheduler-config-connector/index.ts::NylasSchedulerConfigConnector"
+                        }
+                    },
+                    "return": "Promise<NylasSchedulerConfigConnector | undefined>"
+                },
+                "docs": {
+                    "text": "This method is used to get the NylasSchedulerConfigConnector instance.\nYou can use this instance to make requests to the Nylas API.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<NylasSchedulerConfigConnector | undefined>"
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "configurationId",
+                "methodName": "configurationIdChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "registerComponent",

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-scheduler-editor.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NylasBaseProvider } from '@/common/abstract-provider';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\nimport { NylasAuthStoreState, NylasAuthStoreType, NylasAuthType, NylasSchedulerConfigStoreType } from '../../..';\nimport { debug } from '@/utils/utils';\nimport { CreateNylasSchedulerConfigStore, NylasSchedulerConfigStoreState } from '@/stores/scheduler-config-store';\nimport { CreateNylasAuthStore } from '@/stores/auth-store';\nimport { AuthConfig, NylasAuth } from '@nylas/core';\nimport { RegisteredComponent } from '@/common/register-component';\nimport type { SchedulerEditorEventOverride } from '@/common/component-types';\n\n/**\n * The `nylas-scheduler-editor` component is a form that allows users to configure the settings for the Nylas Scheduler.\n */\n@Component({\n  tag: 'nylas-scheduler-editor',\n  styleUrl: 'nylas-scheduler-editor.scss',\n  shadow: true,\n})\nexport class NylasSchedulerEditor {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: {\n    auth: NylasAuthStoreType;\n    schedulerConfig: NylasSchedulerConfigStoreType;\n  };\n\n  /**\n   * This is a base provide that defines the common methods and properties\n   * that all providers should have.\n   *\n   * Because stencil does not support abstract classes, we have to use a\n   * property to store the base provider instance.\n   */\n  private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n  /**\n   * The Nylas Auth instance.\n   * Used to manage all things authentication with Nylas.\n   */\n  private nylasAuth?: NylasAuthType;\n\n  /**\n   * The Nylas Scheduler Config Connector instance.\n   * The brains of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasSchedulerConfigConnector?: NylasSchedulerConfigConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSchedulerEditorElement;\n\n  /**\n   * The Nylas Auth configuration.\n   * Used to manage all things authentication with Nylas.\n   */\n  @Prop({ attribute: 'auth-config' }) readonly authConfig?: AuthConfig;\n\n  /**\n   * This provides a way to override the default event handlers.\n   */\n  @Prop() eventOverrides: SchedulerEditorEventOverride = {};\n\n  /**\n   * The default auth store state.\n   * Used to set the initial state of the auth store.\n   */\n  @Prop({ attribute: 'default-auth-store-state' }) readonly defaultAuthStoreState?: NylasAuthStoreState;\n\n  /**\n   * The default scheduler config store state.\n   * Used to set the initial state of the scheduler config store.\n   */\n  @Prop({ attribute: 'default-scheduler-config-store-state' }) readonly defaultSchedulerConfigStoreState?: NylasSchedulerConfigStoreState;\n\n  /**\n   * The is used to set the mode for the scheduler config.\n   * The mode can be 'app' or 'composable'.\n   * The default mode is 'app'.\n   */\n  @Prop({ attribute: 'mode' }) readonly mode: 'app' | 'composable' = 'app';\n\n  /**\n   * This event is fired when the provider is initialized.\n   * It can be used to set the initial state of the provider,\n   * or to prevent the provider from firing some default behavior.\n   */\n  @Event({ cancelable: true }) readonly init!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the the NyalsAuth isAuthenticated state changes\n   * to true.\n   */\n  @Event({ cancelable: true }) readonly loggedIn!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the the NyalsAuth isAuthenticated state changes\n   * to true.\n   */\n  @Event({ cancelable: true }) readonly loggedOut!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the close button on scheduler config is clicked.\n   */\n  @Event({ cancelable: true }) readonly schedulerConfigCloseClicked!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * Automatically register components that have the `@RegisterComponent` decorator.\n   * If this is set to false, you will need to manually register components using the\n   * `registerComponent` method.\n   * @default true\n   */\n  @State() automaticComponentRegistration: boolean = true;\n\n  @State() loggedInUser: string = '';\n\n  connectedCallback() {\n    debug(`[nylas-scheduler-editor] connectedCallback`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-scheduler-editor] componentWillLoad`);\n    this.stores = {\n      auth: CreateNylasAuthStore(this.defaultAuthStoreState),\n      schedulerConfig: CreateNylasSchedulerConfigStore({\n        ...this.defaultSchedulerConfigStoreState,\n      }),\n    };\n\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    /**\n     * Create the NylasAuth instance.\n     * This will be used to manage all things authentication with Nylas.\n     */\n    this.nylasAuth = NylasAuth({\n      apiUri: 'https://api.us.nylas.com',\n      elementsApiUri: 'https://elements.us.nylas.com',\n      storageType: 'indexeddb',\n      clientId: 'YOUR_CLIENT_ID',\n      defaultScopes: [],\n      redirectURI: '/',\n      ...this.authConfig,\n    });\n    const authStore = this.baseProvider?.getStore('auth');\n    const nylasSchedulerConfigStore = this.baseProvider.getStore('schedulerConfig');\n    this.nylasSchedulerConfigConnector = new NylasSchedulerConfigConnector({\n      nylasAuth: this.nylasAuth,\n      nylasAuthStore: this.stores.auth,\n      nylasSchedulerConfigStore: nylasSchedulerConfigStore,\n    });\n\n    const initEvent = this.init.emit(this.host);\n    if (!initEvent.defaultPrevented) {\n      /**\n       * By default, on init, we will validate the session.\n       * This will check if the user is logged in and if the session is still valid.\n       * If the session is not valid, the user will be logged out.\n       */\n      await this.nylasSchedulerConfigConnector?.auth.validateSession();\n      const token = await this.nylasSchedulerConfigConnector?.auth.getTokenInfo();\n      if (token) {\n        this.loggedInUser = token.email;\n      }\n    }\n    /**\n     * Listen for changes in the NylasAuth isAuthenticated state.\n     * This is used to fire the loggedIn and loggedOut events.\n     */\n    this.handleAuthChange(authStore.state.isAuthenticated);\n    this.baseProvider?.componentWillLoad(this.nylasSchedulerConfigConnector);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-scheduler-editor] componentDidLoad`);\n    this.baseProvider?.componentDidLoad();\n\n    await this.nylasSchedulerConfigConnector?.schedulerConfig?.getCalendars();\n  }\n\n  componentDisconnected() {\n    this.baseProvider?.componentDisconnected();\n  }\n\n  /**\n   * This is a custom event handler that is used to register a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to register\n   * @returns Promise<void>\n   */\n  @Listen('registerComponent')\n  async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.registerComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to unregister a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to unregister\n   * @returns Promise<void>\n   */\n  @Listen('unregisterComponent')\n  async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.unregisterComponent(event.detail);\n  }\n\n  /**\n   * This method is used to handle changes in the NylasAuth isAuthenticated state\n   * @param isAuthenticated isAuthenticated state\n   * @returns void\n   */\n  private handleAuthChange = async (isAuthenticated: boolean) => {\n    if (isAuthenticated) {\n      this.loggedIn.emit(this.host);\n    } else {\n      const loggedOutEvent = this.loggedOut.emit(this.host);\n      if (!loggedOutEvent.defaultPrevented) {\n        await this.nylasSchedulerConfigConnector?.logout();\n      }\n    }\n  };\n\n  private handleSchedulerConfigCloseClicked = (_event: Event) => {\n    this.schedulerConfigCloseClicked.emit(this.host);\n  };\n\n  // @Listen('schedulerConfigChanged')\n  // async schedulerConfigChangedHandler(\n  //   event: CustomEvent<{\n  //     title: string;\n  //     description: string;\n  //     duration: string;\n  //     availability?: any;\n  //     calendarIds: string[];\n  //   }>,\n  // ) {\n  //   console.log('schedulerConfigChanged', event.detail);\n  // }\n\n  render() {\n    const defaultEditor = this.mode === 'app';\n\n    if (defaultEditor) {\n      return (\n        <Host>\n          <div class=\"scheduler-editor-header\">\n            <h1 class=\"scheduler-editor-title\">\n              <calendar-icon width=\"18\" height=\"18\" />\n              Schedule editor\n            </h1>\n            <button class=\"scheduler-editor-close\" onClick={e => this.handleSchedulerConfigCloseClicked(e)} part=\"nsc-close-button\">\n              <close-icon width=\"18\" height=\"18\" />\n            </button>\n          </div>\n          <nylas-editor-tabs></nylas-editor-tabs>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-scheduler-editor.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NylasBaseProvider } from '@/common/abstract-provider';\nimport type { SchedulerEditorEventOverride } from '@/common/component-types';\nimport { RegisteredComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { CreateNylasSchedulerConfigStore, NylasSchedulerConfigStoreState, NylasSchedulerConfigStoreType } from '@/stores/scheduler-config-store';\nimport { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasIdentityRequestWrapper, type NylasApiRequest } from '@/common/nylas-api-request';\nimport { Config, NylasSessions } from '@nylas/identity';\n\n/**\n * The `nylas-scheduler-editor` component is a form that allows users to configure the settings for the Nylas Scheduler.\n *\n * @slot login-required - This slot is used to display a message when the user is not logged in.\n */\n@Component({\n  tag: 'nylas-scheduler-editor',\n  styleUrl: 'nylas-scheduler-editor.scss',\n  shadow: true,\n})\nexport class NylasSchedulerEditor {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: {\n    schedulerConfig: NylasSchedulerConfigStoreType;\n  };\n\n  /**\n   * This is a base provide that defines the common methods and properties\n   * that all providers should have.\n   *\n   * Because stencil does not support abstract classes, we have to use a\n   * property to store the base provider instance.\n   */\n  private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n  /**\n   * The Nylas Scheduler Config Connector instance.\n   * The brains of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasSchedulerConfigConnector?: NylasSchedulerConfigConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSchedulerEditorElement;\n\n  /***\n   * The configuration id to use for the scheduler editor.\n   * If provided, then the scheduler editor will try and fetch the configuration\n   * with the provided id. If found, it will automatically load the editor\n   * with the configuration settings for editing.\n   */\n  @Prop() configurationId?: string;\n\n  /**\n   * The Nylas Api Request instance.\n   * Used to make requests to the Nylas API.\n   */\n  @Prop() nylasApiRequest?: NylasApiRequest;\n\n  /**\n   * The Nylas Sessions configuration.\n   * Used to configure the Nylas Sessions instance.\n   */\n  @Prop() nylasSessionsConfig?: Config;\n\n  /**\n   * This provides a way to override the default event handlers.\n   */\n  @Prop() eventOverrides: SchedulerEditorEventOverride = {};\n\n  /**\n   * The default scheduler config store state.\n   * Used to set the initial state of the scheduler config store.\n   */\n  @Prop({ attribute: 'default-scheduler-config-store-state' }) readonly defaultSchedulerConfigStoreState?: NylasSchedulerConfigStoreState;\n\n  /**\n   * The is used to set the mode for the scheduler config.\n   * The mode can be 'app' or 'composable'.\n   * The default mode is 'app'.\n   */\n  @Prop({ attribute: 'mode' }) readonly mode: 'app' | 'composable' = 'app';\n\n  /**\n   * This event is fired when the provider is initialized.\n   * By default, this event handles determining if the user is logged in or not.\n   * In addition, it fetches the provided configuration if a valid configuration id is provided.\n   */\n  @Event({ cancelable: true }) readonly init!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the the NyalsAuth isAuthenticated state changes\n   * to true.\n   */\n  @Event({ cancelable: true }) readonly loggedIn!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the the NyalsAuth isAuthenticated state changes\n   * to true.\n   */\n  @Event({ cancelable: true }) readonly loggedOut!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * This event is fired when the close button on scheduler config is clicked.\n   */\n  @Event({ cancelable: true }) readonly schedulerConfigCloseClicked!: EventEmitter<HTMLNylasSchedulerEditorElement>;\n\n  /**\n   * Automatically register components that have the `@RegisterComponent` decorator.\n   * If this is set to false, you will need to manually register components using the\n   * `registerComponent` method.\n   * @default true\n   */\n  @State() automaticComponentRegistration: boolean = true;\n\n  connectedCallback() {\n    debug(`[nylas-scheduler-editor] connectedCallback`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-scheduler-editor] componentWillLoad`);\n    this.stores = {\n      schedulerConfig: CreateNylasSchedulerConfigStore({\n        ...this.defaultSchedulerConfigStoreState,\n      }),\n    };\n\n    if (!this.nylasApiRequest && this.nylasSessionsConfig) {\n      const nylasSession = new NylasSessions(this.nylasSessionsConfig);\n      this.nylasApiRequest = new NylasIdentityRequestWrapper(nylasSession);\n    }\n\n    if (!this.nylasApiRequest) {\n      debug(`[nylas-scheduler-editor] No NylasApiRequest provided. Unable to continue.`);\n      console.error(`[nylas-scheduler-editor] No NylasApiRequest provided. Unable to continue.`);\n      return;\n    }\n\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    const nylasSchedulerConfigStore = this.baseProvider.getStore('schedulerConfig');\n    this.nylasSchedulerConfigConnector = new NylasSchedulerConfigConnector({\n      nylasApiRequest: this.nylasApiRequest,\n      nylasSchedulerConfigStore: nylasSchedulerConfigStore,\n    });\n\n    const initEvent = this.init.emit(this.host);\n    if (!initEvent.defaultPrevented) {\n      const currentUser = await this.nylasSchedulerConfigConnector?.schedulerConfig?.currentUser();\n      if (currentUser) {\n        this.stores?.schedulerConfig?.set('currentUser', currentUser);\n        if (this.configurationId) {\n          await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(this.configurationId);\n        }\n        this.loggedIn.emit(this.host);\n      } else {\n        this.stores?.schedulerConfig?.set('currentUser', null);\n        this.loggedOut.emit(this.host);\n      }\n    }\n\n    this.baseProvider?.componentWillLoad(this.nylasSchedulerConfigConnector);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-scheduler-editor] componentDidLoad`);\n    this.baseProvider?.componentDidLoad();\n\n    await this.nylasSchedulerConfigConnector?.schedulerConfig?.getCalendars();\n  }\n\n  componentDisconnected() {\n    this.baseProvider?.componentDisconnected();\n  }\n\n  /**\n   * Watch for changes to the configuration id and automatically fetch the configuration\n   * when the configuration id changes. If the configuration id is cleared, then the\n   * configuration is cleared as well.\n   * @param newConfigurationId A new configuration id to fetch\n   */\n  @Watch('configurationId')\n  async configurationIdChanged(newConfigurationId: string) {\n    if (newConfigurationId) {\n      await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(newConfigurationId);\n    } else {\n      // Clear the configuration\n      this.stores?.schedulerConfig?.set('config', {});\n    }\n  }\n\n  /**\n   * This method is used to get the NylasSchedulerConfigStore instance.\n   * You can use this instance to update or get the state of the store.\n   * @returns Promise<NylasSchedulerConfigStoreType | undefined>\n   */\n  @Method()\n  async store(): Promise<NylasSchedulerConfigStoreType | undefined> {\n    return this.stores?.schedulerConfig;\n  }\n\n  /**\n   * This method is used to get the NylasSchedulerConfigConnector instance.\n   * You can use this instance to make requests to the Nylas API.\n   * @returns Promise<NylasSchedulerConfigConnector | undefined>\n   */\n  @Method()\n  async schedulerConnector(): Promise<NylasSchedulerConfigConnector | undefined> {\n    return this.nylasSchedulerConfigConnector;\n  }\n\n  /**\n   * This is a custom event handler that is used to register a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to register\n   * @returns Promise<void>\n   */\n  @Listen('registerComponent')\n  async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.registerComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to unregister a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to unregister\n   * @returns Promise<void>\n   */\n  @Listen('unregisterComponent')\n  async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.unregisterComponent(event.detail);\n  }\n\n  private handleSchedulerConfigCloseClicked = (_event: Event) => {\n    this.schedulerConfigCloseClicked.emit(this.host);\n  };\n\n  render() {\n    const defaultEditor = this.mode === 'app';\n\n    if (defaultEditor) {\n      return (\n        <Host>\n          <div class=\"scheduler-editor-header\" part=\"nse__header\">\n            <h1 class=\"scheduler-editor-title\" part=\"nse__title\">\n              <calendar-icon width=\"18\" height=\"18\" />\n              Scheduler editor\n            </h1>\n            <button class=\"scheduler-editor-close\" onClick={e => this.handleSchedulerConfigCloseClicked(e)} part=\"nse__close-button\">\n              <close-icon width=\"18\" height=\"18\" />\n            </button>\n          </div>\n          {this.stores?.schedulerConfig?.state.currentUser && <nylas-editor-tabs></nylas-editor-tabs>}\n          {!this.stores?.schedulerConfig?.state.currentUser && (\n            <slot name=\"login-required\">\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 () => {\n                      const authUrl = await this.nylasApiRequest?.authenticationUrl({ provider: '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 () => {\n                      const authUrl = await this.nylasApiRequest?.authenticationUrl({ provider: '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 () => {\n                      const authUrl = await this.nylasApiRequest?.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            </slot>\n          )}\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.css

@@ -29,6 +29,7 @@
 .time-picker {
   display: inline-block;
   width: 150px;
+  font-family: var(--nylas-font-family);
   position: relative;
 }
 @media screen and (max-width: 768px) {
@@ -40,7 +41,8 @@
   width: 150px;
   height: 48px;
   text-align: center;
-  font-size: 1rem;
+  font-size: 16px;
+  font-family: inherit;
   cursor: pointer;
   background: transparent;
   border: 1px solid var(--nylas-base-200);
@@ -48,7 +50,13 @@
 }
 @media screen and (max-width: 768px) {
   .time-picker input {
-    width: 98px;
+    width: 88px;
+  }
+}
+@media screen and (max-width: 504px) {
+  .time-picker input {
+    width: 68px;
+    font-size: 15px;
   }
 }
 .time-picker input.focus {

package/dist/collection/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.js

@@ -230,13 +230,13 @@ export class TimeInput {
         }
     }
     render() {
-        return (h(Host, { key: 'ae06613962a37471cde869695544eff5897956e7' }, h("div", { key: '26062a373ad43bd0392e6c68cb8924719110912e', class: "time-picker" }, h("input", { key: '6bbb11bd7e469ced0d09df07f8f60878337699c2', type: "text", name: this.name, id: this.name, class: {
+        return (h(Host, { key: 'ce9cc8b8d7672d0e8389051d271e2369598f3e0f' }, h("div", { key: 'c12333b0675d581b6f84b5d332d05deeceabab32', class: "time-picker", part: "time-picker" }, h("input", { key: '65e951f23fce142c529933e8f0311a124b32c948', type: "text", name: this.name, id: this.name, part: "time-input", class: {
                 'time-input': true,
                 'error': !!this.err || this.hasError,
             }, ref: el => (this.timeInput = el), value: this.time, onClick: () => {
                 this.showTimes = true;
                 this.shouldAutoScroll = true;
-            }, "aria-haspopup": "listbox", "aria-label": this.name, "aria-expanded": this.showTimes ? 'true' : 'false', placeholder: this.placeholder, onKeyDown: e => this.handleComboboxKeyDown(e), onInput: event => this.handleOnInput(event), onBlur: event => this.handleTimeAutocomplete(event) }), this.err && h("div", { class: "invalid-time-icon" }), this.showTimes && (h("div", { class: "times", ref: el => (this.timeMenu = el) }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.times.map(option => (h("li", { tabindex: "0", key: option.id, id: option.id.toString(), class: {
+            }, "aria-haspopup": "listbox", "aria-label": this.name, "aria-expanded": this.showTimes ? 'true' : 'false', placeholder: this.placeholder, onKeyDown: e => this.handleComboboxKeyDown(e), onInput: event => this.handleOnInput(event), onBlur: event => this.handleTimeAutocomplete(event) }), this.err && h("div", { class: "invalid-time-icon" }), this.showTimes && (h("div", { class: "times", part: "times", ref: el => (this.timeMenu = el) }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.times.map(option => (h("li", { tabindex: "0", key: option.id, id: option.id.toString(), class: {
                 focused: this.ariaActivedescendant === option.id.toString(),
             }, onClick: e => {
                 this.handleTimeChange(e, option.value);

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-time-window-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autocompleteTimeFormat, roundToNearest15Minutes, validateExactTimeFormat, validateTimeFormatInput } from '@/utils/utils';\nimport { Component, h, State, Prop, Event, EventEmitter, Listen, Element, Host, Watch } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\ntype Time = { id: number; value: string };\n\n/**\n * The `nylas-time-window-picker` component is a time picker that can be used to select a time.\n */\n@Component({\n  tag: 'nylas-time-window-picker',\n  styleUrl: 'nylas-time-window-picker.scss',\n  shadow: true,\n})\nexport class TimeInput {\n  @Element() el!: HTMLElement;\n  private timeInput!: HTMLInputElement;\n  private timeMenu!: HTMLElement;\n\n  /**\n   * The time to display in the input.\n   * This is passed by the parent component and can be updated\n   * using the setTime prop function provided by the parent component.\n   */\n  @Prop() time!: string;\n  /**\n   * This is the start time value if one is set by the parent component.\n   * It is useful if this component is used to render an end time which\n   * should not be before the start time, defining the earliest selectable time.\n   */\n  @Prop() minimumStartTime: string | null = null;\n\n  /**\n   * The placeholder text for the input.\n   */\n  @Prop() placeholder: string = 'hh:mmam/pm';\n  /**\n   * The function to set the time in the parent component.\n   */\n  @Prop() setTime!: Function;\n  /**\n   * The name of the input.\n   */\n  @Prop() name!: string;\n  /**\n   * This sets the error state of the input.\n   */\n  @Prop() hasError: boolean = false;\n  /**\n   * The function to set the form error in the parent component.\n   * This is useful if the parent component wants to display an\n   * error message or set form validity.\n   */\n  @Prop() setFormError!: Function;\n\n  /**\n   * The error message to display if the time is invalid.\n   */\n  @State() err: string = '';\n  /**\n   * Toggle to show the list of times.\n   */\n  @State() showTimes: boolean = false;\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n   * the active option.\n   */\n  @State() ariaActivedescendant: string = '';\n  @State() times: Time[] = this.generateTimes();\n  @State() shouldAutoScroll: boolean = false;\n\n  @Event() timeChange!: EventEmitter<string>;\n\n  // Event listeners\n  @Listen('click', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.showTimes) {\n      this.showTimes = false;\n    }\n  }\n\n  @Watch('minimumStartTime')\n  minimumStartTimeChangedHandler() {\n    if (this.minimumStartTime) {\n      let formattedTime = dayjs()\n        .hour(parseInt(this.minimumStartTime))\n        .minute(parseInt(this.minimumStartTime.slice(-4, -2)));\n      if (this.minimumStartTime.slice(-2).toLowerCase() === 'pm' && parseInt(this.minimumStartTime) !== 12) {\n        formattedTime = formattedTime.add(12, 'hour');\n      } else if (this.minimumStartTime.slice(-2).toLowerCase() === 'am' && parseInt(this.minimumStartTime) === 12) {\n        formattedTime = formattedTime.subtract(12, 'hour');\n      }\n\n      this.times = this.generateTimes();\n      const firstTime = dayjs(this.times[0].value, 'hh:mma');\n      let selectedTimeFormatted = dayjs(this.time, 'hh:mma');\n      if (selectedTimeFormatted.isBefore(firstTime)) {\n        this.err = 'Invalid';\n        this.setFormError(null, 'Invalid');\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.showTimes && this.shouldAutoScroll) {\n      const autocompletedTime = autocompleteTimeFormat(this.time);\n      const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n      if (optionIndex > -1) {\n        this.shouldAutoScroll = false;\n        this.scrollToViewWithinParent(optionIndex);\n      }\n      return;\n    }\n  }\n\n  private handleTimeChange(e: Event, input: string) {\n    const timePart = input.split(':');\n    if (timePart[0] === '00' && timePart[1].slice(-2) == 'pm') {\n      this.err = 'Invalid';\n      this.setFormError(e, 'Invalid');\n    }\n    if (!validateTimeFormatInput(input)) {\n      this.err = 'Invalid';\n      this.setFormError(e, 'Invalid');\n    } else {\n      this.err = '';\n      this.setFormError(null);\n    }\n    this.setTime(e, input);\n    this.timeChange.emit(input);\n  }\n\n  private handleTimeAutocomplete(event: Event) {\n    const input = (event.target as HTMLInputElement)?.value;\n    if (!validateTimeFormatInput(input)) {\n      this.err = 'Invalid';\n      this.setFormError(event, 'Invalid');\n      return;\n    }\n    if (input === '') {\n      const newTime = roundToNearest15Minutes().format('hh:mma');\n      this.setTime(event, newTime);\n      return;\n    }\n    if (!validateExactTimeFormat(input)) {\n      const autocompletedTime = autocompleteTimeFormat(input);\n      this.setTime(autocompletedTime);\n      return;\n    }\n    this.setTime(event, input);\n  }\n\n  private handleOnInput(event: Event) {\n    const input = (event.target as HTMLInputElement)?.value;\n    if (!validateTimeFormatInput(input)) {\n      return;\n    }\n    if (input === '') {\n      const newTime = roundToNearest15Minutes().format('hh:mma');\n      const optionIndex = this.times.findIndex(time => time.value === newTime);\n      if (optionIndex > -1) {\n        this.scrollToViewWithinParent(optionIndex);\n      }\n      return;\n    }\n    if (!validateExactTimeFormat(input)) {\n      const autocompletedTime = autocompleteTimeFormat(input);\n      const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n      if (optionIndex > -1) {\n        this.scrollToViewWithinParent(optionIndex);\n      }\n      return;\n    }\n  }\n\n  private generateTimes() {\n    const times: Time[] = [];\n    let startTime = dayjs().set('hour', 0).set('minute', 0).set('second', 0); // Set to 12:00 am\n    if (this.minimumStartTime) {\n      startTime = dayjs(this.minimumStartTime, 'hh:mma');\n    }\n    const diff = startTime.endOf('day').diff(startTime, 'minutes');\n    const iterations = Math.round(diff / 15);\n    for (let i = 0; i < iterations + 1; i++) {\n      // 96 represents the total number of 15-minute increments in a day (24 hours * 60 minutes / 15 minutes)\n      const time = startTime.add(i * 15, 'minute');\n      if (i == iterations && time.format('hh:mma').includes('am')) {\n        break;\n      }\n      times.push({ id: i, value: time.format('hh:mma') });\n    }\n    return times;\n  }\n\n  private handleComboboxKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (!this.showTimes) {\n        this.showTimes = true;\n        this.shouldAutoScroll = true;\n        return;\n      }\n      if (this.ariaActivedescendant === '') {\n        this.ariaActivedescendant = this.times[0].id.toString();\n        this.focusOption(0);\n      } else {\n        const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n        const nextIndex = currentIndex + 1 < this.times.length ? currentIndex + 1 : 0;\n        this.ariaActivedescendant = this.times[nextIndex].id.toString();\n        this.focusOption(nextIndex);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (this.ariaActivedescendant === '') {\n        this.ariaActivedescendant = this.times[this.times.length - 1].id.toString();\n        this.focusOption(this.times.length - 1);\n      } else {\n        const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n        const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : this.times.length - 1;\n        this.ariaActivedescendant = this.times[prevIndex].id.toString();\n        this.focusOption(prevIndex);\n      }\n    } else if (event.key === 'Escape') {\n      this.showTimes = false;\n      this.timeInput.focus();\n    }\n  }\n\n  private handleListboxKeydown(e: KeyboardEvent) {\n    const items = this.times;\n    const currentIndex = items.findIndex(item => item.id.toString() === this.ariaActivedescendant);\n\n    if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n      e.preventDefault();\n      const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n      this.ariaActivedescendant = items[nextIndex].id.toString();\n      this.focusOption(nextIndex);\n    } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n      e.preventDefault();\n      const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n      this.ariaActivedescendant = items[prevIndex].id.toString();\n      this.focusOption(prevIndex);\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.ariaActivedescendant) {\n        const option = items[currentIndex];\n        this.handleTimeChange(e, option.value);\n        this.showTimes = false;\n        this.ariaActivedescendant = '';\n        this.timeInput.focus();\n      }\n    } else if (e.key === 'Escape') {\n      this.showTimes = false;\n      this.timeInput.focus();\n    }\n  }\n\n  scrollToViewWithinParent(optionIndex: number) {\n    const option = this.times[optionIndex];\n    const childElement = this.el.shadowRoot?.getElementById(option.id.toString()) as HTMLLIElement;\n    const parentElement = this.timeMenu;\n\n    this.ariaActivedescendant = option.id.toString();\n\n    // Scroll child into view within parent\n    const childRect = childElement.getBoundingClientRect();\n    const parentRect = parentElement.getBoundingClientRect();\n\n    if (childRect.top < parentRect.top) {\n      // Child is above the visible area of the parent\n      parentElement.scrollTop -= parentRect.top - childRect.top;\n    } else if (childRect.bottom > parentRect.bottom) {\n      // Child is below the visible area of the parent\n      parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n    }\n\n    if (childRect.left < parentRect.left) {\n      // Child is to the left of the visible area of the parent\n      parentElement.scrollLeft -= parentRect.left - childRect.left;\n    } else if (childRect.right > parentRect.right) {\n      // Child is to the right of the visible area of the parent\n      parentElement.scrollLeft += childRect.right - parentRect.right;\n    }\n  }\n\n  focusOption(index: number) {\n    const option = this.times[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.id.toString();\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"time-picker\">\n          <input\n            type=\"text\"\n            name={this.name}\n            id={this.name}\n            class={{\n              'time-input': true,\n              'error': !!this.err || this.hasError,\n            }}\n            ref={el => (this.timeInput = el as HTMLInputElement)}\n            value={this.time}\n            onClick={() => {\n              this.showTimes = true;\n              this.shouldAutoScroll = true;\n            }}\n            aria-haspopup=\"listbox\"\n            aria-label={this.name}\n            aria-expanded={this.showTimes ? 'true' : 'false'}\n            placeholder={this.placeholder}\n            onKeyDown={e => this.handleComboboxKeyDown(e)}\n            onInput={event => this.handleOnInput(event)}\n            onBlur={event => this.handleTimeAutocomplete(event)}\n          />\n          {this.err && <div class=\"invalid-time-icon\">{/* Icon here */}</div>}\n          {this.showTimes && (\n            <div class=\"times\" ref={el => (this.timeMenu = el as HTMLElement)}>\n              <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n                {this.times.map(option => (\n                  <li\n                    tabindex=\"0\"\n                    key={option.id}\n                    id={option.id.toString()}\n                    class={{\n                      focused: this.ariaActivedescendant === option.id.toString(),\n                    }}\n                    onClick={e => {\n                      this.handleTimeChange(e, option.value);\n                      this.showTimes = false;\n                      this.timeInput.focus();\n                    }}\n                    role=\"option\"\n                  >\n                    {`${option.value}`}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {!this.showTimes && this.err && (\n            <p class=\"error\" id=\"email-error\">\n              {this.err}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-time-window-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autocompleteTimeFormat, roundToNearest15Minutes, validateExactTimeFormat, validateTimeFormatInput } from '@/utils/utils';\nimport { Component, h, State, Prop, Event, EventEmitter, Listen, Element, Host, Watch } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\ntype Time = { id: number; value: string };\n\n/**\n * The `nylas-time-window-picker` component is a time picker that can be used to select a time.\n * @part time-picker - The time picker container\n * @part time-input - The time input\n * @part times - The list of times\n */\n@Component({\n  tag: 'nylas-time-window-picker',\n  styleUrl: 'nylas-time-window-picker.scss',\n  shadow: true,\n})\nexport class TimeInput {\n  @Element() el!: HTMLElement;\n  private timeInput!: HTMLInputElement;\n  private timeMenu!: HTMLElement;\n\n  /**\n   * The time to display in the input.\n   * This is passed by the parent component and can be updated\n   * using the setTime prop function provided by the parent component.\n   */\n  @Prop() time!: string;\n  /**\n   * This is the start time value if one is set by the parent component.\n   * It is useful if this component is used to render an end time which\n   * should not be before the start time, defining the earliest selectable time.\n   */\n  @Prop() minimumStartTime: string | null = null;\n\n  /**\n   * The placeholder text for the input.\n   */\n  @Prop() placeholder: string = 'hh:mmam/pm';\n  /**\n   * The function to set the time in the parent component.\n   */\n  @Prop() setTime!: Function;\n  /**\n   * The name of the input.\n   */\n  @Prop() name!: string;\n  /**\n   * This sets the error state of the input.\n   */\n  @Prop() hasError: boolean = false;\n  /**\n   * The function to set the form error in the parent component.\n   * This is useful if the parent component wants to display an\n   * error message or set form validity.\n   */\n  @Prop() setFormError!: Function;\n\n  /**\n   * The error message to display if the time is invalid.\n   */\n  @State() err: string = '';\n  /**\n   * Toggle to show the list of times.\n   */\n  @State() showTimes: boolean = false;\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n   * the active option.\n   */\n  @State() ariaActivedescendant: string = '';\n  @State() times: Time[] = this.generateTimes();\n  @State() shouldAutoScroll: boolean = false;\n\n  @Event() timeChange!: EventEmitter<string>;\n\n  // Event listeners\n  @Listen('click', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.showTimes) {\n      this.showTimes = false;\n    }\n  }\n\n  @Watch('minimumStartTime')\n  minimumStartTimeChangedHandler() {\n    if (this.minimumStartTime) {\n      let formattedTime = dayjs()\n        .hour(parseInt(this.minimumStartTime))\n        .minute(parseInt(this.minimumStartTime.slice(-4, -2)));\n      if (this.minimumStartTime.slice(-2).toLowerCase() === 'pm' && parseInt(this.minimumStartTime) !== 12) {\n        formattedTime = formattedTime.add(12, 'hour');\n      } else if (this.minimumStartTime.slice(-2).toLowerCase() === 'am' && parseInt(this.minimumStartTime) === 12) {\n        formattedTime = formattedTime.subtract(12, 'hour');\n      }\n\n      this.times = this.generateTimes();\n      const firstTime = dayjs(this.times[0].value, 'hh:mma');\n      let selectedTimeFormatted = dayjs(this.time, 'hh:mma');\n      if (selectedTimeFormatted.isBefore(firstTime)) {\n        this.err = 'Invalid';\n        this.setFormError(null, 'Invalid');\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.showTimes && this.shouldAutoScroll) {\n      const autocompletedTime = autocompleteTimeFormat(this.time);\n      const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n      if (optionIndex > -1) {\n        this.shouldAutoScroll = false;\n        this.scrollToViewWithinParent(optionIndex);\n      }\n      return;\n    }\n  }\n\n  private handleTimeChange(e: Event, input: string) {\n    const timePart = input.split(':');\n    if (timePart[0] === '00' && timePart[1].slice(-2) == 'pm') {\n      this.err = 'Invalid';\n      this.setFormError(e, 'Invalid');\n    }\n    if (!validateTimeFormatInput(input)) {\n      this.err = 'Invalid';\n      this.setFormError(e, 'Invalid');\n    } else {\n      this.err = '';\n      this.setFormError(null);\n    }\n    this.setTime(e, input);\n    this.timeChange.emit(input);\n  }\n\n  private handleTimeAutocomplete(event: Event) {\n    const input = (event.target as HTMLInputElement)?.value;\n    if (!validateTimeFormatInput(input)) {\n      this.err = 'Invalid';\n      this.setFormError(event, 'Invalid');\n      return;\n    }\n    if (input === '') {\n      const newTime = roundToNearest15Minutes().format('hh:mma');\n      this.setTime(event, newTime);\n      return;\n    }\n    if (!validateExactTimeFormat(input)) {\n      const autocompletedTime = autocompleteTimeFormat(input);\n      this.setTime(autocompletedTime);\n      return;\n    }\n    this.setTime(event, input);\n  }\n\n  private handleOnInput(event: Event) {\n    const input = (event.target as HTMLInputElement)?.value;\n    if (!validateTimeFormatInput(input)) {\n      return;\n    }\n    if (input === '') {\n      const newTime = roundToNearest15Minutes().format('hh:mma');\n      const optionIndex = this.times.findIndex(time => time.value === newTime);\n      if (optionIndex > -1) {\n        this.scrollToViewWithinParent(optionIndex);\n      }\n      return;\n    }\n    if (!validateExactTimeFormat(input)) {\n      const autocompletedTime = autocompleteTimeFormat(input);\n      const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n      if (optionIndex > -1) {\n        this.scrollToViewWithinParent(optionIndex);\n      }\n      return;\n    }\n  }\n\n  private generateTimes() {\n    const times: Time[] = [];\n    let startTime = dayjs().set('hour', 0).set('minute', 0).set('second', 0); // Set to 12:00 am\n    if (this.minimumStartTime) {\n      startTime = dayjs(this.minimumStartTime, 'hh:mma');\n    }\n    const diff = startTime.endOf('day').diff(startTime, 'minutes');\n    const iterations = Math.round(diff / 15);\n    for (let i = 0; i < iterations + 1; i++) {\n      // 96 represents the total number of 15-minute increments in a day (24 hours * 60 minutes / 15 minutes)\n      const time = startTime.add(i * 15, 'minute');\n      if (i == iterations && time.format('hh:mma').includes('am')) {\n        break;\n      }\n      times.push({ id: i, value: time.format('hh:mma') });\n    }\n    return times;\n  }\n\n  private handleComboboxKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (!this.showTimes) {\n        this.showTimes = true;\n        this.shouldAutoScroll = true;\n        return;\n      }\n      if (this.ariaActivedescendant === '') {\n        this.ariaActivedescendant = this.times[0].id.toString();\n        this.focusOption(0);\n      } else {\n        const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n        const nextIndex = currentIndex + 1 < this.times.length ? currentIndex + 1 : 0;\n        this.ariaActivedescendant = this.times[nextIndex].id.toString();\n        this.focusOption(nextIndex);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (this.ariaActivedescendant === '') {\n        this.ariaActivedescendant = this.times[this.times.length - 1].id.toString();\n        this.focusOption(this.times.length - 1);\n      } else {\n        const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n        const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : this.times.length - 1;\n        this.ariaActivedescendant = this.times[prevIndex].id.toString();\n        this.focusOption(prevIndex);\n      }\n    } else if (event.key === 'Escape') {\n      this.showTimes = false;\n      this.timeInput.focus();\n    }\n  }\n\n  private handleListboxKeydown(e: KeyboardEvent) {\n    const items = this.times;\n    const currentIndex = items.findIndex(item => item.id.toString() === this.ariaActivedescendant);\n\n    if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n      e.preventDefault();\n      const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n      this.ariaActivedescendant = items[nextIndex].id.toString();\n      this.focusOption(nextIndex);\n    } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n      e.preventDefault();\n      const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n      this.ariaActivedescendant = items[prevIndex].id.toString();\n      this.focusOption(prevIndex);\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.ariaActivedescendant) {\n        const option = items[currentIndex];\n        this.handleTimeChange(e, option.value);\n        this.showTimes = false;\n        this.ariaActivedescendant = '';\n        this.timeInput.focus();\n      }\n    } else if (e.key === 'Escape') {\n      this.showTimes = false;\n      this.timeInput.focus();\n    }\n  }\n\n  scrollToViewWithinParent(optionIndex: number) {\n    const option = this.times[optionIndex];\n    const childElement = this.el.shadowRoot?.getElementById(option.id.toString()) as HTMLLIElement;\n    const parentElement = this.timeMenu;\n\n    this.ariaActivedescendant = option.id.toString();\n\n    // Scroll child into view within parent\n    const childRect = childElement.getBoundingClientRect();\n    const parentRect = parentElement.getBoundingClientRect();\n\n    if (childRect.top < parentRect.top) {\n      // Child is above the visible area of the parent\n      parentElement.scrollTop -= parentRect.top - childRect.top;\n    } else if (childRect.bottom > parentRect.bottom) {\n      // Child is below the visible area of the parent\n      parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n    }\n\n    if (childRect.left < parentRect.left) {\n      // Child is to the left of the visible area of the parent\n      parentElement.scrollLeft -= parentRect.left - childRect.left;\n    } else if (childRect.right > parentRect.right) {\n      // Child is to the right of the visible area of the parent\n      parentElement.scrollLeft += childRect.right - parentRect.right;\n    }\n  }\n\n  focusOption(index: number) {\n    const option = this.times[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.id.toString();\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"time-picker\" part=\"time-picker\">\n          <input\n            type=\"text\"\n            name={this.name}\n            id={this.name}\n            part=\"time-input\"\n            class={{\n              'time-input': true,\n              'error': !!this.err || this.hasError,\n            }}\n            ref={el => (this.timeInput = el as HTMLInputElement)}\n            value={this.time}\n            onClick={() => {\n              this.showTimes = true;\n              this.shouldAutoScroll = true;\n            }}\n            aria-haspopup=\"listbox\"\n            aria-label={this.name}\n            aria-expanded={this.showTimes ? 'true' : 'false'}\n            placeholder={this.placeholder}\n            onKeyDown={e => this.handleComboboxKeyDown(e)}\n            onInput={event => this.handleOnInput(event)}\n            onBlur={event => this.handleTimeAutocomplete(event)}\n          />\n          {this.err && <div class=\"invalid-time-icon\">{/* Icon here */}</div>}\n          {this.showTimes && (\n            <div class=\"times\" part=\"times\" ref={el => (this.timeMenu = el as HTMLElement)}>\n              <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n                {this.times.map(option => (\n                  <li\n                    tabindex=\"0\"\n                    key={option.id}\n                    id={option.id.toString()}\n                    class={{\n                      focused: this.ariaActivedescendant === option.id.toString(),\n                    }}\n                    onClick={e => {\n                      this.handleTimeChange(e, option.value);\n                      this.showTimes = false;\n                      this.timeInput.focus();\n                    }}\n                    role=\"option\"\n                  >\n                    {`${option.value}`}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {!this.showTimes && this.err && (\n            <p class=\"error\" id=\"email-error\">\n              {this.err}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}