Types Documentation

PropKey

export type PropKey = string | number | symbol;

StoreKey

export type StoreKey = string;

StoreName

export type StoreName<T> = keyof T;

StateKey

export type StateKey = string;

ElementID

export type ElementID = string;

PropStateRegistration

export type PropStateRegistration = { elementId: ElementID; propKey: PropKey };

EventListenerRegistration

export type EventListenerRegistration = [HTMLElement, PropKey, (event: CustomEvent<any>) => Promise<void>];

NylasProviderInterface

export interface NylasProviderInterface<Stores extends Record<string, ObservableMap<any>>> {
  nylasConnector?: BaseNylasConnectorInterface;
  stores: Stores;
  host?: HTMLElement;
  automaticComponentRegistration: boolean;
  registeredComponents: Record<ElementID, RegisteredComponent<any, any>>;
  propStateRegistrations: Map<StoreName<this['stores']>, Map<StateKey, PropStateRegistration[]>>;
  eventListenerRegistrations: Map<ElementID, EventListenerRegistration[]>;
  componentWillLoad(nylasConnector: BaseNylasConnectorInterface): Promise<void>;
  componentDidLoad(): Promise<void>;
  componentDisconnected(): Promise<void>;
  getStore<K extends keyof ThisType<this['stores']>>(name: K): ThisType<this['stores']>[K];
  registerComponent(component: RegisteredComponent<any, any>): void;
  unregisterComponent(component: RegisteredComponent<any, any>): void;
}

EventOverride

export type EventOverride<Connector extends BaseNylasConnectorInterface> = Record<string, (event: CustomEvent<any>, connector?: Connector) => Promise<void>>;

SchedulerComponents

export type SchedulerComponents = NylasTimeslotPicker | NylasDatePicker | NylasLocaleSwitch | NylasBookingForm | NylasSelectedEventCard | NylasBookedEventCard;

NylasTimeslotPickerEventEmitterProperties

export type NylasTimeslotPickerEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasTimeslotPicker>, undefined>;

NylasDatePickerEventEmitterProperties

export type NylasDatePickerEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasDatePicker>, undefined>;

NylasLocaleSwitchEventEmitterProperties

export type NylasLocaleSwitchEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasLocaleSwitch>, undefined>;

NylasSchedulerAdditionalDataEventEmitterProperties

export type NylasSchedulerAdditionalDataEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasBookingForm>, undefined>;

NylasSelectedEventCardEventEmitterProperties

export type NylasSelectedEventCardEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasSelectedEventCard>, undefined>;

NylasBookedEventCardEventEmitterProperties

export type NylasBookedEventCardEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasBookedEventCard>, undefined>;

NylasBookingFormEventEmitterProperties

export type NylasBookingFormEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasBookingForm>, undefined>;

NylasCancelBookingFormEventEmitterProperties

export type NylasCancelBookingFormEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasCancelBookingForm>, undefined>;

NylasCancelledEventCardEventEmitterProperties

export type NylasCancelledEventCardEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasCancelledEventCard>, undefined>;

SchedulerEventEmitterProperties

export type SchedulerEventEmitterProperties =
  | NylasTimeslotPickerEventEmitterProperties
  | NylasDatePickerEventEmitterProperties
  | NylasLocaleSwitchEventEmitterProperties
  | NylasSchedulerAdditionalDataEventEmitterProperties
  | NylasSelectedEventCardEventEmitterProperties
  | NylasBookedEventCardEventEmitterProperties
  | NylasBookingFormEventEmitterProperties
  | NylasCancelBookingFormEventEmitterProperties
  | NylasCancelledEventCardEventEmitterProperties;

SchedulerEventOverride

export type SchedulerEventOverride = Partial<{
  [P in SchedulerEventEmitterProperties as P['key']]: (event: CustomEvent<P['eventType']>, connector?: NylasSchedulerConnectorInterface) => Promise<void>;
}> &
  EventOverride<NylasSchedulerConnectorInterface>;

NylasSchedulerEditorComponents

export type NylasSchedulerEditorComponents =
  | NylasAdditionalParticipants
  | NylasAvailabilityPicker
  | NylasBookingCalendarPicker
  | NylasBookingConfirmationRedirect
  | NylasBookingConfirmationType
  | NylasBookingFormConfig
  | NylasSchedulingMethod
  | NylasCalendarPicker
  | NylasCancellationPolicy
  | NylasConfirmationEmail
  | NylasConnectedCalendars
  | NylasCustomBookingFlow
  | NylasCustomizeBookingSettings
  | NylasEditorTabs
  | NylasEventDescription
  | NylasEventDuration
  | NylasEventLocation
  | NylasEventTitle
  | NylasLimitFutureBookings
  | NylasListConfigurations
  | NylasMinBookingNotice
  | NylasParticipantBookingCalendars
  | NylasParticipantsCustomAvailability
  | NylasReminderEmails
  | NylasReminderTime;

NylasEditorTabsEventEmitterProperties

export type NylasEditorTabsEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasEditorTabs>, undefined>;

NylasListConfigurationsEventEmitterProperties

export type NylasListConfigurationsEventEmitterProperties = Exclude<ExtractEventEmitterProperties<NylasListConfigurations>, undefined>;

NylasSchedulerEditorEventEmitterProperties

export type NylasSchedulerEditorEventEmitterProperties = NylasEditorTabsEventEmitterProperties | NylasListConfigurationsEventEmitterProperties;

SchedulerEditorEventOverride

export type SchedulerEditorEventOverride = Partial<{
  [P in NylasSchedulerEditorEventEmitterProperties as P['key']]: (event: CustomEvent<P['eventType']>, connector?: NylasSchedulerConfigConnectorInterface) => Promise<void>;
}> &
  EventOverride<NylasSchedulerConfigConnectorInterface>;

Locale

export type Locale = {
  noDateSelected: string;
  rescheduleTitle: string;
  days: {
    sunday: string;
    monday: string;
    tuesday: string;
    wednesday: string;
    thursday: string;
    friday: string;
    saturday: string;
  };
  time: {
    hour: string;
    hours: string;
    minute: string;
    minutes: string;
  };
  months: {
    january: string;
    february: string;
    march: string;
    april: string;
    may: string;
    june: string;
    july: string;
    august: string;
    september: string;
    october: string;
    november: string;
    december: string;
  };
  nextButton: string;
  selectedDayAndYear: string;
  selectedTime: string;
  name: string;
  namePlaceholder: string;
  email: string;
  emailPlaceholder: string;
  guestEmail: string;
  guestEmailPlaceholder: string;
  addGuest: string;
  addAnotherGuest: string;
  backButton: string;
  bookNowButton: string;
  bookingConfirmed: string;
  bookingConfirmedDescription: string;
  bookingSent: string;
  bookingSentDescription: string;
  bookingRescheduled: string;
  bookingDateAndTimeHeader: string;
  cancelBookingButton: string;
  rescheduleBookingButton: string;
  rejectBookingButton: string;
  confirmBookingButton: string;
  bookingPendingTitle: string;
  bookingPendingDescription: string;
  confirmedEventCardTitle: string;
  confirmedEventCardDescription: string;
  cancelBookingTitle: string;
  cancelBookingMessage: string;
  reasonForCancellation: string;
  goBackButton: string;
  bookingCancelledTitle: string;
  bookingCancelledMessage: string;
  closeButton: string;
  closingButton: string;
  fieldRequired: string;
  invalidInputFormat: string;
  createBookingErrorTitle: string;
  getAvailabilityErrorTitle: string;
  cancelBookingErrorTitle: string;
  rescheduleBookingErrorTitle: string;
  getUISettingErrorTitle: string;
  rejectBookingErrorTitle: string;
  confirmBookingErrorTitle: string;
  genericErrorTitle: string;
  schedulingComponentErrorTitle: string;
  sessionIdRequiredErrorMessage: string;
  publicConfigErrorMessage: string;
  invalidTimeslotErrorTitle: string;
  invalidTimeslotErrorMessage: string;
  cancellationErrorTitle: string;
  cancellationErrorMessage: string;
  minimumCancellationErrorMessage: string;
  cancelBokingFormError: string;
};

NylasRequestArgs

/**
 * Arguments for making a request to the Nylas API.
 */
export type NylasRequestArgs = {
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
  path: string;
  body?: any;
  headers?: Record<string, string>;
};

User

/**
 * A model representing a user in the Nylas Identity system.
 */
export type User = {
  id: string;
  email: string;
  name?: string;
  provider?: string;
};

AuthArgs

/**
 * Arguments for authenticating a user with the Nylas Identity system.
 */
export type AuthArgs = {
  /**
   * The provider of the user's email address.
   */
  provider?: string;
  /**
   * A list of permission scopes for the provider.
   */
  scope?: Array<string>;
  /**
   * The login hint associated with the user.
   */
  loginHint?: string;
  /**
   * Whether to include grant scopes in the auth exchange.
   */
  includeGrantScopes?: boolean;
  prompt?: string;
  metadata?: string;
  state?: string;
};

NylasTheme

export type NylasTheme = Partial<{
  '--nylas-color-primary-50': string;
  '--nylas-color-primary-100': string;
  '--nylas-color-primary-200': string;
  '--nylas-color-primary-300': string;
  '--nylas-color-primary-400': string;
  '--nylas-color-primary-500': string;
  '--nylas-color-primary-600': string;
  '--nylas-color-primary-700': string;
  '--nylas-color-primary-800': string;
  '--nylas-color-primary-900': string;
  '--nylas-color-primary-950': string;
}>;

RegisteredComponent

export interface RegisteredComponent<H extends ComponentInterface, B extends BaseNylasConnectorInterface, MailboxStores = string> {
  name: string;
  element: HTMLElement;
  getStoresToProp?: keyof H;
  storeToProps?: Map<string, keyof H>;
  stateToProps?: Map<MailboxStores, keyof H>;
  eventToProps?: Map<ExtractEventEmitterKeys<H>, (event: CustomEvent<EventEmitterEventType<H[ExtractEventEmitterKeys<H>]>>, nylasConnector: B) => Promise<void>>;
  localPropsToProp?: Map<string, keyof H>;
  authToProp?: keyof H;
  connectorToProp?: keyof H;
  registrationEventName?: string;
  unregistrationEventName?: string;
}

RegisterComponentConfig

export interface RegisterComponentConfig<H extends ComponentInterface, B extends BaseNylasConnectorInterface, MailboxStores>
  extends Omit<RegisteredComponent<H, B, MailboxStores>, 'eventToProps' | 'name' | 'element'> {
  name: string;
  eventToProps?: Partial<{
    [P in ExtractEventEmitterProperties<H> as P['key']]: (event: CustomEvent<P['eventType']>, nylasConnector: B) => Promise<void>;
  }>;
  fireRegisterEvent?: boolean;
}

NylasComponentInterface

export interface NylasComponentInterface extends ComponentInterface {
  authToProp?: keyof this;
  connectorToProp?: keyof this;
}

DataState

export type DataState = 'loading' | 'ready';

StoresType

type StoresType = unknown;

StoreInstances

type StoreInstances = {
  [K in keyof StoresType]: StoresType[K];
};

StoreStateKeys

type StoreStateKeys<T> = T extends { state: infer S } ? keyof S : never;

CombinedStoreStateKeys

/**
 * This type is used to create a union of all possible store state keys.
 * Example:
 * type CombinedStoreStateKeys = "nylas.messages" | "nylasTheme.colour"
 */
export type CombinedStoreStateKeys<SK extends keyof S, S = StoreInstances> = {
  [StoreKey in SK]: StoreStateKeys<S[StoreKey]> extends never | undefined ? never : `${StoreKey & string}.${StoreStateKeys<S[StoreKey]> & string}`;
}[SK];

InternalMessage

export type InternalMessage = {
  id: string;
  data: Message;
  collapse: boolean;
  showContactData: boolean;
};

InternalAttachment

export type InternalAttachment = {
  blob: Blob;
  filename: string;
  contentType: string;
  size: number;
  messageId: string;
};

MethodKeys

export type MethodKeys<T> = {
  [K in keyof T]: T[K] extends Function ? K : never;
}[keyof T];

AvailabilityTimeslot

// TODO: Move this to @nylas/core
export type AvailabilityTimeslot = {
  emails: string[];
  start_time: number;
  end_time: number;
};

AvailabilityResponse

export type AvailabilityResponse = {
  order?: string[];
  time_slots: AvailabilityTimeslot[];
  participants: {
    email: string;
    name: string;
  }[];
  duration: number;
};

UISettingsResponse

export type UISettingsResponse = {
  configuration_id: string;
  scheduler: {
    available_days_in_future: number;
    min_cancellation_notice: number;
    min_booking_notice: number;
    cancellation_policy: string;
  };
  organizer: {
    name: string;
    email: string;
  };
  slug: string;
  appearance: Appearance;
  booking_type: string;
  name: string;
};

ExtractEventEmitterKeys

// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types
export type ExtractEventEmitterKeys<T> = {
  [K in keyof T]: T[K] extends EventEmitter<any> ? K : never;
}[keyof T];

EventEmitterEventType

// Extracts the event type from an EventEmitter
export type EventEmitterEventType<T> = T extends EventEmitter<infer U> ? U : never;

ExtractEventEmitterProperties

// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types
export type ExtractEventEmitterProperties<T> = {
  [K in keyof T]: T[K] extends EventEmitter<infer U> ? { key: K; eventType: U } : never;
}[keyof T];

NylasEvent

export type NylasEvent = {
  booking_id: string;
  organizer: {
    email: string;
    name: string;
    is_organizer?: boolean;
  };
  title: string;
  description: string;
  status: string;
};

NylasSchedulerBookingParticipant

export type NylasSchedulerBookingParticipant = { name: string; email: string };

NylasSchedulerBookingData

export type NylasSchedulerBookingData = {
  primaryParticipant: NylasSchedulerBookingParticipant;
  startTime?: Date;
  endTime?: Date;
  timezone?: string;
  guests?: NylasSchedulerBookingParticipant[];
  additionalFields?: Record<
    string,
    {
      value: string;
      type: string;
    }
  >;
};

NylasSchedulerBookingDataWithFlatFields

/**
 * This type is used to book event and pass data to the redirect page.
 */
export type NylasSchedulerBookingDataWithFlatFields = Omit<NylasSchedulerBookingData, 'additionalFields'> & {
  additionalFields?: Record<string, string>;
};

DataResponseError

export type DataResponseError = Exclude<NylasErrorResponse['error'], undefined>;

DataResponseReturnType

export type DataResponseReturnType<T = any> = [T, null] | [null, DataResponseError];

AddCircleIcon

interface AddCircleIcon {
  height: string;
  width: string;
}

ArchiveIcon

interface ArchiveIcon {
  height: string;
  width: string;
}

ArrowIcon

interface ArrowIcon {
  height: string;
  width: string;
}

BoldIcon

interface BoldIcon {
  height: string;
  width: string;
}

ButtonComponent

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;
}

CalendarAgendaFillIcon

interface CalendarAgendaFillIcon {
  height: string;
  width: string;
}

CalendarAgendaIcon

interface CalendarAgendaIcon {
  height: string;
  width: string;
}

CalendarCancelIcon

interface CalendarCancelIcon {
  height: string;
  width: string;
}

CalendarCheckIcon

interface CalendarCheckIcon {
  height: string;
  width: string;
}

CalendarIcon

interface CalendarIcon {
  height: string;
  width: string;
}

CalendarInfoIcon

interface CalendarInfoIcon {
  height: string;
  width: string;
}

CalendarPatternsIcon

interface CalendarPatternsIcon {
  height: string;
  width: string;
}

CheckboxComponent

/**
 * 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;
  /**
   * 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;
}

CheckmarkCircleIcon

interface CheckmarkCircleIcon {
  height: string;
  width: string;
}

CheckmarkIcon

interface CheckmarkIcon {
  height: string;
  width: string;
}

ChevronIcon

interface ChevronIcon {
  height: string;
  width: string;
}

ClockIcon

interface ClockIcon {
  height: string;
  width: string;
}

CloseIcon

interface CloseIcon {
  height: string;
  width: string;
}

CopyIcon

interface CopyIcon {
  height: string;
  width: string;
}

DeleteIcon

interface DeleteIcon {
  height: string;
  width: string;
}

DocumentRefreshIcon

interface DocumentRefreshIcon {
  height: string;
  width: string;
}

DragableIcon

interface DragableIcon {
  height: string;
  width: string;
}

EditIcon

interface EditIcon {
  height: string;
  width: string;
}

EnvelopeFillIcon

interface EnvelopeFillIcon {
  height: string;
  width: string;
}

EnvelopeIcon

interface EnvelopeIcon {
  height: string;
  width: string;
}

EyeIcon

interface EyeIcon {
  height: string;
  width: string;
}

FeedbackIcon

interface FeedbackIcon {
  height: string;
  width: string;
}

FlowIcon

interface FlowIcon {
  height: string;
  width: string;
}

FolderIcon

interface FolderIcon {
  height: string;
  width: string;
}

ForwardIcon

interface ForwardIcon {
  height: string;
  width: string;
}

GlobeIcon

interface GlobeIcon {
  height: string;
  width: string;
}

GoogleLogoIcon

interface GoogleLogoIcon {
  height: string;
  width: string;
}

GoogleMeetIcon

interface GoogleMeetIcon {
  height: string;
  width: string;
}

InboxIcon

interface InboxIcon {
  height: string;
  width: string;
}

InfoIcon

interface InfoIcon {
  height: string;
  width: string;
}

InputColorPicker

/**
 * 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;
}

InputComponent

/**
 * 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;
  /**
   * 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 <field> format.' where <field> 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';
}

InputDropdown

/**
 * 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;
}

InputImageUrl

/**
 * 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;
}

ItalicIcon

interface ItalicIcon {
  height: string;
  width: string;
}

LoadingIcon

interface LoadingIcon {
  height: string;
  width: string;
}

LocationIcon

interface LocationIcon {
  height: string;
  width: string;
}

LocationOffIcon

interface LocationOffIcon {
  height: string;
  width: string;
}

MicrosoftLogoIcon

interface MicrosoftLogoIcon {
  height: string;
  width: string;
}

MicrosoftTeamsIcon

interface MicrosoftTeamsIcon {
  height: string;
  width: string;
}

MultiSelectDropdown

interface MultiSelectDropdown {
  /**
   * Error message to display
   */
  error?: string;
  /**
   * The label of the dropdown
   */
  label?: string;
  /**
   * The name of the dropdown
   */
  name: string;
  /**
   * The options to display in the dropdown
   */
  options: DropdownOption[];
}

