npm - @nylas/web-elements - Versions diffs - 0.0.0-test-20250319204140 → 0.0.0-test-20250320184617 - Mend

@nylas/web-elements 0.0.0-test-20250319204140 → 0.0.0-test-20250320184617

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 (172) hide show

package/dist/collection/types/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AA8FA,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,mCAAe,CAAA;IACf,uCAAmB,CAAA;IACnB,iCAAa,CAAA;IACb,uCAAmB,CAAA;AACrB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B","sourcesContent":["export interface NylasResponse<Data = any> {\n request_id: string;\n data?: Data;\n error?: {\n message: string;\n type: string;\n };\n}\n\n// Avaliability\nexport interface OpenHours {\n days: number[];\n exDates: string[];\n timezone: string;\n start: string;\n end: string;\n}\n\nexport interface MeetingBuffer {\n before: number;\n after: number;\n}\n\n// Scheduling\nexport interface UpdateConfiguration extends Omit<Configuration, 'id'> {}\n\nexport interface ParticipantAvailability {\n calendar_ids: string[];\n open_hours?: OpenHours[];\n}\n\nexport type NylasSchedulerBookingParticipant = { name: string; email: string; nameReadOnly?: boolean; emailReadOnly?: boolean };\n\nexport type NylasSchedulerBookingData = {\n primaryParticipant: NylasSchedulerBookingParticipant;\n startTime?: Date;\n endTime?: Date;\n timezone?: string;\n language?: string;\n guests?: NylasSchedulerBookingParticipant[];\n additionalFields?: Record<\n string,\n {\n value: string;\n type?: string;\n readOnly?: boolean;\n }\n >;\n};\n\nexport type OpenHour = {\n days: number[]; // [1, 2, 3, 4, 5]\n start: string; // \"09:00\"\n end: string; // \"17:00\"\n timezone: string; // \"America/Los_Angeles\"\n};\n\nexport type Timeslot = {\n start_time: Date;\n end_time: Date;\n emails?: string[];\n capacity?: number;\n event_id?: string;\n master_id?: string;\n calendar_id?: string;\n};\n\nexport type ThemeConfig = Partial<{\n '--nylas-primary': string;\n '--nylas-info': string;\n '--nylas-success': string;\n '--nylas-warning': string;\n '--nylas-error': string;\n '--nylas-error-pressed': string;\n '--nylas-base-0': string;\n '--nylas-base-25': string;\n '--nylas-base-50': string;\n '--nylas-base-100': string;\n '--nylas-base-200': string;\n '--nylas-base-300': string;\n '--nylas-base-400': string;\n '--nylas-base-500': string;\n '--nylas-base-600': string;\n '--nylas-base-700': string;\n '--nylas-base-800': string;\n '--nylas-base-900': string;\n '--nylas-base-950': string;\n '--nylas-font-family': string;\n '--nylas-font-size': string;\n '--nylas-border-radius': string;\n '--nylas-border-radius-2x': string;\n '--nylas-border-radius-3x': string;\n}>;\n\nexport enum NotificationType {\n Error = 'error',\n Warning = 'warning',\n Info = 'info',\n Success = 'success',\n}\n\nexport type Notification = {\n id: string;\n type: NotificationType;\n title: string;\n code?: number;\n category: string;\n description?: string;\n ttl?: number \| 'none';\n};\n\nexport type BookingType = 'booking' \| 'organizer-confirmation' \| 'custom-confirmation';\n\nexport type AvailabilityMethod = 'max-fairness' \| 'max-availability' \| 'collective';\n\nexport type ConferenceProvider = 'GoogleMeetConferenceProvider' \| 'MicrosoftTeamsConferenceProvider' \| 'ZoomConferenceProvider' \| 'OnlineMeetingProviderMicrosoftTeams';\n\nexport type ReminderMethod = 'email' \| 'webhook';\n\nexport interface Rules {\n availability_method: AvailabilityMethod;\n buffer: MeetingBuffer;\n default_open_hours: OpenHours[];\n round_robin_group_id: string;\n}\n\nexport interface ConferenceDetail {\n meeting_code?: string; // zoom, GTM, microsoft teams\n password?: string; // zoom, webex\n url?: string; // zoom, webex, GTM, meet, microsoft teams\n pin?: string; // webex, meet\n phone?: string[]; // GTM, meet, microsoft teams\n}\n\nexport interface Conference {\n provider?: ConferenceProvider;\n details?: ConferenceDetail;\n autocreate?: { [key: string]: any };\n}\n\nexport interface ParticipantBooking {\n calendar_id: string;\n}\n\nexport interface Participant {\n email: string;\n name?: string;\n is_organizer?: boolean;\n availability?: ParticipantAvailability;\n booking?: ParticipantBooking;\n}\n\nexport interface EventReminder {\n type: ReminderMethod;\n minutes_before_event: number;\n recipient?: string;\n email_subject?: string;\n}\n\nexport interface Availability {\n duration_minutes: number;\n interval_minutes?: number;\n round_to?: number;\n availability_rules?: Rules;\n}\n\nexport interface EventBooking {\n title: string;\n description?: string;\n location?: string;\n timezone?: string;\n booking_type: BookingType;\n conferencing?: Conference;\n hide_participants?: boolean;\n disable_emails?: boolean;\n reminders?: EventReminder[];\n}\n\nexport interface Appearance {\n color?: string;\n submit_button_label?: string;\n thank_you_message?: string;\n company_logo_url?: string;\n}\n\nexport interface Scheduler {\n available_days_in_future?: number;\n min_cancellation_notice: number;\n min_booking_notice?: number;\n rescheduling_url?: string;\n cancellation_url?: string;\n organizer_confirmation_url?: string;\n cancellation_policy?: string;\n hide_additional_guests?: boolean;\n hide_cancellation_options?: boolean;\n hide_rescheduling_options?: boolean;\n additional_fields?: Record<string, AdditionalFields>;\n email_template?: EmailTemplate;\n confirmation_redirect_url?: string;\n}\nexport interface AdditionalFields {\n type: string;\n required: boolean;\n order: number;\n options?: string[];\n label?: string;\n default?: string;\n}\n\nexport interface EmailTemplate {\n logo: string;\n booking_confirmed: BookingConfirmed;\n show_nylas_branding: boolean;\n}\n\nexport interface BookingConfirmed {\n title: string;\n body: string;\n}\n\nexport interface Configuration {\n id: string;\n version: string;\n type?: string;\n requires_session_auth?: boolean;\n participants: Participant[];\n availability: Availability;\n event_booking: EventBooking;\n scheduler: Partial<Scheduler>;\n slug: string;\n appearance: Appearance;\n name: string;\n}\n\nexport interface GroupBooking {\n booking_type: BookingType; // Only 'booking' is supported\n disable_emails?: boolean;\n reminders?: EventReminder[];\n conferencing?: Conference;\n calendar_id: string;\n default_capacity: number;\n}\n\nexport interface GroupConfiguration {\n id: string;\n name: string;\n slug: string;\n requires_session_auth?: boolean;\n type: 'group';\n group_booking: GroupBooking;\n scheduler: Scheduler;\n appearance: Appearance;\n}\n\nexport interface Creator {\n name: string;\n email: string;\n}\nexport interface AdditionalParticipant {\n name: string;\n email: string;\n calendars: {\n id: string;\n name: string;\n object?: 'calendar';\n is_primary?: boolean;\n is_owned_by_user?: boolean;\n read_only?: boolean;\n timezone?: string;\n }[];\n}\n\nexport interface GroupEvent {\n id?: string;\n title: string;\n busy: boolean;\n participants: NylasSchedulerBookingParticipant[];\n resources: {\n name: string;\n email: string;\n }[];\n description: string;\n when: {\n start_time: number;\n end_time: number;\n start_timezone?: string;\n end_timezone?: string;\n };\n location: string;\n rrule: string[];\n capacity: number;\n}\n\nexport type RecurrenceUpdateOption = 'this' \| 'future' \| 'all';\nexport type RecurrenceDeleteOption = 'this' \| 'future' \| 'all';\n\nexport type Snapshot = {\n busy: boolean;\n calendar_id: string;\n hide_participants: boolean;\n ical_uid: string;\n organizer: {\n name: string;\n email: string;\n };\n participants: {\n email: string;\n status: string;\n }[];\n resources: any[];\n read_only: boolean;\n recurrence: string[];\n reminders: {\n use_default: boolean;\n overrides: any[];\n };\n title: string;\n description?: string;\n location?: string;\n conferencing?: Conference;\n visibility: string;\n creator: {\n name: string;\n email: string;\n };\n html_link: string;\n grant_id: string;\n id: string;\n object: string;\n status: string;\n when: {\n start_timezone: string;\n end_timezone: string;\n object: string;\n start_time: number; // Unix timestamp\n end_time: number; // Unix timestamp\n };\n created_at: number; // Unix timestamp\n updated_at: number; // Unix timestamp\n};\n\nexport interface GroupEventAPIData {\n event: EventDetails;\n group_event_info?: GroupEventInfo;\n}\n\nexport type EventDetails = {\n busy: boolean;\n calendar_id: string;\n conferencing: {\n provider: ConferenceProvider;\n details: {\n meeting_code: string;\n url: string;\n pin: string;\n phone: string[];\n };\n };\n hide_participants: boolean;\n ical_uid: string;\n organizer: {\n name: string;\n email: string;\n };\n participants: Array<{\n email: string;\n status: 'yes' \| 'no' \| 'noreply';\n comment?: string;\n }>;\n resources: string[];\n read_only: boolean;\n reminders: {\n use_default: boolean;\n overrides: Array<{\n method?: string;\n minutes?: number;\n }>;\n };\n title: string;\n description?: string;\n location?: string;\n visibility: 'default' \| 'public' \| 'private';\n creator: {\n name: string;\n email: string;\n };\n html_link: string;\n master_event_id: string;\n color_id: string;\n grant_id: string;\n id: string;\n object: 'event';\n status: 'confirmed' \| 'tentative' \| 'cancelled';\n when: {\n start_timezone: string;\n end_timezone: string;\n object: 'timespan';\n start_time: number;\n end_time: number;\n };\n created_at: number;\n updated_at: number;\n original_start_time: number;\n};\n\nexport type GroupEventInfo = {\n event_id: string;\n calendar_id: string;\n master_id: string;\n config_id: string;\n capacity: number;\n type: 'updated_event' \| 'single_event' \| 'master_event';\n booked: boolean;\n finished: boolean;\n participants: Array<{\n email: string;\n is_organizer: boolean;\n name: string;\n timezone: string;\n }>;\n snapshot: any \| null;\n snapshot_expires_at: number;\n rrule: string[] \| null;\n exceptions: {\n event_id: string;\n capacity: number;\n participants: Array<{\n email: string;\n is_organizer: boolean;\n name: string;\n timezone: string;\n }>;\n }[];\n};\n\nexport type ImportGroupEventDetails = {\n event_id: string;\n calendar_id: string;\n capacity: number;\n participants: Participant[];\n organizer: {\n name: string;\n email: string;\n };\n};\n\nexport type ImportGroupEventResponse = {\n imported_events: string[];\n import_failed: {\n event_id: string;\n reason: string;\n }[];\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AA8FA,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,mCAAe,CAAA;IACf,uCAAmB,CAAA;IACnB,iCAAa,CAAA;IACb,uCAAmB,CAAA;AACrB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B;AAmWD,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,wCAAuB,CAAA;IACvB,4BAAW,CAAA;IACX,8BAAa,CAAA;AACf,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAQD,MAAM,CAAN,IAAY,kBAWX;AAXD,WAAY,kBAAkB;IAC5B,qEAA+C,CAAA;IAC/C,yDAAmC,CAAA;IACnC,mEAA6C,CAAA;IAC7C,mEAA6C,CAAA;IAC7C,qDAA+B,CAAA;IAC/B,yCAAmB,CAAA;IACnB,+DAAyC,CAAA;IACzC,2DAAqC,CAAA;IACrC,2DAAqC,CAAA;IACrC,mDAA6B,CAAA;AAC/B,CAAC,EAXW,kBAAkB,KAAlB,kBAAkB,QAW7B;AAED,MAAM,CAAN,IAAY,YAQX;AARD,WAAY,YAAY;IACtB,mDAAmC,CAAA;IACnC,+CAA+B,CAAA;IAC/B,iDAAiC,CAAA;IACjC,+DAA+C,CAAA;IAC/C,iEAAiD,CAAA;IACjD,iDAAiC,CAAA;IACjC,mDAAmC,CAAA;AACrC,CAAC,EARW,YAAY,KAAZ,YAAY,QAQvB","sourcesContent":["export interface NylasResponse<Data = any> {\n request_id: string;\n data?: Data;\n error?: {\n message: string;\n type: string;\n };\n}\n\n// Avaliability\nexport interface OpenHours {\n days: number[];\n exDates: string[];\n timezone: string;\n start: string;\n end: string;\n}\n\nexport interface MeetingBuffer {\n before: number;\n after: number;\n}\n\n// Scheduling\nexport interface UpdateConfiguration extends Omit<Configuration, 'id'> {}\n\nexport interface ParticipantAvailability {\n calendar_ids: string[];\n open_hours?: OpenHours[];\n}\n\nexport type NylasSchedulerBookingParticipant = { name: string; email: string; nameReadOnly?: boolean; emailReadOnly?: boolean };\n\nexport type NylasSchedulerBookingData = {\n primaryParticipant: NylasSchedulerBookingParticipant;\n startTime?: Date;\n endTime?: Date;\n timezone?: string;\n language?: string;\n guests?: NylasSchedulerBookingParticipant[];\n additionalFields?: Record<\n string,\n {\n value: string;\n type?: string;\n readOnly?: boolean;\n }\n >;\n};\n\nexport type OpenHour = {\n days: number[]; // [1, 2, 3, 4, 5]\n start: string; // \"09:00\"\n end: string; // \"17:00\"\n timezone: string; // \"America/Los_Angeles\"\n};\n\nexport type Timeslot = {\n start_time: Date;\n end_time: Date;\n emails?: string[];\n capacity?: number;\n event_id?: string;\n master_id?: string;\n calendar_id?: string;\n};\n\nexport type ThemeConfig = Partial<{\n '--nylas-primary': string;\n '--nylas-info': string;\n '--nylas-success': string;\n '--nylas-warning': string;\n '--nylas-error': string;\n '--nylas-error-pressed': string;\n '--nylas-base-0': string;\n '--nylas-base-25': string;\n '--nylas-base-50': string;\n '--nylas-base-100': string;\n '--nylas-base-200': string;\n '--nylas-base-300': string;\n '--nylas-base-400': string;\n '--nylas-base-500': string;\n '--nylas-base-600': string;\n '--nylas-base-700': string;\n '--nylas-base-800': string;\n '--nylas-base-900': string;\n '--nylas-base-950': string;\n '--nylas-font-family': string;\n '--nylas-font-size': string;\n '--nylas-border-radius': string;\n '--nylas-border-radius-2x': string;\n '--nylas-border-radius-3x': string;\n}>;\n\nexport enum NotificationType {\n Error = 'error',\n Warning = 'warning',\n Info = 'info',\n Success = 'success',\n}\n\nexport type Notification = {\n id: string;\n type: NotificationType;\n title: string;\n code?: number;\n category: string;\n description?: string;\n ttl?: number \| 'none';\n};\n\nexport type BookingType = 'booking' \| 'organizer-confirmation' \| 'custom-confirmation';\n\nexport type AvailabilityMethod = 'max-fairness' \| 'max-availability' \| 'collective';\n\nexport type ConferenceProvider = 'GoogleMeetConferenceProvider' \| 'MicrosoftTeamsConferenceProvider' \| 'ZoomConferenceProvider' \| 'OnlineMeetingProviderMicrosoftTeams';\n\nexport type ReminderMethod = 'email' \| 'webhook';\n\nexport interface Rules {\n availability_method: AvailabilityMethod;\n buffer: MeetingBuffer;\n default_open_hours: OpenHours[];\n round_robin_group_id: string;\n}\n\nexport interface ConferenceDetail {\n meeting_code?: string; // zoom, GTM, microsoft teams\n password?: string; // zoom, webex\n url?: string; // zoom, webex, GTM, meet, microsoft teams\n pin?: string; // webex, meet\n phone?: string[]; // GTM, meet, microsoft teams\n}\n\nexport interface Conference {\n provider?: ConferenceProvider;\n details?: ConferenceDetail;\n autocreate?: { [key: string]: any };\n}\n\nexport interface ParticipantBooking {\n calendar_id: string;\n}\n\nexport interface Participant {\n email: string;\n name?: string;\n is_organizer?: boolean;\n availability?: ParticipantAvailability;\n booking?: ParticipantBooking;\n}\n\nexport interface EventReminder {\n type: ReminderMethod;\n minutes_before_event: number;\n recipient?: string;\n email_subject?: string;\n}\n\nexport interface Availability {\n duration_minutes: number;\n interval_minutes?: number;\n round_to?: number;\n availability_rules?: Rules;\n}\n\nexport interface EventBooking {\n title: string;\n description?: string;\n location?: string;\n timezone?: string;\n booking_type: BookingType;\n conferencing?: Conference;\n hide_participants?: boolean;\n disable_emails?: boolean;\n reminders?: EventReminder[];\n}\n\nexport interface Appearance {\n color?: string;\n submit_button_label?: string;\n thank_you_message?: string;\n company_logo_url?: string;\n}\n\nexport interface Scheduler {\n available_days_in_future?: number;\n min_cancellation_notice: number;\n min_booking_notice?: number;\n rescheduling_url?: string;\n cancellation_url?: string;\n organizer_confirmation_url?: string;\n cancellation_policy?: string;\n hide_additional_guests?: boolean;\n hide_cancellation_options?: boolean;\n hide_rescheduling_options?: boolean;\n additional_fields?: Record<string, AdditionalFields>;\n email_template?: EmailTemplate;\n confirmation_redirect_url?: string;\n}\nexport interface AdditionalFields {\n type: string;\n required: boolean;\n order: number;\n options?: string[];\n label?: string;\n default?: string;\n}\n\nexport interface EmailTemplate {\n logo: string;\n booking_confirmed: BookingConfirmed;\n show_nylas_branding: boolean;\n}\n\nexport interface BookingConfirmed {\n title: string;\n body: string;\n}\n\nexport interface Configuration {\n id: string;\n version: string;\n type?: string;\n requires_session_auth?: boolean;\n participants: Participant[];\n availability: Availability;\n event_booking: EventBooking;\n scheduler: Partial<Scheduler>;\n slug: string;\n appearance: Appearance;\n name: string;\n}\n\nexport interface GroupBooking {\n booking_type: BookingType; // Only 'booking' is supported\n disable_emails?: boolean;\n reminders?: EventReminder[];\n conferencing?: Conference;\n calendar_id: string;\n default_capacity: number;\n}\n\nexport interface GroupConfiguration {\n id: string;\n name: string;\n slug: string;\n requires_session_auth?: boolean;\n type: 'group';\n group_booking: GroupBooking;\n scheduler: Scheduler;\n appearance: Appearance;\n}\n\nexport interface Creator {\n name: string;\n email: string;\n}\nexport interface AdditionalParticipant {\n name: string;\n email: string;\n calendars: {\n id: string;\n name: string;\n object?: 'calendar';\n is_primary?: boolean;\n is_owned_by_user?: boolean;\n read_only?: boolean;\n timezone?: string;\n }[];\n}\n\nexport interface GroupEvent {\n id?: string;\n title: string;\n busy: boolean;\n participants: NylasSchedulerBookingParticipant[];\n resources: {\n name: string;\n email: string;\n }[];\n description: string;\n when: {\n start_time: number;\n end_time: number;\n start_timezone?: string;\n end_timezone?: string;\n };\n location: string;\n rrule: string[];\n capacity: number;\n}\n\nexport type RecurrenceUpdateOption = 'this' \| 'future' \| 'all';\nexport type RecurrenceDeleteOption = 'this' \| 'future' \| 'all';\n\nexport type Snapshot = {\n busy: boolean;\n calendar_id: string;\n hide_participants: boolean;\n ical_uid: string;\n organizer: {\n name: string;\n email: string;\n };\n participants: {\n email: string;\n status: string;\n }[];\n resources: any[];\n read_only: boolean;\n recurrence: string[];\n reminders: {\n use_default: boolean;\n overrides: any[];\n };\n title: string;\n description?: string;\n location?: string;\n conferencing?: Conference;\n visibility: string;\n creator: {\n name: string;\n email: string;\n };\n html_link: string;\n grant_id: string;\n id: string;\n object: string;\n status: string;\n when: {\n start_timezone: string;\n end_timezone: string;\n object: string;\n start_time: number; // Unix timestamp\n end_time: number; // Unix timestamp\n };\n created_at: number; // Unix timestamp\n updated_at: number; // Unix timestamp\n};\n\nexport interface GroupEventAPIData {\n event: EventDetails;\n group_event_info?: GroupEventInfo;\n}\n\nexport type EventDetails = {\n busy: boolean;\n calendar_id: string;\n conferencing: {\n provider: ConferenceProvider;\n details: {\n meeting_code: string;\n url: string;\n pin: string;\n phone: string[];\n };\n };\n hide_participants: boolean;\n ical_uid: string;\n organizer: {\n name: string;\n email: string;\n };\n participants: Array<{\n email: string;\n status: 'yes' \| 'no' \| 'noreply';\n comment?: string;\n }>;\n resources: string[];\n read_only: boolean;\n reminders: {\n use_default: boolean;\n overrides: Array<{\n method?: string;\n minutes?: number;\n }>;\n };\n title: string;\n description?: string;\n location?: string;\n visibility: 'default' \| 'public' \| 'private';\n creator: {\n name: string;\n email: string;\n };\n html_link: string;\n master_event_id: string;\n color_id: string;\n grant_id: string;\n id: string;\n object: 'event';\n status: 'confirmed' \| 'tentative' \| 'cancelled';\n when: {\n start_timezone: string;\n end_timezone: string;\n object: 'timespan';\n start_time: number;\n end_time: number;\n };\n created_at: number;\n updated_at: number;\n original_start_time: number;\n};\n\nexport type GroupEventInfo = {\n event_id: string;\n calendar_id: string;\n master_id: string;\n config_id: string;\n capacity: number;\n type: 'updated_event' \| 'single_event' \| 'master_event';\n booked: boolean;\n finished: boolean;\n participants: Array<{\n email: string;\n is_organizer: boolean;\n name: string;\n timezone: string;\n }>;\n snapshot: any \| null;\n snapshot_expires_at: number;\n rrule: string[] \| null;\n exceptions: {\n event_id: string;\n capacity: number;\n participants: Array<{\n email: string;\n is_organizer: boolean;\n name: string;\n timezone: string;\n }>;\n }[];\n};\n\nexport type ImportGroupEventDetails = {\n event_id: string;\n calendar_id: string;\n capacity: number;\n participants: Participant[];\n organizer: {\n name: string;\n email: string;\n };\n};\n\nexport type ImportGroupEventResponse = {\n imported_events: string[];\n import_failed: {\n event_id: string;\n reason: string;\n }[];\n};\n\nexport enum ErrorCategory {\n Component = 'component',\n Api = 'api',\n Auth = 'auth',\n}\n\nexport interface ErrorDetails {\n title: string;\n message: string;\n category: ErrorCategory;\n}\n\nexport enum ComponentErrorType {\n endtime_not_in_future = 'endtime_not_in_future',\n no_booking_info = 'no_booking_info',\n no_timeslot_selected = 'no_timeslot_selected',\n no_timezone_selected = 'no_timezone_selected',\n no_booking_id = 'no_booking_id',\n no_salt = 'no_salt',\n invalid_start_time = 'invalid_start_time',\n invalid_end_time = 'invalid_end_time',\n invalid_timezone = 'invalid_timezone',\n no_config_id = 'no_config_id',\n}\n\nexport enum APIErrorType {\n invalid_session = 'invalid_session',\n general_error = 'general_error',\n internal_error = 'internal_error',\n invalid_request_error = 'invalid_request_error',\n timeslot_not_available = 'timeslot_not_available',\n provider_error = 'provider_error',\n not_found_error = 'not_found_error',\n}\n\nexport interface KeyPoint {\n time: number;\n text: string;\n active?: boolean;\n}"]}

