@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/nylas-if-state/nylas-if-state.js

@@ -0,0 +1,241 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../common/register-component";
+import { debug } from "../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasIfState {
+    constructor() {
+        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 is() { return "nylas-if-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-if-state.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-if-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the state to watch."
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "isStateSet": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, then the component will render if the state is set (empty or not set).\nThis prop is used with the `state` prop."
+                },
+                "attribute": "is-state-set",
+                "reflect": false
+            },
+            "isBoolean": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, then the component will render if the state is true.\nThis prop is used with the `state` prop."
+                },
+                "attribute": "is-boolean",
+                "reflect": false
+            },
+            "getStore": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "<K extends keyof Stores>(name: K) => Stores[K]",
+                    "resolved": "(<K extends string>(name: K) => ObservableMap<any>) | undefined",
+                    "references": {
+                        "Stores": {
+                            "location": "local",
+                            "path": "/Users/aarondemello/Developer/nylas/nylas/packages/nylas-web-elements/src/components/nylas-if-state/nylas-if-state.tsx",
+                            "id": "src/components/nylas-if-state/nylas-if-state.tsx::Stores"
+                        },
+                        "K": {
+                            "location": "global",
+                            "id": "global::K"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "transition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Transitions",
+                    "resolved": "\"fade\" | \"none\" | \"slide\" | \"swipe\"",
+                    "references": {
+                        "Transitions": {
+                            "location": "local",
+                            "path": "/Users/aarondemello/Developer/nylas/nylas/packages/nylas-web-elements/src/components/nylas-if-state/nylas-if-state.tsx",
+                            "id": "src/components/nylas-if-state/nylas-if-state.tsx::Transitions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "transition",
+                "reflect": false,
+                "defaultValue": "'none'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "show": {},
+            "classes": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "getStore",
+                "methodName": "onGetStoreChange"
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-if-state',
+        getStoresToProp: 'getStore',
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasIfState.prototype, "render", null);
+//# sourceMappingURL=nylas-if-state.js.map

package/dist/collection/components/nylas-if-state/nylas-if-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-if-state.js","sourceRoot":"","sources":["../../../src/components/nylas-if-state/nylas-if-state.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/nylas-if-state/test/nylas-if-state.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('nylas-if-state', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<nylas-if-state></nylas-if-state>');
+        const element = await page.find('nylas-if-state');
+        expect(element).toHaveClass('hydrated');
+    });
+});
+//# sourceMappingURL=nylas-if-state.e2e.js.map

package/dist/collection/components/nylas-if-state/test/nylas-if-state.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-if-state.e2e.js","sourceRoot":"","sources":["../../../../src/components/nylas-if-state/test/nylas-if-state.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;QAE3D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('nylas-if-state', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<nylas-if-state></nylas-if-state>');\n\n    const element = await page.find('nylas-if-state');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/nylas-if-state/test/nylas-if-state.spec.js

@@ -0,0 +1,12 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NylasIfState } from "../nylas-if-state";
+describe('nylas-if-state', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [NylasIfState],
+            html: `<nylas-if-state></nylas-if-state>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=nylas-if-state.spec.js.map

package/dist/collection/components/nylas-if-state/test/nylas-if-state.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-if-state.spec.js","sourceRoot":"","sources":["../../../../src/components/nylas-if-state/test/nylas-if-state.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,mCAAmC;SAC1C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasIfState } from '../nylas-if-state';\n\ndescribe('nylas-if-state', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [NylasIfState],\n      html: `<nylas-if-state></nylas-if-state>`,\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/nylas-login/nylas-login.css

@@ -0,0 +1,94 @@
+:host {
+  font-family: 'Arial', sans-serif;
+  background: var(--nylas-color-primary-50); /* Closest to #f0f0f0 */
+  color: var(--nylas-color-primary-800); /* Closest to #333 */
+  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); /* Assuming white background */
+  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); /* Closest to #b1b1b1 */
+  background: var(--nylas-color-primary-100); /* Closest to #f1f1f1 */
+  color: var(--nylas-color-primary-600); /* Closest to #5f6368 */
+  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); /* Closest to #e2e2e2 */
+}
+
+.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); /* Closest to #ddd */
+  border-radius: var(--nylas-border-radius);
+  background: var(--nylas-color-primary-100); /* Closest to #f1f1f1 */
+  color: var(--nylas-color-primary-800); /* Closest to #333 */
+}
+
+.login-form button {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-radius: var(--nylas-border-radius);
+  background: var(--nylas-color-primary-500); /* Closest to #007bff */
+  color: var(--nylas-color-primary-50); /* Assuming white text */
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.login-form button:hover {
+  background: var(--nylas-color-primary-600); /* Closest to #0056b3 */
+}