@nylas/web-elements 1.1.0-canary.15 → 1.1.0-canary.16

package/dist/nylas-web-elements/p-b406bf70.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","nylasEditorTabsCss","NylasEditorTabsStyle0","NylasEditorTabs","setError","error","message","formSubmissionHandler","async","event","preventDefault","formSubmitted","emit","valid","formRef","checkValidity","isLoading","hasUnsavedChanges","updateFormState","bookingType","timeslotInterval","additionalGuestsHidden","hideCancellationOptions","hideReschedulingOptions","selectedConfiguration","durationMinutes","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","currentUser","calendar_ids","open_hours","booking","calendar_id","event_booking","toString","booking_type","scheduler","cancellation_policy","available_days_in_future","min_cancellation_notice","min_booking_notice","additional_guests_hidden","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","organizerParticipant","formData","FormData","forEach","JSON","parse","split","settings","setActiveTab","e","tabName","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","map","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      // const eventParticipants = formState.participants;\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          {/* <nylas-additional-participants\n              name=\"participants\"\n              eventParticipants={eventParticipants}\n              exportparts={'nap__title, nap__subtitle, nap__content, nap__input_group, nap__input_wrapper, nap__input, nap__remove-participant, nap__add-participant'}\n            /> */}\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  }\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 } 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 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?: any[];\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.formState = { ...this.formState, [name]: value };\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: organizerParticipant?.availability?.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?.additional_guests_hidden ?? false,\n      hideCancellationOptions: config?.scheduler?.hide_cancellation_options ?? false,\n      hideReschedulingOptions: config?.scheduler?.hide_rescheduling_options ?? false,\n    };\n  }\n\n  updateFormState() {\n    const formData = new FormData(this.formRef);\n    formData.forEach((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      }\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    } = formState;\n    const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);\n    const durationMinutes = duration ? parseInt(duration) : 30;\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: 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        {\n          name: organizer?.name ?? organizer?.email ?? this.currentUser?.name ?? 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: availability?.openHours ?? [],\n          },\n          booking: {\n            calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',\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        additional_guests_hidden: 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    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              </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":"0OAAA,MAAMA,EAAU,uCAChB,MAAAC,EAAeD,E,MCMFE,EAAc,M,oCACD,K,YACC,I,CAEzB,MAAAC,GAEE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKD,MAAOE,OAAQD,KAAKC,OAAQC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BACjFP,EAAA,KAAAC,IAAA,uDAAa,yBACXD,EAAA,QAAAC,IAAA,2CACEO,EAAE,iKACFF,KAAK,YAEPN,EAAA,QAAAC,IAAA,2CACEO,EAAE,gMACFF,KAAK,YAEPN,EAAA,QAAAC,IAAA,2CACEO,EAAE,+OACFF,KAAK,YAEPN,EAAA,QAAAC,IAAA,2CACEO,EAAE,oLACFF,KAAK,aAGTN,EAAA,QAAAC,IAAA,4CACED,EAAA,YAAAC,IAAA,2CAAUQ,GAAG,mBACXT,EAAA,QAAAC,IAAA,2CAAMC,MAAO,GAAIE,OAAQ,GAAIE,KAAK,Y,aCnC9C,MAAMV,EAAU,0CAChB,MAAAc,EAAed,E,MCMFe,EAAiB,M,oCACJ,K,YACC,I,CAEzB,MAAAZ,GAEE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKD,MAAOE,OAAQD,KAAKC,OAAQC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BACjFP,EAAA,QAAAC,IAAA,2CAAMO,EAAE,wDAAwDF,KAAK,YACrEN,EAAA,QAAAC,IAAA,2CAAMO,EAAE,sDAAsDF,KAAK,YACnEN,EAAA,QAAAC,IAAA,2CAAMO,EAAE,sDAAsDF,KAAK,YACnEN,EAAA,QAAAC,IAAA,2CAAMO,EAAE,oDAAoDF,KAAK,Y,sBCTjDM,GAAYH,GAAEA,EAAEI,UAAEA,EAASC,UAAEA,EAASC,UAAEA,IAC9D,OAAQD,GACN,IAAK,YACH,MAAME,EAAaH,EAAUI,MAC7B,MAAMC,EAAmBL,EAAUM,YACnC,MAAMC,EAAgBC,SAASR,EAAUS,UACzC,MAAMC,EAAWV,EAAUU,SAG3B,OACEvB,EAAA,OAAKC,IAAKQ,GACRT,EAAA,wBACEA,EAAA,OAAKwB,KAAK,UACRxB,EAAA,qBAAmByB,KAAK,QAAQT,WAAYA,EAAYU,YAAY,2CACpE1B,EAAA,wBACEyB,KAAK,WACLE,qBAAsBP,EACtBM,YAAY,iJAEd1B,EAAA,wBAAsByB,KAAK,WAAWG,cAAeL,EAAUG,YAAY,mFAC3E1B,EAAA,2BAAyByB,KAAK,cAAcP,iBAAkBA,EAAkBQ,YAAY,gCAUtG,IAAK,eACH,MAAMG,EAAYhB,EAAUiB,aAAaD,UACzC,MAAME,EAAWlB,EAAUiB,aAAaC,SAAWlB,EAAUiB,aAAaC,SAAWC,KAAKC,iBAAiBC,kBAAkBC,SAC7H,MAAMC,EAAYvB,EAAUwB,cAAcC,MAAKC,GAAKA,EAAEC,eACtD,MAAMC,EAAiBL,GAAWM,OAAS,UAC3C,MAAMC,EAAoB9B,EAAU+B,YAAYC,OAAS,EAAIhC,EAAU+B,YAAc,CAACH,GACtF,MAAMK,EAAkBjC,EAAUiC,iBAAmB,UAAYL,EAAiB5B,EAAUiC,gBAC5F,OACE9C,EAAA,OAAKC,IAAKQ,GACRT,EAAA,iCACEyB,KAAK,mBACLV,UAAWA,GAAa,GACxBgC,uBAAwBD,EACxBpB,YAAa,yGAEf1B,EAAA,yBACEyB,KAAK,YACLV,UAAWA,GAAa,GACxBiC,yBAA0BL,EAC1BjB,YAAa,gFAEf1B,EAAA,6BACEyB,KAAK,eACLI,UAAWA,EACXoB,gBAAiBlB,EACjBL,YACE,4QAKV,IAAK,iBACH,OACE1B,EAAA,OAAKC,IAAKQ,GACRT,EAAA,qBACEyB,KAAK,cACLyB,OAAQrC,EAAUqC,OAClBxB,YACE,6MAQJ1B,EAAA,0BACEA,EAAA,OAAKwB,KAAK,UACRxB,EAAA,4BACEyB,KAAK,qBACL0B,iBAAkBtC,EAAUsC,iBAC5BzB,YAAY,iLAEd1B,EAAA,+BACEyB,KAAK,wBACL2B,sBAAuBvC,EAAUuC,sBACjC1B,YAAY,iLAEd1B,EAAA,iCACEyB,KAAK,0BACL4B,sBAAuBxC,EAAUwC,sBACjC3B,YAAY,iLAEd1B,EAAA,6BAA2ByB,KAAK,sBAAsB6B,mBAAoBzC,EAAUyC,mBAAoB5B,YAAY,mCAGxH1B,EAAA,2BACEyB,KAAK,oBACLE,qBAAsBN,SAASR,EAAUS,UACzCI,YAAY,mGAEd1B,EAAA,oCACEyB,KAAK,6BACLC,YAAY,6IAKxB,CCrHA,MAAM6B,EAAqB,4pKAC3B,MAAAC,EAAeD,E,ugBC0HFE,EAAe,M,qPAmP1BtD,KAAAuD,SAAYC,IACVxD,KAAKwD,MAAQA,EAAMC,OAAO,EAG5BzD,KAAA0D,sBAAwBC,MAAOC,IAC7BA,EAAMC,iBACN7D,KAAK8D,cAAcC,OACnB,MAAMC,EAAQhE,KAAKiE,QAAQC,gBAC3B,IAAKF,EAAO,CACV,M,CAEFhE,KAAKmE,UAAY,KACjBnE,KAAKoE,kBAAoB,MACzB,MAAM1D,EAAYV,KAAKqE,kBACvB,MAAMvD,MACJA,EAAKE,YACLA,EAAWG,SACXA,EAAQQ,aACRA,EAAYc,YACZA,EAAWE,gBACXA,EAAevB,SACfA,EAAQkD,YACRA,EAAWvB,OACXA,EAAME,sBACNA,EAAqBC,sBACrBA,EAAqBF,iBACrBA,EAAgBG,mBAChBA,EAAkBoB,iBAClBA,EAAgBC,uBAChBA,EAAsBC,wBACtBA,EAAuBC,wBACvBA,GACEhE,EACJ,MAAMuB,EAAYjC,KAAK2E,uBAAuBzC,cAAcC,MAAKC,GAAKA,EAAEC,eACxE,MAAMuC,EAAkBzD,EAAWD,SAASC,GAAY,GACxD,MAAM0D,EAAuC,IACvC7E,KAAK2E,uBAAuBrE,IAAM,CAAEA,GAAIN,KAAK2E,sBAAsBrE,IACvEwE,QAAS9E,KAAK2E,uBAAuBG,SAAW,QAChDnD,aAAc,CACZoD,iBAAkBH,EAClBI,iBAAkBT,GAAkBU,UAAYL,EAChDM,SAAUX,GAAkBY,QAC5BC,mBAAoB,CAClBC,oBAAqBrF,KAAK2E,uBAAuBhD,cAAcyD,oBAAoBC,qBAAuB,aAC1GtC,OAAQA,GAAU,CAAEuC,OAAQ,EAAGC,MAAO,GACtCC,mBAAoBxF,KAAK2E,uBAAuBhD,cAAcyD,oBAAoBI,oBAAsBC,EACxGC,qBAAsB1F,KAAK2E,uBAAuBhD,cAAcyD,oBAAoBM,sBAAwB,KAGhHxD,aAAc,CACZ,CACEZ,KAAMW,GAAWX,MAAQW,GAAWM,OAASvC,KAAK2F,aAAarE,MAAQtB,KAAK2F,aAAapD,OAAS,GAClGA,MAAON,GAAWM,OAASvC,KAAK2F,aAAapD,OAAS,GACtDF,aAAc,KACdV,aAAc,CACZiE,aAAcnD,GAAaC,OAASD,EAAc,CAAC,WACnDoD,WAAYlE,GAAcD,WAAa,IAEzCoE,QAAS,CACPC,YAAapD,GAAmBA,IAAoB,GAAKA,EAAkB,aAIjFqD,cAAe,CACblF,MAAOA,GAAOmF,YAAc,GAC5BjF,YAAaA,GAAaiF,YAAc,GACxC7E,SAAUA,GAAU6E,YAAc,GAClCC,aAAe5B,GAAa2B,YAA8B,UAC1DrE,SAAUD,GAAcC,UAAYC,KAAKC,iBAAiBC,kBAAkBC,UAE9EmE,UAAW,CACTC,oBAAqBjD,GAAsB,GAC3CkD,yBAA0BpD,GAAyB,GACnDqD,wBAAyBpD,GAAyB,EAClDqD,mBAAoBvD,GAAoB,GACxCwD,yBAA0BhC,GAA0B,MACpDiC,0BAA2BhC,GAA2B,MACtDiC,0BAA2BhC,GAA2B,QAI1D,MAAMiC,EAAoCC,EAAU/B,EAAc7E,KAAK2E,uBAEvE,MAAMkC,EAAc7G,KAAK8G,SAAW,SAAWH,EAAoC9B,EAEnF,MAAMkC,EAAqBC,IACzBhH,KAAKmE,UAAY,MACjBnE,KAAKiH,aAAe,KACpBC,YAAW,KACTlH,KAAKiH,aAAe,KAAK,GACxB,IAAK,EAEVjH,KAAKmH,uBAAuBpD,KAAK,CAAEqD,OAAQP,EAAaE,oBAAmBxD,SAAUvD,KAAKuD,SAAUuD,OAAQ9G,KAAK8G,QAAS,E,mHArT9C,G,UAMxC,M,YAMD,S,eAIR,Y,eAIC,M,uBAIQ,M,kBAIL,M,eA6B5B,G,WAIqB,E,CAmB1B,oBAAAO,CAAqBC,GACnBC,EAAM,sBAAuB,uBAAwBD,EAAWtH,KAAK2E,uBACrE3E,KAAKU,UAAY,IACZV,KAAKwH,uBAAuBF,IAGjC,GAAIA,EAAUhH,GAAI,CAChBN,KAAK8G,OAAS,M,KACT,CACL9G,KAAK8G,OAAS,Q,EAIlB,iBAAAW,GACEF,EAAM,sBAAuB,oB,CAG/B,iBAAAG,GACEH,EAAM,sBAAuB,qBAC7BvH,KAAKU,UAAYV,KAAKwH,uBAAuBxH,KAAK2E,sB,CAGpD,gBAAAgD,GACEJ,EAAM,sBAAuB,mB,CAG/B,oBAAAK,GACEL,EAAM,sBAAuB,uB,CAI/B,kBAAAM,CAAmBjE,GACjB2D,EAAM,sBAAuB,qBAAsB3D,GACnD,MAAMtC,KAAEA,EAAIwG,MAAEA,GAAUlE,EAAMmE,OAC9B/H,KAAKU,UAAY,IAAKV,KAAKU,UAAWY,CAACA,GAAOwG,GAC9C9H,KAAKoE,kBAAoB,KACzBpE,KAAKwD,MAAQ,E,CAGf,sBAAAgE,CAAuBJ,GACrB,MAAMY,EAAuBZ,GAAQlF,cAAcC,MAAKC,GAAKA,EAAEC,eAC/D,MAAO,CACLvB,MAAOsG,GAAQpB,eAAelF,OAAS,GACvCE,YAAaoG,GAAQpB,eAAehF,aAAe,GACnDG,SAAUiG,GAAQzF,cAAcoD,kBAAkBkB,YAAc,KAChEtE,aAAc,CACZC,SAAUwF,GAAQpB,eAAepE,UAAYC,KAAKC,iBAAiBC,kBAAkBC,SACrFN,UAAWsG,GAAsBrG,cAAckE,YAEjDpD,YAAauF,GAAsBrG,cAAciE,cAAgB,GACjE1D,aAAckF,GAAQlF,cAAgB,GACtCS,gBAAiBqF,GAAsBlC,SAASC,aAAeiC,GAAsBzF,OAAS,GAC9FnB,SAAUgG,GAAQpB,eAAe5E,UAAY,GAC7CkD,YAAa8C,GAAQpB,eAAeE,cAAgB,UACpDnD,OAAQqE,GAAQzF,cAAcyD,oBAAoBrC,QAAU,CAAEuC,OAAQ,EAAGC,MAAO,GAChFpC,mBAAoBiE,GAAQjB,WAAWC,qBAAuB,GAC9DnD,sBAAuBmE,GAAQjB,WAAWE,0BAA4B,GACtEnD,sBAAuBkE,GAAQjB,WAAWG,yBAA2B,EACrEtD,iBAAkBoE,GAAQjB,WAAWI,oBAAsB,GAC3DhC,iBAAkB,CAChBU,SAAUmC,GAAQzF,cAAcqD,kBAAoBoC,GAAQzF,cAAcoD,kBAAoB,GAC9FI,QAASiC,GAAQzF,cAAcuD,UAEjCV,uBAAwB4C,GAAQjB,WAAWK,0BAA4B,MACvE/B,wBAAyB2C,GAAQjB,WAAWM,2BAA6B,MACzE/B,wBAAyB0C,GAAQjB,WAAWO,2BAA6B,M,CAI7E,eAAArC,GACE,MAAM4D,EAAW,IAAIC,SAASlI,KAAKiE,SACnCgE,EAASE,SAAQ,CAACL,EAAOhI,KACvB,OAAQA,GACN,IAAK,QACHE,KAAKU,UAAUI,MAAQgH,EAAM7B,WAC7B,MACF,IAAK,cACHjG,KAAKU,UAAUM,YAAc8G,EAAM7B,WACnC,MACF,IAAK,WACHjG,KAAKU,UAAUS,SAAW2G,EAAM7B,WAChC,MACF,IAAK,eACHjG,KAAKU,UAAUiB,aAAeyG,KAAKC,MAAMP,EAAM7B,YAC/C,MACF,IAAK,eACHjG,KAAKU,UAAUwB,aAAekG,KAAKC,MAAMP,EAAM7B,YAC/C,MACF,IAAK,YACHjG,KAAKU,UAAU+B,YAAcqF,EAAM7B,WAAWqC,MAAM,KACpD,MACF,IAAK,mBACHtI,KAAKU,UAAUiC,gBAAkBmF,EAAM7B,WACvC,MACF,IAAK,WACHjG,KAAKU,UAAUU,SAAW0G,EAAM7B,WAChC,MACF,IAAK,eACHjG,KAAKU,UAAU4D,YAAcwD,EAAM7B,WACnC,MACF,IAAK,cACHjG,KAAKU,UAAUqC,OAASqF,KAAKC,MAAMP,EAAM7B,YACzC,MACF,IAAK,wBACHjG,KAAKU,UAAUuC,sBAAwB/B,SAAS4G,EAAM7B,YACtD,MACF,IAAK,0BACHjG,KAAKU,UAAUwC,sBAAwBhC,SAAS4G,EAAM7B,YACtD,MACF,IAAK,qBACHjG,KAAKU,UAAUsC,iBAAmB9B,SAAS4G,EAAM7B,YACjD,MACF,IAAK,sBACHjG,KAAKU,UAAUyC,mBAAqB2E,EAAM7B,WAC1C,MACF,IAAK,oBACHjG,KAAKU,UAAU6D,iBAAmB6D,KAAKC,MAAMP,EAAM7B,YACnD,MACF,IAAK,6BACH,MAAMsC,EAAWH,KAAKC,MAAMP,EAAM7B,YAClCjG,KAAKU,UAAU8D,uBAAyB+D,EAAS/D,uBACjDxE,KAAKU,UAAU+D,wBAA0B8D,EAAS9D,wBAClDzE,KAAKU,UAAUgE,wBAA0B6D,EAAS7D,wBAClD,M,IAIN1E,KAAKU,UAAY,IAAKV,KAAKU,WAC3B,OAAOV,KAAKU,S,CAGd,YAAA8H,CAAaC,EAAUC,GACrBD,EAAE5E,iBACF7D,KAAKqE,kBACLrE,KAAKW,UAAY+H,C,CA4InB,MAAA9I,GACE2H,EAAM,sBAAuB,SAAUvH,KAAKU,WAC5C,OACEb,EAAC8I,EAAI,CAAA7I,IAAA,4CACHD,EAAA,QAAAC,IAAA,2CAAM8I,SAAU5I,KAAK0D,sBAAuBmF,MAAM,mBAAmBC,IAAKC,GAAO/I,KAAKiE,QAAU8E,EAAwBC,WAAU,MAC/HhJ,KAAKiJ,OAAS,MACbpJ,EAAA,OAAKgJ,MAAM,iBACThJ,EAAA,OAAKgJ,MAAM,QACThJ,EAAA,UAAQgJ,MAAO,CAAEK,IAAK,KAAMC,OAAQnJ,KAAKW,WAAa,aAAeyI,QAASX,GAAKzI,KAAKwI,aAAaC,EAAG,cACtG5I,EAAA,sBAAoBE,MAAM,KAAKE,OAAO,OAAO,cAG/CJ,EAAA,UAAQgJ,MAAO,CAAEK,IAAK,KAAMC,OAAQnJ,KAAKW,WAAa,gBAAkByI,QAASX,GAAKzI,KAAKwI,aAAaC,EAAG,iBACzG5I,EAAA,0BAAwBE,MAAM,KAAKE,OAAO,OAAO,gBAGnDJ,EAAA,UAAQgJ,MAAO,CAAEK,IAAK,KAAMC,OAAQnJ,KAAKW,WAAa,kBAAoByI,QAASX,GAAKzI,KAAKwI,aAAaC,EAAG,mBAC3G5I,EAAA,aAAWE,MAAM,KAAKE,OAAO,OAAO,oBAIxCJ,EAAA,OAAKgJ,MAAM,eACThJ,EAACY,EAAW,CAACC,UAAWV,KAAKU,UAAWC,UAAWX,KAAKW,UAAWC,UAAWZ,KAAKY,UAAWN,GAAIN,KAAK2E,uBAAuBrE,IAAM,UAIxIT,EAAA,aAGFA,EAAA,OAAAC,IAAA,2CAAK+I,MAAM,UACThJ,EAAA,OAAAC,IAAA,2CAAK+I,MAAM,WACR7I,KAAKqJ,uBAAyB,IAAMrJ,KAAK8G,SAAW,QACnDjH,EAAA,oBACEyJ,KAAK,SACLC,SAAUvJ,KAAKmE,UACfqF,aAAc5F,IACZA,EAAMC,iBACN,MAAM4F,EAAezJ,KAAK0J,qBAAqB3F,KAAK/D,KAAK2J,MACzD,IAAKF,EAAaG,iBAAkB,CAClCC,OAAOC,KAAKC,EAAiB/J,KAAKqJ,qBAAsBrJ,KAAK2E,uBAAwB,S,GAGzFqF,QAAS,SAAO,YAMtBnK,EAAA,OAAAC,IAAA,2CAAK+I,MAAM,WACThJ,EAAA,KAAAC,IAAA,2CACE+I,MAAO,CACL,kBAAmB7I,KAAKoE,oBAAsBpE,KAAKiH,aACnD,gBAAiBjH,KAAKiH,aACtBzD,MAASxD,KAAKwD,QAAU,GACxB,mBAAoBxD,KAAKwD,QAAU,IAAMxD,KAAK8G,SAAW,WAG1D9G,KAAKwD,QAAU,GAAKxD,KAAKwD,MAAQ,GACjCxD,KAAKwD,OAAS,IAAMxD,KAAKoE,oBAAsBpE,KAAKiH,aAAe,kBAAoBjH,KAAKwD,OAAS,IAAMxD,KAAKiH,aAAe,iBAAmB,IAErJpH,EAAA,oBAAAC,IAAA,2CACEwJ,KAAK,SACLC,SAAUvJ,KAAKmE,UACfqF,aAAc5F,IACZA,EAAMC,iBACN7D,KAAKiK,kBAAkBlG,OACvB/D,KAAKwD,MAAQ,EAAE,EAEjBwG,QAAS,SAAO,UAIlBnK,EAAA,oBAAAC,IAAA,2CAAkBwJ,KAAK,SAASC,SAAUvJ,KAAKmE,WAC5CnE,KAAKmE,UACJtE,EAAA,qBAEEA,EAAA,qBAAiB,KAEjBG,KAAK8G,QAAU,SAAQ,SACjB,mB,0GA/ExBoD,GA1CCC,EAAsH,CACrH7I,KAAM,oBACN8I,aAAc,IAAIC,IAAI,CACpB,CAAC,4BAA6B,aAC9B,CAAC,wCAAyC,yBAC1C,CAAC,8BAA+B,iBAElCC,aAAc,CACZnD,uBAAwBxD,MAAOC,EAA0C2G,KACvE,MAAMxD,kBAAEA,EAAiBxD,SAAEA,EAAQuD,OAAEA,EAAMM,OAAEA,GAAWxD,EAAMmE,OAC9D,MAAMyC,EAAkBC,IACtB,MAAOC,EAAMlH,GAASiH,EACtB,IAAKC,GAAQlH,GAASD,EAAU,CAC9BA,EAASC,E,CAEX,GAAIuD,EAAmB,CACrBA,EAAkBnD,E,GAKtB,GAAIkD,IAAW,OAAQ,CACrB,MAAM2D,QAAiBF,EAA8BI,gBAAgBC,oBAAoBxD,GACzFoD,EAAeC,E,KACV,CACL,MAAMA,QAAiBF,EAA8BI,gBAAgBE,oBAAoBzD,GACzFoD,EAAeC,E,GAGnBR,kBAAmBtG,MAAOmH,EAAGP,KAC3BA,EAA8BQ,qBAAqBC,MAAMlE,OAAS,IAAI,EAExE4C,qBAAsB/F,MAAOmH,EAAGP,KAC9BhD,EAAM,sBAAuB,uBAAwBgD,EAA8B,EAErFzG,cAAeH,MAAOmH,EAAGP,KACvBhD,EAAM,sBAAuB,gBAAiBgD,EAA8B,GAGhFU,iBAAkB,IAAIZ,IAAI,CAAC,CAAC,uBAAwB,0BACpDa,kBAAmB,O,wHCrfvB,MAAMC,EAA6B,y8FACnC,MAAAC,EAAeD,E,ugBCcFE,EAAuB,M,uQASQ,G,0BAMoC,G,WA+BrB,U,WAKxB,G,wBAKa,C,CAE9C,iBAAA5D,GACEF,EAAM,8BAA+B,oB,CAGvC,iBAAAG,GACEH,EAAM,8BAA+B,qBAGrC,GAAIvH,KAAKsL,gBAAkBtL,KAAKsL,eAAe5I,OAAS,EAAG,CACzD1C,KAAKgL,MAAQ,Q,EAIjB,gBAAArD,GACEJ,EAAM,8BAA+B,oBAIrCvH,KAAKuL,uBAAuBxH,KAAK/D,KAAK2J,K,CAGxC,oBAAA/B,GACEL,EAAM,8BAA+B,uB,CAIvC,cAAMiE,GACJ,OAAOxL,KAAKgL,K,CAId,cAAMS,CAAST,GACbhL,KAAKgL,MAAQA,C,CAIf,cAAMzH,CAASC,GACbxD,KAAKwD,MAAQA,C,CAGP,iBAAAkI,CAAkBvK,GACxB,MAAMwK,EAAQC,KAAKC,MAAM1K,EAAW,IACpC,MAAM2K,EAAU3K,EAAW,GAC3B,MAAO,GAAGwK,EAAQA,EAAQ,MAAMA,EAAQ,GAAGA,EAAQ,EAAI,QAAU,SAAW,MAAMG,EAAUA,EAAU,MAAMA,EAAU,GAAGA,EAAU,EAAI,OAAS,QAAU,I,CAuC5J,MAAAlM,GACE,OACEC,EAAC8I,EAAI,KACH9I,EAAA,OAAKgJ,MAAM,UACThJ,EAAA,OAAKgJ,MAAM,eACThJ,EAAA,kCACAA,EAAA,gEAEDG,KAAKsL,gBAAkBtL,KAAKsL,eAAe5I,OAAS,GACnD7C,EAAA,OAAKgJ,MAAM,WACThJ,EAAA,oBACE2J,aAAc,KACZxJ,KAAK+L,kBAAkBhI,KAAK/D,KAAK2J,KAAK,GACvC,gBAOT9J,EAAA,OAAKgJ,MAAM,kBACThJ,EAAA,SACEgJ,MAAO,CACL,oBAAqB7I,KAAKgL,QAAU,aAAehL,KAAKsL,gBAAkBtL,KAAKsL,eAAe5I,SAAW,KAG3G7C,EAAA,MACEgJ,MAAO,CACLmD,KAAMhM,KAAKgL,QAAU,WAAchL,KAAKsL,gBAAkBtL,KAAKsL,eAAe5I,SAAW,IAG3F7C,EAAA,mCACAA,EAAA,sBACAA,EAAA,MAAIgJ,MAAM,kBAAgB,YAE3B7I,KAAKgL,QAAU,WACdnL,EAAA,MAAIgJ,MAAM,qBACRhJ,EAAA,MAAIoM,QAAS,GACXpM,EAAA,WACEA,EAAA,wBACAA,EAAA,+DAKPG,KAAKgL,QAAU,aAAehL,KAAKsL,gBAAkBtL,KAAKsL,eAAe5I,SAAW,IACnF7C,EAAA,MAAIgJ,MAAM,qBACRhJ,EAAA,MAAIoM,QAAS,GACXpM,EAAA,WACEA,EAAA,iBAAeE,MAAM,KAAKE,OAAO,OACjCJ,EAAA,uCACAA,EAAA,iEACAA,EAAA,oBACE2J,aAAc,KACZxJ,KAAK+L,kBAAkBhI,KAAK/D,KAAK2J,KAAK,GACvC,iBAQV3J,KAAKgL,QAAU,WACdhL,KAAKsL,eAAeY,KAAI,CAAC9E,EAAQ+E,IAE7BtM,EAAA,MAAIC,IAAKsH,EAAO9G,IACdT,EAAA,UACEA,EAAA,OAAKgJ,MAAM,SACThJ,EAAA,QAAMgJ,MAAO,sBAAuBzB,EAAOpB,cAAclF,OACzDjB,EAAA,QAAMgJ,MAAO,4BAA6BzB,EAAOpB,cAAchF,eAGnEnB,EAAA,UACEA,EAAA,WAAMG,KAAK0L,kBAAkBtE,EAAOzF,aAAaoD,oBAEnDlF,EAAA,UACEA,EAAA,OAAKgJ,MAAM,WACThJ,EAAA,oBACEmK,QAAS,QACT1J,GAAG,OACHR,IAAK,QAAQqM,IACb3C,aAAc7F,MAAMC,IAClBA,EAAMC,iBACN,MAAMuI,EAAOrC,EAAiB/J,KAAKqJ,qBAAsBjC,SACnDiF,UAAUC,UAAUC,UAAUH,GACpCpM,KAAKwM,kBAAoBL,EACzBjF,YAAW,KACTlH,KAAKwM,mBAAqB,CAAC,GAC1B,IAAK,GAGTxM,KAAKwM,oBAAsBL,EAAI,UAAY,aAE9CtM,EAAA,oBACEmK,QAAS,QACTlK,IAAK,QAAQqM,IACb3C,aAAc5F,IACZA,EAAMC,iBACN7D,KAAKyM,gBAAgB1I,KAAK,CAAE4F,KAAM3J,KAAK2J,KAAM+C,cAAetF,GAAS,GACtE,QAIHvH,EAAA,oBACEmK,QAAS,QACTlK,IAAK,UAAUqM,IACf3C,aAAc5F,IACZA,EAAMC,iBACN7D,KAAK2M,kBAAkB5I,KAAK,CAAE4F,KAAM3J,KAAK2J,KAAM+C,cAAetF,GAAS,GACxE,iBAWlBpH,KAAKgL,QAAU,SACdnL,EAAA,OAAKgJ,MAAM,mBACThJ,EAAA,KAAGgJ,MAAO,SAAU7I,KAAKwD,Q,6BA3HnC0G,EAAA,CApCCC,EAA8H,CAC7H7I,KAAM,4BACN8I,aAAc,IAAIC,IAAI,CAAC,CAAC,iCAAkC,oBAC1DY,iBAAkB,IAAIZ,IAAI,CAAC,CAAC,uBAAwB,0BACpDC,aAAc,CACZiB,uBAAwB5H,MAAOC,EAAOgJ,KACpC,MAAMjD,EAAO/F,EAAMmE,aACb4B,EAAK8B,SAAS,WACpB,MAAOf,EAAMlH,SAAeoJ,EAAUjC,gBAAgBkC,oBACtD,IAAKnC,GAAQlH,GAASA,EAAMC,QAAS,OAC7BkG,EAAK8B,SAAS,eACd9B,EAAKpG,SAASC,EAAMC,SAC1B,M,OAEIkG,EAAK8B,SAAS,SAAS,EAE/BM,kBAAmBpI,MAAOmH,EAAG8B,KAC3BA,EAAU7B,qBAAqB+B,6BAC/BF,EAAU7B,qBAAqBC,MAAMlE,OAAS,QAAQ,EAExD6F,kBAAmBhJ,MAAOC,EAAOgJ,KAC/B,MAAMjD,KAAEA,EAAI+C,cAAEA,GAAkB9I,EAAMmE,OACtC,MAAO2C,EAAMlH,SAAeoJ,EAAUjC,gBAAgBoC,oBAAoBL,EAAcpM,IACxF,IAAKoK,GAAQlH,GAASA,EAAMC,QAAS,OAC7BkG,EAAK8B,SAAS,eACd9B,EAAKpG,SAASC,EAAMC,Q,GAG9BgJ,gBAAiB9I,MAAOC,EAAOgJ,KAC7B,MAAMF,cAAEA,GAAkB9I,EAAMmE,OAChC6E,EAAU7B,qBAAqBC,MAAMrG,sBAAwB+H,EAC7DE,EAAU7B,qBAAqBC,MAAMlE,OAAS,MAAM,GAGxDoE,kBAAmB,O"}