package/dist/components/button-component2.js CHANGED Viewed

@@ -21,7 +21,7 @@ const ButtonComponent = proxyCustomElement(class ButtonComponent extends HTMLEle
     }
     render() {
         const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');
-        return (h("button", { key: 'f7ab1093a487b82272e55f430f12827ecefe6f79', class: className, disabled: this.disabled, type: "type", title: this.tooltip, onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, !!this.isLoading && h("loading-icon", { slot: "icon" }), h("slot", { key: '54acbf084444ac5c115b3dab60acb43a8a391ebd' })));
+        return (h("button", { key: '0d4e2bd6da64d91dc45672f11baf5ab9e2952788', class: className, disabled: this.disabled, type: "type", title: this.tooltip, onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, !!this.isLoading && h("loading-icon", { slot: "icon" }), h("slot", { key: 'f92c1e76e0bd689686f269411bae2762c57028ac' })));
     }
     static get style() { return ButtonComponentStyle0; }
 }, [6, "button-component", {

package/dist/components/button-component2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"button-component2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,m1EAAm1E,CAAC;AAC/2E,8BAAe,kBAAkB;;~~MCOpB~~,eAAe;;;;uBAEI,SAAS;wBAGX,KAAK;oBAEV,QAAQ;uBACL,EAAE;yBACC,KAAK;;;;;;;IAOlC,MAAM;QACJ,MAAM,SAAS,GAAG,UAAU,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CAAC;QAEhF,QACE,+DACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,IAEvB,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,oBAAc,IAAI,EAAC,MAAM,GAAgB,EAC9D,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/design-system/button-component/button-component.scss?tag=button-component&encapsulation=scoped","src/components/design-system/button-component/button-component.tsx"],"sourcesContent":["@import '../../../common/mixins/buttons.scss';\n@import '../../../common/styles/variables.scss';\n\nbutton {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n height: 48px;\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n font-size: 16px;\n line-height: 24px;\n padding: 0 1rem;\n cursor: pointer;\n font-family: var(--nylas-font-family);\n font-weight: 600;\n width: 100%;\n\n @media #{$mobile} {\n width: 100%;\n }\n\n &.button-primary {\n @include primary-button;\n }\n\n &.button-basic {\n border: 1px solid var(--nylas-base-300);\n color: var(--nylas-base-700);\n background: transparent;\n\n &:hover {\n background: transparent;\n border-color: var(--nylas-primary);\n }\n\n &:active {\n background: transparent;\n border-color: var(--nylas-base-600);\n border-width: 2px;\n }\n\n &:disabled {\n background: transparent;\n border-color: var(--nylas-base-300);\n color: var(--nylas-base-300);\n cursor: not-allowed;\n }\n }\n\n &.button-destructive {\n border: 1px solid var(--nylas-base-300);\n color: var(--nylas-error);\n background: transparent;\n\n &:hover {\n background: transparent;\n border-color: var(--nylas-error);\n }\n\n &:active {\n background: transparent;\n border-color: var(--nylas-error-pressed);\n border-width: 2px;\n color: var(--nylas-error-pressed);\n }\n\n &:disabled {\n background: transparent;\n border-color: var(--nylas-base-300);\n color: var(--nylas-base-300);\n cursor: not-allowed;\n }\n }\n\n &.button-invisible {\n background: transparent;\n color: var(--nylas-base-800);\n border: none;\n\n &:hover {\n background: var(--nylas-base-50);\n color: var(--nylas-primary);\n }\n\n &:active {\n background: var(--nylas-base-50);\n color: var(--nylas-base-850);\n }\n\n &:disabled {\n background: transparent;\n color: var(--nylas-base-300);\n cursor: not-allowed;\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\~~ntype~~ ButtonType = ~~'primary'~~ \| '~~basic~~' ~~\| 'destructive' \| 'invisible'~~;\n\n@Component({\n tag: 'button-component',\n styleUrl: 'button-component.scss',\n scoped: true,\n})\nexport class ButtonComponent {\n // Define a prop to accept the button type\n @Prop() variant: ButtonType = 'primary';\n\n // Define a prop for disabled state\n @Prop() disabled: boolean = false;\n\n @Prop() type: string = 'button';\n @Prop() tooltip: string = '';\n @Prop() isLoading: boolean = false;\n @Prop() clickHandler?: (event: MouseEvent) => void;\n @Prop() mouseOverHandler?: (event: MouseEvent) => void;\n @Prop() mouseOutHandler?: (event: MouseEvent) => void;\n @Prop() focusHandler?: (event: FocusEvent) => void;\n @Prop() blurHandler?: (event: FocusEvent) => void;\n\n render() {\n const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');\n\n return (\n <button\n class={className}\n disabled={this.disabled}\n type=\"type\"\n title={this.tooltip}\n onClick={this.clickHandler}\n onMouseOver={this.mouseOverHandler}\n onMouseOut={this.mouseOutHandler}\n onFocus={this.focusHandler}\n onBlur={this.blurHandler}\n >\n {!!this.isLoading && <loading-icon slot=\"icon\"></loading-icon>}\n <slot></slot>\n </button>\n );\n }\n}\n"],"version":3}
1	+ {"file":"button-component2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,m1EAAm1E,CAAC;AAC/2E,8BAAe,kBAAkB;;MCMpB,eAAe;;;;uBAEI,SAAS;wBAGX,KAAK;oBAEV,QAAQ;uBACL,EAAE;yBACC,KAAK;;;;;;;IAOlC,MAAM;QACJ,MAAM,SAAS,GAAG,UAAU,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CAAC;QAEhF,QACE,+DACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,IAEvB,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,oBAAc,IAAI,EAAC,MAAM,GAAgB,EAC9D,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/design-system/button-component/button-component.scss?tag=button-component&encapsulation=scoped","src/components/design-system/button-component/button-component.tsx"],"sourcesContent":["@import '../../../common/mixins/buttons.scss';\n@import '../../../common/styles/variables.scss';\n\nbutton {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n height: 48px;\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n font-size: 16px;\n line-height: 24px;\n padding: 0 1rem;\n cursor: pointer;\n font-family: var(--nylas-font-family);\n font-weight: 600;\n width: 100%;\n\n @media #{$mobile} {\n width: 100%;\n }\n\n &.button-primary {\n @include primary-button;\n }\n\n &.button-basic {\n border: 1px solid var(--nylas-base-300);\n color: var(--nylas-base-700);\n background: transparent;\n\n &:hover {\n background: transparent;\n border-color: var(--nylas-primary);\n }\n\n &:active {\n background: transparent;\n border-color: var(--nylas-base-600);\n border-width: 2px;\n }\n\n &:disabled {\n background: transparent;\n border-color: var(--nylas-base-300);\n color: var(--nylas-base-300);\n cursor: not-allowed;\n }\n }\n\n &.button-destructive {\n border: 1px solid var(--nylas-base-300);\n color: var(--nylas-error);\n background: transparent;\n\n &:hover {\n background: transparent;\n border-color: var(--nylas-error);\n }\n\n &:active {\n background: transparent;\n border-color: var(--nylas-error-pressed);\n border-width: 2px;\n color: var(--nylas-error-pressed);\n }\n\n &:disabled {\n background: transparent;\n border-color: var(--nylas-base-300);\n color: var(--nylas-base-300);\n cursor: not-allowed;\n }\n }\n\n &.button-invisible {\n background: transparent;\n color: var(--nylas-base-800);\n border: none;\n\n &:hover {\n background: var(--nylas-base-50);\n color: var(--nylas-primary);\n }\n\n &:active {\n background: var(--nylas-base-50);\n color: var(--nylas-base-850);\n }\n\n &:disabled {\n background: transparent;\n color: var(--nylas-base-300);\n cursor: not-allowed;\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonType } from '@nylas/core';\n@Component({\n tag: 'button-component',\n styleUrl: 'button-component.scss',\n scoped: true,\n})\nexport class ButtonComponent {\n // Define a prop to accept the button type\n @Prop() variant: ButtonType = 'primary';\n\n // Define a prop for disabled state\n @Prop() disabled: boolean = false;\n\n @Prop() type: string = 'button';\n @Prop() tooltip: string = '';\n @Prop() isLoading: boolean = false;\n @Prop() clickHandler?: (event: MouseEvent) => void;\n @Prop() mouseOverHandler?: (event: MouseEvent) => void;\n @Prop() mouseOutHandler?: (event: MouseEvent) => void;\n @Prop() focusHandler?: (event: FocusEvent) => void;\n @Prop() blurHandler?: (event: FocusEvent) => void;\n\n render() {\n const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');\n\n return (\n <button\n class={className}\n disabled={this.disabled}\n type=\"type\"\n title={this.tooltip}\n onClick={this.clickHandler}\n onMouseOver={this.mouseOverHandler}\n onMouseOut={this.mouseOutHandler}\n onFocus={this.focusHandler}\n onBlur={this.blurHandler}\n >\n {!!this.isLoading && <loading-icon slot=\"icon\"></loading-icon>}\n <slot></slot>\n </button>\n );\n }\n}\n"],"version":3}

