@nylas/web-elements 1.0.0-prealpha1

package/dist/components/nylas-composer.js

@@ -0,0 +1,8 @@
+import { N as NylasComposer$1, d as defineCustomElement$1 } from './nylas-composer2.js';
+
+const NylasComposer = NylasComposer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasComposer, defineCustomElement };
+
+//# sourceMappingURL=nylas-composer.js.map

package/dist/components/nylas-composer.js.map

@@ -0,0 +1 @@
+{"file":"nylas-composer.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nylas-composer2.js

@@ -0,0 +1,186 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debug } from './utils.js';
+import { d as defineCustomElement$3 } from './bold.js';
+import { d as defineCustomElement$2 } from './italic.js';
+import { d as defineCustomElement$1 } from './underline.js';
+
+const nylasComposerCss = ":host{display:grid;color:var(--nylas-color-primary-900)}.editor{position:relative;display:block;max-height:300px;overflow:auto;padding:1rem;border:1px solid var(--nylas-color-primary-300)}.editor blockquote{visibility:hidden;overflow:hidden;position:relative;transition:height 0.3s ease;margin:0}.editor blockquote::before{content:\"...\";visibility:visible;opacity:1;position:absolute;top:0;left:0;background-color:var(--nylas-color-primary-300);width:20px;text-align:center;color:var(--nylas-color-primary-800);vertical-align:middle;display:flex;justify-content:center;align-items:center;align-self:center;cursor:pointer}.editor .collapsed{height:20px}.editor .expanded{visibility:visible;opacity:1;height:auto;margin:0px 0px 0px 0.8ex;border-left:1px solid var(--nylas-color-primary-300);padding-left:1rem}.editor .expanded::before{display:none;}.buttons{display:flex;margin-top:1rem;justify-content:space-between}.buttons sp-button{border-radius:var(--nylas-border-radius);background-color:var(--nylas-color-primary-400);color:var(--nylas-color-primary-900);fill:var(--nylas-color-primary-900)}.buttons sp-button:hover{background-color:var(--nylas-color-primary-500)}.buttons sp-button:disabled{background-color:var(--nylas-color-primary-200);color:var(--nylas-color-primary-600);cursor:not-allowed}.buttons sp-button chevron-icon{display:inline-block}.buttons .close{justify-self:end}.toolbar{position:absolute;display:none;background-color:var(--nylas-color-primary-200);border-radius:var(--nylas-border-radius);z-index:1}.toolbar sp-button{border:0}";
+const NylasComposerStyle0 = nylasComposerCss;
+
+const NylasComposer = proxyCustomElement(class NylasComposer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.close = createEvent(this, "close", 7);
+        this.send = createEvent(this, "send", 7);
+        this.closeComposer = (event) => {
+            this.close.emit(event);
+        };
+        this.sendComposer = (event) => {
+            if (!this.editorEl) {
+                debug('no editor element');
+                return;
+            }
+            const messageBody = this.editorEl.querySelector('.message-body');
+            if (!messageBody) {
+                debug('no message body');
+                return;
+            }
+            if (this.message) {
+                this.send.emit({
+                    message: this.message,
+                    replyBody: messageBody.querySelector('.message-body')?.innerHTML || '',
+                });
+                this.close.emit(event);
+                this.editorEl.innerHTML = '';
+            }
+        };
+        this.message = undefined;
+        this.viewEmailElement = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() {
+        if (this.editorEl) {
+            this.editorEl.innerHTML = '';
+        }
+    }
+    componentWillLoad() { }
+    async componentDidLoad() {
+        if (this.message) {
+            this.watchBody(this.message);
+        }
+        if (!this.editorEl) {
+            debug('[connectedCallback] no editor element');
+            return;
+        }
+        if (!this.toolbarEl) {
+            debug('[connectedCallback] no toolbar element');
+            return;
+        }
+        const editorEl = this.editorEl;
+        const toolbarEl = this.toolbarEl;
+        editorEl.addEventListener('mouseup', _ => {
+            const selection = this.host.shadowRoot?.getSelection();
+            if (!selection) {
+                debug('no selection');
+                return;
+            }
+            const range = selection.getRangeAt(0);
+            const text = selection.toString();
+            if (!text) {
+                toolbarEl.style.display = 'none';
+                return;
+            }
+            const messageBody = editorEl.querySelector('.message-body');
+            if (!messageBody) {
+                debug('no message body');
+                return;
+            }
+            const foundNode = range.commonAncestorContainer;
+            const foundElement = foundNode.parentElement;
+            if (!foundElement) {
+                return;
+            }
+            const messageBodyRect = messageBody.getBoundingClientRect();
+            debug('messageBodyRect', { messageBodyRect });
+            const foundRect = foundElement.getBoundingClientRect();
+            debug('foundRect', { foundRect });
+            const textNode = foundElement.childNodes[0];
+            const textContent = textNode.textContent || '';
+            const textPosition = textContent.indexOf(text);
+            const fontSize = window.getComputedStyle(foundElement).fontSize;
+            const fontSizeNumber = parseInt(fontSize.replace('px', ''), 10);
+            const top = foundRect.top - messageBodyRect.top - toolbarEl.clientHeight;
+            const left = textPosition * (1 / fontSizeNumber) * 100;
+            toolbarEl.style.top = `${top}px`;
+            toolbarEl.style.left = `${left}px`;
+            toolbarEl.style.display = 'block';
+        });
+    }
+    watchBody(newMessage) {
+        if (!this.editorEl) {
+            debug('no editor element');
+            return;
+        }
+        this.editorEl.querySelectorAll('.message-body').forEach(el => el.remove());
+        const messageBody = document.createElement('div');
+        messageBody.classList.add('message-body');
+        const emptyParagraph = document.createElement('p');
+        emptyParagraph.innerHTML = ' ';
+        messageBody.appendChild(emptyParagraph);
+        const br = document.createElement('br');
+        messageBody.appendChild(br);
+        const replyText = document.createElement('div');
+        replyText.classList.add('reply-text');
+        replyText.innerText = `On ${new Date(newMessage.date * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <${newMessage.from
+            ?.map(from => from.name || from.email)
+            .join(', ')}> wrote:`;
+        messageBody.appendChild(replyText);
+        if (newMessage.body) {
+            const replyElement = document.createElement('html');
+            replyElement.innerHTML = newMessage.body;
+            const replyContainer = document.createElement('blockquote');
+            replyContainer.classList.add('collapsed');
+            replyContainer.classList.add('gmail_quote');
+            replyContainer.innerHTML = replyElement.innerHTML;
+            messageBody.appendChild(replyContainer);
+            debug('replyContainer', { replyContainer });
+        }
+        this.editorEl.appendChild(messageBody);
+        this.editorEl.querySelectorAll('blockquote.collapsed').forEach(blockquote => {
+            blockquote.addEventListener('click', function (event) {
+                event.preventDefault();
+                const el = event.target;
+                el.classList.remove('collapsed');
+                el.classList.add('expanded');
+            }, { once: true });
+        });
+        this.editorEl.focus();
+    }
+    render() {
+        return (h(Host, { key: 'a1e6e146356d27b4612c1381a051e421468016f9' }, h("sp-theme", { key: 'a55f43e956e35a41e0854b7653f3eaa0472e4603', scale: "medium", color: "dark" }, h("div", { key: 'dca393d6d4cae7d64630c2e684fa403638135aab', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: 'e77b4c9ea8b843cb15ebe92b49120bcf7b6a7ce4', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '0b825b12e643a37c4e746eec4fc51608f576a58b', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '95051b6e9b07e9792e180e09a0ca74c834a6f6c8', slot: "icon" }, h("bold-icon", { key: '6f33cd1e9525984d8c9b001f2b3a114bf08ec9a5' })), h("div", { key: '250323dfd86467b528903b7cdbfc704efffcc789', slot: "label" }, "Bold")), h("sp-button", { key: 'af4d4302617dd0ee1ad3d50161e4a019e4fbc1e7', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'aa2e4a6c9be743d228b5ebc7a8c59d59cbed5b2c', slot: "icon" }, h("underline-icon", { key: '6833ead83e35cd0b07c0c88b81be3446d3efd824' })), h("div", { key: '1c18f62267adfa70e176efed64f745dd202c0230', slot: "label" }, "Underline")), h("sp-button", { key: '08139372218452b7b83aa9580cb9a797106b189f', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'bd439d444ae836a0c612e57f92b7c0e303ff732a', slot: "icon" }, h("italic-icon", { key: 'c25d86181198e1f1b176caad9ccfc0ecd5653c15' })), h("div", { key: 'c6231490b7c86113f8dbcfc8386ec5581f6b2a3a', slot: "label" }, "Italic")))), h("div", { key: '95921362af8283ee5d04cf17faf4c8b5725ba7bd', class: 'buttons' }, h("sp-button", { key: '6c21a44e39720b78fddda544d3b3e3dd2597d9c3', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: '2d0354668c676f6e723be1f0e9614cff6120d361', onClick: this.closeComposer, class: "close" }, "Close")))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "message": ["watchBody"]
+    }; }
+    static get style() { return NylasComposerStyle0; }
+}, [1, "nylas-composer", {
+        "message": [16],
+        "viewEmailElement": [16]
+    }, undefined, {
+        "message": ["watchBody"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-composer", "bold-icon", "italic-icon", "underline-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-composer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasComposer);
+            }
+            break;
+        case "bold-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "italic-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "underline-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasComposer as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-composer2.js.map

package/dist/components/nylas-composer2.js.map

@@ -0,0 +1 @@
+{"file":"nylas-composer2.js","mappings":"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","names":[],"sources":["src/components/mailbox/nylas-composer/nylas-composer.scss?tag=nylas-composer&encapsulation=shadow","src/components/mailbox/nylas-composer/nylas-composer.tsx"],"sourcesContent":[":host {\n  display: grid;\n  color: var(--nylas-color-primary-900);\n}\n\n.editor {\n  position: relative;\n  display: block;\n  max-height: 300px;\n  overflow: auto;\n\n  padding: 1rem;\n\n  border: 1px solid var(--nylas-color-primary-300);\n\n  blockquote {\n    visibility: hidden;\n    overflow: hidden;\n    position: relative;\n    transition: height 0.3s ease;\n    margin: 0;\n  }\n\n  blockquote::before {\n    content: '...';\n    visibility: visible;\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: var(--nylas-color-primary-300);\n    width: 20px;\n    text-align: center;\n    color: var(--nylas-color-primary-800);\n    vertical-align: middle;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-self: center;\n    cursor: pointer;\n  }\n\n  .collapsed {\n    height: 20px;\n  }\n\n  .expanded {\n    visibility: visible;\n    opacity: 1;\n    height: auto; /* Height to fit the content */\n    margin: 0px 0px 0px 0.8ex;\n    border-left: 1px solid var(--nylas-color-primary-300);\n    padding-left: 1rem;\n  }\n\n  .expanded::before {\n    display: none; /* Hide the '...' when content is expanded */\n  }\n}\n\n.buttons {\n  display: flex;\n\n  margin-top: 1rem;\n\n  justify-content: space-between;\n\n  sp-button {\n    border-radius: var(--nylas-border-radius);\n    background-color: var(--nylas-color-primary-400);\n    color: var(--nylas-color-primary-900);\n    fill: var(--nylas-color-primary-900);\n\n    &:hover {\n      background-color: var(--nylas-color-primary-500);\n    }\n\n    &:disabled {\n      background-color: var(--nylas-color-primary-200);\n      color: var(--nylas-color-primary-600);\n      cursor: not-allowed;\n    }\n\n    & chevron-icon {\n      display: inline-block;\n    }\n  }\n\n  .close {\n    justify-self: end;\n  }\n}\n\n.toolbar {\n  position: absolute;\n  display: none;\n  background-color: var(--nylas-color-primary-200);\n  border-radius: var(--nylas-border-radius);\n  z-index: 1;\n\n  sp-button {\n    border: 0;\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Message } from '@nylas/core';\nimport { Component, Event, EventEmitter, Element, Prop, Watch, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'nylas-composer',\n  styleUrl: 'nylas-composer.scss',\n  shadow: true,\n})\nexport class NylasComposer {\n  /**\n   * The host element\n   */\n  @Element() readonly host!: HTMLElement;\n\n  /**\n   * The message to reply to or forward\n   */\n  @Prop() readonly message?: Message;\n\n  /**\n   * The view email element\n   */\n  @Prop() readonly viewEmailElement?: HTMLNylasViewEmailElement | null;\n\n  /**\n   * Fired when the composer is closed\n   */\n  @Event() readonly close!: EventEmitter<MouseEvent>;\n\n  /**\n   * Fired when the send button is clicked\n   */\n  @Event() readonly send!: EventEmitter<{\n    message: Message;\n    replyBody: string;\n  }>;\n\n  /**\n   * The editor element\n   */\n  private editorEl?: HTMLDivElement;\n\n  /**\n   * The toolbar element\n   */\n  private toolbarEl?: HTMLDivElement;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this.editorEl) {\n      this.editorEl.innerHTML = '';\n    }\n  }\n\n  componentWillLoad() {}\n\n  async componentDidLoad() {\n    if (this.message) {\n      this.watchBody(this.message);\n    }\n\n    if (!this.editorEl) {\n      debug('[connectedCallback] no editor element');\n      return;\n    }\n\n    if (!this.toolbarEl) {\n      debug('[connectedCallback] no toolbar element');\n      return;\n    }\n\n    const editorEl = this.editorEl;\n    const toolbarEl = this.toolbarEl;\n\n    // On highlight, show the toolbar\n    editorEl.addEventListener('mouseup', _ => {\n      interface ShadowRootWithSelection extends ShadowRoot {\n        getSelection(): Selection | null;\n      }\n\n      const selection: Selection | null = (this.host.shadowRoot as ShadowRootWithSelection)?.getSelection();\n      if (!selection) {\n        debug('no selection');\n        return;\n      }\n\n      // Get range\n      const range = selection.getRangeAt(0);\n\n      // Get text selection\n      const text = selection.toString();\n      if (!text) {\n        toolbarEl.style.display = 'none';\n        return;\n      }\n\n      // Find .message-body in the editor\n      const messageBody = editorEl.querySelector('.message-body');\n      if (!messageBody) {\n        debug('no message body');\n        return;\n      }\n\n      // Get commonAncestorContainer\n      const foundNode = range.commonAncestorContainer;\n\n      // Get rect\n      const foundElement = foundNode.parentElement;\n\n      // If we didn't find the text, then don't show the toolbar\n      if (!foundElement) {\n        return;\n      }\n\n      // Get the bounding rect of the message body\n      const messageBodyRect = messageBody.getBoundingClientRect();\n      debug('messageBodyRect', { messageBodyRect });\n\n      const foundRect = foundElement.getBoundingClientRect();\n      debug('foundRect', { foundRect });\n\n      // Find the text position within the found node\n      // without using document.createRange()\n\n      // Get the text node\n      const textNode = foundElement.childNodes[0];\n\n      // Get the text content\n      const textContent = textNode.textContent || '';\n\n      // Get the text position\n      const textPosition = textContent.indexOf(text);\n\n      // Calcualte the font width\n      const fontSize = window.getComputedStyle(foundElement).fontSize;\n      const fontSizeNumber = parseInt(fontSize.replace('px', ''), 10);\n\n      // Top\n      const top = foundRect.top - messageBodyRect.top - toolbarEl.clientHeight;\n      const left = textPosition * (1 / fontSizeNumber) * 100;\n\n      // Position the toolbar\n      toolbarEl.style.top = `${top}px`;\n      toolbarEl.style.left = `${left}px`;\n      toolbarEl.style.display = 'block';\n    });\n  }\n\n  @Watch('message')\n  watchBody(newMessage: Message) {\n    if (!this.editorEl) {\n      debug('no editor element');\n      return;\n    }\n\n    // Find .message-body elements and remove them\n    this.editorEl.querySelectorAll('.message-body').forEach(el => el.remove());\n\n    // Create a container for the body of the reply\n    const messageBody = document.createElement('div');\n    messageBody.classList.add('message-body');\n\n    // Add an empty paragraph to the reply body\n    const emptyParagraph = document.createElement('p');\n    emptyParagraph.innerHTML = '&nbsp;';\n    messageBody.appendChild(emptyParagraph);\n\n    // Also add a break to separate the reply from the rest of the email\n    const br = document.createElement('br');\n    messageBody.appendChild(br);\n\n    // Append a reply header\n    const replyText = document.createElement('div');\n    replyText.classList.add('reply-text');\n    replyText.innerText = `On ${new Date(newMessage.date * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <${newMessage.from\n      ?.map(from => from.name || from.email)\n      .join(', ')}> wrote:`;\n    messageBody.appendChild(replyText);\n\n    // If we have a reply body, separate the contents with a horizontal rule\n    if (newMessage.body) {\n      // For the reply HTML, we want to wrap the contents in a custom element\n      // with a shadow root. This will allow us to style the contents of the\n      // reply without affecting the rest of the page.\n\n      // First convert the HTML string to a DOM element\n      const replyElement = document.createElement('html');\n      replyElement.innerHTML = newMessage.body;\n\n      const replyContainer = document.createElement('blockquote');\n      replyContainer.classList.add('collapsed');\n      replyContainer.classList.add('gmail_quote');\n\n      // Now add the reply element to the container\n      replyContainer.innerHTML = replyElement.innerHTML;\n\n      messageBody.appendChild(replyContainer);\n\n      debug('replyContainer', { replyContainer });\n    }\n\n    // Add the message body to the editor\n    this.editorEl.appendChild(messageBody);\n\n    this.editorEl.querySelectorAll('blockquote.collapsed').forEach(blockquote => {\n      blockquote.addEventListener(\n        'click',\n        function (event) {\n          event.preventDefault();\n          const el = event.target as HTMLElement;\n          el.classList.remove('collapsed');\n          el.classList.add('expanded');\n        },\n        { once: true },\n      );\n    });\n\n    // Focus the editor\n    this.editorEl.focus();\n  }\n\n  private closeComposer = (event: MouseEvent) => {\n    this.close.emit(event);\n  };\n\n  private sendComposer = (event: MouseEvent) => {\n    if (!this.editorEl) {\n      debug('no editor element');\n      return;\n    }\n\n    const messageBody = this.editorEl.querySelector('.message-body');\n    if (!messageBody) {\n      debug('no message body');\n      return;\n    }\n\n    // Send the message\n    if (this.message) {\n      this.send.emit({\n        message: this.message,\n        replyBody: messageBody.querySelector('.message-body')?.innerHTML || '',\n      });\n\n      // Close the composer\n      this.close.emit(event);\n\n      // Clear the editor\n      this.editorEl.innerHTML = '';\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <div class=\"editor\" contentEditable={true} ref={r => (this.editorEl = r)}>\n            <div class=\"toolbar\" ref={r => (this.toolbarEl = r)} contentEditable={false}>\n              <sp-button quiet onClick={() => document.execCommand('bold')}>\n                <div slot=\"icon\">\n                  <bold-icon></bold-icon>\n                </div>\n                <div slot=\"label\">Bold</div>\n              </sp-button>\n              <sp-button quiet onClick={() => document.execCommand('underline')}>\n                <div slot=\"icon\">\n                  <underline-icon></underline-icon>\n                </div>\n                <div slot=\"label\">Underline</div>\n              </sp-button>\n              <sp-button quiet onClick={() => document.execCommand('italic')}>\n                <div slot=\"icon\">\n                  <italic-icon></italic-icon>\n                </div>\n                <div slot=\"label\">Italic</div>\n              </sp-button>\n            </div>\n          </div>\n          <div class={'buttons'}>\n            <sp-button onClick={this.sendComposer} class=\"send\">\n              Send\n            </sp-button>\n            <sp-button onClick={this.closeComposer} class=\"close\">\n              Close\n            </sp-button>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-date-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NylasDatePicker extends Components.NylasDatePicker, HTMLElement {}
+export const NylasDatePicker: {
+    prototype: NylasDatePicker;
+    new (): NylasDatePicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nylas-date-picker.js

@@ -0,0 +1,8 @@
+import { N as NylasDatePicker$1, d as defineCustomElement$1 } from './nylas-date-picker2.js';
+
+const NylasDatePicker = NylasDatePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasDatePicker, defineCustomElement };
+
+//# sourceMappingURL=nylas-date-picker.js.map

package/dist/components/nylas-date-picker.js.map

@@ -0,0 +1 @@
+{"file":"nylas-date-picker.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nylas-date-picker2.js

@@ -0,0 +1,150 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { g as getLastDayOfMonth, a as getFirstDayOfMonth, i as isSameDay, b as isSameMonth } from './utils.js';
+import { d as defineCustomElement$1 } from './chevron.js';
+import { t as timeInterval, d as durationMinute, a as durationDay } from './duration.js';
+
+const timeDay = timeInterval(
+  date => date.setHours(0, 0, 0, 0),
+  (date, step) => date.setDate(date.getDate() + step),
+  (start, end) => (end - start - (end.getTimezoneOffset() - start.getTimezoneOffset()) * durationMinute) / durationDay,
+  date => date.getDate() - 1
+);
+
+timeInterval((date) => {
+  date.setUTCHours(0, 0, 0, 0);
+}, (date, step) => {
+  date.setUTCDate(date.getUTCDate() + step);
+}, (start, end) => {
+  return (end - start) / durationDay;
+}, (date) => {
+  return date.getUTCDate() - 1;
+});
+
+timeInterval((date) => {
+  date.setUTCHours(0, 0, 0, 0);
+}, (date, step) => {
+  date.setUTCDate(date.getUTCDate() + step);
+}, (start, end) => {
+  return (end - start) / durationDay;
+}, (date) => {
+  return Math.floor(date / durationDay);
+});
+
+const nylasDatePickerCss = ":host{display:block}.header{margin:0 0.5rem;margin-bottom:1rem}.header h2{font-size:1.3rem;font-weight:400;line-height:1rem;margin-bottom:0.625rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:1rem}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3rem;min-height:3rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:1rem;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:800}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:0.75rem;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px}.dates .date.day-skeleton{width:3rem;height:3rem;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
+const NylasDatePickerStyle0 = nylasDatePickerCss;
+
+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 NylasDatePicker = proxyCustomElement(class NylasDatePicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dateSelected = createEvent(this, "dateSelected", 7);
+        this.monthChanged = createEvent(this, "monthChanged", 7);
+        this.selectableDates = undefined;
+        this.selectedDate = undefined;
+        this.loadingState = undefined;
+        this.month = this.selectedDate || new Date();
+        this.dates = this.getDates();
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    componentWillLoad() { }
+    getDates() {
+        const lastDayOfMonth = getLastDayOfMonth(this.month);
+        const firstDayOfMonth = getFirstDayOfMonth(this.month);
+        return timeDay.range(timeDay.offset(firstDayOfMonth, -firstDayOfMonth.getDay()), timeDay.offset(lastDayOfMonth, 7 - lastDayOfMonth.getDay()));
+    }
+    selectDate(date) {
+        this.dateSelected.emit(date);
+    }
+    changeMonth(change) {
+        this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);
+        this.dates = this.getDates();
+        this.monthChanged.emit(this.month);
+        this.selectDate();
+    }
+    isSelected(date, selectedDate, selectableDates) {
+        return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;
+    }
+    render() {
+        return (h(Host, { key: '5cab50ccbf616d67120903145df37a1d7a67286d', part: "ndp" }, h("div", { key: 'afefcaac8f8236afb3b01b907a5070eb554d81ff', class: 'header flex-row' }, h("h2", { key: '194de73b58850398d4619f2a38dc2d50e9a8ec81', part: 'ndp__month-header' }, h("strong", { key: '17187c92e9acb9942493e590d5004dfb4caafbc1' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: '1aa4c7b8ee24944a90b9e1e6166cea1ddd9a43d9', class: 'pagination' }, h("button", { key: '0949a1855c5971bba761ff088a065c548f742592', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: 'a89b6c735a1c1f1470b7fa3c69033f32ef3f90ae' })), h("button", { key: '11fb5bb84e9cebbb7087f9d9b0e8a31f30406ffb', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, part: "ndp__month-button" }, h("chevron-icon", { key: '42ecd273a5d33997a37acbb404c915dedf3af86f' })))), h("div", { key: '084bdae3a4d72cc9b241e7183b8fa478a3d3b72b', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
+            return (h("div", { class: 'day', part: "ndp__day" }, day));
+        }), this.dates.map((date, i) => {
+            if (this.loadingState && this.loadingState?.api === 'availability') {
+                return (h("button", { disabled: true, class: {
+                        'date day-skeleton': true,
+                        'current-month': isSameMonth(date, this.month),
+                    }, style: { animationDelay: `${i * 20}ms` }, part: 'ndp__date' }, date.getDate()));
+            }
+            return (h("button", { class: {
+                    'date': true,
+                    'selected': !!(this.selectedDate && isSameDay(date, this.selectedDate) && this.selectableDates && this.selectableDates?.length > 0),
+                    'current-day': isSameDay(date, new Date()),
+                    'current-month': isSameMonth(date, this.month),
+                }, "aria-lang": date.toLocaleDateString(undefined, { dateStyle: 'full' }), disabled: this.selectableDates && this.selectableDates?.find(d => isSameDay(d, date)) === undefined, onClick: () => this.selectDate(date), part: `ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}` }, date.getDate()));
+        }))));
+    }
+    static get style() { return NylasDatePickerStyle0; }
+}, [1, "nylas-date-picker", {
+        "selectableDates": [16],
+        "selectedDate": [16],
+        "loadingState": [8, "loading-state"],
+        "month": [32],
+        "dates": [32]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-date-picker',
+        stateToProps: new Map([
+            ['scheduler.selectableDates', 'selectableDates'],
+            ['scheduler.selectedDate', 'selectedDate'],
+            ['scheduler.loadingState', 'loadingState'],
+        ]),
+        eventToProps: {
+            dateSelected: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.selectDate(event.detail);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasDatePicker.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-date-picker", "chevron-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-date-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasDatePicker);
+            }
+            break;
+        case "chevron-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasDatePicker as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-date-picker2.js.map

package/dist/components/nylas-date-picker2.js.map

@@ -0,0 +1 @@
+{"file":"nylas-date-picker2.js","mappings":"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","names":[],"sources":["../../node_modules/.pnpm/d3-time@3.1.0/node_modules/d3-time/src/day.js","src/components/scheduler/nylas-date-picker/nylas-date-picker.scss?tag=nylas-date-picker&encapsulation=shadow","src/components/scheduler/nylas-date-picker/nylas-date-picker.tsx"],"sourcesContent":["import {timeInterval} from \"./interval.js\";\nimport {durationDay, durationMinute} from \"./duration.js\";\n\nexport const timeDay = timeInterval(\n  date => date.setHours(0, 0, 0, 0),\n  (date, step) => date.setDate(date.getDate() + step),\n  (start, end) => (end - start - (end.getTimezoneOffset() - start.getTimezoneOffset()) * durationMinute) / durationDay,\n  date => date.getDate() - 1\n);\n\nexport const timeDays = timeDay.range;\n\nexport const utcDay = timeInterval((date) => {\n  date.setUTCHours(0, 0, 0, 0);\n}, (date, step) => {\n  date.setUTCDate(date.getUTCDate() + step);\n}, (start, end) => {\n  return (end - start) / durationDay;\n}, (date) => {\n  return date.getUTCDate() - 1;\n});\n\nexport const utcDays = utcDay.range;\n\nexport const unixDay = timeInterval((date) => {\n  date.setUTCHours(0, 0, 0, 0);\n}, (date, step) => {\n  date.setUTCDate(date.getUTCDate() + step);\n}, (start, end) => {\n  return (end - start) / durationDay;\n}, (date) => {\n  return Math.floor(date / durationDay);\n});\n\nexport const unixDays = unixDay.range;\n",":host {\n  display: block;\n}\n\n.header {\n  margin: 0 0.5rem;\n  margin-bottom: 1rem;\n\n  h2 {\n    font-size: 1.3rem;\n    font-weight: 400;\n    line-height: 1rem;\n    margin-bottom: 0.625rem;\n    color: var(--nylas-base-800);\n\n    strong {\n      font-weight: 600;\n    }\n  }\n}\n\n@keyframes pulsate {\n  0% {\n    background-color: var(--nylas-base-50);\n  }\n  50% {\n    background-color: var(--nylas-base-100);\n  }\n  100% {\n    background-color: var(--nylas-base-50);\n  }\n}\n\n.dates {\n  display: grid;\n  justify-items: center;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 0.5rem;\n  margin-bottom: 1rem;\n\n  .date {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    height: 3vh;\n    width: 3vh;\n    min-width: 3rem;\n    min-height: 3rem;\n    cursor: pointer;\n    border-radius: var(--nylas-border-radius-2x);\n    font-size: 1rem;\n    font-weight: 600;\n    font-family: inherit;\n\n    color: var(--nylas-base-text);\n    background-color: var(--nylas-base-100);\n    cursor: pointer;\n\n    &:hover:not(:disabled) {\n      box-shadow: 0 0 0 2px var(--nylas-base-500) inset;\n    }\n\n    border: none;\n\n    &.date.current-month {\n      color: var(--nylas-base-800);\n    }\n\n    &.date.selected {\n      background-color: var(--nylas-primary);\n      color: var(--nylas-base-0);\n      font-weight: 800;\n    }\n\n    &.date.day-skeleton {\n      color: var(--nylas-base-300);\n    }\n\n    &:disabled {\n      color: var(--nylas-base-300);\n      background-color: transparent;\n      font-weight: 400;\n      cursor: not-allowed;\n    }\n  }\n  .day {\n    font-size: 0.75rem;\n    color: var(--nylas-base-800);\n    font-weight: 600;\n    letter-spacing: 0.5px;\n  }\n\n  .date.day-skeleton {\n    width: 3rem;\n    height: 3rem;\n    border-radius: var(--nylas-border-radius-2x);\n    animation: pulsate 1.5s infinite ease-in-out;\n    background-color: var(--nylas-base-50);\n  }\n\n  .date.current-day::after {\n    content: '';\n    position: absolute;\n    bottom: 6px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: var(--nylas-base-500);\n  }\n  .date.current-day.selected::after {\n    background-color: var(--nylas-base-100);\n  }\n}\n\n.pagination {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  min-width: 92px;\n  .chevron-right {\n    transform: rotate(180deg);\n  }\n  .button {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    height: 3vh;\n    width: 3vh;\n    min-width: 3em;\n    min-height: 3em;\n    cursor: pointer;\n    border-radius: var(--nylas-border-radius-2x);\n\n    background-color: transparent;\n    color: var(--nylas-base-800);\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--nylas-base-50);\n    }\n\n    border: none;\n\n    &:active {\n      background-color: var(--nylas-base-100);\n    }\n\n    &:disabled {\n      background-color: transparent;\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n}\n\n.flex-row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--nylas-base-500);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { timeDay } from 'd3-time';\nimport { LoadingState, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\n\n/**\n * The date picker component.\n * @part ndp - The date picker host.\n * @part ndp__month-header - The month header.\n * @part ndp__month-button - The month button.\n * @part ndp__day - The day.\n * @part ndp__date - The date.\n * @part ndp__date--selected - The selected date.\n * @part ndp__date--current-day - The current day.\n * @part ndp__date--current-month - The dates in the current month.\n */\n@Component({\n  tag: 'nylas-date-picker',\n  styleUrl: 'nylas-date-picker.scss',\n  shadow: true,\n})\nexport class NylasDatePicker {\n  /**\n   * The dates that are selectable.\n   */\n  @Prop() selectableDates?: Date[];\n\n  /**\n   * The selected date.\n   */\n  @Prop() selectedDate?: Date;\n\n  /**\n   * The loading state.\n   */\n  @Prop() readonly loadingState?: LoadingState;\n\n  /**\n   * The month to display.\n   */\n  @State() month: Date = this.selectedDate || new Date();\n\n  /**\n   * The dates to render.\n   */\n  @State() dates: Date[] = this.getDates();\n\n  /**\n   * This event is fired when a date is selected.\n   */\n  @Event() dateSelected!: EventEmitter<Date>;\n\n  /**\n   * This event is fired when the month is changed.\n   */\n  @Event() monthChanged!: EventEmitter<Date>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Get the dates to render, including the days from the previous and next months.\n   * @returns The dates to render.\n   */\n  private getDates() {\n    const lastDayOfMonth = getLastDayOfMonth(this.month);\n    const firstDayOfMonth = getFirstDayOfMonth(this.month);\n\n    return timeDay.range(timeDay.offset(firstDayOfMonth, -firstDayOfMonth.getDay()), timeDay.offset(lastDayOfMonth, 7 - lastDayOfMonth.getDay()));\n  }\n\n  /**\n   * Select a date.\n   * @param date The date to select.\n   */\n  private selectDate(date?: Date) {\n    this.dateSelected.emit(date);\n  }\n\n  /**\n   * Change the month.\n   * @param change The change in months.\n   */\n  private changeMonth(change: number) {\n    this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);\n    this.dates = this.getDates();\n    this.monthChanged.emit(this.month);\n    // unset selected date when changing month\n    this.selectDate();\n  }\n\n  private isSelected(date: Date | undefined, selectedDate: Date | undefined, selectableDates: Date[] | undefined) {\n    return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;\n  }\n\n  @RegisterComponent<NylasDatePicker, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-date-picker',\n    stateToProps: new Map([\n      ['scheduler.selectableDates', 'selectableDates'],\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.loadingState', 'loadingState'],\n    ]),\n    eventToProps: {\n      dateSelected: async (event: CustomEvent<Date>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectDate(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ndp\">\n        <div class={'header flex-row'}>\n          <h2 part={'ndp__month-header'}>\n            <strong>{this.month.toLocaleDateString(undefined, { month: 'long' })}</strong>\n            &nbsp;\n            {this.month.toLocaleDateString(undefined, { year: 'numeric' })}\n          </h2>\n          <div class={'pagination'}>\n            <button onClick={() => this.changeMonth(-1)} class={{ 'chevron-left': true, 'button': true }} disabled={this.month <= new Date()} part=\"ndp__month-button\">\n              <chevron-icon />\n            </button>\n            <button onClick={() => this.changeMonth(1)} class={{ 'chevron-right': true, 'button': true }} part=\"ndp__month-button\">\n              <chevron-icon />\n            </button>\n          </div>\n        </div>\n\n        <div class={'dates'}>\n          {['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {\n            return (\n              <div class={'day'} part=\"ndp__day\">\n                {day}\n              </div>\n            );\n          })}\n          {this.dates.map((date, i) => {\n            if (this.loadingState && this.loadingState?.api === 'availability') {\n              return (\n                <button\n                  disabled\n                  class={{\n                    'date day-skeleton': true,\n                    'current-month': isSameMonth(date, this.month),\n                  }}\n                  style={{ animationDelay: `${i * 20}ms` }}\n                  part={'ndp__date'}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            }\n            return (\n              <button\n                class={{\n                  'date': true,\n                  'selected': !!(this.selectedDate && isSameDay(date, this.selectedDate) && this.selectableDates && this.selectableDates?.length > 0),\n                  'current-day': isSameDay(date, new Date()),\n                  'current-month': isSameMonth(date, this.month),\n                }}\n                aria-lang={date.toLocaleDateString(undefined, { dateStyle: 'full' })}\n                disabled={this.selectableDates && this.selectableDates?.find(d => isSameDay(d, date)) === undefined}\n                onClick={() => this.selectDate(date)}\n                part={`ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}`}\n              >\n                {date.getDate()}\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-if-state.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NylasIfState extends Components.NylasIfState, HTMLElement {}
+export const NylasIfState: {
+    prototype: NylasIfState;
+    new (): NylasIfState;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,153 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { d as debug } from './utils.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 = (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 NylasIfState$1 = proxyCustomElement(class NylasIfState extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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"]
+    }; }
+    static get style() { return NylasIfStateStyle0; }
+}, [1, "nylas-if-state", {
+        "state": [1],
+        "isStateSet": [4, "is-state-set"],
+        "isBoolean": [4, "is-boolean"],
+        "getStore": [16],
+        "transition": [1],
+        "show": [32],
+        "classes": [32]
+    }, undefined, {
+        "getStore": ["onGetStoreChange"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-if-state',
+        getStoresToProp: 'getStore',
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasIfState$1.prototype, "render", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-if-state"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-if-state":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasIfState$1);
+            }
+            break;
+    } });
+}
+
+const NylasIfState = NylasIfState$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasIfState, defineCustomElement };
+
+//# sourceMappingURL=nylas-if-state.js.map