@nylas/web-elements 1.1.0-canary.19.c → 1.1.0-canary.19.e

package/dist/nylas-web-elements/p-05833164.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["NylasSchedulerConnector","constructor","schedulerAPIURL","nylasSchedulerStore","sessionId","configId","Error","url","URL","window","location","href","origin","this","init","debug","schedulerStore","scheduler","_schedulerAPIConnector","NylaSchedulerAPIConnector","resetStores","reset","SchedulerView","props","children","isLoading","showNotification","nylasBranding","h","Fragment","class","MessageBanner","_props","nylasSchedulingCss","NylasSchedulingStyle0","genericError","title","type","NotificationType","category","ErrorCategory","Component","NylasScheduling","Date","toLocaleDateString","undefined","dateStyle","connectedCallback","componentWillLoad","schedulerWillLoadEvent","schedulerWillLoad","emit","host","defaultPrevented","stores","CreateNylasSchedulerStore","bookingInfo","defaultSchedulerState","baseProvider","NylasBaseProvider","automaticComponentRegistration","eventOverrides","refConfigId","configurationId","rescheduleBookingRef","rescheduleConfigId","rescheduleBookingId","compactStringToUUIDs","set","bookingRefExtracted","bookingId","cancelBookingRef","cancelConfigId","cancelBookingId","checkIfSessionIdOrConfigIdExists","getStore","nylasSchedulerConnector","schedulerApiUrl","themeConfig","key","value","Object","entries","style","setProperty","componentDidLoad","settings","getUISettings","nylasSchedulerError","getErrorObject","error","availableDaysInFuture","get","available_days_in_future","selectedTimeslot","start_time","isTimeslotValid","selectedDate","availability","result","length","today","startTime","endTime","endTimeForAvailableDaysInFuture","validateAvailableDaysInFuture","getTime","getAvailability","_selectedDate","firstAvailableDate","find","timeslot","componentDisconnected","bookingInfoChanged","newVal","rescheduleBookingRefChanged","setConfigId","cancelBookingRefChanged","registerComponentHandler","event","registerComponent","detail","unregisterComponentHandler","unregisterComponent","monthChangedHandler","date","bookButtonClickedHandler","storeRescheduleId","rescheduleBooking","bookTimeslot","dateSelectedHandler","selectedDateLabel","cancelBookedEventErrorHandler","cancelBookedEventValidationErrorHandler","rescheduleBookedEventErrorHandler","getNylasSchedulerStore","getNylasSchedulerConnector","getRef","description","message","id","toString","ttl","startDate","getFullYear","getMonth","endTimeForCurrentMonth","Math","floor","addDaysToCurrentDate","min","startTimeWithOffset","render","showDefaultScheduler","mode","eventInfo","showBookingForm","cancelledEventInfo","Host","part","exportparts","timeslotPickerCTALabel","querySelector","slot","name","customTemplateSlot"],"sources":["src/connector/nylas-scheduler-connector/index.ts","src/components/scheduler/nylas-scheduling/scheduler-view.tsx","src/components/scheduler/nylas-scheduling/message-banner.tsx","src/components/scheduler/nylas-scheduling/nylas-scheduling.scss?tag=nylas-scheduling&encapsulation=shadow","src/components/scheduler/nylas-scheduling/nylas-scheduling.tsx"],"sourcesContent":["import { NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport { debug } from '@/utils/utils';\nimport { NylasSchedulerConnectorInterface } from '../connector-interface';\nimport { NylaSchedulerAPIConnector } from '../shared/api/scheduler';\n\ntype NylasSchedulerConnectorOptions = {\n  schedulerAPIURL: string;\n  nylasSchedulerStore: NylasSchedulerStoreType;\n  sessionId?: string;\n  configId?: string;\n};\n/**\n * Base class for the Nylas connector.\n */\nexport class NylasSchedulerConnector implements NylasSchedulerConnectorInterface {\n  public schedulerAPIURL: string;\n  public nylasSchedulerStore: NylasSchedulerStoreType;\n  public sessionId: string | undefined;\n  public configId: string | undefined;\n\n  private _schedulerAPIConnector: NylaSchedulerAPIConnector | undefined;\n\n  constructor({ schedulerAPIURL, nylasSchedulerStore, sessionId, configId }: NylasSchedulerConnectorOptions) {\n    if (!schedulerAPIURL) {\n      throw new Error('schedulerAPIURL is required');\n    }\n\n    if (!nylasSchedulerStore) {\n      throw new Error('nylasSchedulerStore is required');\n    }\n\n    if (!sessionId && !configId) {\n      throw new Error('sessionId is required for private configs, if not config id is required for public configs');\n    }\n\n    // If the url is only /, then we need to add the base url.\n    // We assume that the base url is the same as the current url.\n    if (schedulerAPIURL === '/') {\n      const url = new URL(window.location.href);\n      schedulerAPIURL = url.origin;\n    }\n\n    this.configId = configId;\n    this.sessionId = sessionId;\n    this.schedulerAPIURL = schedulerAPIURL;\n    this.nylasSchedulerStore = nylasSchedulerStore;\n  }\n\n  public init() {\n    debug('NylasConnector init');\n  }\n\n  public get schedulerStore() {\n    return this.nylasSchedulerStore;\n  }\n\n  public get scheduler() {\n    if (this._schedulerAPIConnector) {\n      return this._schedulerAPIConnector;\n    }\n    this._schedulerAPIConnector = new NylaSchedulerAPIConnector({\n      schedulerAPIURL: this.schedulerAPIURL,\n      schedulerStore: this.schedulerStore,\n      sessionId: this.sessionId,\n      configId: this.configId,\n    });\n    return this._schedulerAPIConnector;\n  }\n\n  public resetStores() {\n    this.nylasSchedulerStore.reset();\n  }\n}\nexport type PublicMethods<T> = {\n  [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;\n}[keyof T];\n\nexport type NylasSchedulerConnectorPublicMethods = PublicMethods<NylasSchedulerConnector>;\n","import { Fragment, FunctionalComponent, h } from '@stencil/core';\n\nexport type SchedulerViewProps = {\n  isLoading?: boolean;\n  showNotification?: boolean;\n  nylasBranding?: boolean;\n};\n\n/**\n * The Scheduler view component.\n */\nexport const SchedulerView: FunctionalComponent<SchedulerViewProps> = (props: SchedulerViewProps, children) => {\n  const isLoading = props.isLoading;\n  const showNotification = props.showNotification;\n  const nylasBranding = props.nylasBranding;\n\n  return (\n    <Fragment>\n      {showNotification && <nylas-notification></nylas-notification>}\n\n      {isLoading && (\n        <div class={'loading'}>\n          <div class={'left'}>\n            <div class={'skeleton'} />\n          </div>\n          <div class={'right'}>\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n            <div class={'skeleton'} />\n          </div>\n        </div>\n      )}\n      {!isLoading && children}\n      <div class={'footer'}>\n        {nylasBranding && (\n          <Fragment>\n            Powered by&nbsp;\n            <nylas-logo />\n          </Fragment>\n        )}\n      </div>\n    </Fragment>\n  );\n};\n","import { FunctionalComponent, h } from '@stencil/core';\n\nexport type HeaderBannerProps = {};\n\nexport const MessageBanner: FunctionalComponent<HeaderBannerProps> = (_props: HeaderBannerProps, children) => <div class=\"message-banner\">{children}</div>;\n","@import '../../../common/styles/variables.scss';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n  border-radius: var(--nylas-border-radius-2x);\n  width: fit-content;\n  @media #{$mobile} {\n    width: auto;\n    min-width: 325px;\n  }\n  background: var(--nylas-base-0);\n  position: relative;\n  box-shadow:\n    0px 4px 6px -2px rgba(0, 0, 0, 0.05),\n    0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n  @include default-css-variables;\n  font-family: var(--nylas-font-family);\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: 'slnt' 0;\n}\n\n:root {\n  font-family: inherit;\n}\n\n.error {\n  padding: 8rem 12rem;\n  color: var(--nylas-base-0);\n  background-color: var(--nylas-error);\n  margin: 1.5rem;\n  border-radius: var(--nylas-border-radius-2x);\n}\n\n.message-banner {\n  text-align: right;\n  color: var(--nylas-base-800);\n  padding: 1rem;\n  border-bottom: 1px solid var(--nylas-color-primary-200);\n  margin-top: 1rem;\n}\n\n.loading {\n  margin: 1.5rem;\n  display: flex;\n  gap: 1rem;\n\n  .skeleton {\n    border-radius: var(--nylas-border-radius-2x);\n    animation: pulsate 1.5s infinite;\n    &:nth-child(2) {\n      animation-delay: -100ms;\n    }\n    &:nth-child(3) {\n      animation-delay: -200ms;\n    }\n    &:nth-child(4) {\n      animation-delay: -300ms;\n    }\n    &:nth-child(5) {\n      animation-delay: -400ms;\n    }\n  }\n\n  .left .skeleton {\n    height: 100%;\n    width: 400px;\n  }\n  .right .skeleton {\n    height: 5rem;\n    width: 300px;\n    margin-bottom: 1rem;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n\n@keyframes pulsate {\n  0% {\n    background-color: var(--nylas-base-50);\n  }\n  50% {\n    background-color: var(--nylas-base-100);\n  }\n  100% {\n    background-color: var(--nylas-base-50);\n  }\n}\n\n.select-date-page,\n.additional-data-page,\n.booked-event-page,\n.cancelled-event-page,\n.cancel-flow-page {\n  border-top-left-radius: var(--nylas-border-radius-2x);\n  border-top-right-radius: var(--nylas-border-radius-2x);\n}\n\n.select-date-page,\n.additional-data-page {\n  display: flex;\n\n  @media #{$mobile} {\n    flex-direction: column;\n  }\n}\n\n.booked-event-page {\n  background-color: var(--nylas-base-50);\n}\n\n.cancelled-event-page,\n.cancel-flow-page {\n  padding: 1rem;\n  height: 496px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.booked-event-page,\n.cancelled-event-page,\n.cancel-flow-page {\n  min-width: 784px;\n  @media #{$mobile} {\n    min-width: 90%;\n  }\n  background: var(--nylas-base-50);\n}\n\n.left-panel {\n  display: flex;\n  flex-direction: column;\n  min-width: 384px;\n  border-top-left-radius: inherit;\n  background: var(--nylas-base-0);\n  position: relative;\n  padding: 1rem 0 0 0;\n  height: 624px;\n  @media #{$mobile} {\n    border-top-right-radius: inherit;\n    min-width: unset;\n    height: auto;\n  }\n}\n\n.select-date-page .left-panel {\n  @media #{$mobile} {\n    padding: 0.5rem 4px 0;\n    height: 624px;\n  }\n}\n\n.border {\n  margin-left: -20px; // Offset left padding\n  margin-right: -20px; // Offset right padding\n  border-top-width: 1px;\n  height: 0.5px;\n  background-color: var(--nylas-base-200);\n  @media #{$mobile} {\n    display: none;\n  }\n}\n\n.right-panel {\n  min-width: 360px;\n  width: 360px;\n  background-color: var(--nylas-base-50);\n  height: 624px;\n  padding-top: 16px;\n  border-left: 1px solid var(--nylas-base-200);\n  border-top-right-radius: inherit;\n  @media #{$mobile} {\n    border-top-right-radius: 0px;\n    width: inherit;\n    min-width: unset;\n    height: auto;\n  }\n  h2 {\n    display: flex;\n    margin: 0;\n    height: 48px;\n    gap: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    width: auto;\n    font-size: 1.125rem;\n    line-height: 1.5rem;\n    font-weight: 500;\n    text-align: center;\n    color: var(--nylas-base-800);\n  }\n}\n\n.additional-data-page {\n  .left-panel {\n    background-color: var(--nylas-base-50);\n  }\n  .right-panel {\n    background-color: var(--nylas-base-0);\n  }\n}\n\nnylas-selected-event-card {\n  height: 496px;\n\n  @media #{$mobile} {\n    height: 250px;\n  }\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 16px;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--nylas-base-500);\n  border-top: 1px solid var(--nylas-base-200);\n  min-height: 24px;\n  svg {\n    fill: var(--nylas-base-500);\n  }\n}\n\n.footer svg {\n  margin-top: 1px;\n}\n\nnylas-selected-event-card::part(nsec__timezone) {\n  position: absolute;\n  bottom: 0;\n}\n\nnylas-notification {\n  margin: 1.5rem;\n  width: -webkit-fill-available;\n  position: absolute;\n}\n\nnylas-locale-switch {\n  position: absolute;\n  padding: 18px 20px;\n  bottom: 0;\n  width: -webkit-fill-available;\n  border-top: 1px solid var(--nylas-base-200);\n  @media #{$mobile} {\n    height: auto;\n  }\n}\n\nnylas-date-picker {\n  padding: 0 20px;\n}\n","import { NylasBaseProvider } from '@/common/abstract-provider';\nimport { RegisteredComponent } from '@/common/register-component';\nimport type { SchedulerEventOverride } from '@/common/component-types';\nimport { NylasSchedulerConnector } from '@/connector/nylas-scheduler-connector';\nimport { CreateNylasSchedulerStore, NylasSchedulerStoreState, NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport { NylasSchedulerBookingData, ThemeConfig, Notification, NotificationType, NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { addDaysToCurrentDate, compactStringToUUIDs, debug } from '@/utils/utils';\nimport { SchedulerView } from './scheduler-view';\nimport { ErrorCategory } from '@/connector/nylas-scheduler-connector/errors';\nimport { MessageBanner } from './message-banner';\n\nconst genericError = { title: 'Something went wrong...', type: NotificationType.Error, category: ErrorCategory.Component };\n\n/**\n * The `nylas-scheduling` component is used to display the Nylas Scheduling UI.\n *\n * @slot custom-booking-form - This slot is used to pass a custom booking form to the Nylas Scheduling component.\n * @slot timeslot-picker-cta-label - This slot is used to pass a custom label to the timeslot picker CTA. The default label is \"Next\".\n *\n * @part ndp - [nylas-date-picker] The date picker host.\n * @part ndp__month-header - [nylas-date-picker] The month header.\n * @part ndp__month-button - [nylas-date-picker] The month button.\n * @part ndp__day - [nylas-date-picker] The day.\n * @part ndp__date - [nylas-date-picker] The date.\n * @part ndp__date--selected - [nylas-date-picker] The selected date.\n * @part ndp__date--current-day - [nylas-date-picker] The current day.\n * @part ndp__date--current-month - [nylas-date-picker] The dates in the current month.\n * @part ntp - [nylas-timeslot-picker] The timeslot picker component.\n * @part ntp__timeslot - [nylas-timeslot-picker] The timeslot button.\n * @part ntp__timeslot--selected - [nylas-timeslot-picker] The selected timeslot button.\n * @part ntp__button-primary - [nylas-timeslot-picker] The timeslot picker CTA.\n * @part nsec - [nylas-selected-event-card] The selected event card component.\n * @part nsec__card - [nylas-selected-event-card] The card component.\n * @part nsec__icon - [nylas-selected-event-card] The calendar icon.\n * @part nsec__date - [nylas-selected-event-card] The date selected.\n * @part nsec__time - [nylas-selected-event-card] The timeslot selected.\n * @part nbf - [nylas-booking-form] The booking form host.\n * @part nbf__input-label - [nylas-booking-form] The input label.\n * @part nbf__input-textfield - [nylas-booking-form] The input textfield.\n * @part nbf__button-ghost - [nylas-booking-form] The ghost button for adding guests.\n * @part nbf__button-primary - [nylas-booking-form] The primary button for booking.\n * @part nbf__button-outline - [nylas-booking-form] The outline button for canceling.\n * @part ncec - [nylas-cancelled-event-card] The cancelled event card host.\n * @part ncec__icon - [nylas-cancelled-event-card] The calendar icon.\n * @part ncec__title - [nylas-cancelled-event-card] The title of the cancelled event card.\n * @part ncec__description - [nylas-cancelled-event-card] The description of the cancelled event card.\n * @part ncec__button-outline - [nylas-cancelled-event-card] The close button CTA.\n * @part ncec__card - [nylas-cancelled-event-card] The cancelled event card.\n * @part nbec - [nylas-booked-event-card] The booked event card host.\n * @part nbec__card - [nylas-booked-event-card] The booked event card.\n * @part nbec__title - [nylas-booked-event-card] The title of the booked event card.\n * @part nbec__description - [nylas-booked-event-card] The description of the booked event card.\n * @part nbec__button-outline - [nylas-booked-event-card] The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - [nylas-booked-event-card] The cancel button CTA.\n * @part nbec__reschedule-cta - [nylas-booked-event-card] The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-scheduling',\n  styleUrl: 'nylas-scheduling.scss',\n  shadow: true,\n})\nexport class NylasScheduling {\n  /**\n   * Stores to be used by the provider.\n   */\n  private stores?: { scheduler: NylasSchedulerStoreType };\n\n  /**\n   * This is a base provide that defines the common methods and properties\n   * that all providers should have.\n   *\n   * Because stencil does not support abstract classes, we have to use a\n   * property to store the base provider instance.\n   */\n  private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n  /**\n   * The Nylas Scheduler Connector instance.\n   * The branins of the provider. It manages data fetching and state synchronization.\n   */\n  private nylasSchedulerConnector?: NylasSchedulerConnector;\n\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSchedulingElement;\n\n  /**\n   * This is used to set the mode for the Nylas Scheduler.\n   * The mode can be either `app` or `composable`. The default mode is `app`.\n   * - `app`: This mode is used to show the default Nylas Scheduler UI.\n   * - `composable`: This mode is used to show the composable Nylas Scheduler UI\n   *    by passing the individual scheduler components as children.\n   */\n  @Prop() readonly mode: 'app' | 'composable' = 'app';\n\n  /**\n   * The default scheduler store state.\n   * Used to set the initial state of the scheduler store.\n   */\n  @Prop({ attribute: 'default-scheduler-store-state' }) readonly defaultSchedulerState?: Partial<NylasSchedulerStoreState>;\n\n  /**\n   * The session ID for the Nylas Scheduler.\n   * This is used to authenticate the user.\n   */\n  @Prop() readonly sessionId?: string;\n\n  /**\n   * The URL for the Nylas Scheduler API. (staging or production URL)\n   */\n  @Prop() readonly schedulerApiUrl: string = 'https://api.us.nylas.com';\n\n  /**\n   * This enables passing the bookingInfo object to the Scheduler UI for direct booking event creation.\n   * When used with timeslotConfirmedHandler, it bypasses the additional data page and immediately\n   * invokes the handler after booking.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * Booking Ref required for rescheduling flow.\n   */\n  @Prop() readonly rescheduleBookingRef?: string;\n\n  /**\n   * Booking Ref required for cancelling flow.\n   */\n  @Prop() readonly cancelBookingRef?: string;\n\n  /**\n   * The config ID for the Nylas Scheduler. This should be passed in when using a public config,\n   * in which case the sessionId is not required.\n   */\n  @Prop() readonly configurationId?: string;\n\n  /**\n   * This prop lets you hide the Nylas branding.\n   * Default is true.\n   */\n  @Prop() readonly nylasBranding?: boolean = true;\n\n  /**\n   * This provides an easy way to override the default function of the event emitter.\n   * An example of this is the `timeslotConfirmed` event. By default, this event will set the scheduler store state for `showBookingForm` to `true` which will\n   * show the booking form. However, if you want to override this behavior, you can pass in the prop `eventOverride` like:\n   * ```html\n   * <nylas-scheduling eventOverride={{\"timeslotConfirmed\": (event, nylasConnector) => { console.log(\"Timeslot confirmed event fired!\"); } }} />\n   * ```\n   */\n  @Prop({ attribute: 'event-overrides' }) readonly eventOverrides: SchedulerEventOverride = {};\n\n  /**\n   * The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * Theme config, used to automatically generate a theme with color palette and\n   * CSS variables to customize the look and feel of the Nylas Scheduler.\n   */\n  @Prop() readonly themeConfig?: ThemeConfig;\n\n  /*\n   * Displays notifications for errors by default. When enabled (`true`), errors\n   * automatically appear as notifications. Disabling this feature (`false`) allows\n   * the parent application to capture and manage errors by listening to the\n   * `nylasSchedulerError` event, providing flexibility in error handling.\n   */\n  @Prop() readonly showNotification?: boolean = true;\n\n  /**\n   * Automatically register components that have the `@RegisterComponent` decorator.\n   * If this is set to false, you will need to manually register components using the\n   * `registerComponent` method.\n   * @default true\n   */\n  @State() automaticComponentRegistration: boolean = true;\n\n  /**\n   * The selected date label for the Nylas Scheduler.\n   * This is used to set the initial date label for the Nylas Scheduler.\n   */\n  @State() selectedDateLabel: string = new Date().toLocaleDateString(undefined, { dateStyle: 'full' }) || 'No date selected';\n\n  /**\n   * The config id extracted from the rescheduleBookingRef or cancelBookingRef.\n   */\n  @State() refConfigId?: string;\n\n  /**\n   * This event is fired when the provider is initialized.\n   * It can be used to set the initial state of the provider,\n   * or to prevent the provider from firing some default behavior.\n   */\n  @Event({ cancelable: true }) init!: EventEmitter<HTMLNylasSchedulingElement>;\n\n  /**\n   * This event is fired when the scheduler component enters componentWillLoad lifecycle.\n   */\n  @Event() schedulerWillLoad!: EventEmitter<HTMLNylasSchedulingElement>;\n\n  /**\n   * This event is fired when the scheduler component enters componentDidLoad lifecycle.\n   */\n  @Event() schedulerDidLoad!: EventEmitter<HTMLNylasSchedulingElement>;\n\n  @Event({\n    eventName: 'nylasSchedulerError',\n  })\n  nylasSchedulerError!: EventEmitter<Notification>;\n\n  /**\n   * This event is triggered if either the rescheduleBookingRef or cancelBookingRef prop\n   * is supplied and the component has been attached to the DOM. It emits the configurationId\n   * and bookingId derived from the rescheduleBookingRef or cancelBookingRef. Subscribe to this\n   * event to obtain the extracted configurationId, which is necessary to generate the sessionID\n   * for configurations that are not public.\n   */\n  @Event() bookingRefExtracted!: EventEmitter<{ configurationId: string; bookingId: string }>;\n\n  /**\n   * This function is called when the component is connected to the DOM.\n   * At this point in the component lifecycle, the base provider has not yet\n   * been initialized. So avoid using the base provider in this method or stores\n   * in this method.\n   */\n  connectedCallback() {\n    debug(`[nylas-scheduler] connectedCallback`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-scheduler] Component will load`);\n\n    // Emit the schedulerWillLoad event to allow the parent application to set the initial\n    // state of the provider or to prevent the provider from firing some default behavior.\n    const schedulerWillLoadEvent = this.schedulerWillLoad.emit(this.host);\n    if (schedulerWillLoadEvent.defaultPrevented) {\n      return;\n    }\n\n    this.stores = {\n      scheduler: CreateNylasSchedulerStore({\n        bookingInfo: this.bookingInfo,\n        nylasBranding: this.nylasBranding,\n        ...this.defaultSchedulerState,\n      }),\n    };\n\n    this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n    // Set the configId to the reschedule configId if rescheduleBookingRef is provided or\n    // Set the configId to the cancel configId if cancelBookingRef is provided\n    this.refConfigId = this.configurationId;\n    if (this.rescheduleBookingRef) {\n      const [rescheduleConfigId, rescheduleBookingId] = compactStringToUUIDs(this.rescheduleBookingRef);\n      this.refConfigId = rescheduleConfigId;\n      this.stores.scheduler.set('rescheduleBookingId', rescheduleBookingId);\n      this.bookingRefExtracted.emit({ configurationId: rescheduleConfigId, bookingId: rescheduleBookingId });\n    } else if (this.cancelBookingRef) {\n      const [cancelConfigId, cancelBookingId] = compactStringToUUIDs(this.cancelBookingRef);\n      this.refConfigId = cancelConfigId;\n      this.stores.scheduler.set('cancelBookingId', cancelBookingId);\n      this.bookingRefExtracted.emit({ configurationId: cancelConfigId, bookingId: cancelBookingId });\n    }\n\n    if (!this.checkIfSessionIdOrConfigIdExists()) {\n      return;\n    }\n\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    this.nylasSchedulerConnector = new NylasSchedulerConnector({\n      schedulerAPIURL: this.schedulerApiUrl,\n      sessionId: this.sessionId,\n      configId: this.refConfigId,\n      nylasSchedulerStore,\n    });\n    this.init.emit(this.host);\n\n    this.baseProvider?.componentWillLoad(this.nylasSchedulerConnector);\n    // Override theme\n    if (this.themeConfig) {\n      for (const [key, value] of Object.entries(this.themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  async componentDidLoad() {\n    this.baseProvider?.componentDidLoad();\n\n    // If sessionId is not provided, do not fetch availability\n    if (!this.checkIfSessionIdOrConfigIdExists()) {\n      return;\n    }\n\n    const settings = await this.nylasSchedulerConnector?.scheduler.getUISettings();\n    if (!settings || 'error' in settings) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(settings?.error) });\n    }\n\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    const availableDaysInFuture = nylasSchedulerStore?.get('configSettings')?.scheduler?.available_days_in_future;\n    const selectedTimeslot = nylasSchedulerStore?.get('selectedTimeslot');\n\n    if (selectedTimeslot && selectedTimeslot?.start_time) {\n      if (!this.isTimeslotValid(selectedTimeslot)) {\n        return;\n      }\n\n      // If the selected timeslot is already set, do not fetch availability\n      if (nylasSchedulerStore?.get('showBookingForm')) {\n        nylasSchedulerStore?.set('selectedDate', selectedTimeslot.start_time);\n        return;\n      }\n    }\n\n    const selectedDate = nylasSchedulerStore?.get('selectedDate');\n    const availability = nylasSchedulerStore?.get('availability');\n    let result;\n\n    if (availability && availability.length > 0) {\n      return;\n    }\n\n    if (!selectedDate) {\n      const today = new Date();\n      const { startTime, endTime, endTimeForAvailableDaysInFuture } = this.validateAvailableDaysInFuture(today, availableDaysInFuture || 30);\n      if (today.getTime() < endTimeForAvailableDaysInFuture * 1000) {\n        result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);\n      }\n    } else {\n      const { startTime, endTime, endTimeForAvailableDaysInFuture } = this.validateAvailableDaysInFuture(selectedDate, availableDaysInFuture || 30);\n      if (selectedDate.getTime() < endTimeForAvailableDaysInFuture * 1000) {\n        result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);\n      }\n    }\n\n    if (!result || 'error' in result) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n    }\n\n    if (!selectedDate) {\n      let _selectedDate = new Date();\n      const firstAvailableDate = nylasSchedulerStore?.get('availability').find((timeslot: any) => new Date(timeslot.start_time) > new Date());\n      if (firstAvailableDate) {\n        _selectedDate = firstAvailableDate.start_time;\n      }\n      nylasSchedulerStore?.set('selectedDate', _selectedDate);\n    }\n  }\n\n  componentDisconnected() {\n    this.baseProvider?.componentDisconnected();\n  }\n\n  @Watch('bookingInfo')\n  bookingInfoChanged(newVal?: NylasSchedulerBookingData) {\n    this.stores?.scheduler.set('bookingInfo', newVal);\n  }\n\n  @Watch('rescheduleBookingRef')\n  rescheduleBookingRefChanged(newVal?: string) {\n    if (newVal) {\n      const [configId, bookingId] = compactStringToUUIDs(newVal);\n      this.stores?.scheduler.set('rescheduleBookingId', bookingId);\n      this.refConfigId = configId;\n      this.nylasSchedulerConnector?.scheduler.setConfigId(configId);\n    }\n  }\n\n  @Watch('cancelBookingRef')\n  cancelBookingRefChanged(newVal?: string) {\n    if (newVal) {\n      const [configId, bookingId] = compactStringToUUIDs(newVal);\n      this.stores?.scheduler.set('cancelBookingId', bookingId);\n      this.refConfigId = configId;\n      this.nylasSchedulerConnector?.scheduler.setConfigId(configId);\n    }\n  }\n\n  /**\n   * This is a custom event handler that is used to register a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to register\n   * @returns Promise<void>\n   */\n  @Listen('registerComponent')\n  async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.registerComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to unregister a component with the provider.\n   * It is used by components that have the `@RegisterComponent` decorator.\n   * @param event A custom event that contains the component to unregister\n   * @returns Promise<void>\n   */\n  @Listen('unregisterComponent')\n  async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n    this.baseProvider?.unregisterComponent(event.detail);\n  }\n\n  /**\n   * This is a custom event handler that is used to refetch the availability when the month is changed.\n   */\n  @Listen('monthChanged')\n  async monthChangedHandler(event: CustomEvent<Date>) {\n    const date = event.detail;\n    const availableDaysInFuture = this.nylasSchedulerConnector?.schedulerStore?.get('configSettings')?.scheduler?.available_days_in_future;\n    const { startTime, endTime, endTimeForAvailableDaysInFuture } = this.validateAvailableDaysInFuture(date, availableDaysInFuture || 30);\n\n    if (startTime < endTimeForAvailableDaysInFuture && date.getTime() < endTimeForAvailableDaysInFuture * 1000) {\n      const result = await this.nylasSchedulerConnector?.scheduler.getAvailability(startTime, endTime);\n\n      if (!result || 'error' in result) {\n        this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n      }\n    }\n  }\n\n  /**\n   * This is a custom event handler to book an event.\n   */\n  @Listen('detailsConfirmed')\n  async bookButtonClickedHandler(event: CustomEvent<NylasSchedulerBookingData>) {\n    const storeRescheduleId = this.nylasSchedulerConnector?.schedulerStore?.get('rescheduleBookingId');\n    const rescheduleBookingId = storeRescheduleId;\n    if (rescheduleBookingId) {\n      const result = await this.nylasSchedulerConnector?.scheduler.rescheduleBooking(rescheduleBookingId, event.detail);\n      if (!result || 'error' in result) {\n        this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n      }\n      return;\n    }\n    const result = await this.nylasSchedulerConnector?.scheduler.bookTimeslot(event.detail);\n    if (!result || 'error' in result) {\n      this.nylasSchedulerError.emit({ ...this.getErrorObject(result?.error) });\n    }\n  }\n\n  /**\n   * This is a custom event handler to update the selected date label.\n   */\n  @Listen('dateSelected')\n  dateSelectedHandler(event: CustomEvent<Date>) {\n    const date = event.detail;\n    this.selectedDateLabel = date ? date.toLocaleDateString(undefined, { dateStyle: 'full' }) : 'No date selected';\n  }\n\n  /**\n   * This is an event handler to handle the error (if any) when the\n   * cancel booking button is clicked on the cancel booking form.\n   */\n  @Listen('cancelBookedEventError')\n  cancelBookedEventErrorHandler(event: CustomEvent<NylasSchedulerErrorResponse>) {\n    this.nylasSchedulerError.emit({ ...this.getErrorObject(event.detail.error) });\n  }\n\n  @Listen('cancelBookedEventValidationError')\n  cancelBookedEventValidationErrorHandler(event: CustomEvent<NylasSchedulerErrorResponse>) {\n    this.nylasSchedulerError.emit({ ...this.getErrorObject(event.detail.error) });\n  }\n\n  /**\n   * This is an event handler to handle the error (if any) when the\n   * reschedule button is clicked on the booked event card.\n   */\n  @Listen('rescheduleBookedEventError')\n  rescheduleBookedEventErrorHandler(event: CustomEvent<NylasSchedulerErrorResponse>) {\n    this.nylasSchedulerError.emit({ ...this.getErrorObject(event.detail.error) });\n  }\n\n  /**\n   * This method is used to retrieve the NylasScheduler instance\n   * @returns The NylasScheduler instance\n   */\n  @Method()\n  async getNylasSchedulerStore(): Promise<NylasSchedulerStoreType | undefined> {\n    return this.baseProvider?.getStore('scheduler');\n  }\n\n  /**\n   * This method is used to retrieve the NylasConnector instance\n   * @returns The NylasConnector instance\n   */\n  @Method()\n  async getNylasSchedulerConnector() {\n    return this.nylasSchedulerConnector;\n  }\n\n  @Method()\n  async getRef() {\n    return this.host;\n  }\n\n  private getErrorObject(error: NylasSchedulerErrorResponse['error']): Notification {\n    return {\n      title: error?.title || genericError.title,\n      category: error?.category || genericError.category,\n      type: NotificationType.Error,\n      description: error?.message || '',\n      id: new Date().getTime().toString(),\n      ttl: 'none',\n    };\n  }\n\n  private checkIfSessionIdOrConfigIdExists(): boolean {\n    if (!this.sessionId && !this.refConfigId) {\n      this.nylasSchedulerError.emit({\n        title: 'No sessionId!',\n        category: ErrorCategory.Component,\n        type: NotificationType.Error,\n        description: 'Session ID is required',\n        id: new Date().getTime().toString(),\n        ttl: 'none',\n      });\n      return false;\n    }\n    return true;\n  }\n\n  private isTimeslotValid(timeslot: Timeslot): boolean {\n    const selectedDate = new Date(timeslot.start_time);\n    if (selectedDate < new Date()) {\n      this.nylasSchedulerError.emit({\n        title: 'Invalid tiemslot!',\n        category: ErrorCategory.Component,\n        type: NotificationType.Error,\n        description: 'The selected timeslot is invalid.',\n        id: new Date().getTime().toString(),\n        ttl: 'none',\n      });\n      return false;\n    }\n    return true;\n  }\n\n  private validateAvailableDaysInFuture(\n    startDate: Date,\n    availableDaysInFuture: number,\n  ): {\n    startTime: number;\n    endTime: number;\n    endTimeForAvailableDaysInFuture: number;\n  } {\n    const today = new Date();\n    const startTime = new Date(startDate.getFullYear(), startDate.getMonth(), 1).getTime() / 1000;\n    const endTimeForCurrentMonth = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 1).getTime() / 1000;\n    const endTimeForAvailableDaysInFuture = Math.floor(addDaysToCurrentDate(today, availableDaysInFuture).getTime() / 1000);\n    const endTime = Math.min(endTimeForAvailableDaysInFuture, endTimeForCurrentMonth);\n    const startTimeWithOffset = startTime < today.getTime() / 1000 ? Math.floor(today.getTime() / 1000) : startTime;\n    return { startTime: startTimeWithOffset, endTime, endTimeForAvailableDaysInFuture };\n  }\n\n  render() {\n    const showDefaultScheduler = this.mode === 'app';\n    const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n    const eventInfo = nylasSchedulerStore?.get('eventInfo');\n    const showBookingForm = nylasSchedulerStore?.get('showBookingForm');\n    const cancelledEventInfo = nylasSchedulerStore?.get('cancelledEventInfo');\n    const cancelBookingId = nylasSchedulerStore?.get('cancelBookingId');\n    const selectedTimeslot = nylasSchedulerStore?.get('selectedTimeslot') as Timeslot;\n    const rescheduleBookingId = nylasSchedulerStore?.get('rescheduleBookingId');\n    const nylasBranding = nylasSchedulerStore?.get('nylasBranding') || this.nylasBranding;\n    const selectedDate = nylasSchedulerStore?.get('selectedDate');\n    this.selectedDateLabel = selectedDate ? selectedDate.toLocaleDateString(undefined, { dateStyle: 'full' }) : 'No date selected';\n\n    if (showDefaultScheduler && cancelBookingId && !cancelledEventInfo) {\n      return (\n        <Host>\n          <SchedulerView nylasBranding={nylasBranding} isLoading={this.isLoading} showNotification={this.showNotification}>\n            <div class=\"cancel-flow-page\" part=\"cancel-flow-page\">\n              <nylas-cancel-booking-form cancelBookingId={cancelBookingId} exportparts=\"ncbf, ncbf__input-textfield, ncbf__button-cta, ncbf__button-outline, ncbf__input-label\" />\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n\n    // Cancelled event card is shown when the event is cancelled\n    if (showDefaultScheduler && cancelledEventInfo) {\n      return (\n        <Host>\n          <SchedulerView nylasBranding={nylasBranding} isLoading={this.isLoading} showNotification={this.showNotification}>\n            <div class=\"cancelled-event-page\" part=\"cancelled-event-page\">\n              <nylas-cancelled-event-card\n                cancelledEventInfo={cancelledEventInfo}\n                exportparts=\"ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card\"\n              />\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Booked event card is shown when the event is booked\n    if (showDefaultScheduler && eventInfo) {\n      return (\n        <Host>\n          <SchedulerView nylasBranding={nylasBranding} isLoading={this.isLoading} showNotification={this.showNotification}>\n            <div class=\"booked-event-page\" part=\"booked-event-page\">\n              <nylas-booked-event-card\n                selectedTimeslot={selectedTimeslot}\n                eventInfo={eventInfo}\n                exportparts=\"nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta\"\n              />\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Date and time picker is shown when the event is not booked and no additional data is shown\n    if (showDefaultScheduler && (!eventInfo || !!rescheduleBookingId) && !showBookingForm) {\n      const timeslotPickerCTALabel = this.host.querySelector('[slot=\"timeslot-picker-cta-label\"]');\n      return (\n        <Host>\n          <SchedulerView nylasBranding={nylasBranding} isLoading={this.isLoading} showNotification={this.showNotification}>\n            {rescheduleBookingId && <MessageBanner>Choose another time slot to reschedule your meeting</MessageBanner>}\n            <div class=\"select-date-page\" part=\"select-date-page\">\n              <div class=\"left-panel\">\n                <nylas-date-picker exportparts=\"ndp, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--selected, ndp__date--current-day, ndp__date--current-month\"></nylas-date-picker>\n                <nylas-locale-switch></nylas-locale-switch>\n              </div>\n              <div class=\"right-panel\">\n                <h2>\n                  <calendar-icon></calendar-icon>\n                  <span id=\"selectedDate\">{this.selectedDateLabel}</span>\n                </h2>\n                <nylas-timeslot-picker exportparts=\"ntp, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary\">\n                  {timeslotPickerCTALabel && (\n                    <span slot=\"timeslot-picker-cta-label\">\n                      <slot name=\"timeslot-picker-cta-label\"></slot>\n                    </span>\n                  )}\n                </nylas-timeslot-picker>\n              </div>\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n    // Additional data is shown when the time is selected, event is not booked and additional data is shown\n    if (showDefaultScheduler && !eventInfo && showBookingForm) {\n      // Check if a \"custom-booking-form\" slot is provided\n      const customTemplateSlot = this.host.querySelector('[slot=\"custom-booking-form\"]');\n\n      return (\n        <Host>\n          <SchedulerView nylasBranding={nylasBranding} isLoading={this.isLoading} showNotification={this.showNotification}>\n            {rescheduleBookingId && <MessageBanner>Choose another time slot to reschedule your meeting</MessageBanner>}\n            <div class=\"additional-data-page\" part=\"additional-data-page\">\n              <div class=\"left-panel\">\n                <div class=\"wrapper\">\n                  <nylas-selected-event-card exportparts=\"nsec, nsec__card, nsec__icon, nsec__date, nsec__time\"></nylas-selected-event-card>\n                </div>\n              </div>\n              <div class=\"right-panel\">\n                <nylas-booking-form exportparts=\"nbf, nbf__input-label, nbf__input-textfield, nbf__button-ghost, nbf__button-primary, nbf__button-outline\">\n                  {customTemplateSlot && (\n                    <div slot=\"custom-booking-form\">\n                      <slot name=\"custom-booking-form\"></slot>\n                    </div>\n                  )}\n                </nylas-booking-form>\n              </div>\n            </div>\n          </SchedulerView>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"+RAcaA,EAQX,WAAAC,EAAYC,gBAAEA,EAAeC,oBAAEA,EAAmBC,UAAEA,EAASC,SAAEA,IAC7D,IAAKH,EAAiB,CACpB,MAAM,IAAII,MAAM,8B,CAGlB,IAAKH,EAAqB,CACxB,MAAM,IAAIG,MAAM,kC,CAGlB,IAAKF,IAAcC,EAAU,CAC3B,MAAM,IAAIC,MAAM,6F,CAKlB,GAAIJ,IAAoB,IAAK,CAC3B,MAAMK,EAAM,IAAIC,IAAIC,OAAOC,SAASC,MACpCT,EAAkBK,EAAIK,M,CAGxBC,KAAKR,SAAWA,EAChBQ,KAAKT,UAAYA,EACjBS,KAAKX,gBAAkBA,EACvBW,KAAKV,oBAAsBA,C,CAGtB,IAAAW,GACLC,EAAM,sB,CAGR,kBAAWC,GACT,OAAOH,KAAKV,mB,CAGd,aAAWc,GACT,GAAIJ,KAAKK,uBAAwB,CAC/B,OAAOL,KAAKK,sB,CAEdL,KAAKK,uBAAyB,IAAIC,EAA0B,CAC1DjB,gBAAiBW,KAAKX,gBACtBc,eAAgBH,KAAKG,eACrBZ,UAAWS,KAAKT,UAChBC,SAAUQ,KAAKR,WAEjB,OAAOQ,KAAKK,sB,CAGP,WAAAE,GACLP,KAAKV,oBAAoBkB,O,EC3DtB,MAAMC,EAAyD,CAACC,EAA2BC,KAChG,MAAMC,EAAYF,EAAME,UACxB,MAAMC,EAAmBH,EAAMG,iBAC/B,MAAMC,EAAgBJ,EAAMI,cAE5B,OACEC,EAACC,EAAQ,KACNH,GAAoBE,EAAA,2BAEpBH,GACCG,EAAA,OAAKE,MAAO,WACVF,EAAA,OAAKE,MAAO,QACVF,EAAA,OAAKE,MAAO,cAEdF,EAAA,OAAKE,MAAO,SACVF,EAAA,OAAKE,MAAO,aACZF,EAAA,OAAKE,MAAO,aACZF,EAAA,OAAKE,MAAO,aACZF,EAAA,OAAKE,MAAO,aACZF,EAAA,OAAKE,MAAO,gBAIhBL,GAAaD,EACfI,EAAA,OAAKE,MAAO,UACTH,GACCC,EAACC,EAAQ,K,cAEPD,EAAA,qBAIG,ECvCR,MAAMG,EAAwD,CAACC,EAA2BR,IAAaI,EAAA,OAAKE,MAAM,kBAAkBN,GCJ3I,MAAMS,EAAqB,2rJAC3B,MAAAC,EAAeD,ECWf,MAAME,EAAe,CAAEC,MAAO,0BAA2BC,KAAMC,EAAiBhC,MAAOiC,SAAUC,EAAcC,W,MAkDlGC,EAAe,M,wRAkCoB,M,mFAiBH,2B,iJA6BA,K,oBAU+C,G,0EAmB5C,K,oCAQK,K,wBAMd,IAAIC,MAAOC,mBAAmBC,UAAW,CAAEC,UAAW,UAAa,mB,2BA4CxG,iBAAAC,GACEhC,EAAM,sC,CAGR,uBAAMiC,GACJjC,EAAM,yCAIN,MAAMkC,EAAyBpC,KAAKqC,kBAAkBC,KAAKtC,KAAKuC,MAChE,GAAIH,EAAuBI,iBAAkB,CAC3C,M,CAGFxC,KAAKyC,OAAS,CACZrC,UAAWsC,EAA0B,CACnCC,YAAa3C,KAAK2C,YAClB7B,cAAed,KAAKc,iBACjBd,KAAK4C,yBAIZ5C,KAAK6C,aAAe,IAAIC,EAAkB9C,KAAKuC,KAAMvC,KAAKyC,OAAQzC,KAAK+C,+BAAgC/C,KAAKgD,gBAI5GhD,KAAKiD,YAAcjD,KAAKkD,gBACxB,GAAIlD,KAAKmD,qBAAsB,CAC7B,MAAOC,EAAoBC,GAAuBC,EAAqBtD,KAAKmD,sBAC5EnD,KAAKiD,YAAcG,EACnBpD,KAAKyC,OAAOrC,UAAUmD,IAAI,sBAAuBF,GACjDrD,KAAKwD,oBAAoBlB,KAAK,CAAEY,gBAAiBE,EAAoBK,UAAWJ,G,MAC3E,GAAIrD,KAAK0D,iBAAkB,CAChC,MAAOC,EAAgBC,GAAmBN,EAAqBtD,KAAK0D,kBACpE1D,KAAKiD,YAAcU,EACnB3D,KAAKyC,OAAOrC,UAAUmD,IAAI,kBAAmBK,GAC7C5D,KAAKwD,oBAAoBlB,KAAK,CAAEY,gBAAiBS,EAAgBF,UAAWG,G,CAG9E,IAAK5D,KAAK6D,mCAAoC,CAC5C,M,CAGF,MAAMvE,EAAsBU,KAAK6C,cAAciB,SAAS,aACxD9D,KAAK+D,wBAA0B,IAAI5E,EAAwB,CACzDE,gBAAiBW,KAAKgE,gBACtBzE,UAAWS,KAAKT,UAChBC,SAAUQ,KAAKiD,YACf3D,wBAEFU,KAAKC,KAAKqC,KAAKtC,KAAKuC,MAEpBvC,KAAK6C,cAAcV,kBAAkBnC,KAAK+D,yBAE1C,GAAI/D,KAAKiE,YAAa,CACpB,IAAK,MAAOC,EAAKC,KAAUC,OAAOC,QAAQrE,KAAKiE,aAAc,CAC3DjE,KAAKuC,KAAK+B,MAAMC,YAAY,GAAGL,IAAOC,E,GAK5C,sBAAMK,GACJxE,KAAK6C,cAAc2B,mBAGnB,IAAKxE,KAAK6D,mCAAoC,CAC5C,M,CAGF,MAAMY,QAAiBzE,KAAK+D,yBAAyB3D,UAAUsE,iBAC/D,IAAKD,GAAY,UAAWA,EAAU,CACpCzE,KAAK2E,oBAAoBrC,KAAK,IAAKtC,KAAK4E,eAAeH,GAAUI,Q,CAGnE,MAAMvF,EAAsBU,KAAK6C,cAAciB,SAAS,aACxD,MAAMgB,EAAwBxF,GAAqByF,IAAI,mBAAmB3E,WAAW4E,yBACrF,MAAMC,EAAmB3F,GAAqByF,IAAI,oBAElD,GAAIE,GAAoBA,GAAkBC,WAAY,CACpD,IAAKlF,KAAKmF,gBAAgBF,GAAmB,CAC3C,M,CAIF,GAAI3F,GAAqByF,IAAI,mBAAoB,CAC/CzF,GAAqBiE,IAAI,eAAgB0B,EAAiBC,YAC1D,M,EAIJ,MAAME,EAAe9F,GAAqByF,IAAI,gBAC9C,MAAMM,EAAe/F,GAAqByF,IAAI,gBAC9C,IAAIO,EAEJ,GAAID,GAAgBA,EAAaE,OAAS,EAAG,CAC3C,M,CAGF,IAAKH,EAAc,CACjB,MAAMI,EAAQ,IAAI1D,KAClB,MAAM2D,UAAEA,EAASC,QAAEA,EAAOC,gCAAEA,GAAoC3F,KAAK4F,8BAA8BJ,EAAOV,GAAyB,IACnI,GAAIU,EAAMK,UAAYF,EAAkC,IAAM,CAC5DL,QAAetF,KAAK+D,yBAAyB3D,UAAU0F,gBAAgBL,EAAWC,G,MAE/E,CACL,MAAMD,UAAEA,EAASC,QAAEA,EAAOC,gCAAEA,GAAoC3F,KAAK4F,8BAA8BR,EAAcN,GAAyB,IAC1I,GAAIM,EAAaS,UAAYF,EAAkC,IAAM,CACnEL,QAAetF,KAAK+D,yBAAyB3D,UAAU0F,gBAAgBL,EAAWC,G,EAItF,IAAKJ,GAAU,UAAWA,EAAQ,CAChCtF,KAAK2E,oBAAoBrC,KAAK,IAAKtC,KAAK4E,eAAeU,GAAQT,Q,CAGjE,IAAKO,EAAc,CACjB,IAAIW,EAAgB,IAAIjE,KACxB,MAAMkE,EAAqB1G,GAAqByF,IAAI,gBAAgBkB,MAAMC,GAAkB,IAAIpE,KAAKoE,EAAShB,YAAc,IAAIpD,OAChI,GAAIkE,EAAoB,CACtBD,EAAgBC,EAAmBd,U,CAErC5F,GAAqBiE,IAAI,eAAgBwC,E,EAI7C,qBAAAI,GACEnG,KAAK6C,cAAcsD,uB,CAIrB,kBAAAC,CAAmBC,GACjBrG,KAAKyC,QAAQrC,UAAUmD,IAAI,cAAe8C,E,CAI5C,2BAAAC,CAA4BD,GAC1B,GAAIA,EAAQ,CACV,MAAO7G,EAAUiE,GAAaH,EAAqB+C,GACnDrG,KAAKyC,QAAQrC,UAAUmD,IAAI,sBAAuBE,GAClDzD,KAAKiD,YAAczD,EACnBQ,KAAK+D,yBAAyB3D,UAAUmG,YAAY/G,E,EAKxD,uBAAAgH,CAAwBH,GACtB,GAAIA,EAAQ,CACV,MAAO7G,EAAUiE,GAAaH,EAAqB+C,GACnDrG,KAAKyC,QAAQrC,UAAUmD,IAAI,kBAAmBE,GAC9CzD,KAAKiD,YAAczD,EACnBQ,KAAK+D,yBAAyB3D,UAAUmG,YAAY/G,E,EAWxD,8BAAMiH,CAAyBC,GAC7B1G,KAAK6C,cAAc8D,kBAAkBD,EAAME,O,CAU7C,gCAAMC,CAA2BH,GAC/B1G,KAAK6C,cAAciE,oBAAoBJ,EAAME,O,CAO/C,yBAAMG,CAAoBL,GACxB,MAAMM,EAAON,EAAME,OACnB,MAAM9B,EAAwB9E,KAAK+D,yBAAyB5D,gBAAgB4E,IAAI,mBAAmB3E,WAAW4E,yBAC9G,MAAMS,UAAEA,EAASC,QAAEA,EAAOC,gCAAEA,GAAoC3F,KAAK4F,8BAA8BoB,EAAMlC,GAAyB,IAElI,GAAIW,EAAYE,GAAmCqB,EAAKnB,UAAYF,EAAkC,IAAM,CAC1G,MAAML,QAAetF,KAAK+D,yBAAyB3D,UAAU0F,gBAAgBL,EAAWC,IAExF,IAAKJ,GAAU,UAAWA,EAAQ,CAChCtF,KAAK2E,oBAAoBrC,KAAK,IAAKtC,KAAK4E,eAAeU,GAAQT,Q,GASrE,8BAAMoC,CAAyBP,GAC7B,MAAMQ,EAAoBlH,KAAK+D,yBAAyB5D,gBAAgB4E,IAAI,uBAC5E,MAAM1B,EAAsB6D,EAC5B,GAAI7D,EAAqB,CACvB,MAAMiC,QAAetF,KAAK+D,yBAAyB3D,UAAU+G,kBAAkB9D,EAAqBqD,EAAME,SAC1G,IAAKtB,GAAU,UAAWA,EAAQ,CAChCtF,KAAK2E,oBAAoBrC,KAAK,IAAKtC,KAAK4E,eAAeU,GAAQT,Q,CAEjE,M,CAEF,MAAMS,QAAetF,KAAK+D,yBAAyB3D,UAAUgH,aAAaV,EAAME,SAChF,IAAKtB,GAAU,UAAWA,EAAQ,CAChCtF,KAAK2E,oBAAoBrC,KAAK,IAAKtC,KAAK4E,eAAeU,GAAQT,Q,EAQnE,mBAAAwC,CAAoBX,GAClB,MAAMM,EAAON,EAAME,OACnB5G,KAAKsH,kBAAoBN,EAAOA,EAAKjF,mBAAmBC,UAAW,CAAEC,UAAW,SAAY,kB,CAQ9F,6BAAAsF,CAA8Bb,GAC5B1G,KAAK2E,oBAAoBrC,KAAK,IAAKtC,KAAK4E,eAAe8B,EAAME,OAAO/B,Q,CAItE,uCAAA2C,CAAwCd,GACtC1G,KAAK2E,oBAAoBrC,KAAK,IAAKtC,KAAK4E,eAAe8B,EAAME,OAAO/B,Q,CAQtE,iCAAA4C,CAAkCf,GAChC1G,KAAK2E,oBAAoBrC,KAAK,IAAKtC,KAAK4E,eAAe8B,EAAME,OAAO/B,Q,CAQtE,4BAAM6C,GACJ,OAAO1H,KAAK6C,cAAciB,SAAS,Y,CAQrC,gCAAM6D,GACJ,OAAO3H,KAAK+D,uB,CAId,YAAM6D,GACJ,OAAO5H,KAAKuC,I,CAGN,cAAAqC,CAAeC,GACrB,MAAO,CACLtD,MAAOsD,GAAOtD,OAASD,EAAaC,MACpCG,SAAUmD,GAAOnD,UAAYJ,EAAaI,SAC1CF,KAAMC,EAAiBhC,MACvBoI,YAAahD,GAAOiD,SAAW,GAC/BC,IAAI,IAAIjG,MAAO+D,UAAUmC,WACzBC,IAAK,O,CAID,gCAAApE,GACN,IAAK7D,KAAKT,YAAcS,KAAKiD,YAAa,CACxCjD,KAAK2E,oBAAoBrC,KAAK,CAC5Bf,MAAO,gBACPG,SAAUC,EAAcC,UACxBJ,KAAMC,EAAiBhC,MACvBoI,YAAa,yBACbE,IAAI,IAAIjG,MAAO+D,UAAUmC,WACzBC,IAAK,SAEP,OAAO,K,CAET,OAAO,I,CAGD,eAAA9C,CAAgBe,GACtB,MAAMd,EAAe,IAAItD,KAAKoE,EAAShB,YACvC,GAAIE,EAAe,IAAItD,KAAQ,CAC7B9B,KAAK2E,oBAAoBrC,KAAK,CAC5Bf,MAAO,oBACPG,SAAUC,EAAcC,UACxBJ,KAAMC,EAAiBhC,MACvBoI,YAAa,oCACbE,IAAI,IAAIjG,MAAO+D,UAAUmC,WACzBC,IAAK,SAEP,OAAO,K,CAET,OAAO,I,CAGD,6BAAArC,CACNsC,EACApD,GAMA,MAAMU,EAAQ,IAAI1D,KAClB,MAAM2D,EAAY,IAAI3D,KAAKoG,EAAUC,cAAeD,EAAUE,WAAY,GAAGvC,UAAY,IACzF,MAAMwC,EAAyB,IAAIvG,KAAKoG,EAAUC,cAAeD,EAAUE,WAAa,EAAG,GAAGvC,UAAY,IAC1G,MAAMF,EAAkC2C,KAAKC,MAAMC,EAAqBhD,EAAOV,GAAuBe,UAAY,KAClH,MAAMH,EAAU4C,KAAKG,IAAI9C,EAAiC0C,GAC1D,MAAMK,EAAsBjD,EAAYD,EAAMK,UAAY,IAAOyC,KAAKC,MAAM/C,EAAMK,UAAY,KAAQJ,EACtG,MAAO,CAAEA,UAAWiD,EAAqBhD,UAASC,kC,CAGpD,MAAAgD,GACE,MAAMC,EAAuB5I,KAAK6I,OAAS,MAC3C,MAAMvJ,EAAsBU,KAAK6C,cAAciB,SAAS,aACxD,MAAMgF,EAAYxJ,GAAqByF,IAAI,aAC3C,MAAMgE,EAAkBzJ,GAAqByF,IAAI,mBACjD,MAAMiE,EAAqB1J,GAAqByF,IAAI,sBACpD,MAAMnB,EAAkBtE,GAAqByF,IAAI,mBACjD,MAAME,EAAmB3F,GAAqByF,IAAI,oBAClD,MAAM1B,EAAsB/D,GAAqByF,IAAI,uBACrD,MAAMjE,EAAgBxB,GAAqByF,IAAI,kBAAoB/E,KAAKc,cACxE,MAAMsE,EAAe9F,GAAqByF,IAAI,gBAC9C/E,KAAKsH,kBAAoBlC,EAAeA,EAAarD,mBAAmBC,UAAW,CAAEC,UAAW,SAAY,mBAE5G,GAAI2G,GAAwBhF,IAAoBoF,EAAoB,CAClE,OACEjI,EAACkI,EAAI,KACHlI,EAACN,EAAa,CAACK,cAAeA,EAAeF,UAAWZ,KAAKY,UAAWC,iBAAkBb,KAAKa,kBAC7FE,EAAA,OAAKE,MAAM,mBAAmBiI,KAAK,oBACjCnI,EAAA,6BAA2B6C,gBAAiBA,EAAiBuF,YAAY,6F,CAQnF,GAAIP,GAAwBI,EAAoB,CAC9C,OACEjI,EAACkI,EAAI,KACHlI,EAACN,EAAa,CAACK,cAAeA,EAAeF,UAAWZ,KAAKY,UAAWC,iBAAkBb,KAAKa,kBAC7FE,EAAA,OAAKE,MAAM,uBAAuBiI,KAAK,wBACrCnI,EAAA,8BACEiI,mBAAoBA,EACpBG,YAAY,yF,CAQxB,GAAIP,GAAwBE,EAAW,CACrC,OACE/H,EAACkI,EAAI,KACHlI,EAACN,EAAa,CAACK,cAAeA,EAAeF,UAAWZ,KAAKY,UAAWC,iBAAkBb,KAAKa,kBAC7FE,EAAA,OAAKE,MAAM,oBAAoBiI,KAAK,qBAClCnI,EAAA,2BACEkE,iBAAkBA,EAClB6D,UAAWA,EACXK,YAAY,qH,CAQxB,GAAIP,KAA0BE,KAAezF,KAAyB0F,EAAiB,CACrF,MAAMK,EAAyBpJ,KAAKuC,KAAK8G,cAAc,sCACvD,OACEtI,EAACkI,EAAI,KACHlI,EAACN,EAAa,CAACK,cAAeA,EAAeF,UAAWZ,KAAKY,UAAWC,iBAAkBb,KAAKa,kBAC5FwC,GAAuBtC,EAACG,EAAa,4DACtCH,EAAA,OAAKE,MAAM,mBAAmBiI,KAAK,oBACjCnI,EAAA,OAAKE,MAAM,cACTF,EAAA,qBAAmBoI,YAAY,0IAC/BpI,EAAA,6BAEFA,EAAA,OAAKE,MAAM,eACTF,EAAA,UACEA,EAAA,sBACAA,EAAA,QAAMgH,GAAG,gBAAgB/H,KAAKsH,oBAEhCvG,EAAA,yBAAuBoI,YAAY,oEAChCC,GACCrI,EAAA,QAAMuI,KAAK,6BACTvI,EAAA,QAAMwI,KAAK,mC,CAW7B,GAAIX,IAAyBE,GAAaC,EAAiB,CAEzD,MAAMS,EAAqBxJ,KAAKuC,KAAK8G,cAAc,gCAEnD,OACEtI,EAACkI,EAAI,KACHlI,EAACN,EAAa,CAACK,cAAeA,EAAeF,UAAWZ,KAAKY,UAAWC,iBAAkBb,KAAKa,kBAC5FwC,GAAuBtC,EAACG,EAAa,4DACtCH,EAAA,OAAKE,MAAM,uBAAuBiI,KAAK,wBACrCnI,EAAA,OAAKE,MAAM,cACTF,EAAA,OAAKE,MAAM,WACTF,EAAA,6BAA2BoI,YAAY,2DAG3CpI,EAAA,OAAKE,MAAM,eACTF,EAAA,sBAAoBoI,YAAY,4GAC7BK,GACCzI,EAAA,OAAKuI,KAAK,uBACRvI,EAAA,QAAMwI,KAAK,6B,CAW7B,OACExI,EAACkI,EAAI,KACHlI,EAAA,a"}

package/dist/nylas-web-elements/p-061d0ae2.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as s,h as a}from"./p-68c2fadf.js";import{s as t}from"./p-cb9f8627.js";import"./p-cb65c223.js";import"./p-1ffbe196.js";import"./p-02aa5f03.js";const r=':host{display:block;height:100%;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}';const i=r;const l={email:/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,tel:/^[0-9]{10}$/};const n={email:"name@example.com",tel:"1234567890"};const o=class{constructor(a){e(this,a);this.nylasFormInputChanged=s(this,"nylasFormInputChanged",7);this.name="input";this.defaultValue="";this.label="";this.type="text";this.placeholder=n[this.type];this.required=false;this.readOnly=false;this.autoFocus=false;this.pattern=undefined;this.maxLength=255;this.patternError="";this.value="";this.error=""}componentWillLoad(){this.value=t(this.defaultValue);if(this.type!=="text"&&!this.pattern){this.pattern=l[this.type]}if(this.value){this.validatePattern(this.value)}}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}handleInput(e){this.error="";this.value=t(e.target.value);this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:this.type})}validatePattern(e){this.error="";if(this.required&&!e){this.error=`${this.label} is required.`;return}if(!this.pattern)return;if(this.pattern.test(e)){this.error=""}else{this.error=`Invalid ${this.label.toLowerCase()} format.`}}render(){return a("label",{key:"a28361a1be7a5afe38dfdc3eb375d51029af16d2",part:"ic__label",class:{error:!!this.error}},a("p",{key:"950007f568b6c12231f40bedb1db8f62937e978a"},a("span",{key:"106299e5bea57a16eec9734db501517d50549262",class:"label"},this.label),this.required&&a("span",{class:"required"},"*")),a("input",{key:"5c00d0abff394b38de75d24af47610ff4e246e69",type:"text",name:this.name,part:"ic__input",readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,maxLength:this.maxLength,placeholder:this.placeholder,class:{error:!!this.error},onInput:e=>this.handleInput(e)}),this.error&&a("span",{class:"error help-text"},this.error," ",this.value&&this.patternError!==""?` ${this.patternError}`:""))}};o.style=i;export{o as input_component};
-//# sourceMappingURL=p-061d0ae2.entry.js.map