package/dist/components/input-dropdown2.js CHANGED Viewed

@@ -194,7 +194,7 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
         }
     }
     render() {
-        return (h("div", { key: '806fa6a509d7a7c78bf6ee1de1dd4cd7a755bab4', class: "dropdown", part: "id_dropdown" }, h("input", { key: 'b594d3517fba52cb85e95220c6d415d672c26a71', type: "text", name: this.name, id: this.name, part: "id_dropdown-input", class: { dropbtn: true, open: this.isOpen }, value: this.inputValue, onClick: (e) => {
+        return (h("div", { key: 'b5f8adbd8c32d84c7036ee60e8ccebbb4e93cd95', class: "dropdown", part: "id_dropdown" }, h("input", { key: '648b04531c8d403b972b439943482758ca961a83', type: "text", name: this.name, id: this.name, part: "id_dropdown-input", class: { dropbtn: true, open: this.isOpen }, value: this.inputValue, onClick: (e) => {
                 this.toggleDropdown();
                 this.shouldAutoScroll = true;
                 this.handleClick(e);

package/dist/components/input-dropdown2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"input-dropdown2.js","mappings":"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","names":[],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n position: relative;\n\n @media #{$mobile} {\n position: unset;\n }\n\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n background: transparent;\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n width: 50px;\n padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n max-width: 306px;\n width: max-content;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid #ccc;\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n labelHTML?: HTMLElement;\n label: string;\n value: string;\n}\n\n/*\n The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n /\n@Component({\n tag: 'input-dropdown',\n styleUrl: 'input-dropdown.scss',\n shadow: true,\n})\nexport class InputDropdown {\n @Element() el!: HTMLElement;\n\n private inputRef?: HTMLInputElement;\n private optionsRef!: HTMLElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n /\n The default selected option\n /\n @Prop() defaultInputOption?: DropdownOption;\n /\n Should show search input\n /\n @Prop() inputValue!: string;\n /\n Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n /\n @Prop() pluralizedLabel: string = '';\n\n /\n This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n /\n @Prop() filterable: boolean = false;\n\n // States\n /\n The selected option\n /\n @State() selectedOption: DropdownOption \| null = this.defaultInputOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n\n /\n The typed value in the input\n /\n @State() typedValue: string = '';\n\n /\n The filtered options based on the search value\n /\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This is used to scroll to the input value.\n /\n @State() shouldAutoScroll: boolean = false;\n\n // Events\n /\n This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(newValue);\n }\n\n @Watch('defaultInputOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n }\n\n @Watch('inputValue')\n inputValueChangedHandler(newValue: string, oldValue: string) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(this.options);\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(this.options);\n // Set the selected option to the first option if no option is selected\n if (!this.selectedOption && !!this.defaultInputOption) {\n this.selectedOption = this.defaultInputOption;\n }\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) \|\| option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(option: DropdownOption): void {\n this.selectedOption = option;\n this.toggleDropdown();\n this.inputOptionChanged.emit({\n value: option.value,\n name: this.name,\n });\n }\n\n handleOnInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.typedValue = value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n this.inputOptionChanged.emit({\n value,\n name: this.name,\n });\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.options[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n const parentElement = this.optionsRef;\n\n this.ariaActivedescendant = option.value.toString();\n if (!childElement \|\| !parentElement) return;\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleClick(event: Event): void {\n if (this.isOpen) {\n const value = (event.target as HTMLInputElement).value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n setTimeout(() => {\n this.scrollToViewWithinParent(optionIndex);\n }, 10);\n }\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' \|\| (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' \|\| (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' \|\| (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n if (!this.isOpen) {\n this.isOpen = true;\n this.shouldAutoScroll = true;\n return;\n }\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' \|\| (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n return (\n <div class=\"dropdown\" part=\"id_dropdown\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"id_dropdown-input\"\n class={{ dropbtn: true, open: this.isOpen }}\n value={this.inputValue}\n onClick={(e: Event) => {\n this.toggleDropdown();\n this.shouldAutoScroll = true;\n this.handleClick(e);\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n />\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option => (\n <li\n tabindex=\"0\"\n key={option.value}\n id={option.value}\n onClick={() => this.selectOption(option)}\n role=\"option\"\n class={{\n focused: this.ariaActivedescendant === option.value.toString(),\n }}\n >\n {option.labelHTML ? option.labelHTML : option.label}\n </li>\n ))}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"input-dropdown2.js","mappings":"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","names":[],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n position: relative;\n\n @media #{$mobile} {\n position: unset;\n }\n\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n background: transparent;\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n width: 50px;\n padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n max-width: 306px;\n width: max-content;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid #ccc;\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption } from '@nylas/core';\n\n/*\n The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n /\n@Component({\n tag: 'input-dropdown',\n styleUrl: 'input-dropdown.scss',\n shadow: true,\n})\nexport class InputDropdown {\n @Element() el!: HTMLElement;\n\n private inputRef?: HTMLInputElement;\n private optionsRef!: HTMLElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n /\n The default selected option\n /\n @Prop() defaultInputOption?: DropdownOption;\n /\n Should show search input\n /\n @Prop() inputValue!: string;\n /\n Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n /\n @Prop() pluralizedLabel: string = '';\n\n /\n This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n /\n @Prop() filterable: boolean = false;\n\n // States\n /\n The selected option\n /\n @State() selectedOption: DropdownOption \| null = this.defaultInputOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n\n /\n The typed value in the input\n /\n @State() typedValue: string = '';\n\n /\n The filtered options based on the search value\n /\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This is used to scroll to the input value.\n /\n @State() shouldAutoScroll: boolean = false;\n\n // Events\n /\n This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(newValue);\n }\n\n @Watch('defaultInputOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n }\n\n @Watch('inputValue')\n inputValueChangedHandler(newValue: string, oldValue: string) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(this.options);\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(this.options);\n // Set the selected option to the first option if no option is selected\n if (!this.selectedOption && !!this.defaultInputOption) {\n this.selectedOption = this.defaultInputOption;\n }\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) \|\| option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(option: DropdownOption): void {\n this.selectedOption = option;\n this.toggleDropdown();\n this.inputOptionChanged.emit({\n value: option.value,\n name: this.name,\n });\n }\n\n handleOnInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.typedValue = value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n this.inputOptionChanged.emit({\n value,\n name: this.name,\n });\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.options[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n const parentElement = this.optionsRef;\n\n this.ariaActivedescendant = option.value.toString();\n if (!childElement \|\| !parentElement) return;\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleClick(event: Event): void {\n if (this.isOpen) {\n const value = (event.target as HTMLInputElement).value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n setTimeout(() => {\n this.scrollToViewWithinParent(optionIndex);\n }, 10);\n }\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' \|\| (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' \|\| (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' \|\| (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n if (!this.isOpen) {\n this.isOpen = true;\n this.shouldAutoScroll = true;\n return;\n }\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' \|\| (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n return (\n <div class=\"dropdown\" part=\"id_dropdown\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"id_dropdown-input\"\n class={{ dropbtn: true, open: this.isOpen }}\n value={this.inputValue}\n onClick={(e: Event) => {\n this.toggleDropdown();\n this.shouldAutoScroll = true;\n this.handleClick(e);\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n />\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option => (\n <li\n tabindex=\"0\"\n key={option.value}\n id={option.value}\n onClick={() => this.selectOption(option)}\n role=\"option\"\n class={{\n focused: this.ariaActivedescendant === option.value.toString(),\n }}\n >\n {option.labelHTML ? option.labelHTML : option.label}\n </li>\n ))}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/multi-select-dropdown2.js CHANGED Viewed

@@ -172,9 +172,9 @@ const MultiSelectDropdown = proxyCustomElement(class MultiSelectDropdown extends
             }, class: { selected: !!option.selected, disabled: !!option.disabled } }, h("label", { htmlFor: option.value }, h("input", { "aria-hidden": "true", id: option.value, type: "checkbox", checked: option.selected, disabled: !!option?.disabled }), h("span", null, option.label))));
     }
     render() {
-        return (h(Host, { key: 'a87b9ea6f73e4c749c08c63c805575334076f0b1' }, h("div", { key: 'cdbd180c5e25b70fbd9195fc8dd7dde69b8b5278', class: "dropdown", part: "msd_dropdown" }, h("label", { key: '009b68e781e50e69a0d4fab76c89df4b6488d688', class: "dropdown-label", part: "msd_dropdown-label" }, h("p", { key: 'f37fb71176dd94a7612cba5b2daf72cdd5234b71' }, h("span", { key: '1d6e74a1d118b042d9c1f0d64684f18a4e9379bf', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("slot", { key: '95bf34bb09e55dda7b5b403ffc77397613b27cad', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '018c052fdea1f8126a97d4b4e021a50880fb6c0e', name: this.name, part: `msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`, class: { dropbtn: true, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, title: this.readOnly ? 'read-only field' : undefined, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '83b3c59f3433d127ed8f1c33903391767bef7323', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '6cc8c8dbccdfd90af145ba6e89107d300965cb55', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
+        return (h(Host, { key: '2211f90c0f5bdcf0d27448fd9ec5568f9aec0234' }, h("div", { key: '9e84a7ed003e9b541a56ab1c0a7cb6d670cbfdd3', class: "dropdown", part: "msd_dropdown" }, h("label", { key: 'fe7b821b156c9fae46422ff67b9900155a545b27', class: "dropdown-label", part: "msd_dropdown-label" }, h("p", { key: '266f5afa814c2da4099fff2592ee079baf8d8094' }, h("span", { key: 'e89025d7da4c7f7368048f9729ca10064ca32e22', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("slot", { key: '15916ee66e8c341e162b65cdbb53df9693371c8a', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '7c17a76d93efa1e3a82d75722cd0a1c5758b9c32', name: this.name, part: `msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`, class: { dropbtn: true, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, title: this.readOnly ? 'read-only field' : undefined, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '3196cb36a75d471989f18d5de3cc689eaa7fe295', name: "select-icon", "aria-hidden": "true" }), h("span", { key: 'c4e1531026c20573bb642f6f494b92c0545957ec', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
             ? this.multipleOptionsSelectedLabel
-            : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '0f373eee7859cac4f775d7749979cea148b0b143', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: '308db18fdce3250ce1759e51f7ab2ead14f7b9ce', width: "16", height: "16" }))), this.error ? (h("span", { class: "error", part: "msd_dropdown_error" }, this.error)) : null, h("div", { key: 'de81fb73c318cd9cb98e9b8f219e1240139b0708', class: 'selected-options' }, this.getSelectedOptions().map(option => (h("span", { class: "selected-option" }, option.label, h("button", { disabled: this.readOnly || !!option?.disabled, key: option.label, onClick: () => this.selectOption(option) }, h("close-icon", null)))))), this.isOpen ? (h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
+            : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '66eaadd178beac3fefa4e261b14a71ee5ab71a95', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: 'ed945f49a0f99abdaf3ac5e1a4707b0a1e450c48', width: "16", height: "16" }))), this.error ? (h("span", { class: "error", part: "msd_dropdown_error" }, this.error)) : null, h("div", { key: '317b5f2a563b70dfc8fc3a75176f95742826236d', class: 'selected-options' }, this.getSelectedOptions().map(option => (h("span", { class: "selected-option" }, option.label, h("button", { disabled: this.readOnly || !!option?.disabled, key: option.label, onClick: () => this.selectOption(option) }, h("close-icon", null)))))), this.isOpen ? (h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/multi-select-dropdown2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"multi-select-dropdown2.js","mappings":"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","names":[],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n width: inherit;\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: 100%;\n position: relative;\n\n .dropdown-label {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n }\n}\n\n.dropbtn {\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n padding: 0.5rem;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px);\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n\n label {\n cursor: not-allowed;\n\n input {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n.selected-options {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 0;\n margin-top: 0.25rem;\n background: var(--nylas-base-0);\n\n .selected-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 4px 8px;\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-base-100);\n color: var(--nylas-base-800);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5rem;\n letter-spacing: 0.5px;\n\n button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n }\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\n\ninterface DropdownOption {\n label: string;\n value: string;\n selected?: boolean; // Add a selected flag to each option\n disabled?: boolean; // Add a disabled flag to each option\n}\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /*\n The name of the dropdown\n /\n @Prop() name!: string;\n\n /\n The label of the dropdown\n /\n @Prop() label?: string;\n\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n\n /\n Error message to display\n /\n @Prop({ mutable: true }) error?: string = '';\n\n /\n The option to require selection of at leat one option.\n /\n @Prop() required?: boolean = false;\n\n /\n The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited.\n /\n @Prop() readOnly?: boolean = false;\n\n /\n Multiple options selected label\n /\n @Prop() multipleOptionsSelectedLabel?: string = 'Multiple options selected';\n\n /\n Select at least one option label\n /\n @Prop() selectAtLeastOneOptionLabel?: string = 'Please select at least one option';\n\n // States\n /\n The copy of the options to display in the dropdown\n /\n @State() availableOptions: DropdownOption[] = this.options;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n /\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /\n This event is fired when the selected options are changed\n /\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean {\n if (arr1.length !== arr2.length) return false;\n\n // Sort both arrays by a consistent key (e.g., label and value)\n const sorted1 = [...arr1].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n const sorted2 = [...arr2].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n\n // Compare each object in the sorted arrays\n return sorted1.every((opt1, index) => {\n const opt2 = sorted2[index];\n return opt1.label === opt2.label && opt1.value === opt2.value;\n });\n }\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[]) {\n if (!this.areOptionsEqual(newValue, this.availableOptions)) {\n this.availableOptions = newValue;\n }\n }\n\n // Lifecycle methods\n componentDidLoad() {\n debug('multi-select-dropdown', 'componentDidLoad');\n if (this.options) {\n this.availableOptions = this.options;\n }\n }\n\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0]?.value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n if (this.required && (!selectedOptions \|\| selectedOptions.length <= 0)) {\n this.error = 'Please select at least one option';\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n if (o.selected) {\n this.error = '';\n }\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab': {\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n }\n case 'Escape': {\n this.isOpen = false;\n break;\n }\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n if (!option?.disabled) {\n this.selectOption(option);\n }\n }}\n class={{ selected: !!option.selected, disabled: !!option.disabled }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} disabled={!!option?.disabled} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\" part=\"msd_dropdown-label\">\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? this.multipleOptionsSelectedLabel\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? (\n <span class=\"error\" part=\"msd_dropdown_error\">\n {this.error}\n </span>\n ) : null}\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button disabled={this.readOnly \|\| !!option?.disabled} key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"multi-select-dropdown2.js","mappings":"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","names":[],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n width: inherit;\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: 100%;\n position: relative;\n\n .dropdown-label {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n }\n}\n\n.dropbtn {\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n padding: 0.5rem;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px);\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n\n label {\n cursor: not-allowed;\n\n input {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n.selected-options {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 0;\n margin-top: 0.25rem;\n background: var(--nylas-base-0);\n\n .selected-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 4px 8px;\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-base-100);\n color: var(--nylas-base-800);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5rem;\n letter-spacing: 0.5px;\n\n button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n }\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { DropdownOption } from '@nylas/core';\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /*\n The name of the dropdown\n /\n @Prop() name!: string;\n\n /\n The label of the dropdown\n /\n @Prop() label?: string;\n\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n\n /\n Error message to display\n /\n @Prop({ mutable: true }) error?: string = '';\n\n /\n The option to require selection of at leat one option.\n /\n @Prop() required?: boolean = false;\n\n /\n The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited.\n /\n @Prop() readOnly?: boolean = false;\n\n /\n Multiple options selected label\n /\n @Prop() multipleOptionsSelectedLabel?: string = 'Multiple options selected';\n\n /\n Select at least one option label\n /\n @Prop() selectAtLeastOneOptionLabel?: string = 'Please select at least one option';\n\n // States\n /\n The copy of the options to display in the dropdown\n /\n @State() availableOptions: DropdownOption[] = this.options;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n /\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /\n This event is fired when the selected options are changed\n /\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean {\n if (arr1.length !== arr2.length) return false;\n\n // Sort both arrays by a consistent key (e.g., label and value)\n const sorted1 = [...arr1].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n const sorted2 = [...arr2].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n\n // Compare each object in the sorted arrays\n return sorted1.every((opt1, index) => {\n const opt2 = sorted2[index];\n return opt1.label === opt2.label && opt1.value === opt2.value;\n });\n }\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[]) {\n if (!this.areOptionsEqual(newValue, this.availableOptions)) {\n this.availableOptions = newValue;\n }\n }\n\n // Lifecycle methods\n componentDidLoad() {\n debug('multi-select-dropdown', 'componentDidLoad');\n if (this.options) {\n this.availableOptions = this.options;\n }\n }\n\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0]?.value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n if (this.required && (!selectedOptions \|\| selectedOptions.length <= 0)) {\n this.error = 'Please select at least one option';\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n if (o.selected) {\n this.error = '';\n }\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab': {\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n }\n case 'Escape': {\n this.isOpen = false;\n break;\n }\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n if (!option?.disabled) {\n this.selectOption(option);\n }\n }}\n class={{ selected: !!option.selected, disabled: !!option.disabled }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} disabled={!!option?.disabled} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\" part=\"msd_dropdown-label\">\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? this.multipleOptionsSelectedLabel\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? (\n <span class=\"error\" part=\"msd_dropdown_error\">\n {this.error}\n </span>\n ) : null}\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button disabled={this.readOnly \|\| !!option?.disabled} key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-booked-event-card2.js CHANGED Viewed

@@ -37,6 +37,10 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         this.handleCancelBookingButtonClicked = () => {
             const startTime = new Date(this.selectedTimeslot.start_time);
             const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;
+            if (!minCancellationNotice) {
+                this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });
+                return;
+            }
             const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;
             if (dateTillCancellation < new Date().getTime()) {
                 this.cancelBookedEventValidationError.emit({
@@ -116,17 +120,17 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
     render() {
         const bookingType = this.configSettings?.booking_type;
         const isManualConfirmation = bookingType && bookingType !== 'booking';
-        return (h(Host, { key: '7db019b852ab70270adb7dc9e958e6e7381a26b3', part: "nbec" }, h("div", { key: 'f309b22194e70799fd0333c899e3ef6dc2cadda2', class: "nylas-booked-event-card" }, h("div", { key: 'fda9f6f52eb02449553e3a77f02a9bd9ccc1ffb1', class: "booked-event-timezone" }, h("globe-icon", { key: '86e8540c01d68d6b661f1146bbe24849023ce1bd' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '1038dc03151ab6a2b961d5f4ded96ba7445d1a54', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '62143a2984318fb91ac9e8211901dddc99481ca2', class: "calendar-icon" }, h("calendar-check-icon", { key: '8c2b99dcc14a65e556648d11fd36fbabda5c6e60' })), h("div", { key: 'ceea5100d690b09d4819486a305d639f483522f6', class: "booked-event-header" }, h("h2", { key: 'af360b0c2fd115edd22e6fd4977819c77c83aa64', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
+        return (h(Host, { key: 'dbe7087b88cf1eff27686e9a7ef321729bea3c8b', part: "nbec" }, h("div", { key: 'a219990cac8a7f0e7935f03cf1c57ea137564958', class: "nylas-booked-event-card" }, h("div", { key: 'e19d395321ec182846f9fa119c69c7f41ee5f6b2', class: "booked-event-timezone" }, h("globe-icon", { key: 'dd47b506f0528f16875476dc53b27e64f2913fb5' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '464f20ff077e64638a03afde99478f7d83409408', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '5a92d2da8c1b3df9b2d05f6c269478868dff32df', class: "calendar-icon" }, h("calendar-check-icon", { key: 'f8611aa6b551338b403f93d2f2395cd9128c9a09' })), h("div", { key: 'f8988cf31256a020ab3e9a98be8577bcd3bc8490', class: "booked-event-header" }, h("h2", { key: 'a2396483be6d7db392504c6c5f20f335ae14bf74', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
             ? `${instance.t('bookingRescheduled')}`
             : isManualConfirmation && !this.isLoading
                 ? `${instance.t('bookingSent')}`
-                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'afad927b2a1e56191d73705c93c6b285305810f8', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: '3a2fcc44ec16291970f5a043fea3c4e0e76cd961', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '9e09cc4a564378d2a57eb26a20d051ff5783959f' }), h("h3", { key: '43751ff57685368a9ff566e042c8ac874a2b972d' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: 'aa873b56137af390655ff8c2eed3baaab44b287a' }, this.selectedTimeslot?.start_time
+                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'b614249b561dc5d050dae4603f651e29cbd1303f', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: '9098b88ef02d44f0de7a77138a7daf554e516909', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '6192670a3b53c9444db27aa1737813851934a213' }), h("h3", { key: '8e145c48421d913a68bc17e9eafd29121e8e069e' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: '1cf28fc04ff15a87b00a33ea44a5e650a18a231c' }, this.selectedTimeslot?.start_time
             ? capitalizeFirstLetter(formatBookedEventDate(this.selectedTimeslot?.start_time, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage]))
-            : '-', ' ', h("br", { key: 'b11b0651c07fa3a160511489e623054a0fc6b95a' }), this.startTime, " - ", this.endTime)), h("div", { key: 'b1945df2b3816cf9e012903910f913fab002f911', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
+            : '-', ' ', h("br", { key: '0034a1c225c5e48784bad88c97957a896652b0f8' }), this.startTime, " - ", this.endTime)), h("div", { key: 'bc919a4c276cb2eb95c05f0409454b9c9dd75fcc', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
                 'footer': true,
                 'no-footer': (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||
                     this.configSettings?.booking_type === 'organizer-confirmation',
-                'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,
+                'no-template-cols': !!this.configSettings?.scheduler?.hide_cancellation_options || !!this.configSettings?.scheduler?.hide_rescheduling_options,
             } }, !this.configSettings?.scheduler?.hide_cancellation_options && (h("button-component", { variant: 'destructive', onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, `${instance.t('cancelBookingButton')}`)), !this.configSettings?.scheduler?.hide_rescheduling_options && (h("button-component", { variant: 'basic', onClick: this.handleRescheduleButtonClicked, disabled: this.isLoading, part: "nbec__button-outline nbec__reschedule-cta" }, `${instance.t('rescheduleBookingButton')}`)))))))));
     }
     get host() { return this; }
@@ -138,7 +142,7 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         "eventInfo": [16],
         "rescheduleBookingId": [1, "reschedule-booking-id"],
         "bookingInfo": [8, "booking-info"],
-        "configSettings": [8, "config-settings"],
+        "configSettings": [16],
         "isLoading": [4, "is-loading"],
         "themeConfig": [8, "theme-config"],
         "selectedTimezone": [1, "selected-timezone"],

package/dist/components/nylas-booked-event-card2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-booked-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-booked-event-card {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n margin-bottom: 2rem;\n width: 424px;\n\n @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n\n box-shadow:\n 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n position: absolute;\n top: -1.25rem;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 0;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 16px;\n font-weight: 400;\n border-bottom: 1px solid var(--nylas-base-200);\n width: inherit;\n padding: 0 0 1.5rem;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n\n .card-description {\n text-align: center;\n }\n}\n\n.booking-date-time,\n.booking-participants {\n padding: 0 1rem;\n margin-top: 1.5rem;\n margin-left: 3rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-self: flex-start;\n position: relative;\n\n svg {\n color: var(--nylas-base-700);\n position: absolute;\n left: -10px;\n }\n\n .block {\n display: block;\n }\n\n h3 {\n color: var(--nylas-base-600);\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.25rem;\n text-align: justify;\n margin-bottom: 4px;\n }\n\n p {\n font-size: 16px;\n margin: 0;\n font-weight: 400;\n text-align: justify;\n color: var(--nylas-base-800);\n }\n}\n\n.booking-participants {\n margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n display: flex;\n color: var(--nylas-base-600);\n margin-bottom: 1.5rem;\n gap: 4px;\n margin: 2rem;\n align-items: center;\n align-self: flex-end;\n}\n\n.button-container {\n width: inherit;\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n border-top: 1px solid var(--nylas-base-200);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n\n &.no-footer {\n display: none;\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatBookedEventDate } from '@/utils/utils';\nimport { LANGUAGE_CODE_TO_LOCALE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/*\n The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n \n @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-booked-event-card',\n styleUrl: 'nylas-booked-event-card.scss',\n shadow: true,\n})\nexport class NylasBookedEventCard {\n /\n The host element.\n * Used to manage the host element of the provider.\n /\n @Element() private host!: HTMLNylasBookedEventCardElement;\n\n /\n @standalone\n * The booked event.\n /\n @Prop() readonly eventInfo!: NylasEvent;\n\n /\n @standalone\n * Booking flow type.\n /\n @Prop() readonly rescheduleBookingId?: string;\n\n /\n @standalone\n * The booking info used to book / reschedule the event.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /\n The selected timezone.\n /\n @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n The selected language.\n /\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n /\n The 12-hour time format.\n /\n @Prop() hour12?: boolean;\n\n @State() startTime: string = '';\n @State() endTime: string = '';\n\n /\n Cancel booking button clicked event.\n /\n @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n /\n Reschedule button clicked event.\n * /\n @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs while rescheduling the booking.\n /\n @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /\n This event is fired when an error occurs while cancelling the booking.\n /\n @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n error: {\n title: string;\n message: string;\n };\n }>;\n\n @Watch('themeConfig')\n themeConfigChanged(newThemeConfig: ThemeConfig) {\n this.applyThemeConfig(newThemeConfig);\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-booked-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-booked-event-card] Component did load`);\n if (!this.eventInfo) {\n console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n }\n if (!this.bookingInfo) {\n console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n }\n this.applyThemeConfig(this.themeConfig);\n const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage \|\| 'en'];\n\n const timeFormat = new Intl.DateTimeFormat(locale, {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n hour12: this.hour12,\n });\n this.startTime = timeFormat.format(this.selectedTimeslot?.start_time as Date);\n this.endTime = timeFormat.format(this.selectedTimeslot?.end_time as Date);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleCancelBookingButtonClicked = () => {\n const startTime = new Date(this.selectedTimeslot.start_time);\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n const dateTillCancellation = startTime.getTime() - minCancellationNotice 60 * 1000;\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventValidationError.emit({\n error: {\n title: 'Cancellation Error',\n message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n },\n });\n } else {\n this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n }\n };\n\n private handleRescheduleButtonClicked = () => {\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.rescheduleBookedEventError.emit(error);\n };\n this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n };\n\n getPaticipantType = (type: string) => {\n switch (type) {\n case 'host':\n return 'Host';\n case 'you':\n return 'You';\n default:\n return '';\n }\n };\n\n @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booked-event-card',\n stateToProps: new Map([\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.themeConfig', 'themeConfig'],\n ['scheduler.hour12', 'hour12'],\n ]),\n eventToProps: {\n cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n },\n rescheduleButtonClicked: async (\n event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n },\n cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const bookingType = this.configSettings?.booking_type;\n const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n return (\n <Host part=\"nbec\">\n <div class=\"nylas-booked-event-card\">\n <div class=\"booked-event-timezone\">\n <globe-icon></globe-icon>\n {TIMEZONE_MAP[this.selectedTimezone]}\n </div>\n <div class=\"event-card-wrapper\" part=\"nbec__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nbec__title\">\n {!!this.rescheduleBookingId && !this.isLoading\n ? `${i18next.t('bookingRescheduled')}`\n : isManualConfirmation && !this.isLoading\n ? `${i18next.t('bookingSent')}`\n : `${i18next.t('bookingConfirmed')}`}\n !\n </h2>\n <div class=\"card-description\" part=\"nbec__description\">\n {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n </div>\n </div>\n <div class=\"booking-date-time\">\n <checkmark-circle-icon></checkmark-circle-icon>\n <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n <p>\n {this.selectedTimeslot?.start_time\n ? capitalizeFirstLetter(\n formatBookedEventDate(this.selectedTimeslot?.start_time as Date, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage]),\n )\n : '-'}{' '}\n <br />\n {this.startTime} - {this.endTime}\n </p>\n </div>\n <div class=\"booking-participants\">\n {/* <people-icon></people-icon>\n <h3>All participants</h3>\n {this.eventInfo?.participants && (\n <p>\n {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n return (\n <span class=\"block\">\n {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n </span>\n );\n })}\n </p>\n )} */}\n </div>\n\n {!isManualConfirmation && (\n <div class=\"button-container\">\n <div\n class={{\n 'footer': true,\n 'no-footer':\n (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) \|\|\n this.configSettings?.booking_type === 'organizer-confirmation',\n 'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options \|\| this.configSettings?.scheduler?.hide_rescheduling_options,\n }}\n >\n {!this.configSettings?.scheduler?.hide_cancellation_options && (\n <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n {`${i18next.t('cancelBookingButton')}`}\n </button-component>\n )}\n {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} disabled={this.isLoading} part=\"nbec__button-outline nbec__reschedule-cta\">\n {`${i18next.t('rescheduleBookingButton')}`}\n </button-component>\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-booked-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-booked-event-card {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n margin-bottom: 2rem;\n width: 424px;\n\n @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n\n box-shadow:\n 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n position: absolute;\n top: -1.25rem;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 0;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 16px;\n font-weight: 400;\n border-bottom: 1px solid var(--nylas-base-200);\n width: inherit;\n padding: 0 0 1.5rem;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n\n .card-description {\n text-align: center;\n }\n}\n\n.booking-date-time,\n.booking-participants {\n padding: 0 1rem;\n margin-top: 1.5rem;\n margin-left: 3rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-self: flex-start;\n position: relative;\n\n svg {\n color: var(--nylas-base-700);\n position: absolute;\n left: -10px;\n }\n\n .block {\n display: block;\n }\n\n h3 {\n color: var(--nylas-base-600);\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.25rem;\n text-align: justify;\n margin-bottom: 4px;\n }\n\n p {\n font-size: 16px;\n margin: 0;\n font-weight: 400;\n text-align: justify;\n color: var(--nylas-base-800);\n }\n}\n\n.booking-participants {\n margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n display: flex;\n color: var(--nylas-base-600);\n margin-bottom: 1.5rem;\n gap: 4px;\n margin: 2rem;\n align-items: center;\n align-self: flex-end;\n}\n\n.button-container {\n width: inherit;\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n border-top: 1px solid var(--nylas-base-200);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n\n &.no-footer {\n display: none;\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatBookedEventDate } from '@/utils/utils';\nimport { LANGUAGE_CODE_TO_LOCALE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/*\n The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n \n @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-booked-event-card',\n styleUrl: 'nylas-booked-event-card.scss',\n shadow: true,\n})\nexport class NylasBookedEventCard {\n /\n The host element.\n * Used to manage the host element of the provider.\n /\n @Element() private host!: HTMLNylasBookedEventCardElement;\n\n /\n @standalone\n * The booked event.\n /\n @Prop() readonly eventInfo!: NylasEvent;\n\n /\n @standalone\n * Booking flow type.\n /\n @Prop() readonly rescheduleBookingId?: string;\n\n /\n @standalone\n * The booking info used to book / reschedule the event.\n /\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /\n @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /\n The selected timezone.\n /\n @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected timeslot.\n /\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /\n The selected language.\n /\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n /\n The 12-hour time format.\n /\n @Prop() hour12?: boolean;\n\n @State() startTime: string = '';\n @State() endTime: string = '';\n\n /\n Cancel booking button clicked event.\n /\n @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n /\n Reschedule button clicked event.\n * /\n @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /\n This event is fired when an error occurs while rescheduling the booking.\n /\n @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /\n This event is fired when an error occurs while cancelling the booking.\n /\n @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n error: {\n title: string;\n message: string;\n };\n }>;\n\n @Watch('themeConfig')\n themeConfigChanged(newThemeConfig: ThemeConfig) {\n this.applyThemeConfig(newThemeConfig);\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-booked-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-booked-event-card] Component did load`);\n if (!this.eventInfo) {\n console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n }\n if (!this.bookingInfo) {\n console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n }\n this.applyThemeConfig(this.themeConfig);\n const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage \|\| 'en'];\n\n const timeFormat = new Intl.DateTimeFormat(locale, {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n hour12: this.hour12,\n });\n this.startTime = timeFormat.format(this.selectedTimeslot?.start_time as Date);\n this.endTime = timeFormat.format(this.selectedTimeslot?.end_time as Date);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleCancelBookingButtonClicked = () => {\n const startTime = new Date(this.selectedTimeslot.start_time);\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n if (!minCancellationNotice) {\n this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n return;\n }\n const dateTillCancellation = startTime.getTime() - minCancellationNotice 60 * 1000;\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventValidationError.emit({\n error: {\n title: 'Cancellation Error',\n message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n },\n });\n } else {\n this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n }\n };\n\n private handleRescheduleButtonClicked = () => {\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.rescheduleBookedEventError.emit(error);\n };\n this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n };\n\n getPaticipantType = (type: string) => {\n switch (type) {\n case 'host':\n return 'Host';\n case 'you':\n return 'You';\n default:\n return '';\n }\n };\n\n @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booked-event-card',\n stateToProps: new Map([\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.themeConfig', 'themeConfig'],\n ['scheduler.hour12', 'hour12'],\n ]),\n eventToProps: {\n cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n },\n rescheduleButtonClicked: async (\n event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n },\n rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n },\n cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const bookingType = this.configSettings?.booking_type;\n const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n return (\n <Host part=\"nbec\">\n <div class=\"nylas-booked-event-card\">\n <div class=\"booked-event-timezone\">\n <globe-icon></globe-icon>\n {TIMEZONE_MAP[this.selectedTimezone]}\n </div>\n <div class=\"event-card-wrapper\" part=\"nbec__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nbec__title\">\n {!!this.rescheduleBookingId && !this.isLoading\n ? `${i18next.t('bookingRescheduled')}`\n : isManualConfirmation && !this.isLoading\n ? `${i18next.t('bookingSent')}`\n : `${i18next.t('bookingConfirmed')}`}\n !\n </h2>\n <div class=\"card-description\" part=\"nbec__description\">\n {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n </div>\n </div>\n <div class=\"booking-date-time\">\n <checkmark-circle-icon></checkmark-circle-icon>\n <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n <p>\n {this.selectedTimeslot?.start_time\n ? capitalizeFirstLetter(\n formatBookedEventDate(this.selectedTimeslot?.start_time as Date, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage]),\n )\n : '-'}{' '}\n <br />\n {this.startTime} - {this.endTime}\n </p>\n </div>\n <div class=\"booking-participants\">\n {/* <people-icon></people-icon>\n <h3>All participants</h3>\n {this.eventInfo?.participants && (\n <p>\n {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n return (\n <span class=\"block\">\n {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n </span>\n );\n })}\n </p>\n )} */}\n </div>\n\n {!isManualConfirmation && (\n <div class=\"button-container\">\n <div\n class={{\n 'footer': true,\n 'no-footer':\n (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) \|\|\n this.configSettings?.booking_type === 'organizer-confirmation',\n 'no-template-cols': !!this.configSettings?.scheduler?.hide_cancellation_options \|\| !!this.configSettings?.scheduler?.hide_rescheduling_options,\n }}\n >\n {!this.configSettings?.scheduler?.hide_cancellation_options && (\n <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n {`${i18next.t('cancelBookingButton')}`}\n </button-component>\n )}\n {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} disabled={this.isLoading} part=\"nbec__button-outline nbec__reschedule-cta\">\n {`${i18next.t('rescheduleBookingButton')}`}\n </button-component>\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-booking-form2.js CHANGED Viewed

@@ -337,7 +337,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
         this.updateAdditionalFields(event.detail.name, event.detail.value);
     }
     render() {
-        return (h(Host, { key: 'd1a22c96134f6b621cd51de89a334cbfd333e60d' }, h("form", { key: 'd69adbd943fc3b7a5c7f0cf53dbb9217f7334c32', onSubmit: e => this.bookButtonClickedHandler(e), ref: el => (this.formRef = el), noValidate: true }, h("div", { key: '21afe8342d7d3656a425d57b0b63ddc336961ab2', class: "nylas-booking-form", part: "nbf" }, h("div", { key: 'c8fb40d0bdfe56db0e88bba9e50ccf1b94ab446a', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '0d3560610674cff9b3aa8c6bd91ed2ebcaf6036e', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.configSettings?.booking?.guest?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", readOnly: this.bookingInfo?.primaryParticipant?.nameReadOnly || false, required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '2abb2740328b4b999ba4d2b1e7345c592d50d27e', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: 'cb5ab32f071f33f7374f9d4488fd4663963040bb', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.configSettings?.booking?.guest?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", readOnly: this.bookingInfo?.primaryParticipant?.emailReadOnly || false, required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
+        return (h(Host, { key: '7cc64499522157e62c5703990effe640e032794f' }, h("form", { key: '14b8c18e942c2b30027dd4ab7e9f50be749b6d8a', onSubmit: e => this.bookButtonClickedHandler(e), ref: el => (this.formRef = el), noValidate: true }, h("div", { key: 'df00121eb4e6491ce7a758690c0bb2fdb3afd2c0', class: "nylas-booking-form", part: "nbf" }, h("div", { key: 'f54bdfab54066557fa20defcc90bba5b33211616', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: 'b4fb9a672fb708ebc47084c9978fc6c526dda804', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.configSettings?.booking?.guest?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", readOnly: this.bookingInfo?.primaryParticipant?.nameReadOnly || false, required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '44f5979a3aacfaedf6baa124ddf3cae468f71e19', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '5e72e7aa54a18a6a3b441a6d3d03c8b08246bc07', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.configSettings?.booking?.guest?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", readOnly: this.bookingInfo?.primaryParticipant?.emailReadOnly || false, required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
                 error: !!this.guestEmailErrors[index],
             } }, instance.t('guestEmail')), h("div", { class: "guest-email-input" }, h("input", { type: "email", id: `guest-email-${index}`, maxLength: 100, class: {
                 'guest-email': true,
@@ -369,14 +369,14 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
                     return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("nylas-date-component", { readOnly: fieldReadOnly, label: label, defaultValue: defaultValue, name: key, id: key, required: field.required, part: "nbf__date-component" })));
                 case 'multi_select': {
                     const defaultValues = defaultValue?.split(',').map(item => item.trim()) || [];
-                    return (h("div", null, h("multi-select-dropdown", { label: label, name: key, id: key, readOnly: fieldReadOnly, options: field.options?.map(option => ({ value: option, label: option, selected: defaultValues.includes(option) })), required: field.required, exportparts: "msd_dropdown: nbf__ms_dropdown, msd_dropdown-label: nbf__ms_dropdown-label, msd_dropdown-button: nbf__ms_dropdown-button, msd_dropdown-content: nbf__ms_dropdown-content, msd_dropdown_error: nbf__ms_dropdown_error, msd_dropdown-button--error: nbf__ms_dropdown-button--error" })));
+                    return (h("div", null, h("multi-select-dropdown", { label: label, name: key, id: key, readOnly: fieldReadOnly, multipleOptionsSelectedLabel: instance.t('multipleOptionsSelected'), options: field.options?.map(option => ({ value: option, label: option, selected: defaultValues.includes(option) })), required: field.required, exportparts: "msd_dropdown: nbf__ms_dropdown, msd_dropdown-label: nbf__ms_dropdown-label, msd_dropdown-button: nbf__ms_dropdown-button, msd_dropdown-content: nbf__ms_dropdown-content, msd_dropdown_error: nbf__ms_dropdown_error, msd_dropdown-button--error: nbf__ms_dropdown-button--error" })));
                 }
                 case 'metadata':
                     return null;
                 default:
                     return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { label: label, name: key, id: key, type: field.type, readOnly: fieldReadOnly, defaultValue: defaultValue || '', requiredError: instance.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
             }
-        })), h("div", { key: '1bc3a6c8cf879b03e39e58e9db2371d675a4e27a', class: "cta" }, h("button-component", { key: '5b38a653d10dc75faea9eaa2384985acd50f420a', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: 'b69945ab562eca8770f3bbc39558a1b9bffdd168', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: '97761d73e97c6d39fe7671f649c7f114c912efd3', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: '5c0f6a7eb055463f288d8644073a00ddfbbbbc26', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
+        })), h("div", { key: 'ceca163a222c8be615a63d36f15e1dcdad40c08c', class: "cta" }, h("button-component", { key: '300ecbc4bffd1abe7d89684000ea958457392650', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '3f3ab4bd1654a53941685961252c57138dbd9cc5', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: 'f1e3ecf792c87519589b83678d607bf12756f209', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: '75e9978b761610c37daf981520dc6e372e02fb38', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
     }
     get host() { return this; }
     static get watchers() { return {