NylasAdditionalParticipants

/**
 * 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 event participants
   */
  eventParticipants?: Participant[];
  /**
   * @standalone The name of the component
   */
  name: string;
  /**
   * @standalone The additional participants options from the config
   */
  participantOptions?: AdditionalParticipant[];
  /**
   * @standalone The selected config
   */
  selectedConfiguration?: Configuration;
}

NylasAvailabilityPicker

/**
 * 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;
}

NylasBookedEventCard

/**
 * 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;
  /**
   * @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;
}

NylasBookingCalendarPicker

/**
 * 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;
  /**
   * The prop to hide the header.
   */
  hideHeader: boolean;
  /**
   * @standalone The name of the calendar picker.
   */
  name: string;
}

NylasBookingConfirmationRedirect

/**
 * 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;
}

NylasBookingConfirmationType

/**
 * 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;
  /**
   * @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;
}

NylasBookingForm

/**
 * 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;
}

NylasBookingFormConfig

/**
 * 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.
   */
  additonalFields?: AdditionalFields[];
  /**
   * The name of the booking form config.
   */
  name: string;
  selectedConfiguration?: Configuration;
}

NylasBufferTime

/**
 * 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;
}

NylasCalendarPicker

/**
 * 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;
}

NylasCancelBookingForm

/**
 * 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;
  /**
   * The selected timeslot.
   */
  selectedTimeslot: Timeslot;
}

NylasCancellationPolicy

/**
 * 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;
}

NylasCancelledEventCard

/**
 * 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<NylasEvent1>;
  /**
   * @standalone The config settings for the scheduler.
   */
  configSettings?: ConfigSettings;
}

NylasConfirmationEmail

/**
 * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event.
 */
interface NylasConfirmationEmail {
  /**
   * The confirmation email template data to display
   */
  confirmationEmailTemplate: EmailTemplate;
  /**
   * Is the confirmation email card open
   */
  isOpen: boolean;
  /**
   * The name of the component
   */
  name: string;
  /**
   * List of participants
   */
  participants: Participant[];
  selectedConfiguration?: Configuration;
}

NylasConfirmedEventCard

/**
 * 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<NylasEvent1>;
}

NylasConnectedCalendars

/**
 * 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;
}

NylasCustomBookingFlow

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-booking-confirmation-type></nylas-booking-confirmation-type>
 *     <nylas-booking-confirmation-redirect></nylas-booking-confirmation-redirect>
 *   </div>
 * </nylas-custom-booking-flow>
 * ```
 */
interface NylasCustomBookingFlow {}

NylasCustomEventSlug

/**
 * 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;
  /**
   * Slug error message
   */
  slugErrorMessage: string;
}

NylasCustomizeBookingSettings

/**
 * 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;
}

NylasDatePicker

/**
 * 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?: string;
}

NylasEditorTabs

/**
 * 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';
  /**
   * @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;
}

NylasEventDescription

/**
 * 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;
  /**
   * @standalone The name of the event description input.
   */
  name: string;
  /**
   * @standalone The selected config
   */
  selectedConfiguration?: Configuration;
}

NylasEventDuration

/**
 * 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;
}

NylasEventInfo

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-event-title></nylas-event-title>
 *     <nylas-event-description></nylas-event-description>
 *     <nylas-event-duration></nylas-event-duration>
 *     <nylas-lcation-component></nylas-event-location>
 *   </div>
 * </nylas-event-info>
 * ```
 */
interface NylasEventInfo {}

NylasEventLimits

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-limit-future-bookings></nylas-limit-future-bookings>
 *     <nylas-min-cancellation-notice></nylas-min-cancellation-notice>
 *   </div>
 * </nylas-event-limits>
 * ```
 */
interface NylasEventLimits {}

NylasEventLocation

/**
 * 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<string, string>;
  /**
   * @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;
  /**
   * @standalone The users provider
   */
  userProvider?: string;
}

NylasEventTitle

/**
 * 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;
  /**
   * @standalone The selected config
   */
  selectedConfiguration?: Configuration;
}

NylasFeedbackForm

/**
 * The `nylas-feedback-form` component is a UI component that displays the booked event card.
 */
interface NylasFeedbackForm {}

NylasFormCard

/**
 * 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 {}

NylasIfState

interface NylasIfState {
  getStore?: <K extends keyof Stores>(name: K) => Stores[K];
  /**
   * If true, then the component will render if the state is true. This prop is used with the `state` prop.
   */
  isBoolean?: boolean;
  /**
   * If true, then the component will render if the state is set (empty or not set). This prop is used with the `state` prop.
   */
  isStateSet?: boolean;
  /**
   * The name of the state to watch.
   */
  state?: string;
  transition: Transitions;
}

NylasLimitFutureBookings

/**
 * 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;
}

NylasListConfigurations

/**
 * The `nylas-list-configurations` component displays a list of scheduling pages.
 */
interface NylasListConfigurations {
  /**
   * The list of configurations to display.
   */
  configurations: Configuration[];
  getState: () => Promise<'loading' | 'error' | 'loaded'>;
  /**
   * The next cursor for list configurations, if any.
   */
  listConfigurationsNextCursor?: string | null;
  /**
   * 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;
  setError: (error: string) => Promise<void>;
  setState: (state: 'loading' | 'loaded' | 'error') => Promise<void>;
}

NylasLocaleSwitch

/**
 * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.
 */
interface NylasLocaleSwitch {
  /**
   * The selected language.
   */
  selectedLanguage: string;
  /**
   * The selected timezone.
   */
  selectedTimezone: string;
}

NylasLogin

interface NylasLogin {
  buttonText: string;
  companyName: string;
  isAuthenticated: boolean;
  loginMethod: 'redirect' | 'emebded';
  logoUrl: string;
  logoWidth?: string;
  nylasConnector?: NylasAuthConnectorInterface;
  providers?: string;
  scopes?: string[];
}

NylasLogo

interface NylasLogo {
  height: string;
  width: string;
}

NylasMinBookingNotice

/**
 * 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;
}

NylasMinCancellationNotice

/**
 * 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;
}

NylasNotification

/**
 * 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';
}

NylasOrganizerConfirmationCard

/**
 * 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<void>;
  /**
   * The selected language.
   */
  selectedLanguage: string;
}

NylasPageName

/**
 * 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;
  /**
   * @standalone The selected config
   */
  selectedConfiguration?: Configuration;
  /**
   * @standalone Show toggle button that allows users to expand or collapse the card
   */
  showToggle: boolean;
}

NylasPageStyling

/**
 * 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;
}

NylasParticipantBookingCalendars

/**
 * 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;
}

NylasParticipantsCustomAvailability

/**
 * 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;
}

NylasProvider

/**
 * The Nylas Provider component.
 * This component is used to manage the Nylas Provider.
 * It is used to manage the Nylas Auth instance, the Nylas Connector instance,
 * and the Nylas Store instance.
 */
interface NylasProvider {
  /**
   * The Nylas Auth configuration. Used to manage all things authentication with Nylas.
   */
  authConfig?: AuthConfig;
  /**
   * Automatically register components that have the `@RegisterComponent` decorator. If this is set to false, you will need to manually register components using the `registerComponent` method.
   * @default true
   */
  automaticComponentRegistration: boolean;
  /**
   * This provides a way to override the default event handlers.
   */
  eventOverrides: EventOverride<Exclude<typeof this.nylasConnector, undefined>>;
  /**
   * This method is used to retrieve the authStore instance
   * @returns The authStore instance
   */
  getAuthStore: () => Promise<NylasAuthStoreType | undefined>;
  /**
   * This method is used to retrieve the NylasAuth instance
   * @returns The NylasAuth instance
   */
  getNylasAuth: () => Promise<NylasAuthType | undefined>;
  /**
   * This method is used to retrieve the NylasConnector instance
   * @returns The NylasConnector instance
   */
  getNylasConnector: () => Promise<NylasConnector | undefined>;
  /**
   * This method is used to retrieve the NylasSchedulerConfig instance
   * @returns The NylasSchedulerConfig instance
   */
  getNylasSchedulerConfigStore: () => Promise<NylasSchedulerConfigStoreType | undefined>;
  /**
   * This method is used to retrieve the NylasScheduler instance
   * @returns The NylasScheduler instance
   */
  getNylasSchedulerStore: () => Promise<NylasSchedulerStoreType | undefined>;
}

NylasReminderEmails

/**
 * The `nylas-reminder-emails` component is a UI component that allows users to set buffer time before and after an event.
 */
interface NylasReminderEmails {
  /**
   * The name of the component
   */
  name: string;
  /**
   * The selected configuration.
   */
  selectedConfiguration?: Configuration;
}

NylasReminderTime

/**
 * 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;
}

NylasSchedulerEditor

/**
 * 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<string, string>;
  /**
   * * 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[];
  /**
   * 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<NylasSchedulerConfigStoreState>;
  /**
   * 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 optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm
   */
  hideEditorTabs?: Tab[];
  /**
   * 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;
  /**
   * 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/<YOUR_NYLAS_APP_CLIENT_ID>/{slug}`. `us` denotes the region. Replace it with the appropriate region of your application. Replace `<YOUR_NYLAS_APP_CLIENT_ID>` 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<NylasSchedulerConfigConnector | undefined>
   */
  schedulerConnector: () => Promise<NylasSchedulerConfigConnector | undefined>;
  /**
   * 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/<YOUR_NYLAS_APP_CLIENT_ID>/{slug}`. `us` denotes the region. Replace it with the appropriate region of your application. Replace `<YOUR_NYLAS_APP_CLIENT_ID>` 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<NylasSchedulerConfigStoreType | undefined>
   */
  store: () => Promise<NylasSchedulerConfigStoreType | undefined>;
}

NylasScheduling

/**
 * 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?: NylasSchedulerBookingData2;
  /**
   * 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;
  /**
   * The default scheduler store state. Used to set the initial state of the scheduler store.
   */
  defaultSchedulerState?: Partial<NylasSchedulerStoreState>;
  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 <nylas-scheduling eventOverride={{"timeslotConfirmed": (event, nylasConnector) => { console.log("Timeslot confirmed event fired!"); } }} /> ```
   */
  eventOverrides: SchedulerEventOverride;
  /**
   * This method is used to retrieve the NylasConnector instance
   * @returns The NylasConnector instance
   */
  getNylasSchedulerConnector: () => Promise<NylasSchedulerConnector | undefined>;
  /**
   * This method is used to retrieve the NylasScheduler instance
   * @returns The NylasScheduler instance
   */
  getNylasSchedulerStore: () => Promise<NylasSchedulerStoreType | undefined>;
  getRef: () => Promise<HTMLNylasSchedulingElement>;
  /**
   * 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<Record<LANGUAGE_CODE, Locale>>;
  /**
   * 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;
}

NylasSchedulingMethod

/**
 * 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;
}

NylasSelectedEventCard

/**
 * The `nylas-selected-event-card` component is a UI component that displays the selected event card.
 */
interface NylasSelectedEventCard {
  /**
   * The selected date.
   */
  selectedDate?: Date;
  /**
   * The selected language.
   */
  selectedLanguage?: string;
  /**
   * The selected time.
   */
  selectedTimeslot?: Timeslot;
  /**
   * The selected timezone.
   */
  selectedTimezone: string;
}

NylasTimeWindowPicker

/**
 * 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;
  /**
   * 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 and can be updated using the setTime prop function provided by the parent component.
   */
  time: string;
}

NylasTimeslotInterval

/**
 * 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;
}

NylasTimeslotPicker

/**
 * 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[];
  /**
   * @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;
}

PaintbrushFillIcon

interface PaintbrushFillIcon {
  height: string;
  width: string;
}

PaintbrushIcon

interface PaintbrushIcon {
  height: string;
  width: string;
}

PeopleIcon

interface PeopleIcon {
  height: string;
  width: string;
}

PersonClipboardIcon

interface PersonClipboardIcon {
  height: string;
  width: string;
}

PersonIcon

interface PersonIcon {
  height: string;
  width: string;
}

PlayIcon

interface PlayIcon {
  height: string;
  width: string;
}

PlusIcon

interface PlusIcon {
  height: string;
  width: string;
}

RadioButtonGroup

/**
 * 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 }[];
  /**
   * 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;
}

RefreshIcon

interface RefreshIcon {
  height: string;
  width: string;
}

ReplyAllIcon

interface ReplyAllIcon {
  height: string;
  width: string;
}

ReplyIcon

interface ReplyIcon {
  height: string;
  width: string;
}

SearchIcon

interface SearchIcon {
  height: string;
  width: string;
}

SelectDropdown

/**
 * 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;
  /**
   * 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;
  /**
   * If true, the dropdown is required for form submission
   */
  required: boolean;
  /**
   * Should show chevron on button
   */
  withChevron: boolean;
  /**
   * Should show search input
   */
  withSearch: boolean;
}

SentIcon

interface SentIcon {
  height: string;
  width: string;
}

SpamIcon

interface SpamIcon {
  height: string;
  width: string;
}

StarIcon

interface StarIcon {
  height: string;
  width: string;
}

StopIcon

interface StopIcon {
  height: string;
  width: string;
}

TextareaComponent

/**
 * `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;
}

TimePeriodSelector

interface TimePeriodSelector {
  /**
   * The default selected number.
   */
  defaultSelectedNumber: number;
  /**
   * The default selected time period.
   */
  defaultSelectedPeriod: string;
  timePeriods: string[];
}

ToggleSwitch

/**
 * 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;
}

TooltipComponent

/**
 * The `tooltip-component` component is a UI component that displays a tooltip.
 */
interface TooltipComponent {
  /**
   * The position of the tooltip.
   */
  position: 'top' | 'bottom' | 'left' | 'right';
}

TranslateIcon

interface TranslateIcon {
  height: string;
  width: string;
}

TrashFillIcon

interface TrashFillIcon {
  height: string;
  width: string;
}

TrashIcon

interface TrashIcon {
  height: string;
  width: string;
}

UnderlineIcon

interface UnderlineIcon {
  height: string;
  width: string;
}

WarningIcon

interface WarningIcon {
  height: string;
  width: string;
}

ZoomIcon

interface ZoomIcon {
  height: string;
  width: string;
}

CheckboxComponentCustomEvent

export interface CheckboxComponentCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLCheckboxComponentElement;
}

InputColorPickerCustomEvent

export interface InputColorPickerCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLInputColorPickerElement;
}

InputComponentCustomEvent

export interface InputComponentCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLInputComponentElement;
}

InputDropdownCustomEvent

export interface InputDropdownCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLInputDropdownElement;
}

InputImageUrlCustomEvent

export interface InputImageUrlCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLInputImageUrlElement;
}

MultiSelectDropdownCustomEvent

export interface MultiSelectDropdownCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLMultiSelectDropdownElement;
}

NylasAdditionalParticipantsCustomEvent

export interface NylasAdditionalParticipantsCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasAdditionalParticipantsElement;
}

NylasAvailabilityPickerCustomEvent

export interface NylasAvailabilityPickerCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasAvailabilityPickerElement;
}

NylasBookedEventCardCustomEvent

export interface NylasBookedEventCardCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasBookedEventCardElement;
}

NylasBookingCalendarPickerCustomEvent

export interface NylasBookingCalendarPickerCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasBookingCalendarPickerElement;
}

NylasBookingConfirmationRedirectCustomEvent

export interface NylasBookingConfirmationRedirectCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasBookingConfirmationRedirectElement;
}

NylasBookingConfirmationTypeCustomEvent

export interface NylasBookingConfirmationTypeCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasBookingConfirmationTypeElement;
}

NylasBookingFormCustomEvent

export interface NylasBookingFormCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasBookingFormElement;
}

NylasBookingFormConfigCustomEvent

export interface NylasBookingFormConfigCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasBookingFormConfigElement;
}

NylasBufferTimeCustomEvent

export interface NylasBufferTimeCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasBufferTimeElement;
}

NylasCalendarPickerCustomEvent

export interface NylasCalendarPickerCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasCalendarPickerElement;
}

NylasCancelBookingFormCustomEvent

export interface NylasCancelBookingFormCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasCancelBookingFormElement;
}

NylasCancellationPolicyCustomEvent

export interface NylasCancellationPolicyCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasCancellationPolicyElement;
}

NylasCancelledEventCardCustomEvent

export interface NylasCancelledEventCardCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasCancelledEventCardElement;
}

NylasConfirmationEmailCustomEvent

export interface NylasConfirmationEmailCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasConfirmationEmailElement;
}

NylasConfirmedEventCardCustomEvent

export interface NylasConfirmedEventCardCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasConfirmedEventCardElement;
}

NylasConnectedCalendarsCustomEvent

export interface NylasConnectedCalendarsCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasConnectedCalendarsElement;
}

NylasCustomEventSlugCustomEvent

export interface NylasCustomEventSlugCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasCustomEventSlugElement;
}

NylasCustomizeBookingSettingsCustomEvent

export interface NylasCustomizeBookingSettingsCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasCustomizeBookingSettingsElement;
}

NylasDatePickerCustomEvent

export interface NylasDatePickerCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasDatePickerElement;
}

NylasEditorTabsCustomEvent

export interface NylasEditorTabsCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasEditorTabsElement;
}

NylasEventDescriptionCustomEvent

export interface NylasEventDescriptionCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasEventDescriptionElement;
}

NylasEventDurationCustomEvent

export interface NylasEventDurationCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasEventDurationElement;
}

NylasEventLocationCustomEvent

export interface NylasEventLocationCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasEventLocationElement;
}

NylasEventTitleCustomEvent

export interface NylasEventTitleCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasEventTitleElement;
}

NylasFeedbackFormCustomEvent

export interface NylasFeedbackFormCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasFeedbackFormElement;
}

NylasLimitFutureBookingsCustomEvent

export interface NylasLimitFutureBookingsCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasLimitFutureBookingsElement;
}

NylasListConfigurationsCustomEvent

export interface NylasListConfigurationsCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasListConfigurationsElement;
}

NylasLocaleSwitchCustomEvent

export interface NylasLocaleSwitchCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasLocaleSwitchElement;
}

