@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.css

@@ -0,0 +1,63 @@
+:host {
+  display: block;
+}
+
+sp-theme {
+  position: relative;
+  height: inherit;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--nylas-font-family);
+}
+
+.event-card {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: calc(100% - 3rem);
+  background-color: var(--nylas-base-0);
+  color: var(--nylas-base-800);
+  border-radius: var(--nylas-border-radius-2x);
+  padding: 3rem 1.5rem 1.5rem 1.5rem;
+  position: relative;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06);
+}
+
+.nylas-selected-event-card__date {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.nylas-selected-event-card__time {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.calendar-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  position: absolute;
+  top: -1.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--nylas-base-0);
+  border: 1px solid var(--nylas-base-200);
+}
+
+calendar-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.event-timezone {
+  display: flex;
+  color: var(--nylas-base-600);
+  margin-bottom: 1.5rem;
+  gap: 4px;
+  align-items: center;
+}

package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js

@@ -0,0 +1,150 @@
+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 { h, Host } from "@stencil/core";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left";
+import { debug } from "../../../utils/utils";
+import { TIMEZONE_MAP } from "../../../common/constants";
+export class NylasSelectedEventCard {
+    constructor() {
+        this.selectedDate = undefined;
+        this.selectedTimeslot = undefined;
+        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.startTime = '';
+        this.endTime = '';
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-selected-event-card] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-selected-event-card] Component did load`);
+    }
+    handleSelectedTimeslotChange(selectedTimeslot) {
+        this.startTime = new Date(selectedTimeslot?.start_time).toLocaleString(undefined, { timeStyle: 'short' });
+        this.endTime = new Date(selectedTimeslot?.end_time).toLocaleString(undefined, { timeStyle: 'short' });
+    }
+    render() {
+        return (h(Host, { key: 'fcd961bcbdf8af96cb804f6cc55ba59b5c7aa2d3', part: "nsec" }, h("sp-theme", { key: '637833802175cbe45e78873a2447ca067d8d2420', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '7a286c9750f65cf5f220a5c7e4d89851aaaedb4c', class: "event-card", part: "nsec__card" }, h("div", { key: 'fef7ba53349b4130616027e91161a1c2027bf3c9', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: 'f8ee2f52ec98f311d6565c03d132ded574d75a19' })), h("div", { key: '7177ff09c1d05eec169072ea4748673c78c49b7c', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate?.toLocaleDateString(undefined, { dateStyle: 'full' })), h("div", { key: '004ae2949a997ed3c58e87e5742eadd6ca52aadd', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: 'a56d031c414542940c9b7194397927bffb126f68', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '01a763b6072345335403e0a5b497daa2dea42608' }), TIMEZONE_MAP[this.selectedTimezone]))));
+    }
+    static get is() { return "nylas-selected-event-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-selected-event-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-selected-event-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date."
+                }
+            },
+            "selectedTimeslot": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Timeslot",
+                    "resolved": "undefined | { start_time: Date; end_time: Date; }",
+                    "references": {
+                        "Timeslot": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Timeslot"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected time."
+                }
+            },
+            "selectedTimezone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "*\nThe selected timezone."
+                },
+                "attribute": "selected-timezone",
+                "reflect": false,
+                "defaultValue": "Intl.DateTimeFormat().resolvedOptions().timeZone"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "startTime": {},
+            "endTime": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "selectedTimeslot",
+                "methodName": "handleSelectedTimeslotChange"
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-selected-event-card',
+        stateToProps: new Map([
+            ['scheduler.selectedDate', 'selectedDate'],
+            ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.selectedTimezone', 'selectedTimezone'],
+        ]),
+        eventToProps: {
+            backButtonClicked: async (_event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.toggleAdditionalData(false);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasSelectedEventCard.prototype, "render", null);
+//# sourceMappingURL=nylas-selected-event-card.js.map

package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-selected-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIvE,OAAO,oEAAoE,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAgBlD,MAAM,OAAO,sBAAsB;;;;gCAa6C,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;yBAEjG,EAAE;uBACJ,EAAE;;IAE7B,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iDAAiD,CAAC,CAAC;IAC3D,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,gDAAgD,CAAC,CAAC;IAC1D,CAAC;IAGD,4BAA4B,CAAC,gBAA0B;QACrD,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,gBAAgB,EAAE,UAAkB,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC;QAClH,IAAI,CAAC,OAAO,GAAG,IAAI,IAAI,CAAC,gBAAgB,EAAE,QAAgB,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC;IAChH,CAAC;IAgBD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ;gBACpD,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY;oBACvC,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,YAAY;wBAC1C,uEAAiB,CACb;oBACN,4DAAK,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,YAAY,IAC3D,IAAI,CAAC,YAAY,EAAE,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CACpE;oBACN,4DAAK,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,YAAY;wBAC3D,IAAI,CAAC,SAAS;;wBAAK,IAAI,CAAC,OAAO,CAC5B,CACF;gBACN,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,gBAAgB;oBAC/C,oEAAyB;oBACxB,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAChC,CACG,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAvBC;IAdC,iBAAiB,CAAgG;QAChH,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,wBAAwB,EAAE,cAAc,CAAC;YAC1C,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;SACnD,CAAC;QACF,YAAY,EAAE;YACZ,iBAAiB,EAAE,KAAK,EAAE,MAA4B,EAAE,uBAAgD,EAAE,EAAE;gBAC1G,uBAAuB,CAAC,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAChE,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDAuBD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { Timeslot } from '@nylas/core';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\n\n/**\n * The selected event card component.\n * @part nsec - The selected event card component.\n * @part nsec__card - The card component.\n * @part nsec__icon - The calendar icon.\n * @part nsec__date - The date selected.\n * @part nsec__time - The timeslot selected.\n * @part nsec__timezone - The timezone selected.\n */\n@Component({\n  tag: 'nylas-selected-event-card',\n  styleUrl: 'nylas-selected-event-card.scss',\n  shadow: true,\n})\nexport class NylasSelectedEventCard {\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date;\n\n  /**\n   * The selected time.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /***\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-selected-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-selected-event-card] Component did load`);\n  }\n\n  @Watch('selectedTimeslot')\n  handleSelectedTimeslotChange(selectedTimeslot: Timeslot) {\n    this.startTime = new Date(selectedTimeslot?.start_time as Date).toLocaleString(undefined, { timeStyle: 'short' });\n    this.endTime = new Date(selectedTimeslot?.end_time as Date).toLocaleString(undefined, { timeStyle: 'short' });\n  }\n\n  @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-selected-event-card',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nsec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"event-card\" part=\"nsec__card\">\n            <div class=\"calendar-icon\" part=\"nsec__icon\">\n              <calendar-icon />\n            </div>\n            <div class=\"nylas-selected-event-card__date\" part=\"nsec__date\">\n              {this.selectedDate?.toLocaleDateString(undefined, { dateStyle: 'full' })}\n            </div>\n            <div class=\"nylas-selected-event-card__time\" part=\"nsec__time\">\n              {this.startTime} - {this.endTime}\n            </div>\n          </div>\n          <div class=\"event-timezone\" part=\"nsec__timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.css