package/dist/nylas-web-elements/p-061d0ae2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["inputComponentCss","InputComponentStyle0","DefaultPattern","email","tel","DefaultPlaceholder","InputComponent","this","type","componentWillLoad","value","sanitizeHtml","defaultValue","pattern","validatePattern","handleBookingFormSubmitted","event","error","preventDefault","handleInput","e","target","nylasFormInputChanged","emit","name","label","required","test","toLowerCase","render","h","key","part","class","readOnly","autoFocus","maxLength","placeholder","onInput","patternError"],"sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  height: 100%;\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n  p {\n    margin: 0;\n  }\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\ninput[type='text'],\ninput[type='email'] {\n  @include textfield;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst DefaultPattern = {\n  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/,\n  tel: /^[0-9]{10}$/,\n};\n\nconst DefaultPlaceholder = {\n  email: 'name@example.com',\n  tel: '1234567890',\n};\n\n/**\n * The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text values.\n */\n\n@Component({\n  tag: 'input-component',\n  styleUrl: 'input-component.scss',\n  shadow: true,\n})\nexport class InputComponent {\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue: string = '';\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n  /**\n   * The type of the input. This is used to determine the input's behavior.\n   * Supported types are 'text', 'email', and 'tel'.\n   */\n  @Prop() type: 'text' | 'email' | 'tel' = 'text';\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder[this.type];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'tel'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is an empty string. If the value does not match the pattern, the error message is appended to the default error message.\n   * For ex: patternError: \"Format: 123-456-7890\" , Default error message: \"Invalid phone number.\"\n   * - Error message displayed: \"Invalid phone number. Format: 123-456-7890\"\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value: string = '';\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  // Lifecycle methods\n  componentWillLoad() {\n    this.value = sanitizeHtml(this.defaultValue);\n    if (this.type !== 'text' && !this.pattern) {\n      this.pattern = DefaultPattern[this.type];\n    }\n\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitizeHtml((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: this.type,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = `Invalid ${this.label.toLowerCase()} format.`;\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        <p>\n          <span class=\"label\">{this.label}</span>\n          {this.required && <span class=\"required\">*</span>}\n        </p>\n        <input\n          type=\"text\"\n          name={this.name}\n          part=\"ic__input\"\n          readOnly={this.readOnly}\n          autoFocus={this.autoFocus}\n          value={this.value}\n          maxLength={this.maxLength}\n          placeholder={this.placeholder}\n          class={{ error: !!this.error }}\n          onInput={e => this.handleInput(e)}\n        />\n        {this.error && (\n          <span class=\"error help-text\">\n            {this.error} {this.value && this.patternError !== '' ? ` ${this.patternError}` : ''}\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n"],"mappings":"8JAAA,MAAMA,EAAoB,mxDAC1B,MAAAC,EAAeD,ECEf,MAAME,EAAiB,CACrBC,MAAO,kDACPC,IAAK,eAGP,MAAMC,EAAqB,CACzBF,MAAO,mBACPC,IAAK,c,MAaME,EAAc,M,gGAIF,Q,kBAIQ,G,WAIP,G,UAKiB,O,iBAIXD,EAAmBE,KAAKC,M,cAK1B,M,cAKA,M,eAMC,M,sCAUD,I,kBAOG,G,WAKN,G,WAIA,E,CAiBzB,iBAAAC,GACEF,KAAKG,MAAQC,EAAaJ,KAAKK,cAC/B,GAAIL,KAAKC,OAAS,SAAWD,KAAKM,QAAS,CACzCN,KAAKM,QAAUX,EAAeK,KAAKC,K,CAGrC,GAAID,KAAKG,MAAO,CACdH,KAAKO,gBAAgBP,KAAKG,M,EAS9B,0BAAAK,CAA2BC,GACzBT,KAAKO,gBAAgBP,KAAKG,OAC1B,GAAIH,KAAKU,MAAO,CACdD,EAAME,gB,EAKV,WAAAC,CAAYC,GACVb,KAAKU,MAAQ,GACbV,KAAKG,MAAQC,EAAcS,EAAEC,OAA4BX,OACzDH,KAAKe,sBAAsBC,KAAK,CAC9Bb,MAAOH,KAAKG,MACZc,KAAMjB,KAAKiB,KACXC,MAAOlB,KAAKkB,MACZR,MAAOV,KAAKU,MACZT,KAAMD,KAAKC,M,CAIf,eAAAM,CAAgBJ,GAEdH,KAAKU,MAAQ,GAEb,GAAIV,KAAKmB,WAAahB,EAAO,CAC3BH,KAAKU,MAAQ,GAAGV,KAAKkB,qBACrB,M,CAGF,IAAKlB,KAAKM,QAAS,OAEnB,GAAIN,KAAKM,QAAQc,KAAKjB,GAAQ,CAC5BH,KAAKU,MAAQ,E,KACR,CACLV,KAAKU,MAAQ,WAAWV,KAAKkB,MAAMG,uB,EAIvC,MAAAC,GACE,OACEC,EAAA,SAAAC,IAAA,2CAAOC,KAAK,YAAYC,MAAO,CAAEhB,QAASV,KAAKU,QAC7Ca,EAAA,KAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,2CAAME,MAAM,SAAS1B,KAAKkB,OACzBlB,KAAKmB,UAAYI,EAAA,QAAMG,MAAM,YAAU,MAE1CH,EAAA,SAAAC,IAAA,2CACEvB,KAAK,OACLgB,KAAMjB,KAAKiB,KACXQ,KAAK,YACLE,SAAU3B,KAAK2B,SACfC,UAAW5B,KAAK4B,UAChBzB,MAAOH,KAAKG,MACZ0B,UAAW7B,KAAK6B,UAChBC,YAAa9B,KAAK8B,YAClBJ,MAAO,CAAEhB,QAASV,KAAKU,OACvBqB,QAASlB,GAAKb,KAAKY,YAAYC,KAEhCb,KAAKU,OACJa,EAAA,QAAMG,MAAM,mBACT1B,KAAKU,MAAK,IAAGV,KAAKG,OAASH,KAAKgC,eAAiB,GAAK,IAAIhC,KAAKgC,eAAiB,I"}

