@nylas/web-elements 1.0.0-prealpha1

package/dist/components/nylas-threads-search.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { d as debug } from './utils.js';
+
+const nylasThreadsSearchCss = ":host{display:block}sp-search{width:100%;border:0}";
+const NylasThreadsSearchStyle0 = nylasThreadsSearchCss;
+
+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 NylasThreadsSearch$1 = proxyCustomElement(class NylasThreadsSearch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.search = createEvent(this, "search", 7);
+        this.onSearch = async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const target = event.target;
+            const value = target.value;
+            if (value === this.internalQuery) {
+                return;
+            }
+            this.internalQuery = value;
+            this.search.emit(this.internalQuery);
+        };
+        this.query = '';
+        this.internalQuery = '';
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-threads-search] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-threads-search] Component did load`);
+    }
+    onQueryChange() {
+        this.internalQuery = this.query;
+    }
+    render() {
+        return (h(Host, { key: '8cec946ccaeb5fe2bf8f1282eaf5bb1e471fdc1d' }, h("sp-theme", { key: '5795406abf802029c3722835aced9fd8bc562ef1', scale: "medium", color: "dark" }, h("sp-search", { key: 'e8c140f3a65a05106156af09a7bdf1c35f709ed1', quiet: true, onSubmit: this.onSearch, onBlur: this.onSearch, value: this.internalQuery }))));
+    }
+    static get watchers() { return {
+        "query": ["onQueryChange"]
+    }; }
+    static get style() { return NylasThreadsSearchStyle0; }
+}, [1, "nylas-threads-search", {
+        "query": [1],
+        "internalQuery": [32]
+    }, undefined, {
+        "query": ["onQueryChange"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-pagination',
+        stateToProps: new Map([['mailbox.searchQuery', 'query']]),
+        eventToProps: {
+            search: async (_event, nylasConnector) => {
+                await nylasConnector.threads.getThreads({
+                    search_query_native: _event.detail || undefined,
+                    page_token: undefined,
+                });
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasThreadsSearch$1.prototype, "render", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-threads-search"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-threads-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasThreadsSearch$1);
+            }
+            break;
+    } });
+}
+
+const NylasThreadsSearch = NylasThreadsSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasThreadsSearch, defineCustomElement };
+
+//# sourceMappingURL=nylas-threads-search.js.map

package/dist/components/nylas-threads-search.js.map

@@ -0,0 +1 @@
+{"file":"nylas-threads-search.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,oDAAoD,CAAC;AACnF,iCAAe,qBAAqB;;;;;;;;;;;;;;;;MCUvBA,oBAAkB;;;;;;QAsCrB,aAAQ,GAAG,OAAO,KAAY;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAE3B,IAAI,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE;gBAChC,OAAO;aACR;YAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SACtC,CAAC;qBA/C+B,EAAE;6BAUF,EAAE;;IAEnC,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,4CAA4C,CAAC,CAAC;KACrD;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,2CAA2C,CAAC,CAAC;KACpD;IAGD,aAAa;QACX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;KACjC;IAmCD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,iEAAU,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,IACnC,kEAAW,KAAK,QAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,GAAc,CAC/F,CACN,EACP;KACH;;;;;;;;;;;AARD;IAbC,iBAAiB,CAAwF;QACxG,IAAI,EAAE,kBAAkB;QACxB,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC,CAAC;QACzD,YAAY,EAAE;YACZ,MAAM,EAAE,OAAO,MAA2B,EAAE,cAAqC;gBAC/E,MAAM,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC;oBACtC,mBAAmB,EAAE,MAAM,CAAC,MAAM,IAAI,SAAS;oBAC/C,UAAU,EAAE,SAAS;iBACtB,CAAC,CAAC;aACJ;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;kDASD;;;;;;;;;;;;;;;;;;;;","names":["NylasThreadsSearch"],"sources":["src/components/mailbox/nylas-threads-search/nylas-threads-search.scss?tag=nylas-threads-search&encapsulation=shadow","src/components/mailbox/nylas-threads-search/nylas-threads-search.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsp-search {\n  width: 100%;\n  border: 0;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\n\n@Component({\n  tag: 'nylas-threads-search',\n  styleUrl: 'nylas-threads-search.scss',\n  shadow: true,\n})\nexport class NylasThreadsSearch {\n  /**\n   * The query to search for threads\n   */\n  @Prop() readonly query: string = '';\n\n  /**\n   * Event emitted when the query changes\n   */\n  @Event() readonly search!: EventEmitter<string>;\n\n  /**\n   * A copy of the query that is used internally, we can mutate this.\n   */\n  @State() internalQuery: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-threads-search] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-threads-search] Component did load`);\n  }\n\n  @Watch('query')\n  onQueryChange() {\n    this.internalQuery = this.query;\n  }\n\n  /**\n   * On search event\n   * @param event On blur event\n   * @returns void\n   */\n  private onSearch = async (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const target = event.target as HTMLInputElement;\n    const value = target.value;\n\n    if (value === this.internalQuery) {\n      return;\n    }\n\n    this.internalQuery = value;\n    this.search.emit(this.internalQuery);\n  };\n\n  @RegisterComponent<NylasThreadsSearch, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n    name: 'nylas-pagination',\n    stateToProps: new Map([['mailbox.searchQuery', 'query']]),\n    eventToProps: {\n      search: async (_event: CustomEvent<string>, nylasConnector: NylasMailboxConnector) => {\n        await nylasConnector.threads.getThreads({\n          search_query_native: _event.detail || undefined,\n          page_token: undefined,\n        });\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <sp-theme scale=\"medium\" color=\"dark\">\n          <sp-search quiet onSubmit={this.onSearch} onBlur={this.onSearch} value={this.internalQuery}></sp-search>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

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

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

@@ -0,0 +1,174 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { d as debug, i as isSameDay } from './utils.js';
+
+const nylasTimeslotPickerCss = ":host{display:block}.time-picker-wrapper{display:flex;flex-direction:column;height:447px}.time-slots{position:relative;display:flex;flex-direction:column;gap:0.5rem;align-items:center;overflow-y:scroll;padding:0.5rem 1.5rem;flex:1}.time{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4px 12px;gap:0.5rem;font-size:16px;font-weight:500;font-family:inherit;width:100%;height:48px;color:var(--nylas-base-800);background:var(--nylas-base-0);border:none;outline:1.5px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);flex:none;order:4;align-self:stretch;flex-grow:0;cursor:pointer}.time:hover{color:var(--nylas-primary);outline-color:var(--nylas-primary)}.time.selected{font-weight:600;color:var(--nylas-primary);outline:2px solid var(--nylas-primary);border-color:transparent;box-shadow:0 0 0 2px var(--nylas-primary)}.empty{text-align:center;padding:0 1.5rem;color:var(--nylas-base-600);font-size:14px;height:515px;display:flex;align-items:center;justify-content:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.loading{padding:0 1.5rem}.loading .time-slot-skeleton{width:100%;height:4rem;background-color:var(--nylas-base-50);margin-bottom:0.5rem;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out}.footer{width:100%;padding:10px;box-sizing:border-box;border-top:1px solid var(--nylas-base-100)}.footer sp-button{padding:14px;color:var(--nylas-base-100);border-radius:var(--nylas-border-radius-2x);width:100%;height:48px;font-weight:600;background-color:var(--nylas-primary);border:none}.footer sp-button:hover{background-color:var(--nylas-base-600)}.footer sp-button:active{background-color:var(--nylas-base-800)}";
+const NylasTimeslotPickerStyle0 = nylasTimeslotPickerCss;
+
+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 NylasTimeslotPicker = proxyCustomElement(class NylasTimeslotPicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.timeslotSelected = createEvent(this, "timeslotSelected", 7);
+        this.timeslotConfirmed = createEvent(this, "timeslotConfirmed", 7);
+        this.handleConfirmedTimeslot = async (event, timeslot) => {
+            event.preventDefault();
+            debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);
+            this.timeslotConfirmed.emit(timeslot);
+        };
+        this.handleMouseEnter = (index) => {
+            this.hoveredTimeslotIndex = index;
+        };
+        this.handleMouseLeave = () => {
+            this.hoveredTimeslotIndex = -1;
+        };
+        this.selectedDate = new Date();
+        this.availability = undefined;
+        this.selectedTimeslot = undefined;
+        this.loadingState = undefined;
+        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.times = [];
+        this.hoveredTimeslotIndex = undefined;
+        this.selectedTimeslotIndex = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
+        this.times = availableTimes || [];
+        debug(`[nylas-timeslot-picker] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-timeslot-picker] Component did load`);
+    }
+    getTimeslotId(date, index) {
+        return `${date.toLocaleDateString()}-${index}`;
+    }
+    onClickSelectTime(timeslot, index) {
+        debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);
+        this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);
+        this.timeslotSelected.emit({
+            start_time: timeslot.start_time,
+            end_time: timeslot.end_time,
+        });
+    }
+    getTimeSlotLabel(timeslot) {
+        const timeFormat = new Intl.DateTimeFormat('en-US', {
+            hour: 'numeric',
+            minute: 'numeric',
+            timeZone: this.selectedTimezone,
+        });
+        return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;
+    }
+    selectedDateChanged(newVal) {
+        debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });
+        if (newVal) {
+            this.selectedTimeslotIndex = '';
+            if (typeof newVal !== 'undefined') {
+                const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);
+                this.times = availableTimes || [];
+            }
+        }
+    }
+    availabilityChanged(newVal) {
+        debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });
+        if (typeof newVal !== 'undefined') {
+            const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
+            this.times = availableTimes || [];
+        }
+    }
+    render() {
+        if (this.loadingState && this.loadingState.api === 'availability') {
+            return (h(Host, null, h("div", { class: 'loading' }, new Array(6).fill(0).map((_, i) => (h("div", { class: 'time-slot-skeleton', style: { animationDelay: `${i * 20}ms` } }))))));
+        }
+        if (this.availability && this.availability.length === 0) {
+            return (h(Host, null, h("div", { class: 'empty' }, h("span", null, "No dates available"))));
+        }
+        if ((!this.times || this.times.length === 0) && !!this.selectedDate) {
+            return (h(Host, null, h("div", { class: 'empty' }, h("span", null, "No time slots available for selected date"))));
+        }
+        if (!this.selectedDate)
+            return h(Host, null);
+        return (h(Host, { part: "ntp" }, h("div", { class: 'time-picker-wrapper' }, h("div", { class: 'time-slots' }, this.times.map((timeslot, index) => (h("button", { part: `ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`, "aria-role": "button", class: {
+                time: true,
+                selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),
+            }, onClick: () => this.onClickSelectTime(timeslot, index), onMouseEnter: () => this.handleMouseEnter(index), onMouseLeave: () => this.handleMouseLeave() }, this.hoveredTimeslotIndex == index || this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)
+            ? this.getTimeSlotLabel(timeslot)
+            : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone }))))), this.selectedTimeslot && (h("div", { class: 'footer' }, h("sp-button", { variant: "primary", onClick: (event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot), part: "ntp__button-primary" }, h("slot", { name: "timeslot-picker-cta-label" }, "Next")))))));
+    }
+    static get watchers() { return {
+        "selectedDate": ["selectedDateChanged"],
+        "availability": ["availabilityChanged"]
+    }; }
+    static get style() { return NylasTimeslotPickerStyle0; }
+}, [1, "nylas-timeslot-picker", {
+        "selectedDate": [16],
+        "availability": [16],
+        "selectedTimeslot": [16],
+        "loadingState": [16],
+        "selectedTimezone": [1, "selected-timezone"],
+        "times": [32],
+        "hoveredTimeslotIndex": [32],
+        "selectedTimeslotIndex": [32]
+    }, undefined, {
+        "selectedDate": ["selectedDateChanged"],
+        "availability": ["availabilityChanged"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-timeslot-picker',
+        stateToProps: new Map([
+            ['scheduler.selectedDate', 'selectedDate'],
+            ['scheduler.availability', 'availability'],
+            ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.selectedTimezone', 'selectedTimezone'],
+            ['scheduler.loadingState', 'loadingState'],
+        ]),
+        eventToProps: {
+            timeslotSelected: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.selectTime(event.detail);
+            },
+            timeslotConfirmed: async (event, nylasSchedulerConnector) => {
+                if (event.detail) {
+                    nylasSchedulerConnector.scheduler.toggleAdditionalData(true);
+                }
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasTimeslotPicker.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-timeslot-picker"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-timeslot-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasTimeslotPicker);
+            }
+            break;
+    } });
+}
+
+export { NylasTimeslotPicker as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-timeslot-picker2.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-timeslot-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.time-picker-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 447px;\n}\n\n.time-slots {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  align-items: center;\n  overflow-y: scroll;\n  padding: 0.5rem 1.5rem;\n  flex: 1;\n}\n\n.time {\n  /* Frame 12 */\n  box-sizing: border-box;\n\n  /* Auto layout */\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 12px;\n  gap: 0.5rem;\n  font-size: 16px;\n  font-weight: 500;\n  font-family: inherit;\n\n  width: 100%;\n  height: 48px;\n\n  color: var(--nylas-base-800);\n  background: var(--nylas-base-0);\n  border: none;\n  outline: 1.5px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n\n  flex: none;\n  order: 4;\n  align-self: stretch;\n  flex-grow: 0;\n\n  cursor: pointer;\n\n  &:hover {\n    color: var(--nylas-primary);\n    outline-color: var(--nylas-primary);\n  }\n\n  &.selected {\n    font-weight: 600;\n    color: var(--nylas-primary);\n    outline: 2px solid var(--nylas-primary);\n    border-color: transparent;\n    box-shadow: 0 0 0 2px var(--nylas-primary);\n  }\n}\n\n.empty {\n  text-align: center;\n  padding: 0 1.5rem;\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  height: 515px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\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.loading {\n  padding: 0 1.5rem;\n\n  .time-slot-skeleton {\n    width: 100%;\n    height: 4rem;\n    background-color: var(--nylas-base-50);\n    margin-bottom: 0.5rem;\n    border-radius: var(--nylas-border-radius-2x);\n    animation: pulsate 1.5s infinite ease-in-out;\n  }\n}\n\n.footer {\n  width: 100%;\n  padding: 10px;\n  box-sizing: border-box;\n  border-top: 1px solid var(--nylas-base-100);\n\n  sp-button {\n    padding: 14px;\n    color: var(--nylas-base-100);\n    border-radius: var(--nylas-border-radius-2x);\n    width: 100%;\n    height: 48px;\n    font-weight: 600;\n    background-color: var(--nylas-primary);\n    border: none;\n    &:hover {\n      background-color: var(--nylas-base-600);\n    }\n    &:active {\n      background-color: var(--nylas-base-800);\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\nimport { AvailabilityTimeslot, LoadingState } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\n\n/**\n * The timeslot picker component.\n * @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n */\n@Component({\n  tag: 'nylas-timeslot-picker',\n  styleUrl: 'nylas-timeslot-picker.scss',\n  shadow: true,\n})\nexport class NylasTimeslotPicker {\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n  /**\n   * The available timeslots.\n   */\n  @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n  /**\n   * The selected timeslot.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /**\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop({ attribute: 'loading-state' }) readonly loadingState?: LoadingState;\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * This event is fired when a timeslot is selected.\n   */\n  @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n  /**\n   * This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n   */\n  @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n  @State() times: AvailabilityTimeslot[] = [];\n  @State() hoveredTimeslotIndex?: number;\n  @State() selectedTimeslotIndex?: string;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n    this.times = availableTimes || [];\n    debug(`[nylas-timeslot-picker] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-timeslot-picker] Component did load`);\n  }\n\n  private getTimeslotId(date: Date, index: number) {\n    return `${date.toLocaleDateString()}-${index}`;\n  }\n\n  private onClickSelectTime(timeslot: Timeslot, index: number) {\n    debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n    this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n    this.timeslotSelected.emit({\n      start_time: timeslot.start_time,\n      end_time: timeslot.end_time,\n    });\n  }\n\n  private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot | undefined) => {\n    event.preventDefault();\n    debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n    this.timeslotConfirmed.emit(timeslot);\n  };\n\n  private handleMouseEnter = (index: number) => {\n    this.hoveredTimeslotIndex = index;\n  };\n\n  private handleMouseLeave = () => {\n    this.hoveredTimeslotIndex = -1;\n  };\n\n  private getTimeSlotLabel(timeslot: Timeslot) {\n    const timeFormat = new Intl.DateTimeFormat('en-US', {\n      hour: 'numeric',\n      minute: 'numeric',\n      timeZone: this.selectedTimezone,\n    });\n    return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newVal: Date | null | undefined) {\n    debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n    if (newVal) {\n      this.selectedTimeslotIndex = '';\n      if (typeof newVal !== 'undefined') {\n        const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n        this.times = availableTimes || [];\n      }\n    }\n  }\n\n  @Watch('availability')\n  availabilityChanged(newVal: AvailabilityTimeslot[] | undefined) {\n    debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n    if (typeof newVal !== 'undefined') {\n      const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n      this.times = availableTimes || [];\n    }\n  }\n\n  @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-timeslot-picker',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.availability', 'availability'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.loadingState', 'loadingState'],\n    ]),\n    eventToProps: {\n      timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectTime(event.detail);\n      },\n      timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        if (event.detail) {\n          nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    if (this.loadingState && this.loadingState.api === 'availability') {\n      return (\n        <Host>\n          <div class={'loading'}>\n            {new Array(6).fill(0).map((_, i) => (\n              <div class={'time-slot-skeleton'} style={{ animationDelay: `${i * 20}ms` }} />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    if (this.availability && this.availability.length === 0) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No dates available</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if ((!this.times || this.times.length === 0) && !!this.selectedDate) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No time slots available for selected date</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if (!this.selectedDate) return <Host></Host>;\n\n    return (\n      <Host part=\"ntp\">\n        <div class={'time-picker-wrapper'}>\n          <div class={'time-slots'}>\n            {this.times.map((timeslot, index) => (\n              <button\n                part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n                aria-role=\"button\"\n                class={{\n                  time: true,\n                  selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n                }}\n                onClick={() => this.onClickSelectTime(timeslot, index)}\n                onMouseEnter={() => this.handleMouseEnter(index)}\n                onMouseLeave={() => this.handleMouseLeave()}\n              >\n                {this.hoveredTimeslotIndex == index || this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n                  ? this.getTimeSlotLabel(timeslot)\n                  : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n              </button>\n            ))}\n          </div>\n          {this.selectedTimeslot && (\n            <div class={'footer'}>\n              <sp-button variant=\"primary\" onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n                <slot name=\"timeslot-picker-cta-label\">Next</slot>\n              </sp-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-view-email.d.ts

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

package/dist/components/nylas-view-email.js

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

package/dist/components/nylas-view-email.js.map

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