npm - @nylas/web-elements - Versions diffs - 0.0.0-canary-20241008193213 → 0.0.0-canary-20241017103834 - Mend

@nylas/web-elements 0.0.0-canary-20241008193213 → 0.0.0-canary-20241017103834

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (825) hide show

package/dist/collection/components/scheduler/nylas-scheduling/test/nylas-scheduling.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-scheduling.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler/nylas-scheduling/test/nylas-scheduling.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasScheduling } from '../nylas-scheduling';\nimport { h } from '@stencil/core';\n\ndescribe('nylas-scheduling', () => {\n const REAL_DATE = Date;\n const testBookingRef = 'Of_H8WLEQ4aZTtx0NKajeAF1l9qpekHbo4by7AaZc8M=';\n beforeEach(() => {\n // Clear and reset the mock before each test if needed\n jest.clearAllMocks();\n });\n\n beforeAll(() => {\n const originalDate = Date;\n global.Date = class extends originalDate {\n constructor(date?: string \| number) {\n super(date ? date : '2022-01-01T00:00:00.000Z');\n }\n } as DateConstructor;\n });\n\n afterAll(() => {\n global.Date = REAL_DATE;\n });\n\n it('renders', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling></nylas-scheduling>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it('listens for NylasSchedulingError event and updates state', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling></nylas-scheduling>`,\n });\n\n const mockError = { title: 'Error', description: 'Test Error', type: 'error', category: 'component', ttl: 'none' };\n const errorEvent = new CustomEvent('NylasSchedulingError', { detail: mockError, bubbles: true });\n page.win.dispatchEvent(errorEvent);\n await page.waitForChanges();\n\n const notification = page?.root?.shadowRoot?.querySelector('nylas-notification');\n expect(notification).not.toBeNull();\n const notifRoot = notification?.shadowRoot?.querySelector('.notif');\n expect(notifRoot).not.toBeNull();\n });\n\n it('shows no error when configID is set, and no sessionID is set', async () => {\n const availability = [\n {\n emails: ['xyz@gmail.com'],\n end_time: new Date(1709303400000),\n start_time: new Date(1709301600000),\n },\n ];\n const page = await newSpecPage({\n components: [NylasScheduling],\n template: () => (\n <nylas-scheduling\n config-id=\"configid\"\n defaultSchedulerState={{\n availability,\n }}\n ></nylas-scheduling>\n ),\n });\n\n await page.waitForChanges();\n\n const notification = page?.root?.shadowRoot?.querySelector('nylas-notification');\n const notifRoot = notification?.shadowRoot?.querySelector('.notif');\n expect(notifRoot).toBeUndefined();\n });\n\n it('listens for dateSelected event and updates date label', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling></nylas-scheduling>`,\n });\n\n const selectedDate = new Date();\n const dateSelectedEvent = new CustomEvent('dateSelected', { detail: selectedDate, bubbles: true });\n page.win.dispatchEvent(dateSelectedEvent);\n await page.waitForChanges();\n\n const selectedDateLabel = page?.root?.shadowRoot?.querySelector('#selectedDate');\n expect(selectedDateLabel?.textContent).toBe('No date selected');\n });\n\n it('conditionally renders cancel flow based on cancelBookingRef prop', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling cancel-booking-ref=${testBookingRef}></nylas-scheduling>`,\n });\n\n await page.waitForChanges();\n const cancelFlowPage = page?.root?.shadowRoot?.querySelector('.cancel-flow-page');\n expect(cancelFlowPage).not.toBeNull();\n });\n\n it('renders composable UI when mode is set to composable', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling mode=\"composable\">\n <nylas-if-state state=\"scheduler.eventInfo\" is-state-set=\"false\">\n <div class=\"flex\">\n <div class=\"flex flex-col gap-4 px-6 pt-4 h-[514px] w-[433px] border-slate-200 dark:border-slate-700 border-r\">\n <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"false\">\n <nylas-date-picker></nylas-date-picker>\n <div class=\"border-slate-200 dark:border-slate-700 border-t -mx-6 h-px\"></div>\n <nylas-locale-switch></nylas-locale-switch>\n </nylas-if-state>\n <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"true\">\n <div class=\"flex flex-col justify-center h-[496px]\">\n <nylas-selected-event-card></nylas-selected-event-card>\n </div>\n </nylas-if-state>\n </div>\n <div class=\"flex flex-col items-center min-w-[360px] overflow-hidden bg-slate-50 dark:bg-slate-700\">\n <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"false\" class=\"w-full\">\n <div class=\"flex flex-col justify-start w-full\">\n <nylas-if-state state=\"scheduler.selectableDates\" is-state-set=\"true\">\n <h2 class=\"flex items-center justify-center text-lg font-semibold w-full text-center gap-1 mb-4 mt-6 text-slate-700 dark:text-white\">\n <calendar-icon></calendar-icon>\n <nylas-if-state state=\"scheduler.selectedDate\" is-state-set=\"false\">\n <span>No date selected</span>\n </nylas-if-state>\n <nylas-if-state state=\"scheduler.selectedDate\" is-state-set=\"true\">\n <span id=\"selectedDate\"></span>\n </nylas-if-state>\n </h2>\n </nylas-if-state>\n <nylas-timeslot-picker></nylas-timeslot-picker>\n </div>\n </nylas-if-state>\n <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"true\" class=\"w-full\">\n <div class=\"flex flex-col justify-center h-[496px]\">\n <nylas-booking-form></nylas-booking-form>\n </div>\n </nylas-if-state>\n </div>\n </div>\n </nylas-if-state>\n </nylas-scheduling>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it('exposes getNylasSchedulingStore method and returns store', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling session-id=\"sessionid\"></nylas-scheduling>`,\n });\n const scheduler = page.rootInstance as NylasScheduling;\n\n const store = await scheduler.getNylasSchedulerStore();\n expect(store).toBeDefined();\n });\n\n it('exposes getNylasSchedulingConnector method and returns connector', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling session-id=\"sessionid\"></nylas-scheduling>`,\n });\n const scheduler = page.rootInstance as NylasScheduling;\n\n const connector = await scheduler.getNylasSchedulerConnector();\n expect(connector).toBeDefined();\n });\n\n it('should render the reschedule flow when rescheduleBookingRef is set', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling reschedule-booking-ref=${testBookingRef}></nylas-scheduling>`,\n });\n\n await page.waitForChanges();\n\n const messageBanner = page?.root?.shadowRoot?.querySelector('.message-banner');\n expect(messageBanner).not.toBeNull();\n });\n\n it('hides the nylas logo in the footer if nylasBranding is set', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n template: () => <nylas-scheduling config-id=\"configid\" nylasBranding={false}></nylas-scheduling>,\n });\n\n await page.waitForChanges();\n\n const footer = page?.root?.shadowRoot?.querySelector('.footer');\n expect(footer?.textContent).not.toContain('Powered by Nylas');\n });\n});\n"]}
1	+ {"version":3,"file":"nylas-scheduling.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler/nylas-scheduling/test/nylas-scheduling.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasScheduling } from '../nylas-scheduling';\nimport { NylasBookingForm } from '../../nylas-booking-form/nylas-booking-form';\nimport { NylasSelectedEventCard } from '../../nylas-selected-event-card/nylas-selected-event-card';\nimport { h } from '@stencil/core';\n\ndescribe('nylas-scheduling', () => {\n const REAL_DATE = Date;\n const testBookingRef = 'Of_H8WLEQ4aZTtx0NKajeAF1l9qpekHbo4by7AaZc8M=';\n beforeEach(() => {\n // Clear and reset the mock before each test if needed\n jest.clearAllMocks();\n });\n\n beforeAll(() => {\n const originalDate = Date;\n global.Date = class extends originalDate {\n constructor(date?: string \| number) {\n super(date ? date : '2022-01-01T00:00:00.000Z');\n }\n } as DateConstructor;\n });\n\n afterAll(() => {\n global.Date = REAL_DATE;\n });\n\n it('renders', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling></nylas-scheduling>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it('listens for NylasSchedulingError event and updates state', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling></nylas-scheduling>`,\n });\n\n const mockError = { title: 'Error', description: 'Test Error', type: 'error', category: 'component', ttl: 'none' };\n const errorEvent = new CustomEvent('NylasSchedulingError', { detail: mockError, bubbles: true });\n page.win.dispatchEvent(errorEvent);\n await page.waitForChanges();\n\n const notification = page?.root?.shadowRoot?.querySelector('nylas-notification');\n expect(notification).not.toBeNull();\n const notifRoot = notification?.shadowRoot?.querySelector('.notif');\n expect(notifRoot).not.toBeNull();\n });\n\n it('shows no error when configID is set, and no sessionID is set', async () => {\n const availability = [\n {\n emails: ['xyz@gmail.com'],\n end_time: new Date(1709303400000),\n start_time: new Date(1709301600000),\n },\n ];\n const page = await newSpecPage({\n components: [NylasScheduling],\n template: () => (\n <nylas-scheduling\n config-id=\"configid\"\n defaultSchedulerState={{\n availability,\n }}\n ></nylas-scheduling>\n ),\n });\n\n await page.waitForChanges();\n\n const notification = page?.root?.shadowRoot?.querySelector('nylas-notification');\n const notifRoot = notification?.shadowRoot?.querySelector('.notif');\n expect(notifRoot).toBeUndefined();\n });\n\n it('listens for dateSelected event and updates date label', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling></nylas-scheduling>`,\n });\n\n const selectedDate = new Date();\n const dateSelectedEvent = new CustomEvent('dateSelected', { detail: selectedDate, bubbles: true });\n page.win.dispatchEvent(dateSelectedEvent);\n await page.waitForChanges();\n\n const selectedDateLabel = page?.root?.shadowRoot?.querySelector('#selectedDate');\n expect(selectedDateLabel?.textContent).toBe('No date selected');\n });\n\n it('conditionally renders cancel flow based on cancelBookingRef prop', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling cancel-booking-ref=${testBookingRef}></nylas-scheduling>`,\n });\n\n await page.waitForChanges();\n const cancelFlowPage = page?.root?.shadowRoot?.querySelector('.cancel-flow-page');\n expect(cancelFlowPage).not.toBeNull();\n });\n\n it('renders composable UI when mode is set to composable', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling mode=\"composable\">\n <nylas-if-state state=\"scheduler.eventInfo\" is-state-set=\"false\">\n <div class=\"flex\">\n <div class=\"flex flex-col gap-4 px-6 pt-4 h-[514px] w-[433px] border-slate-200 dark:border-slate-700 border-r\">\n <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"false\">\n <nylas-date-picker></nylas-date-picker>\n <div class=\"border-slate-200 dark:border-slate-700 border-t -mx-6 h-px\"></div>\n <nylas-locale-switch></nylas-locale-switch>\n </nylas-if-state>\n <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"true\">\n <div class=\"flex flex-col justify-center h-[496px]\">\n <nylas-selected-event-card></nylas-selected-event-card>\n </div>\n </nylas-if-state>\n </div>\n <div class=\"flex flex-col items-center min-w-[360px] overflow-hidden bg-slate-50 dark:bg-slate-700\">\n <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"false\" class=\"w-full\">\n <div class=\"flex flex-col justify-start w-full\">\n <nylas-if-state state=\"scheduler.selectableDates\" is-state-set=\"true\">\n <h2 class=\"flex items-center justify-center text-lg font-semibold w-full text-center gap-1 mb-4 mt-6 text-slate-700 dark:text-white\">\n <calendar-icon></calendar-icon>\n <nylas-if-state state=\"scheduler.selectedDate\" is-state-set=\"false\">\n <span>No date selected</span>\n </nylas-if-state>\n <nylas-if-state state=\"scheduler.selectedDate\" is-state-set=\"true\">\n <span id=\"selectedDate\"></span>\n </nylas-if-state>\n </h2>\n </nylas-if-state>\n <nylas-timeslot-picker></nylas-timeslot-picker>\n </div>\n </nylas-if-state>\n <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"true\" class=\"w-full\">\n <div class=\"flex flex-col justify-center h-[496px]\">\n <nylas-booking-form></nylas-booking-form>\n </div>\n </nylas-if-state>\n </div>\n </div>\n </nylas-if-state>\n </nylas-scheduling>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it('exposes getNylasSchedulingStore method and returns store', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling session-id=\"sessionid\"></nylas-scheduling>`,\n });\n const scheduler = page.rootInstance as NylasScheduling;\n\n const store = await scheduler.getNylasSchedulerStore();\n expect(store).toBeDefined();\n });\n\n it('exposes getNylasSchedulingConnector method and returns connector', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling session-id=\"sessionid\"></nylas-scheduling>`,\n });\n const scheduler = page.rootInstance as NylasScheduling;\n\n const connector = await scheduler.getNylasSchedulerConnector();\n expect(connector).toBeDefined();\n });\n\n it('should render the reschedule flow when rescheduleBookingRef is set', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n html: `<nylas-scheduling reschedule-booking-ref=${testBookingRef}></nylas-scheduling>`,\n });\n\n await page.waitForChanges();\n\n const messageBanner = page?.root?.shadowRoot?.querySelector('.message-banner');\n expect(messageBanner).not.toBeNull();\n });\n\n it('hides the nylas logo in the footer if nylasBranding is set', async () => {\n const page = await newSpecPage({\n components: [NylasScheduling],\n template: () => <nylas-scheduling config-id=\"configid\" nylasBranding={false}></nylas-scheduling>,\n });\n\n await page.waitForChanges();\n\n const footer = page?.root?.shadowRoot?.querySelector('.footer');\n expect(footer?.textContent).not.toContain('Powered by Nylas');\n });\n\n it('redirects with the query params when redirectUrl is set', async () => {\n const configSettings = {\n name: '',\n slug: '',\n configuration_id: '19ca4a10-be05-4d1b-a830-5b639a362cef',\n scheduler: {\n available_days_in_future: 30,\n min_cancellation_notice: 0,\n min_booking_notice: 60,\n rescheduling_url: 'https://book.nylas.com/scheduler/reschedule/:booking_ref',\n cancellation_url: 'https://book.nylas.com/scheduler/cancel/:booking_ref',\n organizer_confirmation_url: 'https://book.nylas.com/scheduler/confirm/:booking_ref',\n confirmation_redirect_url: 'https://nylas.com',\n hide_rescheduling_options: false,\n hide_cancellation_options: false,\n hide_additional_guests: false,\n cancellation_policy: '',\n additional_fields: {\n dropdown: {\n label: 'Dropdown Label',\n type: 'dropdown',\n required: false,\n order: 2,\n options: ['option 1', 'option 2'],\n },\n short_text: {\n label: 'Short Text Label',\n type: 'text',\n required: false,\n order: 1,\n },\n },\n },\n organizer: {\n email: 'pooja.g@nylas.com',\n name: '',\n },\n booking_type: 'booking',\n appearance: {\n company_logo_url: '',\n },\n };\n const defaultSchedulerState = {\n showBookingForm: true,\n availability: [\n {\n emails: ['pooja.g@nylas.com'],\n end_time: 1728639000 as any,\n start_time: 1728637200 as any,\n },\n ],\n selectableDates: [new Date(1728639000000)],\n selectedDate: new Date(1728639000000),\n selectedTimeslot: {\n end_time: 1728639000 as any,\n start_time: 1728637200 as any,\n emails: ['janedoe@example.com'],\n },\n selectedTimezone: 'America/Los_Angeles',\n bookingInfo: {\n primaryParticipant: {\n name: 'John Doe',\n email: 'johndoe@example.com',\n },\n guests: [],\n additionalFields: {\n short_text: {\n value: 'some value',\n type: 'text',\n },\n dropdown: {\n value: 'option 2',\n type: 'dropdown',\n },\n field2: {\n value: 'some value',\n type: 'text',\n },\n },\n },\n configSettings: { ...configSettings },\n };\n jest.spyOn(global, 'fetch').mockImplementation(url => {\n if (url === 'https://api.us.nylas.com/v3/scheduling/ui-settings?configuration_id=19ca4a10-be05-4d1b-a830-5b639a362cef') {\n return Promise.resolve({ request_id: 'test', data: configSettings } as any);\n } else if (url === 'https://api.us.nylas.com/v3/scheduling/bookings?configuration_id=19ca4a10-be05-4d1b-a830-5b639a362cef') {\n return Promise.resolve({\n json: () =>\n Promise.resolve({\n request_id: '1729109187-ffa7e86e-c276-45c2-8cda-e3205e46d234',\n data: {\n event_id: 'jlid5nji0nmoupl87ls85iv8do',\n booking_id: '8f9f5145-c40c-4477-8d30-5c43256ddb60',\n title: 'm',\n description: '',\n organizer: {\n email: 'johndoe@example.com',\n name: '',\n },\n status: 'booked',\n },\n } as any),\n } as Response);\n }\n\n return fetch(url); // Fallback for unmocked URLs\n });\n let nylasScheduling: NylasScheduling;\n const page = await newSpecPage({\n components: [NylasSelectedEventCard, NylasBookingForm, NylasScheduling],\n template: () => (\n <nylas-scheduling\n mode=\"app\"\n configurationId={'19ca4a10-be05-4d1b-a830-5b639a362cef'}\n bookingInfo={defaultSchedulerState.bookingInfo}\n defaultSchedulerState={defaultSchedulerState}\n ></nylas-scheduling>\n ),\n });\n nylasScheduling = page.rootInstance as NylasScheduling;\n const redirectSpy = jest.spyOn(nylasScheduling, 'redirectToCustomUrl');\n await page.waitForChanges();\n expect(page.root).toMatchSnapshot();\n const nylasBookingForm = page?.root?.shadowRoot?.querySelector('nylas-booking-form') as HTMLNylasBookingFormElement;\n nylasBookingForm.bookingInfo = defaultSchedulerState.bookingInfo;\n await page.waitForChanges();\n const form = nylasBookingForm?.shadowRoot?.querySelector('form');\n expect(form).not.toBeNull();\n\n const detailsConfirmedEvent = new CustomEvent('detailsConfirmed', {\n detail: {\n additionalFields: { dropdown: 'option 2', short_text: 'hello' },\n guests: [],\n start_time: new Date(1729013400000),\n timezone: 'America/Toronto',\n email_language: 'en-US',\n end_time: new Date(1729015200000),\n timeslot: {\n start_time: new Date(1729013400000),\n end_time: new Date(1729015200000),\n },\n primaryParticipant: { name: 'John Doe', email: 'johndoe@example.com' },\n },\n bubbles: true,\n });\n\n await nylasScheduling.bookButtonClickedHandler(detailsConfirmedEvent);\n await page.waitForChanges();\n expect(redirectSpy).toHaveBeenCalled();\n // Assert that the redirect happened with the correct URL (includes field_2 in the additional_values)\n expect(redirectSpy).toHaveBeenCalledWith(\n 'https://nylas.com?booking_id=8f9f5145-c40c-4477-8d30-5c43256ddb60&name=John+Doe&email=johndoe%40example.com&start_time=1728637.2&end_time=1728639&tz=America%2FLos_Angeles&additional_values=%7B%22dropdown%22%3A%22option+2%22%2C%22short_text%22%3A%22hello%22%2C%22field2%22%3A%22some+value%22%7D&config_id=19ca4a10-be05-4d1b-a830-5b639a362cef',\n );\n });\n});\n"]}

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

@@ -1,4 +1,27 @@
 :host {
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
   display: block;
   position: relative;
   height: inherit;

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

@@ -47,9 +47,9 @@ export class NylasSelectedEventCard {
         this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time));
     }
     render() {
-        return (h(Host, { key: '2b4257d6793fd263e7978504b88e270d77e2e78f', part: "nsec" }, h("div", { key: '8eb84c0c375afd9824d88337003d09b7fe3db171', class: "event-card", part: "nsec__card" }, h("div", { key: 'bc7d364f1ec772f06f5eab4549b0433cb947f68d', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: 'a3f38777fea8b17714ad0dc34cd236a93e4360fd' })), h("div", { key: '1d23698c5a8d627bc10c7969e269a381584b6477', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
+        return (h(Host, { key: '988d5270aa9dbd656c11d70ae0f3058dd25b4eb8', part: "nsec" }, h("div", { key: '21681211baf07faa5b09cec29611859a8dbdd37b', class: "event-card", part: "nsec__card" }, h("div", { key: '9b478bc27a5469a7c67786e3b1958e20e2f59d9e', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '9a9f4cd2551747874876d8a32943a8cd98032d1e' })), h("div", { key: 'f9dcde6ca9cffbfeb2f5dcd4e3586433bf2fd055', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
             ? capitalizeFirstLetter(this.selectedDate?.toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage || navigator.language], { dateStyle: 'full', timeZone: this.selectedTimezone }))
-            : '-'), h("div", { key: '4e02d04cc6918076935614be321619a9df16430d', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: 'ad39ae7e3df5e6652b0dad88b98695cfee00e3db', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '23b1e1fd15842a65278a969e1ce3aea0313ea46e' }), TIMEZONE_MAP[this.selectedTimezone])));
+            : '-'), h("div", { key: 'a6151b6f505de22f748fcd959c5aa04721a4dd52', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '9190417c554a5e960841a8e132f3995574da14be', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '16f199ce28c18cc975bd8ade52f6b4fccfbe4455' }), TIMEZONE_MAP[this.selectedTimezone])));
     }
     static get is() { return "nylas-selected-event-card"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +118,7 @@ export class NylasSelectedEventCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "*\nThe selected timezone."
+                    "text": "The selected timezone."
                 },
                 "attribute": "selected-timezone",
                 "reflect": false,

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

	@@ -1 +1 @@
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":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { Timeslot } from '@nylas/core';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\n\n/*\n The `nylas-selected-event-card` component is a UI component that displays the selected event card.\n \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 ~~/*\~~n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected language.\n */\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: string;\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 if (!this.selectedDate) {\n console.warn('[nylas-selected-event-card] \"selectedDate\" prop is not provided.');\n }\n if (!this.selectedTimeslot) {\n console.warn('[nylas-selected-event-card] \"selectedTimeslot\" prop is not provided.');\n }\n const timeFormat = new Intl.DateTimeFormat('en-US', {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n\n this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time as Date));\n this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time as Date));\n }\n\n @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['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 ['scheduler.selectedLanguage', 'selectedLanguage'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nsec\">\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\n ? capitalizeFirstLetter(\n this.selectedDate?.toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage \|\| navigator.language], { dateStyle: 'full', timeZone: this.selectedTimezone }),\n )\n : '-'}\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 </Host>\n );\n }\n}\n"]}
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":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { Timeslot } from '@nylas/core';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\n\n/*\n The `nylas-selected-event-card` component is a UI component that displays the selected event card.\n \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 /\n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected language.\n */\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: string;\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 if (!this.selectedDate) {\n console.warn('[nylas-selected-event-card] \"selectedDate\" prop is not provided.');\n }\n if (!this.selectedTimeslot) {\n console.warn('[nylas-selected-event-card] \"selectedTimeslot\" prop is not provided.');\n }\n const timeFormat = new Intl.DateTimeFormat('en-US', {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n\n this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time as Date));\n this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time as Date));\n }\n\n @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['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 ['scheduler.selectedLanguage', 'selectedLanguage'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nsec\">\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\n ? capitalizeFirstLetter(\n this.selectedDate?.toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage \|\| navigator.language], { dateStyle: 'full', timeZone: this.selectedTimezone }),\n )\n : '-'}\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 </Host>\n );\n }\n}\n"]}

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

