/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { AdditionalFields, AdditionalParticipant, Appearance, ButtonType, Calendar, CheckboxGroupDirection, CheckboxOption, Conference, Configuration, DropdownOption, EmailTemplate, EnableEventTypes, EventDetails, EventReminder, GroupConfiguration, GroupEvent, GroupEventAPIData, ImportGroupEventDetails, Notification, NotificationType, NylasCalendar, NylasSchedulerErrorResponse, NylasSchedulerResponse, Participant, RecurrenceDeleteOption, RecurrenceUpdateOption, SchedulerGroupEventDetail, ThemeConfig, TimePeriod, Timeslot } from "@nylas/core"; import { AuthArgs, NylasApiRequest, User } from "./common/nylas-api-request"; import { CONFIGURATION_EVENT_TYPE, EXPERIMENTAL_FEATURES, LANGUAGE_CODE, Locale } from "./common/constants"; import { OpenHours } from "./components/scheduler-editor/nylas-availability-picker/nylas-availability-picker"; import { NylasEvent, NylasSchedulerBookingData, NylasSchedulerBookingDataWithFlatFields, UISettingsResponse } from "./common/types"; import { AvailabilityTimeslot, ConfigSettings, NylasSchedulerStoreState, NylasSchedulerStoreType } from "./stores/scheduler-store"; import { LANGUAGE_CODE as LANGUAGE_CODE1, NylasEvent as NylasEvent1, NylasSchedulerErrorResponse as NylasSchedulerErrorResponse1 } from "."; import { Tab } from "./components/scheduler-editor/nylas-editor-tabs/tab-contents"; import { SchedulerEventDetail } from "./components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs"; import { ErrorCategory, Notification as Notification1 } from "./types/index"; import { TabGroup } from "./components/scheduler-editor/nylas-editor-tabs-group/tab-contents-group"; import { CreateGroupEventFormState } from "./components/scheduler-editor/nylas-event-calendar/nylas-event-calendar"; import { Config } from "@nylas/identity"; import { SchedulerEditorEventOverride, SchedulerEventOverride } from "./common/component-types"; import { NylasSchedulerConfigStoreState, NylasSchedulerConfigStoreType } from "./stores/scheduler-config-store"; import { NylasSchedulerConfigConnector } from "./connector/nylas-scheduler-config-connector/index"; import { NylasSchedulerConnector } from "./connector/nylas-scheduler-connector/index"; export { AdditionalFields, AdditionalParticipant, Appearance, ButtonType, Calendar, CheckboxGroupDirection, CheckboxOption, Conference, Configuration, DropdownOption, EmailTemplate, EnableEventTypes, EventDetails, EventReminder, GroupConfiguration, GroupEvent, GroupEventAPIData, ImportGroupEventDetails, Notification, NotificationType, NylasCalendar, NylasSchedulerErrorResponse, NylasSchedulerResponse, Participant, RecurrenceDeleteOption, RecurrenceUpdateOption, SchedulerGroupEventDetail, ThemeConfig, TimePeriod, Timeslot } from "@nylas/core"; export { AuthArgs, NylasApiRequest, User } from "./common/nylas-api-request"; export { CONFIGURATION_EVENT_TYPE, EXPERIMENTAL_FEATURES, LANGUAGE_CODE, Locale } from "./common/constants"; export { OpenHours } from "./components/scheduler-editor/nylas-availability-picker/nylas-availability-picker"; export { NylasEvent, NylasSchedulerBookingData, NylasSchedulerBookingDataWithFlatFields, UISettingsResponse } from "./common/types"; export { AvailabilityTimeslot, ConfigSettings, NylasSchedulerStoreState, NylasSchedulerStoreType } from "./stores/scheduler-store"; export { LANGUAGE_CODE as LANGUAGE_CODE1, NylasEvent as NylasEvent1, NylasSchedulerErrorResponse as NylasSchedulerErrorResponse1 } from "."; export { Tab } from "./components/scheduler-editor/nylas-editor-tabs/tab-contents"; export { SchedulerEventDetail } from "./components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs"; export { ErrorCategory, Notification as Notification1 } from "./types/index"; export { TabGroup } from "./components/scheduler-editor/nylas-editor-tabs-group/tab-contents-group"; export { CreateGroupEventFormState } from "./components/scheduler-editor/nylas-event-calendar/nylas-event-calendar"; export { Config } from "@nylas/identity"; export { SchedulerEditorEventOverride, SchedulerEventOverride } from "./common/component-types"; export { NylasSchedulerConfigStoreState, NylasSchedulerConfigStoreType } from "./stores/scheduler-config-store"; export { NylasSchedulerConfigConnector } from "./connector/nylas-scheduler-config-connector/index"; export { NylasSchedulerConnector } from "./connector/nylas-scheduler-connector/index"; export namespace Components { interface AddCircleIcon { "height": string; "width": string; } interface ArchiveIcon { "height": string; "width": string; } interface ArrowIcon { "height": string; "width": string; } interface BoldIcon { "height": string; "width": string; } interface ButtonComponent { "blurHandler"?: (event: FocusEvent) => void; "clickHandler"?: (event: MouseEvent) => void; "disabled": boolean; "focusHandler"?: (event: FocusEvent) => void; "isLoading": boolean; "mouseOutHandler"?: (event: MouseEvent) => void; "mouseOverHandler"?: (event: MouseEvent) => void; "tooltip": string; "type": string; "variant": ButtonType; } interface CalendarAgendaFillIcon { "height": string; "width": string; } interface CalendarAgendaIcon { "height": string; "width": string; } interface CalendarCancelIcon { "height": string; "width": string; } interface CalendarCheckIcon { "height": string; "width": string; } interface CalendarIcon { "height": string; "width": string; } interface CalendarInfoIcon { "height": string; "width": string; } interface CalendarPatternsIcon { "height": string; "width": string; } /** * The `checkbox-component` component is a UI component that allows users to select a checkbox. * This component is used in the scheduling form to input checkbox type inputs. */ interface CheckboxComponent { /** * The default value of the checkbox. This is the value that is displayed when the checkbox is rendered. */ "checked"?: boolean; /** * The label of the checkbox. This is displayed next to the checkbox. */ "label": string; /** * The name of the checkbox. This is used to identify the checkbox when submitting a form. */ "name": string; /** * The property to make the checkbox read-only. If true, the checkbox cannot be edited. */ "readOnly": boolean; /** * Whether the checkbox is required. If true, the checkbox must be checked when submitting a form. Default is false. If the checkbox is required and not checked, an error message is displayed. */ "required": boolean; } /** * The `checkbox-group` component is a UI component that allows users to select multiple options from a list. * It manages a group of checkboxes and their states. */ interface CheckboxGroup { /** * The layout direction of the checkboxes. 'vertical' - checkboxes are stacked vertically (default) 'horizontal' - checkboxes are arranged horizontally */ "direction": CheckboxGroupDirection; /** * The label for the checkbox group. */ "label": string; /** * The name of the checkbox group. This is used to identify the group when submitting a form. */ "name": string; /** * Array of options to display as checkboxes. Each option should have a label and value. */ "options": CheckboxOption[]; /** * Whether the checkbox group is required. If true, at least one checkbox must be checked when submitting a form. */ "required": boolean; } interface CheckmarkCircleIcon { "height": string; "width": string; } interface CheckmarkIcon { "height": string; "width": string; } interface ChevronIcon { "height": string; "width": string; } interface ClockIcon { "height": string; "width": string; } interface CloseIcon { "height": string; "width": string; } interface CopyIcon { "height": string; "width": string; } interface DeleteIcon { "height": string; "width": string; } interface DocumentRefreshIcon { "height": string; "width": string; } interface DragableIcon { "height": string; "width": string; } interface EditIcon { "height": string; "width": string; } interface EnvelopeFillIcon { "height": string; "width": string; } interface EnvelopeIcon { "height": string; "width": string; } interface EyeIcon { "height": string; "width": string; } interface FeedbackIcon { "height": string; "width": string; } interface FlowIcon { "height": string; "width": string; } interface FolderIcon { "height": string; "width": string; } interface ForwardIcon { "height": string; "width": string; } interface GlobeIcon { "height": string; "width": string; } interface GoogleLogoIcon { "height": string; "width": string; } interface GoogleMeetIcon { "height": string; "width": string; } interface InboxIcon { "height": string; "width": string; } interface InfoIcon { "height": string; "width": string; } /** * The `input-color-picker` component is a dropdown that allows users to select an accent color from either RGB inputs or an interactive color picker and converts them to a hex value. * This component is used in the scheduling form to input dropdown type inputs. */ interface InputColorPicker { /** * The default selected color */ "defaultSelectedColor"?: string; /** * The name of the dropdown */ "name": string; } /** * The `input-component` component is a UI component that allows users to input text, email, or phone number values. * This component is used in the scheduling form to input text, email and phone number type inputs. */ interface InputComponent { /** * Whether the input should be focused when rendered. Default is false. If true, the input is focused when rendered. Use this to set the focus on the first input in a form. */ "autoFocus": boolean; /** * The default value of the input. This is the value that is displayed when the input is rendered. */ "defaultValue"?: string; /** * The label of the input. This is displayed above the input. */ "label": string; /** * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed. Default is 255. */ "maxLength": number; "maxValue"?: number; "minValue"?: number; /** * The name of the input. This is used to identify the input when submitting a form. */ "name": string; /** * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed. Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'. */ "pattern"?: RegExp; /** * The error message to display when the value does not match the pattern. Default is 'Invalid format.' where is the input label. */ "patternError": string; /** * The placeholder of the input. This is displayed when the input is empty. */ "placeholder": string; /** * Whether the input is read-only. If true, the input cannot be edited. Default is false. */ "readOnly": boolean; /** * Whether the input is required. If true, the input must have a value when submitting a form. Default is false. If the input is required and the value is empty, an error message is displayed. */ "required": boolean; /** * This error message is displayed when the input value is empty and the input is required. */ "requiredError": string; /** * The type of the input. This is used to determine the input's behavior. Supported types are 'text', 'email', and 'phone_number'. */ "type": 'text' | 'email' | 'phone_number' | 'number'; } /** * The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options. */ interface InputDropdown { /** * The default selected option */ "defaultInputOption"?: DropdownOption; /** * This is used to set if the dropdown should be filtered based on the input value. If set to true, the dropdown will be filtered based on the input value. */ "filterable": boolean; /** * Should show search input */ "inputValue": string; /** * The name of the dropdown */ "name": string; /** * The options to display in the dropdown */ "options": DropdownOption[]; /** * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix. */ "pluralizedLabel": string; } /** * The `nylas-image-input` component is a UI component that allows users input an image URL and see a preview of the image. */ interface InputImageUrl { /** * Error message to display when the image URL is invalid. */ "errorMessage": string; /** * Image */ "imageUrl": string; /** * The name of the component */ "name": string; } interface ItalicIcon { "height": string; "width": string; } interface LoadingIcon { "height": string; "width": string; } interface LocationIcon { "height": string; "width": string; } interface LocationOffIcon { "height": string; "width": string; } interface MicrosoftLogoIcon { "height": string; "width": string; } interface MicrosoftTeamsIcon { "height": string; "width": string; } interface MultiSelectDropdown { /** * Error message to display */ "error"?: string; /** * The label of the dropdown */ "label"?: string; /** * Multiple options selected label */ "multipleOptionsSelectedLabel"?: string; /** * The name of the dropdown */ "name": string; /** * The options to display in the dropdown */ "options": DropdownOption[]; /** * The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited. */ "readOnly"?: boolean; /** * The option to require selection of at leat one option. */ "required"?: boolean; /** * Select at least one option label */ "selectAtLeastOneOptionLabel"?: string; } /** * The `nylas-additional-participants` component is a form input for adding additional participants to an event. */ interface NylasAdditionalParticipants { /** * @standalone The logged in user */ "currentUser"?: User; /** * @standalone The list of user's calendars. */ "currentUserCalendars"?: Calendar[]; /** * @standalone The event participants */ "eventParticipants"?: Participant[]; /** * @standalone The name of the component */ "name": string; /** * @standalone The additional participants options from the config */ "participantOptions"?: AdditionalParticipant[]; /** * @standalone If the config is round robin */ "roundRobinConfig"?: boolean; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-availability-picker` component is a form input for selecting availability (open hours). */ interface NylasAvailabilityPicker { /** * @standalone The default timezone or preset timezone. */ "defaultTimezone": string; /** * @standalone Hide the header of the availability picker. */ "hideHeader": boolean; /** * @standalone The name of the availability picker. */ "name": string; /** * @standalone The open hours to display. */ "openHours"?: OpenHours[]; /** * @standalone The selected configuration. */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-booked-event-card` component is a UI component that displays the booked event card. */ interface NylasBookedEventCard { /** * @standalone The booking info used to book / reschedule the event. */ "bookingInfo"?: NylasSchedulerBookingData; /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * @standalone The booked event. */ "eventInfo": NylasEvent; /** * The 12-hour time format. */ "hour12"?: boolean; /** * @standalone The loading state prop. Used to display loading state when fetching availability. */ "isLoading"?: boolean; /** * @standalone Booking flow type. */ "rescheduleBookingId"?: string; /** * The selected language. */ "selectedLanguage": string; /** * The selected timeslot. */ "selectedTimeslot": Timeslot; /** * The selected timezone. */ "selectedTimezone": string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker. */ interface NylasBookingCalendarPicker { /** * @standalone The calendars to choose from. */ "calendars"?: Calendar[]; /** * @standalone The current logged in user. */ "currentUser"?: User; /** * @standalone The list of user's calendars. */ "currentUserCalendars"?: Calendar[]; /** * @standalone The default selected calendar. */ "defaultBookingCalendar": string; /** * Prop for express flow when creating a config */ "expressFlow": boolean; /** * The prop to hide the header. */ "hideHeader": boolean; /** * @standalone The name of the calendar picker. */ "name": string; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-booking-confirmation-redirect` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed. */ interface NylasBookingConfirmationRedirect { /** * @standalone The name of the confirmation redirect link. */ "name": string; /** * @standalone The custom redirect URL. */ "redirectUrl": string; /** * @standalone The custom redirect URL error message */ "redirectUrlErrorMessage": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-booking-confirmation-type` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed. */ interface NylasBookingConfirmationType { /** * @standalone The booking type. */ "bookingType": string; /** * @standalone The name of the confirmation redirect link. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * @standalone Show or hide the confirmation type. This prop is automatically determined based on the value of selectedConfiguration in the config, making it unnecessary to set this prop manually. */ "showComponent": boolean; } /** * The `nylas-booking-form` component is a UI component that allows users to book an event. * The booking form component. */ interface NylasBookingForm { /** * @standalone The booking info. */ "bookingInfo"?: NylasSchedulerBookingData; /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * @standalone The booked event (Used to track if a booking is created in an eventOverride). */ "eventInfo"?: NylasEvent; /** * @standalone The loading state. */ "isLoading"?: boolean; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * The selected time. */ "selectedTimeslot"?: Timeslot; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-booking-form-config` component is a form input for adding additional fields to the booking form. */ interface NylasBookingFormConfig { /** * The additional fields to be displayed on the booking form. */ "additionalFields"?: AdditionalFields[]; /** * The name of the booking form config. */ "name": string; "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event. */ interface NylasBufferTime { /** * @standalone The buffer time */ "buffer": { before: number; after: number }; /** * The name of the calendar picker. */ "name": string; "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-calendar-picker` component is a form input for selecting calendars to check availability. */ interface NylasCalendarPicker { /** * @standalone The calendars to choose from. */ "calendars"?: Calendar[]; /** * @standalone The logged in user. */ "currentUser"?: User; /** * @standalone The default selected calendars. */ "defaultSelectedCalendars": string[]; /** * @standalone The name of the calendar picker. */ "name": string; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking (DELETE request). * This component is also used to reject a booking (PUT request) by the organizer, if the prop `rejectBookingId` is provided. */ interface NylasCancelBookingForm { /** * The booking ID to cancel. */ "cancelBookingId"?: string; /** * @standalone The config settings. */ "configSettings"?: ConfigSettings; /** * @standalone The event info. */ "eventInfo"?: NylasEvent; /** * @standalone The loading state. */ "isLoading"?: boolean; /** * The booking ID to reject. */ "rejectBookingId"?: string; /** * @standalone The default language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * The selected timeslot. */ "selectedTimeslot": Timeslot; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-cancellation-policy` component is a form input for the cancellation policy message of an event. */ interface NylasCancellationPolicy { /** * @standalone The cancellation policy stored in the configuration */ "cancellationPolicy"?: string; /** * @standalone The name of the cancellation policy input. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card. */ interface NylasCancelledEventCard { /** * The participant's name who booked the event / is logged in. */ "cancelledEventInfo": Partial; /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE1; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event. */ interface NylasConfirmationEmail { /** * @standalone The confirmation email template data to display */ "confirmationEmailTemplate": EmailTemplate; /** * Is the confirmation email card open */ "isOpen": boolean; /** * @standalone The name of the component */ "name": string; /** * @standalone The nylas branding */ "nylasBranding": boolean; /** * @standalone List of participants */ "participants": Participant[]; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card. */ interface NylasConfirmedEventCard { /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * The participant's name who booked the event / is logged in. */ "confirmedEventInfo": Partial; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE1; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants. */ interface NylasConnectedCalendars { /** * @standalone The calendars to choose from for the organizer / logged in user. */ "calendars"?: Calendar[]; /** * The name of the participants custom availability. */ "name": string; /** * @standalone The participant options passed in the additionalParticipants prop from the nylas-scheduler-editor component. */ "participantOptions"?: AdditionalParticipant[]; /** * @standalone The participants selected in the add participants section. */ "participants": Participant[]; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-custom-booking-flow` component is an input form for booking type (automatically or manually accept bookings) and confirmation redirect URL (default or custom). * This component is a container for the `nylas-booking-confirmation-type`, `nylas-booking-confirmation-redirect` components. * ```html * *
* * *
* * ``` */ interface NylasCustomBookingFlow { /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-custom-event-slug` component is a UI component that allows users to add a custom URL slug for their event link. */ interface NylasCustomEventSlug { /** * The default custom event slug */ "defaultUrlSlug"?: string; /** * Is the custom event slug card expanded */ "isOpen": boolean; /** * The name of the component */ "name": string; /** * Indicates if a slug is required for the configuration. When set to true, the user must enter a slug when creating or editing a configuration. The slug is used for hosted pages that are public. */ "requiresSlug": boolean; /** * The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * Slug error message */ "slugErrorMessage": string; } /** * The `nylas-customize-booking-settings` component is a UI component that displays the booking calendar picker. */ interface NylasCustomizeBookingSettings { /** * @standalone The default additional guests hidden setting as set in the configuration. */ "defaultHideAdditionalGuests": boolean; /** * @standalone The default hide cancellation options setting as set in the configuration. */ "defaultHideCancellationOptions": boolean; /** * @standalone The default hide rescheduling options setting as set in the configuration. */ "defaultHideReschedulingOptions": boolean; /** * @standalone The name of the calendar picker. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * This prop is used to determined which settings are visible in the component. */ "showSettings": string[]; } /** * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values. * This component is used in the scheduling form to input text, email and phone number type inputs. */ interface NylasDateComponent { /** * Whether the input should be focused when rendered. Default is false. If true, the input is focused when rendered. Use this to set the focus on the first input in a form. */ "autoFocus": boolean; /** * The default value of the input. This is the value that is displayed when the input is rendered. */ "defaultValue"?: string; /** * The flag to indicate if the date input is in error state. */ "hasError": boolean; /** * The label of the input. This is displayed above the input. */ "label": string; /** * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed. Default is 255. */ "maxLength": number; /** * The minimum date that can be selected. */ "minDate"?: string; /** * The name of the input. This is used to identify the input when submitting a form. */ "name": string; /** * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed. Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'. */ "pattern"?: RegExp; /** * The error message to display when the value does not match the pattern. Default is 'Invalid format.' where is the input label. */ "patternError": string; /** * The placeholder of the input. This is displayed when the input is empty. */ "placeholder": string; /** * Whether the input is read-only. If true, the input cannot be edited. Default is false. */ "readOnly": boolean; /** * Whether the input is required. If true, the input must have a value when submitting a form. Default is false. If the input is required and the value is empty, an error message is displayed. */ "required": boolean; /** * This error message is displayed when the input value is empty and the input is required. */ "requiredError": string; } /** * The `nylas-date-picker` component is a UI component that allows users to select a date. */ interface NylasDatePicker { /** * @standalone The config settings. */ "configSettings"?: ConfigSettings; /** * The event duration. */ "eventDuration"?: number; /** * The loading state. */ "isLoading"?: boolean; /** * @standalone The dates that are selectable. */ "selectableDates"?: Date[]; /** * The selected date. */ "selectedDate"?: Date; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * The selected timezone. */ "selectedTimezone": string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-disable-emails` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface NylasDisableEmails { /** * @standalone The name of the component */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration | GroupConfiguration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The nylas-editor-tabs component provides the user interface for managing editor tabs within the scheduler editor. * It is primarily used to control the edit mode of the scheduler editor, and it is rendered automatically by the * parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly * or set any props manually, as its behavior is fully managed by the parent component. */ interface NylasEditorTabs { /** * @standalone The list of calendars to use in the editor when configuring availability. */ "calendars"?: Calendar[]; /** * @standalone The list of configurations */ "configurations"?: Configuration[]; /** * @standalone The current logged in user. */ "currentUser"?: User; /** * @standalone This prop is passed down by the parent component to enable or disable user feedback. */ "enableUserFeedback"?: boolean; /** * @standalone This prop is passed down by the parent component. It is an optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm */ "hideEditorTabs"?: Tab[]; /** * @standalone The mode of the editor. - `app`: The editor is used as a standalone app. - `composable`: The editor is used as a composable component. */ "mode"?: 'app' | 'composable'; "resetError": () => Promise; "schedulerConfigCreatedEventHandler": (data: SchedulerEventDetail) => Promise>; /** * @standalone The scheduler preview link to use when the user clicks on the preview button. You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link. */ "schedulerPreviewLink": string; /** * @standalone The selected configuration to use in the editor when editing an existing configuration or creating a new one. */ "selectedConfiguration"?: Configuration; /** * The selected event type. */ "selectedEventType"?: CONFIGURATION_EVENT_TYPE; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; "setError": (error: { message: string; type: NotificationType; category: ErrorCategory; title: string; }) => Promise; } /** * The nylas-editor-tabs-group component provides the user interface for managing editor tabs within the scheduler editor. * It is primarily used to control the edit mode of the scheduler editor, and it is rendered automatically by the * parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly * or set any props manually, as its behavior is fully managed by the parent component. */ interface NylasEditorTabsGroup { /** * @standalone The list of calendars to use in the editor when configuring availability. */ "calendars"?: Calendar[]; /** * @standalone The list of configurations */ "configurations"?: (Configuration | GroupConfiguration)[]; /** * @standalone The current logged in user. */ "currentUser"?: User; /** * @standalone This prop is passed down by the parent component to enable or disable user feedback. */ "enableUserFeedback"?: boolean; /** * @standalone This prop is passed down by the parent component. It is an optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm */ "hideEditorTabs"?: TabGroup[]; /** * @standalone The mode of the editor. - `app`: The editor is used as a standalone app. - `composable`: The editor is used as a composable component. */ "mode"?: 'app' | 'composable'; /** * Resets the error state of the editor. */ "resetError": () => Promise; /** * Event handler for the scheduler config created event. */ "schedulerConfigCreatedEventHandler": (data: SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }) => Promise>; /** * @standalone The scheduler preview link to use when the user clicks on the preview button. You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link. */ "schedulerPreviewLink": string; /** * @standalone The selected configuration to use in the editor when editing an existing configuration or creating a new one. */ "selectedConfiguration"?: GroupConfiguration; /** * The selected event type. */ "selectedEventType"?: CONFIGURATION_EVENT_TYPE; /** * The selected group event. */ "selectedGroupEvent"?: GroupEventAPIData; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * Sets the error state of the editor. */ "setError": (error: { message: string; type: NotificationType; category: ErrorCategory; title: string; }) => Promise; } interface NylasEventCalendar { /** * The calendars prop */ "calendars"?: NylasCalendar[]; /** * The current user prop */ "currentUser"?: User; /** * The group events prop */ "groupEvents"?: GroupEventAPIData[]; /** * The is loading prop */ "isLoading"?: boolean; /** * The master group events prop */ "masterGroupEvents"?: Record; /** * @standalone The name of the component */ "name": string; /** * @standalone The selected configuration */ "selectedConfiguration"?: GroupConfiguration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-capacity` component is a UI component that allows users to set the event capacity for the scheduler configuration. */ interface NylasEventCapacity { /** * @standalone The default event capacity */ "capacity"?: number; /** * @standalone The name of the component */ "name": string; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-description` component is a form input for the description of an event. */ interface NylasEventDescription { /** * @standalone The event description stored in the configuration */ "eventDescription"?: string; /** * Hide the auto popolate button */ "hideAutoPopulateButton": boolean; /** * @standalone The name of the event description input. */ "name": string; /** * Whether to show the tokens dropdown. */ "noTemplates": boolean; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-duration` component is a form input for the duration of an event. */ interface NylasEventDuration { /** * @standalone The event duration in minutes as set in the configuration. */ "eventDurationMinutes"?: number; /** * @standalone The name of the event duration. Default is 'duration'. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-info` component is an input form for event information such as title, description, duration, location. * This component is a container for the `nylas-event-title`, `nylas-event-description`, `nylas-event-duration`, and `nylas-event-location` components. * ```html * *
* * * * *
* * ``` */ interface NylasEventInfo { /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-limits` component is an input form for event limits, such as the number of available days in the future and * the minimum period of notice that a guest must provide to cancel a booking. * This component is a container for the `nylas-limit-future-bookings` and `nylas-min-cancellation-notice` components. * ```html * *
* * *
* * ``` */ interface NylasEventLimits { /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-location` component is a form input for the location of an event. */ interface NylasEventLocation { /** * @standalone The conference providers where the key is the provider name ('zoom') and the value is the grant id. We currently support same provider ('google', 'microsoft') for all participants and 'zoom' for cross-provider conferencing. */ "conferenceProviders"?: Record; /** * @standalone The current user */ "currentUser"?: User; /** * @standalone The event conferencing stored in the configuration */ "eventConferencing"?: Conference; /** * @standalone The event location stored in the configuration */ "eventLocation"?: string; /** * @standalone The name of the event location input. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * @standalone The users provider */ "userProvider"?: string; } /** * The `nylas-event-timeslot` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface NylasEventTimeslot { /** * The current user. */ "currentUser"?: User; /** * The initial value of the event timeslot. */ "initialValue"?: { when: { start_time: number; end_time: number; start_timezone: string; end_timezone: string; }; recurrence: string[]; }; /** * @standalone The name of the component */ "name": string; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-title` component is a form input for the title of an event. */ interface NylasEventTitle { /** * @standalone The title of the event from the cofiguration. */ "eventTitle"?: string; /** * @standalone The name attribute of this component. */ "name": string; /** * Whether to show the tokens dropdown. */ "noTemplates": boolean; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-feedback-form` component is a UI component that displays the booked event card. */ interface NylasFeedbackForm { /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-form-card` component is a card that can be used to display a form. It is a simple wrapper around a card with a header and content area. */ interface NylasFormCard { } /** * The `nylas-limit-future-bookings` component is a form input for the number of days in the future a guest is allowed to book an event. */ interface NylasLimitFutureBookings { /** * @standalone The number of days into the future that invitees will see availability, as set in the configuration. */ "availableDaysInFuture"?: number; /** * @standalone The name of the limit future bookings input. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-list-configurations` component displays a list of scheduling pages. */ interface NylasListConfigurations { /** * The list of configurations to display. */ "configurations": (Configuration | GroupConfiguration)[]; "getState": () => Promise<"loading" | "error" | "loaded">; "hideDeleteConfirmation": () => Promise; "hideEditButtonLoading": () => Promise; /** * The next cursor for list configurations, if any. */ "listConfigurationsNextCursor"?: string | null; "registerCallback": () => Promise; /** * The scheduler preview link to use when the user clicks on the preview button. You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link. */ "schedulerPreviewLink": string; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; "setError": (error: { message: string; type: NotificationType; category: ErrorCategory; title: string; }) => Promise; "setState": (state: 'loading' | 'loaded' | 'error') => Promise; } /** * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language. */ interface NylasLocaleSwitch { /** * @standalone The booking info. */ "bookingInfo"?: NylasSchedulerBookingData; /** * The selected language. */ "selectedLanguage": string; /** * The selected timezone. */ "selectedTimezone": string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } interface NylasLogo { "height": string; "width": string; } /** * The `nylas-min-booking-notice` component is a form input for the minimum period of notice (minutes) that a guest must * provide to book an event. */ interface NylasMinBookingNotice { /** * @standalone The minimum booking notice (minutes) stored in the configuration */ "minBookingNotice"?: number; /** * @standalone The name of the min booking notice input. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-min-cancellation-notice` component is a form input for the minimum period of notice (minutes) that a guest must * provide to cancel a booked event. */ interface NylasMinCancellationNotice { /** * @standalone The minimum cancellation notice (minutes) stored in the configuration */ "minCancellationNotice"?: number; /** * @standalone The name of the min cancellation notice input. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-notification` component is a UI component that displays notifications. */ interface NylasNotification { "allowedCategories": string[]; /** * The time-to-live for notifications in milliseconds. Set to 'none' to disable auto-dismissal. */ "ttl": number | 'none'; } /** * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card. */ interface NylasOrganizerConfirmationCard { /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * @standalone The loading state prop. Used to display loading state when fetching availability. */ "isLoading"?: boolean; /** * Booking flow type. */ "organizerConfirmationBookingId"?: string; "resetAction": () => Promise; /** * The selected language. */ "selectedLanguage": string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker. */ interface NylasPageName { /** * @standalone Is the page name container card expanded */ "isOpen": boolean; /** * @standalone The name of the component */ "name": string; /** * @standalone The default page name */ "pageName"?: string; /** * The required property for the page name input */ "requirePageName": boolean; /** * Make the field required */ "required": boolean; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * @standalone Show toggle button that allows users to expand or collapse the card */ "showToggle": boolean; } /** * The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page. * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input * fields you want to display. The component will automatically update the appearance object when the input fields are changed. * Ensure that the input fields have the `name` attribute set to the key in the appearance object. * If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page. * The fields that can be customized in the Nylas hosted scheduler page are: * - Primary color: (name: color) * - Company logo: (name: company_logo_url) * - Submit button label: (name: submit_button_label) * - Thank you message: (name: thank_you_message) * This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component. */ interface NylasPageStyling { "appearance"?: Appearance; "isOpen": boolean; "name": string; "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-participant-booking-calendars` component is a form input for selecting calendars to check availability for participants. */ interface NylasParticipantBookingCalendars { /** * @standalone The calendars to choose from for the organizer / logged in user. */ "calendars"?: Calendar[]; /** * @standalone The name of the participants custom availability. */ "name": string; /** * @standalone The participant options passed in the additionalParticipants prop from the nylas-scheduler-editor component. */ "participantOptions"?: AdditionalParticipant[]; /** * @standalone The participants selected in the add participants section. */ "participants": Participant[]; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants. */ interface NylasParticipantsCustomAvailability { /** * @standalone The name of the participants custom availability. */ "name": string; /** * @standalone The participants selected in the add participants section. */ "participants": Participant[]; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-reminder-emails` component is a UI component that allows users to set buffer time before and after an event. */ interface NylasReminderEmails { /** * The event reminders prop. */ "eventReminders"?: (EventReminder & { editing?: boolean })[]; /** * The name of the component */ "name": string; /** * The selected configuration. */ "selectedConfiguration"?: Configuration | GroupConfiguration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-reminder-time` component is a form input for the reminder time before an event. */ interface NylasReminderTime { /** * The event reminder time in minutes as set in the configuration. */ "eventReminderTimeMinutes"?: number; /** * The name of the reminder time. Default is 'reminder time'. */ "name": string; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-scheduler-editor` component is a form that allows users to configure the settings for the Nylas Scheduler. */ interface NylasSchedulerEditor { /** * This prop is used to populate the additional participants and their availability in the scheduler editor. */ "additionalParticipants"?: AdditionalParticipant[]; /** * This prop will be used to populate the conference provider options in the editor. The key is the provider name ('zoom') and the value is the grant id. We currently support same provider ('google', 'microsoft') for all participants and 'zoom' for cross-provider conferencing. */ "conferenceProviders"?: Record; /** * * The configuration id to use for the scheduler editor. If provided, then the scheduler editor will try and fetch the configuration with the provided id. If found, it will automatically load the editor with the configuration settings for editing. */ "configurationId"?: string; /** * The default authentication arguments to use when authenticating a user. */ "defaultAuthArgs"?: AuthArgs[]; /** * This prop will allow to set a default language for the Nylas scheduling page. */ "defaultLanguage"?: LANGUAGE_CODE; /** * The default scheduler config store state. Used to set the initial state of the scheduler config store. This state can be used to pass defaults to newly created configurations. */ "defaultSchedulerConfigState"?: Partial; /** * Controls which event types are enabled in the Scheduler. - By default, all event types are enabled and users will see a selection screen when creating a new event. - You can disable specific event types by setting them to `false`. - At least one event type must remain enabled at all times. - If only one event type is enabled, the event type selection screen will be skipped. */ "enableEventTypes"?: EnableEventTypes; /** * Indicates if the user feedback feature is enabled. By default, this is set to true. When enabled, the user feedback feature will be available in the edit mode. To disable the user feedback feature, set this prop to false. */ "enableUserFeedback"?: boolean; /** * This provides a way to override the default event handlers. */ "eventOverrides": SchedulerEditorEventOverride; /** * This prop is to opt in to experimental features. Ex: { 'group_events': true } */ "experimentalFeatures"?: Record; /** * This optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm */ "hideEditorTabs"?: Tab[]; /** * This prop will allow to override the default localization strings for each language. Nylas scheduling page currently support the following language codes: en, es, fr, de, sv, zh, ja, nl. */ "localization"?: Partial>; /** * This is used to set the mode for the scheduler config. The mode can be 'app' or 'composable'. The default mode is 'app'. */ "mode": 'app' | 'composable'; /** * The Nylas Api Request instance. Used to make requests to the Nylas API. */ "nylasApiRequest"?: NylasApiRequest; /** * This prop will allow to show / hide the option to manage nylas branding in the email template. By default, this is set to true. When enabled, the option to show/hide nylas branding will be shown in the email template. To disable the option to show/hide nylas branding, set this prop to false. */ "nylasBranding"?: boolean; /** * The Nylas Sessions configuration. Used to configure the Nylas Sessions instance. */ "nylasSessionsConfig"?: Config; /** * Indicates if a slug is required for the configuration. When set to true, the user must enter a slug when creating or editing a configuration. The slug is used for hosted pages. If using Nylas hosted scheduling pages, the `schedulerPreviewLink` prop can be set to redirect to a public configuration as follows: `https://book.nylas.com/us//{slug}`. `us` denotes the region. Replace it with the appropriate region of your application. Replace `` with your Nylas app client ID. The `{slug}` placeholder is replaced with the appropriate slug when the scheduler preview button is clicked. Note: Nylas hosted scheduling pages are only available for public configurations. */ "requiresSlug": boolean; /** * This method is used to get the NylasSchedulerConfigConnector instance. You can use this instance to make requests to the Nylas API. * @returns Promise */ "schedulerConnector": () => Promise; /** * The scheduler preview link used when the user clicks the preview button. If `requiresSlug` is true, you can use the placeholder `{slug}` to insert the slug in the link for Nylas hosted scheduling pages. Additionally, you can use the placeholder `{config.id}` to insert the configuration ID anywhere in the link. For example: `https://book.nylas.com/us//{slug}`. `us` denotes the region. Replace it with the appropriate region of your application. Replace `` with your Nylas app client ID. Note: Nylas hosted scheduling pages are only available for public configurations. */ "schedulerPreviewLink": string; /** * This method is used to get the NylasSchedulerConfigStore instance. You can use this instance to update or get the state of the store. * @returns Promise */ "store": () => Promise; } /** * The `nylas-scheduling` component is used to display the Nylas Scheduling UI. */ interface NylasScheduling { /** * This enables passing the bookingInfo object to the Scheduler UI for direct booking event creation. When used with timeslotConfirmedHandler, it bypasses the additional data page and immediately invokes the handler after booking. */ "bookingInfo"?: NylasSchedulerBookingData; /** * Booking Ref required for cancelling flow. */ "cancelBookingRef"?: string; /** * The app ID of the configuration (public config) to be used for the Nylas Scheduler. This is used in conjunction with the slug. When the configurationId is not provided, the slug and clientId are used to make requests to the Scheduler API endpoints. If the configurationId is provided, this prop will be ignored. */ "clientId"?: string; /** * The config ID for the Nylas Scheduler. This should be passed in when using a public config, in which case the sessionId is not required. */ "configurationId"?: string; /** * This prop will allow to set a default language for the Nylas scheduling page. */ "defaultLanguage"?: LANGUAGE_CODE; /** * The default scheduler store state. Used to set the initial state of the scheduler store. */ "defaultSchedulerState"?: Partial; "enableUserFeedback"?: boolean; /** * This provides an easy way to override the default function of the event emitter. An example of this is the `timeslotConfirmed` event. By default, this event will set the scheduler store state for `showBookingForm` to `true` which will show the booking form. However, if you want to override this behavior, you can pass in the prop `eventOverride` like: ```html { console.log("Timeslot confirmed event fired!"); } }} /> ``` */ "eventOverrides": SchedulerEventOverride; /** * This method is used to retrieve the NylasConnector instance * @returns The NylasConnector instance */ "getNylasSchedulerConnector": () => Promise; /** * This method is used to retrieve the NylasScheduler instance * @returns The NylasScheduler instance */ "getNylasSchedulerStore": () => Promise; "getRef": () => Promise; "hour12"?: boolean | undefined; /** * The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data. */ "isLoading"?: boolean; /** * This prop will allow to override the default localization strings for each language. Nylas scheduling page currently support the following language codes: en, es, fr, de, sv, zh, ja, nl. */ "localization"?: Partial>; /** * This is used to set the mode for the Nylas Scheduler. The mode can be either `app` or `composable`. The default mode is `app`. - `app`: This mode is used to show the default Nylas Scheduler UI. - `composable`: This mode is used to show the composable Nylas Scheduler UI by passing the individual scheduler components as children. */ "mode": 'app' | 'composable'; /** * This prop lets you hide the Nylas branding. Default is true. */ "nylasBranding"?: boolean; /** * Booking Ref required for the manual confirmation flow. */ "organizerConfirmationBookingRef"?: string; /** * Booking Ref required for rescheduling flow. */ "rescheduleBookingRef"?: string; /** * The URL for the Nylas Scheduler API. (staging or production URL) */ "schedulerApiUrl": string; /** * The session ID for the Nylas Scheduler. This is used to authenticate the user. */ "sessionId"?: string; "showNotification"?: boolean; /** * The slug of the configuration (public config) to be used for the Nylas Scheduler. This is used in conjunction with the clientId. When the configurationId is not provided, the slug and clientId are used to make requests to the Scheduler API endpoints. If the configurationId is provided, this prop will be ignored. */ "slug"?: string; /** * Theme config, used to automatically generate a theme with color palette and CSS variables to customize the look and feel of the Nylas Scheduler. */ "themeConfig"?: ThemeConfig; } /** * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker. */ interface NylasSchedulingMethod { /** * @standalone The name of the booking type picker. */ "name": string; /** * @standalone The participant options passed in the additionalParticipants prop from the nylas-scheduler-editor component. */ "participantOptions"?: AdditionalParticipant[]; /** * This prop is used to display the component in a disabled state / read-only mode. */ "readOnly": boolean; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * Whether to show the sub-title. */ "showSubTitle": boolean; } /** * The `nylas-select-event-type` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface NylasSelectEventType { /** * The enable event types. */ "enableEventTypes"?: EnableEventTypes; /** * @standalone The name of the component */ "name": string; /** * @standalone The participant options passed in the additionalParticipants prop from the nylas-scheduler-editor component. */ "participantOptions"?: AdditionalParticipant[]; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-selected-event-card` component is a UI component that displays the selected event card. */ interface NylasSelectedEventCard { /** * The 12-hour time format. */ "hour12"?: boolean; /** * The selected date. */ "selectedDate"?: Date; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * The selected time. */ "selectedTimeslot"?: Timeslot; /** * The selected timezone. */ "selectedTimezone": string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-time-window-picker` component is a time picker that can be used to select a time. */ interface NylasTimeWindowPicker { /** * This sets the error state of the input. */ "hasError": boolean; /** * The language of the input. */ "language": LANGUAGE_CODE; /** * This is the start time value if one is set by the parent component. It is useful if this component is used to render an end time which should not be before the start time, defining the earliest selectable time. */ "minimumStartTime": string | null; /** * The name of the input. */ "name": string; /** * The placeholder text for the input. */ "placeholder": string; /** * The time to display in the input. This is passed by the parent component */ "time": string; } /** * The `nylas-timeslot-interval` component allows users to set their time slot interval preferences. * This component provides an option to set both `interval_minutes` and `round_to` in the configuration. */ interface NylasTimeslotInterval { /** * @standalone The event duration in minutes. */ "eventDurationMinutes"?: number; /** * @standalone The name of the calendar picker. */ "name": string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots. */ interface NylasTimeslotPicker { /** * @standalone The available timeslots. */ "availability"?: AvailabilityTimeslot[]; "emitValidateTimeslotError": (error: string, type: 'error' | 'info') => Promise; /** * The 12-hour time format. */ "hour12"?: boolean; /** * @standalone The loading state prop. Used to display loading state when fetching availability. */ "isLoading"?: boolean; /** * The selected date. */ "selectedDate"?: Date; /** * The selected language. */ "selectedLanguage"?: string; /** * The selected timeslot. */ "selectedTimeslot"?: Timeslot; /** * The selected timezone. */ "selectedTimezone": string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } interface PaintbrushFillIcon { "height": string; "width": string; } interface PaintbrushIcon { "height": string; "width": string; } interface PeopleIcon { "height": string; "width": string; } interface PersonClipboardIcon { "height": string; "width": string; } interface PersonIcon { "height": string; "width": string; } interface PlayIcon { "height": string; "width": string; } interface PlusIcon { "height": string; "width": string; } /** * The `radio-button-group` component is a UI component that allows users to select a single option from a list of options. * This component is used in the scheduling form to input radio button type inputs. */ interface RadioButtonGroup { /** * The default selected value of the radio group. */ "defaultSelectedValue": string; /** * The label of the radio group. This is displayed above the radio group. Label is optional. You can also use the slot 'label' to add a label. */ "label"?: string; /** * The name of the radio group. This is used to identify the radio group when submitting a form. */ "name": string; /** * The list of options in the radio group. Each option has a label and a value and an optional description. */ "options": { label: string; value: string; description?: string }[]; /** * The property to make the radio group read-only. If true, the radio group cannot be edited. */ "readOnly": boolean; /** * Whether the radio group is required. If true, the radio group must have a value when submitting a form. Default is false. If the radio group is required and the value is empty, an error message is displayed. */ "required": boolean; } interface RefreshIcon { "height": string; "width": string; } interface ReplyAllIcon { "height": string; "width": string; } interface ReplyIcon { "height": string; "width": string; } interface SearchIcon { "height": string; "width": string; } /** * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options. * This component is used in the scheduling form to input dropdown type inputs. */ interface SelectDropdown { /** * The default selected option */ "defaultSelectedOption": DropdownOption | null; /** * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value */ "dropdownButtonText"?: string; /** * Allows to set the empty value of the dropdown */ "emptyValue": string; /** * The custom error message to display when the value is empty or null and the dropdown is required */ "errorMessage": string; /** * The label for the dropdown, skipped if no label is provided */ "label"?: string; /** * The name of the dropdown */ "name": string; /** * The options to display in the dropdown */ "options": DropdownOption[]; /** * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix. */ "pluralizedLabel": string; /** * The property to make the dropdown read-only. If true, the dropdown cannot be edited. */ "readOnly": boolean; /** * If true, the dropdown is required for form submission */ "required": boolean; /** * The placeholder for the search input */ "searchPlaceholder": string; /** * Should show chevron on button */ "withChevron": boolean; /** * Should show search input */ "withSearch": boolean; } interface SentIcon { "height": string; "width": string; } interface SpamIcon { "height": string; "width": string; } interface StarIcon { "height": string; "width": string; } interface StopIcon { "height": string; "width": string; } /** * `textarea-component` allows users to enter multiline text. * It is ideal for larger inputs like comments or messages in a form. * This component is used in the scheduling form to input multiline text. */ interface TextareaComponent { /** * Automatically focus the textarea when the component loads. */ "autoFocus": boolean; /** * The default value of the textarea, appearing when the component first renders. */ "defaultValue"?: string; /** * The label for the textarea, displayed above it. */ "label": string; /** * The maximum number of characters allowed in the textarea. */ "maxLength": number; /** * The name of the textarea, important for form submissions. */ "name": string; /** * Placeholder text shown in the textarea when it is empty. */ "placeholder": string; /** * If true, the textarea cannot be edited by the user. */ "readOnly": boolean; /** * Specifies if the textarea is required for form submission. If true, an error message shows if left empty. */ "required": boolean; /** * The content of the label's tooltip */ "tooltip": string; /** * The type */ "type": string; } /** * The time period selector component allows the user to select a time period and a number value for that time period. */ interface TimePeriodSelector { /** * The default selected number. */ "defaultSelectedNumber": number; /** * The default selected time period. */ "defaultSelectedPeriod": string; /** * The error state */ "hasError": boolean; "timePeriods": TimePeriod[]; } /** * The `toggle-switch` component is a UI component that allows users to toggle a switch. * This component is used in the scheduling form to input toggle switch type inputs. * Use it as a replacement for checkboxes when you want to present a switch in the UI. */ interface ToggleSwitch { /** * The default value of the toggle switch. This is the value that is displayed when the toggle switch is rendered. */ "checked": boolean; /** * The label of the toggle switch. This is displayed next to the toggle switch. */ "label": string; /** * The name of the toggle switch. This is used to identify the toggle switch when submitting a form. */ "name": string; } /** * The `tooltip-component` component is a UI component that displays a tooltip. */ interface TooltipComponent { /** * The position of the tooltip. */ "position": 'top' | 'bottom' | 'left' | 'right'; } interface TranslateIcon { "height": string; "width": string; } interface TrashFillIcon { "height": string; "width": string; } interface TrashIcon { "height": string; "width": string; } interface UnderlineIcon { "height": string; "width": string; } interface WarningIcon { "height": string; "width": string; } interface ZoomIcon { "height": string; "width": string; } } export interface CheckboxComponentCustomEvent extends CustomEvent { detail: T; target: HTMLCheckboxComponentElement; } export interface CheckboxGroupCustomEvent extends CustomEvent { detail: T; target: HTMLCheckboxGroupElement; } export interface InputColorPickerCustomEvent extends CustomEvent { detail: T; target: HTMLInputColorPickerElement; } export interface InputComponentCustomEvent extends CustomEvent { detail: T; target: HTMLInputComponentElement; } export interface InputDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLInputDropdownElement; } export interface InputImageUrlCustomEvent extends CustomEvent { detail: T; target: HTMLInputImageUrlElement; } export interface MultiSelectDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLMultiSelectDropdownElement; } export interface NylasAdditionalParticipantsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasAdditionalParticipantsElement; } export interface NylasAvailabilityPickerCustomEvent extends CustomEvent { detail: T; target: HTMLNylasAvailabilityPickerElement; } export interface NylasBookedEventCardCustomEvent extends CustomEvent { detail: T; target: HTMLNylasBookedEventCardElement; } export interface NylasBookingCalendarPickerCustomEvent extends CustomEvent { detail: T; target: HTMLNylasBookingCalendarPickerElement; } export interface NylasBookingConfirmationRedirectCustomEvent extends CustomEvent { detail: T; target: HTMLNylasBookingConfirmationRedirectElement; } export interface NylasBookingConfirmationTypeCustomEvent extends CustomEvent { detail: T; target: HTMLNylasBookingConfirmationTypeElement; } export interface NylasBookingFormCustomEvent extends CustomEvent { detail: T; target: HTMLNylasBookingFormElement; } export interface NylasBookingFormConfigCustomEvent extends CustomEvent { detail: T; target: HTMLNylasBookingFormConfigElement; } export interface NylasBufferTimeCustomEvent extends CustomEvent { detail: T; target: HTMLNylasBufferTimeElement; } export interface NylasCalendarPickerCustomEvent extends CustomEvent { detail: T; target: HTMLNylasCalendarPickerElement; } export interface NylasCancelBookingFormCustomEvent extends CustomEvent { detail: T; target: HTMLNylasCancelBookingFormElement; } export interface NylasCancellationPolicyCustomEvent extends CustomEvent { detail: T; target: HTMLNylasCancellationPolicyElement; } export interface NylasCancelledEventCardCustomEvent extends CustomEvent { detail: T; target: HTMLNylasCancelledEventCardElement; } export interface NylasConfirmationEmailCustomEvent extends CustomEvent { detail: T; target: HTMLNylasConfirmationEmailElement; } export interface NylasConfirmedEventCardCustomEvent extends CustomEvent { detail: T; target: HTMLNylasConfirmedEventCardElement; } export interface NylasConnectedCalendarsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasConnectedCalendarsElement; } export interface NylasCustomEventSlugCustomEvent extends CustomEvent { detail: T; target: HTMLNylasCustomEventSlugElement; } export interface NylasCustomizeBookingSettingsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasCustomizeBookingSettingsElement; } export interface NylasDateComponentCustomEvent extends CustomEvent { detail: T; target: HTMLNylasDateComponentElement; } export interface NylasDatePickerCustomEvent extends CustomEvent { detail: T; target: HTMLNylasDatePickerElement; } export interface NylasDisableEmailsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasDisableEmailsElement; } export interface NylasEditorTabsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEditorTabsElement; } export interface NylasEditorTabsGroupCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEditorTabsGroupElement; } export interface NylasEventCalendarCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEventCalendarElement; } export interface NylasEventCapacityCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEventCapacityElement; } export interface NylasEventDescriptionCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEventDescriptionElement; } export interface NylasEventDurationCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEventDurationElement; } export interface NylasEventLocationCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEventLocationElement; } export interface NylasEventTimeslotCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEventTimeslotElement; } export interface NylasEventTitleCustomEvent extends CustomEvent { detail: T; target: HTMLNylasEventTitleElement; } export interface NylasFeedbackFormCustomEvent extends CustomEvent { detail: T; target: HTMLNylasFeedbackFormElement; } export interface NylasLimitFutureBookingsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasLimitFutureBookingsElement; } export interface NylasListConfigurationsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasListConfigurationsElement; } export interface NylasLocaleSwitchCustomEvent extends CustomEvent { detail: T; target: HTMLNylasLocaleSwitchElement; } export interface NylasMinBookingNoticeCustomEvent extends CustomEvent { detail: T; target: HTMLNylasMinBookingNoticeElement; } export interface NylasMinCancellationNoticeCustomEvent extends CustomEvent { detail: T; target: HTMLNylasMinCancellationNoticeElement; } export interface NylasOrganizerConfirmationCardCustomEvent extends CustomEvent { detail: T; target: HTMLNylasOrganizerConfirmationCardElement; } export interface NylasPageNameCustomEvent extends CustomEvent { detail: T; target: HTMLNylasPageNameElement; } export interface NylasPageStylingCustomEvent extends CustomEvent { detail: T; target: HTMLNylasPageStylingElement; } export interface NylasParticipantBookingCalendarsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasParticipantBookingCalendarsElement; } export interface NylasParticipantsCustomAvailabilityCustomEvent extends CustomEvent { detail: T; target: HTMLNylasParticipantsCustomAvailabilityElement; } export interface NylasReminderEmailsCustomEvent extends CustomEvent { detail: T; target: HTMLNylasReminderEmailsElement; } export interface NylasReminderTimeCustomEvent extends CustomEvent { detail: T; target: HTMLNylasReminderTimeElement; } export interface NylasSchedulerEditorCustomEvent extends CustomEvent { detail: T; target: HTMLNylasSchedulerEditorElement; } export interface NylasSchedulingCustomEvent extends CustomEvent { detail: T; target: HTMLNylasSchedulingElement; } export interface NylasSchedulingMethodCustomEvent extends CustomEvent { detail: T; target: HTMLNylasSchedulingMethodElement; } export interface NylasSelectEventTypeCustomEvent extends CustomEvent { detail: T; target: HTMLNylasSelectEventTypeElement; } export interface NylasTimeWindowPickerCustomEvent extends CustomEvent { detail: T; target: HTMLNylasTimeWindowPickerElement; } export interface NylasTimeslotIntervalCustomEvent extends CustomEvent { detail: T; target: HTMLNylasTimeslotIntervalElement; } export interface NylasTimeslotPickerCustomEvent extends CustomEvent { detail: T; target: HTMLNylasTimeslotPickerElement; } export interface RadioButtonGroupCustomEvent extends CustomEvent { detail: T; target: HTMLRadioButtonGroupElement; } export interface SelectDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLSelectDropdownElement; } export interface TextareaComponentCustomEvent extends CustomEvent { detail: T; target: HTMLTextareaComponentElement; } export interface TimePeriodSelectorCustomEvent extends CustomEvent { detail: T; target: HTMLTimePeriodSelectorElement; } export interface ToggleSwitchCustomEvent extends CustomEvent { detail: T; target: HTMLToggleSwitchElement; } declare global { interface HTMLAddCircleIconElement extends Components.AddCircleIcon, HTMLStencilElement { } var HTMLAddCircleIconElement: { prototype: HTMLAddCircleIconElement; new (): HTMLAddCircleIconElement; }; interface HTMLArchiveIconElement extends Components.ArchiveIcon, HTMLStencilElement { } var HTMLArchiveIconElement: { prototype: HTMLArchiveIconElement; new (): HTMLArchiveIconElement; }; interface HTMLArrowIconElement extends Components.ArrowIcon, HTMLStencilElement { } var HTMLArrowIconElement: { prototype: HTMLArrowIconElement; new (): HTMLArrowIconElement; }; interface HTMLBoldIconElement extends Components.BoldIcon, HTMLStencilElement { } var HTMLBoldIconElement: { prototype: HTMLBoldIconElement; new (): HTMLBoldIconElement; }; interface HTMLButtonComponentElement extends Components.ButtonComponent, HTMLStencilElement { } var HTMLButtonComponentElement: { prototype: HTMLButtonComponentElement; new (): HTMLButtonComponentElement; }; interface HTMLCalendarAgendaFillIconElement extends Components.CalendarAgendaFillIcon, HTMLStencilElement { } var HTMLCalendarAgendaFillIconElement: { prototype: HTMLCalendarAgendaFillIconElement; new (): HTMLCalendarAgendaFillIconElement; }; interface HTMLCalendarAgendaIconElement extends Components.CalendarAgendaIcon, HTMLStencilElement { } var HTMLCalendarAgendaIconElement: { prototype: HTMLCalendarAgendaIconElement; new (): HTMLCalendarAgendaIconElement; }; interface HTMLCalendarCancelIconElement extends Components.CalendarCancelIcon, HTMLStencilElement { } var HTMLCalendarCancelIconElement: { prototype: HTMLCalendarCancelIconElement; new (): HTMLCalendarCancelIconElement; }; interface HTMLCalendarCheckIconElement extends Components.CalendarCheckIcon, HTMLStencilElement { } var HTMLCalendarCheckIconElement: { prototype: HTMLCalendarCheckIconElement; new (): HTMLCalendarCheckIconElement; }; interface HTMLCalendarIconElement extends Components.CalendarIcon, HTMLStencilElement { } var HTMLCalendarIconElement: { prototype: HTMLCalendarIconElement; new (): HTMLCalendarIconElement; }; interface HTMLCalendarInfoIconElement extends Components.CalendarInfoIcon, HTMLStencilElement { } var HTMLCalendarInfoIconElement: { prototype: HTMLCalendarInfoIconElement; new (): HTMLCalendarInfoIconElement; }; interface HTMLCalendarPatternsIconElement extends Components.CalendarPatternsIcon, HTMLStencilElement { } var HTMLCalendarPatternsIconElement: { prototype: HTMLCalendarPatternsIconElement; new (): HTMLCalendarPatternsIconElement; }; interface HTMLCheckboxComponentElementEventMap { "nylasFormCheckboxToggled": { checked: boolean; name: string; label: string; }; } /** * The `checkbox-component` component is a UI component that allows users to select a checkbox. * This component is used in the scheduling form to input checkbox type inputs. */ interface HTMLCheckboxComponentElement extends Components.CheckboxComponent, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCheckboxComponentElement, ev: CheckboxComponentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLCheckboxComponentElement, ev: CheckboxComponentCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLCheckboxComponentElement: { prototype: HTMLCheckboxComponentElement; new (): HTMLCheckboxComponentElement; }; interface HTMLCheckboxGroupElementEventMap { "nylasCheckboxGroupChanged": { selectedValues: string[]; name: string; }; } /** * The `checkbox-group` component is a UI component that allows users to select multiple options from a list. * It manages a group of checkboxes and their states. */ interface HTMLCheckboxGroupElement extends Components.CheckboxGroup, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCheckboxGroupElement, ev: CheckboxGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLCheckboxGroupElement, ev: CheckboxGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLCheckboxGroupElement: { prototype: HTMLCheckboxGroupElement; new (): HTMLCheckboxGroupElement; }; interface HTMLCheckmarkCircleIconElement extends Components.CheckmarkCircleIcon, HTMLStencilElement { } var HTMLCheckmarkCircleIconElement: { prototype: HTMLCheckmarkCircleIconElement; new (): HTMLCheckmarkCircleIconElement; }; interface HTMLCheckmarkIconElement extends Components.CheckmarkIcon, HTMLStencilElement { } var HTMLCheckmarkIconElement: { prototype: HTMLCheckmarkIconElement; new (): HTMLCheckmarkIconElement; }; interface HTMLChevronIconElement extends Components.ChevronIcon, HTMLStencilElement { } var HTMLChevronIconElement: { prototype: HTMLChevronIconElement; new (): HTMLChevronIconElement; }; interface HTMLClockIconElement extends Components.ClockIcon, HTMLStencilElement { } var HTMLClockIconElement: { prototype: HTMLClockIconElement; new (): HTMLClockIconElement; }; interface HTMLCloseIconElement extends Components.CloseIcon, HTMLStencilElement { } var HTMLCloseIconElement: { prototype: HTMLCloseIconElement; new (): HTMLCloseIconElement; }; interface HTMLCopyIconElement extends Components.CopyIcon, HTMLStencilElement { } var HTMLCopyIconElement: { prototype: HTMLCopyIconElement; new (): HTMLCopyIconElement; }; interface HTMLDeleteIconElement extends Components.DeleteIcon, HTMLStencilElement { } var HTMLDeleteIconElement: { prototype: HTMLDeleteIconElement; new (): HTMLDeleteIconElement; }; interface HTMLDocumentRefreshIconElement extends Components.DocumentRefreshIcon, HTMLStencilElement { } var HTMLDocumentRefreshIconElement: { prototype: HTMLDocumentRefreshIconElement; new (): HTMLDocumentRefreshIconElement; }; interface HTMLDragableIconElement extends Components.DragableIcon, HTMLStencilElement { } var HTMLDragableIconElement: { prototype: HTMLDragableIconElement; new (): HTMLDragableIconElement; }; interface HTMLEditIconElement extends Components.EditIcon, HTMLStencilElement { } var HTMLEditIconElement: { prototype: HTMLEditIconElement; new (): HTMLEditIconElement; }; interface HTMLEnvelopeFillIconElement extends Components.EnvelopeFillIcon, HTMLStencilElement { } var HTMLEnvelopeFillIconElement: { prototype: HTMLEnvelopeFillIconElement; new (): HTMLEnvelopeFillIconElement; }; interface HTMLEnvelopeIconElement extends Components.EnvelopeIcon, HTMLStencilElement { } var HTMLEnvelopeIconElement: { prototype: HTMLEnvelopeIconElement; new (): HTMLEnvelopeIconElement; }; interface HTMLEyeIconElement extends Components.EyeIcon, HTMLStencilElement { } var HTMLEyeIconElement: { prototype: HTMLEyeIconElement; new (): HTMLEyeIconElement; }; interface HTMLFeedbackIconElement extends Components.FeedbackIcon, HTMLStencilElement { } var HTMLFeedbackIconElement: { prototype: HTMLFeedbackIconElement; new (): HTMLFeedbackIconElement; }; interface HTMLFlowIconElement extends Components.FlowIcon, HTMLStencilElement { } var HTMLFlowIconElement: { prototype: HTMLFlowIconElement; new (): HTMLFlowIconElement; }; interface HTMLFolderIconElement extends Components.FolderIcon, HTMLStencilElement { } var HTMLFolderIconElement: { prototype: HTMLFolderIconElement; new (): HTMLFolderIconElement; }; interface HTMLForwardIconElement extends Components.ForwardIcon, HTMLStencilElement { } var HTMLForwardIconElement: { prototype: HTMLForwardIconElement; new (): HTMLForwardIconElement; }; interface HTMLGlobeIconElement extends Components.GlobeIcon, HTMLStencilElement { } var HTMLGlobeIconElement: { prototype: HTMLGlobeIconElement; new (): HTMLGlobeIconElement; }; interface HTMLGoogleLogoIconElement extends Components.GoogleLogoIcon, HTMLStencilElement { } var HTMLGoogleLogoIconElement: { prototype: HTMLGoogleLogoIconElement; new (): HTMLGoogleLogoIconElement; }; interface HTMLGoogleMeetIconElement extends Components.GoogleMeetIcon, HTMLStencilElement { } var HTMLGoogleMeetIconElement: { prototype: HTMLGoogleMeetIconElement; new (): HTMLGoogleMeetIconElement; }; interface HTMLInboxIconElement extends Components.InboxIcon, HTMLStencilElement { } var HTMLInboxIconElement: { prototype: HTMLInboxIconElement; new (): HTMLInboxIconElement; }; interface HTMLInfoIconElement extends Components.InfoIcon, HTMLStencilElement { } var HTMLInfoIconElement: { prototype: HTMLInfoIconElement; new (): HTMLInfoIconElement; }; interface HTMLInputColorPickerElementEventMap { "nylasFormDropdownChanged": { value: string; name: string; error?: string; label?: string; }; } /** * The `input-color-picker` component is a dropdown that allows users to select an accent color from either RGB inputs or an interactive color picker and converts them to a hex value. * This component is used in the scheduling form to input dropdown type inputs. */ interface HTMLInputColorPickerElement extends Components.InputColorPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLInputColorPickerElement, ev: InputColorPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLInputColorPickerElement, ev: InputColorPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLInputColorPickerElement: { prototype: HTMLInputColorPickerElement; new (): HTMLInputColorPickerElement; }; interface HTMLInputComponentElementEventMap { "nylasFormInputChanged": { value: string; name: string; label: string; type: string; error: string; }; "nylasFormInputFocused": { value: string; name: string; }; "nylasFormInputBlurred": { value: string; name: string; }; } /** * The `input-component` component is a UI component that allows users to input text, email, or phone number values. * This component is used in the scheduling form to input text, email and phone number type inputs. */ interface HTMLInputComponentElement extends Components.InputComponent, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLInputComponentElement, ev: InputComponentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLInputComponentElement, ev: InputComponentCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLInputComponentElement: { prototype: HTMLInputComponentElement; new (): HTMLInputComponentElement; }; interface HTMLInputDropdownElementEventMap { "inputOptionChanged": { value: DropdownOption['value']; name: string; }; } /** * The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options. */ interface HTMLInputDropdownElement extends Components.InputDropdown, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLInputDropdownElement, ev: InputDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLInputDropdownElement, ev: InputDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLInputDropdownElement: { prototype: HTMLInputDropdownElement; new (): HTMLInputDropdownElement; }; interface HTMLInputImageUrlElementEventMap { "nylasFormInputImageUrlInvalid": { value: string; name: string }; "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-image-input` component is a UI component that allows users input an image URL and see a preview of the image. */ interface HTMLInputImageUrlElement extends Components.InputImageUrl, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLInputImageUrlElement, ev: InputImageUrlCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLInputImageUrlElement, ev: InputImageUrlCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLInputImageUrlElement: { prototype: HTMLInputImageUrlElement; new (): HTMLInputImageUrlElement; }; interface HTMLItalicIconElement extends Components.ItalicIcon, HTMLStencilElement { } var HTMLItalicIconElement: { prototype: HTMLItalicIconElement; new (): HTMLItalicIconElement; }; interface HTMLLoadingIconElement extends Components.LoadingIcon, HTMLStencilElement { } var HTMLLoadingIconElement: { prototype: HTMLLoadingIconElement; new (): HTMLLoadingIconElement; }; interface HTMLLocationIconElement extends Components.LocationIcon, HTMLStencilElement { } var HTMLLocationIconElement: { prototype: HTMLLocationIconElement; new (): HTMLLocationIconElement; }; interface HTMLLocationOffIconElement extends Components.LocationOffIcon, HTMLStencilElement { } var HTMLLocationOffIconElement: { prototype: HTMLLocationOffIconElement; new (): HTMLLocationOffIconElement; }; interface HTMLMicrosoftLogoIconElement extends Components.MicrosoftLogoIcon, HTMLStencilElement { } var HTMLMicrosoftLogoIconElement: { prototype: HTMLMicrosoftLogoIconElement; new (): HTMLMicrosoftLogoIconElement; }; interface HTMLMicrosoftTeamsIconElement extends Components.MicrosoftTeamsIcon, HTMLStencilElement { } var HTMLMicrosoftTeamsIconElement: { prototype: HTMLMicrosoftTeamsIconElement; new (): HTMLMicrosoftTeamsIconElement; }; interface HTMLMultiSelectDropdownElementEventMap { "selectedOptionsChanged": { value: string[]; name: string; }; } interface HTMLMultiSelectDropdownElement extends Components.MultiSelectDropdown, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLMultiSelectDropdownElement, ev: MultiSelectDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLMultiSelectDropdownElement, ev: MultiSelectDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLMultiSelectDropdownElement: { prototype: HTMLMultiSelectDropdownElement; new (): HTMLMultiSelectDropdownElement; }; interface HTMLNylasAdditionalParticipantsElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-additional-participants` component is a form input for adding additional participants to an event. */ interface HTMLNylasAdditionalParticipantsElement extends Components.NylasAdditionalParticipants, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasAdditionalParticipantsElement, ev: NylasAdditionalParticipantsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasAdditionalParticipantsElement, ev: NylasAdditionalParticipantsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasAdditionalParticipantsElement: { prototype: HTMLNylasAdditionalParticipantsElement; new (): HTMLNylasAdditionalParticipantsElement; }; interface HTMLNylasAvailabilityPickerElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-availability-picker` component is a form input for selecting availability (open hours). */ interface HTMLNylasAvailabilityPickerElement extends Components.NylasAvailabilityPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasAvailabilityPickerElement, ev: NylasAvailabilityPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasAvailabilityPickerElement, ev: NylasAvailabilityPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasAvailabilityPickerElement: { prototype: HTMLNylasAvailabilityPickerElement; new (): HTMLNylasAvailabilityPickerElement; }; interface HTMLNylasBookedEventCardElementEventMap { "cancelBookingButtonClicked": { bookingId: string }; "rescheduleButtonClicked": { bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }; "rescheduleBookedEventError": NylasSchedulerErrorResponse; "cancelBookedEventValidationError": { error: { title: string; message: string; }; }; } /** * The `nylas-booked-event-card` component is a UI component that displays the booked event card. */ interface HTMLNylasBookedEventCardElement extends Components.NylasBookedEventCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasBookedEventCardElement, ev: NylasBookedEventCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasBookedEventCardElement, ev: NylasBookedEventCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasBookedEventCardElement: { prototype: HTMLNylasBookedEventCardElement; new (): HTMLNylasBookedEventCardElement; }; interface HTMLNylasBookingCalendarPickerElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker. */ interface HTMLNylasBookingCalendarPickerElement extends Components.NylasBookingCalendarPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasBookingCalendarPickerElement, ev: NylasBookingCalendarPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasBookingCalendarPickerElement, ev: NylasBookingCalendarPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasBookingCalendarPickerElement: { prototype: HTMLNylasBookingCalendarPickerElement; new (): HTMLNylasBookingCalendarPickerElement; }; interface HTMLNylasBookingConfirmationRedirectElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-booking-confirmation-redirect` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed. */ interface HTMLNylasBookingConfirmationRedirectElement extends Components.NylasBookingConfirmationRedirect, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasBookingConfirmationRedirectElement, ev: NylasBookingConfirmationRedirectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasBookingConfirmationRedirectElement, ev: NylasBookingConfirmationRedirectCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasBookingConfirmationRedirectElement: { prototype: HTMLNylasBookingConfirmationRedirectElement; new (): HTMLNylasBookingConfirmationRedirectElement; }; interface HTMLNylasBookingConfirmationTypeElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-booking-confirmation-type` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed. */ interface HTMLNylasBookingConfirmationTypeElement extends Components.NylasBookingConfirmationType, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasBookingConfirmationTypeElement, ev: NylasBookingConfirmationTypeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasBookingConfirmationTypeElement, ev: NylasBookingConfirmationTypeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasBookingConfirmationTypeElement: { prototype: HTMLNylasBookingConfirmationTypeElement; new (): HTMLNylasBookingConfirmationTypeElement; }; interface HTMLNylasBookingFormElementEventMap { "nameChanged": string; "emailChanged": string; "backButtonClicked": boolean; "detailsConfirmed": NylasSchedulerBookingDataWithFlatFields; "bookingFormError": Partial; "bookingFormSubmitted": void; } /** * The `nylas-booking-form` component is a UI component that allows users to book an event. * The booking form component. */ interface HTMLNylasBookingFormElement extends Components.NylasBookingForm, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasBookingFormElement, ev: NylasBookingFormCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasBookingFormElement, ev: NylasBookingFormCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasBookingFormElement: { prototype: HTMLNylasBookingFormElement; new (): HTMLNylasBookingFormElement; }; interface HTMLNylasBookingFormConfigElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-booking-form-config` component is a form input for adding additional fields to the booking form. */ interface HTMLNylasBookingFormConfigElement extends Components.NylasBookingFormConfig, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasBookingFormConfigElement, ev: NylasBookingFormConfigCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasBookingFormConfigElement, ev: NylasBookingFormConfigCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasBookingFormConfigElement: { prototype: HTMLNylasBookingFormConfigElement; new (): HTMLNylasBookingFormConfigElement; }; interface HTMLNylasBufferTimeElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event. */ interface HTMLNylasBufferTimeElement extends Components.NylasBufferTime, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasBufferTimeElement, ev: NylasBufferTimeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasBufferTimeElement, ev: NylasBufferTimeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasBufferTimeElement: { prototype: HTMLNylasBufferTimeElement; new (): HTMLNylasBufferTimeElement; }; interface HTMLNylasCalendarPickerElementEventMap { "valueChanged": { value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void; }; } /** * The `nylas-calendar-picker` component is a form input for selecting calendars to check availability. */ interface HTMLNylasCalendarPickerElement extends Components.NylasCalendarPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasCalendarPickerElement, ev: NylasCalendarPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasCalendarPickerElement, ev: NylasCalendarPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasCalendarPickerElement: { prototype: HTMLNylasCalendarPickerElement; new (): HTMLNylasCalendarPickerElement; }; interface HTMLNylasCancelBookingFormElementEventMap { "goBackButtonClicked": void; "cancelBookingFormSubmitted": { bookingId: string; action: 'reject' | 'cancel'; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void; }; "triggerValidation": {}; "cancelBookedEventError": NylasSchedulerErrorResponse; "cancelBookingFormError": Partial; } /** * The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking (DELETE request). * This component is also used to reject a booking (PUT request) by the organizer, if the prop `rejectBookingId` is provided. */ interface HTMLNylasCancelBookingFormElement extends Components.NylasCancelBookingForm, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasCancelBookingFormElement, ev: NylasCancelBookingFormCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasCancelBookingFormElement, ev: NylasCancelBookingFormCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasCancelBookingFormElement: { prototype: HTMLNylasCancelBookingFormElement; new (): HTMLNylasCancelBookingFormElement; }; interface HTMLNylasCancellationPolicyElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-cancellation-policy` component is a form input for the cancellation policy message of an event. */ interface HTMLNylasCancellationPolicyElement extends Components.NylasCancellationPolicy, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasCancellationPolicyElement, ev: NylasCancellationPolicyCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasCancellationPolicyElement, ev: NylasCancellationPolicyCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasCancellationPolicyElement: { prototype: HTMLNylasCancellationPolicyElement; new (): HTMLNylasCancellationPolicyElement; }; interface HTMLNylasCancelledEventCardElementEventMap { "closeCancelEventCardClicked": { errorHandler?: (error: NylasSchedulerErrorResponse1) => void }; "cancelledEventCardError": NylasSchedulerErrorResponse1; } /** * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card. */ interface HTMLNylasCancelledEventCardElement extends Components.NylasCancelledEventCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasCancelledEventCardElement, ev: NylasCancelledEventCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasCancelledEventCardElement, ev: NylasCancelledEventCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasCancelledEventCardElement: { prototype: HTMLNylasCancelledEventCardElement; new (): HTMLNylasCancelledEventCardElement; }; interface HTMLNylasConfirmationEmailElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event. */ interface HTMLNylasConfirmationEmailElement extends Components.NylasConfirmationEmail, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasConfirmationEmailElement, ev: NylasConfirmationEmailCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasConfirmationEmailElement, ev: NylasConfirmationEmailCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasConfirmationEmailElement: { prototype: HTMLNylasConfirmationEmailElement; new (): HTMLNylasConfirmationEmailElement; }; interface HTMLNylasConfirmedEventCardElementEventMap { "closeConfirmEventCardClicked": { errorHandler?: (error: NylasSchedulerErrorResponse1) => void }; "confirmedEventCardError": NylasSchedulerErrorResponse1; } /** * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card. */ interface HTMLNylasConfirmedEventCardElement extends Components.NylasConfirmedEventCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasConfirmedEventCardElement, ev: NylasConfirmedEventCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasConfirmedEventCardElement, ev: NylasConfirmedEventCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasConfirmedEventCardElement: { prototype: HTMLNylasConfirmedEventCardElement; new (): HTMLNylasConfirmedEventCardElement; }; interface HTMLNylasConnectedCalendarsElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants. */ interface HTMLNylasConnectedCalendarsElement extends Components.NylasConnectedCalendars, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasConnectedCalendarsElement, ev: NylasConnectedCalendarsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasConnectedCalendarsElement, ev: NylasConnectedCalendarsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasConnectedCalendarsElement: { prototype: HTMLNylasConnectedCalendarsElement; new (): HTMLNylasConnectedCalendarsElement; }; /** * The `nylas-custom-booking-flow` component is an input form for booking type (automatically or manually accept bookings) and confirmation redirect URL (default or custom). * This component is a container for the `nylas-booking-confirmation-type`, `nylas-booking-confirmation-redirect` components. * ```html * *
* * *
* * ``` */ interface HTMLNylasCustomBookingFlowElement extends Components.NylasCustomBookingFlow, HTMLStencilElement { } var HTMLNylasCustomBookingFlowElement: { prototype: HTMLNylasCustomBookingFlowElement; new (): HTMLNylasCustomBookingFlowElement; }; interface HTMLNylasCustomEventSlugElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-custom-event-slug` component is a UI component that allows users to add a custom URL slug for their event link. */ interface HTMLNylasCustomEventSlugElement extends Components.NylasCustomEventSlug, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasCustomEventSlugElement, ev: NylasCustomEventSlugCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasCustomEventSlugElement, ev: NylasCustomEventSlugCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasCustomEventSlugElement: { prototype: HTMLNylasCustomEventSlugElement; new (): HTMLNylasCustomEventSlugElement; }; interface HTMLNylasCustomizeBookingSettingsElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-customize-booking-settings` component is a UI component that displays the booking calendar picker. */ interface HTMLNylasCustomizeBookingSettingsElement extends Components.NylasCustomizeBookingSettings, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasCustomizeBookingSettingsElement, ev: NylasCustomizeBookingSettingsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasCustomizeBookingSettingsElement, ev: NylasCustomizeBookingSettingsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasCustomizeBookingSettingsElement: { prototype: HTMLNylasCustomizeBookingSettingsElement; new (): HTMLNylasCustomizeBookingSettingsElement; }; interface HTMLNylasDateComponentElementEventMap { "nylasFormInputChanged": { value: string; name: string; label: string; type: string; error: string; }; "nylasFormInputFocused": { value: string; name: string; }; "nylasFormInputBlurred": { value: string; name: string; }; } /** * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values. * This component is used in the scheduling form to input text, email and phone number type inputs. */ interface HTMLNylasDateComponentElement extends Components.NylasDateComponent, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasDateComponentElement, ev: NylasDateComponentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasDateComponentElement, ev: NylasDateComponentCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasDateComponentElement: { prototype: HTMLNylasDateComponentElement; new (): HTMLNylasDateComponentElement; }; interface HTMLNylasDatePickerElementEventMap { "dateSelected": Date; "monthChanged": Date; } /** * The `nylas-date-picker` component is a UI component that allows users to select a date. */ interface HTMLNylasDatePickerElement extends Components.NylasDatePicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasDatePickerElement, ev: NylasDatePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasDatePickerElement, ev: NylasDatePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasDatePickerElement: { prototype: HTMLNylasDatePickerElement; new (): HTMLNylasDatePickerElement; }; interface HTMLNylasDisableEmailsElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-disable-emails` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface HTMLNylasDisableEmailsElement extends Components.NylasDisableEmails, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasDisableEmailsElement, ev: NylasDisableEmailsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasDisableEmailsElement, ev: NylasDisableEmailsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasDisableEmailsElement: { prototype: HTMLNylasDisableEmailsElement; new (): HTMLNylasDisableEmailsElement; }; interface HTMLNylasEditorTabsElementEventMap { "schedulerConfigChanged": SchedulerEventDetail; "schedulerConfigCreated": SchedulerEventDetail; "cancelButtonClick": void; "formSubmitted": void; "previewButtonClicked": HTMLNylasEditorTabsElement; "schedulerEditorFormUpdated": { value: string; name: string }; "nylasSchedulerError": { notification: Notification; host: HTMLElement }; "dismissNotification": { id: string; host: HTMLNylasEditorTabsElement }; } /** * The nylas-editor-tabs component provides the user interface for managing editor tabs within the scheduler editor. * It is primarily used to control the edit mode of the scheduler editor, and it is rendered automatically by the * parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly * or set any props manually, as its behavior is fully managed by the parent component. */ interface HTMLNylasEditorTabsElement extends Components.NylasEditorTabs, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEditorTabsElement, ev: NylasEditorTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEditorTabsElement, ev: NylasEditorTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEditorTabsElement: { prototype: HTMLNylasEditorTabsElement; new (): HTMLNylasEditorTabsElement; }; interface HTMLNylasEditorTabsGroupElementEventMap { "schedulerConfigChanged": SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement }; "schedulerConfigCreated": SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement }; "cancelButtonClick": void; "formSubmitted": void; "previewButtonClicked": HTMLNylasEditorTabsGroupElement; "schedulerEditorFormUpdated": { value: string; name: string }; "groupEventCreateTriggered": { groupEvent: Partial; configId: string; host: HTMLNylasEditorTabsGroupElement }; "groupEventUpdateTriggered": { groupEvent: GroupEvent; chosenOption: RecurrenceUpdateOption; configId: string; host: HTMLNylasEditorTabsGroupElement; }; "groupEventDeleteTriggered": { groupEvent: GroupEvent; chosenOption: RecurrenceDeleteOption; configId: string; host: HTMLNylasEditorTabsGroupElement; }; "groupEventImportTriggered": { groupEvent: ImportGroupEventDetails; configId: string; host: HTMLNylasEditorTabsGroupElement; }; "saveGroupEventChangesError": { error: string; configId: string; host: HTMLNylasEditorTabsGroupElement; }; "nylasSchedulerError": { notification: Notification; host: HTMLElement }; "dismissNotification": { id: string; host: HTMLNylasEditorTabsGroupElement }; } /** * The nylas-editor-tabs-group component provides the user interface for managing editor tabs within the scheduler editor. * It is primarily used to control the edit mode of the scheduler editor, and it is rendered automatically by the * parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly * or set any props manually, as its behavior is fully managed by the parent component. */ interface HTMLNylasEditorTabsGroupElement extends Components.NylasEditorTabsGroup, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEditorTabsGroupElement, ev: NylasEditorTabsGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEditorTabsGroupElement, ev: NylasEditorTabsGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEditorTabsGroupElement: { prototype: HTMLNylasEditorTabsGroupElement; new (): HTMLNylasEditorTabsGroupElement; }; interface HTMLNylasEventCalendarElementEventMap { "fetchMasterGroupEvent": string; "saveGroupEventChanges": { data: GroupEventAPIData; action: 'this' | 'future' | 'all' }; "deleteGroupEvent": { data: GroupEventAPIData; action: 'this' | 'future' | 'all' }; "groupEventSelected": GroupEventAPIData; "createGroupEvent": CreateGroupEventFormState; "calendarViewChanged": { startTime: number; endTime: number }; "previosNextClicked": { direction: 'prev' | 'next'; view: 'day' | 'week' | 'month'; currentViewRange: { startTime: number; endTime: number } }; "setCalendarViewDateRange": { startTime: number; endTime: number }; "importGroupEvent": { event_id: string; calendar_id: string; }; } interface HTMLNylasEventCalendarElement extends Components.NylasEventCalendar, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEventCalendarElement, ev: NylasEventCalendarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEventCalendarElement, ev: NylasEventCalendarCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEventCalendarElement: { prototype: HTMLNylasEventCalendarElement; new (): HTMLNylasEventCalendarElement; }; interface HTMLNylasEventCapacityElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-event-capacity` component is a UI component that allows users to set the event capacity for the scheduler configuration. */ interface HTMLNylasEventCapacityElement extends Components.NylasEventCapacity, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEventCapacityElement, ev: NylasEventCapacityCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEventCapacityElement, ev: NylasEventCapacityCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEventCapacityElement: { prototype: HTMLNylasEventCapacityElement; new (): HTMLNylasEventCapacityElement; }; interface HTMLNylasEventDescriptionElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-event-description` component is a form input for the description of an event. */ interface HTMLNylasEventDescriptionElement extends Components.NylasEventDescription, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEventDescriptionElement, ev: NylasEventDescriptionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEventDescriptionElement, ev: NylasEventDescriptionCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEventDescriptionElement: { prototype: HTMLNylasEventDescriptionElement; new (): HTMLNylasEventDescriptionElement; }; interface HTMLNylasEventDurationElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-event-duration` component is a form input for the duration of an event. */ interface HTMLNylasEventDurationElement extends Components.NylasEventDuration, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEventDurationElement, ev: NylasEventDurationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEventDurationElement, ev: NylasEventDurationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEventDurationElement: { prototype: HTMLNylasEventDurationElement; new (): HTMLNylasEventDurationElement; }; /** * The `nylas-event-info` component is an input form for event information such as title, description, duration, location. * This component is a container for the `nylas-event-title`, `nylas-event-description`, `nylas-event-duration`, and `nylas-event-location` components. * ```html * *
* * * * *
* * ``` */ interface HTMLNylasEventInfoElement extends Components.NylasEventInfo, HTMLStencilElement { } var HTMLNylasEventInfoElement: { prototype: HTMLNylasEventInfoElement; new (): HTMLNylasEventInfoElement; }; /** * The `nylas-event-limits` component is an input form for event limits, such as the number of available days in the future and * the minimum period of notice that a guest must provide to cancel a booking. * This component is a container for the `nylas-limit-future-bookings` and `nylas-min-cancellation-notice` components. * ```html * *
* * *
* * ``` */ interface HTMLNylasEventLimitsElement extends Components.NylasEventLimits, HTMLStencilElement { } var HTMLNylasEventLimitsElement: { prototype: HTMLNylasEventLimitsElement; new (): HTMLNylasEventLimitsElement; }; interface HTMLNylasEventLocationElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-event-location` component is a form input for the location of an event. */ interface HTMLNylasEventLocationElement extends Components.NylasEventLocation, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEventLocationElement, ev: NylasEventLocationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEventLocationElement, ev: NylasEventLocationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEventLocationElement: { prototype: HTMLNylasEventLocationElement; new (): HTMLNylasEventLocationElement; }; interface HTMLNylasEventTimeslotElementEventMap { "valueChanged": { value: string; name: string; }; "timeWindowFormError": { key: string; message: string; uniqueIdentifier?: string; }; "dateTimeInputError": { key: string; message: string; }; } /** * The `nylas-event-timeslot` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface HTMLNylasEventTimeslotElement extends Components.NylasEventTimeslot, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEventTimeslotElement, ev: NylasEventTimeslotCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEventTimeslotElement, ev: NylasEventTimeslotCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEventTimeslotElement: { prototype: HTMLNylasEventTimeslotElement; new (): HTMLNylasEventTimeslotElement; }; interface HTMLNylasEventTitleElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-event-title` component is a form input for the title of an event. */ interface HTMLNylasEventTitleElement extends Components.NylasEventTitle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasEventTitleElement, ev: NylasEventTitleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasEventTitleElement, ev: NylasEventTitleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasEventTitleElement: { prototype: HTMLNylasEventTitleElement; new (): HTMLNylasEventTitleElement; }; interface HTMLNylasFeedbackFormElementEventMap { "feedbackModalClosed": void; "feedbackSubmitted": { feedback: string }; "triggerValidation": void; } /** * The `nylas-feedback-form` component is a UI component that displays the booked event card. */ interface HTMLNylasFeedbackFormElement extends Components.NylasFeedbackForm, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasFeedbackFormElement, ev: NylasFeedbackFormCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasFeedbackFormElement, ev: NylasFeedbackFormCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasFeedbackFormElement: { prototype: HTMLNylasFeedbackFormElement; new (): HTMLNylasFeedbackFormElement; }; /** * The `nylas-form-card` component is a card that can be used to display a form. It is a simple wrapper around a card with a header and content area. */ interface HTMLNylasFormCardElement extends Components.NylasFormCard, HTMLStencilElement { } var HTMLNylasFormCardElement: { prototype: HTMLNylasFormCardElement; new (): HTMLNylasFormCardElement; }; interface HTMLNylasLimitFutureBookingsElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-limit-future-bookings` component is a form input for the number of days in the future a guest is allowed to book an event. */ interface HTMLNylasLimitFutureBookingsElement extends Components.NylasLimitFutureBookings, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasLimitFutureBookingsElement, ev: NylasLimitFutureBookingsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasLimitFutureBookingsElement, ev: NylasLimitFutureBookingsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasLimitFutureBookingsElement: { prototype: HTMLNylasLimitFutureBookingsElement; new (): HTMLNylasLimitFutureBookingsElement; }; interface HTMLNylasListConfigurationsElementEventMap { "initListConfigurations": { host: HTMLNylasListConfigurationsElement; cursor?: string; }; "createButtonClick": HTMLNylasListConfigurationsElement; "editButtonClick": { host: HTMLNylasListConfigurationsElement; configuration: Configuration | GroupConfiguration; }; "deleteButtonClick": { host: HTMLNylasListConfigurationsElement; configuration: Configuration | GroupConfiguration; }; "nylasSchedulerError": { notification: Notification; host: HTMLElement }; "dismissNotification": { id: string; host: HTMLNylasListConfigurationsElement }; } /** * The `nylas-list-configurations` component displays a list of scheduling pages. */ interface HTMLNylasListConfigurationsElement extends Components.NylasListConfigurations, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasListConfigurationsElement, ev: NylasListConfigurationsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasListConfigurationsElement, ev: NylasListConfigurationsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasListConfigurationsElement: { prototype: HTMLNylasListConfigurationsElement; new (): HTMLNylasListConfigurationsElement; }; interface HTMLNylasLocaleSwitchElementEventMap { "timezoneChanged": string; "languageChanged": string; } /** * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language. */ interface HTMLNylasLocaleSwitchElement extends Components.NylasLocaleSwitch, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasLocaleSwitchElement, ev: NylasLocaleSwitchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasLocaleSwitchElement, ev: NylasLocaleSwitchCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasLocaleSwitchElement: { prototype: HTMLNylasLocaleSwitchElement; new (): HTMLNylasLocaleSwitchElement; }; interface HTMLNylasLogoElement extends Components.NylasLogo, HTMLStencilElement { } var HTMLNylasLogoElement: { prototype: HTMLNylasLogoElement; new (): HTMLNylasLogoElement; }; interface HTMLNylasMinBookingNoticeElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-min-booking-notice` component is a form input for the minimum period of notice (minutes) that a guest must * provide to book an event. */ interface HTMLNylasMinBookingNoticeElement extends Components.NylasMinBookingNotice, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasMinBookingNoticeElement, ev: NylasMinBookingNoticeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasMinBookingNoticeElement, ev: NylasMinBookingNoticeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasMinBookingNoticeElement: { prototype: HTMLNylasMinBookingNoticeElement; new (): HTMLNylasMinBookingNoticeElement; }; interface HTMLNylasMinCancellationNoticeElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-min-cancellation-notice` component is a form input for the minimum period of notice (minutes) that a guest must * provide to cancel a booked event. */ interface HTMLNylasMinCancellationNoticeElement extends Components.NylasMinCancellationNotice, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasMinCancellationNoticeElement, ev: NylasMinCancellationNoticeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasMinCancellationNoticeElement, ev: NylasMinCancellationNoticeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasMinCancellationNoticeElement: { prototype: HTMLNylasMinCancellationNoticeElement; new (): HTMLNylasMinCancellationNoticeElement; }; /** * The `nylas-notification` component is a UI component that displays notifications. */ interface HTMLNylasNotificationElement extends Components.NylasNotification, HTMLStencilElement { } var HTMLNylasNotificationElement: { prototype: HTMLNylasNotificationElement; new (): HTMLNylasNotificationElement; }; interface HTMLNylasOrganizerConfirmationCardElementEventMap { "rejectBookingButtonClicked": { bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }; "confirmBookingButtonClicked": { bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void; }; "confirmBookingError": NylasSchedulerErrorResponse; } /** * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card. */ interface HTMLNylasOrganizerConfirmationCardElement extends Components.NylasOrganizerConfirmationCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasOrganizerConfirmationCardElement, ev: NylasOrganizerConfirmationCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasOrganizerConfirmationCardElement, ev: NylasOrganizerConfirmationCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasOrganizerConfirmationCardElement: { prototype: HTMLNylasOrganizerConfirmationCardElement; new (): HTMLNylasOrganizerConfirmationCardElement; }; interface HTMLNylasPageNameElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker. */ interface HTMLNylasPageNameElement extends Components.NylasPageName, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasPageNameElement, ev: NylasPageNameCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasPageNameElement, ev: NylasPageNameCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasPageNameElement: { prototype: HTMLNylasPageNameElement; new (): HTMLNylasPageNameElement; }; interface HTMLNylasPageStylingElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; "bookingFormSubmitted": void; } /** * The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page. * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input * fields you want to display. The component will automatically update the appearance object when the input fields are changed. * Ensure that the input fields have the `name` attribute set to the key in the appearance object. * If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page. * The fields that can be customized in the Nylas hosted scheduler page are: * - Primary color: (name: color) * - Company logo: (name: company_logo_url) * - Submit button label: (name: submit_button_label) * - Thank you message: (name: thank_you_message) * This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component. */ interface HTMLNylasPageStylingElement extends Components.NylasPageStyling, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasPageStylingElement, ev: NylasPageStylingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasPageStylingElement, ev: NylasPageStylingCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasPageStylingElement: { prototype: HTMLNylasPageStylingElement; new (): HTMLNylasPageStylingElement; }; interface HTMLNylasParticipantBookingCalendarsElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-participant-booking-calendars` component is a form input for selecting calendars to check availability for participants. */ interface HTMLNylasParticipantBookingCalendarsElement extends Components.NylasParticipantBookingCalendars, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasParticipantBookingCalendarsElement, ev: NylasParticipantBookingCalendarsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasParticipantBookingCalendarsElement, ev: NylasParticipantBookingCalendarsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasParticipantBookingCalendarsElement: { prototype: HTMLNylasParticipantBookingCalendarsElement; new (): HTMLNylasParticipantBookingCalendarsElement; }; interface HTMLNylasParticipantsCustomAvailabilityElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants. */ interface HTMLNylasParticipantsCustomAvailabilityElement extends Components.NylasParticipantsCustomAvailability, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasParticipantsCustomAvailabilityElement, ev: NylasParticipantsCustomAvailabilityCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasParticipantsCustomAvailabilityElement, ev: NylasParticipantsCustomAvailabilityCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasParticipantsCustomAvailabilityElement: { prototype: HTMLNylasParticipantsCustomAvailabilityElement; new (): HTMLNylasParticipantsCustomAvailabilityElement; }; interface HTMLNylasReminderEmailsElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; "nylasSuggestReminderMinutes": { minutes: number }; } /** * The `nylas-reminder-emails` component is a UI component that allows users to set buffer time before and after an event. */ interface HTMLNylasReminderEmailsElement extends Components.NylasReminderEmails, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasReminderEmailsElement, ev: NylasReminderEmailsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasReminderEmailsElement, ev: NylasReminderEmailsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasReminderEmailsElement: { prototype: HTMLNylasReminderEmailsElement; new (): HTMLNylasReminderEmailsElement; }; interface HTMLNylasReminderTimeElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-reminder-time` component is a form input for the reminder time before an event. */ interface HTMLNylasReminderTimeElement extends Components.NylasReminderTime, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasReminderTimeElement, ev: NylasReminderTimeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasReminderTimeElement, ev: NylasReminderTimeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasReminderTimeElement: { prototype: HTMLNylasReminderTimeElement; new (): HTMLNylasReminderTimeElement; }; interface HTMLNylasSchedulerEditorElementEventMap { "init": HTMLNylasSchedulerEditorElement; "loggedIn": HTMLNylasSchedulerEditorElement; "loggedOut": HTMLNylasSchedulerEditorElement; "schedulerConfigCloseClicked": HTMLNylasSchedulerEditorElement; } /** * The `nylas-scheduler-editor` component is a form that allows users to configure the settings for the Nylas Scheduler. */ interface HTMLNylasSchedulerEditorElement extends Components.NylasSchedulerEditor, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasSchedulerEditorElement, ev: NylasSchedulerEditorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasSchedulerEditorElement, ev: NylasSchedulerEditorCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasSchedulerEditorElement: { prototype: HTMLNylasSchedulerEditorElement; new (): HTMLNylasSchedulerEditorElement; }; interface HTMLNylasSchedulingElementEventMap { "init": HTMLNylasSchedulingElement; "schedulerWillLoad": HTMLNylasSchedulingElement; "schedulerDidLoad": HTMLNylasSchedulingElement; "nylasSchedulerError": { notification: Notification; host: HTMLElement }; "nylasSchedulerInfo": { notification: Notification; host: HTMLElement }; "configSettingsLoaded": { settings: NylasSchedulerResponse }; "bookingRefExtracted": { configurationId: string; bookingId: string; salt?: string }; "bookedEventInfo": NylasSchedulerResponse; } /** * The `nylas-scheduling` component is used to display the Nylas Scheduling UI. */ interface HTMLNylasSchedulingElement extends Components.NylasScheduling, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasSchedulingElement, ev: NylasSchedulingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasSchedulingElement, ev: NylasSchedulingCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasSchedulingElement: { prototype: HTMLNylasSchedulingElement; new (): HTMLNylasSchedulingElement; }; interface HTMLNylasSchedulingMethodElementEventMap { "valueChanged": { value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }; } /** * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker. */ interface HTMLNylasSchedulingMethodElement extends Components.NylasSchedulingMethod, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasSchedulingMethodElement, ev: NylasSchedulingMethodCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasSchedulingMethodElement, ev: NylasSchedulingMethodCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasSchedulingMethodElement: { prototype: HTMLNylasSchedulingMethodElement; new (): HTMLNylasSchedulingMethodElement; }; interface HTMLNylasSelectEventTypeElementEventMap { "returnToAllSchedulingPagesEvent": void; "createEventTypeSelected": { eventType: CONFIGURATION_EVENT_TYPE }; } /** * The `nylas-select-event-type` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface HTMLNylasSelectEventTypeElement extends Components.NylasSelectEventType, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasSelectEventTypeElement, ev: NylasSelectEventTypeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasSelectEventTypeElement, ev: NylasSelectEventTypeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasSelectEventTypeElement: { prototype: HTMLNylasSelectEventTypeElement; new (): HTMLNylasSelectEventTypeElement; }; /** * The `nylas-selected-event-card` component is a UI component that displays the selected event card. */ interface HTMLNylasSelectedEventCardElement extends Components.NylasSelectedEventCard, HTMLStencilElement { } var HTMLNylasSelectedEventCardElement: { prototype: HTMLNylasSelectedEventCardElement; new (): HTMLNylasSelectedEventCardElement; }; interface HTMLNylasTimeWindowPickerElementEventMap { "timeChange": { key: string; value: string; }; "timeWindowFormError": { key: string; message: string; }; } /** * The `nylas-time-window-picker` component is a time picker that can be used to select a time. */ interface HTMLNylasTimeWindowPickerElement extends Components.NylasTimeWindowPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasTimeWindowPickerElement, ev: NylasTimeWindowPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasTimeWindowPickerElement, ev: NylasTimeWindowPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasTimeWindowPickerElement: { prototype: HTMLNylasTimeWindowPickerElement; new (): HTMLNylasTimeWindowPickerElement; }; interface HTMLNylasTimeslotIntervalElementEventMap { "valueChanged": { value: string; name: string; }; } /** * The `nylas-timeslot-interval` component allows users to set their time slot interval preferences. * This component provides an option to set both `interval_minutes` and `round_to` in the configuration. */ interface HTMLNylasTimeslotIntervalElement extends Components.NylasTimeslotInterval, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasTimeslotIntervalElement, ev: NylasTimeslotIntervalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasTimeslotIntervalElement, ev: NylasTimeslotIntervalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasTimeslotIntervalElement: { prototype: HTMLNylasTimeslotIntervalElement; new (): HTMLNylasTimeslotIntervalElement; }; interface HTMLNylasTimeslotPickerElementEventMap { "timeslotSelected": Timeslot; "timeslotConfirmed": { timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement }; "validateTimeslotError": { error: string; type: 'error' | 'info' }; } /** * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots. */ interface HTMLNylasTimeslotPickerElement extends Components.NylasTimeslotPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLNylasTimeslotPickerElement, ev: NylasTimeslotPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLNylasTimeslotPickerElement, ev: NylasTimeslotPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLNylasTimeslotPickerElement: { prototype: HTMLNylasTimeslotPickerElement; new (): HTMLNylasTimeslotPickerElement; }; interface HTMLPaintbrushFillIconElement extends Components.PaintbrushFillIcon, HTMLStencilElement { } var HTMLPaintbrushFillIconElement: { prototype: HTMLPaintbrushFillIconElement; new (): HTMLPaintbrushFillIconElement; }; interface HTMLPaintbrushIconElement extends Components.PaintbrushIcon, HTMLStencilElement { } var HTMLPaintbrushIconElement: { prototype: HTMLPaintbrushIconElement; new (): HTMLPaintbrushIconElement; }; interface HTMLPeopleIconElement extends Components.PeopleIcon, HTMLStencilElement { } var HTMLPeopleIconElement: { prototype: HTMLPeopleIconElement; new (): HTMLPeopleIconElement; }; interface HTMLPersonClipboardIconElement extends Components.PersonClipboardIcon, HTMLStencilElement { } var HTMLPersonClipboardIconElement: { prototype: HTMLPersonClipboardIconElement; new (): HTMLPersonClipboardIconElement; }; interface HTMLPersonIconElement extends Components.PersonIcon, HTMLStencilElement { } var HTMLPersonIconElement: { prototype: HTMLPersonIconElement; new (): HTMLPersonIconElement; }; interface HTMLPlayIconElement extends Components.PlayIcon, HTMLStencilElement { } var HTMLPlayIconElement: { prototype: HTMLPlayIconElement; new (): HTMLPlayIconElement; }; interface HTMLPlusIconElement extends Components.PlusIcon, HTMLStencilElement { } var HTMLPlusIconElement: { prototype: HTMLPlusIconElement; new (): HTMLPlusIconElement; }; interface HTMLRadioButtonGroupElementEventMap { "nylasFormRadioChanged": { value: string; name: string; label?: string; }; } /** * The `radio-button-group` component is a UI component that allows users to select a single option from a list of options. * This component is used in the scheduling form to input radio button type inputs. */ interface HTMLRadioButtonGroupElement extends Components.RadioButtonGroup, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLRadioButtonGroupElement, ev: RadioButtonGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLRadioButtonGroupElement, ev: RadioButtonGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLRadioButtonGroupElement: { prototype: HTMLRadioButtonGroupElement; new (): HTMLRadioButtonGroupElement; }; interface HTMLRefreshIconElement extends Components.RefreshIcon, HTMLStencilElement { } var HTMLRefreshIconElement: { prototype: HTMLRefreshIconElement; new (): HTMLRefreshIconElement; }; interface HTMLReplyAllIconElement extends Components.ReplyAllIcon, HTMLStencilElement { } var HTMLReplyAllIconElement: { prototype: HTMLReplyAllIconElement; new (): HTMLReplyAllIconElement; }; interface HTMLReplyIconElement extends Components.ReplyIcon, HTMLStencilElement { } var HTMLReplyIconElement: { prototype: HTMLReplyIconElement; new (): HTMLReplyIconElement; }; interface HTMLSearchIconElement extends Components.SearchIcon, HTMLStencilElement { } var HTMLSearchIconElement: { prototype: HTMLSearchIconElement; new (): HTMLSearchIconElement; }; interface HTMLSelectDropdownElementEventMap { "nylasFormDropdownChanged": { value: DropdownOption['value']; name: string; error?: string; label?: string; }; "nylasFormDropdownDefaultSelected": { value: DropdownOption['value']; name: string; error?: string; label?: string; }; } /** * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options. * This component is used in the scheduling form to input dropdown type inputs. */ interface HTMLSelectDropdownElement extends Components.SelectDropdown, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSelectDropdownElement, ev: SelectDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSelectDropdownElement, ev: SelectDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSelectDropdownElement: { prototype: HTMLSelectDropdownElement; new (): HTMLSelectDropdownElement; }; interface HTMLSentIconElement extends Components.SentIcon, HTMLStencilElement { } var HTMLSentIconElement: { prototype: HTMLSentIconElement; new (): HTMLSentIconElement; }; interface HTMLSpamIconElement extends Components.SpamIcon, HTMLStencilElement { } var HTMLSpamIconElement: { prototype: HTMLSpamIconElement; new (): HTMLSpamIconElement; }; interface HTMLStarIconElement extends Components.StarIcon, HTMLStencilElement { } var HTMLStarIconElement: { prototype: HTMLStarIconElement; new (): HTMLStarIconElement; }; interface HTMLStopIconElement extends Components.StopIcon, HTMLStencilElement { } var HTMLStopIconElement: { prototype: HTMLStopIconElement; new (): HTMLStopIconElement; }; interface HTMLTextareaComponentElementEventMap { "nylasFormInputChanged": { value: string; name: string; error: string; label: string; type: string }; } /** * `textarea-component` allows users to enter multiline text. * It is ideal for larger inputs like comments or messages in a form. * This component is used in the scheduling form to input multiline text. */ interface HTMLTextareaComponentElement extends Components.TextareaComponent, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTextareaComponentElement, ev: TextareaComponentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTextareaComponentElement, ev: TextareaComponentCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTextareaComponentElement: { prototype: HTMLTextareaComponentElement; new (): HTMLTextareaComponentElement; }; interface HTMLTimePeriodSelectorElementEventMap { "timePeriodChanged": { number: number; period: string }; } /** * The time period selector component allows the user to select a time period and a number value for that time period. */ interface HTMLTimePeriodSelectorElement extends Components.TimePeriodSelector, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTimePeriodSelectorElement, ev: TimePeriodSelectorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTimePeriodSelectorElement, ev: TimePeriodSelectorCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTimePeriodSelectorElement: { prototype: HTMLTimePeriodSelectorElement; new (): HTMLTimePeriodSelectorElement; }; interface HTMLToggleSwitchElementEventMap { "nylasFormSwitchToggled": { checked: boolean; name: string; label: string; }; } /** * The `toggle-switch` component is a UI component that allows users to toggle a switch. * This component is used in the scheduling form to input toggle switch type inputs. * Use it as a replacement for checkboxes when you want to present a switch in the UI. */ interface HTMLToggleSwitchElement extends Components.ToggleSwitch, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLToggleSwitchElement, ev: ToggleSwitchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLToggleSwitchElement, ev: ToggleSwitchCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLToggleSwitchElement: { prototype: HTMLToggleSwitchElement; new (): HTMLToggleSwitchElement; }; /** * The `tooltip-component` component is a UI component that displays a tooltip. */ interface HTMLTooltipComponentElement extends Components.TooltipComponent, HTMLStencilElement { } var HTMLTooltipComponentElement: { prototype: HTMLTooltipComponentElement; new (): HTMLTooltipComponentElement; }; interface HTMLTranslateIconElement extends Components.TranslateIcon, HTMLStencilElement { } var HTMLTranslateIconElement: { prototype: HTMLTranslateIconElement; new (): HTMLTranslateIconElement; }; interface HTMLTrashFillIconElement extends Components.TrashFillIcon, HTMLStencilElement { } var HTMLTrashFillIconElement: { prototype: HTMLTrashFillIconElement; new (): HTMLTrashFillIconElement; }; interface HTMLTrashIconElement extends Components.TrashIcon, HTMLStencilElement { } var HTMLTrashIconElement: { prototype: HTMLTrashIconElement; new (): HTMLTrashIconElement; }; interface HTMLUnderlineIconElement extends Components.UnderlineIcon, HTMLStencilElement { } var HTMLUnderlineIconElement: { prototype: HTMLUnderlineIconElement; new (): HTMLUnderlineIconElement; }; interface HTMLWarningIconElement extends Components.WarningIcon, HTMLStencilElement { } var HTMLWarningIconElement: { prototype: HTMLWarningIconElement; new (): HTMLWarningIconElement; }; interface HTMLZoomIconElement extends Components.ZoomIcon, HTMLStencilElement { } var HTMLZoomIconElement: { prototype: HTMLZoomIconElement; new (): HTMLZoomIconElement; }; interface HTMLElementTagNameMap { "add-circle-icon": HTMLAddCircleIconElement; "archive-icon": HTMLArchiveIconElement; "arrow-icon": HTMLArrowIconElement; "bold-icon": HTMLBoldIconElement; "button-component": HTMLButtonComponentElement; "calendar-agenda-fill-icon": HTMLCalendarAgendaFillIconElement; "calendar-agenda-icon": HTMLCalendarAgendaIconElement; "calendar-cancel-icon": HTMLCalendarCancelIconElement; "calendar-check-icon": HTMLCalendarCheckIconElement; "calendar-icon": HTMLCalendarIconElement; "calendar-info-icon": HTMLCalendarInfoIconElement; "calendar-patterns-icon": HTMLCalendarPatternsIconElement; "checkbox-component": HTMLCheckboxComponentElement; "checkbox-group": HTMLCheckboxGroupElement; "checkmark-circle-icon": HTMLCheckmarkCircleIconElement; "checkmark-icon": HTMLCheckmarkIconElement; "chevron-icon": HTMLChevronIconElement; "clock-icon": HTMLClockIconElement; "close-icon": HTMLCloseIconElement; "copy-icon": HTMLCopyIconElement; "delete-icon": HTMLDeleteIconElement; "document-refresh-icon": HTMLDocumentRefreshIconElement; "dragable-icon": HTMLDragableIconElement; "edit-icon": HTMLEditIconElement; "envelope-fill-icon": HTMLEnvelopeFillIconElement; "envelope-icon": HTMLEnvelopeIconElement; "eye-icon": HTMLEyeIconElement; "feedback-icon": HTMLFeedbackIconElement; "flow-icon": HTMLFlowIconElement; "folder-icon": HTMLFolderIconElement; "forward-icon": HTMLForwardIconElement; "globe-icon": HTMLGlobeIconElement; "google-logo-icon": HTMLGoogleLogoIconElement; "google-meet-icon": HTMLGoogleMeetIconElement; "inbox-icon": HTMLInboxIconElement; "info-icon": HTMLInfoIconElement; "input-color-picker": HTMLInputColorPickerElement; "input-component": HTMLInputComponentElement; "input-dropdown": HTMLInputDropdownElement; "input-image-url": HTMLInputImageUrlElement; "italic-icon": HTMLItalicIconElement; "loading-icon": HTMLLoadingIconElement; "location-icon": HTMLLocationIconElement; "location-off-icon": HTMLLocationOffIconElement; "microsoft-logo-icon": HTMLMicrosoftLogoIconElement; "microsoft-teams-icon": HTMLMicrosoftTeamsIconElement; "multi-select-dropdown": HTMLMultiSelectDropdownElement; "nylas-additional-participants": HTMLNylasAdditionalParticipantsElement; "nylas-availability-picker": HTMLNylasAvailabilityPickerElement; "nylas-booked-event-card": HTMLNylasBookedEventCardElement; "nylas-booking-calendar-picker": HTMLNylasBookingCalendarPickerElement; "nylas-booking-confirmation-redirect": HTMLNylasBookingConfirmationRedirectElement; "nylas-booking-confirmation-type": HTMLNylasBookingConfirmationTypeElement; "nylas-booking-form": HTMLNylasBookingFormElement; "nylas-booking-form-config": HTMLNylasBookingFormConfigElement; "nylas-buffer-time": HTMLNylasBufferTimeElement; "nylas-calendar-picker": HTMLNylasCalendarPickerElement; "nylas-cancel-booking-form": HTMLNylasCancelBookingFormElement; "nylas-cancellation-policy": HTMLNylasCancellationPolicyElement; "nylas-cancelled-event-card": HTMLNylasCancelledEventCardElement; "nylas-confirmation-email": HTMLNylasConfirmationEmailElement; "nylas-confirmed-event-card": HTMLNylasConfirmedEventCardElement; "nylas-connected-calendars": HTMLNylasConnectedCalendarsElement; "nylas-custom-booking-flow": HTMLNylasCustomBookingFlowElement; "nylas-custom-event-slug": HTMLNylasCustomEventSlugElement; "nylas-customize-booking-settings": HTMLNylasCustomizeBookingSettingsElement; "nylas-date-component": HTMLNylasDateComponentElement; "nylas-date-picker": HTMLNylasDatePickerElement; "nylas-disable-emails": HTMLNylasDisableEmailsElement; "nylas-editor-tabs": HTMLNylasEditorTabsElement; "nylas-editor-tabs-group": HTMLNylasEditorTabsGroupElement; "nylas-event-calendar": HTMLNylasEventCalendarElement; "nylas-event-capacity": HTMLNylasEventCapacityElement; "nylas-event-description": HTMLNylasEventDescriptionElement; "nylas-event-duration": HTMLNylasEventDurationElement; "nylas-event-info": HTMLNylasEventInfoElement; "nylas-event-limits": HTMLNylasEventLimitsElement; "nylas-event-location": HTMLNylasEventLocationElement; "nylas-event-timeslot": HTMLNylasEventTimeslotElement; "nylas-event-title": HTMLNylasEventTitleElement; "nylas-feedback-form": HTMLNylasFeedbackFormElement; "nylas-form-card": HTMLNylasFormCardElement; "nylas-limit-future-bookings": HTMLNylasLimitFutureBookingsElement; "nylas-list-configurations": HTMLNylasListConfigurationsElement; "nylas-locale-switch": HTMLNylasLocaleSwitchElement; "nylas-logo": HTMLNylasLogoElement; "nylas-min-booking-notice": HTMLNylasMinBookingNoticeElement; "nylas-min-cancellation-notice": HTMLNylasMinCancellationNoticeElement; "nylas-notification": HTMLNylasNotificationElement; "nylas-organizer-confirmation-card": HTMLNylasOrganizerConfirmationCardElement; "nylas-page-name": HTMLNylasPageNameElement; "nylas-page-styling": HTMLNylasPageStylingElement; "nylas-participant-booking-calendars": HTMLNylasParticipantBookingCalendarsElement; "nylas-participants-custom-availability": HTMLNylasParticipantsCustomAvailabilityElement; "nylas-reminder-emails": HTMLNylasReminderEmailsElement; "nylas-reminder-time": HTMLNylasReminderTimeElement; "nylas-scheduler-editor": HTMLNylasSchedulerEditorElement; "nylas-scheduling": HTMLNylasSchedulingElement; "nylas-scheduling-method": HTMLNylasSchedulingMethodElement; "nylas-select-event-type": HTMLNylasSelectEventTypeElement; "nylas-selected-event-card": HTMLNylasSelectedEventCardElement; "nylas-time-window-picker": HTMLNylasTimeWindowPickerElement; "nylas-timeslot-interval": HTMLNylasTimeslotIntervalElement; "nylas-timeslot-picker": HTMLNylasTimeslotPickerElement; "paintbrush-fill-icon": HTMLPaintbrushFillIconElement; "paintbrush-icon": HTMLPaintbrushIconElement; "people-icon": HTMLPeopleIconElement; "person-clipboard-icon": HTMLPersonClipboardIconElement; "person-icon": HTMLPersonIconElement; "play-icon": HTMLPlayIconElement; "plus-icon": HTMLPlusIconElement; "radio-button-group": HTMLRadioButtonGroupElement; "refresh-icon": HTMLRefreshIconElement; "reply-all-icon": HTMLReplyAllIconElement; "reply-icon": HTMLReplyIconElement; "search-icon": HTMLSearchIconElement; "select-dropdown": HTMLSelectDropdownElement; "sent-icon": HTMLSentIconElement; "spam-icon": HTMLSpamIconElement; "star-icon": HTMLStarIconElement; "stop-icon": HTMLStopIconElement; "textarea-component": HTMLTextareaComponentElement; "time-period-selector": HTMLTimePeriodSelectorElement; "toggle-switch": HTMLToggleSwitchElement; "tooltip-component": HTMLTooltipComponentElement; "translate-icon": HTMLTranslateIconElement; "trash-fill-icon": HTMLTrashFillIconElement; "trash-icon": HTMLTrashIconElement; "underline-icon": HTMLUnderlineIconElement; "warning-icon": HTMLWarningIconElement; "zoom-icon": HTMLZoomIconElement; } } declare namespace LocalJSX { interface AddCircleIcon { "height"?: string; "width"?: string; } interface ArchiveIcon { "height"?: string; "width"?: string; } interface ArrowIcon { "height"?: string; "width"?: string; } interface BoldIcon { "height"?: string; "width"?: string; } interface ButtonComponent { "blurHandler"?: (event: FocusEvent) => void; "clickHandler"?: (event: MouseEvent) => void; "disabled"?: boolean; "focusHandler"?: (event: FocusEvent) => void; "isLoading"?: boolean; "mouseOutHandler"?: (event: MouseEvent) => void; "mouseOverHandler"?: (event: MouseEvent) => void; "tooltip"?: string; "type"?: string; "variant"?: ButtonType; } interface CalendarAgendaFillIcon { "height"?: string; "width"?: string; } interface CalendarAgendaIcon { "height"?: string; "width"?: string; } interface CalendarCancelIcon { "height"?: string; "width"?: string; } interface CalendarCheckIcon { "height"?: string; "width"?: string; } interface CalendarIcon { "height"?: string; "width"?: string; } interface CalendarInfoIcon { "height"?: string; "width"?: string; } interface CalendarPatternsIcon { "height"?: string; "width"?: string; } /** * The `checkbox-component` component is a UI component that allows users to select a checkbox. * This component is used in the scheduling form to input checkbox type inputs. */ interface CheckboxComponent { /** * The default value of the checkbox. This is the value that is displayed when the checkbox is rendered. */ "checked"?: boolean; /** * The label of the checkbox. This is displayed next to the checkbox. */ "label"?: string; /** * The name of the checkbox. This is used to identify the checkbox when submitting a form. */ "name"?: string; /** * This event is fired when the checkbox is toggled. */ "onNylasFormCheckboxToggled"?: (event: CheckboxComponentCustomEvent<{ checked: boolean; name: string; label: string; }>) => void; /** * The property to make the checkbox read-only. If true, the checkbox cannot be edited. */ "readOnly"?: boolean; /** * Whether the checkbox is required. If true, the checkbox must be checked when submitting a form. Default is false. If the checkbox is required and not checked, an error message is displayed. */ "required"?: boolean; } /** * The `checkbox-group` component is a UI component that allows users to select multiple options from a list. * It manages a group of checkboxes and their states. */ interface CheckboxGroup { /** * The layout direction of the checkboxes. 'vertical' - checkboxes are stacked vertically (default) 'horizontal' - checkboxes are arranged horizontally */ "direction"?: CheckboxGroupDirection; /** * The label for the checkbox group. */ "label"?: string; /** * The name of the checkbox group. This is used to identify the group when submitting a form. */ "name"?: string; /** * This event is fired when any checkbox in the group is toggled. */ "onNylasCheckboxGroupChanged"?: (event: CheckboxGroupCustomEvent<{ selectedValues: string[]; name: string; }>) => void; /** * Array of options to display as checkboxes. Each option should have a label and value. */ "options"?: CheckboxOption[]; /** * Whether the checkbox group is required. If true, at least one checkbox must be checked when submitting a form. */ "required"?: boolean; } interface CheckmarkCircleIcon { "height"?: string; "width"?: string; } interface CheckmarkIcon { "height"?: string; "width"?: string; } interface ChevronIcon { "height"?: string; "width"?: string; } interface ClockIcon { "height"?: string; "width"?: string; } interface CloseIcon { "height"?: string; "width"?: string; } interface CopyIcon { "height"?: string; "width"?: string; } interface DeleteIcon { "height"?: string; "width"?: string; } interface DocumentRefreshIcon { "height"?: string; "width"?: string; } interface DragableIcon { "height"?: string; "width"?: string; } interface EditIcon { "height"?: string; "width"?: string; } interface EnvelopeFillIcon { "height"?: string; "width"?: string; } interface EnvelopeIcon { "height"?: string; "width"?: string; } interface EyeIcon { "height"?: string; "width"?: string; } interface FeedbackIcon { "height"?: string; "width"?: string; } interface FlowIcon { "height"?: string; "width"?: string; } interface FolderIcon { "height"?: string; "width"?: string; } interface ForwardIcon { "height"?: string; "width"?: string; } interface GlobeIcon { "height"?: string; "width"?: string; } interface GoogleLogoIcon { "height"?: string; "width"?: string; } interface GoogleMeetIcon { "height"?: string; "width"?: string; } interface InboxIcon { "height"?: string; "width"?: string; } interface InfoIcon { "height"?: string; "width"?: string; } /** * The `input-color-picker` component is a dropdown that allows users to select an accent color from either RGB inputs or an interactive color picker and converts them to a hex value. * This component is used in the scheduling form to input dropdown type inputs. */ interface InputColorPicker { /** * The default selected color */ "defaultSelectedColor"?: string; /** * The name of the dropdown */ "name": string; /** * This event is fired when the selected option is changed */ "onNylasFormDropdownChanged"?: (event: InputColorPickerCustomEvent<{ value: string; name: string; error?: string; label?: string; }>) => void; } /** * The `input-component` component is a UI component that allows users to input text, email, or phone number values. * This component is used in the scheduling form to input text, email and phone number type inputs. */ interface InputComponent { /** * Whether the input should be focused when rendered. Default is false. If true, the input is focused when rendered. Use this to set the focus on the first input in a form. */ "autoFocus"?: boolean; /** * The default value of the input. This is the value that is displayed when the input is rendered. */ "defaultValue"?: string; /** * The label of the input. This is displayed above the input. */ "label"?: string; /** * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed. Default is 255. */ "maxLength"?: number; "maxValue"?: number; "minValue"?: number; /** * The name of the input. This is used to identify the input when submitting a form. */ "name"?: string; "onNylasFormInputBlurred"?: (event: InputComponentCustomEvent<{ value: string; name: string; }>) => void; /** * This event is fired when the input value is changed. The scheduling form listens for this event to validate the input value and submit the form. If using outside of the scheduling form, listen for this event to validate the input value and handle the input value change. */ "onNylasFormInputChanged"?: (event: InputComponentCustomEvent<{ value: string; name: string; label: string; type: string; error: string; }>) => void; "onNylasFormInputFocused"?: (event: InputComponentCustomEvent<{ value: string; name: string; }>) => void; /** * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed. Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'. */ "pattern"?: RegExp; /** * The error message to display when the value does not match the pattern. Default is 'Invalid format.' where is the input label. */ "patternError"?: string; /** * The placeholder of the input. This is displayed when the input is empty. */ "placeholder"?: string; /** * Whether the input is read-only. If true, the input cannot be edited. Default is false. */ "readOnly"?: boolean; /** * Whether the input is required. If true, the input must have a value when submitting a form. Default is false. If the input is required and the value is empty, an error message is displayed. */ "required"?: boolean; /** * This error message is displayed when the input value is empty and the input is required. */ "requiredError"?: string; /** * The type of the input. This is used to determine the input's behavior. Supported types are 'text', 'email', and 'phone_number'. */ "type"?: 'text' | 'email' | 'phone_number' | 'number'; } /** * The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options. */ interface InputDropdown { /** * The default selected option */ "defaultInputOption"?: DropdownOption; /** * This is used to set if the dropdown should be filtered based on the input value. If set to true, the dropdown will be filtered based on the input value. */ "filterable"?: boolean; /** * Should show search input */ "inputValue": string; /** * The name of the dropdown */ "name": string; /** * This event is fired when the selected option is changed */ "onInputOptionChanged"?: (event: InputDropdownCustomEvent<{ value: DropdownOption['value']; name: string; }>) => void; /** * The options to display in the dropdown */ "options"?: DropdownOption[]; /** * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix. */ "pluralizedLabel"?: string; } /** * The `nylas-image-input` component is a UI component that allows users input an image URL and see a preview of the image. */ interface InputImageUrl { /** * Error message to display when the image URL is invalid. */ "errorMessage"?: string; /** * Image */ "imageUrl"?: string; /** * The name of the component */ "name"?: string; /** * This event is fired when the image url is changed and the image is invalid. */ "onNylasFormInputImageUrlInvalid"?: (event: InputImageUrlCustomEvent<{ value: string; name: string }>) => void; /** * This event is fired when the image URL is changed */ "onValueChanged"?: (event: InputImageUrlCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; } interface ItalicIcon { "height"?: string; "width"?: string; } interface LoadingIcon { "height"?: string; "width"?: string; } interface LocationIcon { "height"?: string; "width"?: string; } interface LocationOffIcon { "height"?: string; "width"?: string; } interface MicrosoftLogoIcon { "height"?: string; "width"?: string; } interface MicrosoftTeamsIcon { "height"?: string; "width"?: string; } interface MultiSelectDropdown { /** * Error message to display */ "error"?: string; /** * The label of the dropdown */ "label"?: string; /** * Multiple options selected label */ "multipleOptionsSelectedLabel"?: string; /** * The name of the dropdown */ "name": string; /** * This event is fired when the selected options are changed */ "onSelectedOptionsChanged"?: (event: MultiSelectDropdownCustomEvent<{ value: string[]; name: string; }>) => void; /** * The options to display in the dropdown */ "options"?: DropdownOption[]; /** * The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited. */ "readOnly"?: boolean; /** * The option to require selection of at leat one option. */ "required"?: boolean; /** * Select at least one option label */ "selectAtLeastOneOptionLabel"?: string; } /** * The `nylas-additional-participants` component is a form input for adding additional participants to an event. */ interface NylasAdditionalParticipants { /** * @standalone The logged in user */ "currentUser"?: User; /** * @standalone The list of user's calendars. */ "currentUserCalendars"?: Calendar[]; /** * @standalone The event participants */ "eventParticipants"?: Participant[]; /** * @standalone The name of the component */ "name"?: string; /** * This event is fired when the selected participants change. */ "onValueChanged"?: (event: NylasAdditionalParticipantsCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The additional participants options from the config */ "participantOptions"?: AdditionalParticipant[]; /** * @standalone If the config is round robin */ "roundRobinConfig"?: boolean; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-availability-picker` component is a form input for selecting availability (open hours). */ interface NylasAvailabilityPicker { /** * @standalone The default timezone or preset timezone. */ "defaultTimezone"?: string; /** * @standalone Hide the header of the availability picker. */ "hideHeader"?: boolean; /** * @standalone The name of the availability picker. */ "name"?: string; /** * This event is fired when the selected availability / open hours change. The value is a stringified JSON object with the open hours and timezone. ``` { openHours: OpenHours[], timezone: string } ``` */ "onValueChanged"?: (event: NylasAvailabilityPickerCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The open hours to display. */ "openHours"?: OpenHours[]; /** * @standalone The selected configuration. */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-booked-event-card` component is a UI component that displays the booked event card. */ interface NylasBookedEventCard { /** * @standalone The booking info used to book / reschedule the event. */ "bookingInfo"?: NylasSchedulerBookingData; /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * @standalone The booked event. */ "eventInfo": NylasEvent; /** * The 12-hour time format. */ "hour12"?: boolean; /** * @standalone The loading state prop. Used to display loading state when fetching availability. */ "isLoading"?: boolean; /** * This event is fired when an error occurs while cancelling the booking. */ "onCancelBookedEventValidationError"?: (event: NylasBookedEventCardCustomEvent<{ error: { title: string; message: string; }; }>) => void; /** * Cancel booking button clicked event. */ "onCancelBookingButtonClicked"?: (event: NylasBookedEventCardCustomEvent<{ bookingId: string }>) => void; /** * This event is fired when an error occurs while rescheduling the booking. */ "onRescheduleBookedEventError"?: (event: NylasBookedEventCardCustomEvent) => void; /** * Reschedule button clicked event. */ "onRescheduleButtonClicked"?: (event: NylasBookedEventCardCustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>) => void; /** * @standalone Booking flow type. */ "rescheduleBookingId"?: string; /** * The selected language. */ "selectedLanguage"?: string; /** * The selected timeslot. */ "selectedTimeslot": Timeslot; /** * The selected timezone. */ "selectedTimezone"?: string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker. */ interface NylasBookingCalendarPicker { /** * @standalone The calendars to choose from. */ "calendars"?: Calendar[]; /** * @standalone The current logged in user. */ "currentUser"?: User; /** * @standalone The list of user's calendars. */ "currentUserCalendars"?: Calendar[]; /** * @standalone The default selected calendar. */ "defaultBookingCalendar"?: string; /** * Prop for express flow when creating a config */ "expressFlow"?: boolean; /** * The prop to hide the header. */ "hideHeader"?: boolean; /** * @standalone The name of the calendar picker. */ "name"?: string; /** * This event is fired when the selected booking calendar changes. */ "onValueChanged"?: (event: NylasBookingCalendarPickerCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-booking-confirmation-redirect` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed. */ interface NylasBookingConfirmationRedirect { /** * @standalone The name of the confirmation redirect link. */ "name"?: string; /** * This event is fired when the current redirect URL changes and is valid. */ "onValueChanged"?: (event: NylasBookingConfirmationRedirectCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * @standalone The custom redirect URL. */ "redirectUrl"?: string; /** * @standalone The custom redirect URL error message */ "redirectUrlErrorMessage"?: string; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-booking-confirmation-type` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed. */ interface NylasBookingConfirmationType { /** * @standalone The booking type. */ "bookingType"?: string; /** * @standalone The name of the confirmation redirect link. */ "name"?: string; /** * This event is fired when the selected bookingType changes. */ "onValueChanged"?: (event: NylasBookingConfirmationTypeCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * @standalone Show or hide the confirmation type. This prop is automatically determined based on the value of selectedConfiguration in the config, making it unnecessary to set this prop manually. */ "showComponent"?: boolean; } /** * The `nylas-booking-form` component is a UI component that allows users to book an event. * The booking form component. */ interface NylasBookingForm { /** * @standalone The booking info. */ "bookingInfo"?: NylasSchedulerBookingData; /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * @standalone The booked event (Used to track if a booking is created in an eventOverride). */ "eventInfo"?: NylasEvent; /** * @standalone The loading state. */ "isLoading"?: boolean; /** * This event is fired when the cancel button is clicked. */ "onBackButtonClicked"?: (event: NylasBookingFormCustomEvent) => void; /** * This event is fired when an error occurs in the booking form validation. */ "onBookingFormError"?: (event: NylasBookingFormCustomEvent>) => void; /** * This event is fired immediately after the book button is clicked. The booking form validation is not complete at this point. */ "onBookingFormSubmitted"?: (event: NylasBookingFormCustomEvent) => void; /** * This event is fired when the book button is clicked and the form validation is complete and successful. This event is fired before the booking request is sent. */ "onDetailsConfirmed"?: (event: NylasBookingFormCustomEvent) => void; /** * This event is fired when the email is changed. */ "onEmailChanged"?: (event: NylasBookingFormCustomEvent) => void; /** * This event is fired when the name is changed. */ "onNameChanged"?: (event: NylasBookingFormCustomEvent) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * The selected time. */ "selectedTimeslot"?: Timeslot; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-booking-form-config` component is a form input for adding additional fields to the booking form. */ interface NylasBookingFormConfig { /** * The additional fields to be displayed on the booking form. */ "additionalFields"?: AdditionalFields[]; /** * The name of the booking form config. */ "name"?: string; /** * This event is fired when the selected availability / open hours change. */ "onValueChanged"?: (event: NylasBookingFormConfigCustomEvent<{ value: string; name: string; }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event. */ interface NylasBufferTime { /** * @standalone The buffer time */ "buffer"?: { before: number; after: number }; /** * The name of the calendar picker. */ "name"?: string; /** * This event is fired when the selected buffer time is changed. */ "onValueChanged"?: (event: NylasBufferTimeCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-calendar-picker` component is a form input for selecting calendars to check availability. */ interface NylasCalendarPicker { /** * @standalone The calendars to choose from. */ "calendars"?: Calendar[]; /** * @standalone The logged in user. */ "currentUser"?: User; /** * @standalone The default selected calendars. */ "defaultSelectedCalendars"?: string[]; /** * @standalone The name of the calendar picker. */ "name"?: string; /** * This event is fired when the selected calendars change. */ "onValueChanged"?: (event: NylasCalendarPickerCustomEvent<{ value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void; }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking (DELETE request). * This component is also used to reject a booking (PUT request) by the organizer, if the prop `rejectBookingId` is provided. */ interface NylasCancelBookingForm { /** * The booking ID to cancel. */ "cancelBookingId"?: string; /** * @standalone The config settings. */ "configSettings"?: ConfigSettings; /** * @standalone The event info. */ "eventInfo"?: NylasEvent; /** * @standalone The loading state. */ "isLoading"?: boolean; /** * This event is fired when an error occurs while cancelling the booking. */ "onCancelBookedEventError"?: (event: NylasCancelBookingFormCustomEvent) => void; /** * This event is fired when an error occurs in the booking form. */ "onCancelBookingFormError"?: (event: NylasCancelBookingFormCustomEvent>) => void; /** * This event is fired when the cancel booking form is submitted. */ "onCancelBookingFormSubmitted"?: (event: NylasCancelBookingFormCustomEvent<{ bookingId: string; action: 'reject' | 'cancel'; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void; }>) => void; /** * This event is fired when the Go back button is clicked on the cancel booking form. */ "onGoBackButtonClicked"?: (event: NylasCancelBookingFormCustomEvent) => void; /** * This event is only for triggering the validation on the text area for cancellation reason. This is for internal purposes only. */ "onTriggerValidation"?: (event: NylasCancelBookingFormCustomEvent<{}>) => void; /** * The booking ID to reject. */ "rejectBookingId"?: string; /** * @standalone The default language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * The selected timeslot. */ "selectedTimeslot": Timeslot; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-cancellation-policy` component is a form input for the cancellation policy message of an event. */ interface NylasCancellationPolicy { /** * @standalone The cancellation policy stored in the configuration */ "cancellationPolicy"?: string; /** * @standalone The name of the cancellation policy input. */ "name"?: string; /** * Event emitted when the cancellation policy message changes. */ "onValueChanged"?: (event: NylasCancellationPolicyCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card. */ interface NylasCancelledEventCard { /** * The participant's name who booked the event / is logged in. */ "cancelledEventInfo": Partial; /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * This event is fired when an error occurs. */ "onCancelledEventCardError"?: (event: NylasCancelledEventCardCustomEvent) => void; /** * This event is fired when the close button is clicked on the cancelled event card. */ "onCloseCancelEventCardClicked"?: (event: NylasCancelledEventCardCustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse1) => void }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE1; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event. */ interface NylasConfirmationEmail { /** * @standalone The confirmation email template data to display */ "confirmationEmailTemplate"?: EmailTemplate; /** * Is the confirmation email card open */ "isOpen"?: boolean; /** * @standalone The name of the component */ "name"?: string; /** * @standalone The nylas branding */ "nylasBranding"?: boolean; /** * This event is fired when the email reminders change. */ "onValueChanged"?: (event: NylasConfirmationEmailCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * @standalone List of participants */ "participants"?: Participant[]; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card. */ interface NylasConfirmedEventCard { /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * The participant's name who booked the event / is logged in. */ "confirmedEventInfo": Partial; /** * This event is fired when the close button is clicked on the confirmed event card. */ "onCloseConfirmEventCardClicked"?: (event: NylasConfirmedEventCardCustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse1) => void }>) => void; /** * This event is fired when an error occurs. */ "onConfirmedEventCardError"?: (event: NylasConfirmedEventCardCustomEvent) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE1; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants. */ interface NylasConnectedCalendars { /** * @standalone The calendars to choose from for the organizer / logged in user. */ "calendars"?: Calendar[]; /** * The name of the participants custom availability. */ "name"?: string; /** * This event is fired when the participants custom availability changes. */ "onValueChanged"?: (event: NylasConnectedCalendarsCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The participant options passed in the additionalParticipants prop from the nylas-scheduler-editor component. */ "participantOptions"?: AdditionalParticipant[]; /** * @standalone The participants selected in the add participants section. */ "participants"?: Participant[]; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-custom-booking-flow` component is an input form for booking type (automatically or manually accept bookings) and confirmation redirect URL (default or custom). * This component is a container for the `nylas-booking-confirmation-type`, `nylas-booking-confirmation-redirect` components. * ```html * *
* * *
* * ``` */ interface NylasCustomBookingFlow { /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-custom-event-slug` component is a UI component that allows users to add a custom URL slug for their event link. */ interface NylasCustomEventSlug { /** * The default custom event slug */ "defaultUrlSlug"?: string; /** * Is the custom event slug card expanded */ "isOpen"?: boolean; /** * The name of the component */ "name"?: string; /** * This event is fired when the slug value changes */ "onValueChanged"?: (event: NylasCustomEventSlugCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * Indicates if a slug is required for the configuration. When set to true, the user must enter a slug when creating or editing a configuration. The slug is used for hosted pages that are public. */ "requiresSlug"?: boolean; /** * The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * Slug error message */ "slugErrorMessage"?: string; } /** * The `nylas-customize-booking-settings` component is a UI component that displays the booking calendar picker. */ interface NylasCustomizeBookingSettings { /** * @standalone The default additional guests hidden setting as set in the configuration. */ "defaultHideAdditionalGuests"?: boolean; /** * @standalone The default hide cancellation options setting as set in the configuration. */ "defaultHideCancellationOptions"?: boolean; /** * @standalone The default hide rescheduling options setting as set in the configuration. */ "defaultHideReschedulingOptions"?: boolean; /** * @standalone The name of the calendar picker. */ "name"?: string; /** * This event is fired when the selected booking calendar changes. */ "onValueChanged"?: (event: NylasCustomizeBookingSettingsCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * This prop is used to determined which settings are visible in the component. */ "showSettings"?: string[]; } /** * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values. * This component is used in the scheduling form to input text, email and phone number type inputs. */ interface NylasDateComponent { /** * Whether the input should be focused when rendered. Default is false. If true, the input is focused when rendered. Use this to set the focus on the first input in a form. */ "autoFocus"?: boolean; /** * The default value of the input. This is the value that is displayed when the input is rendered. */ "defaultValue"?: string; /** * The flag to indicate if the date input is in error state. */ "hasError"?: boolean; /** * The label of the input. This is displayed above the input. */ "label"?: string; /** * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed. Default is 255. */ "maxLength"?: number; /** * The minimum date that can be selected. */ "minDate"?: string; /** * The name of the input. This is used to identify the input when submitting a form. */ "name"?: string; "onNylasFormInputBlurred"?: (event: NylasDateComponentCustomEvent<{ value: string; name: string; }>) => void; /** * This event is fired when the input value is changed. The scheduling form listens for this event to validate the input value and submit the form. If using outside of the scheduling form, listen for this event to validate the input value and handle the input value change. */ "onNylasFormInputChanged"?: (event: NylasDateComponentCustomEvent<{ value: string; name: string; label: string; type: string; error: string; }>) => void; "onNylasFormInputFocused"?: (event: NylasDateComponentCustomEvent<{ value: string; name: string; }>) => void; /** * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed. Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'. */ "pattern"?: RegExp; /** * The error message to display when the value does not match the pattern. Default is 'Invalid format.' where is the input label. */ "patternError"?: string; /** * The placeholder of the input. This is displayed when the input is empty. */ "placeholder"?: string; /** * Whether the input is read-only. If true, the input cannot be edited. Default is false. */ "readOnly"?: boolean; /** * Whether the input is required. If true, the input must have a value when submitting a form. Default is false. If the input is required and the value is empty, an error message is displayed. */ "required"?: boolean; /** * This error message is displayed when the input value is empty and the input is required. */ "requiredError"?: string; } /** * The `nylas-date-picker` component is a UI component that allows users to select a date. */ interface NylasDatePicker { /** * @standalone The config settings. */ "configSettings"?: ConfigSettings; /** * The event duration. */ "eventDuration"?: number; /** * The loading state. */ "isLoading"?: boolean; /** * This event is fired when a date is selected. */ "onDateSelected"?: (event: NylasDatePickerCustomEvent) => void; /** * This event is fired when the month is changed. */ "onMonthChanged"?: (event: NylasDatePickerCustomEvent) => void; /** * @standalone The dates that are selectable. */ "selectableDates"?: Date[]; /** * The selected date. */ "selectedDate"?: Date; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * The selected timezone. */ "selectedTimezone"?: string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-disable-emails` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface NylasDisableEmails { /** * @standalone The name of the component */ "name"?: string; /** * This event is fired when the toggle switch to disable emails is toggled. */ "onValueChanged"?: (event: NylasDisableEmailsCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration | GroupConfiguration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The nylas-editor-tabs component provides the user interface for managing editor tabs within the scheduler editor. * It is primarily used to control the edit mode of the scheduler editor, and it is rendered automatically by the * parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly * or set any props manually, as its behavior is fully managed by the parent component. */ interface NylasEditorTabs { /** * @standalone The list of calendars to use in the editor when configuring availability. */ "calendars"?: Calendar[]; /** * @standalone The list of configurations */ "configurations"?: Configuration[]; /** * @standalone The current logged in user. */ "currentUser"?: User; /** * @standalone This prop is passed down by the parent component to enable or disable user feedback. */ "enableUserFeedback"?: boolean; /** * @standalone This prop is passed down by the parent component. It is an optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm */ "hideEditorTabs"?: Tab[]; /** * @standalone The mode of the editor. - `app`: The editor is used as a standalone app. - `composable`: The editor is used as a composable component. */ "mode"?: 'app' | 'composable'; /** * Event emitted when the user clicks the cancel button. */ "onCancelButtonClick"?: (event: NylasEditorTabsCustomEvent) => void; /** * Event emitted when the user dismisses the error notification. */ "onDismissNotification"?: (event: NylasEditorTabsCustomEvent<{ id: string; host: HTMLNylasEditorTabsElement }>) => void; /** * Event emitted on form submission. */ "onFormSubmitted"?: (event: NylasEditorTabsCustomEvent) => void; /** * This event is fired when there is an error in the component. */ "onNylasSchedulerError"?: (event: NylasEditorTabsCustomEvent<{ notification: Notification; host: HTMLElement }>) => void; /** * Event emitted when the user clicks the preview button. */ "onPreviewButtonClicked"?: (event: NylasEditorTabsCustomEvent) => void; /** * Event emitted when the configuration is created/updated (after the request is complete). This fires for both create and edit actions. */ "onSchedulerConfigChanged"?: (event: NylasEditorTabsCustomEvent) => void; /** * Event emitted when the configuration is created (after the request is made). This fires for only for create action. */ "onSchedulerConfigCreated"?: (event: NylasEditorTabsCustomEvent) => void; /** * Event emitted when the value of a form field changes. */ "onSchedulerEditorFormUpdated"?: (event: NylasEditorTabsCustomEvent<{ value: string; name: string }>) => void; /** * @standalone The scheduler preview link to use when the user clicks on the preview button. You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link. */ "schedulerPreviewLink"?: string; /** * @standalone The selected configuration to use in the editor when editing an existing configuration or creating a new one. */ "selectedConfiguration"?: Configuration; /** * The selected event type. */ "selectedEventType"?: CONFIGURATION_EVENT_TYPE; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The nylas-editor-tabs-group component provides the user interface for managing editor tabs within the scheduler editor. * It is primarily used to control the edit mode of the scheduler editor, and it is rendered automatically by the * parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly * or set any props manually, as its behavior is fully managed by the parent component. */ interface NylasEditorTabsGroup { /** * @standalone The list of calendars to use in the editor when configuring availability. */ "calendars"?: Calendar[]; /** * @standalone The list of configurations */ "configurations"?: (Configuration | GroupConfiguration)[]; /** * @standalone The current logged in user. */ "currentUser"?: User; /** * @standalone This prop is passed down by the parent component to enable or disable user feedback. */ "enableUserFeedback"?: boolean; /** * @standalone This prop is passed down by the parent component. It is an optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm */ "hideEditorTabs"?: TabGroup[]; /** * @standalone The mode of the editor. - `app`: The editor is used as a standalone app. - `composable`: The editor is used as a composable component. */ "mode"?: 'app' | 'composable'; /** * Event emitted when the user clicks the cancel button. */ "onCancelButtonClick"?: (event: NylasEditorTabsGroupCustomEvent) => void; /** * Event emitted when the user dismisses the error notification. */ "onDismissNotification"?: (event: NylasEditorTabsGroupCustomEvent<{ id: string; host: HTMLNylasEditorTabsGroupElement }>) => void; /** * Event emitted on form submission. */ "onFormSubmitted"?: (event: NylasEditorTabsGroupCustomEvent) => void; /** * Event emitted when the user clicks the create button to create a new group event in the calendar view of the scheduler editor. */ "onGroupEventCreateTriggered"?: (event: NylasEditorTabsGroupCustomEvent<{ groupEvent: Partial; configId: string; host: HTMLNylasEditorTabsGroupElement }>) => void; /** * Event emitted when the user clicks the delete button to delete the group event in the calendar view of the scheduler editor. */ "onGroupEventDeleteTriggered"?: (event: NylasEditorTabsGroupCustomEvent<{ groupEvent: GroupEvent; chosenOption: RecurrenceDeleteOption; configId: string; host: HTMLNylasEditorTabsGroupElement; }>) => void; /** * Event emitted when the user clicks the import button to import a group event in the calendar view of the scheduler editor. */ "onGroupEventImportTriggered"?: (event: NylasEditorTabsGroupCustomEvent<{ groupEvent: ImportGroupEventDetails; configId: string; host: HTMLNylasEditorTabsGroupElement; }>) => void; /** * Event emitted when the user clicks the save button to save the changes made to the group event in the calendar view of the scheduler editor. */ "onGroupEventUpdateTriggered"?: (event: NylasEditorTabsGroupCustomEvent<{ groupEvent: GroupEvent; chosenOption: RecurrenceUpdateOption; configId: string; host: HTMLNylasEditorTabsGroupElement; }>) => void; /** * This event is fired when there is an error in the component. */ "onNylasSchedulerError"?: (event: NylasEditorTabsGroupCustomEvent<{ notification: Notification; host: HTMLElement }>) => void; /** * Event emitted when the user clicks the preview button. */ "onPreviewButtonClicked"?: (event: NylasEditorTabsGroupCustomEvent) => void; /** * This event is emitted when there is an error is saving changes to the group event in the calendar view of the scheduler editor. */ "onSaveGroupEventChangesError"?: (event: NylasEditorTabsGroupCustomEvent<{ error: string; configId: string; host: HTMLNylasEditorTabsGroupElement; }>) => void; /** * Event emitted when the configuration is created/updated (after the request is complete). This fires for both create and edit actions. */ "onSchedulerConfigChanged"?: (event: NylasEditorTabsGroupCustomEvent) => void; /** * Event emitted when the configuration is created (after the request is made). This fires for only for create action. */ "onSchedulerConfigCreated"?: (event: NylasEditorTabsGroupCustomEvent) => void; /** * Event emitted when the value of a form field changes. */ "onSchedulerEditorFormUpdated"?: (event: NylasEditorTabsGroupCustomEvent<{ value: string; name: string }>) => void; /** * @standalone The scheduler preview link to use when the user clicks on the preview button. You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link. */ "schedulerPreviewLink"?: string; /** * @standalone The selected configuration to use in the editor when editing an existing configuration or creating a new one. */ "selectedConfiguration"?: GroupConfiguration; /** * The selected event type. */ "selectedEventType"?: CONFIGURATION_EVENT_TYPE; /** * The selected group event. */ "selectedGroupEvent"?: GroupEventAPIData; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } interface NylasEventCalendar { /** * The calendars prop */ "calendars"?: NylasCalendar[]; /** * The current user prop */ "currentUser"?: User; /** * The group events prop */ "groupEvents"?: GroupEventAPIData[]; /** * The is loading prop */ "isLoading"?: boolean; /** * The master group events prop */ "masterGroupEvents"?: Record; /** * @standalone The name of the component */ "name"?: string; "onCalendarViewChanged"?: (event: NylasEventCalendarCustomEvent<{ startTime: number; endTime: number }>) => void; "onCreateGroupEvent"?: (event: NylasEventCalendarCustomEvent) => void; "onDeleteGroupEvent"?: (event: NylasEventCalendarCustomEvent<{ data: GroupEventAPIData; action: 'this' | 'future' | 'all' }>) => void; "onFetchMasterGroupEvent"?: (event: NylasEventCalendarCustomEvent) => void; "onGroupEventSelected"?: (event: NylasEventCalendarCustomEvent) => void; "onImportGroupEvent"?: (event: NylasEventCalendarCustomEvent<{ event_id: string; calendar_id: string; }>) => void; "onPreviosNextClicked"?: (event: NylasEventCalendarCustomEvent<{ direction: 'prev' | 'next'; view: 'day' | 'week' | 'month'; currentViewRange: { startTime: number; endTime: number } }>) => void; "onSaveGroupEventChanges"?: (event: NylasEventCalendarCustomEvent<{ data: GroupEventAPIData; action: 'this' | 'future' | 'all' }>) => void; "onSetCalendarViewDateRange"?: (event: NylasEventCalendarCustomEvent<{ startTime: number; endTime: number }>) => void; /** * @standalone The selected configuration */ "selectedConfiguration"?: GroupConfiguration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-capacity` component is a UI component that allows users to set the event capacity for the scheduler configuration. */ interface NylasEventCapacity { /** * @standalone The default event capacity */ "capacity"?: number; /** * @standalone The name of the component */ "name"?: string; /** * This event is fired when the event capacity value changes */ "onValueChanged"?: (event: NylasEventCapacityCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-description` component is a form input for the description of an event. */ interface NylasEventDescription { /** * @standalone The event description stored in the configuration */ "eventDescription"?: string; /** * Hide the auto popolate button */ "hideAutoPopulateButton"?: boolean; /** * @standalone The name of the event description input. */ "name"?: string; /** * Whether to show the tokens dropdown. */ "noTemplates"?: boolean; /** * Event emitted when the event description changes. */ "onValueChanged"?: (event: NylasEventDescriptionCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-duration` component is a form input for the duration of an event. */ interface NylasEventDuration { /** * @standalone The event duration in minutes as set in the configuration. */ "eventDurationMinutes"?: number; /** * @standalone The name of the event duration. Default is 'duration'. */ "name"?: string; /** * Event emitted when the event duration changes. */ "onValueChanged"?: (event: NylasEventDurationCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-info` component is an input form for event information such as title, description, duration, location. * This component is a container for the `nylas-event-title`, `nylas-event-description`, `nylas-event-duration`, and `nylas-event-location` components. * ```html * *
* * * * *
* * ``` */ interface NylasEventInfo { /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-limits` component is an input form for event limits, such as the number of available days in the future and * the minimum period of notice that a guest must provide to cancel a booking. * This component is a container for the `nylas-limit-future-bookings` and `nylas-min-cancellation-notice` components. * ```html * *
* * *
* * ``` */ interface NylasEventLimits { /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-location` component is a form input for the location of an event. */ interface NylasEventLocation { /** * @standalone The conference providers where the key is the provider name ('zoom') and the value is the grant id. We currently support same provider ('google', 'microsoft') for all participants and 'zoom' for cross-provider conferencing. */ "conferenceProviders"?: Record; /** * @standalone The current user */ "currentUser"?: User; /** * @standalone The event conferencing stored in the configuration */ "eventConferencing"?: Conference; /** * @standalone The event location stored in the configuration */ "eventLocation"?: string; /** * @standalone The name of the event location input. */ "name"?: string; /** * This event is fired when the value of the event location changes. */ "onValueChanged"?: (event: NylasEventLocationCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * @standalone The users provider */ "userProvider"?: string; } /** * The `nylas-event-timeslot` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface NylasEventTimeslot { /** * The current user. */ "currentUser"?: User; /** * The initial value of the event timeslot. */ "initialValue"?: { when: { start_time: number; end_time: number; start_timezone: string; end_timezone: string; }; recurrence: string[]; }; /** * @standalone The name of the component */ "name"?: string; /** * This event is fired when the value of the event timeslot changes. */ "onDateTimeInputError"?: (event: NylasEventTimeslotCustomEvent<{ key: string; message: string; }>) => void; /** * This event is fired when the value of the event timeslot changes. */ "onTimeWindowFormError"?: (event: NylasEventTimeslotCustomEvent<{ key: string; message: string; uniqueIdentifier?: string; }>) => void; /** * This event is fired when the value of the event location changes. */ "onValueChanged"?: (event: NylasEventTimeslotCustomEvent<{ value: string; name: string; }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-event-title` component is a form input for the title of an event. */ interface NylasEventTitle { /** * @standalone The title of the event from the cofiguration. */ "eventTitle"?: string; /** * @standalone The name attribute of this component. */ "name"?: string; /** * Whether to show the tokens dropdown. */ "noTemplates"?: boolean; /** * This event is fired when the value of the event title changes. */ "onValueChanged"?: (event: NylasEventTitleCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-feedback-form` component is a UI component that displays the booked event card. */ interface NylasFeedbackForm { /** * Feedback modal close event. */ "onFeedbackModalClosed"?: (event: NylasFeedbackFormCustomEvent) => void; /** * Feedback submitted event. */ "onFeedbackSubmitted"?: (event: NylasFeedbackFormCustomEvent<{ feedback: string }>) => void; /** * This is an internal event that is used to trigger validation on the form. */ "onTriggerValidation"?: (event: NylasFeedbackFormCustomEvent) => void; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-form-card` component is a card that can be used to display a form. It is a simple wrapper around a card with a header and content area. */ interface NylasFormCard { } /** * The `nylas-limit-future-bookings` component is a form input for the number of days in the future a guest is allowed to book an event. */ interface NylasLimitFutureBookings { /** * @standalone The number of days into the future that invitees will see availability, as set in the configuration. */ "availableDaysInFuture"?: number; /** * @standalone The name of the limit future bookings input. */ "name"?: string; /** * Event emitted when the future booking limit changes. */ "onValueChanged"?: (event: NylasLimitFutureBookingsCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-list-configurations` component displays a list of scheduling pages. */ interface NylasListConfigurations { /** * The list of configurations to display. */ "configurations"?: (Configuration | GroupConfiguration)[]; /** * The next cursor for list configurations, if any. */ "listConfigurationsNextCursor"?: string | null; /** * Event emitted when the user clicks the create event button. */ "onCreateButtonClick"?: (event: NylasListConfigurationsCustomEvent) => void; /** * Event emitted when the user clicks the delete event button. */ "onDeleteButtonClick"?: (event: NylasListConfigurationsCustomEvent<{ host: HTMLNylasListConfigurationsElement; configuration: Configuration | GroupConfiguration; }>) => void; /** * Event emitted when the user dismisses the error notification. */ "onDismissNotification"?: (event: NylasListConfigurationsCustomEvent<{ id: string; host: HTMLNylasListConfigurationsElement }>) => void; /** * Event emitted when the user clicks the edit event button. */ "onEditButtonClick"?: (event: NylasListConfigurationsCustomEvent<{ host: HTMLNylasListConfigurationsElement; configuration: Configuration | GroupConfiguration; }>) => void; /** * Event emitted when the component is initialized. */ "onInitListConfigurations"?: (event: NylasListConfigurationsCustomEvent<{ host: HTMLNylasListConfigurationsElement; cursor?: string; }>) => void; /** * This event is fired when there is an error in the component. */ "onNylasSchedulerError"?: (event: NylasListConfigurationsCustomEvent<{ notification: Notification; host: HTMLElement }>) => void; /** * The scheduler preview link to use when the user clicks on the preview button. You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link. */ "schedulerPreviewLink"?: string; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language. */ interface NylasLocaleSwitch { /** * @standalone The booking info. */ "bookingInfo"?: NylasSchedulerBookingData; /** * This event is fired when the language is changed. */ "onLanguageChanged"?: (event: NylasLocaleSwitchCustomEvent) => void; /** * This event is fired when the timezone is changed. */ "onTimezoneChanged"?: (event: NylasLocaleSwitchCustomEvent) => void; /** * The selected language. */ "selectedLanguage"?: string; /** * The selected timezone. */ "selectedTimezone"?: string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } interface NylasLogo { "height"?: string; "width"?: string; } /** * The `nylas-min-booking-notice` component is a form input for the minimum period of notice (minutes) that a guest must * provide to book an event. */ interface NylasMinBookingNotice { /** * @standalone The minimum booking notice (minutes) stored in the configuration */ "minBookingNotice"?: number; /** * @standalone The name of the min booking notice input. */ "name"?: string; /** * This event is fired when the value of the min booking notice changes. */ "onValueChanged"?: (event: NylasMinBookingNoticeCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-min-cancellation-notice` component is a form input for the minimum period of notice (minutes) that a guest must * provide to cancel a booked event. */ interface NylasMinCancellationNotice { /** * @standalone The minimum cancellation notice (minutes) stored in the configuration */ "minCancellationNotice"?: number; /** * @standalone The name of the min cancellation notice input. */ "name"?: string; /** * This event is fired when the value of the min cancellation notice changes. */ "onValueChanged"?: (event: NylasMinCancellationNoticeCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-notification` component is a UI component that displays notifications. */ interface NylasNotification { "allowedCategories"?: string[]; /** * The time-to-live for notifications in milliseconds. Set to 'none' to disable auto-dismissal. */ "ttl"?: number | 'none'; } /** * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card. */ interface NylasOrganizerConfirmationCard { /** * @standalone The config settings for the scheduler. */ "configSettings"?: ConfigSettings; /** * @standalone The loading state prop. Used to display loading state when fetching availability. */ "isLoading"?: boolean; /** * Reschedule button clicked event. */ "onConfirmBookingButtonClicked"?: (event: NylasOrganizerConfirmationCardCustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void; }>) => void; /** * This event is fired when an error occurs while rescheduling the booking. */ "onConfirmBookingError"?: (event: NylasOrganizerConfirmationCardCustomEvent) => void; /** * Reject booking button clicked event. */ "onRejectBookingButtonClicked"?: (event: NylasOrganizerConfirmationCardCustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>) => void; /** * Booking flow type. */ "organizerConfirmationBookingId"?: string; /** * The selected language. */ "selectedLanguage"?: string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker. */ interface NylasPageName { /** * @standalone Is the page name container card expanded */ "isOpen"?: boolean; /** * @standalone The name of the component */ "name"?: string; /** * This event is fired when the page name value changes */ "onValueChanged"?: (event: NylasPageNameCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * @standalone The default page name */ "pageName"?: string; /** * The required property for the page name input */ "requirePageName"?: boolean; /** * Make the field required */ "required"?: boolean; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * @standalone Show toggle button that allows users to expand or collapse the card */ "showToggle"?: boolean; } /** * The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page. * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input * fields you want to display. The component will automatically update the appearance object when the input fields are changed. * Ensure that the input fields have the `name` attribute set to the key in the appearance object. * If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page. * The fields that can be customized in the Nylas hosted scheduler page are: * - Primary color: (name: color) * - Company logo: (name: company_logo_url) * - Submit button label: (name: submit_button_label) * - Thank you message: (name: thank_you_message) * This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component. */ interface NylasPageStyling { /** * This event is fired when the form is submitted in the parent component. */ "onBookingFormSubmitted"?: (event: NylasPageStylingCustomEvent) => void; /** * This event is fired when the email reminders change. */ "onValueChanged"?: (event: NylasPageStylingCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-participant-booking-calendars` component is a form input for selecting calendars to check availability for participants. */ interface NylasParticipantBookingCalendars { /** * @standalone The calendars to choose from for the organizer / logged in user. */ "calendars"?: Calendar[]; /** * @standalone The name of the participants custom availability. */ "name"?: string; /** * This event is fired when the participants custom availability changes. */ "onValueChanged"?: (event: NylasParticipantBookingCalendarsCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The participant options passed in the additionalParticipants prop from the nylas-scheduler-editor component. */ "participantOptions"?: AdditionalParticipant[]; /** * @standalone The participants selected in the add participants section. */ "participants"?: Participant[]; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants. */ interface NylasParticipantsCustomAvailability { /** * @standalone The name of the participants custom availability. */ "name"?: string; /** * This event is fired when the participants custom availability changes. */ "onValueChanged"?: (event: NylasParticipantsCustomAvailabilityCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The participants selected in the add participants section. */ "participants"?: Participant[]; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-reminder-emails` component is a UI component that allows users to set buffer time before and after an event. */ interface NylasReminderEmails { /** * The event reminders prop. */ "eventReminders"?: (EventReminder & { editing?: boolean })[]; /** * The name of the component */ "name"?: string; "onNylasSuggestReminderMinutes"?: (event: NylasReminderEmailsCustomEvent<{ minutes: number }>) => void; /** * This event is fired when the email reminders change. */ "onValueChanged"?: (event: NylasReminderEmailsCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * The selected configuration. */ "selectedConfiguration"?: Configuration | GroupConfiguration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-reminder-time` component is a form input for the reminder time before an event. */ interface NylasReminderTime { /** * The event reminder time in minutes as set in the configuration. */ "eventReminderTimeMinutes"?: number; /** * The name of the reminder time. Default is 'reminder time'. */ "name"?: string; /** * Event emitted when the event reminder time changes. */ "onValueChanged"?: (event: NylasReminderTimeCustomEvent<{ value: string; name: string; }>) => void; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-scheduler-editor` component is a form that allows users to configure the settings for the Nylas Scheduler. */ interface NylasSchedulerEditor { /** * This prop is used to populate the additional participants and their availability in the scheduler editor. */ "additionalParticipants"?: AdditionalParticipant[]; /** * This prop will be used to populate the conference provider options in the editor. The key is the provider name ('zoom') and the value is the grant id. We currently support same provider ('google', 'microsoft') for all participants and 'zoom' for cross-provider conferencing. */ "conferenceProviders"?: Record; /** * * The configuration id to use for the scheduler editor. If provided, then the scheduler editor will try and fetch the configuration with the provided id. If found, it will automatically load the editor with the configuration settings for editing. */ "configurationId"?: string; /** * The default authentication arguments to use when authenticating a user. */ "defaultAuthArgs"?: AuthArgs[]; /** * This prop will allow to set a default language for the Nylas scheduling page. */ "defaultLanguage"?: LANGUAGE_CODE; /** * The default scheduler config store state. Used to set the initial state of the scheduler config store. This state can be used to pass defaults to newly created configurations. */ "defaultSchedulerConfigState"?: Partial; /** * Controls which event types are enabled in the Scheduler. - By default, all event types are enabled and users will see a selection screen when creating a new event. - You can disable specific event types by setting them to `false`. - At least one event type must remain enabled at all times. - If only one event type is enabled, the event type selection screen will be skipped. */ "enableEventTypes"?: EnableEventTypes; /** * Indicates if the user feedback feature is enabled. By default, this is set to true. When enabled, the user feedback feature will be available in the edit mode. To disable the user feedback feature, set this prop to false. */ "enableUserFeedback"?: boolean; /** * This provides a way to override the default event handlers. */ "eventOverrides"?: SchedulerEditorEventOverride; /** * This prop is to opt in to experimental features. Ex: { 'group_events': true } */ "experimentalFeatures"?: Record; /** * This optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm */ "hideEditorTabs"?: Tab[]; /** * This prop will allow to override the default localization strings for each language. Nylas scheduling page currently support the following language codes: en, es, fr, de, sv, zh, ja, nl. */ "localization"?: Partial>; /** * This is used to set the mode for the scheduler config. The mode can be 'app' or 'composable'. The default mode is 'app'. */ "mode"?: 'app' | 'composable'; /** * The Nylas Api Request instance. Used to make requests to the Nylas API. */ "nylasApiRequest"?: NylasApiRequest; /** * This prop will allow to show / hide the option to manage nylas branding in the email template. By default, this is set to true. When enabled, the option to show/hide nylas branding will be shown in the email template. To disable the option to show/hide nylas branding, set this prop to false. */ "nylasBranding"?: boolean; /** * The Nylas Sessions configuration. Used to configure the Nylas Sessions instance. */ "nylasSessionsConfig"?: Config; /** * This event is fired when the provider is initialized. By default, this event handles determining if the user is logged in or not. In addition, it fetches the provided configuration if a valid configuration id is provided. */ "onInit"?: (event: NylasSchedulerEditorCustomEvent) => void; /** * This event is fired when the the NylasAuth isAuthenticated state changes to true. */ "onLoggedIn"?: (event: NylasSchedulerEditorCustomEvent) => void; /** * This event is fired when the the NylasAuth isAuthenticated state changes to false. */ "onLoggedOut"?: (event: NylasSchedulerEditorCustomEvent) => void; /** * This event is fired when the close button on scheduler config is clicked. */ "onSchedulerConfigCloseClicked"?: (event: NylasSchedulerEditorCustomEvent) => void; /** * Indicates if a slug is required for the configuration. When set to true, the user must enter a slug when creating or editing a configuration. The slug is used for hosted pages. If using Nylas hosted scheduling pages, the `schedulerPreviewLink` prop can be set to redirect to a public configuration as follows: `https://book.nylas.com/us//{slug}`. `us` denotes the region. Replace it with the appropriate region of your application. Replace `` with your Nylas app client ID. The `{slug}` placeholder is replaced with the appropriate slug when the scheduler preview button is clicked. Note: Nylas hosted scheduling pages are only available for public configurations. */ "requiresSlug"?: boolean; /** * The scheduler preview link used when the user clicks the preview button. If `requiresSlug` is true, you can use the placeholder `{slug}` to insert the slug in the link for Nylas hosted scheduling pages. Additionally, you can use the placeholder `{config.id}` to insert the configuration ID anywhere in the link. For example: `https://book.nylas.com/us//{slug}`. `us` denotes the region. Replace it with the appropriate region of your application. Replace `` with your Nylas app client ID. Note: Nylas hosted scheduling pages are only available for public configurations. */ "schedulerPreviewLink"?: string; } /** * The `nylas-scheduling` component is used to display the Nylas Scheduling UI. */ interface NylasScheduling { /** * This enables passing the bookingInfo object to the Scheduler UI for direct booking event creation. When used with timeslotConfirmedHandler, it bypasses the additional data page and immediately invokes the handler after booking. */ "bookingInfo"?: NylasSchedulerBookingData; /** * Booking Ref required for cancelling flow. */ "cancelBookingRef"?: string; /** * The app ID of the configuration (public config) to be used for the Nylas Scheduler. This is used in conjunction with the slug. When the configurationId is not provided, the slug and clientId are used to make requests to the Scheduler API endpoints. If the configurationId is provided, this prop will be ignored. */ "clientId"?: string; /** * The config ID for the Nylas Scheduler. This should be passed in when using a public config, in which case the sessionId is not required. */ "configurationId"?: string; /** * This prop will allow to set a default language for the Nylas scheduling page. */ "defaultLanguage"?: LANGUAGE_CODE; /** * The default scheduler store state. Used to set the initial state of the scheduler store. */ "defaultSchedulerState"?: Partial; "enableUserFeedback"?: boolean; /** * This provides an easy way to override the default function of the event emitter. An example of this is the `timeslotConfirmed` event. By default, this event will set the scheduler store state for `showBookingForm` to `true` which will show the booking form. However, if you want to override this behavior, you can pass in the prop `eventOverride` like: ```html { console.log("Timeslot confirmed event fired!"); } }} /> ``` */ "eventOverrides"?: SchedulerEventOverride; "hour12"?: boolean | undefined; /** * The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data. */ "isLoading"?: boolean; /** * This prop will allow to override the default localization strings for each language. Nylas scheduling page currently support the following language codes: en, es, fr, de, sv, zh, ja, nl. */ "localization"?: Partial>; /** * This is used to set the mode for the Nylas Scheduler. The mode can be either `app` or `composable`. The default mode is `app`. - `app`: This mode is used to show the default Nylas Scheduler UI. - `composable`: This mode is used to show the composable Nylas Scheduler UI by passing the individual scheduler components as children. */ "mode"?: 'app' | 'composable'; /** * This prop lets you hide the Nylas branding. Default is true. */ "nylasBranding"?: boolean; /** * This event is triggered on successful booking request. It emits the event data. */ "onBookedEventInfo"?: (event: NylasSchedulingCustomEvent>) => void; /** * This event is triggered if either the rescheduleBookingRef or cancelBookingRef or organizerConfirmationBookingRef prop is supplied and the component has been attached to the DOM. It emits the configurationId and bookingId derived from the rescheduleBookingRef or cancelBookingRef or organizerConfirmationBookingRef. Subscribe to this event to obtain the extracted configurationId, which is necessary to generate the sessionID for configurations that are not public. */ "onBookingRefExtracted"?: (event: NylasSchedulingCustomEvent<{ configurationId: string; bookingId: string; salt?: string }>) => void; "onConfigSettingsLoaded"?: (event: NylasSchedulingCustomEvent<{ settings: NylasSchedulerResponse }>) => void; /** * This event is fired when the provider is initialized. It can be used to set the initial state of the provider, or to prevent the provider from firing some default behavior. */ "onInit"?: (event: NylasSchedulingCustomEvent) => void; "onNylasSchedulerError"?: (event: NylasSchedulingCustomEvent<{ notification: Notification; host: HTMLElement }>) => void; "onNylasSchedulerInfo"?: (event: NylasSchedulingCustomEvent<{ notification: Notification; host: HTMLElement }>) => void; /** * This event is fired when the scheduler component enters componentDidLoad lifecycle. */ "onSchedulerDidLoad"?: (event: NylasSchedulingCustomEvent) => void; /** * This event is fired when the scheduler component enters componentWillLoad lifecycle. */ "onSchedulerWillLoad"?: (event: NylasSchedulingCustomEvent) => void; /** * Booking Ref required for the manual confirmation flow. */ "organizerConfirmationBookingRef"?: string; /** * Booking Ref required for rescheduling flow. */ "rescheduleBookingRef"?: string; /** * The URL for the Nylas Scheduler API. (staging or production URL) */ "schedulerApiUrl"?: string; /** * The session ID for the Nylas Scheduler. This is used to authenticate the user. */ "sessionId"?: string; "showNotification"?: boolean; /** * The slug of the configuration (public config) to be used for the Nylas Scheduler. This is used in conjunction with the clientId. When the configurationId is not provided, the slug and clientId are used to make requests to the Scheduler API endpoints. If the configurationId is provided, this prop will be ignored. */ "slug"?: string; /** * Theme config, used to automatically generate a theme with color palette and CSS variables to customize the look and feel of the Nylas Scheduler. */ "themeConfig"?: ThemeConfig; } /** * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker. */ interface NylasSchedulingMethod { /** * @standalone The name of the booking type picker. */ "name"?: string; /** * This event is fired when the selected booking calendar changes. */ "onValueChanged"?: (event: NylasSchedulingMethodCustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void; }>) => void; /** * @standalone The participant options passed in the additionalParticipants prop from the nylas-scheduler-editor component. */ "participantOptions"?: AdditionalParticipant[]; /** * This prop is used to display the component in a disabled state / read-only mode. */ "readOnly"?: boolean; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * Whether to show the sub-title. */ "showSubTitle"?: boolean; } /** * The `nylas-select-event-type` component is a UI component that allows users to select the event type for the scheduler configuration. */ interface NylasSelectEventType { /** * The enable event types. */ "enableEventTypes"?: EnableEventTypes; /** * @standalone The name of the component */ "name"?: string; /** * This event is fired when the event type is selected. */ "onCreateEventTypeSelected"?: (event: NylasSelectEventTypeCustomEvent<{ eventType: CONFIGURATION_EVENT_TYPE }>) => void; /** * This event is fired when the return to all scheduling pages button is clicked. */ "onReturnToAllSchedulingPagesEvent"?: (event: NylasSelectEventTypeCustomEvent) => void; /** * @standalone The participant options passed in the additionalParticipants prop from the nylas-scheduler-editor component. */ "participantOptions"?: AdditionalParticipant[]; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-selected-event-card` component is a UI component that displays the selected event card. */ interface NylasSelectedEventCard { /** * The 12-hour time format. */ "hour12"?: boolean; /** * The selected date. */ "selectedDate"?: Date; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; /** * The selected time. */ "selectedTimeslot"?: Timeslot; /** * The selected timezone. */ "selectedTimezone"?: string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } /** * The `nylas-time-window-picker` component is a time picker that can be used to select a time. */ interface NylasTimeWindowPicker { /** * This sets the error state of the input. */ "hasError"?: boolean; /** * The language of the input. */ "language"?: LANGUAGE_CODE; /** * This is the start time value if one is set by the parent component. It is useful if this component is used to render an end time which should not be before the start time, defining the earliest selectable time. */ "minimumStartTime"?: string | null; /** * The name of the input. */ "name": string; /** * This event is fired when the time is changed. */ "onTimeChange"?: (event: NylasTimeWindowPickerCustomEvent<{ key: string; value: string; }>) => void; /** * This event is fired when the form has an error. The parent component can listen for this event and display an error message or set form validity. */ "onTimeWindowFormError"?: (event: NylasTimeWindowPickerCustomEvent<{ key: string; message: string; }>) => void; /** * The placeholder text for the input. */ "placeholder"?: string; /** * The time to display in the input. This is passed by the parent component */ "time": string; } /** * The `nylas-timeslot-interval` component allows users to set their time slot interval preferences. * This component provides an option to set both `interval_minutes` and `round_to` in the configuration. */ interface NylasTimeslotInterval { /** * @standalone The event duration in minutes. */ "eventDurationMinutes"?: number; /** * @standalone The name of the calendar picker. */ "name"?: string; /** * This event is fired when the selected booking calendar changes. */ "onValueChanged"?: (event: NylasTimeslotIntervalCustomEvent<{ value: string; name: string; }>) => void; /** * @standalone The selected config */ "selectedConfiguration"?: Configuration; /** * The selected language. */ "selectedLanguage"?: LANGUAGE_CODE; } /** * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots. */ interface NylasTimeslotPicker { /** * @standalone The available timeslots. */ "availability"?: AvailabilityTimeslot[]; /** * The 12-hour time format. */ "hour12"?: boolean; /** * @standalone The loading state prop. Used to display loading state when fetching availability. */ "isLoading"?: boolean; /** * This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page. */ "onTimeslotConfirmed"?: (event: NylasTimeslotPickerCustomEvent<{ timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement }>) => void; /** * This event is fired when a timeslot is selected. */ "onTimeslotSelected"?: (event: NylasTimeslotPickerCustomEvent) => void; "onValidateTimeslotError"?: (event: NylasTimeslotPickerCustomEvent<{ error: string; type: 'error' | 'info' }>) => void; /** * The selected date. */ "selectedDate"?: Date; /** * The selected language. */ "selectedLanguage"?: string; /** * The selected timeslot. */ "selectedTimeslot"?: Timeslot; /** * The selected timezone. */ "selectedTimezone"?: string; /** * @standalone The theme configuration. */ "themeConfig"?: any; } interface PaintbrushFillIcon { "height"?: string; "width"?: string; } interface PaintbrushIcon { "height"?: string; "width"?: string; } interface PeopleIcon { "height"?: string; "width"?: string; } interface PersonClipboardIcon { "height"?: string; "width"?: string; } interface PersonIcon { "height"?: string; "width"?: string; } interface PlayIcon { "height"?: string; "width"?: string; } interface PlusIcon { "height"?: string; "width"?: string; } /** * The `radio-button-group` component is a UI component that allows users to select a single option from a list of options. * This component is used in the scheduling form to input radio button type inputs. */ interface RadioButtonGroup { /** * The default selected value of the radio group. */ "defaultSelectedValue"?: string; /** * The label of the radio group. This is displayed above the radio group. Label is optional. You can also use the slot 'label' to add a label. */ "label"?: string; /** * The name of the radio group. This is used to identify the radio group when submitting a form. */ "name"?: string; /** * This event is fired when the selected value changes. */ "onNylasFormRadioChanged"?: (event: RadioButtonGroupCustomEvent<{ value: string; name: string; label?: string; }>) => void; /** * The list of options in the radio group. Each option has a label and a value and an optional description. */ "options"?: { label: string; value: string; description?: string }[]; /** * The property to make the radio group read-only. If true, the radio group cannot be edited. */ "readOnly"?: boolean; /** * Whether the radio group is required. If true, the radio group must have a value when submitting a form. Default is false. If the radio group is required and the value is empty, an error message is displayed. */ "required"?: boolean; } interface RefreshIcon { "height"?: string; "width"?: string; } interface ReplyAllIcon { "height"?: string; "width"?: string; } interface ReplyIcon { "height"?: string; "width"?: string; } interface SearchIcon { "height"?: string; "width"?: string; } /** * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options. * This component is used in the scheduling form to input dropdown type inputs. */ interface SelectDropdown { /** * The default selected option */ "defaultSelectedOption"?: DropdownOption | null; /** * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value */ "dropdownButtonText"?: string; /** * Allows to set the empty value of the dropdown */ "emptyValue"?: string; /** * The custom error message to display when the value is empty or null and the dropdown is required */ "errorMessage"?: string; /** * The label for the dropdown, skipped if no label is provided */ "label"?: string; /** * The name of the dropdown */ "name": string; /** * This event is fired when the selected option is changed */ "onNylasFormDropdownChanged"?: (event: SelectDropdownCustomEvent<{ value: DropdownOption['value']; name: string; error?: string; label?: string; }>) => void; /** * This event is fired when the default selected option is set, on component load */ "onNylasFormDropdownDefaultSelected"?: (event: SelectDropdownCustomEvent<{ value: DropdownOption['value']; name: string; error?: string; label?: string; }>) => void; /** * The options to display in the dropdown */ "options"?: DropdownOption[]; /** * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix. */ "pluralizedLabel"?: string; /** * The property to make the dropdown read-only. If true, the dropdown cannot be edited. */ "readOnly"?: boolean; /** * If true, the dropdown is required for form submission */ "required"?: boolean; /** * The placeholder for the search input */ "searchPlaceholder"?: string; /** * Should show chevron on button */ "withChevron"?: boolean; /** * Should show search input */ "withSearch"?: boolean; } interface SentIcon { "height"?: string; "width"?: string; } interface SpamIcon { "height"?: string; "width"?: string; } interface StarIcon { "height"?: string; "width"?: string; } interface StopIcon { "height"?: string; "width"?: string; } /** * `textarea-component` allows users to enter multiline text. * It is ideal for larger inputs like comments or messages in a form. * This component is used in the scheduling form to input multiline text. */ interface TextareaComponent { /** * Automatically focus the textarea when the component loads. */ "autoFocus"?: boolean; /** * The default value of the textarea, appearing when the component first renders. */ "defaultValue"?: string; /** * The label for the textarea, displayed above it. */ "label"?: string; /** * The maximum number of characters allowed in the textarea. */ "maxLength"?: number; /** * The name of the textarea, important for form submissions. */ "name"?: string; /** * Event emitted when the value of the textarea changes. Useful for parent components to capture user input. */ "onNylasFormInputChanged"?: (event: TextareaComponentCustomEvent<{ value: string; name: string; error: string; label: string; type: string }>) => void; /** * Placeholder text shown in the textarea when it is empty. */ "placeholder"?: string; /** * If true, the textarea cannot be edited by the user. */ "readOnly"?: boolean; /** * Specifies if the textarea is required for form submission. If true, an error message shows if left empty. */ "required"?: boolean; /** * The content of the label's tooltip */ "tooltip"?: string; /** * The type */ "type"?: string; } /** * The time period selector component allows the user to select a time period and a number value for that time period. */ interface TimePeriodSelector { /** * The default selected number. */ "defaultSelectedNumber": number; /** * The default selected time period. */ "defaultSelectedPeriod": string; /** * The error state */ "hasError"?: boolean; "onTimePeriodChanged"?: (event: TimePeriodSelectorCustomEvent<{ number: number; period: string }>) => void; "timePeriods"?: TimePeriod[]; } /** * The `toggle-switch` component is a UI component that allows users to toggle a switch. * This component is used in the scheduling form to input toggle switch type inputs. * Use it as a replacement for checkboxes when you want to present a switch in the UI. */ interface ToggleSwitch { /** * The default value of the toggle switch. This is the value that is displayed when the toggle switch is rendered. */ "checked"?: boolean; /** * The label of the toggle switch. This is displayed next to the toggle switch. */ "label"?: string; /** * The name of the toggle switch. This is used to identify the toggle switch when submitting a form. */ "name"?: string; /** * This event is fired when the toggle switch is toggled. */ "onNylasFormSwitchToggled"?: (event: ToggleSwitchCustomEvent<{ checked: boolean; name: string; label: string; }>) => void; } /** * The `tooltip-component` component is a UI component that displays a tooltip. */ interface TooltipComponent { /** * The position of the tooltip. */ "position"?: 'top' | 'bottom' | 'left' | 'right'; } interface TranslateIcon { "height"?: string; "width"?: string; } interface TrashFillIcon { "height"?: string; "width"?: string; } interface TrashIcon { "height"?: string; "width"?: string; } interface UnderlineIcon { "height"?: string; "width"?: string; } interface WarningIcon { "height"?: string; "width"?: string; } interface ZoomIcon { "height"?: string; "width"?: string; } interface IntrinsicElements { "add-circle-icon": AddCircleIcon; "archive-icon": ArchiveIcon; "arrow-icon": ArrowIcon; "bold-icon": BoldIcon; "button-component": ButtonComponent; "calendar-agenda-fill-icon": CalendarAgendaFillIcon; "calendar-agenda-icon": CalendarAgendaIcon; "calendar-cancel-icon": CalendarCancelIcon; "calendar-check-icon": CalendarCheckIcon; "calendar-icon": CalendarIcon; "calendar-info-icon": CalendarInfoIcon; "calendar-patterns-icon": CalendarPatternsIcon; "checkbox-component": CheckboxComponent; "checkbox-group": CheckboxGroup; "checkmark-circle-icon": CheckmarkCircleIcon; "checkmark-icon": CheckmarkIcon; "chevron-icon": ChevronIcon; "clock-icon": ClockIcon; "close-icon": CloseIcon; "copy-icon": CopyIcon; "delete-icon": DeleteIcon; "document-refresh-icon": DocumentRefreshIcon; "dragable-icon": DragableIcon; "edit-icon": EditIcon; "envelope-fill-icon": EnvelopeFillIcon; "envelope-icon": EnvelopeIcon; "eye-icon": EyeIcon; "feedback-icon": FeedbackIcon; "flow-icon": FlowIcon; "folder-icon": FolderIcon; "forward-icon": ForwardIcon; "globe-icon": GlobeIcon; "google-logo-icon": GoogleLogoIcon; "google-meet-icon": GoogleMeetIcon; "inbox-icon": InboxIcon; "info-icon": InfoIcon; "input-color-picker": InputColorPicker; "input-component": InputComponent; "input-dropdown": InputDropdown; "input-image-url": InputImageUrl; "italic-icon": ItalicIcon; "loading-icon": LoadingIcon; "location-icon": LocationIcon; "location-off-icon": LocationOffIcon; "microsoft-logo-icon": MicrosoftLogoIcon; "microsoft-teams-icon": MicrosoftTeamsIcon; "multi-select-dropdown": MultiSelectDropdown; "nylas-additional-participants": NylasAdditionalParticipants; "nylas-availability-picker": NylasAvailabilityPicker; "nylas-booked-event-card": NylasBookedEventCard; "nylas-booking-calendar-picker": NylasBookingCalendarPicker; "nylas-booking-confirmation-redirect": NylasBookingConfirmationRedirect; "nylas-booking-confirmation-type": NylasBookingConfirmationType; "nylas-booking-form": NylasBookingForm; "nylas-booking-form-config": NylasBookingFormConfig; "nylas-buffer-time": NylasBufferTime; "nylas-calendar-picker": NylasCalendarPicker; "nylas-cancel-booking-form": NylasCancelBookingForm; "nylas-cancellation-policy": NylasCancellationPolicy; "nylas-cancelled-event-card": NylasCancelledEventCard; "nylas-confirmation-email": NylasConfirmationEmail; "nylas-confirmed-event-card": NylasConfirmedEventCard; "nylas-connected-calendars": NylasConnectedCalendars; "nylas-custom-booking-flow": NylasCustomBookingFlow; "nylas-custom-event-slug": NylasCustomEventSlug; "nylas-customize-booking-settings": NylasCustomizeBookingSettings; "nylas-date-component": NylasDateComponent; "nylas-date-picker": NylasDatePicker; "nylas-disable-emails": NylasDisableEmails; "nylas-editor-tabs": NylasEditorTabs; "nylas-editor-tabs-group": NylasEditorTabsGroup; "nylas-event-calendar": NylasEventCalendar; "nylas-event-capacity": NylasEventCapacity; "nylas-event-description": NylasEventDescription; "nylas-event-duration": NylasEventDuration; "nylas-event-info": NylasEventInfo; "nylas-event-limits": NylasEventLimits; "nylas-event-location": NylasEventLocation; "nylas-event-timeslot": NylasEventTimeslot; "nylas-event-title": NylasEventTitle; "nylas-feedback-form": NylasFeedbackForm; "nylas-form-card": NylasFormCard; "nylas-limit-future-bookings": NylasLimitFutureBookings; "nylas-list-configurations": NylasListConfigurations; "nylas-locale-switch": NylasLocaleSwitch; "nylas-logo": NylasLogo; "nylas-min-booking-notice": NylasMinBookingNotice; "nylas-min-cancellation-notice": NylasMinCancellationNotice; "nylas-notification": NylasNotification; "nylas-organizer-confirmation-card": NylasOrganizerConfirmationCard; "nylas-page-name": NylasPageName; "nylas-page-styling": NylasPageStyling; "nylas-participant-booking-calendars": NylasParticipantBookingCalendars; "nylas-participants-custom-availability": NylasParticipantsCustomAvailability; "nylas-reminder-emails": NylasReminderEmails; "nylas-reminder-time": NylasReminderTime; "nylas-scheduler-editor": NylasSchedulerEditor; "nylas-scheduling": NylasScheduling; "nylas-scheduling-method": NylasSchedulingMethod; "nylas-select-event-type": NylasSelectEventType; "nylas-selected-event-card": NylasSelectedEventCard; "nylas-time-window-picker": NylasTimeWindowPicker; "nylas-timeslot-interval": NylasTimeslotInterval; "nylas-timeslot-picker": NylasTimeslotPicker; "paintbrush-fill-icon": PaintbrushFillIcon; "paintbrush-icon": PaintbrushIcon; "people-icon": PeopleIcon; "person-clipboard-icon": PersonClipboardIcon; "person-icon": PersonIcon; "play-icon": PlayIcon; "plus-icon": PlusIcon; "radio-button-group": RadioButtonGroup; "refresh-icon": RefreshIcon; "reply-all-icon": ReplyAllIcon; "reply-icon": ReplyIcon; "search-icon": SearchIcon; "select-dropdown": SelectDropdown; "sent-icon": SentIcon; "spam-icon": SpamIcon; "star-icon": StarIcon; "stop-icon": StopIcon; "textarea-component": TextareaComponent; "time-period-selector": TimePeriodSelector; "toggle-switch": ToggleSwitch; "tooltip-component": TooltipComponent; "translate-icon": TranslateIcon; "trash-fill-icon": TrashFillIcon; "trash-icon": TrashIcon; "underline-icon": UnderlineIcon; "warning-icon": WarningIcon; "zoom-icon": ZoomIcon; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "add-circle-icon": LocalJSX.AddCircleIcon & JSXBase.HTMLAttributes; "archive-icon": LocalJSX.ArchiveIcon & JSXBase.HTMLAttributes; "arrow-icon": LocalJSX.ArrowIcon & JSXBase.HTMLAttributes; "bold-icon": LocalJSX.BoldIcon & JSXBase.HTMLAttributes; "button-component": LocalJSX.ButtonComponent & JSXBase.HTMLAttributes; "calendar-agenda-fill-icon": LocalJSX.CalendarAgendaFillIcon & JSXBase.HTMLAttributes; "calendar-agenda-icon": LocalJSX.CalendarAgendaIcon & JSXBase.HTMLAttributes; "calendar-cancel-icon": LocalJSX.CalendarCancelIcon & JSXBase.HTMLAttributes; "calendar-check-icon": LocalJSX.CalendarCheckIcon & JSXBase.HTMLAttributes; "calendar-icon": LocalJSX.CalendarIcon & JSXBase.HTMLAttributes; "calendar-info-icon": LocalJSX.CalendarInfoIcon & JSXBase.HTMLAttributes; "calendar-patterns-icon": LocalJSX.CalendarPatternsIcon & JSXBase.HTMLAttributes; /** * The `checkbox-component` component is a UI component that allows users to select a checkbox. * This component is used in the scheduling form to input checkbox type inputs. */ "checkbox-component": LocalJSX.CheckboxComponent & JSXBase.HTMLAttributes; /** * The `checkbox-group` component is a UI component that allows users to select multiple options from a list. * It manages a group of checkboxes and their states. */ "checkbox-group": LocalJSX.CheckboxGroup & JSXBase.HTMLAttributes; "checkmark-circle-icon": LocalJSX.CheckmarkCircleIcon & JSXBase.HTMLAttributes; "checkmark-icon": LocalJSX.CheckmarkIcon & JSXBase.HTMLAttributes; "chevron-icon": LocalJSX.ChevronIcon & JSXBase.HTMLAttributes; "clock-icon": LocalJSX.ClockIcon & JSXBase.HTMLAttributes; "close-icon": LocalJSX.CloseIcon & JSXBase.HTMLAttributes; "copy-icon": LocalJSX.CopyIcon & JSXBase.HTMLAttributes; "delete-icon": LocalJSX.DeleteIcon & JSXBase.HTMLAttributes; "document-refresh-icon": LocalJSX.DocumentRefreshIcon & JSXBase.HTMLAttributes; "dragable-icon": LocalJSX.DragableIcon & JSXBase.HTMLAttributes; "edit-icon": LocalJSX.EditIcon & JSXBase.HTMLAttributes; "envelope-fill-icon": LocalJSX.EnvelopeFillIcon & JSXBase.HTMLAttributes; "envelope-icon": LocalJSX.EnvelopeIcon & JSXBase.HTMLAttributes; "eye-icon": LocalJSX.EyeIcon & JSXBase.HTMLAttributes; "feedback-icon": LocalJSX.FeedbackIcon & JSXBase.HTMLAttributes; "flow-icon": LocalJSX.FlowIcon & JSXBase.HTMLAttributes; "folder-icon": LocalJSX.FolderIcon & JSXBase.HTMLAttributes; "forward-icon": LocalJSX.ForwardIcon & JSXBase.HTMLAttributes; "globe-icon": LocalJSX.GlobeIcon & JSXBase.HTMLAttributes; "google-logo-icon": LocalJSX.GoogleLogoIcon & JSXBase.HTMLAttributes; "google-meet-icon": LocalJSX.GoogleMeetIcon & JSXBase.HTMLAttributes; "inbox-icon": LocalJSX.InboxIcon & JSXBase.HTMLAttributes; "info-icon": LocalJSX.InfoIcon & JSXBase.HTMLAttributes; /** * The `input-color-picker` component is a dropdown that allows users to select an accent color from either RGB inputs or an interactive color picker and converts them to a hex value. * This component is used in the scheduling form to input dropdown type inputs. */ "input-color-picker": LocalJSX.InputColorPicker & JSXBase.HTMLAttributes; /** * The `input-component` component is a UI component that allows users to input text, email, or phone number values. * This component is used in the scheduling form to input text, email and phone number type inputs. */ "input-component": LocalJSX.InputComponent & JSXBase.HTMLAttributes; /** * The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options. */ "input-dropdown": LocalJSX.InputDropdown & JSXBase.HTMLAttributes; /** * The `nylas-image-input` component is a UI component that allows users input an image URL and see a preview of the image. */ "input-image-url": LocalJSX.InputImageUrl & JSXBase.HTMLAttributes; "italic-icon": LocalJSX.ItalicIcon & JSXBase.HTMLAttributes; "loading-icon": LocalJSX.LoadingIcon & JSXBase.HTMLAttributes; "location-icon": LocalJSX.LocationIcon & JSXBase.HTMLAttributes; "location-off-icon": LocalJSX.LocationOffIcon & JSXBase.HTMLAttributes; "microsoft-logo-icon": LocalJSX.MicrosoftLogoIcon & JSXBase.HTMLAttributes; "microsoft-teams-icon": LocalJSX.MicrosoftTeamsIcon & JSXBase.HTMLAttributes; "multi-select-dropdown": LocalJSX.MultiSelectDropdown & JSXBase.HTMLAttributes; /** * The `nylas-additional-participants` component is a form input for adding additional participants to an event. */ "nylas-additional-participants": LocalJSX.NylasAdditionalParticipants & JSXBase.HTMLAttributes; /** * The `nylas-availability-picker` component is a form input for selecting availability (open hours). */ "nylas-availability-picker": LocalJSX.NylasAvailabilityPicker & JSXBase.HTMLAttributes; /** * The `nylas-booked-event-card` component is a UI component that displays the booked event card. */ "nylas-booked-event-card": LocalJSX.NylasBookedEventCard & JSXBase.HTMLAttributes; /** * The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker. */ "nylas-booking-calendar-picker": LocalJSX.NylasBookingCalendarPicker & JSXBase.HTMLAttributes; /** * The `nylas-booking-confirmation-redirect` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed. */ "nylas-booking-confirmation-redirect": LocalJSX.NylasBookingConfirmationRedirect & JSXBase.HTMLAttributes; /** * The `nylas-booking-confirmation-type` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed. */ "nylas-booking-confirmation-type": LocalJSX.NylasBookingConfirmationType & JSXBase.HTMLAttributes; /** * The `nylas-booking-form` component is a UI component that allows users to book an event. * The booking form component. */ "nylas-booking-form": LocalJSX.NylasBookingForm & JSXBase.HTMLAttributes; /** * The `nylas-booking-form-config` component is a form input for adding additional fields to the booking form. */ "nylas-booking-form-config": LocalJSX.NylasBookingFormConfig & JSXBase.HTMLAttributes; /** * The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event. */ "nylas-buffer-time": LocalJSX.NylasBufferTime & JSXBase.HTMLAttributes; /** * The `nylas-calendar-picker` component is a form input for selecting calendars to check availability. */ "nylas-calendar-picker": LocalJSX.NylasCalendarPicker & JSXBase.HTMLAttributes; /** * The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking (DELETE request). * This component is also used to reject a booking (PUT request) by the organizer, if the prop `rejectBookingId` is provided. */ "nylas-cancel-booking-form": LocalJSX.NylasCancelBookingForm & JSXBase.HTMLAttributes; /** * The `nylas-cancellation-policy` component is a form input for the cancellation policy message of an event. */ "nylas-cancellation-policy": LocalJSX.NylasCancellationPolicy & JSXBase.HTMLAttributes; /** * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card. */ "nylas-cancelled-event-card": LocalJSX.NylasCancelledEventCard & JSXBase.HTMLAttributes; /** * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event. */ "nylas-confirmation-email": LocalJSX.NylasConfirmationEmail & JSXBase.HTMLAttributes; /** * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card. */ "nylas-confirmed-event-card": LocalJSX.NylasConfirmedEventCard & JSXBase.HTMLAttributes; /** * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants. */ "nylas-connected-calendars": LocalJSX.NylasConnectedCalendars & JSXBase.HTMLAttributes; /** * The `nylas-custom-booking-flow` component is an input form for booking type (automatically or manually accept bookings) and confirmation redirect URL (default or custom). * This component is a container for the `nylas-booking-confirmation-type`, `nylas-booking-confirmation-redirect` components. * ```html * *
* * *
* * ``` */ "nylas-custom-booking-flow": LocalJSX.NylasCustomBookingFlow & JSXBase.HTMLAttributes; /** * The `nylas-custom-event-slug` component is a UI component that allows users to add a custom URL slug for their event link. */ "nylas-custom-event-slug": LocalJSX.NylasCustomEventSlug & JSXBase.HTMLAttributes; /** * The `nylas-customize-booking-settings` component is a UI component that displays the booking calendar picker. */ "nylas-customize-booking-settings": LocalJSX.NylasCustomizeBookingSettings & JSXBase.HTMLAttributes; /** * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values. * This component is used in the scheduling form to input text, email and phone number type inputs. */ "nylas-date-component": LocalJSX.NylasDateComponent & JSXBase.HTMLAttributes; /** * The `nylas-date-picker` component is a UI component that allows users to select a date. */ "nylas-date-picker": LocalJSX.NylasDatePicker & JSXBase.HTMLAttributes; /** * The `nylas-disable-emails` component is a UI component that allows users to select the event type for the scheduler configuration. */ "nylas-disable-emails": LocalJSX.NylasDisableEmails & JSXBase.HTMLAttributes; /** * The nylas-editor-tabs component provides the user interface for managing editor tabs within the scheduler editor. * It is primarily used to control the edit mode of the scheduler editor, and it is rendered automatically by the * parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly * or set any props manually, as its behavior is fully managed by the parent component. */ "nylas-editor-tabs": LocalJSX.NylasEditorTabs & JSXBase.HTMLAttributes; /** * The nylas-editor-tabs-group component provides the user interface for managing editor tabs within the scheduler editor. * It is primarily used to control the edit mode of the scheduler editor, and it is rendered automatically by the * parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly * or set any props manually, as its behavior is fully managed by the parent component. */ "nylas-editor-tabs-group": LocalJSX.NylasEditorTabsGroup & JSXBase.HTMLAttributes; "nylas-event-calendar": LocalJSX.NylasEventCalendar & JSXBase.HTMLAttributes; /** * The `nylas-event-capacity` component is a UI component that allows users to set the event capacity for the scheduler configuration. */ "nylas-event-capacity": LocalJSX.NylasEventCapacity & JSXBase.HTMLAttributes; /** * The `nylas-event-description` component is a form input for the description of an event. */ "nylas-event-description": LocalJSX.NylasEventDescription & JSXBase.HTMLAttributes; /** * The `nylas-event-duration` component is a form input for the duration of an event. */ "nylas-event-duration": LocalJSX.NylasEventDuration & JSXBase.HTMLAttributes; /** * The `nylas-event-info` component is an input form for event information such as title, description, duration, location. * This component is a container for the `nylas-event-title`, `nylas-event-description`, `nylas-event-duration`, and `nylas-event-location` components. * ```html * *
* * * * *
* * ``` */ "nylas-event-info": LocalJSX.NylasEventInfo & JSXBase.HTMLAttributes; /** * The `nylas-event-limits` component is an input form for event limits, such as the number of available days in the future and * the minimum period of notice that a guest must provide to cancel a booking. * This component is a container for the `nylas-limit-future-bookings` and `nylas-min-cancellation-notice` components. * ```html * *
* * *
* * ``` */ "nylas-event-limits": LocalJSX.NylasEventLimits & JSXBase.HTMLAttributes; /** * The `nylas-event-location` component is a form input for the location of an event. */ "nylas-event-location": LocalJSX.NylasEventLocation & JSXBase.HTMLAttributes; /** * The `nylas-event-timeslot` component is a UI component that allows users to select the event type for the scheduler configuration. */ "nylas-event-timeslot": LocalJSX.NylasEventTimeslot & JSXBase.HTMLAttributes; /** * The `nylas-event-title` component is a form input for the title of an event. */ "nylas-event-title": LocalJSX.NylasEventTitle & JSXBase.HTMLAttributes; /** * The `nylas-feedback-form` component is a UI component that displays the booked event card. */ "nylas-feedback-form": LocalJSX.NylasFeedbackForm & JSXBase.HTMLAttributes; /** * The `nylas-form-card` component is a card that can be used to display a form. It is a simple wrapper around a card with a header and content area. */ "nylas-form-card": LocalJSX.NylasFormCard & JSXBase.HTMLAttributes; /** * The `nylas-limit-future-bookings` component is a form input for the number of days in the future a guest is allowed to book an event. */ "nylas-limit-future-bookings": LocalJSX.NylasLimitFutureBookings & JSXBase.HTMLAttributes; /** * The `nylas-list-configurations` component displays a list of scheduling pages. */ "nylas-list-configurations": LocalJSX.NylasListConfigurations & JSXBase.HTMLAttributes; /** * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language. */ "nylas-locale-switch": LocalJSX.NylasLocaleSwitch & JSXBase.HTMLAttributes; "nylas-logo": LocalJSX.NylasLogo & JSXBase.HTMLAttributes; /** * The `nylas-min-booking-notice` component is a form input for the minimum period of notice (minutes) that a guest must * provide to book an event. */ "nylas-min-booking-notice": LocalJSX.NylasMinBookingNotice & JSXBase.HTMLAttributes; /** * The `nylas-min-cancellation-notice` component is a form input for the minimum period of notice (minutes) that a guest must * provide to cancel a booked event. */ "nylas-min-cancellation-notice": LocalJSX.NylasMinCancellationNotice & JSXBase.HTMLAttributes; /** * The `nylas-notification` component is a UI component that displays notifications. */ "nylas-notification": LocalJSX.NylasNotification & JSXBase.HTMLAttributes; /** * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card. */ "nylas-organizer-confirmation-card": LocalJSX.NylasOrganizerConfirmationCard & JSXBase.HTMLAttributes; /** * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker. */ "nylas-page-name": LocalJSX.NylasPageName & JSXBase.HTMLAttributes; /** * The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page. * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input * fields you want to display. The component will automatically update the appearance object when the input fields are changed. * Ensure that the input fields have the `name` attribute set to the key in the appearance object. * If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page. * The fields that can be customized in the Nylas hosted scheduler page are: * - Primary color: (name: color) * - Company logo: (name: company_logo_url) * - Submit button label: (name: submit_button_label) * - Thank you message: (name: thank_you_message) * This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component. */ "nylas-page-styling": LocalJSX.NylasPageStyling & JSXBase.HTMLAttributes; /** * The `nylas-participant-booking-calendars` component is a form input for selecting calendars to check availability for participants. */ "nylas-participant-booking-calendars": LocalJSX.NylasParticipantBookingCalendars & JSXBase.HTMLAttributes; /** * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants. */ "nylas-participants-custom-availability": LocalJSX.NylasParticipantsCustomAvailability & JSXBase.HTMLAttributes; /** * The `nylas-reminder-emails` component is a UI component that allows users to set buffer time before and after an event. */ "nylas-reminder-emails": LocalJSX.NylasReminderEmails & JSXBase.HTMLAttributes; /** * The `nylas-reminder-time` component is a form input for the reminder time before an event. */ "nylas-reminder-time": LocalJSX.NylasReminderTime & JSXBase.HTMLAttributes; /** * The `nylas-scheduler-editor` component is a form that allows users to configure the settings for the Nylas Scheduler. */ "nylas-scheduler-editor": LocalJSX.NylasSchedulerEditor & JSXBase.HTMLAttributes; /** * The `nylas-scheduling` component is used to display the Nylas Scheduling UI. */ "nylas-scheduling": LocalJSX.NylasScheduling & JSXBase.HTMLAttributes; /** * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker. */ "nylas-scheduling-method": LocalJSX.NylasSchedulingMethod & JSXBase.HTMLAttributes; /** * The `nylas-select-event-type` component is a UI component that allows users to select the event type for the scheduler configuration. */ "nylas-select-event-type": LocalJSX.NylasSelectEventType & JSXBase.HTMLAttributes; /** * The `nylas-selected-event-card` component is a UI component that displays the selected event card. */ "nylas-selected-event-card": LocalJSX.NylasSelectedEventCard & JSXBase.HTMLAttributes; /** * The `nylas-time-window-picker` component is a time picker that can be used to select a time. */ "nylas-time-window-picker": LocalJSX.NylasTimeWindowPicker & JSXBase.HTMLAttributes; /** * The `nylas-timeslot-interval` component allows users to set their time slot interval preferences. * This component provides an option to set both `interval_minutes` and `round_to` in the configuration. */ "nylas-timeslot-interval": LocalJSX.NylasTimeslotInterval & JSXBase.HTMLAttributes; /** * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots. */ "nylas-timeslot-picker": LocalJSX.NylasTimeslotPicker & JSXBase.HTMLAttributes; "paintbrush-fill-icon": LocalJSX.PaintbrushFillIcon & JSXBase.HTMLAttributes; "paintbrush-icon": LocalJSX.PaintbrushIcon & JSXBase.HTMLAttributes; "people-icon": LocalJSX.PeopleIcon & JSXBase.HTMLAttributes; "person-clipboard-icon": LocalJSX.PersonClipboardIcon & JSXBase.HTMLAttributes; "person-icon": LocalJSX.PersonIcon & JSXBase.HTMLAttributes; "play-icon": LocalJSX.PlayIcon & JSXBase.HTMLAttributes; "plus-icon": LocalJSX.PlusIcon & JSXBase.HTMLAttributes; /** * The `radio-button-group` component is a UI component that allows users to select a single option from a list of options. * This component is used in the scheduling form to input radio button type inputs. */ "radio-button-group": LocalJSX.RadioButtonGroup & JSXBase.HTMLAttributes; "refresh-icon": LocalJSX.RefreshIcon & JSXBase.HTMLAttributes; "reply-all-icon": LocalJSX.ReplyAllIcon & JSXBase.HTMLAttributes; "reply-icon": LocalJSX.ReplyIcon & JSXBase.HTMLAttributes; "search-icon": LocalJSX.SearchIcon & JSXBase.HTMLAttributes; /** * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options. * This component is used in the scheduling form to input dropdown type inputs. */ "select-dropdown": LocalJSX.SelectDropdown & JSXBase.HTMLAttributes; "sent-icon": LocalJSX.SentIcon & JSXBase.HTMLAttributes; "spam-icon": LocalJSX.SpamIcon & JSXBase.HTMLAttributes; "star-icon": LocalJSX.StarIcon & JSXBase.HTMLAttributes; "stop-icon": LocalJSX.StopIcon & JSXBase.HTMLAttributes; /** * `textarea-component` allows users to enter multiline text. * It is ideal for larger inputs like comments or messages in a form. * This component is used in the scheduling form to input multiline text. */ "textarea-component": LocalJSX.TextareaComponent & JSXBase.HTMLAttributes; /** * The time period selector component allows the user to select a time period and a number value for that time period. */ "time-period-selector": LocalJSX.TimePeriodSelector & JSXBase.HTMLAttributes; /** * The `toggle-switch` component is a UI component that allows users to toggle a switch. * This component is used in the scheduling form to input toggle switch type inputs. * Use it as a replacement for checkboxes when you want to present a switch in the UI. */ "toggle-switch": LocalJSX.ToggleSwitch & JSXBase.HTMLAttributes; /** * The `tooltip-component` component is a UI component that displays a tooltip. */ "tooltip-component": LocalJSX.TooltipComponent & JSXBase.HTMLAttributes; "translate-icon": LocalJSX.TranslateIcon & JSXBase.HTMLAttributes; "trash-fill-icon": LocalJSX.TrashFillIcon & JSXBase.HTMLAttributes; "trash-icon": LocalJSX.TrashIcon & JSXBase.HTMLAttributes; "underline-icon": LocalJSX.UnderlineIcon & JSXBase.HTMLAttributes; "warning-icon": LocalJSX.WarningIcon & JSXBase.HTMLAttributes; "zoom-icon": LocalJSX.ZoomIcon & JSXBase.HTMLAttributes; } } }