package/dist/nylas-web-elements/p-0c31f7ca.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as r}from"./p-68c2fadf.js";const t=".sc-arrow-icon-h{display:flex}";const e=t;const s=class{constructor(r){o(this,r);this.width="15";this.height="15"}render(){return r("svg",{key:"322208818e91c32dca72954f65aebebcc68ae652",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r("path",{key:"48a417447e9ecdf18ad013cc6006005b8f87886f",d:"M5 12H19M12 5L19 12L12 19",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}};s.style=e;export{s as arrow_icon};
-//# sourceMappingURL=p-0c31f7ca.entry.js.map

package/dist/nylas-web-elements/p-0d98c728.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,c as n,H as a,a as i}from"./p-68c2fadf.js";import{R as s}from"./p-795b324a.js";import{a as o,o as r,q as c}from"./p-6c11737d.js";import{D as l}from"./p-49f716ed.js";import"./p-02aa5f03.js";import"./p-cb65c223.js";const d=".sc-google-logo-icon-h{display:flex}";const b=d;const p=class{constructor(e){t(this,e);this.width="24";this.height="24"}render(){return e("svg",{key:"0e9d7d49a7c9b6cd2087805b88f0e5a2067dfaed",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"e97ac24bfe96bdba16a9709dde3ebc675e942d56","clip-path":"url(#clip0_959_12452)"},e("path",{key:"231167532157853cb95fddc85fa8cffcf1134ef4",d:"M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z",fill:"#4285F4"}),e("path",{key:"4f964a28a6b0894940c9d762a91db0c099f6c2c7",d:"M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z",fill:"#34A853"}),e("path",{key:"9ada4b2f2625f18538ff4455b1160efcfccbd646",d:"M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z",fill:"#FBBC05"}),e("path",{key:"6a260b3024a69fa930820a80a917152dc7ef52a7",d:"M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z",fill:"#EA4335"})),e("defs",{key:"56bc051b67a1bfa29ecaf64bac03ee1017836365"},e("clipPath",{key:"8057800f9035048497e8198789e1e0b4dba1c64a",id:"clip0_959_12452"},e("rect",{key:"6c0299822390d3433158d87c607fe9546e878eb0",width:24,height:24,fill:"white"}))))}};p.style=b;const f=".sc-microsoft-logo-icon-h{display:flex}";const h=f;const u=class{constructor(e){t(this,e);this.width="22";this.height="22"}render(){return e("svg",{key:"3dd5e1a94ca5889c14f7695c9077f9be0cbc4d00",width:this.width,height:this.height,viewBox:"0 0 22 22",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"381068331f74d7f1a06c0ca0cd9dfc2b58f72a10",d:"M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z",fill:"#F35325"}),e("path",{key:"62c7be7371433602169a19fe2657e0a1635f516e",d:"M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z",fill:"#81BC06"}),e("path",{key:"72464e489d4cfd78f016282a743a1000fb732368",d:"M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z",fill:"#05A6F0"}),e("path",{key:"d766c4d950ee3122cf4916b53ce5f630b52a30bb",d:"M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z",fill:"#FFBA08"}))}};u.style=h;function y({id:t,formState:n,activeTab:a,calendars:i}){switch(a){case"eventInfo":const a=n.title;const s=n.description;const o=parseInt(n.duration);const r=n.location;return e("div",{key:t},e("nylas-event-info",null,e("div",{slot:"inputs"},e("nylas-event-title",{name:"title",eventTitle:a,exportparts:"net, net__title, net__dropdown-content"}),e("nylas-event-duration",{name:"duration",eventDurationMinutes:o,exportparts:"ned, ned__dropdown, ned__dropdown-button, ned__dropdown-content, ned__input_dropdown, ned__input_dropdown-input, ned__input_dropdown-content"}),e("nylas-event-location",{name:"location",eventLocation:r,exportparts:"nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content"}),e("nylas-event-description",{name:"description",eventDescription:s,exportparts:"nedesc, nedesc__textarea"}))));case"availability":const c=n.availability.openHours;const l=n.availability.timezone?n.availability.timezone:Intl.DateTimeFormat().resolvedOptions().timeZone;const d=n.participants?.find((t=>t.is_organizer));const b=d?.email??"primary";const p=n.calendarIds.length>0?n.calendarIds:[b];const f=n.bookingCalendar=="primary"?b:n.bookingCalendar;return e("div",{key:t},e("nylas-booking-calendar-picker",{name:"booking-calendar",calendars:i??[],defaultBookingCalendar:f,exportparts:"nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content"}),e("nylas-calendar-picker",{name:"calendars",calendars:i??[],defaultSelectedCalendars:p,exportparts:"ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content"}),e("nylas-availability-picker",{name:"availability",openHours:c,defaultTimezone:l,exportparts:"nap__header, nap__select-timezone, nap__select-timezone-button, nap__select-timezone-dropdown-content, nap__availability, nap__day, nap__time-ranges, nap__time-range, nap__add-time-range, nap__time-picker-container, nap__time-picker-input, nap__time-picker-times"}));case"bookingOptions":return e("div",{key:t},e("nylas-buffer-time",{name:"buffer-time",buffer:n.buffer,exportparts:"nbt, nbt__header, nbt__body, nbt__dropdown-before, nbt__dropdown-button-before, nbt__dropdown-content-before, nbt__dropdown-after, nbt__dropdown-button-after, nbt__dropdown-content-after, nbt__preview"}),e("nylas-event-limits",null,e("div",{slot:"inputs"},e("nylas-min-booking-notice",{name:"min-booking-notice",minBookingNotice:n.minBookingNotice,exportparts:"nmbn, nmbn__number-dropdown, nmbn__number-dropdown-button, nmbn__number-dropdown-content, nmbn__period-dropdown, nmbn__period-dropdown-button, nmbn__period-dropdown-content"}),e("nylas-limit-future-bookings",{name:"limit-future-bookings",availableDaysInFuture:n.availableDaysInFuture,exportparts:"nlfb, nlfb__number-dropdown, nlfb__number-dropdown-button, nlfb__number-dropdown-content, nlfb__period-dropdown, nlfb__period-dropdown-button, nlfb__period-dropdown-content"}),e("nylas-min-cancellation-notice",{name:"min-cancellation-notice",minCancellationNotice:n.minCancellationNotice,exportparts:"nmcn, nmcn__number-dropdown, nmcn__number-dropdown-button, nmcn__number-dropdown-content, nmcn__period-dropdown, nmcn__period-dropdown-button, nmcn__period-dropdown-content"}),e("nylas-cancellation-policy",{name:"cancellation-policy",cancellationPolicy:n.cancellationPolicy,exportparts:"ncpolicy, ncpolicy__textarea"}))),e("nylas-timeslot-interval",{name:"timeslot-interval",eventDurationMinutes:parseInt(n.duration),exportparts:"nti, nti__header, nti__input-label, nti__dropdown, nti__dropdown-button, nti__dropdown-content"}),e("nylas-customize-booking-settings",{name:"customize-booking-settings",exportparts:"ncbs, ncbs__header, ncbs__settings, ncbs__settings-div, ncbs__additional_guests, ncbs__cancellation_options, ncbs__rescheduling_options"}));case"participants":return e("div",{key:t},e("nylas-additional-participants",{name:"participants",eventParticipants:n.participants,exportparts:"nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant"}),e("nylas-participants-custom-availability",{name:"participant-custom-availability",participants:n.participants,exportparts:"npca, npca__header, npca__content, npca__participant-container, npca__participant-title, npca__participant-toggle--container, npca__toggle-label, npca__toggle-input, npca__toggle-slider"}))}}const g='.sc-nylas-editor-tabs-h{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif}.scheduler-editor.sc-nylas-editor-tabs{display:flex;flex-direction:column}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{height:554px;display:grid;grid-template-columns:minmax(224px, 25%) 1fr}@media screen and (max-width: 768px){.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs{display:table-column-group;height:auto}}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs{display:flex;flex-direction:column;border-right:1px solid var(--nylas-base-200);background-color:var(--nylas-base-25)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--nylas-base-900);background:var(--nylas-base-0);border:none;height:56px;font-family:var(--nylas-font-family);font-size:16px;font-weight:500;line-height:24px;cursor:pointer}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.sc-nylas-editor-tabs:not(:first-of-type){margin-top:0.25rem}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tabs.sc-nylas-editor-tabs .tab.active.sc-nylas-editor-tabs{font-weight:600;background:var(--nylas-base-0);color:var(--nylas-primary);border-left:4px solid var(--nylas-primary);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.0588235294);box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843)}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs{max-width:692px;overflow-y:auto}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs{width:inherit}.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-info.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs,.scheduler-editor.sc-nylas-editor-tabs .form-contents.sc-nylas-editor-tabs .tab-content.sc-nylas-editor-tabs nylas-event-limits.sc-nylas-editor-tabs div[slot=inputs].sc-nylas-editor-tabs{display:flex;flex-direction:column;gap:1rem}.footer.sc-nylas-editor-tabs{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:80px;padding:0 1rem;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs{flex-direction:column;height:auto}}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .preview.sc-nylas-editor-tabs{margin-top:1rem;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{display:flex;justify-content:flex-end;align-items:center;justify-self:flex-end;gap:1rem}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs{flex-direction:column-reverse;width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.sc-nylas-editor-tabs{max-width:524px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.unsaved-changes.sc-nylas-editor-tabs{color:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.saved-changes.sc-nylas-editor-tabs{color:var(--nylas-success)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error.sc-nylas-editor-tabs{color:var(--nylas-error)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs p.error-full-width.sc-nylas-editor-tabs{max-width:660px}@media screen and (max-width: 768px){.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button-component.sc-nylas-editor-tabs{width:100%}}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs{background:var(--nylas-primary);color:var(--nylas-base-0);height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;width:148px}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:hover{background:var(--nylas-base-600)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:active{background:var(--nylas-base-800)}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs:disabled{background:var(--nylas-base-300);cursor:not-allowed}.footer.sc-nylas-editor-tabs .buttons.sc-nylas-editor-tabs button.sc-nylas-editor-tabs span.sc-nylas-editor-tabs{display:flex;align-items:center;justify-content:center;gap:0.5rem}';const m=g;var _=undefined&&undefined.__decorate||function(t,e,n,a){var i=arguments.length,s=i<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,n):a,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(t,e,n,a);else for(var r=t.length-1;r>=0;r--)if(o=t[r])s=(i<3?o(s):i>3?o(e,n,s):o(e,n))||s;return i>3&&s&&Object.defineProperty(e,n,s),s};var v=undefined&&undefined.__metadata||function(t,e){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(t,e)};const w=class{constructor(e){t(this,e);this.schedulerConfigChanged=n(this,"schedulerConfigChanged",7);this.cancelButtonClick=n(this,"cancelButtonClick",7);this.formSubmitted=n(this,"formSubmitted",7);this.previewButtonClicked=n(this,"previewButtonClicked",7);this.setError=t=>{this.error=t.message};this.formSubmissionHandler=async t=>{t.preventDefault();this.formSubmitted.emit();const e=this.formRef.checkValidity();if(!e){return}this.isLoading=true;this.hasUnsavedChanges=false;const n=this.updateFormState();const{title:a,description:i,duration:s,availability:o,calendarIds:c,bookingCalendar:d,location:b,bookingType:p,buffer:f,availableDaysInFuture:h,minCancellationNotice:u,minBookingNotice:y,cancellationPolicy:g,timeslotInterval:m,additionalGuestsHidden:_,hideCancellationOptions:v,hideReschedulingOptions:w,participants:k,participantOpenHours:x}=n;const C=this.selectedConfiguration?.participants?.find((t=>t.is_organizer));const H=s?parseInt(s):30;const S=k&&k?.length>0?k:[{name:C?.name??this.currentUser?.name??C?.email??this.currentUser?.email??"",email:C?.email??this.currentUser?.email??"",is_organizer:true,availability:{calendar_ids:c?.length?c:["primary"],open_hours:[]},booking:{calendar_id:d&&d!==""?d:"primary"}}];const I={...this.selectedConfiguration?.id&&{id:this.selectedConfiguration.id},version:this.selectedConfiguration?.version??"1.0.0",availability:{duration_minutes:H,interval_minutes:m?.interval??H,round_to:m?.roundTo,availability_rules:{availability_method:this.selectedConfiguration?.availability?.availability_rules?.availability_method??"collective",buffer:f||{before:0,after:0},default_open_hours:o?.openHours??this.selectedConfiguration?.availability?.availability_rules?.default_open_hours??l,round_robin_group_id:this.selectedConfiguration?.availability?.availability_rules?.round_robin_group_id??""}},participants:[...S?.map((t=>{if(t.is_organizer){return{name:t.name??t.email,email:t.email,is_organizer:true,availability:{calendar_ids:c?.length?c:["primary"],open_hours:x?.[t.email]??t.availability?.open_hours??[]},booking:{calendar_id:d&&d!==""?d:"primary"}}}return{...t,availability:{calendar_ids:t.availability?.calendar_ids??["primary"],open_hours:x?.[t.email]??t.availability?.open_hours??[]}}}))],event_booking:{title:a?.toString()??"",description:i?.toString()??"",location:b?.toString()??"",booking_type:p?.toString()??"booking",timezone:o?.timezone??Intl.DateTimeFormat().resolvedOptions().timeZone},scheduler:{cancellation_policy:g??"",available_days_in_future:h??30,min_cancellation_notice:u??0,min_booking_notice:y??60,hide_additional_guests:_??false,hide_cancellation_options:v??false,hide_rescheduling_options:w??false}};const j=r(I,this.selectedConfiguration);const B=this.action==="create"?j:I;const L=t=>{this.isLoading=false;this.changesSaved=true;setTimeout((()=>{this.changesSaved=false}),5e3)};this.schedulerConfigChanged.emit({config:B,resetLoadingState:L,setError:this.setError,action:this.action})};this.calendars=undefined;this.selectedConfiguration=undefined;this.currentUser=undefined;this.schedulerPreviewLink="";this.mode="app";this.action="create";this.activeTab="eventInfo";this.isLoading=false;this.hasUnsavedChanges=false;this.changesSaved=false;this.formState={};this.error=""}configChangedHandler(t){o("[nylas-editor-tabs]","configChangedHandler",t,this.selectedConfiguration);this.formState={...this.getFormStateFromConfig(t)};if(t.id){this.action="edit"}else{this.action="create"}}connectedCallback(){o("[nylas-editor-tabs]","connectedCallback")}componentWillLoad(){o("[nylas-editor-tabs]","componentWillLoad");this.formState=this.getFormStateFromConfig(this.selectedConfiguration)}componentDidLoad(){o("[nylas-editor-tabs]","componentDidLoad")}disconnectedCallback(){o("[nylas-editor-tabs]","disconnectedCallback")}handleValueChanged(t){o("[nylas-editor-tabs]","handleValueChanged",t);const{name:e,value:n}=t.detail;this.setFormState(n,e);this.formState={...this.formState};this.hasUnsavedChanges=true;this.error=""}getFormStateFromConfig(t){const e=t?.participants?.find((t=>t.is_organizer));return{title:t?.event_booking?.title??"",description:t?.event_booking?.description??"",duration:t?.availability?.duration_minutes?.toString()??"30",availability:{timezone:t?.event_booking?.timezone??Intl.DateTimeFormat().resolvedOptions().timeZone,openHours:t?.availability?.availability_rules?.default_open_hours??l},calendarIds:e?.availability?.calendar_ids??[],participants:t?.participants??[],bookingCalendar:e?.booking?.calendar_id??e?.email??"",location:t?.event_booking?.location??"",bookingType:t?.event_booking?.booking_type??"booking",buffer:t?.availability?.availability_rules?.buffer??{before:0,after:0},cancellationPolicy:t?.scheduler?.cancellation_policy??"",availableDaysInFuture:t?.scheduler?.available_days_in_future??30,minCancellationNotice:t?.scheduler?.min_cancellation_notice??0,minBookingNotice:t?.scheduler?.min_booking_notice??60,timeslotInterval:{interval:t?.availability?.interval_minutes??t?.availability?.duration_minutes??10,roundTo:t?.availability?.round_to},additionalGuestsHidden:t?.scheduler?.hide_additional_guests??false,hideCancellationOptions:t?.scheduler?.hide_cancellation_options??false,hideReschedulingOptions:t?.scheduler?.hide_rescheduling_options??false}}setFormState(t,e){switch(e){case"title":this.formState.title=t.toString();break;case"description":this.formState.description=t.toString();break;case"duration":this.formState.duration=t.toString();break;case"availability":this.formState.availability=JSON.parse(t.toString());break;case"participants":this.formState.participants=JSON.parse(t.toString());break;case"calendars":this.formState.calendarIds=t.toString().split(",");break;case"booking-calendar":this.formState.bookingCalendar=t.toString();break;case"location":this.formState.location=t.toString();break;case"booking-type":this.formState.bookingType=t.toString();break;case"buffer-time":this.formState.buffer=JSON.parse(t.toString());break;case"limit-future-bookings":this.formState.availableDaysInFuture=parseInt(t.toString());break;case"min-cancellation-notice":this.formState.minCancellationNotice=parseInt(t.toString());break;case"min-booking-notice":this.formState.minBookingNotice=parseInt(t.toString());break;case"cancellation-policy":this.formState.cancellationPolicy=t.toString();break;case"timeslot-interval":this.formState.timeslotInterval=JSON.parse(t.toString());break;case"customize-booking-settings":const e=JSON.parse(t.toString());this.formState.additionalGuestsHidden=e.additionalGuestsHidden;this.formState.hideCancellationOptions=e.hideCancellationOptions;this.formState.hideReschedulingOptions=e.hideReschedulingOptions;break;case"participant-custom-availability":const n=JSON.parse(t.toString());this.formState.participantOpenHours=n;break}}updateFormState(){const t=new FormData(this.formRef);t.forEach(((t,e)=>{this.setFormState(t,e)}));this.formState={...this.formState};return this.formState}setActiveTab(t,e){t.preventDefault();this.updateFormState();this.activeTab=e}render(){o("[nylas-editor-tabs]","render",this.formState);const t=localStorage.getItem("nylas")==="Nylas Developer";return e(a,{key:"13aad28cba8de3b30e60d7a26849d30ef2578bb5"},e("form",{key:"31e835f74ca7728d597148a18c840e0791c34c89",onSubmit:this.formSubmissionHandler,class:"scheduler-editor",ref:t=>this.formRef=t,noValidate:true},this.mode==="app"?e("div",{class:"form-contents"},e("div",{class:"tabs"},e("button",{class:{tab:true,active:this.activeTab=="eventInfo"},onClick:t=>this.setActiveTab(t,"eventInfo")},e("calendar-info-icon",{width:"16",height:"16"}),"Event Info"),e("button",{class:{tab:true,active:this.activeTab=="availability"},onClick:t=>this.setActiveTab(t,"availability")},e("calendar-patterns-icon",{width:"16",height:"16"}),"Availability"),e("button",{class:{tab:true,active:this.activeTab=="bookingOptions"},onClick:t=>this.setActiveTab(t,"bookingOptions")},e("flow-icon",{width:"16",height:"16"}),"Booking Options"),t&&e("button",{class:{tab:true,active:this.activeTab=="participants"},onClick:t=>this.setActiveTab(t,"participants")},e("people-icon",{width:"16",height:"16"}),"Participants")),e("div",{class:"tab-content"},e(y,{formState:this.formState,activeTab:this.activeTab,calendars:this.calendars,id:this.selectedConfiguration?.id??"new"}))):e("slot",null),e("div",{key:"e83274ed2d92f179c90564a21f80ba869d1033a2",class:"footer"},e("div",{key:"c661b7a0c024f7b8f1c916b55bc5784a10ee9958",class:"preview"},this.schedulerPreviewLink!==""&&this.action==="edit"&&e("button-component",{type:"button",disabled:this.isLoading,clickHandler:t=>{t.preventDefault();const e=this.previewButtonClicked.emit(this.host);if(!e.defaultPrevented){window.open(c(this.schedulerPreviewLink,this.selectedConfiguration),"_blank")}},variant:"basic"},"Preview")),e("div",{key:"78cb89dbbb6e124aaddf9b486834e81ab10ea70a",class:"buttons"},e("p",{key:"e07f651a081607471d067aa05a3858446725a6db",class:{"unsaved-changes":this.hasUnsavedChanges&&!this.changesSaved,"saved-changes":this.changesSaved,error:this.error!=="","error-full-width":this.error!==""&&this.action==="create"}},this.error!==""?this.error:"",this.error==""&&this.hasUnsavedChanges&&!this.changesSaved?"Unsaved changes":this.error==""&&this.changesSaved?"Changes saved!":""),e("button-component",{key:"66500ec7f10c2a5ecb6d98647766e2f31f030fe4",type:"button",disabled:this.isLoading,clickHandler:t=>{t.preventDefault();this.cancelButtonClick.emit();this.error=""},variant:"basic"},"Cancel"),e("button-component",{key:"a816e4c9d7d1f53e09edf635f06c9a177bdcb15a",type:"submit",disabled:this.isLoading},this.isLoading?e("span",null,"Saving",e("loading-icon",null)," "):this.action=="create"?"Create":"Save changes")))))}get host(){return i(this)}static get watchers(){return{selectedConfiguration:["configChangedHandler"]}}};_([s({name:"nylas-editor-tabs",stateToProps:new Map([["schedulerConfig.calendars","calendars"],["schedulerConfig.selectedConfiguration","selectedConfiguration"],["schedulerConfig.currentUser","currentUser"]]),eventToProps:{schedulerConfigChanged:async(t,e)=>{const{resetLoadingState:n,setError:a,action:i,config:s}=t.detail;const o=e=>{const[i,s]=e;if(!i&&s&&a){a(s)}if(n){n(t)}};if(i==="edit"){const t=await e.schedulerConfig.updateConfiguration(s);o(t)}else{const t=await e.schedulerConfig.createConfiguration(s);o(t)}},cancelButtonClick:async(t,e)=>{e.schedulerConfigStore.state.action=null},previewButtonClicked:async(t,e)=>{o("[nylas-editor-tabs]","previewButtonClicked",e)},formSubmitted:async(t,e)=>{o("[nylas-editor-tabs]","formSubmitted",e)}},localPropsToProp:new Map([["schedulerPreviewLink","schedulerPreviewLink"]]),fireRegisterEvent:true}),v("design:type",Function),v("design:paramtypes",[]),v("design:returntype",void 0)],w.prototype,"render",null);w.style=m;const k=':host{display:grid;grid-auto-flow:row;width:100%;font-family:inherit;font-optical-sizing:auto;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem}@media screen and (max-width: 768px){.header{flex-direction:column;gap:0.5rem;align-items:unset}}.header h2{margin:0;font-size:1.25rem;color:var(--nylas-base-900);font-weight:600}.header p{margin:0;font-size:1rem;color:var(--nylas-base-700)}.header .actions{justify-self:end}@media screen and (max-width: 768px){.header .actions{width:100%}}.configurations{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-0);height:100%;display:flex;overflow-y:auto}.configurations table{width:100%;border-spacing:0;border-collapse:collapse;font-family:inherit;height:max-content}.configurations table.no-configurations{height:100%}.configurations table tr{color:var(--nylas-base-800);border-bottom:1px solid var(--nylas-base-200);font-family:inherit}.configurations table tr:last-of-type{border-bottom:0}.configurations table tr.hide{display:none}.configurations table th{font-weight:600;text-transform:uppercase;font-size:14px;line-height:20px}.configurations table th.actions-header{text-align:right}.configurations table tr.no-configurations td>div{display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column;padding:var(--nylas-border-radius-3x)}.configurations table tr.no-configurations td>div h3{margin:0 0 1rem 0;color:var(--nylas-base-700)}.configurations table tr.no-configurations td>div p{margin:0 0 1rem 0;color:var(--nylas-base-600)}.configurations table tr.no-configurations td>div calendar-icon{margin-bottom:1rem;color:var(--nylas-base-200)}.configurations table th,.configurations table td{text-align:left;padding:1rem;font-family:inherit}.configurations table .actions{text-align:right}.configurations table .actions{display:flex;justify-content:flex-end;gap:1rem}@media screen and (max-width: 768px){.configurations table .actions{flex-direction:column;gap:0.5rem}}.configurations table .title{display:flex;flex-direction:column}.configurations table .title .config-event-title{font-weight:600}.configurations table .title .config-event-description{font-size:0.75rem}.error-container{margin-top:1.5rem}.error-container .error{color:var(--nylas-error);padding:0.5rem 0;margin:1rem 0 0}button-component#copy button{width:108px}';const x=k;var C=undefined&&undefined.__decorate||function(t,e,n,a){var i=arguments.length,s=i<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,n):a,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(t,e,n,a);else for(var r=t.length-1;r>=0;r--)if(o=t[r])s=(i<3?o(s):i>3?o(e,n,s):o(e,n))||s;return i>3&&s&&Object.defineProperty(e,n,s),s};var H=undefined&&undefined.__metadata||function(t,e){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(t,e)};const S=class{constructor(e){t(this,e);this.initListConfigurations=n(this,"initListConfigurations",7);this.createButtonClick=n(this,"createButtonClick",7);this.editButtonClick=n(this,"editButtonClick",7);this.deleteButtonClick=n(this,"deleteButtonClick",7);this.configurations=[];this.schedulerPreviewLink="";this.state="loading";this.error="";this.copiedButtonIndex=-1}connectedCallback(){o("[nylas-list-configurations]","connectedCallback")}componentWillLoad(){o("[nylas-list-configurations]","componentWillLoad");if(this.configurations&&this.configurations.length>0){this.state="loaded"}}componentDidLoad(){o("[nylas-list-configurations]","componentDidLoad");this.initListConfigurations.emit(this.host)}disconnectedCallback(){o("[nylas-list-configurations]","disconnectedCallback")}async getState(){return this.state}async setState(t){this.state=t}async setError(t){this.error=t}getDurationString(t){const e=Math.floor(t/60);const n=t%60;return`${e?e:""} ${e?`${e>1?"hours":"hour"}`:""} ${n?n:""} ${n?`${n>1?"mins":"min"}`:""}`}render(){return e(a,null,e("div",{class:"header"},e("div",{class:"description"},e("h2",null,"All scheduling pages"),e("p",null,"Create, edit and manage all your scheduling pages.")),this.configurations&&this.configurations.length>0&&e("div",{class:"actions"},e("button-component",{clickHandler:()=>{this.createButtonClick.emit(this.host)}},"Create new"))),e("div",{class:"configurations"},e("table",{class:{"no-configurations":this.state!=="loading"&&(!this.configurations||this.configurations.length===0)}},e("tr",{class:{hide:this.state==="loading"||this.configurations&&this.configurations.length===0}},e("th",null,"Scheduling page title"),e("th",null,"Duration"),e("th",{class:"actions-header"},"Actions")),this.state==="loading"&&e("tr",{class:"no-configurations"},e("td",{colSpan:3},e("div",null,e("h3",null,"Loading..."),e("p",null,"Please wait while we fetch the scheduling pages")))),this.state!=="loading"&&(!this.configurations||this.configurations.length===0)&&e("tr",{class:"no-configurations"},e("td",{colSpan:3},e("div",null,e("calendar-icon",{width:"48",height:"48"}),e("h3",null,"No scheduling pages found"),e("p",null,"Get started with creating your first scheduling page"),e("button-component",{clickHandler:()=>{this.createButtonClick.emit(this.host)}},"Create new")))),this.state!=="loading"&&this.configurations.map(((t,n)=>e("tr",{key:t.id},e("td",null,e("div",{class:"title"},e("span",{class:"config-event-title"},t.event_booking.title),e("span",{class:"config-event-description"},t.event_booking.description))),e("td",null,e("div",null,this.getDurationString(t.availability.duration_minutes))),e("td",null,e("div",{class:"actions"},e("button-component",{variant:"basic",id:"copy",key:`copy-${n}`,clickHandler:async e=>{e.preventDefault();const a=c(this.schedulerPreviewLink,t);await navigator.clipboard.writeText(a);this.copiedButtonIndex=n;setTimeout((()=>{this.copiedButtonIndex=-1}),3e3)}},this.copiedButtonIndex===n?"Copied!":"Copy link"),e("button-component",{variant:"basic",key:`edit-${n}`,clickHandler:e=>{e.preventDefault();this.editButtonClick.emit({host:this.host,configuration:t})}},"Edit"),e("button-component",{variant:"basic",key:`delete-${n}`,clickHandler:e=>{e.preventDefault();this.deleteButtonClick.emit({host:this.host,configuration:t})}},"Delete")))))))),this.state==="error"&&e("div",{class:"error-container"},e("p",{class:"error"},this.error)))}get host(){return i(this)}};C([s({name:"nylas-list-configurations",stateToProps:new Map([["schedulerConfig.configurations","configurations"]]),localPropsToProp:new Map([["schedulerPreviewLink","schedulerPreviewLink"]]),eventToProps:{initListConfigurations:async(t,e)=>{const n=t.detail;await n.setState("loading");const[a,i]=await e.schedulerConfig.getConfigurations();if(!a&&i&&i.message){await n.setState("error");await n.setError(i.message);return}await n.setState("loaded")},createButtonClick:async(t,e)=>{e.schedulerConfigStore.resetSelectedConfiguration();e.schedulerConfigStore.state.action="create"},deleteButtonClick:async(t,e)=>{const{host:n,configuration:a}=t.detail;const[i,s]=await e.schedulerConfig.deleteConfiguration(a.id);if(!i&&s&&s.message){await n.setState("error");await n.setError(s.message)}},editButtonClick:async(t,e)=>{const{configuration:n}=t.detail;e.schedulerConfigStore.state.selectedConfiguration=n;e.schedulerConfigStore.state.action="edit"}},fireRegisterEvent:true}),H("design:type",Function),H("design:paramtypes",[]),H("design:returntype",void 0)],S.prototype,"render",null);S.style=x;export{p as google_logo_icon,u as microsoft_logo_icon,w as nylas_editor_tabs,S as nylas_list_configurations};
-//# sourceMappingURL=p-0d98c728.entry.js.map