@@ -1,6 +1,29 @@
 :host {
   display: block;
   height: calc(100% - 48px);
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
 }
 .time-picker-wrapper {

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

@@ -29,11 +29,11 @@ export class NylasTimeslotPicker {
         this.handleMouseLeave = () => {
             this.hoveredTimeslotIndex = -1;
         };
-        this.selectedDate = new Date();
         this.availability = undefined;
-        this.selectedTimeslot = undefined;
         this.isLoading = undefined;
+        this.selectedTimeslot = undefined;
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.selectedDate = new Date();
         this.selectedLanguage = undefined;
         this.times = [];
         this.hoveredTimeslotIndex = undefined;
@@ -62,12 +62,12 @@ export class NylasTimeslotPicker {
     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`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });
     }
     async componentDidLoad() {
         debug(`[nylas-timeslot-picker] Component did load`);
+        const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
+        this.times = availableTimes || [];
     }
     getTimeslotId(date, index) {
         return `${date.toLocaleDateString()}-${index}`;
@@ -122,27 +122,6 @@ export class NylasTimeslotPicker {
     }
     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,
@@ -160,10 +139,33 @@ export class NylasTimeslotPicker {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The available timeslots."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The available timeslots."
+                        }],
+                    "text": ""
                 }
             },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The loading state prop. Used to display loading state when fetching availability."
+                        }],
+                    "text": ""
+                },
+                "attribute": "loading-state",
+                "reflect": false
+            },
             "selectedTimeslot": {
                 "type": "unknown",
                 "mutable": false,
@@ -185,23 +187,6 @@ export class NylasTimeslotPicker {
                     "text": "The selected timeslot."
                 }
             },
-            "isLoading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The loading state prop. Used to display loading state when fetching availability."
-                },
-                "attribute": "loading-state",
-                "reflect": false
-            },
             "selectedTimezone": {
                 "type": "string",
                 "mutable": false,
@@ -220,6 +205,27 @@ export class NylasTimeslotPicker {
                 "reflect": false,
                 "defaultValue": "Intl.DateTimeFormat().resolvedOptions().timeZone"
             },
+            "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()"
+            },
             "selectedLanguage": {
                 "type": "string",
                 "mutable": false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-timeslot-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/*\n The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n \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 isLoading?: boolean;\n /\n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n /\n The selected language.\n /\n @Prop() selectedLanguage?: string;\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 @Watch('selectedLanguage')\n selectedLanguageChanged(newLanguage: string) {\n i18next.changeLanguage(newLanguage);\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 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`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\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 emails: timeslot.emails,\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: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n }\n\n @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['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.selectedLanguage', 'selectedLanguage'],\n ['scheduler.isLoading', 'isLoading'],\n ]),\n eventToProps: {\n timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n nylasSchedulerConnector.scheduler.selectTime(event.detail);\n },\n timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n if (event.detail) {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n if (this.isLoading) {\n return (\n <Host>\n <div class={'loading'}>\n {new Array(6).fill(0).map((_, i) => (\n <div class={'timeslot-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={'timeslots'}>\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 <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n </button-component>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-timeslot-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/*\n The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n \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 @standalone\n * The available timeslots.\n /\n @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n /\n The selected timeslot.\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 The selected date.\n /\n @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n /\n The selected language.\n /\n @Prop() selectedLanguage?: string;\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 @Watch('selectedLanguage')\n selectedLanguageChanged(newLanguage: string) {\n i18next.changeLanguage(newLanguage);\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 connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n }\n\n async componentDidLoad() {\n debug(`[nylas-timeslot-picker] Component did load`);\n const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\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 emails: timeslot.emails,\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: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n }\n\n @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['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.selectedLanguage', 'selectedLanguage'],\n ['scheduler.isLoading', 'isLoading'],\n ]),\n eventToProps: {\n timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n nylasSchedulerConnector.scheduler.selectTime(event.detail);\n },\n timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n if (event.detail) {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n if (this.isLoading) {\n return (\n <Host>\n <div class={'loading'}>\n {new Array(6).fill(0).map((_, i) => (\n <div class={'timeslot-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={'timeslots'}>\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 <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n </button-component>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}