NylasLoginCustomEvent

export interface NylasLoginCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasLoginElement;
}

NylasMinBookingNoticeCustomEvent

export interface NylasMinBookingNoticeCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasMinBookingNoticeElement;
}

NylasMinCancellationNoticeCustomEvent

export interface NylasMinCancellationNoticeCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasMinCancellationNoticeElement;
}

NylasOrganizerConfirmationCardCustomEvent

export interface NylasOrganizerConfirmationCardCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasOrganizerConfirmationCardElement;
}

NylasPageNameCustomEvent

export interface NylasPageNameCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasPageNameElement;
}

NylasPageStylingCustomEvent

export interface NylasPageStylingCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasPageStylingElement;
}

NylasParticipantBookingCalendarsCustomEvent

export interface NylasParticipantBookingCalendarsCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasParticipantBookingCalendarsElement;
}

NylasParticipantsCustomAvailabilityCustomEvent

export interface NylasParticipantsCustomAvailabilityCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasParticipantsCustomAvailabilityElement;
}

NylasProviderCustomEvent

export interface NylasProviderCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasProviderElement;
}

NylasReminderEmailsCustomEvent

export interface NylasReminderEmailsCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasReminderEmailsElement;
}

NylasReminderTimeCustomEvent

export interface NylasReminderTimeCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasReminderTimeElement;
}

NylasSchedulerEditorCustomEvent

export interface NylasSchedulerEditorCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasSchedulerEditorElement;
}

NylasSchedulingCustomEvent

export interface NylasSchedulingCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasSchedulingElement;
}

NylasSchedulingMethodCustomEvent

export interface NylasSchedulingMethodCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasSchedulingMethodElement;
}

NylasTimeWindowPickerCustomEvent

export interface NylasTimeWindowPickerCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasTimeWindowPickerElement;
}

NylasTimeslotIntervalCustomEvent

export interface NylasTimeslotIntervalCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasTimeslotIntervalElement;
}

NylasTimeslotPickerCustomEvent

export interface NylasTimeslotPickerCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLNylasTimeslotPickerElement;
}

RadioButtonGroupCustomEvent

export interface RadioButtonGroupCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLRadioButtonGroupElement;
}

SelectDropdownCustomEvent

export interface SelectDropdownCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLSelectDropdownElement;
}

TextareaComponentCustomEvent

export interface TextareaComponentCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLTextareaComponentElement;
}

TimePeriodSelectorCustomEvent

export interface TimePeriodSelectorCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLTimePeriodSelectorElement;
}

ToggleSwitchCustomEvent

export interface ToggleSwitchCustomEvent<T> extends CustomEvent<T> {
  detail: T;
  target: HTMLToggleSwitchElement;
}

HTMLAddCircleIconElement

interface HTMLAddCircleIconElement extends Components.AddCircleIcon, HTMLStencilElement {}

HTMLArchiveIconElement

interface HTMLArchiveIconElement extends Components.ArchiveIcon, HTMLStencilElement {}

HTMLArrowIconElement

interface HTMLArrowIconElement extends Components.ArrowIcon, HTMLStencilElement {}

HTMLBoldIconElement

interface HTMLBoldIconElement extends Components.BoldIcon, HTMLStencilElement {}

HTMLButtonComponentElement

interface HTMLButtonComponentElement extends Components.ButtonComponent, HTMLStencilElement {}

HTMLCalendarAgendaFillIconElement

interface HTMLCalendarAgendaFillIconElement extends Components.CalendarAgendaFillIcon, HTMLStencilElement {}

HTMLCalendarAgendaIconElement

interface HTMLCalendarAgendaIconElement extends Components.CalendarAgendaIcon, HTMLStencilElement {}

HTMLCalendarCancelIconElement

interface HTMLCalendarCancelIconElement extends Components.CalendarCancelIcon, HTMLStencilElement {}

HTMLCalendarCheckIconElement

interface HTMLCalendarCheckIconElement extends Components.CalendarCheckIcon, HTMLStencilElement {}

HTMLCalendarIconElement

interface HTMLCalendarIconElement extends Components.CalendarIcon, HTMLStencilElement {}

HTMLCalendarInfoIconElement

interface HTMLCalendarInfoIconElement extends Components.CalendarInfoIcon, HTMLStencilElement {}

HTMLCalendarPatternsIconElement

interface HTMLCalendarPatternsIconElement extends Components.CalendarPatternsIcon, HTMLStencilElement {}

HTMLCheckboxComponentElementEventMap

interface HTMLCheckboxComponentElementEventMap {
  nylasFormCheckboxToggled: {
    checked: boolean;
    name: string;
    label: string;
  };
}

HTMLCheckboxComponentElement

/**
 * 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<K extends keyof HTMLCheckboxComponentElementEventMap>(
    type: K,
    listener: (this: HTMLCheckboxComponentElement, ev: CheckboxComponentCustomEvent<HTMLCheckboxComponentElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLCheckboxComponentElementEventMap>(
    type: K,
    listener: (this: HTMLCheckboxComponentElement, ev: CheckboxComponentCustomEvent<HTMLCheckboxComponentElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLCheckmarkCircleIconElement

interface HTMLCheckmarkCircleIconElement extends Components.CheckmarkCircleIcon, HTMLStencilElement {}

HTMLCheckmarkIconElement

interface HTMLCheckmarkIconElement extends Components.CheckmarkIcon, HTMLStencilElement {}

HTMLChevronIconElement

interface HTMLChevronIconElement extends Components.ChevronIcon, HTMLStencilElement {}

HTMLClockIconElement

interface HTMLClockIconElement extends Components.ClockIcon, HTMLStencilElement {}

HTMLCloseIconElement

interface HTMLCloseIconElement extends Components.CloseIcon, HTMLStencilElement {}

HTMLCopyIconElement

interface HTMLCopyIconElement extends Components.CopyIcon, HTMLStencilElement {}

HTMLDeleteIconElement

interface HTMLDeleteIconElement extends Components.DeleteIcon, HTMLStencilElement {}

HTMLDocumentRefreshIconElement

interface HTMLDocumentRefreshIconElement extends Components.DocumentRefreshIcon, HTMLStencilElement {}

HTMLDragableIconElement

interface HTMLDragableIconElement extends Components.DragableIcon, HTMLStencilElement {}

HTMLEditIconElement

interface HTMLEditIconElement extends Components.EditIcon, HTMLStencilElement {}

HTMLEnvelopeFillIconElement

interface HTMLEnvelopeFillIconElement extends Components.EnvelopeFillIcon, HTMLStencilElement {}

HTMLEnvelopeIconElement

interface HTMLEnvelopeIconElement extends Components.EnvelopeIcon, HTMLStencilElement {}

HTMLEyeIconElement

interface HTMLEyeIconElement extends Components.EyeIcon, HTMLStencilElement {}

HTMLFeedbackIconElement

interface HTMLFeedbackIconElement extends Components.FeedbackIcon, HTMLStencilElement {}

HTMLFlowIconElement

interface HTMLFlowIconElement extends Components.FlowIcon, HTMLStencilElement {}

HTMLFolderIconElement

interface HTMLFolderIconElement extends Components.FolderIcon, HTMLStencilElement {}

HTMLForwardIconElement

interface HTMLForwardIconElement extends Components.ForwardIcon, HTMLStencilElement {}

HTMLGlobeIconElement

interface HTMLGlobeIconElement extends Components.GlobeIcon, HTMLStencilElement {}

HTMLGoogleLogoIconElement

interface HTMLGoogleLogoIconElement extends Components.GoogleLogoIcon, HTMLStencilElement {}

HTMLGoogleMeetIconElement

interface HTMLGoogleMeetIconElement extends Components.GoogleMeetIcon, HTMLStencilElement {}

HTMLInboxIconElement

interface HTMLInboxIconElement extends Components.InboxIcon, HTMLStencilElement {}

HTMLInfoIconElement

interface HTMLInfoIconElement extends Components.InfoIcon, HTMLStencilElement {}

HTMLInputColorPickerElementEventMap

interface HTMLInputColorPickerElementEventMap {
  nylasFormDropdownChanged: {
    value: string;
    name: string;
    error?: string;
    label?: string;
  };
}

HTMLInputColorPickerElement

/**
 * 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<K extends keyof HTMLInputColorPickerElementEventMap>(
    type: K,
    listener: (this: HTMLInputColorPickerElement, ev: InputColorPickerCustomEvent<HTMLInputColorPickerElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLInputColorPickerElementEventMap>(
    type: K,
    listener: (this: HTMLInputColorPickerElement, ev: InputColorPickerCustomEvent<HTMLInputColorPickerElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLInputComponentElementEventMap

interface HTMLInputComponentElementEventMap {
  nylasFormInputChanged: {
    value: string;
    name: string;
    label: string;
    type: string;
    error: string;
  };
  nylasFormInputFocused: {
    value: string;
    name: string;
  };
  nylasFormInputBlurred: {
    value: string;
    name: string;
  };
}

HTMLInputComponentElement

/**
 * 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<K extends keyof HTMLInputComponentElementEventMap>(
    type: K,
    listener: (this: HTMLInputComponentElement, ev: InputComponentCustomEvent<HTMLInputComponentElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLInputComponentElementEventMap>(
    type: K,
    listener: (this: HTMLInputComponentElement, ev: InputComponentCustomEvent<HTMLInputComponentElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLInputDropdownElementEventMap

interface HTMLInputDropdownElementEventMap {
  inputOptionChanged: {
    value: DropdownOption['value'];
    name: string;
  };
}

HTMLInputDropdownElement

/**
 * 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<K extends keyof HTMLInputDropdownElementEventMap>(
    type: K,
    listener: (this: HTMLInputDropdownElement, ev: InputDropdownCustomEvent<HTMLInputDropdownElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLInputDropdownElementEventMap>(
    type: K,
    listener: (this: HTMLInputDropdownElement, ev: InputDropdownCustomEvent<HTMLInputDropdownElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLInputImageUrlElementEventMap

interface HTMLInputImageUrlElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLInputImageUrlElement

/**
 * 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<K extends keyof HTMLInputImageUrlElementEventMap>(
    type: K,
    listener: (this: HTMLInputImageUrlElement, ev: InputImageUrlCustomEvent<HTMLInputImageUrlElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLInputImageUrlElementEventMap>(
    type: K,
    listener: (this: HTMLInputImageUrlElement, ev: InputImageUrlCustomEvent<HTMLInputImageUrlElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLItalicIconElement

interface HTMLItalicIconElement extends Components.ItalicIcon, HTMLStencilElement {}

HTMLLoadingIconElement

interface HTMLLoadingIconElement extends Components.LoadingIcon, HTMLStencilElement {}

HTMLLocationIconElement

interface HTMLLocationIconElement extends Components.LocationIcon, HTMLStencilElement {}

HTMLLocationOffIconElement

interface HTMLLocationOffIconElement extends Components.LocationOffIcon, HTMLStencilElement {}

HTMLMicrosoftLogoIconElement

interface HTMLMicrosoftLogoIconElement extends Components.MicrosoftLogoIcon, HTMLStencilElement {}

HTMLMicrosoftTeamsIconElement

interface HTMLMicrosoftTeamsIconElement extends Components.MicrosoftTeamsIcon, HTMLStencilElement {}

HTMLMultiSelectDropdownElementEventMap

interface HTMLMultiSelectDropdownElementEventMap {
  selectedOptionsChanged: {
    value: string[];
    name: string;
  };
}

HTMLMultiSelectDropdownElement

interface HTMLMultiSelectDropdownElement extends Components.MultiSelectDropdown, HTMLStencilElement {
  addEventListener<K extends keyof HTMLMultiSelectDropdownElementEventMap>(
    type: K,
    listener: (this: HTMLMultiSelectDropdownElement, ev: MultiSelectDropdownCustomEvent<HTMLMultiSelectDropdownElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLMultiSelectDropdownElementEventMap>(
    type: K,
    listener: (this: HTMLMultiSelectDropdownElement, ev: MultiSelectDropdownCustomEvent<HTMLMultiSelectDropdownElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasAdditionalParticipantsElementEventMap

interface HTMLNylasAdditionalParticipantsElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasAdditionalParticipantsElement

/**
 * The `nylas-additional-participants` component is a form input for adding additional participants to an event.
 */
interface HTMLNylasAdditionalParticipantsElement extends Components.NylasAdditionalParticipants, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasAdditionalParticipantsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasAdditionalParticipantsElement, ev: NylasAdditionalParticipantsCustomEvent<HTMLNylasAdditionalParticipantsElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasAdditionalParticipantsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasAdditionalParticipantsElement, ev: NylasAdditionalParticipantsCustomEvent<HTMLNylasAdditionalParticipantsElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasAvailabilityPickerElementEventMap

interface HTMLNylasAvailabilityPickerElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasAvailabilityPickerElement

/**
 * The `nylas-availability-picker` component is a form input for selecting availability (open hours).
 */
interface HTMLNylasAvailabilityPickerElement extends Components.NylasAvailabilityPicker, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasAvailabilityPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasAvailabilityPickerElement, ev: NylasAvailabilityPickerCustomEvent<HTMLNylasAvailabilityPickerElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasAvailabilityPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasAvailabilityPickerElement, ev: NylasAvailabilityPickerCustomEvent<HTMLNylasAvailabilityPickerElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasBookedEventCardElementEventMap

interface HTMLNylasBookedEventCardElementEventMap {
  cancelBookingButtonClicked: { bookingId: string };
  rescheduleButtonClicked: { bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void };
  rescheduleBookedEventError: NylasSchedulerErrorResponse;
  cancelBookedEventValidationError: {
    error: {
      title: string;
      message: string;
    };
  };
}

HTMLNylasBookedEventCardElement

/**
 * The `nylas-booked-event-card` component is a UI component that displays the booked event card.
 */
interface HTMLNylasBookedEventCardElement extends Components.NylasBookedEventCard, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasBookedEventCardElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookedEventCardElement, ev: NylasBookedEventCardCustomEvent<HTMLNylasBookedEventCardElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasBookedEventCardElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookedEventCardElement, ev: NylasBookedEventCardCustomEvent<HTMLNylasBookedEventCardElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasBookingCalendarPickerElementEventMap

interface HTMLNylasBookingCalendarPickerElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasBookingCalendarPickerElement

/**
 * The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.
 */
interface HTMLNylasBookingCalendarPickerElement extends Components.NylasBookingCalendarPicker, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasBookingCalendarPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingCalendarPickerElement, ev: NylasBookingCalendarPickerCustomEvent<HTMLNylasBookingCalendarPickerElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasBookingCalendarPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingCalendarPickerElement, ev: NylasBookingCalendarPickerCustomEvent<HTMLNylasBookingCalendarPickerElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasBookingConfirmationRedirectElementEventMap

interface HTMLNylasBookingConfirmationRedirectElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasBookingConfirmationRedirectElement

/**
 * 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<K extends keyof HTMLNylasBookingConfirmationRedirectElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingConfirmationRedirectElement, ev: NylasBookingConfirmationRedirectCustomEvent<HTMLNylasBookingConfirmationRedirectElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasBookingConfirmationRedirectElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingConfirmationRedirectElement, ev: NylasBookingConfirmationRedirectCustomEvent<HTMLNylasBookingConfirmationRedirectElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasBookingConfirmationTypeElementEventMap

interface HTMLNylasBookingConfirmationTypeElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasBookingConfirmationTypeElement

/**
 * 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<K extends keyof HTMLNylasBookingConfirmationTypeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingConfirmationTypeElement, ev: NylasBookingConfirmationTypeCustomEvent<HTMLNylasBookingConfirmationTypeElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasBookingConfirmationTypeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingConfirmationTypeElement, ev: NylasBookingConfirmationTypeCustomEvent<HTMLNylasBookingConfirmationTypeElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasBookingFormElementEventMap

interface HTMLNylasBookingFormElementEventMap {
  nameChanged: string;
  emailChanged: string;
  backButtonClicked: boolean;
  detailsConfirmed: NylasSchedulerBookingDataWithFlatFields;
  bookingFormError: Partial<Notification>;
  bookingFormSubmitted: void;
}

HTMLNylasBookingFormElement

/**
 * 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<K extends keyof HTMLNylasBookingFormElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingFormElement, ev: NylasBookingFormCustomEvent<HTMLNylasBookingFormElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasBookingFormElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingFormElement, ev: NylasBookingFormCustomEvent<HTMLNylasBookingFormElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasBookingFormConfigElementEventMap

interface HTMLNylasBookingFormConfigElementEventMap {
  valueChanged: {
    value: Record<string, AdditionalFields>;
    name: string;
  };
}

HTMLNylasBookingFormConfigElement

/**
 * 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<K extends keyof HTMLNylasBookingFormConfigElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingFormConfigElement, ev: NylasBookingFormConfigCustomEvent<HTMLNylasBookingFormConfigElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasBookingFormConfigElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBookingFormConfigElement, ev: NylasBookingFormConfigCustomEvent<HTMLNylasBookingFormConfigElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasBufferTimeElementEventMap

interface HTMLNylasBufferTimeElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasBufferTimeElement

/**
 * 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<K extends keyof HTMLNylasBufferTimeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBufferTimeElement, ev: NylasBufferTimeCustomEvent<HTMLNylasBufferTimeElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasBufferTimeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasBufferTimeElement, ev: NylasBufferTimeCustomEvent<HTMLNylasBufferTimeElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasCalendarPickerElementEventMap

interface HTMLNylasCalendarPickerElementEventMap {
  valueChanged: {
    value: string[];
    name: string;
    valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void;
  };
}

HTMLNylasCalendarPickerElement

/**
 * The `nylas-calendar-picker` component is a form input for selecting calendars to check availability.
 */
interface HTMLNylasCalendarPickerElement extends Components.NylasCalendarPicker, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasCalendarPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCalendarPickerElement, ev: NylasCalendarPickerCustomEvent<HTMLNylasCalendarPickerElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasCalendarPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCalendarPickerElement, ev: NylasCalendarPickerCustomEvent<HTMLNylasCalendarPickerElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasCancelBookingFormElementEventMap

interface HTMLNylasCancelBookingFormElementEventMap {
  goBackButtonClicked: void;
  cancelBookingFormSubmitted: {
    bookingId: string;
    action: 'reject' | 'cancel';
    reason: string;
    errorHandler?: (error: NylasSchedulerErrorResponse) => void;
  };
  triggerValidation: {};
  cancelBookedEventError: NylasSchedulerErrorResponse;
  cancelBookingFormError: Partial<Notification>;
}

HTMLNylasCancelBookingFormElement

/**
 * 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<K extends keyof HTMLNylasCancelBookingFormElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCancelBookingFormElement, ev: NylasCancelBookingFormCustomEvent<HTMLNylasCancelBookingFormElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasCancelBookingFormElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCancelBookingFormElement, ev: NylasCancelBookingFormCustomEvent<HTMLNylasCancelBookingFormElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasCancellationPolicyElementEventMap

interface HTMLNylasCancellationPolicyElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasCancellationPolicyElement

/**
 * The `nylas-cancellation-policy` component is a form input for the cancellation policy message of an event.
 */
interface HTMLNylasCancellationPolicyElement extends Components.NylasCancellationPolicy, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasCancellationPolicyElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCancellationPolicyElement, ev: NylasCancellationPolicyCustomEvent<HTMLNylasCancellationPolicyElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasCancellationPolicyElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCancellationPolicyElement, ev: NylasCancellationPolicyCustomEvent<HTMLNylasCancellationPolicyElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasCancelledEventCardElementEventMap

interface HTMLNylasCancelledEventCardElementEventMap {
  closeCancelEventCardClicked: { errorHandler?: (error: NylasSchedulerErrorResponse1) => void };
  cancelledEventCardError: NylasSchedulerErrorResponse1;
}

HTMLNylasCancelledEventCardElement

/**
 * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.
 */
interface HTMLNylasCancelledEventCardElement extends Components.NylasCancelledEventCard, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasCancelledEventCardElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCancelledEventCardElement, ev: NylasCancelledEventCardCustomEvent<HTMLNylasCancelledEventCardElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasCancelledEventCardElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCancelledEventCardElement, ev: NylasCancelledEventCardCustomEvent<HTMLNylasCancelledEventCardElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasConfirmationEmailElementEventMap

interface HTMLNylasConfirmationEmailElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasConfirmationEmailElement

/**
 * 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<K extends keyof HTMLNylasConfirmationEmailElementEventMap>(
    type: K,
    listener: (this: HTMLNylasConfirmationEmailElement, ev: NylasConfirmationEmailCustomEvent<HTMLNylasConfirmationEmailElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasConfirmationEmailElementEventMap>(
    type: K,
    listener: (this: HTMLNylasConfirmationEmailElement, ev: NylasConfirmationEmailCustomEvent<HTMLNylasConfirmationEmailElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasConfirmedEventCardElementEventMap

interface HTMLNylasConfirmedEventCardElementEventMap {
  closeConfirmEventCardClicked: { errorHandler?: (error: NylasSchedulerErrorResponse1) => void };
  confirmedEventCardError: NylasSchedulerErrorResponse1;
}

HTMLNylasConfirmedEventCardElement

/**
 * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.
 */