package/dist/nylas-web-elements/p-ee91a2a0.js

@@ -1,2 +0,0 @@
-import{c as n}from"./p-cabb2e68.js";function t(t={}){const e={selectedConfiguration:{},configurations:[],calendars:[],currentUser:null,action:null,...t};const o=n(e);function c(){o.set("selectedConfiguration",{...t["selectedConfiguration"]})}o.onChange("action",(async n=>{if(!n){c()}}));return{...o,resetSelectedConfiguration:c}}export{t as C};
-//# sourceMappingURL=p-ee91a2a0.js.map

package/dist/nylas-web-elements/p-ee91a2a0.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CreateNylasSchedulerConfigStore","defaultState","defaultSchedulerConfigState","selectedConfiguration","configurations","calendars","currentUser","action","store","createStore","resetSelectedConfiguration","set","onChange","async"],"sources":["src/stores/scheduler-config-store.ts"],"sourcesContent":["import { Calendar, Configuration } from '@nylas/core';\nimport { ObservableMap, createStore } from '@stencil/store';\nimport { User } from '@/common/nylas-api-request';\n\ntype RecursivePartial<T> = {\n  [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object | undefined ? RecursivePartial<T[P]> : T[P];\n};\n\nexport interface NylasSchedulerConfigStoreState {\n  /**\n   * The selected configuration.\n   * This is the configuration that is currently selected, use it to populate default values for new configurations.\n   */\n  selectedConfiguration: RecursivePartial<Configuration>;\n  /**\n   * The list of configurations.\n   * This is the list of configurations that the user has created.\n   */\n  configurations: Configuration[];\n  /**\n   * The list of calendars.\n   * This is the list of calendars that the user has access to.\n   */\n  calendars: Calendar[];\n  /**\n   * The current user.\n   * This is the user that is currently logged in.\n   */\n  currentUser: User | null;\n  /**\n   * The current action.\n   * This is the current action that the user is performing.\n   */\n  action: 'create' | 'edit' | null;\n}\n\nexport type NylasSchedulerConfigStoreType = ReturnType<typeof CreateNylasSchedulerConfigStore>;\n\nexport type CreateNylasSchedulerConfigStoreReturnType = ObservableMap<NylasSchedulerConfigStoreState> & {\n  /**\n   * Reset the selected configuration to the default state.\n   * This is used to reset the selected configuration to the default state instead of setting it to an empty object.\n   */\n  resetSelectedConfiguration: () => void;\n};\n\nexport function CreateNylasSchedulerConfigStore(defaultState: Partial<NylasSchedulerConfigStoreState> = {}): CreateNylasSchedulerConfigStoreReturnType {\n  const defaultSchedulerConfigState: NylasSchedulerConfigStoreState = {\n    selectedConfiguration: {},\n    configurations: [],\n    calendars: [],\n    currentUser: null,\n    action: null,\n    ...defaultState,\n  };\n  const store = createStore<NylasSchedulerConfigStoreState>(defaultSchedulerConfigState);\n\n  /**\n   * Reset the selected configuration to the default state.\n   * This is used to reset the selected configuration to the default state instead of setting it to an empty object.\n   */\n  function resetSelectedConfiguration() {\n    store.set('selectedConfiguration', { ...defaultState['selectedConfiguration'] });\n  }\n\n  store.onChange('action', async action => {\n    if (!action) {\n      resetSelectedConfiguration();\n    }\n  });\n\n  return {\n    ...store,\n    resetSelectedConfiguration,\n  };\n}\n"],"mappings":"6CA8CgBA,EAAgCC,EAAwD,IACtG,MAAMC,EAA8D,CAClEC,sBAAuB,GACvBC,eAAgB,GAChBC,UAAW,GACXC,YAAa,KACbC,OAAQ,QACLN,GAEL,MAAMO,EAAQC,EAA4CP,GAM1D,SAASQ,IACPF,EAAMG,IAAI,wBAAyB,IAAKV,EAAa,0B,CAGvDO,EAAMI,SAAS,UAAUC,MAAMN,IAC7B,IAAKA,EAAQ,CACXG,G,KAIJ,MAAO,IACFF,EACHE,6BAEJ,Q"}

package/dist/nylas-web-elements/p-f1bd124d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o}from"./p-68c2fadf.js";const n=".sc-add-circle-icon-h{display:flex}";const r=n;const a=class{constructor(o){t(this,o);this.width="24";this.height="25"}render(){return o("svg",{key:"782fe7efbe621971c56deeeb6ced5aed9715b6e1",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"e704848d80e541a418212fc6d2ac0c148ba5a6d1",d:"M12 2.5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10 4.477-10 10-10ZM12 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 3.5a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7.5Z",fill:"currentColor"}))}};a.style=r;const e="button.sc-button-component{height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;font-family:var(--nylas-font-family);font-weight:600}@media screen and (max-width: 768px){button.sc-button-component{width:100%}}button.button-primary.sc-button-component{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}button.button-primary.sc-button-component:hover{background:var(--nylas-base-600)}button.button-primary.sc-button-component:active{background:var(--nylas-base-800)}button.button-primary.sc-button-component:disabled{background:var(--nylas-base-300);cursor:not-allowed}button.button-basic.sc-button-component{border:1px solid var(--nylas-base-300);color:var(--nylas-base-700);background:transparent}button.button-basic.sc-button-component:hover{background:transparent;border-color:var(--nylas-primary)}button.button-basic.sc-button-component:active{background:transparent;border-color:var(--nylas-base-600);border-width:2px}button.button-basic.sc-button-component:disabled{background:transparent;border-color:var(--nylas-base-300);color:var(--nylas-base-300);cursor:not-allowed}button.button-destructive.sc-button-component{border:1px solid var(--nylas-base-300);color:var(--nylas-error);background:transparent}button.button-destructive.sc-button-component:hover{background:transparent;border-color:var(--nylas-error)}button.button-destructive.sc-button-component:active{background:transparent;border-color:var(--nylas-error-pressed);border-width:2px;color:var(--nylas-error-pressed)}button.button-destructive.sc-button-component:disabled{background:transparent;border-color:var(--nylas-base-300);color:var(--nylas-base-300);cursor:not-allowed}button.button-invisible.sc-button-component{background:transparent;color:var(--nylas-base-800);border:none}button.button-invisible.sc-button-component:hover{background:var(--nylas-base-50);color:var(--nylas-primary)}button.button-invisible.sc-button-component:active{background:var(--nylas-base-50);color:var(--nylas-base-850)}button.button-invisible.sc-button-component:disabled{background:transparent;color:var(--nylas-base-300);cursor:not-allowed}";const s=e;const b=class{constructor(o){t(this,o);this.variant="primary";this.disabled=false;this.type="button";this.clickHandler=undefined;this.mouseOverHandler=undefined;this.mouseOutHandler=undefined;this.focusHandler=undefined;this.blurHandler=undefined}render(){const t=`button-${this.variant}`+(this.disabled?" disabled":"");return o("button",{key:"e384a27359c08f60670fd25909d2510b9d7e5bb6",class:t,disabled:this.disabled,type:"type",onClick:this.clickHandler,onMouseOver:this.mouseOverHandler,onMouseOut:this.mouseOutHandler,onFocus:this.focusHandler,onBlur:this.blurHandler},o("slot",{key:"0913c3c782a922a16abcdb4c4964e008bb71f193"}))}};b.style=s;export{a as add_circle_icon,b as button_component};
-//# sourceMappingURL=p-f1bd124d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconCss","AddCircleIconStyle0","AddCircleIcon","render","h","key","width","this","height","fill","xmlns","d","buttonComponentCss","ButtonComponentStyle0","ButtonComponent","className","variant","disabled","class","type","onClick","clickHandler","onMouseOver","mouseOverHandler","onMouseOut","mouseOutHandler","onFocus","focusHandler","onBlur","blurHandler"],"sources":["src/common/icons/icon.css?tag=add-circle-icon&encapsulation=scoped","src/common/icons/add-circle.tsx","src/components/design-system/button-component/button-component.scss?tag=button-component&encapsulation=scoped","src/components/design-system/button-component/button-component.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'add-circle-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class AddCircleIcon {\n  @Prop() width: string = '24';\n  @Prop() height: string = '25';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M12 2.5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10 4.477-10 10-10ZM12 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 3.5a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n","@import '../../../common/mixins/buttons.scss';\n@import '../../../common/styles/variables.scss';\n\nbutton {\n  height: 48px;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 1rem;\n  line-height: 24px;\n  padding: 0 1rem;\n  cursor: pointer;\n  font-family: var(--nylas-font-family);\n  font-weight: 600;\n  @media #{$mobile} {\n    width: 100%;\n  }\n  &.button-primary {\n    @include primary-button;\n  }\n  &.button-basic {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-base-700);\n    background: transparent;\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-primary);\n    }\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-base-600);\n      border-width: 2px;\n    }\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n  &.button-destructive {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-error);\n    background: transparent;\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-error);\n    }\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-error-pressed);\n      border-width: 2px;\n      color: var(--nylas-error-pressed);\n    }\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n  &.button-invisible {\n    background: transparent;\n    color: var(--nylas-base-800);\n    border: none;\n    &:hover {\n      background: var(--nylas-base-50);\n      color: var(--nylas-primary);\n    }\n    &:active {\n      background: var(--nylas-base-50);\n      color: var(--nylas-base-850);\n    }\n    &:disabled {\n      background: transparent;\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\ntype ButtonType = 'primary' | 'basic' | 'destructive' | 'invisible';\n\n@Component({\n  tag: 'button-component',\n  styleUrl: 'button-component.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  // Define a prop to accept the button type\n  @Prop() variant: ButtonType = 'primary';\n\n  // Define a prop for disabled state\n  @Prop() disabled: boolean = false;\n\n  @Prop() type: string = 'button';\n  @Prop() clickHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOverHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOutHandler?: (event: MouseEvent) => void;\n  @Prop() focusHandler?: (event: FocusEvent) => void;\n  @Prop() blurHandler?: (event: FocusEvent) => void;\n\n  render() {\n    const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');\n\n    return (\n      <button\n        class={className}\n        disabled={this.disabled}\n        type=\"type\"\n        onClick={this.clickHandler}\n        onMouseOver={this.mouseOverHandler}\n        onMouseOut={this.mouseOutHandler}\n        onFocus={this.focusHandler}\n        onBlur={this.blurHandler}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,sCAChB,MAAAC,EAAeD,E,MCMFE,EAAa,M,oCACA,K,YACC,I,CAEzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKD,MAAOE,OAAQD,KAAKC,OAAQC,KAAK,OAAOC,MAAM,8BAC7DN,EAAA,QAAAC,IAAA,2CACEM,EAAE,wQACFF,KAAK,iB,aChBf,MAAMG,EAAqB,swEAC3B,MAAAC,EAAeD,E,MCOFE,EAAe,M,sCAEI,U,cAGF,M,UAEL,S,kJAOvB,MAAAX,GACE,MAAMY,EAAY,UAAUR,KAAKS,WAAaT,KAAKU,SAAW,YAAc,IAE5E,OACEb,EAAA,UAAAC,IAAA,2CACEa,MAAOH,EACPE,SAAUV,KAAKU,SACfE,KAAK,OACLC,QAASb,KAAKc,aACdC,YAAaf,KAAKgB,iBAClBC,WAAYjB,KAAKkB,gBACjBC,QAASnB,KAAKoB,aACdC,OAAQrB,KAAKsB,aAEbzB,EAAA,QAAAC,IAAA,6C"}

