nylas-editor-tabs

Overview

The nylas-editor-tabs component is a UI component that displays the editor tabs for the scheduler editor.

Version	`1.1.0-canary.14`
Install (React)	`npm install @nylas/react`
Import (React)	`import { NylasEditorTabs } from '@nylas/react';`

Example

Properties

Property	Attribute	Description	Type	Default
`calendars`	—	The list of calendars to use in the editor when configuring availability.	`Calendar[] \| undefined`	`undefined`
`currentUser`	—	The current logged in user.	`undefined \| { id: string; email: string; name?: string \| undefined; }`	`undefined`
`mode`	`mode`	The mode of the editor. - `app`: The editor is used as a standalone app. - `composable`: The editor is used as a composable component.	`"app" \| "composable" \| undefined`	`'app'`
`schedulerPreviewLink`	`scheduler-preview-link`	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.	`string`	`''`
`selectedConfiguration`	—	The selected configuration to use in the editor when editing an existing configuration or creating a new one.	`Configuration \| undefined`	`undefined`

Events

Event	Description	Type
`cancelButtonClick`	Event emitted when the user clicks the cancel button.	`CustomEvent<void>`
`formSubmitted`	Event emitted on form submission.	`CustomEvent<void>`
`previewButtonClicked`	Event emitted when the user clicks the preview button.	`CustomEvent<HTMLNylasEditorTabsElement>`
`schedulerConfigChanged`	Event emitted when the configuration is changed. This fires for both create and edit actions.	`CustomEvent<{ config: Partial<Configuration>; action: "create" \| "edit"; resetLoadingState?: ((e: CustomEvent<any>) => void) \| undefined; setError?: ((error: Error) => void) \| undefined; }>`

Shadow Parts