interface HTMLNylasConfirmedEventCardElement extends Components.NylasConfirmedEventCard, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasConfirmedEventCardElementEventMap>(
    type: K,
    listener: (this: HTMLNylasConfirmedEventCardElement, ev: NylasConfirmedEventCardCustomEvent<HTMLNylasConfirmedEventCardElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasConfirmedEventCardElementEventMap>(
    type: K,
    listener: (this: HTMLNylasConfirmedEventCardElement, ev: NylasConfirmedEventCardCustomEvent<HTMLNylasConfirmedEventCardElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasConnectedCalendarsElementEventMap

interface HTMLNylasConnectedCalendarsElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasConnectedCalendarsElement

/**
 * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants.
 */
interface HTMLNylasConnectedCalendarsElement extends Components.NylasConnectedCalendars, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasConnectedCalendarsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasConnectedCalendarsElement, ev: NylasConnectedCalendarsCustomEvent<HTMLNylasConnectedCalendarsElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasConnectedCalendarsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasConnectedCalendarsElement, ev: NylasConnectedCalendarsCustomEvent<HTMLNylasConnectedCalendarsElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasCustomBookingFlowElement

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-booking-confirmation-type></nylas-booking-confirmation-type>
 *     <nylas-booking-confirmation-redirect></nylas-booking-confirmation-redirect>
 *   </div>
 * </nylas-custom-booking-flow>
 * ```
 */
interface HTMLNylasCustomBookingFlowElement extends Components.NylasCustomBookingFlow, HTMLStencilElement {}

HTMLNylasCustomEventSlugElementEventMap

interface HTMLNylasCustomEventSlugElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasCustomEventSlugElement

/**
 * 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<K extends keyof HTMLNylasCustomEventSlugElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCustomEventSlugElement, ev: NylasCustomEventSlugCustomEvent<HTMLNylasCustomEventSlugElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasCustomEventSlugElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCustomEventSlugElement, ev: NylasCustomEventSlugCustomEvent<HTMLNylasCustomEventSlugElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasCustomizeBookingSettingsElementEventMap

interface HTMLNylasCustomizeBookingSettingsElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasCustomizeBookingSettingsElement

/**
 * The `nylas-customize-booking-settings` component is a UI component that displays the booking calendar picker.
 */
interface HTMLNylasCustomizeBookingSettingsElement extends Components.NylasCustomizeBookingSettings, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasCustomizeBookingSettingsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCustomizeBookingSettingsElement, ev: NylasCustomizeBookingSettingsCustomEvent<HTMLNylasCustomizeBookingSettingsElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasCustomizeBookingSettingsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasCustomizeBookingSettingsElement, ev: NylasCustomizeBookingSettingsCustomEvent<HTMLNylasCustomizeBookingSettingsElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasDatePickerElementEventMap

interface HTMLNylasDatePickerElementEventMap {
  dateSelected: Date;
  monthChanged: Date;
}

HTMLNylasDatePickerElement

/**
 * The `nylas-date-picker` component is a UI component that allows users to select a date.
 */
interface HTMLNylasDatePickerElement extends Components.NylasDatePicker, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasDatePickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasDatePickerElement, ev: NylasDatePickerCustomEvent<HTMLNylasDatePickerElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasDatePickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasDatePickerElement, ev: NylasDatePickerCustomEvent<HTMLNylasDatePickerElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasEditorTabsElementEventMap

interface HTMLNylasEditorTabsElementEventMap {
  schedulerConfigChanged: SchedulerEventDetail;
  cancelButtonClick: void;
  formSubmitted: void;
  previewButtonClicked: HTMLNylasEditorTabsElement;
  schedulerEditorFormUpdated: { value: string; name: string };
}

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<K extends keyof HTMLNylasEditorTabsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEditorTabsElement, ev: NylasEditorTabsCustomEvent<HTMLNylasEditorTabsElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasEditorTabsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEditorTabsElement, ev: NylasEditorTabsCustomEvent<HTMLNylasEditorTabsElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasEventDescriptionElementEventMap

interface HTMLNylasEventDescriptionElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasEventDescriptionElement

/**
 * The `nylas-event-description` component is a form input for the description of an event.
 */
interface HTMLNylasEventDescriptionElement extends Components.NylasEventDescription, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasEventDescriptionElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEventDescriptionElement, ev: NylasEventDescriptionCustomEvent<HTMLNylasEventDescriptionElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasEventDescriptionElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEventDescriptionElement, ev: NylasEventDescriptionCustomEvent<HTMLNylasEventDescriptionElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasEventDurationElementEventMap

interface HTMLNylasEventDurationElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasEventDurationElement

/**
 * The `nylas-event-duration` component is a form input for the duration of an event.
 */
interface HTMLNylasEventDurationElement extends Components.NylasEventDuration, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasEventDurationElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEventDurationElement, ev: NylasEventDurationCustomEvent<HTMLNylasEventDurationElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasEventDurationElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEventDurationElement, ev: NylasEventDurationCustomEvent<HTMLNylasEventDurationElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasEventInfoElement

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-event-title></nylas-event-title>
 *     <nylas-event-description></nylas-event-description>
 *     <nylas-event-duration></nylas-event-duration>
 *     <nylas-lcation-component></nylas-event-location>
 *   </div>
 * </nylas-event-info>
 * ```
 */
interface HTMLNylasEventInfoElement extends Components.NylasEventInfo, HTMLStencilElement {}

HTMLNylasEventLimitsElement

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-limit-future-bookings></nylas-limit-future-bookings>
 *     <nylas-min-cancellation-notice></nylas-min-cancellation-notice>
 *   </div>
 * </nylas-event-limits>
 * ```
 */
interface HTMLNylasEventLimitsElement extends Components.NylasEventLimits, HTMLStencilElement {}

HTMLNylasEventLocationElementEventMap

interface HTMLNylasEventLocationElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasEventLocationElement

/**
 * The `nylas-event-location` component is a form input for the location of an event.
 */
interface HTMLNylasEventLocationElement extends Components.NylasEventLocation, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasEventLocationElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEventLocationElement, ev: NylasEventLocationCustomEvent<HTMLNylasEventLocationElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasEventLocationElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEventLocationElement, ev: NylasEventLocationCustomEvent<HTMLNylasEventLocationElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasEventTitleElementEventMap

interface HTMLNylasEventTitleElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasEventTitleElement

/**
 * The `nylas-event-title` component is a form input for the title of an event.
 */
interface HTMLNylasEventTitleElement extends Components.NylasEventTitle, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasEventTitleElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEventTitleElement, ev: NylasEventTitleCustomEvent<HTMLNylasEventTitleElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasEventTitleElementEventMap>(
    type: K,
    listener: (this: HTMLNylasEventTitleElement, ev: NylasEventTitleCustomEvent<HTMLNylasEventTitleElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasFeedbackFormElementEventMap

interface HTMLNylasFeedbackFormElementEventMap {
  feedbackModalClosed: void;
  feedbackSubmitted: { feedback: string };
  triggerValidation: void;
}

HTMLNylasFeedbackFormElement

/**
 * The `nylas-feedback-form` component is a UI component that displays the booked event card.
 */
interface HTMLNylasFeedbackFormElement extends Components.NylasFeedbackForm, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasFeedbackFormElementEventMap>(
    type: K,
    listener: (this: HTMLNylasFeedbackFormElement, ev: NylasFeedbackFormCustomEvent<HTMLNylasFeedbackFormElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasFeedbackFormElementEventMap>(
    type: K,
    listener: (this: HTMLNylasFeedbackFormElement, ev: NylasFeedbackFormCustomEvent<HTMLNylasFeedbackFormElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasFormCardElement

/**
 * 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 {}

HTMLNylasIfStateElement

interface HTMLNylasIfStateElement extends Components.NylasIfState, HTMLStencilElement {}

HTMLNylasLimitFutureBookingsElementEventMap

interface HTMLNylasLimitFutureBookingsElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasLimitFutureBookingsElement

/**
 * 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<K extends keyof HTMLNylasLimitFutureBookingsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasLimitFutureBookingsElement, ev: NylasLimitFutureBookingsCustomEvent<HTMLNylasLimitFutureBookingsElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasLimitFutureBookingsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasLimitFutureBookingsElement, ev: NylasLimitFutureBookingsCustomEvent<HTMLNylasLimitFutureBookingsElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasListConfigurationsElementEventMap

interface HTMLNylasListConfigurationsElementEventMap {
  initListConfigurations: {
    host: HTMLNylasListConfigurationsElement;
    cursor?: string;
  };
  createButtonClick: HTMLNylasListConfigurationsElement;
  editButtonClick: {
    host: HTMLNylasListConfigurationsElement;
    configuration: Configuration;
  };
  deleteButtonClick: {
    host: HTMLNylasListConfigurationsElement;
    configuration: Configuration;
  };
}

HTMLNylasListConfigurationsElement

/**
 * The `nylas-list-configurations` component displays a list of scheduling pages.
 */
interface HTMLNylasListConfigurationsElement extends Components.NylasListConfigurations, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasListConfigurationsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasListConfigurationsElement, ev: NylasListConfigurationsCustomEvent<HTMLNylasListConfigurationsElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasListConfigurationsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasListConfigurationsElement, ev: NylasListConfigurationsCustomEvent<HTMLNylasListConfigurationsElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasLocaleSwitchElementEventMap

interface HTMLNylasLocaleSwitchElementEventMap {
  timezoneChanged: string;
  languageChanged: string;
}

HTMLNylasLocaleSwitchElement

/**
 * 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<K extends keyof HTMLNylasLocaleSwitchElementEventMap>(
    type: K,
    listener: (this: HTMLNylasLocaleSwitchElement, ev: NylasLocaleSwitchCustomEvent<HTMLNylasLocaleSwitchElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasLocaleSwitchElementEventMap>(
    type: K,
    listener: (this: HTMLNylasLocaleSwitchElement, ev: NylasLocaleSwitchCustomEvent<HTMLNylasLocaleSwitchElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasLoginElementEventMap

interface HTMLNylasLoginElementEventMap {
  buttonClick: { url?: string };
}

HTMLNylasLoginElement

interface HTMLNylasLoginElement extends Components.NylasLogin, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasLoginElementEventMap>(
    type: K,
    listener: (this: HTMLNylasLoginElement, ev: NylasLoginCustomEvent<HTMLNylasLoginElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasLoginElementEventMap>(
    type: K,
    listener: (this: HTMLNylasLoginElement, ev: NylasLoginCustomEvent<HTMLNylasLoginElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasLogoElement

interface HTMLNylasLogoElement extends Components.NylasLogo, HTMLStencilElement {}

HTMLNylasMinBookingNoticeElementEventMap

interface HTMLNylasMinBookingNoticeElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasMinBookingNoticeElement

/**
 * 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<K extends keyof HTMLNylasMinBookingNoticeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasMinBookingNoticeElement, ev: NylasMinBookingNoticeCustomEvent<HTMLNylasMinBookingNoticeElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasMinBookingNoticeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasMinBookingNoticeElement, ev: NylasMinBookingNoticeCustomEvent<HTMLNylasMinBookingNoticeElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasMinCancellationNoticeElementEventMap

interface HTMLNylasMinCancellationNoticeElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasMinCancellationNoticeElement

/**
 * 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<K extends keyof HTMLNylasMinCancellationNoticeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasMinCancellationNoticeElement, ev: NylasMinCancellationNoticeCustomEvent<HTMLNylasMinCancellationNoticeElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasMinCancellationNoticeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasMinCancellationNoticeElement, ev: NylasMinCancellationNoticeCustomEvent<HTMLNylasMinCancellationNoticeElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasNotificationElement

/**
 * The `nylas-notification` component is a UI component that displays notifications.
 */
interface HTMLNylasNotificationElement extends Components.NylasNotification, HTMLStencilElement {}

HTMLNylasOrganizerConfirmationCardElementEventMap

interface HTMLNylasOrganizerConfirmationCardElementEventMap {
  rejectBookingButtonClicked: { bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement };
  confirmBookingButtonClicked: {
    bookingId: string;
    host: HTMLNylasOrganizerConfirmationCardElement;
    errorHandler?: (error: NylasSchedulerErrorResponse) => void;
  };
  confirmBookingError: NylasSchedulerErrorResponse;
}

HTMLNylasOrganizerConfirmationCardElement

/**
 * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.
 */
interface HTMLNylasOrganizerConfirmationCardElement extends Components.NylasOrganizerConfirmationCard, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasOrganizerConfirmationCardElementEventMap>(
    type: K,
    listener: (this: HTMLNylasOrganizerConfirmationCardElement, ev: NylasOrganizerConfirmationCardCustomEvent<HTMLNylasOrganizerConfirmationCardElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasOrganizerConfirmationCardElementEventMap>(
    type: K,
    listener: (this: HTMLNylasOrganizerConfirmationCardElement, ev: NylasOrganizerConfirmationCardCustomEvent<HTMLNylasOrganizerConfirmationCardElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasPageNameElementEventMap

interface HTMLNylasPageNameElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasPageNameElement

/**
 * 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<K extends keyof HTMLNylasPageNameElementEventMap>(
    type: K,
    listener: (this: HTMLNylasPageNameElement, ev: NylasPageNameCustomEvent<HTMLNylasPageNameElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasPageNameElementEventMap>(
    type: K,
    listener: (this: HTMLNylasPageNameElement, ev: NylasPageNameCustomEvent<HTMLNylasPageNameElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasPageStylingElementEventMap

interface HTMLNylasPageStylingElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
  bookingFormSubmitted: void;
}

HTMLNylasPageStylingElement

/**
 * 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<K extends keyof HTMLNylasPageStylingElementEventMap>(
    type: K,
    listener: (this: HTMLNylasPageStylingElement, ev: NylasPageStylingCustomEvent<HTMLNylasPageStylingElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasPageStylingElementEventMap>(
    type: K,
    listener: (this: HTMLNylasPageStylingElement, ev: NylasPageStylingCustomEvent<HTMLNylasPageStylingElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasParticipantBookingCalendarsElementEventMap

interface HTMLNylasParticipantBookingCalendarsElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasParticipantBookingCalendarsElement

/**
 * 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<K extends keyof HTMLNylasParticipantBookingCalendarsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasParticipantBookingCalendarsElement, ev: NylasParticipantBookingCalendarsCustomEvent<HTMLNylasParticipantBookingCalendarsElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasParticipantBookingCalendarsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasParticipantBookingCalendarsElement, ev: NylasParticipantBookingCalendarsCustomEvent<HTMLNylasParticipantBookingCalendarsElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasParticipantsCustomAvailabilityElementEventMap

interface HTMLNylasParticipantsCustomAvailabilityElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasParticipantsCustomAvailabilityElement

/**
 * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.
 */
interface HTMLNylasParticipantsCustomAvailabilityElement extends Components.NylasParticipantsCustomAvailability, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasParticipantsCustomAvailabilityElementEventMap>(
    type: K,
    listener: (
      this: HTMLNylasParticipantsCustomAvailabilityElement,
      ev: NylasParticipantsCustomAvailabilityCustomEvent<HTMLNylasParticipantsCustomAvailabilityElementEventMap[K]>,
    ) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasParticipantsCustomAvailabilityElementEventMap>(
    type: K,
    listener: (
      this: HTMLNylasParticipantsCustomAvailabilityElement,
      ev: NylasParticipantsCustomAvailabilityCustomEvent<HTMLNylasParticipantsCustomAvailabilityElementEventMap[K]>,
    ) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasProviderElementEventMap

interface HTMLNylasProviderElementEventMap {
  init: HTMLNylasProviderElement;
  loggedIn: HTMLNylasProviderElement;
  loggedOut: HTMLNylasProviderElement;
}

HTMLNylasProviderElement

/**
 * The Nylas Provider component.
 * This component is used to manage the Nylas Provider.
 * It is used to manage the Nylas Auth instance, the Nylas Connector instance,
 * and the Nylas Store instance.
 */
interface HTMLNylasProviderElement extends Components.NylasProvider, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasProviderElementEventMap>(
    type: K,
    listener: (this: HTMLNylasProviderElement, ev: NylasProviderCustomEvent<HTMLNylasProviderElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasProviderElementEventMap>(
    type: K,
    listener: (this: HTMLNylasProviderElement, ev: NylasProviderCustomEvent<HTMLNylasProviderElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasReminderEmailsElementEventMap

interface HTMLNylasReminderEmailsElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasReminderEmailsElement

/**
 * 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<K extends keyof HTMLNylasReminderEmailsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasReminderEmailsElement, ev: NylasReminderEmailsCustomEvent<HTMLNylasReminderEmailsElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasReminderEmailsElementEventMap>(
    type: K,
    listener: (this: HTMLNylasReminderEmailsElement, ev: NylasReminderEmailsCustomEvent<HTMLNylasReminderEmailsElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasReminderTimeElementEventMap

interface HTMLNylasReminderTimeElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasReminderTimeElement

/**
 * The `nylas-reminder-time` component is a form input for the reminder time before an event.
 */
interface HTMLNylasReminderTimeElement extends Components.NylasReminderTime, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasReminderTimeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasReminderTimeElement, ev: NylasReminderTimeCustomEvent<HTMLNylasReminderTimeElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasReminderTimeElementEventMap>(
    type: K,
    listener: (this: HTMLNylasReminderTimeElement, ev: NylasReminderTimeCustomEvent<HTMLNylasReminderTimeElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasSchedulerEditorElementEventMap

interface HTMLNylasSchedulerEditorElementEventMap {
  init: HTMLNylasSchedulerEditorElement;
  loggedIn: HTMLNylasSchedulerEditorElement;
  loggedOut: HTMLNylasSchedulerEditorElement;
  schedulerConfigCloseClicked: HTMLNylasSchedulerEditorElement;
}

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<K extends keyof HTMLNylasSchedulerEditorElementEventMap>(
    type: K,
    listener: (this: HTMLNylasSchedulerEditorElement, ev: NylasSchedulerEditorCustomEvent<HTMLNylasSchedulerEditorElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasSchedulerEditorElementEventMap>(
    type: K,
    listener: (this: HTMLNylasSchedulerEditorElement, ev: NylasSchedulerEditorCustomEvent<HTMLNylasSchedulerEditorElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasSchedulingElementEventMap

interface HTMLNylasSchedulingElementEventMap {
  init: HTMLNylasSchedulingElement;
  schedulerWillLoad: HTMLNylasSchedulingElement;
  schedulerDidLoad: HTMLNylasSchedulingElement;
  nylasSchedulerError: { notification: Notification; host: HTMLElement };
  configSettingsLoaded: { settings: NylasSchedulerResponse<UISettingsResponse> };
  bookingRefExtracted: { configurationId: string; bookingId: string; salt?: string };
  bookedEventInfo: NylasSchedulerResponse<NylasEvent>;
}

HTMLNylasSchedulingElement

/**
 * The `nylas-scheduling` component is used to display the Nylas Scheduling UI.
 */
interface HTMLNylasSchedulingElement extends Components.NylasScheduling, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasSchedulingElementEventMap>(
    type: K,
    listener: (this: HTMLNylasSchedulingElement, ev: NylasSchedulingCustomEvent<HTMLNylasSchedulingElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasSchedulingElementEventMap>(
    type: K,
    listener: (this: HTMLNylasSchedulingElement, ev: NylasSchedulingCustomEvent<HTMLNylasSchedulingElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasSchedulingMethodElementEventMap

interface HTMLNylasSchedulingMethodElementEventMap {
  valueChanged: {
    value: string;
    name: string;
    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
  };
}

HTMLNylasSchedulingMethodElement

/**
 * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker.
 */
interface HTMLNylasSchedulingMethodElement extends Components.NylasSchedulingMethod, HTMLStencilElement {
  addEventListener<K extends keyof HTMLNylasSchedulingMethodElementEventMap>(
    type: K,
    listener: (this: HTMLNylasSchedulingMethodElement, ev: NylasSchedulingMethodCustomEvent<HTMLNylasSchedulingMethodElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasSchedulingMethodElementEventMap>(
    type: K,
    listener: (this: HTMLNylasSchedulingMethodElement, ev: NylasSchedulingMethodCustomEvent<HTMLNylasSchedulingMethodElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasSelectedEventCardElement

/**
 * The `nylas-selected-event-card` component is a UI component that displays the selected event card.
 */
interface HTMLNylasSelectedEventCardElement extends Components.NylasSelectedEventCard, HTMLStencilElement {}

HTMLNylasTimeWindowPickerElementEventMap

interface HTMLNylasTimeWindowPickerElementEventMap {
  timeChange: {
    key: string;
    value: string;
  };
  formError: {
    key: string;
    message: string;
  };
}

HTMLNylasTimeWindowPickerElement

/**
 * 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<K extends keyof HTMLNylasTimeWindowPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasTimeWindowPickerElement, ev: NylasTimeWindowPickerCustomEvent<HTMLNylasTimeWindowPickerElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasTimeWindowPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasTimeWindowPickerElement, ev: NylasTimeWindowPickerCustomEvent<HTMLNylasTimeWindowPickerElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasTimeslotIntervalElementEventMap

interface HTMLNylasTimeslotIntervalElementEventMap {
  valueChanged: {
    value: string;
    name: string;
  };
}

HTMLNylasTimeslotIntervalElement

/**
 * 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<K extends keyof HTMLNylasTimeslotIntervalElementEventMap>(
    type: K,
    listener: (this: HTMLNylasTimeslotIntervalElement, ev: NylasTimeslotIntervalCustomEvent<HTMLNylasTimeslotIntervalElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasTimeslotIntervalElementEventMap>(
    type: K,
    listener: (this: HTMLNylasTimeslotIntervalElement, ev: NylasTimeslotIntervalCustomEvent<HTMLNylasTimeslotIntervalElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLNylasTimeslotPickerElementEventMap

interface HTMLNylasTimeslotPickerElementEventMap {
  timeslotSelected: Timeslot;
  timeslotConfirmed: Timeslot;
}

HTMLNylasTimeslotPickerElement

/**
 * 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<K extends keyof HTMLNylasTimeslotPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasTimeslotPickerElement, ev: NylasTimeslotPickerCustomEvent<HTMLNylasTimeslotPickerElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLNylasTimeslotPickerElementEventMap>(
    type: K,
    listener: (this: HTMLNylasTimeslotPickerElement, ev: NylasTimeslotPickerCustomEvent<HTMLNylasTimeslotPickerElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLPaintbrushFillIconElement

interface HTMLPaintbrushFillIconElement extends Components.PaintbrushFillIcon, HTMLStencilElement {}

HTMLPaintbrushIconElement

interface HTMLPaintbrushIconElement extends Components.PaintbrushIcon, HTMLStencilElement {}

HTMLPeopleIconElement

interface HTMLPeopleIconElement extends Components.PeopleIcon, HTMLStencilElement {}

HTMLPersonClipboardIconElement

interface HTMLPersonClipboardIconElement extends Components.PersonClipboardIcon, HTMLStencilElement {}

HTMLPersonIconElement

interface HTMLPersonIconElement extends Components.PersonIcon, HTMLStencilElement {}

HTMLPlayIconElement

interface HTMLPlayIconElement extends Components.PlayIcon, HTMLStencilElement {}

HTMLPlusIconElement

interface HTMLPlusIconElement extends Components.PlusIcon, HTMLStencilElement {}

HTMLRadioButtonGroupElementEventMap

interface HTMLRadioButtonGroupElementEventMap {
  nylasFormRadioChanged: {
    value: string;
    name: string;
    label?: string;
  };
}

HTMLRadioButtonGroupElement

/**
 * 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<K extends keyof HTMLRadioButtonGroupElementEventMap>(
    type: K,
    listener: (this: HTMLRadioButtonGroupElement, ev: RadioButtonGroupCustomEvent<HTMLRadioButtonGroupElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLRadioButtonGroupElementEventMap>(
    type: K,
    listener: (this: HTMLRadioButtonGroupElement, ev: RadioButtonGroupCustomEvent<HTMLRadioButtonGroupElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLRefreshIconElement

interface HTMLRefreshIconElement extends Components.RefreshIcon, HTMLStencilElement {}

HTMLReplyAllIconElement

interface HTMLReplyAllIconElement extends Components.ReplyAllIcon, HTMLStencilElement {}

HTMLReplyIconElement

interface HTMLReplyIconElement extends Components.ReplyIcon, HTMLStencilElement {}

HTMLSearchIconElement

interface HTMLSearchIconElement extends Components.SearchIcon, HTMLStencilElement {}

HTMLSelectDropdownElementEventMap

interface HTMLSelectDropdownElementEventMap {
  nylasFormDropdownChanged: {
    value: DropdownOption['value'];
    name: string;
    error?: string;
    label?: string;
  };
  nylasFormDropdownDefaultSelected: {
    value: DropdownOption['value'];
    name: string;
    error?: string;
    label?: string;
  };
}

HTMLSelectDropdownElement

/**
 * 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<K extends keyof HTMLSelectDropdownElementEventMap>(
    type: K,
    listener: (this: HTMLSelectDropdownElement, ev: SelectDropdownCustomEvent<HTMLSelectDropdownElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLSelectDropdownElementEventMap>(
    type: K,
    listener: (this: HTMLSelectDropdownElement, ev: SelectDropdownCustomEvent<HTMLSelectDropdownElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLSentIconElement

interface HTMLSentIconElement extends Components.SentIcon, HTMLStencilElement {}

HTMLSpamIconElement

interface HTMLSpamIconElement extends Components.SpamIcon, HTMLStencilElement {}

HTMLStarIconElement

interface HTMLStarIconElement extends Components.StarIcon, HTMLStencilElement {}

HTMLStopIconElement

interface HTMLStopIconElement extends Components.StopIcon, HTMLStencilElement {}

HTMLTextareaComponentElementEventMap

interface HTMLTextareaComponentElementEventMap {
  nylasFormInputChanged: { value: string; name: string; error: string; label: string; type: string };
}

HTMLTextareaComponentElement

/**
 * `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<K extends keyof HTMLTextareaComponentElementEventMap>(
    type: K,
    listener: (this: HTMLTextareaComponentElement, ev: TextareaComponentCustomEvent<HTMLTextareaComponentElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLTextareaComponentElementEventMap>(
    type: K,
    listener: (this: HTMLTextareaComponentElement, ev: TextareaComponentCustomEvent<HTMLTextareaComponentElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLTimePeriodSelectorElementEventMap

interface HTMLTimePeriodSelectorElementEventMap {
  timePeriodChanged: { number: number; period: string };
}

HTMLTimePeriodSelectorElement

interface HTMLTimePeriodSelectorElement extends Components.TimePeriodSelector, HTMLStencilElement {
  addEventListener<K extends keyof HTMLTimePeriodSelectorElementEventMap>(
    type: K,
    listener: (this: HTMLTimePeriodSelectorElement, ev: TimePeriodSelectorCustomEvent<HTMLTimePeriodSelectorElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLTimePeriodSelectorElementEventMap>(
    type: K,
    listener: (this: HTMLTimePeriodSelectorElement, ev: TimePeriodSelectorCustomEvent<HTMLTimePeriodSelectorElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLToggleSwitchElementEventMap

interface HTMLToggleSwitchElementEventMap {
  nylasFormSwitchToggled: {
    checked: boolean;
    name: string;
    label: string;
  };
}

HTMLToggleSwitchElement

/**
 * 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<K extends keyof HTMLToggleSwitchElementEventMap>(
    type: K,
    listener: (this: HTMLToggleSwitchElement, ev: ToggleSwitchCustomEvent<HTMLToggleSwitchElementEventMap[K]>) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof HTMLToggleSwitchElementEventMap>(
    type: K,
    listener: (this: HTMLToggleSwitchElement, ev: ToggleSwitchCustomEvent<HTMLToggleSwitchElementEventMap[K]>) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

HTMLTooltipComponentElement

/**
 * The `tooltip-component` component is a UI component that displays a tooltip.
 */
interface HTMLTooltipComponentElement extends Components.TooltipComponent, HTMLStencilElement {}

HTMLTranslateIconElement

interface HTMLTranslateIconElement extends Components.TranslateIcon, HTMLStencilElement {}

HTMLTrashFillIconElement

interface HTMLTrashFillIconElement extends Components.TrashFillIcon, HTMLStencilElement {}

HTMLTrashIconElement

interface HTMLTrashIconElement extends Components.TrashIcon, HTMLStencilElement {}

HTMLUnderlineIconElement

interface HTMLUnderlineIconElement extends Components.UnderlineIcon, HTMLStencilElement {}

HTMLWarningIconElement

interface HTMLWarningIconElement extends Components.WarningIcon, HTMLStencilElement {}

HTMLZoomIconElement

interface HTMLZoomIconElement extends Components.ZoomIcon, HTMLStencilElement {}

HTMLElementTagNameMap

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;
  '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-picker': HTMLNylasDatePickerElement;
  'nylas-editor-tabs': HTMLNylasEditorTabsElement;
  'nylas-event-description': HTMLNylasEventDescriptionElement;
  'nylas-event-duration': HTMLNylasEventDurationElement;
  'nylas-event-info': HTMLNylasEventInfoElement;
  'nylas-event-limits': HTMLNylasEventLimitsElement;
  'nylas-event-location': HTMLNylasEventLocationElement;
  'nylas-event-title': HTMLNylasEventTitleElement;
  'nylas-feedback-form': HTMLNylasFeedbackFormElement;
  'nylas-form-card': HTMLNylasFormCardElement;
  'nylas-if-state': HTMLNylasIfStateElement;
  'nylas-limit-future-bookings': HTMLNylasLimitFutureBookingsElement;
  'nylas-list-configurations': HTMLNylasListConfigurationsElement;
  'nylas-locale-switch': HTMLNylasLocaleSwitchElement;
  'nylas-login': HTMLNylasLoginElement;
  '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-provider': HTMLNylasProviderElement;
  'nylas-reminder-emails': HTMLNylasReminderEmailsElement;
  'nylas-reminder-time': HTMLNylasReminderTimeElement;
  'nylas-scheduler-editor': HTMLNylasSchedulerEditorElement;
  'nylas-scheduling': HTMLNylasSchedulingElement;
  'nylas-scheduling-method': HTMLNylasSchedulingMethodElement;
  '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;
}

AddCircleIcon

interface AddCircleIcon {
  height?: string;
  width?: string;
}

ArchiveIcon

interface ArchiveIcon {
  height?: string;
  width?: string;
}

ArrowIcon

interface ArrowIcon {
  height?: string;
  width?: string;
}

BoldIcon

interface BoldIcon {
  height?: string;
  width?: string;
}

ButtonComponent

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;
}

CalendarAgendaFillIcon

interface CalendarAgendaFillIcon {
  height?: string;
  width?: string;
}

CalendarAgendaIcon

interface CalendarAgendaIcon {
  height?: string;
  width?: string;
}

CalendarCancelIcon

interface CalendarCancelIcon {
  height?: string;
  width?: string;
}

CalendarCheckIcon

interface CalendarCheckIcon {
  height?: string;
  width?: string;
}

CalendarIcon

interface CalendarIcon {
  height?: string;
  width?: string;
}

CalendarInfoIcon

interface CalendarInfoIcon {
  height?: string;
  width?: string;
}

CalendarPatternsIcon

interface CalendarPatternsIcon {
  height?: string;
  width?: string;
}

CheckboxComponent

/**
 * 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;
  /**
   * 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;
}

CheckmarkCircleIcon

interface CheckmarkCircleIcon {
  height?: string;
  width?: string;
}

CheckmarkIcon

interface CheckmarkIcon {
  height?: string;
  width?: string;
}

ChevronIcon

interface ChevronIcon {
  height?: string;
  width?: string;
}

ClockIcon

interface ClockIcon {
  height?: string;
  width?: string;
}

CloseIcon

interface CloseIcon {
  height?: string;
  width?: string;
}

CopyIcon

interface CopyIcon {
  height?: string;
  width?: string;
}

DeleteIcon

interface DeleteIcon {
  height?: string;
  width?: string;
}

DocumentRefreshIcon

interface DocumentRefreshIcon {
  height?: string;
  width?: string;
}

DragableIcon

interface DragableIcon {
  height?: string;
  width?: string;
}

EditIcon

interface EditIcon {
  height?: string;
  width?: string;
}

EnvelopeFillIcon

interface EnvelopeFillIcon {
  height?: string;
  width?: string;
}

EnvelopeIcon

interface EnvelopeIcon {
  height?: string;
  width?: string;
}

EyeIcon

interface EyeIcon {
  height?: string;
  width?: string;
}

FeedbackIcon

interface FeedbackIcon {
  height?: string;
  width?: string;
}

FlowIcon

interface FlowIcon {
  height?: string;
  width?: string;
}

FolderIcon

interface FolderIcon {
  height?: string;
  width?: string;
}

ForwardIcon

interface ForwardIcon {
  height?: string;
  width?: string;
}

GlobeIcon

interface GlobeIcon {
  height?: string;
  width?: string;
}

GoogleLogoIcon

interface GoogleLogoIcon {
  height?: string;
  width?: string;
}

GoogleMeetIcon

interface GoogleMeetIcon {
  height?: string;
  width?: string;
}

InboxIcon

interface InboxIcon {
  height?: string;
  width?: string;
}

InfoIcon

interface InfoIcon {
  height?: string;
  width?: string;
}

InputColorPicker

/**
 * 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;
}

InputComponent

/**
 * 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;
  /**
   * 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 <field> format.' where <field> 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';
}

InputDropdown

/**
 * 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;
}

InputImageUrl

/**
 * 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
   */
  onValueChanged?: (
    event: InputImageUrlCustomEvent<{
      value: string;
      name: string;
      valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;
    }>,
  ) => void;
}

ItalicIcon

interface ItalicIcon {
  height?: string;
  width?: string;
}

LoadingIcon

interface LoadingIcon {
  height?: string;
  width?: string;
}

LocationIcon

interface LocationIcon {
  height?: string;
  width?: string;
}

LocationOffIcon

interface LocationOffIcon {
  height?: string;
  width?: string;
}

MicrosoftLogoIcon

interface MicrosoftLogoIcon {
  height?: string;
  width?: string;
}

MicrosoftTeamsIcon

interface MicrosoftTeamsIcon {
  height?: string;
  width?: string;
}

MultiSelectDropdown

interface MultiSelectDropdown {
  /**
   * Error message to display
   */
  error?: string;
  /**
   * The label of the dropdown
   */
  label?: 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[];
}

NylasAdditionalParticipants

/**
 * 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 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 The selected config
   */
  selectedConfiguration?: Configuration;
}

NylasAvailabilityPicker

/**
 * 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;
}

NylasBookedEventCard

/**
 * 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;
  /**
   * @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<NylasSchedulerErrorResponse>) => 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;
}

NylasBookingCalendarPicker

/**
 * 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;
  /**
   * 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;
}

NylasBookingConfirmationRedirect

/**
 * 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;
}

NylasBookingConfirmationType

/**
 * 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;
  /**
   * @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;
}

NylasBookingForm

/**
 * 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<boolean>) => void;
  /**
   * This event is fired when an error occurs in the booking form validation.
   */
  onBookingFormError?: (event: NylasBookingFormCustomEvent<Partial<Notification>>) => 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>) => 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<NylasSchedulerBookingDataWithFlatFields>) => void;
  /**
   * This event is fired when the email is changed.
   */
  onEmailChanged?: (event: NylasBookingFormCustomEvent<string>) => void;
  /**
   * This event is fired when the name is changed.
   */
  onNameChanged?: (event: NylasBookingFormCustomEvent<string>) => void;
}

NylasBookingFormConfig

/**
 * 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.
   */
  additonalFields?: 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: Record<string, AdditionalFields>;
      name: string;
    }>,
  ) => void;
  selectedConfiguration?: Configuration;
}

NylasBufferTime

/**
 * 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;
  selectedConfiguration?: Configuration;
}

NylasCalendarPicker

/**
 * 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;
}

NylasCancelBookingForm

/**
 * 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<NylasSchedulerErrorResponse>) => void;
  /**
   * This event is fired when an error occurs in the booking form.
   */
  onCancelBookingFormError?: (event: NylasCancelBookingFormCustomEvent<Partial<Notification>>) => 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>) => 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;
  /**
   * The selected timeslot.
   */
  selectedTimeslot: Timeslot;
}

NylasCancellationPolicy

/**
 * 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;
}

NylasCancelledEventCard

/**
 * 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<NylasEvent1>;
  /**
   * @standalone The config settings for the scheduler.
   */
  configSettings?: ConfigSettings;
  /**
   * This event is fired when an error occurs.
   */
  onCancelledEventCardError?: (event: NylasCancelledEventCardCustomEvent<NylasSchedulerErrorResponse1>) => void;
  /**
   * This event is fired when the close button is clicked on the cancelled event card.
   */
  onCloseCancelEventCardClicked?: (event: NylasCancelledEventCardCustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse1) => void }>) => void;
}

