nylas-editor-tabs

Overview

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.

Version	`1.1.4`
Install (React)	`npm install @nylas/react`
Import (React)	`import { NylasEditorTabs } from '@nylas/react';`
Import (CDN)	`<script type="module"> import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-editor-tabs/nylas-editor-tabs.es.js"; defineCustomElement(); </script>`

Example

Properties

Standalone Props

ⓘ NOTE: The following props are automatically configured when used within nylas-scheduler-editor. Set these props manually only if you’re using the component independently.

Property	Description	Type	Default
`calendars`	The list of calendars to use in the editor when configuring availability.	`Calendar[] \| undefined`	`undefined`
`configurations`	The list of configurations	`Configuration[] \| undefined`	`undefined`
`currentUser`	The current logged in user.	`undefined \| { id: string; email: string; name?: string \| undefined; provider?: string \| undefined; }`	`undefined`
`enableUserFeedback`	This prop is passed down by the parent component to enable or disable user feedback.	`boolean \| undefined`	`true`
`hideEditorTabs`	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	`Tab[] \| undefined`	`[]`
`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`	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 created/updated (after the request is complete). 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; }>`
`schedulerEditorFormUpdated`	Event emitted when the value of a form field changes.	`CustomEvent<{ value: string; name: string; }>`

Shadow Parts

Part	Description
`"editor__footer"`
`"editor__footer-buttons"`
`"editor__footer-cancel"`
`"editor__footer-cta"`
`"editor__footer-preview"`
`"editortab__availability"`
`"editortab__booking-form"`
`"editortab__booking-options"`
`"editortab__event-info"`
`"editortab__participants"`
`"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
`"npca"`	[nylas-participants-custom-availability] The participants custom availability container
`"npca__content"`	[nylas-participants-custom-availability] The content of the participants custom availability
`"npca__header"`	[nylas-participants-custom-availability] The header of the participants custom availability
`"npca__participant-container"`	[nylas-participants-custom-availability] The participant container
`"npca__participant-title"`	[nylas-participants-custom-availability] The participant title
`"npca__participant-toggle--container"`	[nylas-participants-custom-availability] The participant toggle container
`"npca__toggle-input"`	[nylas-participants-custom-availability] The toggle input
`"npca__toggle-label"`	[nylas-participants-custom-availability] The toggle label
`"npca__toggle-slider"`	[nylas-participants-custom-availability] The toggle slider
`"npn"`	The nylas-page-name container
`"npn__body"`	The body of the event communication section
`"npn__drawer-toggle--container"`	The card’s drawer toggle container
`"npn__header"`	The header of the event communication section
`"npn__input-textfield"`	The page name textfield
`"nsm"`	[nylas-scheduling-method] The booking calendar picker container
`"nsm__dropdown"`	[nylas-scheduling-method] The dropdown container
`"nsm__dropdown-button"`	[nylas-scheduling-method] The dropdown button
`"nsm__dropdown-content"`	[nylas-scheduling-method] The dropdown content
`"nsm__header"`	[nylas-scheduling-method] The header of the booking calendar picker
`"nsm__input-label"`	[nylas-scheduling-method] The input label of the booking calendar picker
`"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