package/dist/nylas-web-elements/p-0d98c728.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconCss","GoogleLogoIconStyle0","GoogleLogoIcon","render","h","key","width","this","height","viewBox","fill","xmlns","d","id","MicrosoftLogoIconStyle0","MicrosoftLogoIcon","TabContents","formState","activeTab","calendars","eventTitle","title","eventDescription","description","eventDuration","parseInt","duration","location","slot","name","exportparts","eventDurationMinutes","eventLocation","openHours","availability","timezone","Intl","DateTimeFormat","resolvedOptions","timeZone","organizer","participants","find","p","is_organizer","organizerEmail","email","selectedCalendars","calendarIds","length","bookingCalendar","defaultBookingCalendar","defaultSelectedCalendars","defaultTimezone","buffer","minBookingNotice","availableDaysInFuture","minCancellationNotice","cancellationPolicy","eventParticipants","nylasEditorTabsCss","NylasEditorTabsStyle0","NylasEditorTabs","setError","error","message","formSubmissionHandler","async","event","preventDefault","formSubmitted","emit","valid","formRef","checkValidity","isLoading","hasUnsavedChanges","updateFormState","bookingType","timeslotInterval","additionalGuestsHidden","hideCancellationOptions","hideReschedulingOptions","participantOpenHours","selectedConfiguration","durationMinutes","participantsList","currentUser","calendar_ids","open_hours","booking","calendar_id","configObject","version","duration_minutes","interval_minutes","interval","round_to","roundTo","availability_rules","availability_method","before","after","default_open_hours","DEFAULT_OPEN_HOURS","round_robin_group_id","map","event_booking","toString","booking_type","scheduler","cancellation_policy","available_days_in_future","min_cancellation_notice","min_booking_notice","hide_additional_guests","hide_cancellation_options","hide_rescheduling_options","configObjectWithDeveloperSettings","mergeDeep","finalConfig","action","resetLoadingState","_e","changesSaved","setTimeout","schedulerConfigChanged","config","configChangedHandler","newConfig","debug","getFormStateFromConfig","connectedCallback","componentWillLoad","componentDidLoad","disconnectedCallback","handleValueChanged","value","detail","setFormState","organizerParticipant","JSON","parse","split","settings","formData","FormData","forEach","setActiveTab","e","tabName","showParticipantsTab","localStorage","getItem","Host","onSubmit","class","ref","el","noValidate","mode","tab","active","onClick","schedulerPreviewLink","type","disabled","clickHandler","previewEvent","previewButtonClicked","host","defaultPrevented","window","open","parsePreviewLink","variant","cancelButtonClick","__decorate","RegisterComponent","stateToProps","Map","eventToProps","nylasSchedulerConfigConnector","checkForErrors","response","data","schedulerConfig","updateConfiguration","createConfiguration","_","schedulerConfigStore","state","localPropsToProp","fireRegisterEvent","nylasListConfigurationsCss","NylasListConfigurationsStyle0","NylasListConfigurations","configurations","initListConfigurations","getState","setState","getDurationString","hours","Math","floor","minutes","createButtonClick","hide","colSpan","i","link","navigator","clipboard","writeText","copiedButtonIndex","editButtonClick","configuration","deleteButtonClick","connector","getConfigurations","resetSelectedConfiguration","deleteConfiguration"],"sources":["src/common/icons/icon.css?tag=google-logo-icon&encapsulation=scoped","src/common/icons/google-logo.tsx","src/common/icons/icon.css?tag=microsoft-logo-icon&encapsulation=scoped","src/common/icons/microsoft-logo.tsx","src/components/scheduler-editor/nylas-editor-tabs/tab-contents.tsx","src/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.scss?tag=nylas-editor-tabs&encapsulation=scoped","src/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.tsx","src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.scss?tag=nylas-list-configurations&encapsulation=shadow","src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'google-logo-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class GoogleLogoIcon {\n  @Prop() width: string = '24';\n  @Prop() height: string = '24';\n\n  render() {\n    // Spam icon svg\n    return (\n      <svg width={this.width} height={this.height} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g clip-path=\"url(#clip0_959_12452)\">\n          <path\n            d=\"M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z\"\n            fill=\"#4285F4\"\n          />\n          <path\n            d=\"M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z\"\n            fill=\"#34A853\"\n          />\n          <path\n            d=\"M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z\"\n            fill=\"#FBBC05\"\n          />\n          <path\n            d=\"M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z\"\n            fill=\"#EA4335\"\n          />\n        </g>\n        <defs>\n          <clipPath id=\"clip0_959_12452\">\n            <rect width={24} height={24} fill=\"white\" />\n          </clipPath>\n        </defs>\n      </svg>\n    );\n  }\n}\n",":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'microsoft-logo-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class MicrosoftLogoIcon {\n  @Prop() width: string = '22';\n  @Prop() height: string = '22';\n\n  render() {\n    // Spam icon svg\n    return (\n      <svg width={this.width} height={this.height} viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z\" fill=\"#F35325\" />\n        <path d=\"M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z\" fill=\"#81BC06\" />\n        <path d=\"M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z\" fill=\"#05A6F0\" />\n        <path d=\"M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z\" fill=\"#FFBA08\" />\n      </svg>\n    );\n  }\n}\n","import { h } from '@stencil/core';\n\nexport type TabContentsProps = {\n  id: string;\n  formState: any;\n  activeTab: string;\n  calendars?: any[];\n};\n\nexport default function TabContents({ id, formState, activeTab, calendars }: TabContentsProps) {\n  switch (activeTab) {\n    case 'eventInfo':\n      const eventTitle = formState.title;\n      const eventDescription = formState.description;\n      const eventDuration = parseInt(formState.duration);\n      const location = formState.location;\n\n      return (\n        <div key={id}>\n          <nylas-event-info>\n            <div slot=\"inputs\">\n              <nylas-event-title name=\"title\" eventTitle={eventTitle} exportparts=\"net, net__title, net__dropdown-content\" />\n              <nylas-event-duration\n                name=\"duration\"\n                eventDurationMinutes={eventDuration}\n                exportparts=\"ned, ned__dropdown, ned__dropdown-button, ned__dropdown-content, ned__input_dropdown, ned__input_dropdown-input, ned__input_dropdown-content\"\n              />\n              <nylas-event-location name=\"location\" eventLocation={location} exportparts=\"nel, nel__location, nel__dropdown, nel__dropdown-button, nel__dropdown-content\" />\n              <nylas-event-description name=\"description\" eventDescription={eventDescription} exportparts=\"nedesc, nedesc__textarea\" />\n            </div>\n          </nylas-event-info>\n        </div>\n      );\n    case 'availability':\n      const openHours = formState.availability.openHours;\n      const timezone = formState.availability.timezone ? formState.availability.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;\n      const organizer = formState.participants?.find(p => p.is_organizer);\n      const organizerEmail = organizer?.email ?? 'primary';\n      const selectedCalendars = formState.calendarIds.length > 0 ? formState.calendarIds : [organizerEmail];\n      const bookingCalendar = formState.bookingCalendar == 'primary' ? organizerEmail : formState.bookingCalendar;\n      return (\n        <div key={id}>\n          <nylas-booking-calendar-picker\n            name=\"booking-calendar\"\n            calendars={calendars ?? []}\n            defaultBookingCalendar={bookingCalendar}\n            exportparts={'nbcp, nbcp__header, nbcp__input-label, nbcp__dropdown, nbcp__dropdown-button, nbcp__dropdown-content'}\n          />\n          <nylas-calendar-picker\n            name=\"calendars\"\n            calendars={calendars ?? []}\n            defaultSelectedCalendars={selectedCalendars}\n            exportparts={'ncp ncp__header, ncp__dropdown, ncp__dropdown-button, ncp__dropdown-content'}\n          />\n          <nylas-availability-picker\n            name=\"availability\"\n            openHours={openHours}\n            defaultTimezone={timezone}\n            exportparts={\n              'nap__header, nap__select-timezone, nap__select-timezone-button, nap__select-timezone-dropdown-content, nap__availability, nap__day, nap__time-ranges, nap__time-range, nap__add-time-range, nap__time-picker-container, nap__time-picker-input, nap__time-picker-times'\n            }\n          />\n        </div>\n      );\n    case 'bookingOptions':\n      return (\n        <div key={id}>\n          <nylas-buffer-time\n            name=\"buffer-time\"\n            buffer={formState.buffer}\n            exportparts={\n              'nbt, nbt__header, nbt__body, nbt__dropdown-before, nbt__dropdown-button-before, nbt__dropdown-content-before, nbt__dropdown-after, nbt__dropdown-button-after, nbt__dropdown-content-after, nbt__preview'\n            }\n          />\n          {/* <nylas-custom-booking-flow\n            name=\"booking-type\"\n            bookingType={formState.bookingType}\n            exportparts={'ncbf, ncbf__header, ncbf__dropdown, ncbf__dropdown-button, ncbf__dropdown-content'}\n          /> */}\n          <nylas-event-limits>\n            <div slot=\"inputs\">\n              <nylas-min-booking-notice\n                name=\"min-booking-notice\"\n                minBookingNotice={formState.minBookingNotice}\n                exportparts=\"nmbn, nmbn__number-dropdown, nmbn__number-dropdown-button, nmbn__number-dropdown-content, nmbn__period-dropdown, nmbn__period-dropdown-button, nmbn__period-dropdown-content\"\n              />\n              <nylas-limit-future-bookings\n                name=\"limit-future-bookings\"\n                availableDaysInFuture={formState.availableDaysInFuture}\n                exportparts=\"nlfb, nlfb__number-dropdown, nlfb__number-dropdown-button, nlfb__number-dropdown-content, nlfb__period-dropdown, nlfb__period-dropdown-button, nlfb__period-dropdown-content\"\n              />\n              <nylas-min-cancellation-notice\n                name=\"min-cancellation-notice\"\n                minCancellationNotice={formState.minCancellationNotice}\n                exportparts=\"nmcn, nmcn__number-dropdown, nmcn__number-dropdown-button, nmcn__number-dropdown-content, nmcn__period-dropdown, nmcn__period-dropdown-button, nmcn__period-dropdown-content\"\n              />\n              <nylas-cancellation-policy name=\"cancellation-policy\" cancellationPolicy={formState.cancellationPolicy} exportparts=\"ncpolicy, ncpolicy__textarea\" />\n            </div>\n          </nylas-event-limits>\n          <nylas-timeslot-interval\n            name=\"timeslot-interval\"\n            eventDurationMinutes={parseInt(formState.duration)}\n            exportparts=\"nti, nti__header, nti__input-label, nti__dropdown, nti__dropdown-button, nti__dropdown-content\"\n          />\n          <nylas-customize-booking-settings\n            name=\"customize-booking-settings\"\n            exportparts=\"ncbs, ncbs__header, ncbs__settings, ncbs__settings-div, ncbs__additional_guests, ncbs__cancellation_options, ncbs__rescheduling_options\"\n          />\n        </div>\n      );\n    case 'participants':\n      return (\n        <div key={id}>\n          <nylas-additional-participants\n            name=\"participants\"\n            eventParticipants={formState.participants}\n            exportparts=\"nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant\"\n          />\n          <nylas-participants-custom-availability\n            name=\"participant-custom-availability\"\n            participants={formState.participants}\n            exportparts=\"npca, npca__header, npca__content, npca__participant-container, npca__participant-title, npca__participant-toggle--container, npca__toggle-label, npca__toggle-input, npca__toggle-slider\"\n          />\n        </div>\n      );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/buttons.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.scheduler-editor {\n  display: flex;\n  flex-direction: column;\n  .form-contents {\n    height: 554px;\n    display: grid;\n    grid-template-columns: minmax(224px, 25%) 1fr;\n    @media #{$mobile} {\n      display: table-column-group;\n      height: auto;\n    }\n    .tabs {\n      display: flex;\n      flex-direction: column;\n      border-right: 1px solid var(--nylas-base-200);\n      background-color: var(--nylas-base-25);\n      .tab {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        padding: 0.5rem 1rem;\n        color: var(--nylas-base-900);\n        background: var(--nylas-base-0);\n        border: none;\n        height: 56px;\n        font-family: var(--nylas-font-family);\n        font-size: 16px;\n        font-weight: 500;\n        line-height: 24px;\n        cursor: pointer;\n        &:not(:first-of-type) {\n          margin-top: 0.25rem;\n        }\n        &.active {\n          font-weight: 600;\n          background: var(--nylas-base-0);\n          color: var(--nylas-primary);\n          border-left: 4px solid var(--nylas-primary);\n          box-shadow: 0px 1px 2px 0px #0000000f;\n          box-shadow: 0px 1px 3px 0px #0000001a;\n        }\n      }\n    }\n    .tab-content {\n      max-width: 692px;\n      overflow-y: auto;\n      nylas-event-info,\n      nylas-event-limits {\n        width: inherit;\n        div[slot='inputs'] {\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n        }\n      }\n    }\n  }\n}\n\n.footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  min-height: 80px;\n  padding: 0 1rem;\n  border-top: 1px solid var(--nylas-base-200);\n  @media #{$mobile} {\n    flex-direction: column;\n    height: auto;\n  }\n  .preview {\n    @media #{$mobile} {\n      margin-top: 1rem;\n      width: 100%;\n    }\n  }\n  .buttons {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    justify-self: flex-end;\n    gap: 1rem;\n    @media #{$mobile} {\n      flex-direction: column-reverse;\n      width: 100%;\n    }\n    p {\n      max-width: 524px;\n      &.unsaved-changes {\n        color: var(--nylas-base-600);\n      }\n      &.saved-changes {\n        color: var(--nylas-success);\n      }\n      &.error {\n        color: var(--nylas-error);\n      }\n      &.error-full-width {\n        max-width: 660px;\n      }\n    }\n\n    button-component {\n      @media #{$mobile} {\n        width: 100%;\n      }\n    }\n    button {\n      @include primary-button;\n      width: 148px;\n      span {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5rem;\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, mergeDeep, parsePreviewLink } from '@/utils/utils';\nimport { BookingType, Calendar, Configuration, OpenHours, Participant } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport TabContents from './tab-contents';\nimport { User } from '@/common/nylas-api-request';\nimport { DEFAULT_OPEN_HOURS } from '@/common/constants';\nimport { DataResponseReturnType } from '@/common/types';\n\ntype SchedulerEventDetail = {\n  config: Partial<Configuration>;\n  action: 'create' | 'edit';\n  resetLoadingState?: (e: CustomEvent) => void;\n  setError?: (error: Error) => void;\n};\n\n/**\n * The `nylas-editor-tabs` component is a UI component that displays the editor tabs for the scheduler editor.\n * @part nap__title - [nylas-additional-participants] The title of the component.\n * @part nap__subtitle - [nylas-additional-participants] The subtitle of the component.\n * @part nap__content - [nylas-additional-participants] The content of the component.\n * @part nap__input - [nylas-additional-participants] The input of the component.\n * @part nap__remove-participant - [nylas-additional-participants] The remove participant button of the component.\n * @part nap__add-participant - [nylas-additional-participants] The add participant button of the component.\n * @part nap__header - [nylas-availability-picker] The header of the availability picker\n * @part nap__select-timezone - [nylas-availability-picker] The timezone selection container\n * @part nap__select-timezone-button -[nylas-availability-picker]  The timezone selection button\n * @part nap__select-timezone-dropdown-content -[nylas-availability-picker] The timezone selection dropdown content\n * @part nap__availability - [nylas-availability-picker] The availability container\n * @part nap__day - [nylas-availability-picker] The day container\n * @part nap__time-ranges - [nylas-availability-picker] The time ranges container\n * @part nap__time-range - [nylas-availability-picker] The time range container\n * @part nap__add-time-range - [nylas-availability-picker] The add time range button\n * @part nap__time-picker-container -[nylas-availability-picker]  The time picker container\n * @part nap__time-picker-input - [nylas-availability-picker]  The time picker input\n * @part nap__time-picker-times - [nylas-availability-picker] The time picker times\n * @part nbcp - [nylas-booking-calendar-picker] The booking calendar picker container\n * @part nbcp__header - [nylas-booking-calendar-picker] The header of the booking calendar picker\n * @part nbcp__input-label - [nylas-booking-calendar-picker] The input label of the booking calendar picker\n * @part nbcp__dropdown - [nylas-booking-calendar-picker] The dropdown container\n * @part nbcp__dropdown-button - [nylas-booking-calendar-picker] The dropdown button\n * @part nbcp__dropdown-content - [nylas-booking-calendar-picker] The dropdown content\n * @part nbt - [nylas-buffer-time] The buffer time container\n * @part nbt__header - [nylas-buffer-time] The header of the buffer time\n * @part nbt__body - [nylas-buffer-time] The body of the buffer time\n * @part nbt__dropdown-before - [nylas-buffer-time] The before buffer dropdown container\n * @part nbt__dropdown-button-before - [nylas-buffer-time] The before buffer dropdown button\n * @part nbt__dropdown-content-before - [nylas-buffer-time] The before buffer dropdown content\n * @part nbt__dropdown-after - [nylas-buffer-time] The after buffer dropdown container\n * @part nbt__dropdown-button-after - [nylas-buffer-time] The after buffer dropdown button\n * @part nbt__dropdown-content-after - [nylas-buffer-time] The after buffer dropdown content\n * @part nbt__preview - [nylas-buffer-time] The buffer time preview\n * @part ncp - [nylas-calendar-picker] The calendar picker container\n * @part ncp__header - [nylas-calendar-picker] The header of the calendar picker\n * @part ncp__dropdown - [nylas-calendar-picker] The dropdown container\n * @part ncp__dropdown-button - [nylas-calendar-picker] The dropdown button\n * @part ncp__dropdown-content - [nylas-calendar-picker] The dropdown content\n * @part ncbf - [nylas-custom-booking-flow] The custom booking flow container\n * @part ncbf__header - [nylas-custom-booking-flow] The header of the custom booking flow\n * @part ncbf__dropdown - [nylas-custom-booking-flow] The dropdown container\n * @part ncbf__dropdown-button - [nylas-custom-booking-flow] The dropdown button\n * @part ncbf__dropdown-content - [nylas-custom-booking-flow] The dropdown content\n * @part nedesc - [nylas-event-description] The event description container\n * @part nedesc__textarea - [nylas-event-description] The event description textarea\n * @part ned - [nylas-event-duration] The event duration container\n * @part ned__dropdown - [nylas-event-duration] The dropdown container for the duration increment\n * @part ned__dropdown-button - [nylas-event-duration] The dropdown button for the duration increment\n * @part ned__dropdown-content - [nylas-event-duration] The dropdown content for the duration increment\n * @part ned__input_dropdown - [nylas-event-duration] The input dropdown container for the duration minutes\n * @part ned__input_dropdown-input - [nylas-event-duration] The input for the duration minutes\n * @part ned__input_dropdown-content - [nylas-event-duration] The dropdown content for the input duration minutes\n * @part net - [nylas-event-title] The event title container\n * @part net__title - [nylas-event-title] The event title input\n * @part net__dropdown-content - [nylas-event-title] The token options container\n * @part nlfb - [nylas-limit-future-bookings] The limit future bookings container\n * @part nlfb__number-dropdown - [nylas-limit-future-bookings] The number dropdown container\n * @part nlfb__number-dropdown-button - [nylas-limit-future-bookings] The number dropdown button\n * @part nlfb__number-dropdown-content - [nylas-limit-future-bookings] The number dropdown content\n * @part nlfb__period-dropdown - [nylas-limit-future-bookings] The period dropdown container\n * @part nlfb__period-dropdown-button - [nylas-limit-future-bookings] The period dropdown button\n * @part nlfb__period-dropdown-content - [nylas-limit-future-bookings] The period dropdown content\n * @part nel - [nylas-event-location] The event location container\n * @part nel__location - [nylas-event-location] The event location input\n * @part nel__dropdown - [nylas-event-location] The dropdown container\n * @part nel__dropdown-button - [nylas-event-location] The dropdown button\n * @part nel__dropdown-content - [nylas-event-location] The dropdown content\n * @part nmbn - [nylas-min-booking-notice] The minimum booking notice container\n * @part nmbn__number-dropdown - [nylas-min-booking-notice] The number dropdown container\n * @part nmbn__number-dropdown-button - [nylas-min-booking-notice] The number dropdown button\n * @part nmbn__number-dropdown-content -[nylas-min-booking-notice] The number dropdown content\n * @part nmbn__period-dropdown - [nylas-min-booking-notice] The period dropdown container\n * @part nmbn__period-dropdown-button - [nylas-min-booking-notice] The period dropdown button\n * @part nmbn__period-dropdown-content - [nylas-min-booking-notice] The period dropdown content\n * @part nmcn - [nylas-min-cancellation-notice] The minimum cancellation notice container\n * @part nmcn__number-dropdown - [nylas-min-cancellation-notice] The number dropdown container\n * @part nmcn__number-dropdown-button - [nylas-min-cancellation-notice] The number dropdown button\n * @part nmcn__number-dropdown-content - [nylas-min-cancellation-notice] The number dropdown content\n * @part nmcn__period-dropdown - [nylas-min-cancellation-notice] The period dropdown container\n * @part nmcn__period-dropdown-button - [nylas-min-cancellation-notice] The period dropdown button\n * @part nmcn__period-dropdown-content - [nylas-min-cancellation-notice] The period dropdown content\n * @part ncpolicy - [nylas-cancellation-policy] The cancellation policy container\n * @part ncpolicy__textarea - [nylas-cancellation-policy] The cancellation policy textarea\n * @part nti - [nylas-timeslot-interval] The timeslot interval container\n * @part nti__header - [nylas-timeslot-interval] The header of the timeslot interval picker\n * @part nti__input-label - [nylas-timeslot-interval] The input label of the timeslot interval picker\n * @part nti__dropdown - [nylas-timeslot-interval] The dropdown container\n * @part nti__dropdown-button - [nylas-timeslot-interval] The dropdown button\n * @part nti__dropdown-content - [nylas-timeslot-interval] The dropdown content\n * @part npca - [nylas-participants-custom-availability] The participants custom availability container\n * @part npca__header - [nylas-participants-custom-availability] The header of the participants custom availability\n * @part npca__content - [nylas-participants-custom-availability] The content of the participants custom availability\n * @part npca__participant-container - [nylas-participants-custom-availability] The participant container\n * @part npca__participant-title - [nylas-participants-custom-availability] The participant title\n * @part npca__participant-toggle--container - [nylas-participants-custom-availability] The participant toggle container\n * @part npca__toggle-label - [nylas-participants-custom-availability] The toggle label\n * @part npca__toggle-input - [nylas-participants-custom-availability] The toggle input\n * @part npca__toggle-slider - [nylas-participants-custom-availability] The toggle slider\n * @part ncbs - [nylas-customize-booking-settings] The booking calendar picker container\n * @part ncbs__header - [nylas-customize-booking-settings] The header of the booking calendar picker\n * @part ncbs__settings - [nylas-customize-booking-settings] The settings container\n * @part ncbs__settings-div - [nylas-customize-booking-settings] The div inside the settings container that contains the checkbox and tooltip for each setting\n * @part ncbs__additional_guests - [nylas-customize-booking-settings] The additional guests setting\n * @part ncbs__cancellation_options - [nylas-customize-booking-settings] The cancellation options setting\n * @part ncbs__rescheduling_options - [nylas-customize-booking-settings] The rescheduling options setting\n */\n@Component({\n  tag: 'nylas-editor-tabs',\n  styleUrl: 'nylas-editor-tabs.scss',\n  scoped: true,\n})\nexport class NylasEditorTabs {\n  /**\n   * The form reference to access the form data.\n   */\n  private formRef!: HTMLFormElement;\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasEditorTabsElement;\n  /**\n   * The list of calendars to use in the editor when configuring availability.\n   */\n  @Prop() calendars?: Calendar[];\n  /**\n   * The selected configuration to use in the editor when editing an existing configuration or creating a new one.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The current logged in user.\n   */\n  @Prop() currentUser?: User;\n  /**\n   * The scheduler preview link to use when the user clicks on the preview button.\n   * You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link.\n   */\n  @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n  /**\n   * The mode of the editor.\n   * - `app`: The editor is used as a standalone app.\n   * - `composable`: The editor is used as a composable component.\n   */\n  @Prop() mode?: 'app' | 'composable' = 'app';\n  /**\n   * The action to perform in the editor.\n   * - `create`: Create a new configuration.\n   * - `edit`: Edit an existing configuration.\n   */\n  @State() action: 'create' | 'edit' = 'create';\n  /**\n   * The active tab in the editor.\n   */\n  @State() activeTab: string = 'eventInfo';\n  /**\n   * The loading state of the editor.\n   */\n  @State() isLoading: boolean = false;\n  /**\n   * The unsaved changes state of the editor.\n   */\n  @State() hasUnsavedChanges: boolean = false;\n  /**\n   * The changes saved state of the editor.\n   */\n  @State() changesSaved: boolean = false;\n  /**\n   * The form state of the editor.\n   */\n  @State() formState: Partial<{\n    title: string;\n    description: string;\n    duration: string;\n    availability?: {\n      timezone: string;\n      openHours?: OpenHours[];\n    };\n    calendarIds: string[];\n    participants?: Participant[];\n    participantOpenHours?: { [key: string]: OpenHours[] };\n    bookingCalendar?: string;\n    location?: string;\n    bookingType?: string;\n    buffer?: { before: number; after: number };\n    cancellationPolicy?: string;\n    availableDaysInFuture?: number;\n    minCancellationNotice?: number;\n    minBookingNotice?: number;\n    timeslotInterval?: {\n      interval: number;\n      roundTo?: number;\n    };\n    additionalGuestsHidden?: boolean;\n    hideCancellationOptions?: boolean;\n    hideReschedulingOptions?: boolean;\n  }> = {};\n  /**\n   * The error state of the editor.\n   */\n  @State() error?: string = '';\n  /**\n   * Event emitted when the configuration is changed. This fires for both create and edit actions.\n   */\n  @Event() schedulerConfigChanged!: EventEmitter<SchedulerEventDetail>;\n  /**\n   * Event emitted when the user clicks the cancel button.\n   */\n  @Event() cancelButtonClick!: EventEmitter<void>;\n  /**\n   * Event emitted on form submission.\n   */\n  @Event() formSubmitted!: EventEmitter<void>;\n  /**\n   * Event emitted when the user clicks the preview button.\n   */\n  @Event() previewButtonClicked!: EventEmitter<HTMLNylasEditorTabsElement>;\n\n  @Watch('selectedConfiguration')\n  configChangedHandler(newConfig: Configuration) {\n    debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.selectedConfiguration);\n    this.formState = {\n      ...this.getFormStateFromConfig(newConfig),\n    };\n\n    if (newConfig.id) {\n      this.action = 'edit';\n    } else {\n      this.action = 'create';\n    }\n  }\n\n  connectedCallback() {\n    debug('[nylas-editor-tabs]', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('[nylas-editor-tabs]', 'componentWillLoad');\n    this.formState = this.getFormStateFromConfig(this.selectedConfiguration);\n  }\n\n  componentDidLoad() {\n    debug('[nylas-editor-tabs]', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('[nylas-editor-tabs]', 'disconnectedCallback');\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n    this.setFormState(value, name);\n    this.formState = { ...this.formState };\n    this.hasUnsavedChanges = true;\n    this.error = '';\n  }\n\n  getFormStateFromConfig(config?: Configuration) {\n    const organizerParticipant = config?.participants?.find(p => p.is_organizer);\n    return {\n      title: config?.event_booking?.title ?? '',\n      description: config?.event_booking?.description ?? '',\n      duration: config?.availability?.duration_minutes?.toString() ?? '30',\n      availability: {\n        timezone: config?.event_booking?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,\n        openHours: config?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,\n      },\n      calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],\n      participants: config?.participants ?? [],\n      bookingCalendar: organizerParticipant?.booking?.calendar_id ?? organizerParticipant?.email ?? '',\n      location: config?.event_booking?.location ?? '',\n      bookingType: config?.event_booking?.booking_type ?? 'booking',\n      buffer: config?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },\n      cancellationPolicy: config?.scheduler?.cancellation_policy ?? '',\n      availableDaysInFuture: config?.scheduler?.available_days_in_future ?? 30,\n      minCancellationNotice: config?.scheduler?.min_cancellation_notice ?? 0,\n      minBookingNotice: config?.scheduler?.min_booking_notice ?? 60,\n      timeslotInterval: {\n        interval: config?.availability?.interval_minutes ?? config?.availability?.duration_minutes ?? 10,\n        roundTo: config?.availability?.round_to,\n      },\n      additionalGuestsHidden: config?.scheduler?.hide_additional_guests ?? false,\n      hideCancellationOptions: config?.scheduler?.hide_cancellation_options ?? false,\n      hideReschedulingOptions: config?.scheduler?.hide_rescheduling_options ?? false,\n    };\n  }\n\n  setFormState(value, key) {\n    switch (key) {\n      case 'title':\n        this.formState.title = value.toString();\n        break;\n      case 'description':\n        this.formState.description = value.toString();\n        break;\n      case 'duration':\n        this.formState.duration = value.toString();\n        break;\n      case 'availability':\n        this.formState.availability = JSON.parse(value.toString());\n        break;\n      case 'participants':\n        this.formState.participants = JSON.parse(value.toString());\n        break;\n      case 'calendars':\n        this.formState.calendarIds = value.toString().split(',');\n        break;\n      case 'booking-calendar':\n        this.formState.bookingCalendar = value.toString();\n        break;\n      case 'location':\n        this.formState.location = value.toString();\n        break;\n      case 'booking-type':\n        this.formState.bookingType = value.toString();\n        break;\n      case 'buffer-time':\n        this.formState.buffer = JSON.parse(value.toString());\n        break;\n      case 'limit-future-bookings':\n        this.formState.availableDaysInFuture = parseInt(value.toString());\n        break;\n      case 'min-cancellation-notice':\n        this.formState.minCancellationNotice = parseInt(value.toString());\n        break;\n      case 'min-booking-notice':\n        this.formState.minBookingNotice = parseInt(value.toString());\n        break;\n      case 'cancellation-policy':\n        this.formState.cancellationPolicy = value.toString();\n        break;\n      case 'timeslot-interval':\n        this.formState.timeslotInterval = JSON.parse(value.toString());\n        break;\n      case 'customize-booking-settings':\n        const settings = JSON.parse(value.toString());\n        this.formState.additionalGuestsHidden = settings.additionalGuestsHidden;\n        this.formState.hideCancellationOptions = settings.hideCancellationOptions;\n        this.formState.hideReschedulingOptions = settings.hideReschedulingOptions;\n        break;\n      case 'participant-custom-availability':\n        const participantOpenHours = JSON.parse(value.toString());\n        this.formState.participantOpenHours = participantOpenHours;\n        break;\n    }\n  }\n\n  updateFormState() {\n    const formData = new FormData(this.formRef);\n    formData.forEach((value, key) => {\n      this.setFormState(value, key);\n    });\n\n    this.formState = { ...this.formState };\n    return this.formState;\n  }\n\n  setActiveTab(e: Event, tabName: string) {\n    e.preventDefault();\n    this.updateFormState();\n    this.activeTab = tabName;\n  }\n\n  setError = (error: Error) => {\n    this.error = error.message;\n  };\n\n  formSubmissionHandler = async (event: Event) => {\n    event.preventDefault();\n    this.formSubmitted.emit();\n    const valid = this.formRef.checkValidity();\n    if (!valid) {\n      return;\n    }\n    this.isLoading = true;\n    this.hasUnsavedChanges = false;\n    const formState = this.updateFormState();\n    const {\n      title,\n      description,\n      duration,\n      availability,\n      calendarIds,\n      bookingCalendar,\n      location,\n      bookingType,\n      buffer,\n      availableDaysInFuture,\n      minCancellationNotice,\n      minBookingNotice,\n      cancellationPolicy,\n      timeslotInterval,\n      additionalGuestsHidden,\n      hideCancellationOptions,\n      hideReschedulingOptions,\n      participants,\n      participantOpenHours,\n    } = formState;\n    const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);\n    const durationMinutes = duration ? parseInt(duration) : 30;\n\n    const participantsList =\n      participants && participants?.length > 0\n        ? participants\n        : [\n            {\n              name: organizer?.name ?? this.currentUser?.name ?? organizer?.email ?? this.currentUser?.email ?? '',\n              email: organizer?.email ?? this.currentUser?.email ?? '',\n              is_organizer: true,\n              availability: {\n                calendar_ids: calendarIds?.length ? calendarIds : ['primary'],\n                open_hours: [],\n              },\n              booking: {\n                calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',\n              },\n            },\n          ];\n    const configObject: Partial<Configuration> = {\n      ...(this.selectedConfiguration?.id && { id: this.selectedConfiguration.id }),\n      version: this.selectedConfiguration?.version ?? '1.0.0',\n      availability: {\n        duration_minutes: durationMinutes,\n        interval_minutes: timeslotInterval?.interval ?? durationMinutes,\n        round_to: timeslotInterval?.roundTo,\n        availability_rules: {\n          availability_method: this.selectedConfiguration?.availability?.availability_rules?.availability_method ?? 'collective',\n          buffer: buffer || { before: 0, after: 0 },\n          default_open_hours: availability?.openHours ?? this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,\n          round_robin_group_id: this.selectedConfiguration?.availability?.availability_rules?.round_robin_group_id ?? '',\n        },\n      },\n      participants: [\n        ...participantsList?.map(p => {\n          if (p.is_organizer) {\n            return {\n              name: p.name ?? p.email,\n              email: p.email,\n              is_organizer: true,\n              availability: {\n                calendar_ids: calendarIds?.length ? calendarIds : ['primary'],\n                open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],\n              },\n              booking: {\n                calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',\n              },\n            };\n          }\n          return {\n            ...p,\n            availability: {\n              calendar_ids: p.availability?.calendar_ids ?? ['primary'],\n              open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],\n            },\n          };\n        }),\n      ],\n      event_booking: {\n        title: title?.toString() ?? '',\n        description: description?.toString() ?? '',\n        location: location?.toString() ?? '',\n        booking_type: (bookingType?.toString() as BookingType) ?? 'booking',\n        timezone: availability?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,\n      },\n      scheduler: {\n        cancellation_policy: cancellationPolicy ?? '',\n        available_days_in_future: availableDaysInFuture ?? 30,\n        min_cancellation_notice: minCancellationNotice ?? 0,\n        min_booking_notice: minBookingNotice ?? 60,\n        hide_additional_guests: additionalGuestsHidden ?? false,\n        hide_cancellation_options: hideCancellationOptions ?? false,\n        hide_rescheduling_options: hideReschedulingOptions ?? false,\n      },\n    };\n\n    const configObjectWithDeveloperSettings = mergeDeep(configObject, this.selectedConfiguration);\n\n    const finalConfig = this.action === 'create' ? configObjectWithDeveloperSettings : configObject;\n\n    const resetLoadingState = (_e: CustomEvent) => {\n      this.isLoading = false;\n      this.changesSaved = true;\n      setTimeout(() => {\n        this.changesSaved = false;\n      }, 5000);\n    };\n    this.schedulerConfigChanged.emit({ config: finalConfig, resetLoadingState, setError: this.setError, action: this.action });\n  };\n\n  @RegisterComponent<NylasEditorTabs, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-editor-tabs',\n    stateToProps: new Map([\n      ['schedulerConfig.calendars', 'calendars'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.currentUser', 'currentUser'],\n    ]),\n    eventToProps: {\n      schedulerConfigChanged: async (event: CustomEvent<SchedulerEventDetail>, nylasSchedulerConfigConnector: NylasSchedulerConfigConnector) => {\n        const { resetLoadingState, setError, action, config } = event.detail;\n        const checkForErrors = (response: DataResponseReturnType) => {\n          const [data, error] = response;\n          if (!data && error && setError) {\n            setError(error as Error);\n          }\n          if (resetLoadingState) {\n            resetLoadingState(event);\n          }\n        };\n\n        // If we have an ID, we are updating an existing configuration\n        if (action === 'edit') {\n          const response = await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);\n          checkForErrors(response);\n        } else {\n          const response = await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);\n          checkForErrors(response);\n        }\n      },\n      cancelButtonClick: async (_, nylasSchedulerConfigConnector) => {\n        nylasSchedulerConfigConnector.schedulerConfigStore.state.action = null;\n      },\n      previewButtonClicked: async (_, nylasSchedulerConfigConnector) => {\n        debug('[nylas-editor-tabs]', 'previewButtonClicked', nylasSchedulerConfigConnector);\n      },\n      formSubmitted: async (_, nylasSchedulerConfigConnector) => {\n        debug('[nylas-editor-tabs]', 'formSubmitted', nylasSchedulerConfigConnector);\n      },\n    },\n    localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    debug('[nylas-editor-tabs]', 'render', this.formState);\n    // TODO: Remove this check when the feature is ready to be released\n    const showParticipantsTab = localStorage.getItem('nylas') === 'Nylas Developer';\n    return (\n      <Host>\n        <form onSubmit={this.formSubmissionHandler} class=\"scheduler-editor\" ref={el => (this.formRef = el as HTMLFormElement)} noValidate>\n          {this.mode === 'app' ? (\n            <div class=\"form-contents\">\n              <div class=\"tabs\">\n                <button class={{ tab: true, active: this.activeTab == 'eventInfo' }} onClick={e => this.setActiveTab(e, 'eventInfo')}>\n                  <calendar-info-icon width=\"16\" height=\"16\" />\n                  Event Info\n                </button>\n                <button class={{ tab: true, active: this.activeTab == 'availability' }} onClick={e => this.setActiveTab(e, 'availability')}>\n                  <calendar-patterns-icon width=\"16\" height=\"16\" />\n                  Availability\n                </button>\n                <button class={{ tab: true, active: this.activeTab == 'bookingOptions' }} onClick={e => this.setActiveTab(e, 'bookingOptions')}>\n                  <flow-icon width=\"16\" height=\"16\" />\n                  Booking Options\n                </button>\n                {showParticipantsTab && (\n                  <button class={{ tab: true, active: this.activeTab == 'participants' }} onClick={e => this.setActiveTab(e, 'participants')}>\n                    <people-icon width=\"16\" height=\"16\" />\n                    Participants\n                  </button>\n                )}\n              </div>\n              <div class=\"tab-content\">\n                <TabContents formState={this.formState} activeTab={this.activeTab} calendars={this.calendars} id={this.selectedConfiguration?.id ?? 'new'} />\n              </div>\n            </div>\n          ) : (\n            <slot></slot>\n          )}\n\n          <div class=\"footer\">\n            <div class=\"preview\">\n              {this.schedulerPreviewLink !== '' && this.action === 'edit' && (\n                <button-component\n                  type=\"button\"\n                  disabled={this.isLoading}\n                  clickHandler={event => {\n                    event.preventDefault();\n                    const previewEvent = this.previewButtonClicked.emit(this.host);\n                    if (!previewEvent.defaultPrevented) {\n                      window.open(parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');\n                    }\n                  }}\n                  variant={'basic'}\n                >\n                  Preview\n                </button-component>\n              )}\n            </div>\n            <div class=\"buttons\">\n              <p\n                class={{\n                  'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,\n                  'saved-changes': this.changesSaved,\n                  'error': this.error !== '',\n                  'error-full-width': this.error !== '' && this.action === 'create',\n                }}\n              >\n                {this.error !== '' ? this.error : ''}\n                {this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''}\n              </p>\n              <button-component\n                type=\"button\"\n                disabled={this.isLoading}\n                clickHandler={event => {\n                  event.preventDefault();\n                  this.cancelButtonClick.emit();\n                  this.error = '';\n                }}\n                variant={'basic'}\n              >\n                Cancel\n              </button-component>\n              <button-component type=\"submit\" disabled={this.isLoading}>\n                {this.isLoading ? (\n                  <span>\n                    Saving\n                    <loading-icon />{' '}\n                  </span>\n                ) : this.action == 'create' ? (\n                  'Create'\n                ) : (\n                  'Save changes'\n                )}\n              </button-component>\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/buttons.scss';\n\n:host {\n  display: grid;\n  grid-auto-flow: row;\n  width: 100%;\n  font-family: inherit;\n  font-optical-sizing: auto;\n  @include default-css-variables;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n  gap: 1rem;\n  @media #{$mobile} {\n    flex-direction: column;\n    gap: 0.5rem;\n    align-items: unset;\n  }\n  h2 {\n    margin: 0;\n    font-size: 1.25rem;\n    color: var(--nylas-base-900);\n    font-weight: 600;\n  }\n\n  p {\n    margin: 0;\n    font-size: 1rem;\n    color: var(--nylas-base-700);\n  }\n\n  .actions {\n    justify-self: end;\n\n    @media #{$mobile} {\n      width: 100%;\n    }\n  }\n}\n\n.configurations {\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  background: var(--nylas-base-0);\n  height: 100%;\n  display: flex;\n  overflow-y: auto;\n  table {\n    width: 100%;\n    border-spacing: 0;\n    border-collapse: collapse;\n    font-family: inherit;\n    height: max-content;\n\n    &.no-configurations {\n      height: 100%;\n    }\n\n    tr {\n      color: var(--nylas-base-800);\n      border-bottom: 1px solid var(--nylas-base-200);\n      font-family: inherit;\n      &:last-of-type {\n        border-bottom: 0;\n      }\n\n      &.hide {\n        display: none;\n      }\n    }\n\n    th {\n      font-weight: 600;\n      text-transform: uppercase;\n      font-size: 14px;\n      line-height: 20px;\n      &.actions-header {\n        text-align: right;\n      }\n    }\n\n    tr.no-configurations {\n      td {\n        > div {\n          display: flex;\n          height: 100%;\n          justify-content: center;\n          align-items: center;\n          flex-direction: column;\n\n          padding: var(--nylas-border-radius-3x);\n\n          h3 {\n            margin: 0 0 1rem 0;\n            color: var(--nylas-base-700);\n          }\n\n          p {\n            margin: 0 0 1rem 0;\n            color: var(--nylas-base-600);\n          }\n\n          calendar-icon {\n            margin-bottom: 1rem;\n            color: var(--nylas-base-200);\n          }\n        }\n      }\n    }\n\n    th,\n    td {\n      text-align: left;\n      padding: 1rem;\n      font-family: inherit;\n    }\n\n    .actions {\n      text-align: right;\n    }\n\n    .actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: 1rem;\n      @media #{$mobile} {\n        flex-direction: column;\n        gap: 0.5rem;\n      }\n    }\n\n    .title {\n      display: flex;\n      flex-direction: column;\n\n      .config-event-title {\n        font-weight: 600;\n      }\n\n      .config-event-description {\n        font-size: 0.75rem;\n      }\n    }\n  }\n}\n\n.error-container {\n  margin-top: 1.5rem;\n  .error {\n    color: var(--nylas-error);\n    padding: 0.5rem 0;\n    margin: 1rem 0 0;\n  }\n}\n\nbutton-component#copy {\n  button {\n    width: 108px;\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, parsePreviewLink } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-list-configurations` component displays a list of scheduling pages.\n */\n@Component({\n  tag: 'nylas-list-configurations',\n  styleUrl: 'nylas-list-configurations.scss',\n  shadow: true,\n})\nexport class NylasListConfigurations {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasListConfigurationsElement;\n\n  /**\n   * The list of configurations to display.\n   */\n  @Prop() configurations: Configuration[] = [];\n\n  /**\n   * The scheduler preview link to use when the user clicks on the preview button.\n   * You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link.\n   */\n  @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n\n  /**\n   * Event emitted when the component is initialized.\n   */\n  @Event() initListConfigurations!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the create event button.\n   */\n  @Event() createButtonClick!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n  /**\n   * Event emitted when the user clicks the edit event button.\n   */\n  @Event() editButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * Event emitted when the user clicks the delete event button.\n   */\n  @Event() deleteButtonClick!: EventEmitter<{\n    host: HTMLNylasListConfigurationsElement;\n    configuration: Configuration;\n  }>;\n\n  /**\n   * The current state of the component.\n   */\n  @State() private state: 'loading' | 'loaded' | 'error' = 'loading';\n\n  /**\n   * The error message to display.\n   */\n  @State() private error: string = '';\n\n  /**\n   * The copy link button label.\n   */\n  @State() private copiedButtonIndex: number = -1;\n\n  connectedCallback() {\n    debug('[nylas-list-configurations]', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('[nylas-list-configurations]', 'componentWillLoad');\n\n    // If we have configurations, we will set the state to loaded.\n    if (this.configurations && this.configurations.length > 0) {\n      this.state = 'loaded';\n    }\n  }\n\n  componentDidLoad() {\n    debug('[nylas-list-configurations]', 'componentDidLoad');\n\n    // Fire the init event. By default, we will fetch the configurations.\n    // This is defined in the eventToProps object in the RegisterComponent decorator.\n    this.initListConfigurations.emit(this.host);\n  }\n\n  disconnectedCallback() {\n    debug('[nylas-list-configurations]', 'disconnectedCallback');\n  }\n\n  @Method()\n  async getState() {\n    return this.state;\n  }\n\n  @Method()\n  async setState(state: 'loading' | 'loaded' | 'error') {\n    this.state = state;\n  }\n\n  @Method()\n  async setError(error: string) {\n    this.error = error;\n  }\n\n  private getDurationString(duration: number) {\n    const hours = Math.floor(duration / 60);\n    const minutes = duration % 60;\n    return `${hours ? hours : ''} ${hours ? `${hours > 1 ? 'hours' : 'hour'}` : ''} ${minutes ? minutes : ''} ${minutes ? `${minutes > 1 ? 'mins' : 'min'}` : ''}`;\n  }\n\n  @RegisterComponent<NylasListConfigurations, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-list-configurations',\n    stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),\n    localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n    eventToProps: {\n      initListConfigurations: async (event, connector) => {\n        const host = event.detail;\n        await host.setState('loading');\n        const [data, error] = await connector.schedulerConfig.getConfigurations();\n        if (!data && error && error.message) {\n          await host.setState('error');\n          await host.setError(error.message);\n          return;\n        }\n        await host.setState('loaded');\n      },\n      createButtonClick: async (_, connector) => {\n        connector.schedulerConfigStore.resetSelectedConfiguration();\n        connector.schedulerConfigStore.state.action = 'create';\n      },\n      deleteButtonClick: async (event, connector) => {\n        const { host, configuration } = event.detail;\n        const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);\n        if (!data && error && error.message) {\n          await host.setState('error');\n          await host.setError(error.message);\n        }\n      },\n      editButtonClick: async (event, connector) => {\n        const { configuration } = event.detail;\n        connector.schedulerConfigStore.state.selectedConfiguration = configuration;\n        connector.schedulerConfigStore.state.action = 'edit';\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"description\">\n            <h2>All scheduling pages</h2>\n            <p>Create, edit and manage all your scheduling pages.</p>\n          </div>\n          {this.configurations && this.configurations.length > 0 && (\n            <div class=\"actions\">\n              <button-component\n                clickHandler={() => {\n                  this.createButtonClick.emit(this.host);\n                }}\n              >\n                Create new\n              </button-component>\n            </div>\n          )}\n        </div>\n        <div class=\"configurations\">\n          <table\n            class={{\n              'no-configurations': this.state !== 'loading' && (!this.configurations || this.configurations.length === 0),\n            }}\n          >\n            <tr\n              class={{\n                hide: this.state === 'loading' || (this.configurations && this.configurations.length === 0),\n              }}\n            >\n              <th>Scheduling page title</th>\n              <th>Duration</th>\n              <th class=\"actions-header\">Actions</th>\n            </tr>\n            {this.state === 'loading' && (\n              <tr class=\"no-configurations\">\n                <td colSpan={3}>\n                  <div>\n                    <h3>Loading...</h3>\n                    <p>Please wait while we fetch the scheduling pages</p>\n                  </div>\n                </td>\n              </tr>\n            )}\n            {this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (\n              <tr class=\"no-configurations\">\n                <td colSpan={3}>\n                  <div>\n                    <calendar-icon width=\"48\" height=\"48\"></calendar-icon>\n                    <h3>No scheduling pages found</h3>\n                    <p>Get started with creating your first scheduling page</p>\n                    <button-component\n                      clickHandler={() => {\n                        this.createButtonClick.emit(this.host);\n                      }}\n                    >\n                      Create new\n                    </button-component>\n                  </div>\n                </td>\n              </tr>\n            )}\n            {this.state !== 'loading' &&\n              this.configurations.map((config, i) => {\n                return (\n                  <tr key={config.id}>\n                    <td>\n                      <div class=\"title\">\n                        <span class={'config-event-title'}>{config.event_booking.title}</span>\n                        <span class={'config-event-description'}>{config.event_booking.description}</span>\n                      </div>\n                    </td>\n                    <td>\n                      <div>{this.getDurationString(config.availability.duration_minutes)}</div>\n                    </td>\n                    <td>\n                      <div class=\"actions\">\n                        <button-component\n                          variant={'basic'}\n                          id=\"copy\"\n                          key={`copy-${i}`}\n                          clickHandler={async event => {\n                            event.preventDefault();\n                            const link = parsePreviewLink(this.schedulerPreviewLink, config);\n                            await navigator.clipboard.writeText(link);\n                            this.copiedButtonIndex = i;\n                            setTimeout(() => {\n                              this.copiedButtonIndex = -1;\n                            }, 3000);\n                          }}\n                        >\n                          {this.copiedButtonIndex === i ? 'Copied!' : 'Copy link'}\n                        </button-component>\n                        <button-component\n                          variant={'basic'}\n                          key={`edit-${i}`}\n                          clickHandler={event => {\n                            event.preventDefault();\n                            this.editButtonClick.emit({ host: this.host, configuration: config });\n                          }}\n                        >\n                          Edit\n                        </button-component>\n                        <button-component\n                          variant={'basic'}\n                          key={`delete-${i}`}\n                          clickHandler={event => {\n                            event.preventDefault();\n                            this.deleteButtonClick.emit({ host: this.host, configuration: config });\n                          }}\n                        >\n                          Delete\n                        </button-component>\n                      </div>\n                    </td>\n                  </tr>\n                );\n              })}\n          </table>\n        </div>\n        {this.state === 'error' && (\n          <div class=\"error-container\">\n            <p class={'error'}>{this.error}</p>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nylas-web-elements/p-12b83ea9.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,H as e,a as h}from"./p-68c2fadf.js";import{N as n,e as r}from"./p-36e3bf97.js";import{a}from"./p-6c11737d.js";import{N as o,a as c,b as d,c as u,C as l,d as f,H as p}from"./p-a35d2938.js";import"./p-02aa5f03.js";import"./p-cb65c223.js";import"./p-cabb2e68.js";class m{constructor(t,s,i,e){this.router=t;this.nylasAuth=s;this.nylasAuthStore=i;this.nylasMailboxStore=e}init(){a("NylasMailboxConnector init")}get mailboxStore(){return this.nylasMailboxStore}get authStore(){return this.nylasAuthStore}get auth(){if(this._authConnector){return this._authConnector}this._authConnector=new o(this.nylasAuth,this.nylasAuthStore);return this._authConnector}get threads(){if(this._threadConnector){return this._threadConnector}this._threadConnector=new c(this.nylasAuth,this.nylasAuthStore,this.nylasMailboxStore,this.router);return this._threadConnector}get messages(){if(this._messageConnector){return this._messageConnector}this._messageConnector=new d(this.nylasAuth,this.nylasAuthStore,this.nylasMailboxStore);return this._messageConnector}get folders(){if(this._foldersConnector){return this._foldersConnector}this._foldersConnector=new u(this.nylasAuth,this.nylasAuthStore,this.nylasMailboxStore);return this._foldersConnector}getAuth(){return this.nylasAuth}resetStores(){this.nylasMailboxStore.reset();this.nylasAuthStore.reset()}async logout(){await this.nylasAuth.logout();this.resetStores()}}const b=":host{display:contents}";const y=b;const g=class{constructor(i){t(this,i);this.init=s(this,"init",7);this.loggedIn=s(this,"loggedIn",7);this.loggedOut=s(this,"loggedOut",7);this.handleAuthChange=async t=>{if(t){this.loggedIn.emit(this.host)}else{const t=this.loggedOut.emit(this.host);if(!t.defaultPrevented){await(this.nylasMailboxConnector?.logout())}}};this.automaticComponentRegistration=true;this.eventOverrides={};this.authConfig=undefined;this.defaultAuthStoreState=undefined;this.defaultMailboxStoreState=undefined}connectedCallback(){a("[nylas-mailbox] connectedCallback")}async componentWillLoad(){this.stores={auth:l(this.defaultAuthStoreState),mailbox:f(this.defaultMailboxStoreState)};this.baseProvider=new n(this.host,this.stores,this.automaticComponentRegistration,this.eventOverrides);this.router=new p;this.nylasAuth=r({apiUri:"https://api.us.nylas.com",elementsApiUri:"https://elements.us.nylas.com",storageType:"indexeddb",clientId:"YOUR_CLIENT_ID",defaultScopes:[],redirectURI:"/",...this.authConfig});const t=this.baseProvider?.getStore("auth");if(!t){throw new Error("Auth store is not defined")}const s=this.baseProvider?.getStore("mailbox");if(!s){throw new Error("Mailbox store is not defined")}this.nylasMailboxConnector=new m(this.router,this.nylasAuth,t,s);const i=this.init.emit(this.host);if(!i.defaultPrevented){await(this.nylasMailboxConnector?.auth.validateSession())}this.router?.addRouteChangeListener(`/thread/:threadId`,(async(t,s,i)=>{const e=i.threadId;const h=await(this.nylasMailboxConnector?.threads.getThread(e));if(h){this.nylasMailboxConnector?.mailboxStore.set("selectedThread",h)}}));this.router?.addRouteChangeListener(`/`,(async(s,i,e)=>{if(!t.state.isAuthenticated){return}this.nylasMailboxConnector?.threads.unSelectThread();this.nylasMailboxConnector?.folders.getFolders();const h=window.location.hash.split("?")[1];if(h){const t=new URLSearchParams(h);const s=t.get("query");if(s){await(this.nylasMailboxConnector?.threads.getThreads({search_query_native:s,page_token:undefined}))}}else{this.nylasMailboxConnector?.threads.getThreads()}}));this.router?.init();this.handleAuthChange(t.state.isAuthenticated);this.baseProvider?.componentWillLoad(this.nylasMailboxConnector)}async componentDidLoad(){const t=this.baseProvider?.getStore("auth");if(!t){throw new Error("Auth store is not defined")}t.onChange("isAuthenticated",this.handleAuthChange);this.baseProvider?.componentDidLoad()}componentDisconnected(){this.baseProvider?.componentDisconnected()}async registerComponentHandler(t){this.baseProvider?.registerComponent(t.detail)}async unregisterComponentHandler(t){this.baseProvider?.unregisterComponent(t.detail)}async getMailboxStore(){return this.baseProvider?.getStore("mailbox")}async getAuthStore(){return this.baseProvider?.getStore("auth")}async getNylasAuth(){return this.nylasAuth}async getNylasMailboxConnector(){return this.nylasMailboxConnector}render(){return i(e,{key:"425f7f57f8a5996e86ba7c97187b7e78ceaedba7"},i("slot",{key:"bb7ebdf7b8033ccd731cc13782f426cf8ed9cb31"}))}get host(){return h(this)}};g.style=y;export{g as nylas_mailbox};
-//# sourceMappingURL=p-12b83ea9.entry.js.map

package/dist/nylas-web-elements/p-16fb6243.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as t,H as n,a as e}from"./p-68c2fadf.js";import{R as r}from"./p-795b324a.js";import{a as s}from"./p-6c11737d.js";import"./p-02aa5f03.js";import"./p-cb65c223.js";const a=":host{display:block}sp-button{border-radius:var(--nylas-border-radius);background-color:var(--nylas-color-primary-400);color:var(--nylas-color-primary-900);fill:var(--nylas-color-primary-900)}sp-button:hover{background-color:var(--nylas-color-primary-500)}sp-button:disabled{background-color:var(--nylas-color-primary-200);color:var(--nylas-color-primary-600);cursor:not-allowed}";const i=a;var l=undefined&&undefined.__decorate||function(o,t,n,e){var r=arguments.length,s=r<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,n):e,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(o,t,n,e);else for(var i=o.length-1;i>=0;i--)if(a=o[i])s=(r<3?a(s):r>3?a(t,n,s):a(t,n))||s;return r>3&&s&&Object.defineProperty(t,n,s),s};var c=undefined&&undefined.__metadata||function(o,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(o,t)};const d=class{constructor(t){o(this,t);this.onClick=async()=>{const o=this.method;s(`[nylas-mailbox-toolbar-button] onClick`,{method:o,mailboxConnector:this.mailboxConnector});if(this.mailboxConnector&&o){const t=this.callMethod(this.mailboxConnector,o);if(t){await t()}}};this.method=undefined;this.dataState=undefined;this.iconOnly=false;this.mailboxConnector=undefined}connectedCallback(){}disconnectedCallback(){}async componentWillLoad(){s(`[nylas-if-state] Component will load`)}async componentDidLoad(){s(`[nylas-if-state] Component did load`)}callMethod(o,t){const n=t.split(".");let e=o;for(const o of n.slice(0,-1)){e=e[o];if(!e){return undefined}}const r=n[n.length-1];const s=e[r];if(typeof s==="function"){return s.bind(e)}return undefined}renderByState(o){return o?t("slot",{name:"loading"},"Loading..."):t("slot",null,"Click")}hasSlot(o){return!!this.host.querySelector(`[slot="${o}"]`)}render(){let o=false;const e=this.mailboxConnector?.nylasMailboxStore;if(typeof e!=="undefined"){const t=String(this.dataState);o=this.dataState?e.get(t)==="loading":false}const r=o?`state-loading`:"state-ready";return t(n,{key:"b23db535419c4294d712d2f45b210dc81b758169"},t("sp-theme",{key:"591e0d41b7976552b3e9d3ba669028cee0c8b0f2",scale:"medium",color:"dark"},t("sp-button",{onClick:this.onClick,disabled:o,key:r,"icon-only":this.iconOnly,label:this.renderByState(o)},this.hasSlot("icon")&&t("div",{slot:"icon",class:"slot"},t("slot",{name:"icon"})),!this.iconOnly&&this.renderByState(o))))}get host(){return e(this)}};l([r({name:"nylas-mailbox-toolbar-button",connectorToProp:"mailboxConnector",fireRegisterEvent:true}),c("design:type",Function),c("design:paramtypes",[]),c("design:returntype",void 0)],d.prototype,"render",null);d.style=i;export{d as nylas_mailbox_toolbar_button};
-//# sourceMappingURL=p-16fb6243.entry.js.map