NylasConfirmationEmail

/**
 * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event.
 */
interface NylasConfirmationEmail {
  /**
   * The confirmation email template data to display
   */
  confirmationEmailTemplate?: EmailTemplate;
  /**
   * Is the confirmation email card open
   */
  isOpen?: boolean;
  /**
   * The name of the component
   */
  name?: string;
  /**
   * 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;
  /**
   * List of participants
   */
  participants?: Participant[];
  selectedConfiguration?: Configuration;
}

NylasConfirmedEventCard

/**
 * 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<NylasEvent1>;
  /**
   * 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<NylasSchedulerErrorResponse1>) => void;
}

NylasConnectedCalendars

/**
 * 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;
}

NylasCustomBookingFlow

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-booking-confirmation-type></nylas-booking-confirmation-type>
 *     <nylas-booking-confirmation-redirect></nylas-booking-confirmation-redirect>
 *   </div>
 * </nylas-custom-booking-flow>
 * ```
 */
interface NylasCustomBookingFlow {}

NylasCustomEventSlug

/**
 * 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;
  /**
   * Slug error message
   */
  slugErrorMessage?: string;
}

NylasCustomizeBookingSettings

/**
 * 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;
}

NylasDatePicker

/**
 * 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<Date>) => void;
  /**
   * This event is fired when the month is changed.
   */
  onMonthChanged?: (event: NylasDatePickerCustomEvent<Date>) => void;
  /**
   * @standalone The dates that are selectable.
   */
  selectableDates?: Date[];
  /**
   * The selected date.
   */
  selectedDate?: Date;
  /**
   * The selected language.
   */
  selectedLanguage?: string;
}

NylasEditorTabs

/**
 * 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>) => void;
  /**
   * Event emitted on form submission.
   */
  onFormSubmitted?: (event: NylasEditorTabsCustomEvent<void>) => void;
  /**
   * Event emitted when the user clicks the preview button.
   */
  onPreviewButtonClicked?: (event: NylasEditorTabsCustomEvent<HTMLNylasEditorTabsElement>) => 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<SchedulerEventDetail>) => 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;
}

NylasEventDescription

/**
 * 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;
  /**
   * @standalone The name of the event description input.
   */
  name?: string;
  /**
   * Event emitted when the event description changes.
   */
  onValueChanged?: (
    event: NylasEventDescriptionCustomEvent<{
      value: string;
      name: string;
    }>,
  ) => void;
  /**
   * @standalone The selected config
   */
  selectedConfiguration?: Configuration;
}

NylasEventDuration

/**
 * 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;
}

NylasEventInfo

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-event-title></nylas-event-title>
 *     <nylas-event-description></nylas-event-description>
 *     <nylas-event-duration></nylas-event-duration>
 *     <nylas-lcation-component></nylas-event-location>
 *   </div>
 * </nylas-event-info>
 * ```
 */
interface NylasEventInfo {}

NylasEventLimits

/**
 * 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>
 *   <div slot="inputs">
 *     <nylas-limit-future-bookings></nylas-limit-future-bookings>
 *     <nylas-min-cancellation-notice></nylas-min-cancellation-notice>
 *   </div>
 * </nylas-event-limits>
 * ```
 */
interface NylasEventLimits {}

NylasEventLocation

/**
 * 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<string, string>;
  /**
   * @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;
  /**
   * @standalone The users provider
   */
  userProvider?: string;
}

NylasEventTitle

/**
 * 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;
  /**
   * 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;
}

NylasFeedbackForm

/**
 * 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>) => 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>) => void;
}

NylasFormCard

/**
 * 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 {}

NylasIfState

interface NylasIfState {
  getStore?: <K extends keyof Stores>(name: K) => Stores[K];
  /**
   * If true, then the component will render if the state is true. This prop is used with the `state` prop.
   */
  isBoolean?: boolean;
  /**
   * If true, then the component will render if the state is set (empty or not set). This prop is used with the `state` prop.
   */
  isStateSet?: boolean;
  /**
   * The name of the state to watch.
   */
  state?: string;
  transition?: Transitions;
}

NylasLimitFutureBookings

/**
 * 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;
}

NylasListConfigurations

/**
 * The `nylas-list-configurations` component displays a list of scheduling pages.
 */
interface NylasListConfigurations {
  /**
   * The list of configurations to display.
   */
  configurations?: Configuration[];
  /**
   * The next cursor for list configurations, if any.
   */
  listConfigurationsNextCursor?: string | null;
  /**
   * Event emitted when the user clicks the create event button.
   */
  onCreateButtonClick?: (event: NylasListConfigurationsCustomEvent<HTMLNylasListConfigurationsElement>) => void;
  /**
   * Event emitted when the user clicks the delete event button.
   */
  onDeleteButtonClick?: (
    event: NylasListConfigurationsCustomEvent<{
      host: HTMLNylasListConfigurationsElement;
      configuration: Configuration;
    }>,
  ) => void;
  /**
   * Event emitted when the user clicks the edit event button.
   */
  onEditButtonClick?: (
    event: NylasListConfigurationsCustomEvent<{
      host: HTMLNylasListConfigurationsElement;
      configuration: Configuration;
    }>,
  ) => void;
  /**
   * Event emitted when the component is initialized.
   */
  onInitListConfigurations?: (
    event: NylasListConfigurationsCustomEvent<{
      host: HTMLNylasListConfigurationsElement;
      cursor?: string;
    }>,
  ) => 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;
}

NylasLocaleSwitch

/**
 * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.
 */
interface NylasLocaleSwitch {
  /**
   * This event is fired when the language is changed.
   */
  onLanguageChanged?: (event: NylasLocaleSwitchCustomEvent<string>) => void;
  /**
   * This event is fired when the timezone is changed.
   */
  onTimezoneChanged?: (event: NylasLocaleSwitchCustomEvent<string>) => void;
  /**
   * The selected language.
   */
  selectedLanguage?: string;
  /**
   * The selected timezone.
   */
  selectedTimezone?: string;
}

NylasLogin

interface NylasLogin {
  buttonText?: string;
  companyName?: string;
  isAuthenticated?: boolean;
  loginMethod?: 'redirect' | 'emebded';
  logoUrl?: string;
  logoWidth?: string;
  nylasConnector?: NylasAuthConnectorInterface;
  onButtonClick?: (event: NylasLoginCustomEvent<{ url?: string }>) => void;
  providers?: string;
  scopes?: string[];
}

NylasLogo

interface NylasLogo {
  height?: string;
  width?: string;
}

NylasMinBookingNotice

/**
 * 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;
}

NylasMinCancellationNotice

/**
 * 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;
}

NylasNotification

/**
 * 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';
}

NylasOrganizerConfirmationCard

/**
 * 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<NylasSchedulerErrorResponse>) => void;
  /**
   * Reject booking button clicked event.
   */
  onRejectBookingButtonClicked?: (event: NylasOrganizerConfirmationCardCustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>) => void;
  /**
   * Booking flow type.
   */
  organizerConfirmationBookingId?: string;
  /**
   * The selected language.
   */
  selectedLanguage?: string;
}

NylasPageName

/**
 * 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;
  /**
   * @standalone The selected config
   */
  selectedConfiguration?: Configuration;
  /**
   * @standalone Show toggle button that allows users to expand or collapse the card
   */
  showToggle?: boolean;
}

NylasPageStyling

/**
 * 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;
  /**
   * This event is fired when the form is submitted in the parent component.
   */
  onBookingFormSubmitted?: (event: NylasPageStylingCustomEvent<void>) => 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;
  selectedConfiguration?: Configuration;
}

NylasParticipantBookingCalendars

/**
 * 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;
}

NylasParticipantsCustomAvailability

/**
 * 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;
}

NylasProvider

/**
 * The Nylas Provider component.
 * This component is used to manage the Nylas Provider.
 * It is used to manage the Nylas Auth instance, the Nylas Connector instance,
 * and the Nylas Store instance.
 */
interface NylasProvider {
  /**
   * The Nylas Auth configuration. Used to manage all things authentication with Nylas.
   */
  authConfig?: AuthConfig;
  /**
   * Automatically register components that have the `@RegisterComponent` decorator. If this is set to false, you will need to manually register components using the `registerComponent` method.
   * @default true
   */
  automaticComponentRegistration?: boolean;
  /**
   * This provides a way to override the default event handlers.
   */
  eventOverrides?: EventOverride<Exclude<typeof this.nylasConnector, undefined>>;
  /**
   * 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: NylasProviderCustomEvent<HTMLNylasProviderElement>) => void;
  /**
   * This event is fired when the the NyalsAuth isAuthenticated state changes to true.
   */
  onLoggedIn?: (event: NylasProviderCustomEvent<HTMLNylasProviderElement>) => void;
  /**
   * This event is fired when the the NyalsAuth isAuthenticated state changes to true.
   */
  onLoggedOut?: (event: NylasProviderCustomEvent<HTMLNylasProviderElement>) => void;
}

NylasReminderEmails

/**
 * The `nylas-reminder-emails` component is a UI component that allows users to set buffer time before and after an event.
 */
interface NylasReminderEmails {
  /**
   * The name of the component
   */
  name?: string;
  /**
   * 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;
}

NylasReminderTime

/**
 * 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;
}

NylasSchedulerEditor

/**
 * 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<string, string>;
  /**
   * * 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[];
  /**
   * 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<NylasSchedulerConfigStoreState>;
  /**
   * 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 optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm
   */
  hideEditorTabs?: Tab[];
  /**
   * 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;
  /**
   * 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<HTMLNylasSchedulerEditorElement>) => void;
  /**
   * This event is fired when the the NylasAuth isAuthenticated state changes to true.
   */
  onLoggedIn?: (event: NylasSchedulerEditorCustomEvent<HTMLNylasSchedulerEditorElement>) => void;
  /**
   * This event is fired when the the NylasAuth isAuthenticated state changes to false.
   */
  onLoggedOut?: (event: NylasSchedulerEditorCustomEvent<HTMLNylasSchedulerEditorElement>) => void;
  /**
   * This event is fired when the close button on scheduler config is clicked.
   */
  onSchedulerConfigCloseClicked?: (event: NylasSchedulerEditorCustomEvent<HTMLNylasSchedulerEditorElement>) => 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/<YOUR_NYLAS_APP_CLIENT_ID>/{slug}`. `us` denotes the region. Replace it with the appropriate region of your application. Replace `<YOUR_NYLAS_APP_CLIENT_ID>` 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/<YOUR_NYLAS_APP_CLIENT_ID>/{slug}`. `us` denotes the region. Replace it with the appropriate region of your application. Replace `<YOUR_NYLAS_APP_CLIENT_ID>` with your Nylas app client ID. Note: Nylas hosted scheduling pages are only available for public configurations.
   */
  schedulerPreviewLink?: string;
}

NylasScheduling

/**
 * 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?: NylasSchedulerBookingData2;
  /**
   * 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;
  /**
   * The default scheduler store state. Used to set the initial state of the scheduler store.
   */
  defaultSchedulerState?: Partial<NylasSchedulerStoreState>;
  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 <nylas-scheduling eventOverride={{"timeslotConfirmed": (event, nylasConnector) => { console.log("Timeslot confirmed event fired!"); } }} /> ```
   */
  eventOverrides?: SchedulerEventOverride;
  /**
   * 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<Record<LANGUAGE_CODE, Locale>>;
  /**
   * 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<NylasSchedulerResponse<NylasEvent>>) => 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<UISettingsResponse> }>) => 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<HTMLNylasSchedulingElement>) => void;
  onNylasSchedulerError?: (event: NylasSchedulingCustomEvent<{ notification: Notification; host: HTMLElement }>) => void;
  /**
   * This event is fired when the scheduler component enters componentDidLoad lifecycle.
   */
  onSchedulerDidLoad?: (event: NylasSchedulingCustomEvent<HTMLNylasSchedulingElement>) => void;
  /**
   * This event is fired when the scheduler component enters componentWillLoad lifecycle.
   */
  onSchedulerWillLoad?: (event: NylasSchedulingCustomEvent<HTMLNylasSchedulingElement>) => 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;
}

NylasSchedulingMethod

/**
 * 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;
}

NylasSelectedEventCard

/**
 * The `nylas-selected-event-card` component is a UI component that displays the selected event card.
 */
interface NylasSelectedEventCard {
  /**
   * The selected date.
   */
  selectedDate?: Date;
  /**
   * The selected language.
   */
  selectedLanguage?: string;
  /**
   * The selected time.
   */
  selectedTimeslot?: Timeslot;
  /**
   * The selected timezone.
   */
  selectedTimezone?: string;
}

NylasTimeWindowPicker

/**
 * 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;
  /**
   * 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 form has an error. The parent component can listen for this event and display an error message or set form validity.
   */
  onFormError?: (
    event: NylasTimeWindowPickerCustomEvent<{
      key: string;
      message: string;
    }>,
  ) => void;
  /**
   * This event is fired when the time is changed.
   */
  onTimeChange?: (
    event: NylasTimeWindowPickerCustomEvent<{
      key: string;
      value: string;
    }>,
  ) => void;
  /**
   * The placeholder text for the input.
   */
  placeholder?: string;
  /**
   * The time to display in the input. This is passed by the parent component and can be updated using the setTime prop function provided by the parent component.
   */
  time: string;
}

NylasTimeslotInterval

/**
 * 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;
}

NylasTimeslotPicker

/**
 * 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[];
  /**
   * @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>) => void;
  /**
   * This event is fired when a timeslot is selected.
   */
  onTimeslotSelected?: (event: NylasTimeslotPickerCustomEvent<Timeslot>) => void;
  /**
   * The selected date.
   */
  selectedDate?: Date;
  /**
   * The selected language.
   */
  selectedLanguage?: string;
  /**
   * The selected timeslot.
   */
  selectedTimeslot?: Timeslot;
  /**
   * The selected timezone.
   */
  selectedTimezone?: string;
}

PaintbrushFillIcon

interface PaintbrushFillIcon {
  height?: string;
  width?: string;
}

PaintbrushIcon

interface PaintbrushIcon {
  height?: string;
  width?: string;
}

PeopleIcon

interface PeopleIcon {
  height?: string;
  width?: string;
}

PersonClipboardIcon

interface PersonClipboardIcon {
  height?: string;
  width?: string;
}

PersonIcon

interface PersonIcon {
  height?: string;
  width?: string;
}

PlayIcon

interface PlayIcon {
  height?: string;
  width?: string;
}

PlusIcon

interface PlusIcon {
  height?: string;
  width?: string;
}

RadioButtonGroup

/**
 * 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 }[];
  /**
   * 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;
}

RefreshIcon

interface RefreshIcon {
  height?: string;
  width?: string;
}

ReplyAllIcon

interface ReplyAllIcon {
  height?: string;
  width?: string;
}

ReplyIcon

interface ReplyIcon {
  height?: string;
  width?: string;
}

SearchIcon

interface SearchIcon {
  height?: string;
  width?: string;
}

SelectDropdown

/**
 * 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;
  /**
   * 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;
  /**
   * If true, the dropdown is required for form submission
   */
  required?: boolean;
  /**
   * Should show chevron on button
   */
  withChevron?: boolean;
  /**
   * Should show search input
   */
  withSearch?: boolean;
}

SentIcon

interface SentIcon {
  height?: string;
  width?: string;
}

SpamIcon

interface SpamIcon {
  height?: string;
  width?: string;
}

StarIcon

interface StarIcon {
  height?: string;
  width?: string;
}

StopIcon

interface StopIcon {
  height?: string;
  width?: string;
}

TextareaComponent

/**
 * `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;
}