package/dist/nylas-web-elements/p-fac4d89e.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,a as s}from"./p-68c2fadf.js";import{a as o}from"./p-6c11737d.js";import"./p-02aa5f03.js";import"./p-cb65c223.js";const r=':host{display:block;position:relative;--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}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:1rem;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x);width:50px;padding:14px 16px;border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);max-width:306px;width:max-content;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid #ccc;border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px}';const n=r;const d=class{constructor(i){e(this,i);this.inputOptionChanged=t(this,"inputOptionChanged",7);this.name=undefined;this.options=[];this.defaultInputOption=undefined;this.inputValue=undefined;this.pluralizedLabel="";this.selectedOption=this.defaultInputOption||null;this.isOpen=false;this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.shouldAutoScroll=false}optionsChangedHandler(e,t){if(e===t){return}this.filteredOptions=e}defaultSelectedOptionChangedHandler(e,t){if(e.label===t.label){return}this.selectedOption=e}componentWillLoad(){this.filteredOptions=this.options;if(!this.selectedOption&&!!this.defaultInputOption){this.selectedOption=this.defaultInputOption}if(!this.selectedOption&&this.options.length>0){this.selectedOption=this.options[0]}}toggleDropdown(){this.isOpen=!this.isOpen}selectOption(e){this.selectedOption=e;this.toggleDropdown();this.inputOptionChanged.emit({value:e.value,name:this.name})}handleOnInput(e){const t=e.target.value;const i=this.options.findIndex((e=>e.label.toLowerCase().includes(t.toLowerCase())));if(i>-1){this.scrollToViewWithinParent(i)}this.inputOptionChanged.emit({value:t,name:this.name})}scrollToViewWithinParent(e){const t=this.options[e];const i=this.el.shadowRoot?.getElementById(t.value.toString());const s=this.optionsRef;this.ariaActivedescendant=t.value.toString();const o=i.getBoundingClientRect();const r=s.getBoundingClientRect();if(o.top<r.top){s.scrollTop-=r.top-o.top}else if(o.bottom>r.bottom){s.scrollTop+=o.bottom-r.bottom}}handleSelectButtonKeyDown(e){switch(e.key){case"ArrowDown":case"Enter":e.preventDefault();if(!this.isOpen){this.toggleDropdown()}this.inputRef?.focus();break;case"Escape":this.isOpen=false;break}}handleClick(e){if(this.isOpen){const t=e.target.value;const i=this.options.findIndex((e=>e.label.toLowerCase().includes(t.toLowerCase())));if(i>-1){setTimeout((()=>{this.scrollToViewWithinParent(i)}),10)}}}handleListboxKeydown(e){const t=this.filteredOptions;const i=t.findIndex((e=>e.value===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();if(i===t.length-1){this.ariaActivedescendant="";this.inputRef?.focus();return}const s=i+1<t.length?i+1:0;this.ariaActivedescendant=t[s].value;this.focusOption(s)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(i===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const s=i-1>=0?i-1:t.length-1;this.ariaActivedescendant=t[s].value;this.focusOption(s)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){this.selectOption(t[i])}}else if(e.key==="Escape"){this.isOpen=false}}focusOption(e){const t=this.filteredOptions[e];if(!t)return;const i=t.value;const s=this.el.shadowRoot?.getElementById(i);if(s){s.focus();s.scrollIntoView({behavior:"smooth",block:"nearest"})}}handleComboboxKeyDown(e){if(e.key==="ArrowDown"||e.key=="Tab"&&!e.shiftKey){e.preventDefault();if(!this.isOpen){this.isOpen=true;this.shouldAutoScroll=true;return}this.ariaActivedescendant=this.filteredOptions[0].value;this.focusOption(0)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();this.ariaActivedescendant=this.filteredOptions[this.filteredOptions.length-1].value;this.focusOption(this.filteredOptions.length-1)}else if(e.key==="Escape"){this.isOpen=false}}handleOutsideClick(e){const t=e.composedPath();const i=t.includes(this.el);if(!i&&this.isOpen){this.isOpen=false}}render(){return i("div",{key:"763e9bef7edb44ff217147c9ee63ec0076c4cc4a",class:"dropdown",part:"id_dropdown"},i("input",{key:"579022217510a4be6a23c6b2f65910c4b993b42d",type:"text",name:this.name,id:this.name,part:"id_dropdown-input",class:{dropbtn:true,open:this.isOpen},value:this.inputValue,onClick:e=>{this.toggleDropdown();this.shouldAutoScroll=true;this.handleClick(e)},"aria-haspopup":"listbox","aria-label":this.name,"aria-expanded":this.isOpen?"true":"false",onKeyDown:e=>this.handleComboboxKeyDown(e),onInput:e=>this.handleOnInput(e)}),this.isOpen?i("div",{class:"dropdown-content",part:"id_dropdown-content",ref:e=>this.optionsRef=e},i("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.filteredOptions.map((e=>i("li",{tabindex:"0",key:e.value,id:e.value,onClick:()=>this.selectOption(e),role:"option",class:{focused:this.ariaActivedescendant===e.value.toString()}},e.labelHTML?e.labelHTML:e.label))))):null)}get el(){return s(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultInputOption:["defaultSelectedOptionChangedHandler"]}}};d.style=n;const a=".time-period-selector.sc-time-period-selector{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector,.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector{width:116px}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{width:84px;display:flex;align-items:center}.time-period-selector.sc-time-period-selector select-dropdown#time-period.sc-time-period-selector::part(sd_dropdown-button){width:100%}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown){width:inherit;height:100%}.time-period-selector.sc-time-period-selector input-dropdown#time-number.sc-time-period-selector::part(id_dropdown-input){border:none;border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-input){padding:17px;gap:1rem}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-content){width:100%;max-height:200px}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown){width:inherit}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-button){padding:1rem;gap:1rem;justify-content:space-between}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-content){width:100%;max-height:200px}";const p=a;const l={hours:"hour",days:"day",weeks:"week",months:"month"};const c=class{constructor(i){e(this,i);this.timePeriodChanged=t(this,"timePeriodChanged",7);this.timePeriods=["hour","day","week","month"];this.defaultSelectedPeriod="hour";this.defaultSelectedNumber=1;this.selectedPeriod=this.defaultSelectedPeriod;this.selectedNumber=this.defaultSelectedNumber;this.numberOptions=this.calculateOptions(this.defaultSelectedPeriod||"hour").map((e=>({label:e.toString(),value:e.toString()})));this.timePeriodOptions=this.timePeriods.map((e=>({label:e,value:e})))}defaultSelectedPeriodChangedHandler(e){this.selectedPeriod=e;const t=l[e]??e;this.updateNumberOptionsAndSelectedNumber(t)}defaultSelectedNumberChangedHandler(e){this.selectedNumber=e}timePeriodsChangedHandler(e){this.timePeriodOptions=e.map((e=>({label:e,value:e})))}calculateOptions(e){switch(e){case"hour":return Array.from({length:23},((e,t)=>t+1));case"minute":return Array.from({length:13},((e,t)=>t*5));case"day":return Array.from({length:30},((e,t)=>t+1));case"week":return Array.from({length:4},((e,t)=>t+1));case"month":return Array.from({length:12},((e,t)=>t+1));default:return[]}}inputOptionChangedHandler(e){o("time-period-selector","inputOptionChangedHandler",e.detail);const{value:t,name:i}=e.detail;if(i==="time-number"){this.selectedNumber=parseInt(t)}const s={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(s)}nylasFormDropdownChangedHandler(e){o("time-period-selector","nylasFormDropdownChangedHandler",e.detail);const{value:t,name:i}=e.detail;if(i==="time-period"){this.selectedPeriod=t;this.updateNumberOptionsAndSelectedNumber(t)}else if(i==="time-number"){this.selectedNumber=parseInt(t)}const s={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(s)}updateNumberOptionsAndSelectedNumber(e){const t=this.calculateOptions(e);this.numberOptions=t.map((e=>({label:e.toString(),value:e.toString()})));this.selectedNumber=parseInt(this.numberOptions[0].value)}render(){return i("div",{key:"89f218f22905064cadac4d109b631ec138b461ef",class:"time-period-selector"},i("input-dropdown",{key:"2b86597d92716df5196e696a82ef813d895688dc",id:"time-number",name:"time-number",inputValue:this.selectedNumber.toString(),exportparts:"sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content",options:this.numberOptions,defaultInputOption:this.numberOptions.find((e=>e.value==this.selectedNumber.toString()))??this.numberOptions[0]}),i("select-dropdown",{key:"7283a087443a6c3827f41f0276e1c8024025eeca",id:"time-period",name:"time-period",options:this.timePeriodOptions,exportparts:"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content",pluralizedLabel:this.selectedNumber>1?"s":"",defaultSelectedOption:this.timePeriodOptions.find((e=>e.value==this.selectedPeriod))??this.timePeriodOptions[0],withSearch:false}))}get host(){return s(this)}static get watchers(){return{defaultSelectedPeriod:["defaultSelectedPeriodChangedHandler"],defaultSelectedNumber:["defaultSelectedNumberChangedHandler"],timePeriods:["timePeriodsChangedHandler"]}}};c.style=p;export{d as input_dropdown,c as time_period_selector};
-//# sourceMappingURL=p-fac4d89e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["inputDropdownCss","InputDropdownStyle0","InputDropdown","this","defaultInputOption","options","optionsChangedHandler","newValue","oldValue","filteredOptions","defaultSelectedOptionChangedHandler","label","selectedOption","componentWillLoad","length","toggleDropdown","isOpen","selectOption","option","inputOptionChanged","emit","value","name","handleOnInput","event","target","optionIndex","findIndex","toLowerCase","includes","scrollToViewWithinParent","childElement","el","shadowRoot","getElementById","toString","parentElement","optionsRef","ariaActivedescendant","childRect","getBoundingClientRect","parentRect","top","scrollTop","bottom","handleSelectButtonKeyDown","key","preventDefault","inputRef","focus","handleClick","setTimeout","handleListboxKeydown","e","items","currentIndex","item","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","scrollIntoView","behavior","block","handleComboboxKeyDown","shouldAutoScroll","handleOutsideClick","path","composedPath","isClickInside","render","h","class","part","type","id","dropbtn","open","inputValue","onClick","onKeyDown","onInput","ref","tabindex","role","map","focused","labelHTML","timePeriodSelectorCss","TimePeriodSelectorStyle0","pluralToSingular","hours","days","weeks","months","TimePeriodSelector","defaultSelectedPeriod","defaultSelectedNumber","calculateOptions","i","timePeriods","period","defaultSelectedPeriodChangedHandler","selectedPeriod","updateNumberOptionsAndSelectedNumber","defaultSelectedNumberChangedHandler","selectedNumber","timePeriodsChangedHandler","timePeriodOptions","Array","from","_","inputOptionChangedHandler","debug","detail","parseInt","selected","number","timePeriodChanged","nylasFormDropdownChangedHandler","numberOptions","exportparts","find","pluralizedLabel","defaultSelectedOption","withSearch"],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx","src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  position: relative;\n  @media #{$mobile} {\n    position: unset;\n  }\n  @include default-css-variables;\n}\n\n.dropdown {\n  display: inline-block;\n}\n\n.dropbtn {\n  color: var(--nylas-base-800);\n  padding: 10px;\n  font-size: 1rem;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  gap: 0.5rem;\n  background: transparent;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  width: 50px;\n  padding: 14px 16px;\n  border-radius: var(--nylas-border-radius-2x);\n  &.focus {\n    background: transparent;\n  }\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n    &.open {\n      transform: rotate(90deg);\n    }\n    &.closed {\n      transform: rotate(270deg);\n    }\n    &.selected-option {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 144px;\n      font-size: 14px;\n      line-height: 20px;\n      @media #{$mobile} {\n        max-width: 124px;\n        font-size: 16px;\n      }\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\n  background-color: var(--nylas-base-0);\n  max-width: 306px;\n  width: max-content;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n  border-bottom: 1px solid var(--nylas-base-200);\n  padding: 10px;\n  position: sticky;\n  top: 0;\n  background: var(--nylas-base-0);\n  .icon {\n    position: absolute;\n    top: 1.25rem;\n    left: 1.25rem;\n    color: var(--nylas-base-300);\n  }\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: black;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0px;\n    text-align: left;\n    cursor: pointer;\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n  }\n}\n\n.dropdown-content .selected {\n  background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n  width: -webkit-fill-available;\n  padding: inherit;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  position: sticky;\n  background: no-repeat scroll 7px 7px;\n  padding-left: 30px;\n  background-size: 16px 16px;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n  labelHTML?: HTMLElement;\n  label: string;\n  value: string;\n}\n\n/**\n * The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'input-dropdown',\n  styleUrl: 'input-dropdown.scss',\n  shadow: true,\n})\nexport class InputDropdown {\n  @Element() el!: HTMLElement;\n\n  private inputRef?: HTMLInputElement;\n  private optionsRef!: HTMLElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n  /**\n   * The options to display in the dropdown\n   */\n  @Prop() options: DropdownOption[] = [];\n  /**\n   * The default selected option\n   */\n  @Prop() defaultInputOption?: DropdownOption;\n  /**\n   * Should show search input\n   */\n  @Prop() inputValue!: string;\n  /**\n   * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n   */\n  @Prop() pluralizedLabel: string = '';\n\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedOption: DropdownOption | null = this.defaultInputOption || null;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * The filtered options based on the search value\n   */\n  @State() filteredOptions: DropdownOption[] = [...this.options];\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n   * the active option.\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * This is used to scroll to the input value.\n   */\n  @State() shouldAutoScroll: boolean = false;\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: string;\n  }>;\n\n  @Watch('options')\n  optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n    if (newValue === oldValue) {\n      return;\n    }\n    this.filteredOptions = newValue;\n  }\n\n  @Watch('defaultInputOption')\n  defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n    if (newValue.label === oldValue.label) {\n      return;\n    }\n    this.selectedOption = newValue;\n  }\n\n  // Lifecycle methods\n  componentWillLoad() {\n    this.filteredOptions = this.options;\n    // Set the selected option to the first option if no option is selected\n    if (!this.selectedOption && !!this.defaultInputOption) {\n      this.selectedOption = this.defaultInputOption;\n    }\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n  }\n\n  // Methods\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectOption(option: DropdownOption): void {\n    this.selectedOption = option;\n    this.toggleDropdown();\n    this.inputOptionChanged.emit({\n      value: option.value,\n      name: this.name,\n    });\n  }\n\n  handleOnInput(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n    if (optionIndex > -1) {\n      this.scrollToViewWithinParent(optionIndex);\n    }\n    this.inputOptionChanged.emit({\n      value,\n      name: this.name,\n    });\n  }\n\n  scrollToViewWithinParent(optionIndex: number) {\n    const option = this.options[optionIndex];\n    const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n    const parentElement = this.optionsRef;\n\n    this.ariaActivedescendant = option.value.toString();\n\n    // Scroll child into view within parent\n    const childRect = childElement.getBoundingClientRect();\n    const parentRect = parentElement.getBoundingClientRect();\n\n    if (childRect.top < parentRect.top) {\n      // Child is above the visible area of the parent\n      parentElement.scrollTop -= parentRect.top - childRect.top;\n    } else if (childRect.bottom > parentRect.bottom) {\n      // Child is below the visible area of the parent\n      parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n    }\n  }\n\n  handleSelectButtonKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.toggleDropdown();\n        }\n        this.inputRef?.focus();\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  handleClick(event: Event): void {\n    if (this.isOpen) {\n      const value = (event.target as HTMLInputElement).value;\n      const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n      if (optionIndex > -1) {\n        setTimeout(() => {\n          this.scrollToViewWithinParent(optionIndex);\n        }, 10);\n      }\n    }\n  }\n\n  handleListboxKeydown(e) {\n    const items = this.filteredOptions;\n    const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n    if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n      e.preventDefault();\n      if (currentIndex === items.length - 1) {\n        this.ariaActivedescendant = '';\n        this.inputRef?.focus();\n        return;\n      }\n      const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n      this.ariaActivedescendant = items[nextIndex].value;\n      this.focusOption(nextIndex);\n    } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n      e.preventDefault();\n      if (currentIndex === 0) {\n        this.ariaActivedescendant = '';\n        this.inputRef?.focus();\n        return;\n      }\n      const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n      this.ariaActivedescendant = items[prevIndex].value;\n      this.focusOption(prevIndex);\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.ariaActivedescendant) {\n        this.selectOption(items[currentIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n\n  focusOption(index) {\n    const option = this.filteredOptions[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.value;\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  handleComboboxKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n      event.preventDefault();\n      if (!this.isOpen) {\n        this.isOpen = true;\n        this.shouldAutoScroll = true;\n        return;\n      }\n      this.ariaActivedescendant = this.filteredOptions[0].value;\n      this.focusOption(0);\n    } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n      event.preventDefault();\n      this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n      this.focusOption(this.filteredOptions.length - 1);\n    } else if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n\n  // Event listeners\n  @Listen('click', { target: 'document', capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"dropdown\" part=\"id_dropdown\">\n        <input\n          type=\"text\"\n          name={this.name}\n          id={this.name}\n          part=\"id_dropdown-input\"\n          class={{ dropbtn: true, open: this.isOpen }}\n          value={this.inputValue}\n          onClick={(e: Event) => {\n            this.toggleDropdown();\n            this.shouldAutoScroll = true;\n            this.handleClick(e);\n          }}\n          aria-haspopup=\"listbox\"\n          aria-label={this.name}\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          onKeyDown={e => this.handleComboboxKeyDown(e)}\n          onInput={event => this.handleOnInput(event)}\n        />\n        {this.isOpen ? (\n          <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n            <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n              {this.filteredOptions.map(option => (\n                <li\n                  tabindex=\"0\"\n                  key={option.value}\n                  id={option.value}\n                  onClick={() => this.selectOption(option)}\n                  role=\"option\"\n                  class={{\n                    focused: this.ariaActivedescendant === option.value.toString(),\n                  }}\n                >\n                  {option.labelHTML ? option.labelHTML : option.label}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n",".time-period-selector {\n  display: grid;\n  gap: 0.5rem;\n  grid-template-columns: auto 1fr;\n\n  select-dropdown,\n  input-dropdown {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  select-dropdown {\n    width: 116px;\n  }\n  input-dropdown {\n    width: 84px;\n    display: flex;\n    align-items: center;\n  }\n\n  select-dropdown#time-period::part(sd_dropdown-button) {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: inherit;\n    height: 100%;\n  }\n  input-dropdown#time-number::part(id_dropdown-input) {\n    border: none;\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  input-dropdown::part(id_dropdown-input) {\n    padding: 17px;\n    gap: 1rem;\n  }\n  input-dropdown::part(id_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n  select-dropdown::part(sd_dropdown) {\n    width: inherit;\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    padding: 1rem;\n    gap: 1rem;\n    justify-content: space-between;\n  }\n  select-dropdown::part(sd_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n  hours: 'hour',\n  days: 'day',\n  weeks: 'week',\n  months: 'month',\n};\n\n@Component({\n  tag: 'time-period-selector',\n  styleUrl: 'time-period-selector.scss',\n  scoped: true,\n})\nexport class TimePeriodSelector {\n  @Element() host!: HTMLElement;\n\n  // The possible values for the time periods dropdown\n  @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n  /**\n   * The default selected time period.\n   */\n  @Prop() defaultSelectedPeriod: string = 'hour';\n\n  /**\n   * The default selected number.\n   */\n  @Prop() defaultSelectedNumber: number = 1;\n\n  /**\n   * The currently selected time period\n   */\n  @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n  /**\n   * The currently selected number of the time period\n   */\n  @State() selectedNumber: number = this.defaultSelectedNumber;\n\n  /*\n   * The options for the number dropdown, to be calculated based on the selectedPeriod\n   */\n  @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod || 'hour').map(i => {\n    return {\n      label: i.toString(),\n      value: i.toString(),\n    };\n  });\n\n  /**\n   * The options for the time period dropdown\n   */\n  @State() timePeriodOptions = this.timePeriods.map(period => {\n    return {\n      label: period,\n      value: period,\n    };\n  });\n\n  @Watch('defaultSelectedPeriod')\n  defaultSelectedPeriodChangedHandler(newValue: string) {\n    this.selectedPeriod = newValue;\n    const period = pluralToSingular[newValue] ?? newValue;\n    this.updateNumberOptionsAndSelectedNumber(period);\n  }\n\n  @Watch('defaultSelectedNumber')\n  defaultSelectedNumberChangedHandler(newValue: number) {\n    this.selectedNumber = newValue;\n  }\n\n  @Watch('timePeriods')\n  timePeriodsChangedHandler(newValue: string[]) {\n    this.timePeriodOptions = newValue.map(period => {\n      return {\n        label: period,\n        value: period,\n      };\n    });\n  }\n\n  @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n  private calculateOptions(period: string): number[] {\n    switch (period) {\n      case 'hour':\n        return Array.from({ length: 23 }, (_, i) => i + 1);\n      case 'minute':\n        return Array.from({ length: 13 }, (_, i) => i * 5);\n      case 'day':\n        return Array.from({ length: 30 }, (_, i) => i + 1);\n      case 'week':\n        return Array.from({ length: 4 }, (_, i) => i + 1);\n      case 'month':\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      default:\n        return [];\n    }\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-period') {\n      this.selectedPeriod = value;\n      this.updateNumberOptionsAndSelectedNumber(value);\n    } else if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  updateNumberOptionsAndSelectedNumber(period: string) {\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n    this.selectedNumber = parseInt(this.numberOptions[0].value);\n  }\n\n  render() {\n    return (\n      <div class=\"time-period-selector\">\n        {/* <select-dropdown\n          id=\"time-number\"\n          name={'time-number'}\n          exportparts=\"sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content\"\n          options={this.numberOptions}\n          defaultSelectedOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString()) ?? this.numberOptions[0]}\n          withSearch={false}\n        /> */}\n        <input-dropdown\n          id=\"time-number\"\n          name={'time-number'}\n          inputValue={this.selectedNumber.toString()}\n          exportparts=\"sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content\"\n          options={this.numberOptions}\n          defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString()) ?? this.numberOptions[0]}\n        />\n        <select-dropdown\n          id=\"time-period\"\n          name={'time-period'}\n          options={this.timePeriodOptions}\n          exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n          pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n          defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod) ?? this.timePeriodOptions[0]}\n          withSearch={false}\n        />\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nylas-web-elements/scheduler-config-store-8ccc8dc7.js.map

@@ -1 +0,0 @@
-{"file":"scheduler-config-store-8ccc8dc7.js","mappings":";;SA8CgB,+BAA+B,CAAC,eAAwD,EAAE;IACxG,MAAM,2BAA2B,GAAmC;QAClE,qBAAqB,EAAE,EAAE;QACzB,cAAc,EAAE,EAAE;QAClB,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,GAAG,YAAY;KAChB,CAAC;IACF,MAAM,KAAK,GAAG,WAAW,CAAiC,2BAA2B,CAAC,CAAC;IAMvF,SAAS,0BAA0B;QACjC,KAAK,CAAC,GAAG,CAAC,uBAAuB,EAAE,EAAE,GAAG,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC;KAClF;IAED,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,OAAM,MAAM;QACnC,IAAI,CAAC,MAAM,EAAE;YACX,0BAA0B,EAAE,CAAC;SAC9B;KACF,CAAC,CAAC;IAEH,OAAO;QACL,GAAG,KAAK;QACR,0BAA0B;KAC3B,CAAC;AACJ;;;;","names":[],"sources":["src/stores/scheduler-config-store.ts"],"sourcesContent":["import { Calendar, Configuration } from '@nylas/core';\nimport { ObservableMap, createStore } from '@stencil/store';\nimport { User } from '@/common/nylas-api-request';\n\ntype RecursivePartial<T> = {\n  [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object | undefined ? RecursivePartial<T[P]> : T[P];\n};\n\nexport interface NylasSchedulerConfigStoreState {\n  /**\n   * The selected configuration.\n   * This is the configuration that is currently selected, use it to populate default values for new configurations.\n   */\n  selectedConfiguration: RecursivePartial<Configuration>;\n  /**\n   * The list of configurations.\n   * This is the list of configurations that the user has created.\n   */\n  configurations: Configuration[];\n  /**\n   * The list of calendars.\n   * This is the list of calendars that the user has access to.\n   */\n  calendars: Calendar[];\n  /**\n   * The current user.\n   * This is the user that is currently logged in.\n   */\n  currentUser: User | null;\n  /**\n   * The current action.\n   * This is the current action that the user is performing.\n   */\n  action: 'create' | 'edit' | null;\n}\n\nexport type NylasSchedulerConfigStoreType = ReturnType<typeof CreateNylasSchedulerConfigStore>;\n\nexport type CreateNylasSchedulerConfigStoreReturnType = ObservableMap<NylasSchedulerConfigStoreState> & {\n  /**\n   * Reset the selected configuration to the default state.\n   * This is used to reset the selected configuration to the default state instead of setting it to an empty object.\n   */\n  resetSelectedConfiguration: () => void;\n};\n\nexport function CreateNylasSchedulerConfigStore(defaultState: Partial<NylasSchedulerConfigStoreState> = {}): CreateNylasSchedulerConfigStoreReturnType {\n  const defaultSchedulerConfigState: NylasSchedulerConfigStoreState = {\n    selectedConfiguration: {},\n    configurations: [],\n    calendars: [],\n    currentUser: null,\n    action: null,\n    ...defaultState,\n  };\n  const store = createStore<NylasSchedulerConfigStoreState>(defaultSchedulerConfigState);\n\n  /**\n   * Reset the selected configuration to the default state.\n   * This is used to reset the selected configuration to the default state instead of setting it to an empty object.\n   */\n  function resetSelectedConfiguration() {\n    store.set('selectedConfiguration', { ...defaultState['selectedConfiguration'] });\n  }\n\n  store.onChange('action', async action => {\n    if (!action) {\n      resetSelectedConfiguration();\n    }\n  });\n\n  return {\n    ...store,\n    resetSelectedConfiguration,\n  };\n}\n"],"version":3}