@nylas/web-elements 1.0.0-prealpha1

package/dist/esm/nylas-if-state_3.entry.js

@@ -0,0 +1,403 @@
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-b2270b4a.js';
+import { R as RegisterComponent } from './register-component-55376f31.js';
+import { d as debug } from './utils-5074a070.js';
+import { N as NylasBaseProvider, e as es } from './index.es-6f3582a1.js';
+import { N as NylasAuthConnector, a as NylasThreadsConnector, b as NylasMessagesConnector, c as NylasFoldersConnector, C as CreateNylasAuthStore, d as CreateNylasMailboxStore, H as HashRouter } from './mailbox-store-0019772c.js';
+import './index-2b85580a.js';
+
+const nylasIfStateCss = ":host{display:block}div{height:inherit}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fade-in{animation:fadeIn 1.5s}.fade-out{animation:fadeOut 1.5s}@keyframes slideIn{0%{transform:translateY(100%)}100%{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}100%{transform:translateY(100%)}}.slide-in{animation:slideIn 1.5s}.slide-out{animation:slideOut 1.5s}@keyframes swipeIn{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes swipeOut{0%{transform:translateX(0)}100%{transform:translateX(100%)}}.swipe-in{animation:swipeIn 1.5s}.swipe-out{animation:swipeOut 1.5s}";
+const NylasIfStateStyle0 = nylasIfStateCss;
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasIfState = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.state = undefined;
+        this.isStateSet = undefined;
+        this.isBoolean = undefined;
+        this.getStore = undefined;
+        this.transition = 'none';
+        this.show = false;
+        this.classes = {};
+        this.initTransition = this.initTransition.bind(this);
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-if-state] Component will load`);
+        this.watchStore(true);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-if-state] Component did load`);
+    }
+    shouldRender() {
+        const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];
+        const getStore = this.getStore;
+        if (typeof getStore === 'undefined') {
+            debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { getStore });
+            return false;
+        }
+        const store = getStore(storeName);
+        if (typeof store === 'undefined') {
+            debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { store });
+            return false;
+        }
+        const state = store.state[stateName];
+        if (typeof this.isStateSet === 'boolean') {
+            return ((this.isStateSet === false && (typeof state === 'undefined' || state === null || state.length === 0)) ||
+                (this.isStateSet === true && typeof state !== 'undefined' && state !== null));
+        }
+        if (typeof this.isBoolean === 'boolean') {
+            return (this.isBoolean === true && typeof state !== 'undefined' && state === true) || (this.isBoolean === false && typeof state !== 'undefined' && state === false);
+        }
+        return false;
+    }
+    onGetStoreChange() {
+        this.watchStore(true);
+    }
+    watchStore(immediate = false) {
+        const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];
+        const getStore = this.getStore;
+        if (typeof getStore === 'undefined') {
+            debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { getStore });
+            return null;
+        }
+        const store = getStore(storeName);
+        if (typeof store === 'undefined') {
+            debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { store });
+            return null;
+        }
+        if (immediate === true) {
+            this.initTransition();
+        }
+        store.onChange(stateName, this.initTransition);
+    }
+    initTransition() {
+        const show = this.shouldRender();
+        switch (this.transition) {
+            case 'fade':
+            case 'slide':
+            case 'swipe':
+                this.classes = {
+                    [`${this.transition}-in`]: show,
+                    [`${this.transition}-out`]: !show,
+                };
+                setTimeout(() => {
+                    this.show = show;
+                }, 150);
+                break;
+            default:
+                this.show = this.shouldRender();
+                break;
+        }
+    }
+    render() {
+        return (h(Host, { key: '91d17bc89a09742106ef3bd9365c5ce48cf14e86' }, h("div", { key: '9d0070be4bf5d9a5f405fc4a0733e6d832fa669a', class: this.classes }, this.show && h("slot", null))));
+    }
+    static get watchers() { return {
+        "getStore": ["onGetStoreChange"]
+    }; }
+};
+__decorate$1([
+    RegisterComponent({
+        name: 'nylas-if-state',
+        getStoresToProp: 'getStore',
+        fireRegisterEvent: true,
+    }),
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", []),
+    __metadata$1("design:returntype", void 0)
+], NylasIfState.prototype, "render", null);
+NylasIfState.style = NylasIfStateStyle0;
+
+const nylasLoginCss = ":host{font-family:'Arial', sans-serif;background:var(--nylas-color-primary-50);color:var(--nylas-color-primary-800);margin:0;display:contents}input{box-sizing:border-box}.login-container{display:flex;justify-content:center;align-items:center;height:100%}.login-box{width:300px;padding:20px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);border-radius:var(--nylas-border-radius-2x);background:var(--nylas-color-primary-50);text-align:center}.login-box h1{margin-top:0;margin-bottom:0.5em}.login-box p{margin-bottom:1em}.login-methods button{display:block;width:100%;padding:10px 10px 10px 50px;margin-bottom:10px;border:none;border-radius:var(--nylas-border-radius);border:1px solid var(--nylas-color-primary-300);background:var(--nylas-color-primary-100);color:var(--nylas-color-primary-600);cursor:pointer;transition:background 0.3s ease;position:relative;text-align:left}.login-methods button svg{position:absolute;left:16px;top:50%;transform:translateY(-50%)}.login-methods button:hover{background:var(--nylas-color-primary-200);}.login-form label{display:block;margin-bottom:5px;text-align:left}.login-form input{width:100%;padding:10px;margin-bottom:10px;border:1px solid var(--nylas-color-primary-200);border-radius:var(--nylas-border-radius);background:var(--nylas-color-primary-100);color:var(--nylas-color-primary-800);}.login-form button{width:100%;padding:10px;border:none;border-radius:var(--nylas-border-radius);background:var(--nylas-color-primary-500);color:var(--nylas-color-primary-50);cursor:pointer;transition:background 0.3s ease}.login-form button:hover{background:var(--nylas-color-primary-600);}";
+const NylasLoginStyle0 = nylasLoginCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasLogin = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.buttonClick = createEvent(this, "buttonClick", 7);
+        this._handleLoginRedirect = async () => {
+            const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes);
+            const event = this.buttonClick.emit({ url });
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (url) {
+                window.location.href = url;
+            }
+        };
+        this._onGoogleButtonClick = async (event) => {
+            event.preventDefault();
+            const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, undefined, 'google');
+            if (url) {
+                window.location.href = url;
+            }
+        };
+        this._onMicrosoftButtonClick = async (event) => {
+            event.preventDefault();
+            const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, undefined, 'microsoft');
+            if (url) {
+                window.location.href = url;
+            }
+        };
+        this._onFormSubmit = async (event) => {
+            event.preventDefault();
+            const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, this.email);
+            if (url) {
+                window.location.href = url;
+            }
+        };
+        this.isAuthenticated = false;
+        this.nylasConnector = undefined;
+        this.scopes = undefined;
+        this.loginMethod = 'redirect';
+        this.companyName = 'Nylas';
+        this.logoUrl = 'https://www.nylas.com/wp-content/uploads/main-logo.svg';
+        this.logoWidth = 'min-content';
+        this.providers = 'google,microsoft';
+        this.buttonText = 'Login';
+        this.email = '';
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    componentWillLoad() { }
+    async componentDidLoad() {
+        const exchangedToken = await this.nylasConnector?.auth.manageHostedAuthCodeExchange(window.location.href);
+        if (exchangedToken) {
+            window.history.replaceState({}, document.title, window.location.pathname);
+        }
+    }
+    render() {
+        const splitProviders = this.providers?.split(',') || [];
+        return (h(Host, { key: '734ebbbe5cf2ba3c08943a665a4724f59705da5b' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
+                minWidth: this.logoWidth,
+            } }), h("h1", null, "Welcome")), h("p", null, "Log in to your account to continue to ", this.companyName), h("div", { class: "login-methods" }, splitProviders.includes('google') && (h("button", { class: "login-google", onClick: this._onGoogleButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 256 262" }, h("path", { fill: "#4285F4", d: "M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z" }), h("path", { fill: "#34A853", d: "M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z" }), h("path", { fill: "#FBBC05", d: "M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z" }), h("path", { fill: "#EA4335", d: "M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z" })), "Continue with Google")), splitProviders.includes('microsoft') && (h("button", { class: "login-microsoft", onClick: this._onMicrosoftButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 448 512" }, h("path", { fill: "#F3F3F3", d: "M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z" })), "Continue with Microsoft"))), h("form", { class: "login-form", method: "POST", onSubmit: this._onFormSubmit }, h("label", { htmlFor: "email" }, "Email"), h("input", { type: "email", id: "email", name: "email", required: true, value: this.email }), h("button", { type: "submit" }, "Next")))))));
+    }
+};
+__decorate([
+    RegisterComponent({
+        name: 'nylas-login',
+        connectorToProp: 'nylasConnector',
+        stateToProps: new Map([['auth.isAuthenticated', 'isAuthenticated']]),
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasLogin.prototype, "render", null);
+NylasLogin.style = NylasLoginStyle0;
+
+class NylasMailboxConnector {
+    constructor(router, nylasAuth, nylasAuthStore, nylasStore) {
+        this.router = router;
+        this.nylasAuth = nylasAuth;
+        this.nylasAuthStore = nylasAuthStore;
+        this.nylasMailboxStore = nylasStore;
+    }
+    init() {
+        debug('NylasMailboxConnector init');
+    }
+    get mailboxStore() {
+        return this.nylasMailboxStore;
+    }
+    get authStore() {
+        return this.nylasAuthStore;
+    }
+    get auth() {
+        if (this._authConnector) {
+            return this._authConnector;
+        }
+        this._authConnector = new NylasAuthConnector(this.nylasAuth, this.nylasAuthStore);
+        return this._authConnector;
+    }
+    get threads() {
+        if (this._threadConnector) {
+            return this._threadConnector;
+        }
+        this._threadConnector = new NylasThreadsConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore, this.router);
+        return this._threadConnector;
+    }
+    get messages() {
+        if (this._messageConnector) {
+            return this._messageConnector;
+        }
+        this._messageConnector = new NylasMessagesConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore);
+        return this._messageConnector;
+    }
+    get folders() {
+        if (this._foldersConnector) {
+            return this._foldersConnector;
+        }
+        this._foldersConnector = new NylasFoldersConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore);
+        return this._foldersConnector;
+    }
+    getAuth() {
+        return this.nylasAuth;
+    }
+    resetStores() {
+        this.nylasMailboxStore.reset();
+        this.nylasAuthStore.reset();
+    }
+    async logout() {
+        await this.nylasAuth.logout();
+        this.resetStores();
+    }
+}
+
+const nylasMailboxCss = ":host{display:contents}";
+const NylasMailboxStyle0 = nylasMailboxCss;
+
+const NylasMailbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.init = createEvent(this, "init", 7);
+        this.loggedIn = createEvent(this, "loggedIn", 7);
+        this.loggedOut = createEvent(this, "loggedOut", 7);
+        this.handleAuthChange = async (isAuthenticated) => {
+            if (isAuthenticated) {
+                this.loggedIn.emit(this.host);
+            }
+            else {
+                const loggedOutEvent = this.loggedOut.emit(this.host);
+                if (!loggedOutEvent.defaultPrevented) {
+                    await this.nylasMailboxConnector?.logout();
+                }
+            }
+        };
+        this.automaticComponentRegistration = true;
+        this.eventOverrides = {};
+        this.authConfig = undefined;
+        this.defaultAuthStoreState = undefined;
+        this.defaultMailboxStoreState = undefined;
+    }
+    connectedCallback() {
+        debug('[nylas-mailbox] connectedCallback');
+    }
+    async componentWillLoad() {
+        this.stores = {
+            auth: CreateNylasAuthStore(this.defaultAuthStoreState),
+            mailbox: CreateNylasMailboxStore(this.defaultMailboxStoreState),
+        };
+        this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);
+        this.router = new HashRouter();
+        this.nylasAuth = es({
+            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');
+        if (!authStore) {
+            throw new Error('Auth store is not defined');
+        }
+        const mailboxStore = this.baseProvider?.getStore('mailbox');
+        if (!mailboxStore) {
+            throw new Error('Mailbox store is not defined');
+        }
+        this.nylasMailboxConnector = new NylasMailboxConnector(this.router, this.nylasAuth, authStore, mailboxStore);
+        const initEvent = this.init.emit(this.host);
+        if (!initEvent.defaultPrevented) {
+            await this.nylasMailboxConnector?.auth.validateSession();
+        }
+        this.router?.addRouteChangeListener(`/thread/:threadId`, async (_route, _path, routeParams) => {
+            const threadId = routeParams.threadId;
+            const thread = await this.nylasMailboxConnector?.threads.getThread(threadId);
+            if (thread) {
+                this.nylasMailboxConnector?.mailboxStore.set('selectedThread', thread);
+            }
+        });
+        this.router?.addRouteChangeListener(`/`, async (_route, _path, _routeParams) => {
+            if (!authStore.state.isAuthenticated) {
+                return;
+            }
+            this.nylasMailboxConnector?.threads.unSelectThread();
+            this.nylasMailboxConnector?.folders.getFolders();
+            const queryParams = window.location.hash.split('?')[1];
+            if (queryParams) {
+                const params = new URLSearchParams(queryParams);
+                const searchQuery = params.get('query');
+                if (searchQuery) {
+                    await this.nylasMailboxConnector?.threads.getThreads({
+                        search_query_native: searchQuery,
+                        page_token: undefined,
+                    });
+                }
+            }
+            else {
+                this.nylasMailboxConnector?.threads.getThreads();
+            }
+        });
+        this.router?.init();
+        this.handleAuthChange(authStore.state.isAuthenticated);
+        this.baseProvider?.componentWillLoad(this.nylasMailboxConnector);
+    }
+    async componentDidLoad() {
+        const authStore = this.baseProvider?.getStore('auth');
+        if (!authStore) {
+            throw new Error('Auth store is not defined');
+        }
+        authStore.onChange('isAuthenticated', this.handleAuthChange);
+        this.baseProvider?.componentDidLoad();
+    }
+    componentDisconnected() {
+        this.baseProvider?.componentDisconnected();
+    }
+    async registerComponentHandler(event) {
+        this.baseProvider?.registerComponent(event.detail);
+    }
+    async unregisterComponentHandler(event) {
+        this.baseProvider?.unregisterComponent(event.detail);
+    }
+    async getMailboxStore() {
+        return this.baseProvider?.getStore('mailbox');
+    }
+    async getAuthStore() {
+        return this.baseProvider?.getStore('auth');
+    }
+    async getNylasAuth() {
+        return this.nylasAuth;
+    }
+    async getNylasMailboxConnector() {
+        return this.nylasMailboxConnector;
+    }
+    render() {
+        return (h(Host, { key: '08e87a3218f672e8944102d626b690aefb3bab3f' }, h("slot", { key: '05ab1ca1539a00ea199bb9cb25c8b96af8d6ab66' })));
+    }
+    get host() { return getElement(this); }
+};
+NylasMailbox.style = NylasMailboxStyle0;
+
+export { NylasIfState as nylas_if_state, NylasLogin as nylas_login, NylasMailbox as nylas_mailbox };
+
+//# sourceMappingURL=nylas-if-state_3.entry.js.map

package/dist/esm/nylas-if-state_3.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-if-state.nylas-login.nylas-mailbox.entry.js","mappings":"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","names":["__decorate","NylasAuth"],"sources":["src/components/nylas-if-state/nylas-if-state.css?tag=nylas-if-state&encapsulation=shadow","src/components/nylas-if-state/nylas-if-state.tsx","src/components/nylas-login/nylas-login.css?tag=nylas-login&encapsulation=shadow","src/components/nylas-login/nylas-login.tsx","src/connector/nylas-mailbox-connector/index.ts","src/components/mailbox/nylas-mailbox/nylas-mailbox.css?tag=nylas-mailbox&encapsulation=shadow","src/components/mailbox/nylas-mailbox/nylas-mailbox.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndiv {\n  height: inherit;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n.fade-in {\n  animation: fadeIn 1.5s;\n}\n\n.fade-out {\n  animation: fadeOut 1.5s;\n}\n\n@keyframes slideIn {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideOut {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(100%);\n  }\n}\n\n.slide-in {\n  animation: slideIn 1.5s;\n}\n\n.slide-out {\n  animation: slideOut 1.5s;\n}\n\n@keyframes swipeIn {\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes swipeOut {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.swipe-in {\n  animation: swipeIn 1.5s;\n}\n\n.swipe-out {\n  animation: swipeOut 1.5s;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug } from '@/utils/utils';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\n\nexport type Stores = Record<string, ObservableMap<any>>;\n\nexport type Transitions = 'none' | 'fade' | 'slide' | 'swipe';\n\n@Component({\n  tag: 'nylas-if-state',\n  styleUrl: 'nylas-if-state.css',\n  shadow: true,\n})\nexport class NylasIfState {\n  /**\n   * The name of the state to watch.\n   */\n  @Prop() readonly state?: string;\n  /**\n   * If true, then the component will render if the state is set (empty or not set).\n   * This prop is used with the `state` prop.\n   */\n  @Prop() readonly isStateSet?: boolean;\n  /**\n   * If true, then the component will render if the state is true.\n   * This prop is used with the `state` prop.\n   */\n  @Prop() readonly isBoolean?: boolean;\n  @Prop() readonly getStore?: <K extends keyof Stores>(name: K) => Stores[K];\n  @Prop() readonly transition: Transitions = 'none';\n\n  @State() show: boolean = false;\n  @State() classes: Record<string, boolean> = {};\n\n  constructor() {\n    this.initTransition = this.initTransition.bind(this);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-if-state] Component will load`);\n    this.watchStore(true);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-if-state] Component did load`);\n  }\n\n  private shouldRender() {\n    // If a period exists in the state name, then we need to split the state name into the store name and the state name.\n    // For example, if the state name is `nylas.scheduler.selectableDates`, then the store name is `nylas` and the state name is `scheduler.selectableDates`.\n    const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];\n    const getStore = this.getStore;\n    if (typeof getStore === 'undefined') {\n      debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { getStore });\n      return false;\n    }\n\n    const store = getStore(storeName as keyof Stores);\n    if (typeof store === 'undefined') {\n      debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { store });\n      return false;\n    }\n\n    const state = store.state[stateName as string];\n\n    if (typeof this.isStateSet === 'boolean') {\n      return (\n        (this.isStateSet === false && (typeof state === 'undefined' || state === null || state.length === 0)) ||\n        (this.isStateSet === true && typeof state !== 'undefined' && state !== null)\n      );\n    }\n\n    if (typeof this.isBoolean === 'boolean') {\n      return (this.isBoolean === true && typeof state !== 'undefined' && state === true) || (this.isBoolean === false && typeof state !== 'undefined' && state === false);\n    }\n\n    return false;\n  }\n\n  @Watch('getStore')\n  onGetStoreChange() {\n    this.watchStore(true);\n  }\n\n  private watchStore(immediate: boolean = false) {\n    // If a period exists in the state name, then we need to split the state name into the store name and the state name.\n    // For example, if the state name is `nylas.scheduler.selectableDates`, then the store name is `nylas` and the state name is `scheduler.selectableDates`.\n    const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];\n    const getStore = this.getStore;\n    if (typeof getStore === 'undefined') {\n      debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { getStore });\n      return null;\n    }\n\n    const store = getStore(storeName as keyof Stores);\n    if (typeof store === 'undefined') {\n      debug(`[nylas-if-state] Store name: ${storeName} | State name: ${stateName}`, { store });\n      return null;\n    }\n\n    if (immediate === true) {\n      this.initTransition();\n    }\n\n    store.onChange(stateName as string, this.initTransition);\n  }\n\n  private initTransition() {\n    const show = this.shouldRender();\n    switch (this.transition) {\n      case 'fade':\n      case 'slide':\n      case 'swipe':\n        this.classes = {\n          [`${this.transition}-in`]: show,\n          [`${this.transition}-out`]: !show,\n        };\n        setTimeout(() => {\n          this.show = show;\n        }, 150);\n        break;\n      default:\n        this.show = this.shouldRender();\n        break;\n    }\n  }\n\n  @RegisterComponent({\n    name: 'nylas-if-state',\n    getStoresToProp: 'getStore',\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class={this.classes}>{this.show && <slot></slot>}</div>\n      </Host>\n    );\n  }\n}\n",":host {\n  font-family: 'Arial', sans-serif;\n  background: var(--nylas-color-primary-50); /* Closest to #f0f0f0 */\n  color: var(--nylas-color-primary-800); /* Closest to #333 */\n  margin: 0;\n  display: contents;\n}\n\ninput {\n  box-sizing: border-box;\n}\n\n.login-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}\n\n.login-box {\n  width: 300px;\n  padding: 20px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  border-radius: var(--nylas-border-radius-2x);\n  background: var(--nylas-color-primary-50); /* Assuming white background */\n  text-align: center;\n}\n\n.login-box h1 {\n  margin-top: 0;\n  margin-bottom: 0.5em;\n}\n\n.login-box p {\n  margin-bottom: 1em;\n}\n\n.login-methods button {\n  display: block;\n  width: 100%;\n  padding: 10px 10px 10px 50px;\n  margin-bottom: 10px;\n  border: none;\n  border-radius: var(--nylas-border-radius);\n  border: 1px solid var(--nylas-color-primary-300); /* Closest to #b1b1b1 */\n  background: var(--nylas-color-primary-100); /* Closest to #f1f1f1 */\n  color: var(--nylas-color-primary-600); /* Closest to #5f6368 */\n  cursor: pointer;\n  transition: background 0.3s ease;\n  position: relative;\n  text-align: left;\n}\n\n.login-methods button svg {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.login-methods button:hover {\n  background: var(--nylas-color-primary-200); /* Closest to #e2e2e2 */\n}\n\n.login-form label {\n  display: block;\n  margin-bottom: 5px;\n  text-align: left;\n}\n\n.login-form input {\n  width: 100%;\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid var(--nylas-color-primary-200); /* Closest to #ddd */\n  border-radius: var(--nylas-border-radius);\n  background: var(--nylas-color-primary-100); /* Closest to #f1f1f1 */\n  color: var(--nylas-color-primary-800); /* Closest to #333 */\n}\n\n.login-form button {\n  width: 100%;\n  padding: 10px;\n  border: none;\n  border-radius: var(--nylas-border-radius);\n  background: var(--nylas-color-primary-500); /* Closest to #007bff */\n  color: var(--nylas-color-primary-50); /* Assuming white text */\n  cursor: pointer;\n  transition: background 0.3s ease;\n}\n\n.login-form button:hover {\n  background: var(--nylas-color-primary-600); /* Closest to #0056b3 */\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasAuthConnectorInterface } from '@/connector/connector-interface';\nimport { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\nimport { NylasAuthStoreState } from '../../components';\n\n@Component({\n  tag: 'nylas-login',\n  styleUrl: 'nylas-login.css',\n  shadow: true,\n})\nexport class NylasLogin {\n  @Prop() readonly isAuthenticated: boolean = false;\n  @Prop() readonly nylasConnector?: NylasAuthConnectorInterface;\n  @Prop() readonly scopes?: string[];\n  @Prop() readonly loginMethod: 'redirect' | 'emebded' = 'redirect';\n  @Prop() readonly companyName: string = 'Nylas';\n  @Prop() readonly logoUrl: string = 'https://www.nylas.com/wp-content/uploads/main-logo.svg';\n  @Prop() readonly logoWidth?: string = 'min-content';\n  @Prop() readonly providers?: string = 'google,microsoft';\n  @Prop() readonly buttonText: string = 'Login';\n\n  @Event() buttonClick!: EventEmitter<{ url?: string }>;\n\n  @State() email: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  async componentDidLoad() {\n    const exchangedToken = await this.nylasConnector?.auth.manageHostedAuthCodeExchange(window.location.href);\n    if (exchangedToken) {\n      // Remove the code query param from the user's browser url\n      window.history.replaceState({}, document.title, window.location.pathname);\n    }\n  }\n\n  private _handleLoginRedirect = async () => {\n    const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes);\n\n    const event = this.buttonClick.emit({ url });\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (url) {\n      window.location.href = url;\n    }\n  };\n\n  private _onGoogleButtonClick = async (event: Event) => {\n    // Prevent the form from submitting\n    event.preventDefault();\n\n    const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, undefined, 'google');\n    if (url) {\n      window.location.href = url;\n    }\n  };\n\n  private _onMicrosoftButtonClick = async (event: Event) => {\n    // Prevent the form from submitting\n    event.preventDefault();\n\n    const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, undefined, 'microsoft');\n    if (url) {\n      window.location.href = url;\n    }\n  };\n\n  private _onFormSubmit = async (event: Event) => {\n    // Prevent the form from submitting\n    event.preventDefault();\n\n    const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, this.email);\n    if (url) {\n      window.location.href = url;\n    }\n  };\n\n  @RegisterComponent<\n    NylasLogin,\n    NylasAuthConnectorInterface,\n    {\n      auth: ObservableMap<NylasAuthStoreState>;\n    }\n  >({\n    name: 'nylas-login',\n    connectorToProp: 'nylasConnector',\n    stateToProps: new Map([['auth.isAuthenticated', 'isAuthenticated']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    const splitProviders = this.providers?.split(',') || [];\n    return (\n      <Host>\n        {this.loginMethod === 'redirect' && (\n          <div class=\"redirect-container\">\n            {!this.isAuthenticated && (\n              <sp-button part=\"button\" onClick={this._handleLoginRedirect}>\n                {this.buttonText}\n              </sp-button>\n            )}\n          </div>\n        )}\n        {this.loginMethod === 'emebded' && (\n          <main class=\"login-container\">\n            <section class=\"login-box\">\n              <header>\n                <img\n                  src={this.logoUrl}\n                  alt={`${this.companyName} logo`}\n                  width={'100%'}\n                  style={{\n                    minWidth: this.logoWidth,\n                  }}\n                />\n                <h1>Welcome</h1>\n              </header>\n              <p>Log in to your account to continue to {this.companyName}</p>\n              <div class=\"login-methods\">\n                {splitProviders.includes('google') && (\n                  <button class=\"login-google\" onClick={this._onGoogleButtonClick}>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"18\" height=\"18\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 256 262\">\n                      <path fill=\"#4285F4\" d=\"M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z\" />\n                      <path\n                        fill=\"#34A853\"\n                        d=\"M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z\"\n                      />\n                      <path fill=\"#FBBC05\" d=\"M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z\" />\n                      <path fill=\"#EA4335\" d=\"M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z\" />\n                    </svg>\n                    Continue with Google\n                  </button>\n                )}\n                {splitProviders.includes('microsoft') && (\n                  <button class=\"login-microsoft\" onClick={this._onMicrosoftButtonClick}>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"18\" height=\"18\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 448 512\">\n                      <path fill=\"#F3F3F3\" d=\"M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z\" />\n                    </svg>\n                    Continue with Microsoft\n                  </button>\n                )}\n                {/* <button class=\"login-all\">View all providers</button> */}\n              </div>\n              <form class=\"login-form\" method=\"POST\" onSubmit={this._onFormSubmit}>\n                <label htmlFor=\"email\">Email</label>\n                <input type=\"email\" id=\"email\" name=\"email\" required value={this.email} />\n                <button type=\"submit\">Next</button>\n              </form>\n            </section>\n          </main>\n        )}\n      </Host>\n    );\n  }\n}\n","import { RouterInterface } from '@/routers/router-interface';\nimport { NylasAuthStoreType } from '@/stores/auth-store';\nimport { NylasMailboxStoreType } from '@/stores/mailbox-store';\nimport { debug } from '@/utils/utils';\nimport type { NylasAuthType } from '@nylas/core';\nimport { NylasMailboxConnectorInterface } from '../connector-interface';\nimport { NylasAuthConnector } from '../shared/api/auth';\nimport { NylasMessagesConnector } from '../shared/api/messages';\nimport { NylasThreadsConnector } from '../shared/api/threads';\nimport { NylasFoldersConnector } from '../shared/api/folders';\n\n/**\n * Base class for the Nylas connector.\n */\nexport class NylasMailboxConnector implements NylasMailboxConnectorInterface {\n  public nylasAuth: NylasAuthType;\n  public nylasMailboxStore: NylasMailboxStoreType;\n  public nylasAuthStore: NylasAuthStoreType;\n  public router: RouterInterface;\n\n  private _authConnector: NylasAuthConnector | undefined;\n  private _threadConnector: NylasThreadsConnector | undefined;\n  private _messageConnector: NylasMessagesConnector | undefined;\n  private _foldersConnector: NylasFoldersConnector | undefined;\n\n  constructor(router: RouterInterface, nylasAuth: NylasAuthType, nylasAuthStore: NylasAuthStoreType, nylasStore: NylasMailboxStoreType) {\n    this.router = router;\n    this.nylasAuth = nylasAuth;\n    this.nylasAuthStore = nylasAuthStore;\n    this.nylasMailboxStore = nylasStore;\n  }\n\n  public init() {\n    debug('NylasMailboxConnector init');\n  }\n\n  public get mailboxStore() {\n    return this.nylasMailboxStore;\n  }\n\n  public get authStore() {\n    return this.nylasAuthStore;\n  }\n\n  public get auth() {\n    if (this._authConnector) {\n      return this._authConnector;\n    }\n    this._authConnector = new NylasAuthConnector(this.nylasAuth, this.nylasAuthStore);\n    return this._authConnector;\n  }\n\n  public get threads() {\n    if (this._threadConnector) {\n      return this._threadConnector;\n    }\n    this._threadConnector = new NylasThreadsConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore, this.router);\n    return this._threadConnector;\n  }\n\n  public get messages() {\n    if (this._messageConnector) {\n      return this._messageConnector;\n    }\n    this._messageConnector = new NylasMessagesConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore);\n    return this._messageConnector;\n  }\n\n  public get folders() {\n    if (this._foldersConnector) {\n      return this._foldersConnector;\n    }\n    this._foldersConnector = new NylasFoldersConnector(this.nylasAuth, this.nylasAuthStore, this.nylasMailboxStore);\n    return this._foldersConnector;\n  }\n\n  public getAuth() {\n    return this.nylasAuth;\n  }\n\n  public resetStores() {\n    this.nylasMailboxStore.reset();\n    this.nylasAuthStore.reset();\n  }\n\n  public async logout() {\n    await this.nylasAuth.logout();\n    this.resetStores();\n  }\n}\n\nexport type PublicMethods<T> = {\n  [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;\n}[keyof T];\n\nexport type NylasMailboxConnectorPublicMethods = PublicMethods<NylasMailboxConnector>;\n",":host {\n  display: contents;\n}\n","import { NylasBaseProvider } from '@/common/abstract-provider';\nimport { RegisteredComponent } from '@/common/register-component';\nimport type { EventOverride } from '@/common/component-types';\nimport { NylasMailboxConnector } from '@/connector/nylas-mailbox-connector';\nimport { HashRouter } from '@/routers/hash-router';\nimport { RouterInterface } from '@/routers/router-interface';\nimport { CreateNylasAuthStore, NylasAuthStoreState, NylasAuthStoreType } from '@/stores/auth-store';\nimport { CreateNylasMailboxStore, NylasMailboxStoreState, NylasMailboxStoreType } from '@/stores/mailbox-store';\nimport { AuthConfg, NylasAuth, NylasAuthType } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, h } from '@stencil/core';\nimport { debug } from '@/utils/utils';\n\n/**\n * The Nylas Mailbox component.\n * This component is used as a provider for all other Nylas Mailbox components.\n * It is responsible for managing the NylasAuth and NylasMailboxConnector instances.\n * It also manages the state of the NylasAuth and NylasMailboxStore instances.\n * @example\n * <nylas-mailbox\n *  auth-config={{\n *  clientId: 'YOUR_CLIENT_ID',\n *  }}\n * default-auth-store-state={{\n * threadQueryParams: {\n *  limit: 10,\n * }}\n * >\n *  <nylas-mailbox-thread-list></nylas-mailbox-thread-list>\n * </nylas-mailbox>\n */\n@Component({\n  tag: 'nylas-mailbox',\n  styleUrl: 'nylas-mailbox.css',\n  shadow: true,\n})\nexport class NylasMailbox {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: {\n    auth: NylasAuthStoreType;\n    mailbox: NylasMailboxStoreType;\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   * A router instance.\n   */\n  private router?: RouterInterface;\n\n  /**\n   * The Nylas Mailbox Connector instance.\n   * The branins of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasMailboxConnector?: NylasMailboxConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasMailboxElement;\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   */\n  @Prop() readonly automaticComponentRegistration: boolean = true;\n\n  /**\n   * This provides a way to override the default event handlers.\n   */\n  @Prop() eventOverrides: EventOverride<Exclude<typeof this.nylasMailboxConnector, undefined>> = {};\n\n  /**\n   * The Nylas Auth configuration.\n   * Used to manage all things authentication with Nylas.\n   */\n  @Prop({ attribute: 'auth-config' }) readonly authConfig?: AuthConfg;\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 mailbox store state.\n   * Used to set the initial state of the mailbox store.\n   */\n  @Prop({ attribute: 'default-mailbox-store-state' }) readonly defaultMailboxStoreState?: NylasMailboxStoreState;\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<HTMLNylasMailboxElement>;\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<HTMLNylasMailboxElement>;\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<HTMLNylasMailboxElement>;\n\n  connectedCallback() {\n    debug('[nylas-mailbox] connectedCallback');\n  }\n\n  async componentWillLoad() {\n    this.stores = {\n      auth: CreateNylasAuthStore(this.defaultAuthStoreState),\n      mailbox: CreateNylasMailboxStore(this.defaultMailboxStoreState),\n    };\n\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    /**\n     * Create the router instance.\n     * This will be used to manage the routing of the provider.\n     */\n    this.router = new HashRouter();\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\n    const authStore = this.baseProvider?.getStore('auth');\n    if (!authStore) {\n      throw new Error('Auth store is not defined');\n    }\n\n    const mailboxStore = this.baseProvider?.getStore('mailbox');\n    if (!mailboxStore) {\n      throw new Error('Mailbox store is not defined');\n    }\n\n    this.nylasMailboxConnector = new NylasMailboxConnector(this.router, this.nylasAuth, authStore, mailboxStore);\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.nylasMailboxConnector?.auth.validateSession();\n    }\n\n    // Handle our router\n    this.router?.addRouteChangeListener(`/thread/:threadId`, async (_route, _path, routeParams) => {\n      const threadId = routeParams.threadId;\n      const thread = await this.nylasMailboxConnector?.threads.getThread(threadId);\n      if (thread) {\n        this.nylasMailboxConnector?.mailboxStore.set('selectedThread', thread);\n      }\n    });\n    this.router?.addRouteChangeListener(`/`, async (_route, _path, _routeParams) => {\n      if (!authStore.state.isAuthenticated) {\n        return;\n      }\n      // Reset the selected thread\n      this.nylasMailboxConnector?.threads.unSelectThread();\n      this.nylasMailboxConnector?.folders.getFolders();\n\n      // If we have a query param, search for threads\n      const queryParams = window.location.hash.split('?')[1];\n      if (queryParams) {\n        const params = new URLSearchParams(queryParams);\n        const searchQuery = params.get('query');\n        if (searchQuery) {\n          await this.nylasMailboxConnector?.threads.getThreads({\n            search_query_native: searchQuery,\n            page_token: undefined,\n          });\n        }\n      } else {\n        this.nylasMailboxConnector?.threads.getThreads();\n      }\n    });\n\n    /**\n     * Initialize the router.\n     * This will be used to manage the routing of the provider.\n     */\n    this.router?.init();\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.nylasMailboxConnector);\n  }\n\n  async componentDidLoad() {\n    const authStore = this.baseProvider?.getStore('auth');\n    if (!authStore) {\n      throw new Error('Auth store is not defined');\n    }\n\n    authStore.onChange('isAuthenticated', this.handleAuthChange);\n    this.baseProvider?.componentDidLoad();\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 retrieve the mailboxStore instance\n   * @returns The mailboxStore instance\n   */\n  @Method()\n  async getMailboxStore(): Promise<NylasMailboxStoreType | undefined> {\n    return this.baseProvider?.getStore('mailbox');\n  }\n\n  /**\n   * This method is used to retrieve the authStore instance\n   * @returns The authStore instance\n   */\n  @Method()\n  async getAuthStore(): Promise<NylasAuthStoreType | undefined> {\n    return this.baseProvider?.getStore('auth');\n  }\n\n  /**\n   * This method is used to retrieve the NylasAuth instance\n   * @returns The NylasAuth instance\n   */\n  @Method()\n  async getNylasAuth(): Promise<NylasAuthType | undefined> {\n    return this.nylasAuth;\n  }\n\n  /**\n   * This method is used to retrieve the NylasMailboxConnector instance\n   * @returns The NylasMailboxConnector instance\n   */\n  @Method()\n  async getNylasMailboxConnector() {\n    return this.nylasMailboxConnector;\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.nylasMailboxConnector?.logout();\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nylas-list-folders.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-b2270b4a.js';
+import { R as RegisterComponent } from './register-component-55376f31.js';
+import { d as debug, a as formatFolderName, t as toTitleCase } from './utils-5074a070.js';
+
+const nylasListFoldersCss = ":host{display:block}.folders{display:flex;flex-direction:column;align-items:self-start}.folders .folder{border:1px solid var(--nylas-color-primary-100);padding:0.5rem 0.75rem;margin-bottom:0.5rem;justify-content:left;width:100%;min-width:200px;border-radius:var(--nylas-border-radius);background-color:var(--nylas-color-primary-50)}.folders .folder:last-child{margin-bottom:0}.folders .folder.selected{background-color:var(--nylas-color-primary-100)}.folders .folder .icon{margin-right:0.5rem;stroke:var(--nylas-color-primary-900);fill:none}hr{width:100%;margin:1rem 0;border:0;border-top:1px solid var(--nylas-color-primary-100)}";
+const NylasListFoldersStyle0 = nylasListFoldersCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasListFolders = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.folderSelected = createEvent(this, "folderSelected", 7);
+        this.folderSelectedHandler = (folder) => {
+            this.folderSelected?.emit(folder);
+        };
+        this.folders = undefined;
+        this.selectedFolder = undefined;
+        this.defaultFolders = undefined;
+        this.otherFolders = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-list-folders] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-list-folders] Component did load`);
+    }
+    watchFolders(newFolders) {
+        debug(`[nylas-list-folders] watchFolders`, { newFolders });
+        const defaultFolders = ['inbox', 'drafts', 'sent', 'starred', 'spam', 'archive', 'trash'];
+        this.defaultFolders = defaultFolders
+            .filter(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))
+            .map(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))
+            .filter(folder => typeof folder !== 'undefined')
+            .sort((a, b) => defaultFolders.indexOf(a?.name ?? '') - defaultFolders.indexOf(b?.name ?? ''));
+        this.otherFolders = newFolders
+            .filter(folder => !defaultFolders.find(folderName => folder.name?.toLowerCase() === folderName.toLowerCase()))
+            .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? ''));
+    }
+    formatFolderName(folder) {
+        return toTitleCase(folder.name?.replace('CATEGORY_', '') ?? 'Unknown');
+    }
+    getFolderIcon(folder) {
+        switch (folder.name?.toLowerCase()) {
+            case 'inbox':
+                return h("inbox-icon", null);
+            case 'drafts':
+                return h("drafts-icon", null);
+            case 'sent':
+                return h("sent-icon", null);
+            case 'starred':
+                return h("star-icon", null);
+            case 'spam':
+                return h("spam-icon", null);
+            case 'archive':
+                return h("archive-icon", null);
+            case 'trash':
+                return h("trash-icon", null);
+            default:
+                return h("folder-icon", null);
+        }
+    }
+    render() {
+        return (h(Host, { key: '68480d02623588939b4223197e10c567d0ee8bf7' }, h("div", { key: '840ceb51b17a2681b8c1b5717a26513afbb0db02', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+                folder: true,
+                selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),
+            } }, h("div", { slot: "icon", class: "icon" }, this.getFolderIcon(folder)), this.formatFolderName(folder))))), this.otherFolders && (h(Fragment, null, h("hr", null), h("div", { class: "folders" }, this.otherFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+                folder: true,
+                selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),
+            } }, h("div", { slot: "icon", class: "icon" }, this.getFolderIcon(folder)), this.formatFolderName(folder)))))))));
+    }
+    static get watchers() { return {
+        "folders": ["watchFolders"]
+    }; }
+};
+__decorate([
+    RegisterComponent({
+        name: 'nylas-pagination',
+        stateToProps: new Map([
+            ['mailbox.folders', 'folders'],
+            ['mailbox.selectedFolder', 'selectedFolder'],
+        ]),
+        eventToProps: {
+            folderSelected: async (_event, nylasConnector) => {
+                debug(`[nylas-list-folders] folderSelected event`, { _event });
+                await nylasConnector.threads.getThreads({
+                    page_token: undefined,
+                    in: formatFolderName(_event.detail.id ?? 'inbox'),
+                });
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasListFolders.prototype, "render", null);
+NylasListFolders.style = NylasListFoldersStyle0;
+
+export { NylasListFolders as nylas_list_folders };
+
+//# sourceMappingURL=nylas-list-folders.entry.js.map

package/dist/esm/nylas-list-folders.entry.js.map

@@ -0,0 +1 @@
+{"file":"nylas-list-folders.entry.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-list-folders/nylas-list-folders.scss?tag=nylas-list-folders&encapsulation=shadow","src/components/mailbox/nylas-list-folders/nylas-list-folders.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.folders {\n  display: flex;\n  flex-direction: column;\n  align-items: self-start;\n\n  .folder {\n    border: 1px solid var(--nylas-color-primary-100);\n    padding: 0.5rem 0.75rem;\n    margin-bottom: 0.5rem;\n    justify-content: left;\n    width: 100%;\n\n    min-width: 200px;\n    border-radius: var(--nylas-border-radius);\n    background-color: var(--nylas-color-primary-50);\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n\n    &.selected {\n      background-color: var(--nylas-color-primary-100);\n    }\n\n    .icon {\n      margin-right: 0.5rem;\n      stroke: var(--nylas-color-primary-900);\n      fill: none;\n    }\n  }\n}\n\nhr {\n  width: 100%;\n  margin: 1rem 0;\n  border: 0;\n  border-top: 1px solid var(--nylas-color-primary-100);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, formatFolderName, toTitleCase } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\nimport { Folder } from '@nylas/core';\n\n@Component({\n  tag: 'nylas-list-folders',\n  styleUrl: 'nylas-list-folders.scss',\n  shadow: true,\n})\nexport class NylasListFolders {\n  @Prop() readonly folders?: Folder[];\n  @Prop() readonly selectedFolder?: string;\n\n  @Event() readonly folderSelected!: EventEmitter<Folder>;\n\n  @State() defaultFolders?: Folder[];\n  @State() otherFolders?: Folder[];\n\n  constructor() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-list-folders] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-list-folders] Component did load`);\n  }\n\n  @Watch('folders')\n  watchFolders(newFolders: Folder[]) {\n    debug(`[nylas-list-folders] watchFolders`, { newFolders });\n    // Expected default folders\n    const defaultFolders = ['inbox', 'drafts', 'sent', 'starred', 'spam', 'archive', 'trash'];\n\n    // Only include default folders that are in the list of folders, and sort them by the default order\n    this.defaultFolders = defaultFolders\n      .filter(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))\n      .map(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))\n      .filter(folder => typeof folder !== 'undefined')\n      .sort((a, b) => defaultFolders.indexOf(a?.name ?? '') - defaultFolders.indexOf(b?.name ?? '')) as Folder[];\n\n    // Only include folders that are not default folders, and sort them by name\n    this.otherFolders = newFolders\n      .filter(folder => !defaultFolders.find(folderName => folder.name?.toLowerCase() === folderName.toLowerCase()))\n      .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')) as Folder[];\n  }\n\n  private folderSelectedHandler = (folder: Folder) => {\n    this.folderSelected?.emit(folder);\n  };\n\n  private formatFolderName(folder: Folder) {\n    return toTitleCase(folder.name?.replace('CATEGORY_', '') ?? 'Unknown');\n  }\n\n  private getFolderIcon(folder: Folder) {\n    switch (folder.name?.toLowerCase()) {\n      case 'inbox':\n        return <inbox-icon></inbox-icon>;\n      case 'drafts':\n        return <drafts-icon></drafts-icon>;\n      case 'sent':\n        return <sent-icon></sent-icon>;\n      case 'starred':\n        return <star-icon></star-icon>;\n      case 'spam':\n        return <spam-icon></spam-icon>;\n      case 'archive':\n        return <archive-icon></archive-icon>;\n      case 'trash':\n        return <trash-icon></trash-icon>;\n      default:\n        return <folder-icon></folder-icon>;\n    }\n  }\n\n  @RegisterComponent<NylasListFolders, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-pagination',\n    stateToProps: new Map([\n      ['mailbox.folders', 'folders'],\n      ['mailbox.selectedFolder', 'selectedFolder'],\n    ]),\n    eventToProps: {\n      folderSelected: async (_event, nylasConnector) => {\n        debug(`[nylas-list-folders] folderSelected event`, { _event });\n        await nylasConnector.threads.getThreads({\n          page_token: undefined,\n          in: formatFolderName(_event.detail.id ?? 'inbox'),\n        });\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"folders\">\n          {this.defaultFolders?.map(folder => (\n            <sp-button\n              onClick={() => this.folderSelectedHandler(folder)}\n              class={{\n                folder: true,\n                selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),\n              }}\n            >\n              <div slot=\"icon\" class=\"icon\">\n                {this.getFolderIcon(folder)}\n              </div>\n              {this.formatFolderName(folder)}\n            </sp-button>\n          ))}\n        </div>\n        {this.otherFolders && (\n          <Fragment>\n            <hr />\n            <div class=\"folders\">\n              {this.otherFolders?.map(folder => (\n                <sp-button\n                  onClick={() => this.folderSelectedHandler(folder)}\n                  class={{\n                    folder: true,\n                    selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),\n                  }}\n                >\n                  <div slot=\"icon\" class=\"icon\">\n                    {this.getFolderIcon(folder)}\n                  </div>\n                  {this.formatFolderName(folder)}\n                </sp-button>\n              ))}\n            </div>\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}