TimePeriodSelector

interface TimePeriodSelector {
  /**
   * The default selected number.
   */
  defaultSelectedNumber: number;
  /**
   * The default selected time period.
   */
  defaultSelectedPeriod: string;
  onTimePeriodChanged?: (event: TimePeriodSelectorCustomEvent<{ number: number; period: string }>) => void;
  timePeriods?: string[];
}

ToggleSwitch

/**
 * 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;
}

TooltipComponent

/**
 * The `tooltip-component` component is a UI component that displays a tooltip.
 */
interface TooltipComponent {
  /**
   * The position of the tooltip.
   */
  position?: 'top' | 'bottom' | 'left' | 'right';
}

TranslateIcon

interface TranslateIcon {
  height?: string;
  width?: string;
}

TrashFillIcon

interface TrashFillIcon {
  height?: string;
  width?: string;
}

TrashIcon

interface TrashIcon {
  height?: string;
  width?: string;
}

UnderlineIcon

interface UnderlineIcon {
  height?: string;
  width?: string;
}

WarningIcon

interface WarningIcon {
  height?: string;
  width?: string;
}

ZoomIcon

interface ZoomIcon {
  height?: string;
  width?: string;
}

IntrinsicElements

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;
  '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-picker': NylasDatePicker;
  'nylas-editor-tabs': NylasEditorTabs;
  'nylas-event-description': NylasEventDescription;
  'nylas-event-duration': NylasEventDuration;
  'nylas-event-info': NylasEventInfo;
  'nylas-event-limits': NylasEventLimits;
  'nylas-event-location': NylasEventLocation;
  'nylas-event-title': NylasEventTitle;
  'nylas-feedback-form': NylasFeedbackForm;
  'nylas-form-card': NylasFormCard;
  'nylas-if-state': NylasIfState;
  'nylas-limit-future-bookings': NylasLimitFutureBookings;
  'nylas-list-configurations': NylasListConfigurations;
  'nylas-locale-switch': NylasLocaleSwitch;
  'nylas-login': NylasLogin;
  '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-provider': NylasProvider;
  'nylas-reminder-emails': NylasReminderEmails;
  'nylas-reminder-time': NylasReminderTime;
  'nylas-scheduler-editor': NylasSchedulerEditor;
  'nylas-scheduling': NylasScheduling;
  'nylas-scheduling-method': NylasSchedulingMethod;
  '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;
}

IntrinsicElements

interface IntrinsicElements {
  'add-circle-icon': LocalJSX.AddCircleIcon & JSXBase.HTMLAttributes<HTMLAddCircleIconElement>;
  'archive-icon': LocalJSX.ArchiveIcon & JSXBase.HTMLAttributes<HTMLArchiveIconElement>;
  'arrow-icon': LocalJSX.ArrowIcon & JSXBase.HTMLAttributes<HTMLArrowIconElement>;
  'bold-icon': LocalJSX.BoldIcon & JSXBase.HTMLAttributes<HTMLBoldIconElement>;
  'button-component': LocalJSX.ButtonComponent & JSXBase.HTMLAttributes<HTMLButtonComponentElement>;
  'calendar-agenda-fill-icon': LocalJSX.CalendarAgendaFillIcon & JSXBase.HTMLAttributes<HTMLCalendarAgendaFillIconElement>;
  'calendar-agenda-icon': LocalJSX.CalendarAgendaIcon & JSXBase.HTMLAttributes<HTMLCalendarAgendaIconElement>;
  'calendar-cancel-icon': LocalJSX.CalendarCancelIcon & JSXBase.HTMLAttributes<HTMLCalendarCancelIconElement>;
  'calendar-check-icon': LocalJSX.CalendarCheckIcon & JSXBase.HTMLAttributes<HTMLCalendarCheckIconElement>;
  'calendar-icon': LocalJSX.CalendarIcon & JSXBase.HTMLAttributes<HTMLCalendarIconElement>;
  'calendar-info-icon': LocalJSX.CalendarInfoIcon & JSXBase.HTMLAttributes<HTMLCalendarInfoIconElement>;
  'calendar-patterns-icon': LocalJSX.CalendarPatternsIcon & JSXBase.HTMLAttributes<HTMLCalendarPatternsIconElement>;
  /**
   * 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<HTMLCheckboxComponentElement>;
  'checkmark-circle-icon': LocalJSX.CheckmarkCircleIcon & JSXBase.HTMLAttributes<HTMLCheckmarkCircleIconElement>;
  'checkmark-icon': LocalJSX.CheckmarkIcon & JSXBase.HTMLAttributes<HTMLCheckmarkIconElement>;
  'chevron-icon': LocalJSX.ChevronIcon & JSXBase.HTMLAttributes<HTMLChevronIconElement>;
  'clock-icon': LocalJSX.ClockIcon & JSXBase.HTMLAttributes<HTMLClockIconElement>;
  'close-icon': LocalJSX.CloseIcon & JSXBase.HTMLAttributes<HTMLCloseIconElement>;
  'copy-icon': LocalJSX.CopyIcon & JSXBase.HTMLAttributes<HTMLCopyIconElement>;
  'delete-icon': LocalJSX.DeleteIcon & JSXBase.HTMLAttributes<HTMLDeleteIconElement>;
  'document-refresh-icon': LocalJSX.DocumentRefreshIcon & JSXBase.HTMLAttributes<HTMLDocumentRefreshIconElement>;
  'dragable-icon': LocalJSX.DragableIcon & JSXBase.HTMLAttributes<HTMLDragableIconElement>;
  'edit-icon': LocalJSX.EditIcon & JSXBase.HTMLAttributes<HTMLEditIconElement>;
  'envelope-fill-icon': LocalJSX.EnvelopeFillIcon & JSXBase.HTMLAttributes<HTMLEnvelopeFillIconElement>;
  'envelope-icon': LocalJSX.EnvelopeIcon & JSXBase.HTMLAttributes<HTMLEnvelopeIconElement>;
  'eye-icon': LocalJSX.EyeIcon & JSXBase.HTMLAttributes<HTMLEyeIconElement>;
  'feedback-icon': LocalJSX.FeedbackIcon & JSXBase.HTMLAttributes<HTMLFeedbackIconElement>;
  'flow-icon': LocalJSX.FlowIcon & JSXBase.HTMLAttributes<HTMLFlowIconElement>;
  'folder-icon': LocalJSX.FolderIcon & JSXBase.HTMLAttributes<HTMLFolderIconElement>;
  'forward-icon': LocalJSX.ForwardIcon & JSXBase.HTMLAttributes<HTMLForwardIconElement>;
  'globe-icon': LocalJSX.GlobeIcon & JSXBase.HTMLAttributes<HTMLGlobeIconElement>;
  'google-logo-icon': LocalJSX.GoogleLogoIcon & JSXBase.HTMLAttributes<HTMLGoogleLogoIconElement>;
  'google-meet-icon': LocalJSX.GoogleMeetIcon & JSXBase.HTMLAttributes<HTMLGoogleMeetIconElement>;
  'inbox-icon': LocalJSX.InboxIcon & JSXBase.HTMLAttributes<HTMLInboxIconElement>;
  'info-icon': LocalJSX.InfoIcon & JSXBase.HTMLAttributes<HTMLInfoIconElement>;
  /**
   * 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<HTMLInputColorPickerElement>;
  /**
   * 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<HTMLInputComponentElement>;
  /**
   * 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<HTMLInputDropdownElement>;
  /**
   * 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<HTMLInputImageUrlElement>;
  'italic-icon': LocalJSX.ItalicIcon & JSXBase.HTMLAttributes<HTMLItalicIconElement>;
  'loading-icon': LocalJSX.LoadingIcon & JSXBase.HTMLAttributes<HTMLLoadingIconElement>;
  'location-icon': LocalJSX.LocationIcon & JSXBase.HTMLAttributes<HTMLLocationIconElement>;
  'location-off-icon': LocalJSX.LocationOffIcon & JSXBase.HTMLAttributes<HTMLLocationOffIconElement>;
  'microsoft-logo-icon': LocalJSX.MicrosoftLogoIcon & JSXBase.HTMLAttributes<HTMLMicrosoftLogoIconElement>;
  'microsoft-teams-icon': LocalJSX.MicrosoftTeamsIcon & JSXBase.HTMLAttributes<HTMLMicrosoftTeamsIconElement>;
  'multi-select-dropdown': LocalJSX.MultiSelectDropdown & JSXBase.HTMLAttributes<HTMLMultiSelectDropdownElement>;
  /**
   * The `nylas-additional-participants` component is a form input for adding additional participants to an event.
   */
  'nylas-additional-participants': LocalJSX.NylasAdditionalParticipants & JSXBase.HTMLAttributes<HTMLNylasAdditionalParticipantsElement>;
  /**
   * The `nylas-availability-picker` component is a form input for selecting availability (open hours).
   */
  'nylas-availability-picker': LocalJSX.NylasAvailabilityPicker & JSXBase.HTMLAttributes<HTMLNylasAvailabilityPickerElement>;
  /**
   * The `nylas-booked-event-card` component is a UI component that displays the booked event card.
   */
  'nylas-booked-event-card': LocalJSX.NylasBookedEventCard & JSXBase.HTMLAttributes<HTMLNylasBookedEventCardElement>;
  /**
   * The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.
   */
  'nylas-booking-calendar-picker': LocalJSX.NylasBookingCalendarPicker & JSXBase.HTMLAttributes<HTMLNylasBookingCalendarPickerElement>;
  /**
   * 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<HTMLNylasBookingConfirmationRedirectElement>;
  /**
   * 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<HTMLNylasBookingConfirmationTypeElement>;
  /**
   * 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<HTMLNylasBookingFormElement>;
  /**
   * 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<HTMLNylasBookingFormConfigElement>;
  /**
   * 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<HTMLNylasBufferTimeElement>;
  /**
   * The `nylas-calendar-picker` component is a form input for selecting calendars to check availability.
   */
  'nylas-calendar-picker': LocalJSX.NylasCalendarPicker & JSXBase.HTMLAttributes<HTMLNylasCalendarPickerElement>;
  /**
   * 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<HTMLNylasCancelBookingFormElement>;
  /**
   * The `nylas-cancellation-policy` component is a form input for the cancellation policy message of an event.
   */
  'nylas-cancellation-policy': LocalJSX.NylasCancellationPolicy & JSXBase.HTMLAttributes<HTMLNylasCancellationPolicyElement>;
  /**
   * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.
   */
  'nylas-cancelled-event-card': LocalJSX.NylasCancelledEventCard & JSXBase.HTMLAttributes<HTMLNylasCancelledEventCardElement>;
  /**
   * 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<HTMLNylasConfirmationEmailElement>;
  /**
   * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.
   */
  'nylas-confirmed-event-card': LocalJSX.NylasConfirmedEventCard & JSXBase.HTMLAttributes<HTMLNylasConfirmedEventCardElement>;
  /**
   * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants.
   */
  'nylas-connected-calendars': LocalJSX.NylasConnectedCalendars & JSXBase.HTMLAttributes<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
   * <nylas-custom-booking-flow>
   *   <div slot="inputs">
   *     <nylas-booking-confirmation-type></nylas-booking-confirmation-type>
   *     <nylas-booking-confirmation-redirect></nylas-booking-confirmation-redirect>
   *   </div>
   * </nylas-custom-booking-flow>
   * ```
   */
  'nylas-custom-booking-flow': LocalJSX.NylasCustomBookingFlow & JSXBase.HTMLAttributes<HTMLNylasCustomBookingFlowElement>;
  /**
   * 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<HTMLNylasCustomEventSlugElement>;
  /**
   * The `nylas-customize-booking-settings` component is a UI component that displays the booking calendar picker.
   */
  'nylas-customize-booking-settings': LocalJSX.NylasCustomizeBookingSettings & JSXBase.HTMLAttributes<HTMLNylasCustomizeBookingSettingsElement>;
  /**
   * The `nylas-date-picker` component is a UI component that allows users to select a date.
   */
  'nylas-date-picker': LocalJSX.NylasDatePicker & JSXBase.HTMLAttributes<HTMLNylasDatePickerElement>;
  /**
   * 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<HTMLNylasEditorTabsElement>;
  /**
   * The `nylas-event-description` component is a form input for the description of an event.
   */
  'nylas-event-description': LocalJSX.NylasEventDescription & JSXBase.HTMLAttributes<HTMLNylasEventDescriptionElement>;
  /**
   * The `nylas-event-duration` component is a form input for the duration of an event.
   */
  'nylas-event-duration': LocalJSX.NylasEventDuration & JSXBase.HTMLAttributes<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
   * <nylas-event-info>
   *   <div slot="inputs">
   *     <nylas-event-title></nylas-event-title>
   *     <nylas-event-description></nylas-event-description>
   *     <nylas-event-duration></nylas-event-duration>
   *     <nylas-lcation-component></nylas-event-location>
   *   </div>
   * </nylas-event-info>
   * ```
   */
  'nylas-event-info': LocalJSX.NylasEventInfo & JSXBase.HTMLAttributes<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
   * <nylas-event-limits>
   *   <div slot="inputs">
   *     <nylas-limit-future-bookings></nylas-limit-future-bookings>
   *     <nylas-min-cancellation-notice></nylas-min-cancellation-notice>
   *   </div>
   * </nylas-event-limits>
   * ```
   */
  'nylas-event-limits': LocalJSX.NylasEventLimits & JSXBase.HTMLAttributes<HTMLNylasEventLimitsElement>;
  /**
   * The `nylas-event-location` component is a form input for the location of an event.
   */
  'nylas-event-location': LocalJSX.NylasEventLocation & JSXBase.HTMLAttributes<HTMLNylasEventLocationElement>;
  /**
   * The `nylas-event-title` component is a form input for the title of an event.
   */
  'nylas-event-title': LocalJSX.NylasEventTitle & JSXBase.HTMLAttributes<HTMLNylasEventTitleElement>;
  /**
   * The `nylas-feedback-form` component is a UI component that displays the booked event card.
   */
  'nylas-feedback-form': LocalJSX.NylasFeedbackForm & JSXBase.HTMLAttributes<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.
   */
  'nylas-form-card': LocalJSX.NylasFormCard & JSXBase.HTMLAttributes<HTMLNylasFormCardElement>;
  'nylas-if-state': LocalJSX.NylasIfState & JSXBase.HTMLAttributes<HTMLNylasIfStateElement>;
  /**
   * 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<HTMLNylasLimitFutureBookingsElement>;
  /**
   * The `nylas-list-configurations` component displays a list of scheduling pages.
   */
  'nylas-list-configurations': LocalJSX.NylasListConfigurations & JSXBase.HTMLAttributes<HTMLNylasListConfigurationsElement>;
  /**
   * 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<HTMLNylasLocaleSwitchElement>;
  'nylas-login': LocalJSX.NylasLogin & JSXBase.HTMLAttributes<HTMLNylasLoginElement>;
  'nylas-logo': LocalJSX.NylasLogo & JSXBase.HTMLAttributes<HTMLNylasLogoElement>;
  /**
   * 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<HTMLNylasMinBookingNoticeElement>;
  /**
   * 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<HTMLNylasMinCancellationNoticeElement>;
  /**
   * The `nylas-notification` component is a UI component that displays notifications.
   */
  'nylas-notification': LocalJSX.NylasNotification & JSXBase.HTMLAttributes<HTMLNylasNotificationElement>;
  /**
   * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.
   */
  'nylas-organizer-confirmation-card': LocalJSX.NylasOrganizerConfirmationCard & JSXBase.HTMLAttributes<HTMLNylasOrganizerConfirmationCardElement>;
  /**
   * 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<HTMLNylasPageNameElement>;
  /**
   * 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<HTMLNylasPageStylingElement>;
  /**
   * 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<HTMLNylasParticipantBookingCalendarsElement>;
  /**
   * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.
   */
  'nylas-participants-custom-availability': LocalJSX.NylasParticipantsCustomAvailability & JSXBase.HTMLAttributes<HTMLNylasParticipantsCustomAvailabilityElement>;
  /**
   * The Nylas Provider component.
   * This component is used to manage the Nylas Provider.
   * It is used to manage the Nylas Auth instance, the Nylas Connector instance,
   * and the Nylas Store instance.
   */
  'nylas-provider': LocalJSX.NylasProvider & JSXBase.HTMLAttributes<HTMLNylasProviderElement>;
  /**
   * 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<HTMLNylasReminderEmailsElement>;
  /**
   * The `nylas-reminder-time` component is a form input for the reminder time before an event.
   */
  'nylas-reminder-time': LocalJSX.NylasReminderTime & JSXBase.HTMLAttributes<HTMLNylasReminderTimeElement>;
  /**
   * 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<HTMLNylasSchedulerEditorElement>;
  /**
   * The `nylas-scheduling` component is used to display the Nylas Scheduling UI.
   */
  'nylas-scheduling': LocalJSX.NylasScheduling & JSXBase.HTMLAttributes<HTMLNylasSchedulingElement>;
  /**
   * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker.
   */
  'nylas-scheduling-method': LocalJSX.NylasSchedulingMethod & JSXBase.HTMLAttributes<HTMLNylasSchedulingMethodElement>;
  /**
   * The `nylas-selected-event-card` component is a UI component that displays the selected event card.
   */
  'nylas-selected-event-card': LocalJSX.NylasSelectedEventCard & JSXBase.HTMLAttributes<HTMLNylasSelectedEventCardElement>;
  /**
   * 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<HTMLNylasTimeWindowPickerElement>;
  /**
   * 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<HTMLNylasTimeslotIntervalElement>;
  /**
   * 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<HTMLNylasTimeslotPickerElement>;
  'paintbrush-fill-icon': LocalJSX.PaintbrushFillIcon & JSXBase.HTMLAttributes<HTMLPaintbrushFillIconElement>;
  'paintbrush-icon': LocalJSX.PaintbrushIcon & JSXBase.HTMLAttributes<HTMLPaintbrushIconElement>;
  'people-icon': LocalJSX.PeopleIcon & JSXBase.HTMLAttributes<HTMLPeopleIconElement>;
  'person-clipboard-icon': LocalJSX.PersonClipboardIcon & JSXBase.HTMLAttributes<HTMLPersonClipboardIconElement>;
  'person-icon': LocalJSX.PersonIcon & JSXBase.HTMLAttributes<HTMLPersonIconElement>;
  'play-icon': LocalJSX.PlayIcon & JSXBase.HTMLAttributes<HTMLPlayIconElement>;
  'plus-icon': LocalJSX.PlusIcon & JSXBase.HTMLAttributes<HTMLPlusIconElement>;
  /**
   * 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<HTMLRadioButtonGroupElement>;
  'refresh-icon': LocalJSX.RefreshIcon & JSXBase.HTMLAttributes<HTMLRefreshIconElement>;
  'reply-all-icon': LocalJSX.ReplyAllIcon & JSXBase.HTMLAttributes<HTMLReplyAllIconElement>;
  'reply-icon': LocalJSX.ReplyIcon & JSXBase.HTMLAttributes<HTMLReplyIconElement>;
  'search-icon': LocalJSX.SearchIcon & JSXBase.HTMLAttributes<HTMLSearchIconElement>;
  /**
   * 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<HTMLSelectDropdownElement>;
  'sent-icon': LocalJSX.SentIcon & JSXBase.HTMLAttributes<HTMLSentIconElement>;
  'spam-icon': LocalJSX.SpamIcon & JSXBase.HTMLAttributes<HTMLSpamIconElement>;
  'star-icon': LocalJSX.StarIcon & JSXBase.HTMLAttributes<HTMLStarIconElement>;
  'stop-icon': LocalJSX.StopIcon & JSXBase.HTMLAttributes<HTMLStopIconElement>;
  /**
   * `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<HTMLTextareaComponentElement>;
  'time-period-selector': LocalJSX.TimePeriodSelector & JSXBase.HTMLAttributes<HTMLTimePeriodSelectorElement>;
  /**
   * 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<HTMLToggleSwitchElement>;
  /**
   * The `tooltip-component` component is a UI component that displays a tooltip.
   */
  'tooltip-component': LocalJSX.TooltipComponent & JSXBase.HTMLAttributes<HTMLTooltipComponentElement>;
  'translate-icon': LocalJSX.TranslateIcon & JSXBase.HTMLAttributes<HTMLTranslateIconElement>;
  'trash-fill-icon': LocalJSX.TrashFillIcon & JSXBase.HTMLAttributes<HTMLTrashFillIconElement>;
  'trash-icon': LocalJSX.TrashIcon & JSXBase.HTMLAttributes<HTMLTrashIconElement>;
  'underline-icon': LocalJSX.UnderlineIcon & JSXBase.HTMLAttributes<HTMLUnderlineIconElement>;
  'warning-icon': LocalJSX.WarningIcon & JSXBase.HTMLAttributes<HTMLWarningIconElement>;
  'zoom-icon': LocalJSX.ZoomIcon & JSXBase.HTMLAttributes<HTMLZoomIconElement>;
}