package/dist/nylas-web-elements/p-1970b6ee.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-68c2fadf.js";const s=".sc-bold-icon-h{display:flex}";const o=s;const i=class{constructor(t){e(this,t);this.width="15";this.height="15"}render(){return t("svg",{key:"21cc32bcd9278b9e8cbd7d86bd64bb5654dbf490",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"de421f55e13b8e069e9cafeb3aeffdea7dbe1135",d:"M6 4V20M9.5 4H15.5C17.7091 4 19.5 5.79086 19.5 8C19.5 10.2091 17.7091 12 15.5 12H9.5H16.5C18.7091 12 20.5 13.7909 20.5 16C20.5 18.2091 18.7091 20 16.5 20H9.5M9.5 4V20M9.5 4H4M9.5 20H4",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}};i.style=o;const n=".sc-italic-icon-h{display:flex}";const r=n;const c=class{constructor(t){e(this,t);this.width="15";this.height="15"}render(){return t("svg",{key:"b3e134283da3ca00289afd8f011930a40bc529e8",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"e71e87f8b050a4c617b145589ce94e2e8eeb327f",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m10 20 4-16m2 0h-4m0 16H8"}))}};c.style=r;const d=".sc-underline-icon-h{display:flex}";const h=d;const l=class{constructor(t){e(this,t);this.width="15";this.height="15"}render(){return t("svg",{key:"64c36deb7005436533edad075e3510fe5009ad49",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"9e88d2b8251191a8412b0225575b5e9939315a4f",d:"M19 4V10C19 13.866 15.866 17 12 17C8.13401 17 5 13.866 5 10V4M8.5 4V10C8.5 13.2218 10.6766 15.9352 13.6395 16.7501M4 21H20M3 4L10.5 4M17 4L21 4",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}};l.style=h;export{i as bold_icon,c as italic_icon,l as underline_icon};
-//# sourceMappingURL=p-1970b6ee.entry.js.map

package/dist/nylas-web-elements/p-1a27960b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textareaComponentCss","TextareaComponentStyle0","TextareaComponent","componentWillLoad","this","value","sanitizeHtml","defaultValue","handleBookingFormSubmitted","event","validate","error","preventDefault","handleInput","e","inputElement","target","nylasFormInputChanged","emit","name","label","required","length","maxLength","render","h","key","part","class","placeholder","readOnly","autoFocus","onInput"],"sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n  p {\n    margin: 0;\n  }\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\ntextarea {\n  @include textfield;\n  padding: 12px 16px;\n  border-width: 1;\n  resize: vertical;\n  border-radius: 8px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  line-height: 24px;\n  &::-webkit-resizer {\n    display: none;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html'; // Importing sanitize-html to clean inputs and prevent XSS attacks.\n\n/**\n * `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n *\n * @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n */\n@Component({\n  tag: 'textarea-component',\n  styleUrl: 'textarea-component.scss',\n  shadow: true,\n})\nexport class TextareaComponent {\n  /**\n   * The name of the textarea, important for form submissions.\n   */\n  @Prop() name: string = 'textarea';\n\n  /**\n   * The default value of the textarea, appearing when the component first renders.\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * The label for the textarea, displayed above it.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Placeholder text shown in the textarea when it is empty.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Specifies if the textarea is required for form submission.\n   * If true, an error message shows if left empty.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If true, the textarea cannot be edited by the user.\n   */\n  @Prop() readOnly: boolean = false;\n\n  /**\n   * Automatically focus the textarea when the component loads.\n   */\n  @Prop() autoFocus: boolean = false;\n\n  /**\n   * The maximum number of characters allowed in the textarea.\n   */\n  @Prop() maxLength: number = 255;\n\n  /**\n   * State for the current value of the textarea.\n   */\n  @State() value: string = '';\n\n  /**\n   * State for managing the display of any error messages.\n   */\n  @State() error: string = '';\n\n  /**\n   * Event emitted when the value of the textarea changes.\n   * Useful for parent components to capture user input.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string }>;\n\n  /**\n   * Lifecycle method that runs before the component loads.\n   * It sets the initial value and cleans it using sanitize-html.\n   */\n  componentWillLoad() {\n    this.value = sanitizeHtml(this.defaultValue);\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validate(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Handles user input in the textarea, updating the value and emitting an event.\n   */\n  handleInput(e: Event) {\n    const inputElement = e.target as HTMLTextAreaElement;\n    this.value = sanitizeHtml(inputElement.value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      error: this.error,\n      label: this.label,\n    });\n  }\n\n  /**\n   * Validates the textarea value based on the required prop and maxLength.\n   * If the value is invalid, an error message is displayed.\n   */\n  validate(value: string) {\n    if (this.required && !value) {\n      this.error = `${this.label} is required.`;\n    } else if (value.length > this.maxLength) {\n      this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n    } else {\n      this.error = '';\n    }\n  }\n\n  /**\n   * Renders the component UI including the label, textarea, and any error messages.\n   */\n  render() {\n    return (\n      <label part=\"tc__label\" class={{ error: !!this.error }}>\n        <p>\n          <span class=\"label\">{this.label}</span>\n          {this.required && <span class=\"required\">*</span>}\n        </p>\n        <textarea\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readOnly}\n          autoFocus={this.autoFocus}\n          value={this.value}\n          maxLength={this.maxLength}\n          onInput={e => this.handleInput(e)}\n          class={{ error: !!this.error }}\n          part=\"tc__textarea\"\n        />\n        {this.error && <span class=\"error help-text\">{this.error}</span>}\n      </label>\n    );\n  }\n}\n"],"mappings":"8JAAA,MAAMA,EAAuB,wwDAC7B,MAAAC,EAAeD,E,MCcFE,EAAiB,M,gGAIL,W,kBAKQ,G,WAKP,G,iBAKM,G,cAMF,M,cAKA,M,eAKC,M,eAKD,I,WAKH,G,WAKA,E,CAYzB,iBAAAC,GACEC,KAAKC,MAAQC,EAAaF,KAAKG,a,CAQjC,0BAAAC,CAA2BC,GACzBL,KAAKM,SAASN,KAAKC,OACnB,GAAID,KAAKO,MAAO,CACdF,EAAMG,gB,EAOV,WAAAC,CAAYC,GACV,MAAMC,EAAeD,EAAEE,OACvBZ,KAAKC,MAAQC,EAAaS,EAAaV,OACvCD,KAAKa,sBAAsBC,KAAK,CAC9Bb,MAAOD,KAAKC,MACZc,KAAMf,KAAKe,KACXR,MAAOP,KAAKO,MACZS,MAAOhB,KAAKgB,O,CAQhB,QAAAV,CAASL,GACP,GAAID,KAAKiB,WAAahB,EAAO,CAC3BD,KAAKO,MAAQ,GAAGP,KAAKgB,oB,MAChB,GAAIf,EAAMiB,OAASlB,KAAKmB,UAAW,CACxCnB,KAAKO,MAAQ,GAAGP,KAAKgB,uBAAuBhB,KAAKmB,uB,KAC5C,CACLnB,KAAKO,MAAQ,E,EAOjB,MAAAa,GACE,OACEC,EAAA,SAAAC,IAAA,2CAAOC,KAAK,YAAYC,MAAO,CAAEjB,QAASP,KAAKO,QAC7Cc,EAAA,KAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,2CAAME,MAAM,SAASxB,KAAKgB,OACzBhB,KAAKiB,UAAYI,EAAA,QAAMG,MAAM,YAAU,MAE1CH,EAAA,YAAAC,IAAA,2CACEP,KAAMf,KAAKe,KACXU,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAK0B,SACfC,UAAW3B,KAAK2B,UAChB1B,MAAOD,KAAKC,MACZkB,UAAWnB,KAAKmB,UAChBS,QAASlB,GAAKV,KAAKS,YAAYC,GAC/Bc,MAAO,CAAEjB,QAASP,KAAKO,OACvBgB,KAAK,iBAENvB,KAAKO,OAASc,EAAA,QAAMG,MAAM,mBAAmBxB,KAAKO,O"}

package/dist/nylas-web-elements/p-1fa7b832.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,H as e,a as h}from"./p-68c2fadf.js";import{N as n,e as r}from"./p-36e3bf97.js";import{a}from"./p-6c11737d.js";import{N as o,a as c,b as d,c as u,C as l,d as f,H as p}from"./p-a35d2938.js";import"./p-02aa5f03.js";import"./p-cb65c223.js";import"./p-cabb2e68.js";class m{constructor(t,s,i,e){this.router=t;this.nylasAuth=s;this.nylasAuthStore=i;this.nylasMailboxStore=e}init(){a("NylasMailboxConnector init")}get mailboxStore(){return this.nylasMailboxStore}get authStore(){return this.nylasAuthStore}get auth(){if(this._authConnector){return this._authConnector}this._authConnector=new o(this.nylasAuth,this.nylasAuthStore);return this._authConnector}get threads(){if(this._threadConnector){return this._threadConnector}this._threadConnector=new c(this.nylasAuth,this.nylasAuthStore,this.nylasMailboxStore,this.router);return this._threadConnector}get messages(){if(this._messageConnector){return this._messageConnector}this._messageConnector=new d(this.nylasAuth,this.nylasAuthStore,this.nylasMailboxStore);return this._messageConnector}get folders(){if(this._foldersConnector){return this._foldersConnector}this._foldersConnector=new u(this.nylasAuth,this.nylasAuthStore,this.nylasMailboxStore);return this._foldersConnector}getAuth(){return this.nylasAuth}resetStores(){this.nylasMailboxStore.reset();this.nylasAuthStore.reset()}async logout(){await this.nylasAuth.logout();this.resetStores()}}const y=":host{display:contents}";const b=y;const g=class{constructor(i){t(this,i);this.init=s(this,"init",7);this.loggedIn=s(this,"loggedIn",7);this.loggedOut=s(this,"loggedOut",7);this.handleAuthChange=async t=>{if(t){this.loggedIn.emit(this.host)}else{const t=this.loggedOut.emit(this.host);if(!t.defaultPrevented){await(this.nylasMailboxConnector?.logout())}}};this.automaticComponentRegistration=true;this.eventOverrides={};this.authConfig=undefined;this.defaultAuthStoreState=undefined;this.defaultMailboxStoreState=undefined}connectedCallback(){a("[nylas-mailbox] connectedCallback")}async componentWillLoad(){this.stores={auth:l(this.defaultAuthStoreState),mailbox:f(this.defaultMailboxStoreState)};this.baseProvider=new n(this.host,this.stores,this.automaticComponentRegistration,this.eventOverrides);this.router=new p;this.nylasAuth=r({apiUri:"https://api.us.nylas.com",elementsApiUri:"https://elements.us.nylas.com",storageType:"indexeddb",clientId:"YOUR_CLIENT_ID",defaultScopes:[],redirectURI:"/",...this.authConfig});const t=this.baseProvider?.getStore("auth");if(!t){throw new Error("Auth store is not defined")}const s=this.baseProvider?.getStore("mailbox");if(!s){throw new Error("Mailbox store is not defined")}this.nylasMailboxConnector=new m(this.router,this.nylasAuth,t,s);const i=this.init.emit(this.host);if(!i.defaultPrevented){await(this.nylasMailboxConnector?.auth.validateSession())}this.router?.addRouteChangeListener(`/thread/:threadId`,(async(t,s,i)=>{const e=i.threadId;const h=await(this.nylasMailboxConnector?.threads.getThread(e));if(h){this.nylasMailboxConnector?.mailboxStore.set("selectedThread",h)}}));this.router?.addRouteChangeListener(`/`,(async(s,i,e)=>{if(!t.state.isAuthenticated){return}this.nylasMailboxConnector?.threads.unSelectThread();this.nylasMailboxConnector?.folders.getFolders();const h=window.location.hash.split("?")[1];if(h){const t=new URLSearchParams(h);const s=t.get("query");if(s){await(this.nylasMailboxConnector?.threads.getThreads({search_query_native:s,page_token:undefined}))}}else{this.nylasMailboxConnector?.threads.getThreads()}}));this.router?.init();this.handleAuthChange(t.state.isAuthenticated);this.baseProvider?.componentWillLoad(this.nylasMailboxConnector)}async componentDidLoad(){const t=this.baseProvider?.getStore("auth");if(!t){throw new Error("Auth store is not defined")}t.onChange("isAuthenticated",this.handleAuthChange);this.baseProvider?.componentDidLoad()}componentDisconnected(){this.baseProvider?.componentDisconnected()}async registerComponentHandler(t){this.baseProvider?.registerComponent(t.detail)}async unregisterComponentHandler(t){this.baseProvider?.unregisterComponent(t.detail)}async getMailboxStore(){return this.baseProvider?.getStore("mailbox")}async getAuthStore(){return this.baseProvider?.getStore("auth")}async getNylasAuth(){return this.nylasAuth}async getNylasMailboxConnector(){return this.nylasMailboxConnector}render(){return i(e,{key:"848ce45e73b2a8f67fc9c3d1a456d3208986f287"},i("slot",{key:"b2cd97e86298b6d74cddee0175762b98dce42f79"}))}get host(){return h(this)}};g.style=b;export{g as nylas_mailbox};
-//# sourceMappingURL=p-1fa7b832.entry.js.map