Part	Description
`"nap__add-participant"`	[nylas-additional-participants] The add participant button of the component.
`"nap__add-time-range"`	[nylas-availability-picker] The add time range button
`"nap__availability"`	[nylas-availability-picker] The availability container
`"nap__content"`	[nylas-additional-participants] The content of the component.
`"nap__day"`	[nylas-availability-picker] The day container
`"nap__header"`	[nylas-availability-picker] The header of the availability picker
`"nap__input"`	[nylas-additional-participants] The input of the component.
`"nap__remove-participant"`	[nylas-additional-participants] The remove participant button of the component.
`"nap__select-timezone"`	[nylas-availability-picker] The timezone selection container
`"nap__select-timezone-button -[nylas-availability-picker] The timezone selection button"`
`"nap__select-timezone-dropdown-content -[nylas-availability-picker] The timezone selection dropdown content"`
`"nap__subtitle"`	[nylas-additional-participants] The subtitle of the component.
`"nap__time-picker-container -[nylas-availability-picker] The time picker container"`
`"nap__time-picker-input"`	[nylas-availability-picker] The time picker input
`"nap__time-picker-times"`	[nylas-availability-picker] The time picker times
`"nap__time-range"`	[nylas-availability-picker] The time range container
`"nap__time-ranges"`	[nylas-availability-picker] The time ranges container
`"nap__title"`	[nylas-additional-participants] The title of the component.
`"nbcp"`	[nylas-booking-calendar-picker] The booking calendar picker container
`"nbcp__dropdown"`	[nylas-booking-calendar-picker] The dropdown container
`"nbcp__dropdown-button"`	[nylas-booking-calendar-picker] The dropdown button
`"nbcp__dropdown-content"`	[nylas-booking-calendar-picker] The dropdown content
`"nbcp__header"`	[nylas-booking-calendar-picker] The header of the booking calendar picker
`"nbcp__input-label"`	[nylas-booking-calendar-picker] The input label of the booking calendar picker
`"nbt"`	[nylas-buffer-time] The buffer time container
`"nbt__body"`	[nylas-buffer-time] The body of the buffer time
`"nbt__dropdown-after"`	[nylas-buffer-time] The after buffer dropdown container
`"nbt__dropdown-before"`	[nylas-buffer-time] The before buffer dropdown container
`"nbt__dropdown-button-after"`	[nylas-buffer-time] The after buffer dropdown button
`"nbt__dropdown-button-before"`	[nylas-buffer-time] The before buffer dropdown button
`"nbt__dropdown-content-after"`	[nylas-buffer-time] The after buffer dropdown content
`"nbt__dropdown-content-before"`	[nylas-buffer-time] The before buffer dropdown content
`"nbt__header"`	[nylas-buffer-time] The header of the buffer time
`"nbt__preview"`	[nylas-buffer-time] The buffer time preview
`"ncbf"`	[nylas-custom-booking-flow] The custom booking flow container
`"ncbf__dropdown"`	[nylas-custom-booking-flow] The dropdown container
`"ncbf__dropdown-button"`	[nylas-custom-booking-flow] The dropdown button
`"ncbf__dropdown-content"`	[nylas-custom-booking-flow] The dropdown content
`"ncbf__header"`	[nylas-custom-booking-flow] The header of the custom booking flow
`"ncbs"`	[nylas-customize-booking-settings] The booking calendar picker container
`"ncbs__additional_guests"`	[nylas-customize-booking-settings] The additional guests setting
`"ncbs__cancellation_options"`	[nylas-customize-booking-settings] The cancellation options setting
`"ncbs__header"`	[nylas-customize-booking-settings] The header of the booking calendar picker
`"ncbs__rescheduling_options"`	[nylas-customize-booking-settings] The rescheduling options setting
`"ncbs__settings"`	[nylas-customize-booking-settings] The settings container
`"ncbs__settings-div"`	[nylas-customize-booking-settings] The div inside the settings container that contains the checkbox and tooltip for each setting
`"ncp"`	[nylas-calendar-picker] The calendar picker container
`"ncp__dropdown"`	[nylas-calendar-picker] The dropdown container
`"ncp__dropdown-button"`	[nylas-calendar-picker] The dropdown button
`"ncp__dropdown-content"`	[nylas-calendar-picker] The dropdown content
`"ncp__header"`	[nylas-calendar-picker] The header of the calendar picker
`"ncpolicy"`	[nylas-cancellation-policy] The cancellation policy container
`"ncpolicy__textarea"`	[nylas-cancellation-policy] The cancellation policy textarea
`"ned"`	[nylas-event-duration] The event duration container
`"ned__dropdown"`	[nylas-event-duration] The dropdown container for the duration increment
`"ned__dropdown-button"`	[nylas-event-duration] The dropdown button for the duration increment
`"ned__dropdown-content"`	[nylas-event-duration] The dropdown content for the duration increment
`"ned__input_dropdown"`	[nylas-event-duration] The input dropdown container for the duration minutes
`"ned__input_dropdown-content"`	[nylas-event-duration] The dropdown content for the input duration minutes
`"ned__input_dropdown-input"`	[nylas-event-duration] The input for the duration minutes
`"nedesc"`	[nylas-event-description] The event description container
`"nedesc__textarea"`	[nylas-event-description] The event description textarea
`"nel"`	[nylas-event-location] The event location container
`"nel__dropdown"`	[nylas-event-location] The dropdown container
`"nel__dropdown-button"`	[nylas-event-location] The dropdown button
`"nel__dropdown-content"`	[nylas-event-location] The dropdown content
`"nel__location"`	[nylas-event-location] The event location input
`"net"`	[nylas-event-title] The event title container
`"net__dropdown-content"`	[nylas-event-title] The token options container
`"net__title"`	[nylas-event-title] The event title input
`"nlfb"`	[nylas-limit-future-bookings] The limit future bookings container
`"nlfb__number-dropdown"`	[nylas-limit-future-bookings] The number dropdown container
`"nlfb__number-dropdown-button"`	[nylas-limit-future-bookings] The number dropdown button
`"nlfb__number-dropdown-content"`	[nylas-limit-future-bookings] The number dropdown content
`"nlfb__period-dropdown"`	[nylas-limit-future-bookings] The period dropdown container
`"nlfb__period-dropdown-button"`	[nylas-limit-future-bookings] The period dropdown button
`"nlfb__period-dropdown-content"`	[nylas-limit-future-bookings] The period dropdown content
`"nmbn"`	[nylas-min-booking-notice] The minimum booking notice container
`"nmbn__number-dropdown"`	[nylas-min-booking-notice] The number dropdown container
`"nmbn__number-dropdown-button"`	[nylas-min-booking-notice] The number dropdown button
`"nmbn__number-dropdown-content -[nylas-min-booking-notice] The number dropdown content"`
`"nmbn__period-dropdown"`	[nylas-min-booking-notice] The period dropdown container
`"nmbn__period-dropdown-button"`	[nylas-min-booking-notice] The period dropdown button
`"nmbn__period-dropdown-content"`	[nylas-min-booking-notice] The period dropdown content
`"nmcn"`	[nylas-min-cancellation-notice] The minimum cancellation notice container
`"nmcn__number-dropdown"`	[nylas-min-cancellation-notice] The number dropdown container
`"nmcn__number-dropdown-button"`	[nylas-min-cancellation-notice] The number dropdown button
`"nmcn__number-dropdown-content"`	[nylas-min-cancellation-notice] The number dropdown content
`"nmcn__period-dropdown"`	[nylas-min-cancellation-notice] The period dropdown container
`"nmcn__period-dropdown-button"`	[nylas-min-cancellation-notice] The period dropdown button
`"nmcn__period-dropdown-content"`	[nylas-min-cancellation-notice] The period dropdown content
`"nti"`	[nylas-timeslot-interval] The timeslot interval container
`"nti__dropdown"`	[nylas-timeslot-interval] The dropdown container
`"nti__dropdown-button"`	[nylas-timeslot-interval] The dropdown button
`"nti__dropdown-content"`	[nylas-timeslot-interval] The dropdown content
`"nti__header"`	[nylas-timeslot-interval] The header of the timeslot interval picker
`"nti__input-label"`	[nylas-timeslot-interval] The input label of the timeslot interval picker

Built with StencilJS