BaseNylasConnectorInterface

export interface BaseNylasConnectorInterface {
  resetStores(): void;
  init(): void;
}

NylasAuthConnectorInterface

export interface NylasAuthConnectorInterface extends BaseNylasConnectorInterface {
  nylasAuth: NylasAuthType;
  nylasAuthStore: NylasAuthStoreType;
  get authStore(): NylasAuthStoreType;
  get auth(): NylasAuthConnector;
  logout(): Promise<void>;
}

NylasSchedulerConnectorInterface

export interface NylasSchedulerConnectorInterface extends BaseNylasConnectorInterface {
  schedulerAPIURL: string;
  nylasSchedulerStore: NylasSchedulerStoreType;
  get schedulerStore(): NylasSchedulerStoreType;
  get scheduler(): NylaSchedulerAPIConnector;
}

NylasSchedulerConfigConnectorInterface

export interface NylasSchedulerConfigConnectorInterface extends BaseNylasConnectorInterface {
  nylasSchedulerConfigStore: NylasSchedulerConfigStoreType;
  get schedulerConfigStore(): NylasSchedulerConfigStoreType;
  get schedulerConfig(): NylasSchedulerConfigAPIConnector;
}

NylasConnectorInterface

export interface NylasConnectorInterface extends NylasAuthConnectorInterface, NylasSchedulerConnectorInterface {}

PublicMethods

export type PublicMethods<T> = {
  [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;
}[keyof T];

NylasConnectorPublicMethods

export type NylasConnectorPublicMethods = PublicMethods<NylasConnector>;

NylasSchedulerConfigConnectorOptions

type NylasSchedulerConfigConnectorOptions = {
  nylasSchedulerConfigStore: NylasSchedulerConfigStoreType;
  nylasApiRequest?: NylasApiRequest;
};

PublicMethods

export type PublicMethods<T> = {
  [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;
}[keyof T];

NylasSchedulerConfigConnectorPublicMethods

export type NylasSchedulerConfigConnectorPublicMethods = PublicMethods<NylasSchedulerConfigConnector>;

ErrorDetails

export interface ErrorDetails {
  title: string;
  message: string;
  category: ErrorCategory;
}

NylasSchedulerConnectorOptions

type NylasSchedulerConnectorOptions = {
  schedulerAPIURL: string;
  nylasSchedulerStore: NylasSchedulerStoreType;
  sessionId?: string;
  configId?: string;
  slug?: string;
  clientId?: string;
};

PublicMethods

export type PublicMethods<T> = {
  [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;
}[keyof T];

NylasSchedulerConnectorPublicMethods

export type NylasSchedulerConnectorPublicMethods = PublicMethods<NylasSchedulerConnector>;

NylasSchedulerConfigAPIConnectorOptions

type NylasSchedulerConfigAPIConnectorOptions = {
  nylasApiRequest?: NylasApiRequest;
  nylasSchedulerConfigStore: NylasSchedulerConfigStoreType;
};

NylasSchedulerAPIConnectorOptions

type NylasSchedulerAPIConnectorOptions = {
  schedulerAPIURL: string;
  schedulerStore: NylasSchedulerStoreType;
  sessionId?: string;
  configId?: string;
  slug?: string;
  clientId?: string;
};

RoutePath

export type RoutePath = string;

RouteParams

// RouteParams is a type that takes a RoutePath and returns an object with the route params as keys
// and the value of the route param as the value of the key
// Example:
//   RoutePath: '/:mailboxId/:messageId'
export type RouteParams<Path extends string> = Path extends `${infer _Start}:${infer Param}/${infer Rest}`
  ? { [key in Param | keyof RouteParams<Rest>]: string }
  : Path extends `${infer _Start}:${infer Param}`
    ? { [key in Param]: string }
    : {};

RouteListener

export type RouteListener<Path extends string> = (route: Path, path: string, routeParams: RouteParams<Path>) => Promise<void>;

RouterInterface

export interface RouterInterface {
  init(): void;
  addRouteChangeListener<Path extends RoutePath>(route: Path, listener: RouteListener<Path>): void;
  setRoute(route: string): void;
  navigate(route: string, shallow: boolean): void;
  getRoute(): string;
  getBasePath(): string;
  matchRoute(route: string, path: string): boolean;
}

NylasAuthSessionStoreState

export interface NylasAuthSessionStoreState {
  isAuthenticated: boolean;
  tokenInfo: IDToken | null;
  state: DataState;
}

NylasAuthSessionStoreType

export type NylasAuthSessionStoreType = ReturnType<typeof CreateNylasAuthSessionStore>;

NylasAuthStoreState

export interface NylasAuthStoreState {
  isAuthenticated: boolean;
  tokenInfo: TokenInfo | null;
  state: DataState;
}

NylasAuthStoreType

export type NylasAuthStoreType = ReturnType<typeof CreateNylasAuthStore>;

RecursivePartial

type RecursivePartial<T> = {
  [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object | undefined ? RecursivePartial<T[P]> : T[P];
};

NylasSchedulerConfigStoreState

export interface NylasSchedulerConfigStoreState {
  /**
   * The selected configuration.
   * This is the configuration that is currently selected, use it to populate default values for new configurations.
   */
  selectedConfiguration: RecursivePartial<Configuration>;
  /**
   * The list of configurations.
   * This is the list of configurations that the user has created.
   */
  configurations: Configuration[];
  /**
   * The list of calendars.
   * This is the list of calendars that the user has access to.
   */
  calendars: Calendar[];
  /**
   * The current user.
   * This is the user that is currently logged in.
   */
  currentUser: User | null;
  /**
   * The current action.
   * This is the current action that the user is performing.
   */
  action: 'create' | 'edit' | null;
  /**
   * The additional participants.
   */
  additionalParticipants: AdditionalParticipant[];
  /**
   * The next cursor for list configurations.
   */
  listConfigurationsNextCursor: string | null;
  /**
   * The conference providers.
   */
  conferenceProviders?: Record<'microsoft' | 'zoom' | 'google', string>;
  /**
   * The flag to determine if the slug is required
   */
  requiresSlug: boolean;
}

NylasSchedulerConfigStoreType

export type NylasSchedulerConfigStoreType = ReturnType<typeof CreateNylasSchedulerConfigStore>;

CreateNylasSchedulerConfigStoreReturnType

export type CreateNylasSchedulerConfigStoreReturnType = ObservableMap<NylasSchedulerConfigStoreState> & {
  /**
   * Reset the selected configuration to the default state.
   * This is used to reset the selected configuration to the default state instead of setting it to an empty object.
   */
  resetSelectedConfiguration: () => void;
};

AvailabilityTimeslot

export type AvailabilityTimeslot = {
  emails: string[];
  start_time: Date;
  end_time: Date;
};

LoadingState

export type LoadingState = {
  api: 'availability' | 'createBooking' | 'cancelBooking' | 'rescheduleBooking';
};

ConfigSettings

export type ConfigSettings = {
  configuration_id: string;
  scheduler: {
    available_days_in_future: number;
    min_cancellation_notice: number;
    min_booking_notice: number;
    rescheduling_url?: string;
    cancellation_url?: string;
    cancellation_policy?: string;
    hide_additional_guests?: boolean;
    hide_cancellation_options?: boolean;
    hide_rescheduling_options?: boolean;
    additional_fields?: Record<string, AdditionalFields>;
    confirmation_redirect_url?: string;
    organizer_confirmation_url?: string;
  };
  organizer: {
    name: string;
    email: string;
  };
  slug: string;
  appearance: Appearance;
  booking_type: string;
  name: string;
};

NylasSchedulerStoreState

export interface NylasSchedulerStoreState {
  selectedDate: Date | null;
  selectedLanguage: string;
  selectedTimezone: string;
  selectedTimeslot: Timeslot | null;
  availabilityOrderEmails: string[];
  showBookingForm: boolean;
  selectableDates: Date[] | null;
  eventDuration: number;
  availability: AvailabilityTimeslot[];
  state: DataState;
  eventInfo: NylasEvent | null;
  cancelledEventInfo: Partial<NylasEvent> | null;
  reschedulingEventInfo?: NylasEvent;
  confirmedEventInfo?: NylasEvent;
  bookingInfo?: NylasSchedulerBookingData;
  rescheduleBookingId?: string;
  cancelBookingId?: string;
  isLoading: boolean;
  nylasBranding?: boolean;
  configSettings?: ConfigSettings;
  organizerConfirmationBookingId?: string;
  rejectBookingId?: string;
  organizerConfirmationSalt?: string;
}

NylasSchedulerStoreType

export type NylasSchedulerStoreType = ReturnType<typeof CreateNylasSchedulerStore>;

NylasResponse

export interface NylasResponse<Data = any> {
  request_id: string;
  data?: Data;
  error?: {
    message: string;
    type: string;
  };
}

OpenHours

// Avaliability
export interface OpenHours {
  days: number[];
  exDates: string[];
  timezone: string;
  start: string;
  end: string;
}

MeetingBuffer

export interface MeetingBuffer {
  before: number;
  after: number;
}

UpdateConfiguration

// Scheduling
export interface UpdateConfiguration extends Omit<Configuration, 'id'> {}

ParticipantAvailability

export interface ParticipantAvailability {
  calendar_ids: string[];
  open_hours?: OpenHours[];
}

NylasSchedulerBookingParticipant

export type NylasSchedulerBookingParticipant = { name: string; email: string };

NylasSchedulerBookingData

export type NylasSchedulerBookingData = {
  primaryParticipant: NylasSchedulerBookingParticipant;
  startTime?: Date;
  endTime?: Date;
  timezone?: string;
  guests?: NylasSchedulerBookingParticipant[];
  additionalFields?: Record<
    string,
    {
      value: string;
      type: string;
    }
  >;
};

OpenHour

export type OpenHour = {
  days: number[]; // [1, 2, 3, 4, 5]
  start: string; // "09:00"
  end: string; // "17:00"
  timezone: string; // "America/Los_Angeles"
};

Timeslot

export type Timeslot = {
  start_time: Date;
  end_time: Date;
  emails?: string[];
};

ThemeConfig

export type ThemeConfig = Partial<{
  '--nylas-primary': string;
  '--nylas-info': string;
  '--nylas-success': string;
  '--nylas-warning': string;
  '--nylas-error': string;
  '--nylas-error-pressed': string;
  '--nylas-base-0': string;
  '--nylas-base-25': string;
  '--nylas-base-50': string;
  '--nylas-base-100': string;
  '--nylas-base-200': string;
  '--nylas-base-300': string;
  '--nylas-base-400': string;
  '--nylas-base-500': string;
  '--nylas-base-600': string;
  '--nylas-base-700': string;
  '--nylas-base-800': string;
  '--nylas-base-900': string;
  '--nylas-base-950': string;
  '--nylas-font-family': string;
  '--nylas-font-size': string;
  '--nylas-border-radius': string;
  '--nylas-border-radius-2x': string;
  '--nylas-border-radius-3x': string;
}>;

Notification

export type Notification = {
  id: string;
  type: NotificationType;
  title: string;
  code?: number;
  category: string;
  description?: string;
  ttl?: number | 'none';
};

BookingType

export type BookingType = 'booking' | 'organizer-confirmation' | 'custom-confirmation';

AvailabilityMethod

export type AvailabilityMethod = 'max-fairness' | 'max-availability' | 'collective';

ConferenceProvider

export type ConferenceProvider = 'GoogleMeetConferenceProvider' | 'MicrosoftTeamsConferenceProvider' | 'ZoomConferenceProvider' | 'OnlineMeetingProviderMicrosoftTeams';

ReminderMethod

export type ReminderMethod = 'email' | 'webhook';

Rules

export interface Rules {
  availability_method: AvailabilityMethod;
  buffer: MeetingBuffer;
  default_open_hours: OpenHours[];
  round_robin_group_id: string;
}

ConferenceDetail

export interface ConferenceDetail {
  meeting_code?: string; // zoom, GTM, microsoft teams
  password?: string; // zoom, webex
  url?: string; // zoom, webex, GTM, meet, microsoft teams
  pin?: string; // webex, meet
  phone?: string[]; // GTM, meet, microsoft teams
}

Conference

export interface Conference {
  provider?: ConferenceProvider;
  details?: ConferenceDetail;
  autocreate?: { [key: string]: any };
}

ParticipantBooking

export interface ParticipantBooking {
  calendar_id: string;
}

Participant

export interface Participant {
  email: string;
  name?: string;
  is_organizer?: boolean;
  availability?: ParticipantAvailability;
  booking?: ParticipantBooking;
}

EventReminder

export interface EventReminder {
  type: ReminderMethod;
  minutes_before_event: number;
  recipient?: string;
  email_subject?: string;
}

Availability

export interface Availability {
  duration_minutes: number;
  interval_minutes?: number;
  round_to?: number;
  availability_rules?: Rules;
}

EventBooking

export interface EventBooking {
  title: string;
  description?: string;
  location?: string;
  timezone?: string;
  booking_type: BookingType;
  conferencing?: Conference;
  hide_participants?: boolean;
  disable_emails?: boolean;
  reminders?: EventReminder[];
}

Appearance

export interface Appearance {
  color?: string;
  submit_button_label?: string;
  thank_you_message?: string;
  company_logo_url?: string;
}

Scheduler

export interface Scheduler {
  available_days_in_future: number;
  min_cancellation_notice: number;
  min_booking_notice: number;
  rescheduling_url?: string;
  cancellation_url?: string;
  organizer_confirmation_url?: string;
  cancellation_policy?: string;
  hide_additional_guests?: boolean;
  hide_cancellation_options?: boolean;
  hide_rescheduling_options?: boolean;
  additional_fields?: Record<string, AdditionalFields>;
  email_template?: EmailTemplate;
  confirmation_redirect_url?: string;
}

AdditionalFields

export interface AdditionalFields {
  type: string;
  required: boolean;
  order: number;
  options?: string[];
  label?: string;
  default?: string;
}

EmailTemplate

export interface EmailTemplate {
  logo: string;
  booking_confirmed: BookingConfirmed;
}

BookingConfirmed

export interface BookingConfirmed {
  title: string;
  body: string;
}

Configuration

export interface Configuration {
  id: string;
  version: string;
  requires_session_auth?: boolean;
  participants: Participant[];
  availability: Availability;
  event_booking: EventBooking;
  scheduler: Scheduler;
  slug: string;
  appearance: Appearance;
  name: string;
}

Creator

export interface Creator {
  name: string;
  email: string;
}

AdditionalParticipant

export interface AdditionalParticipant {
  name: string;
  email: string;
  calendars: {
    id: string;
    name: string;
    object?: 'calendar';
    is_primary?: boolean;
    is_owned_by_user?: boolean;
    read_only?: boolean;
    timezone?: string;
  }[];
}