@@ -0,0 +1,115 @@
+: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 {
+  /* Frame 12 */
+  box-sizing: border-box;
+  /* Auto layout */
+  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);
+}

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

@@ -0,0 +1,311 @@
+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, isSameDay } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasTimeslotPicker {
+    constructor() {
+        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 is() { return "nylas-timeslot-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-timeslot-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-timeslot-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date."
+                },
+                "defaultValue": "new Date()"
+            },
+            "availability": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvailabilityTimeslot[]",
+                    "resolved": "AvailabilityTimeslot[] | undefined",
+                    "references": {
+                        "AvailabilityTimeslot": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::AvailabilityTimeslot"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The available timeslots."
+                }
+            },
+            "selectedTimeslot": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Timeslot",
+                    "resolved": "undefined | { start_time: Date; end_time: Date; }",
+                    "references": {
+                        "Timeslot": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Timeslot"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected timeslot."
+                }
+            },
+            "loadingState": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingState",
+                    "resolved": "undefined | { api: \"availability\" | \"createBooking\" | \"cancelBooking\" | \"rescheduleBooking\"; }",
+                    "references": {
+                        "LoadingState": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::LoadingState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The loading state prop. Used to display loading state when fetching availability."
+                }
+            },
+            "selectedTimezone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected timezone."
+                },
+                "attribute": "selected-timezone",
+                "reflect": false,
+                "defaultValue": "Intl.DateTimeFormat().resolvedOptions().timeZone"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "times": {},
+            "hoveredTimeslotIndex": {},
+            "selectedTimeslotIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timeslotSelected",
+                "name": "timeslotSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when a timeslot is selected."
+                },
+                "complexType": {
+                    "original": "Timeslot",
+                    "resolved": "{ start_time: Date; end_time: Date; }",
+                    "references": {
+                        "Timeslot": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Timeslot"
+                        }
+                    }
+                }
+            }, {
+                "method": "timeslotConfirmed",
+                "name": "timeslotConfirmed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page."
+                },
+                "complexType": {
+                    "original": "Timeslot",
+                    "resolved": "{ start_time: Date; end_time: Date; }",
+                    "references": {
+                        "Timeslot": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Timeslot"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "selectedDate",
+                "methodName": "selectedDateChanged"
+            }, {
+                "propName": "availability",
+                "methodName": "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);
+//# sourceMappingURL=nylas-timeslot-picker.js.map