@nylas/web-elements 0.0.0-canary-20241008193213 → 0.0.0-canary-20241015194719

package/dist/components/nylas-organizer-confirmation-card2.js.map

@@ -1 +1 @@
-{"file":"nylas-organizer-confirmation-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.event-card-wrapper {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  width: 424px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 4rem;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.manage-booking-description {\n  border-top: 1px solid var(--nylas-base-200);\n\n  p {\n    font-size: 16px;\n    margin: 1rem;\n    padding: 0.5rem 1rem;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n  }\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n *\n * @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-organizer-confirmation-card',\n  styleUrl: 'nylas-organizer-confirmation-card.scss',\n  shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly organizerConfirmationBookingId?: string;\n\n  /**\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  /**\n   * The state to identify which action is being performed.\n   */\n  @State() action: 'confirm' | 'reject' | null = null;\n\n  /**\n   * Reject booking button clicked event.\n   */\n  @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n    bookingId: string;\n    host: HTMLNylasOrganizerConfirmationCardElement;\n    errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n  }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component did load`);\n  }\n\n  private handleConfirmBookingButtonClicked = () => {\n    this.action = 'confirm';\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmBookingError.emit(error);\n    };\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n    }\n  };\n\n  private handleRejectBookingButtonClicked = () => {\n    this.action = 'reject';\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n    }\n  };\n\n  @Method()\n  async resetAction() {\n    this.action = null;\n  }\n\n  @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-organizer-confirmation-card',\n    stateToProps: new Map([\n      ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {\n      rejectBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n      },\n      confirmBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const { host } = event.detail;\n        const result = await nylasSchedulerConnector.scheduler.updateBooking({\n          bookingId: event.detail.bookingId,\n          status: 'confirmed',\n        });\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n        await host.resetAction();\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nmcc\">\n        <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n          <div class=\"calendar-icon\">\n            <calendar-check-icon />\n          </div>\n          <div class=\"booked-event-header\">\n            <h2 slot=\"card-title\" part=\"nmcc__title\">\n              {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n            </h2>\n          </div>\n          <div class=\"manage-booking-description\">\n            <p>{i18next.t('bookingPendingnDescription')}</p>\n          </div>\n          <div\n            class={{\n              'footer': true,\n              'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,\n              'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,\n            }}\n          >\n            {!this.configSettings?.scheduler?.hide_cancellation_options && (\n              <button-component\n                variant={'destructive'}\n                onClick={this.handleRejectBookingButtonClicked}\n                isLoading={this.isLoading && this.action === 'reject'}\n                part=\"nmcc__button-outline nmcc__cancel-cta\"\n              >\n                {`${i18next.t('rejectBookingButton')}`}\n              </button-component>\n            )}\n            {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n              <button-component\n                variant={'basic'}\n                onClick={this.handleConfirmBookingButtonClicked}\n                isLoading={this.isLoading && this.action === 'confirm'}\n                part=\"nmcc__button-outline nmcc__reschedule-cta\"\n              >\n                {`${i18next.t('confirmBookingButton')}`}\n              </button-component>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-organizer-confirmation-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.event-card-wrapper {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  width: 424px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 4rem;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.manage-booking-description {\n  border-top: 1px solid var(--nylas-base-200);\n\n  p {\n    font-size: 16px;\n    margin: 1rem;\n    padding: 0.5rem 1rem;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n  }\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n *\n * @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-organizer-confirmation-card',\n  styleUrl: 'nylas-organizer-confirmation-card.scss',\n  shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly organizerConfirmationBookingId?: string;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  /**\n   * The state to identify which action is being performed.\n   */\n  @State() action: 'confirm' | 'reject' | null = null;\n\n  /**\n   * Reject booking button clicked event.\n   */\n  @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n    bookingId: string;\n    host: HTMLNylasOrganizerConfirmationCardElement;\n    errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n  }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component did load`);\n  }\n\n  private handleConfirmBookingButtonClicked = () => {\n    this.action = 'confirm';\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmBookingError.emit(error);\n    };\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n    }\n  };\n\n  private handleRejectBookingButtonClicked = () => {\n    this.action = 'reject';\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n    }\n  };\n\n  @Method()\n  async resetAction() {\n    this.action = null;\n  }\n\n  @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-organizer-confirmation-card',\n    stateToProps: new Map([\n      ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {\n      rejectBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n      },\n      confirmBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const { host } = event.detail;\n        const result = await nylasSchedulerConnector.scheduler.updateBooking({\n          bookingId: event.detail.bookingId,\n          status: 'confirmed',\n        });\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n        await host.resetAction();\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nmcc\">\n        <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n          <div class=\"calendar-icon\">\n            <calendar-check-icon />\n          </div>\n          <div class=\"booked-event-header\">\n            <h2 slot=\"card-title\" part=\"nmcc__title\">\n              {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n            </h2>\n          </div>\n          <div class=\"manage-booking-description\">\n            <p>{i18next.t('bookingPendingnDescription')}</p>\n          </div>\n          <div\n            class={{\n              'footer': true,\n              'no-footer': this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options,\n              'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,\n            }}\n          >\n            {!this.configSettings?.scheduler?.hide_cancellation_options && (\n              <button-component\n                variant={'destructive'}\n                onClick={this.handleRejectBookingButtonClicked}\n                isLoading={this.isLoading && this.action === 'reject'}\n                part=\"nmcc__button-outline nmcc__cancel-cta\"\n              >\n                {`${i18next.t('rejectBookingButton')}`}\n              </button-component>\n            )}\n            {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n              <button-component\n                variant={'basic'}\n                onClick={this.handleConfirmBookingButtonClicked}\n                isLoading={this.isLoading && this.action === 'confirm'}\n                part=\"nmcc__button-outline nmcc__reschedule-cta\"\n              >\n                {`${i18next.t('confirmBookingButton')}`}\n              </button-component>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-page-name2.js

@@ -31,10 +31,10 @@ const NylasPageName = proxyCustomElement(class NylasPageName extends HTMLElement
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
         this.selectedConfiguration = undefined;
+        this.name = 'page-name';
         this.pageName = undefined;
         this.showToggle = true;
         this.isOpen = true;
-        this.name = 'page-name';
         this.currentPageName = undefined;
     }
     connectedCallback() {
@@ -89,7 +89,7 @@ const NylasPageName = proxyCustomElement(class NylasPageName extends HTMLElement
     }
     render() {
         const isComponentReady = typeof this.currentPageName !== 'undefined';
-        return (h(Host, { key: '9059ab828471167a956da7e61487dc9cba97eac5' }, h("div", { key: '777d34ebe91615d24d9502144ca7c3325483ee50', class: "nylas-page-name", part: "nces" }, h("div", { key: '365ddb6e8ef7e878ab16b595e8b48363764836be', class: "header", part: "nces__header" }, h("div", { key: '5955b442d8019c5f847450640fc8442e174ae3b9' }, h("h3", { key: '79f9e1b7a9a164528d11c6c9b1766a49c29376d7' }, "Page name"), h("p", { key: 'dd653de5a4480ab3a76054f75fbc847fbd865c8a' }, "Set the Scheduling Page name.", h("tooltip-component", { key: 'd0e59a0d335237f68f679ffd9647e17aab9f3732' }, h("info-icon", { key: '49e5cebbd219cccc518a9868070bd7068e408cee', slot: "tooltip-icon" }), h("span", { key: '131bb249cc09b6e8db3637101b84e0afcbeccfab', slot: "tooltip-content" }, "By default, Scheduling Pages use your user name as the Page name. The Page name is displayed in the top-left corner of the calendar view.")))), this.showToggle && (h("div", { class: "drawer-toggle", part: "nces__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleDrawer() }, h("chevron-icon", { width: "24", height: "24" }))))), this.isOpen && (h("div", { class: "nylas-page-name__body", part: "nces__body" }, h("div", { class: "nylas-page-name__section" }, h("div", { class: "nylas-page-name__row" }, h("div", { class: "input-container" }, h("div", { class: "nylas-page-name__input-wrapper" }, isComponentReady && (h("input-component", { name: "page-name", id: "page-name", type: "text", required: false, exportparts: "ic_input: npn__input-textfield", defaultValue: this.currentPageName ?? '' })))))))))));
+        return (h(Host, { key: 'f0b405f57e2cb8c65b59c07bdca8ec3885a98a7d' }, h("div", { key: '4873ef6137393c0bd31b90fca33eee42e2feb449', class: "nylas-page-name", part: "nces" }, h("div", { key: 'bf9894bee632ed6debc5f401b1e3bb98d4561258', class: "header", part: "nces__header" }, h("div", { key: '631f080c4c2aba2597d6638ea4dfb20eedb0a1d6' }, h("h3", { key: '657b49c737bb46d96698cac0c39ba20f08dac34a' }, "Page name"), h("p", { key: '7a81b920c53b427529828476a2efed5c80c5ce56' }, "Set the Scheduling Page name.", h("tooltip-component", { key: 'a16a8a9e03310794cf4de5b0ab863d730723bf16' }, h("info-icon", { key: 'ffbfa4cfd591c4994a7ff51251ed92062e9cf42e', slot: "tooltip-icon" }), h("span", { key: '41a0ed919be3aa80fc5f1d03138157f46aaa8494', slot: "tooltip-content" }, "By default, Scheduling Pages use your user name as the Page name. The Page name is displayed in the top-left corner of the calendar view.")))), this.showToggle && (h("div", { class: "drawer-toggle", part: "nces__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleDrawer() }, h("chevron-icon", { width: "24", height: "24" }))))), this.isOpen && (h("div", { class: "nylas-page-name__body", part: "nces__body" }, h("div", { class: "nylas-page-name__section" }, h("div", { class: "nylas-page-name__row" }, h("div", { class: "input-container" }, h("div", { class: "nylas-page-name__input-wrapper" }, isComponentReady && (h("input-component", { name: "page-name", id: "page-name", type: "text", required: false, exportparts: "ic_input: npn__input-textfield", defaultValue: this.currentPageName ?? '' })))))))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -100,10 +100,10 @@ const NylasPageName = proxyCustomElement(class NylasPageName extends HTMLElement
     static get style() { return NylasPageNameStyle0; }
 }, [65, "nylas-page-name", {
         "selectedConfiguration": [16],
+        "name": [1],
         "pageName": [1, "page-name"],
         "showToggle": [4, "show-toggle"],
         "isOpen": [4, "is-open"],
-        "name": [1],
         "currentPageName": [32]
     }, [[0, "nylasFormInputChanged", "nylasFormInputChangeHandler"]], {
         "name": ["elementNameChangedHandler"],

package/dist/components/nylas-page-name2.js.map

@@ -1 +1 @@
-{"file":"nylas-page-name2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-page-name/nylas-page-name.scss?tag=nylas-page-name&encapsulation=shadow","src/components/scheduler-editor/nylas-page-name/nylas-page-name.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-page-name {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      display: flex;\n      gap: 4px;\n      align-items: center;\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n\n    .drawer-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-page-name__body {\n    display: grid;\n    grid-template-columns: 1fr;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n    border-top: 1px solid var(--nylas-base-200);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-page-name__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-page-name__row {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 1rem;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .input-container {\n          width: 100%;\n        }\n      }\n    }\n  }\n\n  .nylas-page-name__input-wrapper {\n    @include textfield;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    display: flex;\n    flex-direction: row;\n    gap: 0.125rem;\n    border-radius: var(--nylas-border-radius-2x);\n    z-index: 1;\n\n    input-component::part(ic__input) {\n      outline: none;\n      border: none;\n      width: 100%;\n      font-size: 1rem;\n      height: auto;\n      padding-left: 0px;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker.\n *\n * @part npn - The nylas-page-name container\n * @part npn__body - The body of the event communication section\n * @part npn__header - The header of the event communication section\n * @part npn__drawer-toggle--container - The card's drawer toggle container\n * @part npn__input-textfield - The page name input textfield\n */\n@Component({\n  tag: 'nylas-page-name',\n  styleUrl: 'nylas-page-name.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageName {\n  @Element() host!: HTMLNylasPageNameElement;\n\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The default page name\n   */\n  @Prop() pageName?: string;\n  /**\n   * Show toggle button that allows users to expand or collapse the card\n   */\n  @Prop() showToggle: boolean = true;\n  /**\n   * Is the page name container card expanded\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'page-name';\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current page name state\n   */\n  @State() currentPageName!: string;\n\n  /**\n   * This event is fired when the page name value changes\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-page-name', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-name', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-name', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-name', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.currentPageName = this.pageName ?? '';\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-name', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-name', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-name', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-name', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-page-name', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.currentPageName = newValue?.name ?? this.pageName ?? '';\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n\n    if (name === 'page-name') {\n      this.currentPageName = value;\n      this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageName, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-name',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const isComponentReady = typeof this.currentPageName !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-page-name\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>Page name</h3>\n              <p>\n                Set the Scheduling Page name.\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    By default, Scheduling Pages use your user name as the Page name. The Page name is displayed in the top-left corner of the calendar view.\n                  </span>\n                </tooltip-component>\n              </p>\n            </div>\n\n            {this.showToggle && (\n              <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            )}\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-page-name__body\" part=\"nces__body\">\n              <div class=\"nylas-page-name__section\">\n                <div class=\"nylas-page-name__row\">\n                  <div class=\"input-container\">\n                    <div class=\"nylas-page-name__input-wrapper\">\n                      {isComponentReady && (\n                        <input-component\n                          name=\"page-name\"\n                          id=\"page-name\"\n                          type=\"text\"\n                          required={false}\n                          exportparts=\"ic_input: npn__input-textfield\"\n                          defaultValue={this.currentPageName ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-page-name2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-page-name/nylas-page-name.scss?tag=nylas-page-name&encapsulation=shadow","src/components/scheduler-editor/nylas-page-name/nylas-page-name.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-page-name {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      display: flex;\n      gap: 4px;\n      align-items: center;\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n\n    .drawer-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-page-name__body {\n    display: grid;\n    grid-template-columns: 1fr;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n    border-top: 1px solid var(--nylas-base-200);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-page-name__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-page-name__row {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 1rem;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .input-container {\n          width: 100%;\n        }\n      }\n    }\n  }\n\n  .nylas-page-name__input-wrapper {\n    @include textfield;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    display: flex;\n    flex-direction: row;\n    gap: 0.125rem;\n    border-radius: var(--nylas-border-radius-2x);\n    z-index: 1;\n\n    input-component::part(ic__input) {\n      outline: none;\n      border: none;\n      width: 100%;\n      font-size: 1rem;\n      height: auto;\n      padding-left: 0px;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker.\n *\n * @part npn - The nylas-page-name container\n * @part npn__body - The body of the event communication section\n * @part npn__header - The header of the event communication section\n * @part npn__drawer-toggle--container - The card's drawer toggle container\n * @part npn__input-textfield - The page name input textfield\n */\n@Component({\n  tag: 'nylas-page-name',\n  styleUrl: 'nylas-page-name.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageName {\n  @Element() host!: HTMLNylasPageNameElement;\n\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'page-name';\n  /**\n   * @standalone\n   * The default page name\n   */\n  @Prop() pageName?: string;\n  /**\n   * @standalone\n   * Show toggle button that allows users to expand or collapse the card\n   */\n  @Prop() showToggle: boolean = true;\n  /**\n   * @standalone\n   * Is the page name container card expanded\n   */\n  @Prop() isOpen: boolean = true;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current page name state\n   */\n  @State() currentPageName!: string;\n\n  /**\n   * This event is fired when the page name value changes\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-page-name', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-name', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-name', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-name', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.currentPageName = this.pageName ?? '';\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-name', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-name', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-name', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-name', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-page-name', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.currentPageName = newValue?.name ?? this.pageName ?? '';\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n\n    if (name === 'page-name') {\n      this.currentPageName = value;\n      this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageName, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-name',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const isComponentReady = typeof this.currentPageName !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-page-name\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>Page name</h3>\n              <p>\n                Set the Scheduling Page name.\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    By default, Scheduling Pages use your user name as the Page name. The Page name is displayed in the top-left corner of the calendar view.\n                  </span>\n                </tooltip-component>\n              </p>\n            </div>\n\n            {this.showToggle && (\n              <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            )}\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-page-name__body\" part=\"nces__body\">\n              <div class=\"nylas-page-name__section\">\n                <div class=\"nylas-page-name__row\">\n                  <div class=\"input-container\">\n                    <div class=\"nylas-page-name__input-wrapper\">\n                      {isComponentReady && (\n                        <input-component\n                          name=\"page-name\"\n                          id=\"page-name\"\n                          type=\"text\"\n                          required={false}\n                          exportparts=\"ic_input: npn__input-textfield\"\n                          defaultValue={this.currentPageName ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-page-styling2.js

@@ -29,9 +29,9 @@ const NylasPageStyling = proxyCustomElement(class NylasPageStyling extends HTMLE
         this.bookingFormSubmitted = createEvent(this, "bookingFormSubmitted", 7);
         this.internals = this.attachInternals();
         this.selectedConfiguration = undefined;
+        this.name = 'page-styling';
         this.appearance = undefined;
         this.isOpen = true;
-        this.name = 'page-styling';
         this.currentAppearance = undefined;
         this.customInputsSlot = null;
     }
@@ -250,7 +250,7 @@ const NylasPageStyling = proxyCustomElement(class NylasPageStyling extends HTMLE
         this.isOpen = !this.isOpen;
     }
     render() {
-        return (h(Host, { key: '7d0a6fffdec383f566caec6c2b6e780190dc1a7d' }, h("div", { key: '6f232a3f20e564490ffc96ef9ce2a8d2b348ac19', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (h("div", { class: "header", part: "nps__header" }, h("div", null, h("h3", null, "Page styling and customization")), h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" }))))) : null, h("div", { key: '1b918548eaddb6dc65a24fe0a8918f04a43edaed', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h("div", { key: 'cafc8e8f98baa04aca2963dcf130240423df082a', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, h("div", { key: 'cba6152c8a382828963870204937ce9b18a419d8', class: "nylas-page-styling__row" }, h("div", { key: '98eab9461e7ec97c8b48bfa13c112f50f3548b67', class: { subsection: true, hide: !this.isOpen } })))))));
+        return (h(Host, { key: 'be08b4dc45a6950b8bf9190fbb5bd450a63f24cb' }, h("div", { key: '37c4ef967ab1ccecc7752be8e13847c1ff67f2ad', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (h("div", { class: "header", part: "nps__header" }, h("div", null, h("h3", null, "Page styling and customization")), h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" }))))) : null, h("div", { key: '304a8a53cff0c854ce244435ff51abb2dc51b105', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h("div", { key: '9de4abc9b92aab8d976b0fd2a568a5c60d7f0f6e', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, h("div", { key: '490d7515e07679200e6a42138867088c7b6c4634', class: "nylas-page-styling__row" }, h("div", { key: 'dcf7dbe82d82b103f14e63dc519aab3245d869e8', class: { subsection: true, hide: !this.isOpen } })))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -260,9 +260,9 @@ const NylasPageStyling = proxyCustomElement(class NylasPageStyling extends HTMLE
     static get style() { return NylasPageStylingStyle0; }
 }, [65, "nylas-page-styling", {
         "selectedConfiguration": [16],
+        "name": [1],
         "appearance": [16],
         "isOpen": [4, "is-open"],
-        "name": [1],
         "currentAppearance": [32],
         "customInputsSlot": [32]
     }, [[4, "nylasFormInputChanged", "nylasFormInputChangeHandler"], [4, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [4, "valueChanged", "valueChangedHandler"], [4, "nylasFormCheckboxToggled", "checkboxToggledHandler"], [4, "nylasFormRadioChanged", "radioChangedHandler"]], {

package/dist/components/nylas-page-styling2.js.map

@@ -1 +1 @@
-{"file":"nylas-page-styling2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.scss?tag=nylas-page-styling&encapsulation=shadow","src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-page-styling {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n\n  &.no-border {\n    border: none;\n  }\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    border-bottom: 1px solid var(--nylas-base-200);\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n\n    .drawer-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-page-styling__body {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-page-styling__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      &.no-padding {\n        padding: 0;\n      }\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-page-styling__row {\n        display: grid;\n        grid-template-columns: 1fr;\n        align-items: center;\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n\n          span.label-icon {\n            margin-left: 4px;\n\n            tooltip-component {\n              display: flex;\n            }\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 1rem;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .subsection {\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n\n          &.hide {\n            display: none;\n          }\n\n          h3 {\n            margin: 0;\n            font-size: 1rem;\n            font-weight: 600;\n            line-height: 20px;\n            color: var(--nylas-base-900);\n            text-align: left;\n          }\n\n          .input-container,\n          > * {\n            display: flex;\n            flex-direction: column;\n            column-gap: 2rem;\n            row-gap: 0.25rem;\n            width: 100%;\n            flex: 1;\n\n            textarea {\n              padding: 12px 16px;\n              border-width: 1;\n              resize: vertical;\n              border-radius: 8px;\n              font-family: var(--nylas-font-family);\n              font-size: 16px;\n              line-height: 24px;\n              border: 1px solid var(--nylas-base-200);\n            }\n          }\n        }\n      }\n    }\n\n    span.error-message {\n      color: var(--nylas-error);\n    }\n\n    span.help-text {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Appearance, Configuration } from '@nylas/core';\n\n/**\n * The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page.\n * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input\n * fields you want to display. The component will automatically update the appearance object when the input fields are changed.\n * Ensure that the input fields have the `name` attribute set to the key in the appearance object.\n *\n * If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page.\n * The fields that can be customized in the Nylas hosted scheduler page are:\n * - Primary color: (name: color)\n * - Company logo: (name: company_logo_url)\n * - Submit button label: (name: submit_button_label)\n * - Thank you message: (name: thank_you_message)\n *\n * @slot custom-page-style-inputs - This slot is used to pass a custom page style form to the Nylas Scheduler Editor component.\n * @part nps - The nylas-page-styling container\n * @part nps__header - The header of the page styling section\n * @part nps__drawer-toggle--container - The page styling drawer toggle container\n * @part nps__body - The body of the page styling section\n * @part nps__title-input-textfield - The page styling page title input textfield\n * @part nps__company-name-input-textfield - The page styling company name input textfield\n * @part nps__input-image-url - The page styling company logo input textfield\n * @part nps__color-picker - The page styling color picker\n * @part nps__color-picker-button - The page styling color picker button\n * @part nps__color-picker-button-label - The page styling color input field label *\n * @part nps__color-picker-button-selected-label - The page styling color picker label denoting which color is selected\n * @part nps__submit-button-label-input-textfield - The page styling submut button label input textfield\n * @part nps__message-textarea - The page styling thank you message textarea\n */\n@Component({\n  tag: 'nylas-page-styling',\n  styleUrl: 'nylas-page-styling.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageStyling {\n  @Element() host!: HTMLNylasPageStylingElement;\n  /**\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The appearance data to display\n   */\n  @Prop() appearance?: Appearance;\n  /**\n   * Is the page styling card open\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'page-styling';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() currentAppearance!: Appearance;\n  /**\n   * The confirmation email template state.\n   */\n  @State() customInputsSlot: Element | null = null;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  /**\n   * This event is fired when the form is submitted in the parent component.\n   */\n  @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-page-styling', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-styling', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-styling', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-styling', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-styling', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-styling', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-styling', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-styling', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-page-styling', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  customInputsSlotChangedHandler(newValue: Element | null) {\n    debug('nylas-page-styling', 'customInputsSlotChangedHandler', newValue);\n\n    const appearance = this.currentAppearance;\n\n    function updateInputDefaultValues(element: HTMLElement) {\n      // Process elements with a 'name' attribute\n      if (element.hasAttribute && element.hasAttribute('name')) {\n        const key = element.getAttribute('name');\n        if (appearance && key && key in appearance && appearance[key] !== undefined) {\n          // Update attributes based on component type\n          const componentType = element.getAttribute('component-type');\n\n          element.setAttribute('data-page-styling', 'true');\n\n          if (componentType === 'checkbox') {\n            element.setAttribute('checked', appearance[key]);\n          } else if (componentType === 'radio-group') {\n            element.setAttribute('default-selected-value', appearance[key]);\n          } else if (componentType === 'color-picker') {\n            element.setAttribute('default-selected-color', appearance[key]);\n          } else if (componentType === 'select-dropdown') {\n            const options = element.getAttribute('options');\n            const selectedOption = options ? JSON.parse(options).find((option: { value: string }) => option.value === appearance[key]) : null;\n            element.setAttribute('default-selected-option', JSON.stringify(selectedOption));\n          } else if (componentType === 'image-url') {\n            element.setAttribute('image-url', appearance[key]);\n          } else {\n            // Default case: set the default value\n            element.setAttribute('default-value', appearance[key]);\n          }\n        }\n      }\n\n      // Recursively process child elements (skip text nodes)\n      element.childNodes.forEach(child => {\n        if (child.nodeType === Node.ELEMENT_NODE) {\n          updateInputDefaultValues(child as HTMLElement); // Cast child to HTMLElement\n        }\n      });\n    }\n\n    // Start the recursive process with the cloned element (newValue)\n    if (newValue) {\n      updateInputDefaultValues(newValue as HTMLElement);\n    }\n  }\n\n  cloneAndCopyProps(element: HTMLElement): HTMLElement {\n    // Clone the current element\n    const clonedElement = element.cloneNode(false) as HTMLElement; // Do a shallow clone first\n    const componentType = element.getAttribute('component-type');\n    const key = element.getAttribute('name');\n\n    // Copy properties like 'options' and 'value' for custom elements\n    if ((element as any).options) {\n      const options = (element as any).getAttribute('options');\n      console.log('page-styling options', element, options);\n      if (typeof options === 'string') {\n        try {\n          const parsedOptions = JSON.parse(options);\n          (clonedElement as any).options = parsedOptions; // Parse the 'options' string\n          if (componentType === 'select-dropdown' && key && key in this.currentAppearance) {\n            const selectedOption = parsedOptions.find((option: { value: string }) => option.value === this.currentAppearance[key]);\n            (clonedElement as any).setAttribute('default-selected-option', JSON.stringify(selectedOption));\n          }\n        } catch (e) {\n          console.error('Error parsing options', e);\n        }\n      } else {\n        (clonedElement as any).options = (element as any).options; // Copy 'options' property\n      }\n    }\n\n    if ((element as any).value) {\n      (clonedElement as any).value = (element as any).value; // Copy 'value' property\n    }\n\n    // Recursively process child elements\n    element.childNodes.forEach(child => {\n      if (child.nodeType === Node.ELEMENT_NODE) {\n        // If the child is an element, recursively clone and process it\n        const clonedChild = this.cloneAndCopyProps(child as HTMLElement);\n        clonedElement.appendChild(clonedChild); // Append the cloned child to the parent clone\n      } else if (child.nodeType === Node.TEXT_NODE) {\n        // For text nodes, just clone and append the text content\n        clonedElement.appendChild(child.cloneNode(true));\n      }\n    });\n\n    return clonedElement; // Return the cloned element with its children\n  }\n\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-page-styling', 'selectedConfigurationChangedHandler', newValue);\n    this.currentAppearance = newValue?.appearance || {};\n    // Get the slot element\n    const editor = document.querySelector('nylas-scheduler-editor');\n    const slotElement = editor?.shadowRoot?.querySelector('slot[name=\"custom-page-style-inputs\"]') as HTMLSlotElement;\n    if (!slotElement) {\n      return;\n    }\n\n    const divElement = document.createElement('div');\n\n    // Get the slotted content (the nodes passed into the slot)\n    const slottedElements = slotElement?.assignedElements({ flatten: true });\n    // Clone each of the slotted nodes and append them to the cloned slot\n    slottedElements?.forEach(element => {\n      const clonedElement = this.cloneAndCopyProps(element as HTMLElement); // Clone recursively and copy properties\n\n      // Clone the slotted element (deep clone)\n      this.customInputsSlotChangedHandler(clonedElement);\n      // Append the cloned element to the document fragment\n      divElement.appendChild(clonedElement);\n    });\n\n    // Replace the original content with the new cloned and updated content\n    const bodyElement = this.host.shadowRoot?.querySelector('.nylas-page-styling');\n    const slotContainer = bodyElement?.querySelector('.nylas-page-styling__body .subsection');\n\n    if (slotContainer) {\n      // Remove existing children (if necessary) and append the new content\n      slotContainer.innerHTML = ''; // Clear existing content\n      divElement.childNodes.forEach(child => {\n        slotContainer.appendChild(child); // Append each child of divElement\n      });\n      this.customInputsSlot = divElement;\n    }\n  }\n\n  checkIfElementIsInSlot(name: string): boolean {\n    const findElement = document?.querySelector(`[slot=\"custom-page-style-inputs\"] [name=\"${name}\"]`);\n    return findElement ? true : false;\n  }\n\n  @Listen('nylasFormInputChanged', { target: 'document' })\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    switch (name) {\n      case 'submit_button_label':\n        this.currentAppearance = { ...this.currentAppearance, submit_button_label: value };\n        break;\n      case 'thank_you_message':\n        if (type === 'multi_line_text') {\n          const value = sanitize(event.detail.value);\n          this.currentAppearance = { ...this.currentAppearance, thank_you_message: value };\n        }\n        break;\n      default:\n        this.currentAppearance = { ...this.currentAppearance, [name]: value };\n        break;\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormDropdownChanged', { target: 'document' })\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-page-styling', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    if (name === 'color') {\n      this.currentAppearance = { ...this.currentAppearance, color: value };\n    } else {\n      this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('valueChanged', { target: 'document' })\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-page-styling', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    if (name === 'company_logo_url') {\n      this.currentAppearance = { ...this.currentAppearance, company_logo_url: value };\n    } else {\n      this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormCheckboxToggled', { target: 'document' })\n  checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n    const { checked, name } = event.detail;\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    this.currentAppearance = { ...this.currentAppearance, [name]: checked };\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormRadioChanged', { target: 'document' })\n  radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n    const { value, name } = event.detail;\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    this.updateConfirmationFormValue();\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-page-styling', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.currentAppearance), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.currentAppearance), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageStyling, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-styling',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div part=\"nps\" class={{ 'nylas-page-styling': true, 'no-border': !this.customInputsSlot }}>\n          {this.customInputsSlot ? (\n            <div class=\"header\" part=\"nps__header\">\n              <div>\n                <h3>Page styling and customization</h3>\n              </div>\n              <div class=\"drawer-toggle\" part=\"nps__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            </div>\n          ) : null}\n\n          <div id=\"nylas-page-styling__body\" class=\"nylas-page-styling__body\" part=\"nps__body\">\n            <div class={{ 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot }}>\n              <div class=\"nylas-page-styling__row\">\n                <div class={{ subsection: true, hide: !this.isOpen }}></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-page-styling2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.scss?tag=nylas-page-styling&encapsulation=shadow","src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-page-styling {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n\n  &.no-border {\n    border: none;\n  }\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    border-bottom: 1px solid var(--nylas-base-200);\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n\n    .drawer-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-page-styling__body {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-page-styling__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      &.no-padding {\n        padding: 0;\n      }\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-page-styling__row {\n        display: grid;\n        grid-template-columns: 1fr;\n        align-items: center;\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n\n          span.label-icon {\n            margin-left: 4px;\n\n            tooltip-component {\n              display: flex;\n            }\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 1rem;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .subsection {\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n\n          &.hide {\n            display: none;\n          }\n\n          h3 {\n            margin: 0;\n            font-size: 1rem;\n            font-weight: 600;\n            line-height: 20px;\n            color: var(--nylas-base-900);\n            text-align: left;\n          }\n\n          .input-container,\n          > * {\n            display: flex;\n            flex-direction: column;\n            column-gap: 2rem;\n            row-gap: 0.25rem;\n            width: 100%;\n            flex: 1;\n\n            textarea {\n              padding: 12px 16px;\n              border-width: 1;\n              resize: vertical;\n              border-radius: 8px;\n              font-family: var(--nylas-font-family);\n              font-size: 16px;\n              line-height: 24px;\n              border: 1px solid var(--nylas-base-200);\n            }\n          }\n        }\n      }\n    }\n\n    span.error-message {\n      color: var(--nylas-error);\n    }\n\n    span.help-text {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Appearance, Configuration } from '@nylas/core';\n\n/**\n * The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page.\n * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input\n * fields you want to display. The component will automatically update the appearance object when the input fields are changed.\n * Ensure that the input fields have the `name` attribute set to the key in the appearance object.\n *\n * If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page.\n * The fields that can be customized in the Nylas hosted scheduler page are:\n * - Primary color: (name: color)\n * - Company logo: (name: company_logo_url)\n * - Submit button label: (name: submit_button_label)\n * - Thank you message: (name: thank_you_message)\n *\n * This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component.\n *\n * @slot custom-page-style-inputs - This slot is used to pass a custom page style form to the Nylas Scheduler Editor component.\n * @part nps - The nylas-page-styling container\n * @part nps__header - The header of the page styling section\n * @part nps__drawer-toggle--container - The page styling drawer toggle container\n * @part nps__body - The body of the page styling section\n * @part nps__title-input-textfield - The page styling page title input textfield\n * @part nps__company-name-input-textfield - The page styling company name input textfield\n * @part nps__input-image-url - The page styling company logo input textfield\n * @part nps__color-picker - The page styling color picker\n * @part nps__color-picker-button - The page styling color picker button\n * @part nps__color-picker-button-label - The page styling color input field label *\n * @part nps__color-picker-button-selected-label - The page styling color picker label denoting which color is selected\n * @part nps__submit-button-label-input-textfield - The page styling submut button label input textfield\n * @part nps__message-textarea - The page styling thank you message textarea\n */\n@Component({\n  tag: 'nylas-page-styling',\n  styleUrl: 'nylas-page-styling.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageStyling {\n  @Element() host!: HTMLNylasPageStylingElement;\n  /**\n   * @internal\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @internal\n   * The name of the component\n   */\n  @Prop() name: string = 'page-styling';\n  /**\n   * @internal\n   * The appearance data to display\n   */\n  @Prop() appearance?: Appearance;\n  /**\n   * @internal\n   * Is the page styling card open\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() currentAppearance!: Appearance;\n  /**\n   * The confirmation email template state.\n   */\n  @State() customInputsSlot: Element | null = null;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  /**\n   * This event is fired when the form is submitted in the parent component.\n   */\n  @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-page-styling', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-styling', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-styling', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-styling', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-styling', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-styling', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-styling', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-styling', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-page-styling', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  customInputsSlotChangedHandler(newValue: Element | null) {\n    debug('nylas-page-styling', 'customInputsSlotChangedHandler', newValue);\n\n    const appearance = this.currentAppearance;\n\n    function updateInputDefaultValues(element: HTMLElement) {\n      // Process elements with a 'name' attribute\n      if (element.hasAttribute && element.hasAttribute('name')) {\n        const key = element.getAttribute('name');\n        if (appearance && key && key in appearance && appearance[key] !== undefined) {\n          // Update attributes based on component type\n          const componentType = element.getAttribute('component-type');\n\n          element.setAttribute('data-page-styling', 'true');\n\n          if (componentType === 'checkbox') {\n            element.setAttribute('checked', appearance[key]);\n          } else if (componentType === 'radio-group') {\n            element.setAttribute('default-selected-value', appearance[key]);\n          } else if (componentType === 'color-picker') {\n            element.setAttribute('default-selected-color', appearance[key]);\n          } else if (componentType === 'select-dropdown') {\n            const options = element.getAttribute('options');\n            const selectedOption = options ? JSON.parse(options).find((option: { value: string }) => option.value === appearance[key]) : null;\n            element.setAttribute('default-selected-option', JSON.stringify(selectedOption));\n          } else if (componentType === 'image-url') {\n            element.setAttribute('image-url', appearance[key]);\n          } else {\n            // Default case: set the default value\n            element.setAttribute('default-value', appearance[key]);\n          }\n        }\n      }\n\n      // Recursively process child elements (skip text nodes)\n      element.childNodes.forEach(child => {\n        if (child.nodeType === Node.ELEMENT_NODE) {\n          updateInputDefaultValues(child as HTMLElement); // Cast child to HTMLElement\n        }\n      });\n    }\n\n    // Start the recursive process with the cloned element (newValue)\n    if (newValue) {\n      updateInputDefaultValues(newValue as HTMLElement);\n    }\n  }\n\n  cloneAndCopyProps(element: HTMLElement): HTMLElement {\n    // Clone the current element\n    const clonedElement = element.cloneNode(false) as HTMLElement; // Do a shallow clone first\n    const componentType = element.getAttribute('component-type');\n    const key = element.getAttribute('name');\n\n    // Copy properties like 'options' and 'value' for custom elements\n    if ((element as any).options) {\n      const options = (element as any).getAttribute('options');\n      console.log('page-styling options', element, options);\n      if (typeof options === 'string') {\n        try {\n          const parsedOptions = JSON.parse(options);\n          (clonedElement as any).options = parsedOptions; // Parse the 'options' string\n          if (componentType === 'select-dropdown' && key && key in this.currentAppearance) {\n            const selectedOption = parsedOptions.find((option: { value: string }) => option.value === this.currentAppearance[key]);\n            (clonedElement as any).setAttribute('default-selected-option', JSON.stringify(selectedOption));\n          }\n        } catch (e) {\n          console.error('Error parsing options', e);\n        }\n      } else {\n        (clonedElement as any).options = (element as any).options; // Copy 'options' property\n      }\n    }\n\n    if ((element as any).value) {\n      (clonedElement as any).value = (element as any).value; // Copy 'value' property\n    }\n\n    // Recursively process child elements\n    element.childNodes.forEach(child => {\n      if (child.nodeType === Node.ELEMENT_NODE) {\n        // If the child is an element, recursively clone and process it\n        const clonedChild = this.cloneAndCopyProps(child as HTMLElement);\n        clonedElement.appendChild(clonedChild); // Append the cloned child to the parent clone\n      } else if (child.nodeType === Node.TEXT_NODE) {\n        // For text nodes, just clone and append the text content\n        clonedElement.appendChild(child.cloneNode(true));\n      }\n    });\n\n    return clonedElement; // Return the cloned element with its children\n  }\n\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-page-styling', 'selectedConfigurationChangedHandler', newValue);\n    this.currentAppearance = newValue?.appearance || {};\n    // Get the slot element\n    const editor = document.querySelector('nylas-scheduler-editor');\n    const slotElement = editor?.shadowRoot?.querySelector('slot[name=\"custom-page-style-inputs\"]') as HTMLSlotElement;\n    if (!slotElement) {\n      return;\n    }\n\n    const divElement = document.createElement('div');\n\n    // Get the slotted content (the nodes passed into the slot)\n    const slottedElements = slotElement?.assignedElements({ flatten: true });\n    // Clone each of the slotted nodes and append them to the cloned slot\n    slottedElements?.forEach(element => {\n      const clonedElement = this.cloneAndCopyProps(element as HTMLElement); // Clone recursively and copy properties\n\n      // Clone the slotted element (deep clone)\n      this.customInputsSlotChangedHandler(clonedElement);\n      // Append the cloned element to the document fragment\n      divElement.appendChild(clonedElement);\n    });\n\n    // Replace the original content with the new cloned and updated content\n    const bodyElement = this.host.shadowRoot?.querySelector('.nylas-page-styling');\n    const slotContainer = bodyElement?.querySelector('.nylas-page-styling__body .subsection');\n\n    if (slotContainer) {\n      // Remove existing children (if necessary) and append the new content\n      slotContainer.innerHTML = ''; // Clear existing content\n      divElement.childNodes.forEach(child => {\n        slotContainer.appendChild(child); // Append each child of divElement\n      });\n      this.customInputsSlot = divElement;\n    }\n  }\n\n  checkIfElementIsInSlot(name: string): boolean {\n    const findElement = document?.querySelector(`[slot=\"custom-page-style-inputs\"] [name=\"${name}\"]`);\n    return findElement ? true : false;\n  }\n\n  @Listen('nylasFormInputChanged', { target: 'document' })\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    switch (name) {\n      case 'submit_button_label':\n        this.currentAppearance = { ...this.currentAppearance, submit_button_label: value };\n        break;\n      case 'thank_you_message':\n        if (type === 'multi_line_text') {\n          const value = sanitize(event.detail.value);\n          this.currentAppearance = { ...this.currentAppearance, thank_you_message: value };\n        }\n        break;\n      default:\n        this.currentAppearance = { ...this.currentAppearance, [name]: value };\n        break;\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormDropdownChanged', { target: 'document' })\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-page-styling', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    if (name === 'color') {\n      this.currentAppearance = { ...this.currentAppearance, color: value };\n    } else {\n      this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('valueChanged', { target: 'document' })\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-page-styling', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    if (name === 'company_logo_url') {\n      this.currentAppearance = { ...this.currentAppearance, company_logo_url: value };\n    } else {\n      this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormCheckboxToggled', { target: 'document' })\n  checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n    const { checked, name } = event.detail;\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    this.currentAppearance = { ...this.currentAppearance, [name]: checked };\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormRadioChanged', { target: 'document' })\n  radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n    const { value, name } = event.detail;\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    this.updateConfirmationFormValue();\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-page-styling', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.currentAppearance), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.currentAppearance), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageStyling, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-styling',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div part=\"nps\" class={{ 'nylas-page-styling': true, 'no-border': !this.customInputsSlot }}>\n          {this.customInputsSlot ? (\n            <div class=\"header\" part=\"nps__header\">\n              <div>\n                <h3>Page styling and customization</h3>\n              </div>\n              <div class=\"drawer-toggle\" part=\"nps__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            </div>\n          ) : null}\n\n          <div id=\"nylas-page-styling__body\" class=\"nylas-page-styling__body\" part=\"nps__body\">\n            <div class={{ 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot }}>\n              <div class=\"nylas-page-styling__row\">\n                <div class={{ subsection: true, hide: !this.isOpen }}></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-participant-booking-calendars2.js

@@ -109,6 +109,10 @@ const NylasParticipantBookingCalendars = proxyCustomElement(class NylasParticipa
             this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);
             this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);
         }
+        else {
+            this.selectedCalendars = this.setParticipants(this.participants);
+            this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);
+        }
     }
     handleValueChanged(event) {
         debug('[nylas-editor-tabs]', 'handleValueChanged', event);
@@ -150,13 +154,13 @@ const NylasParticipantBookingCalendars = proxyCustomElement(class NylasParticipa
         return selectedParticipants;
     }
     render() {
-        return (h(Host, { key: '771e6bf137e6e8565edfa38b018ebecbbd34391a' }, h("div", { key: 'de129ec1f11e06088c28445e6d3e12398fd26d4f', class: "nylas-participant-booking-calendars", part: "npbc" }, h("div", { key: '8cc19cc2004af110ccb7e95dc6a81bce4c5f8cad', class: "header", part: "npbc__header" }, h("h3", { key: '69a6b444ecb2d08b2cda29dc2ffc7613203d4052' }, "Book to this calendar"), h("p", { key: '580c521de914bb9ae9ebf5452b8cd519feee3043' }, "Select the calendar where you want to add event bookings.")), h("div", { key: '896ed1423c99e291572a17195af898a1225402e9', class: "content", part: "npbc__content" }, h("form", { key: '15f667fe9e21c29f64e8a6c79b3ec4c784b0eec4', ref: el => (this.bookingCalendarsFormRef = el) }, this.participantCalendars &&
+        return (h(Host, { key: 'b9e6684dcd0f1f65681af22cbfa0ee9f096aa3f2' }, h("div", { key: 'fae29a5cc07a0b8b46c36ec4763e3a220415d6d1', class: "nylas-participant-booking-calendars", part: "npbc" }, h("div", { key: 'b03cc0a390af4f2704a262fe8a6142df3db703f1', class: "header", part: "npbc__header" }, h("h3", { key: 'e2859aa78a9ad056290b3d567245d09dfbe4377c' }, "Book to this calendar"), h("p", { key: '0334ecd98e203d7625bef65ab1f5be413a67f2f5' }, "Select the calendar where you want to add event bookings.")), h("div", { key: '48c92054425564074e40d8e28e6cd98b77974083', class: "content", part: "npbc__content" }, h("form", { key: 'f4336a4077a262c45947b75630234806e99148d0', ref: el => (this.bookingCalendarsFormRef = el) }, this.participantCalendars &&
             Object.keys(this.participantCalendars).map((key, index) => {
                 const participant = this.selectedCalendars[key];
                 const participantCalendars = this.participantCalendars[key];
                 if (!participant || !participant.name)
                     return;
-                return (h("div", { class: "participant-container", part: "npbc__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npbc__participant-title" }, h("p", null, participant.name, "'s booking calendar"), h("div", { class: "participant-toggle", part: "npbc__participant-toggle--container" }, h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'}`, onClick: () => {
+                return (h("div", { class: "participant-container", part: "npbc__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npbc__participant-title" }, h("p", null, participant.name, "'s booking calendar"), h("div", { class: "participant-toggle", part: "npbc__participant-toggle-container" }, h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'}`, onClick: () => {
                         this.selectedCalendars[key].isOpen = !participant.isOpen;
                         this.selectedCalendars = { ...this.selectedCalendars };
                     } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-booking-calendar-picker", { key: key, name: `participant-booking-${key}`, calendars: participantCalendars, hideHeader: true, defaultBookingCalendar: this.participantDefaultSelectedCalendar[key] }))));

package/dist/components/nylas-participant-booking-calendars2.js.map

@@ -1 +1 @@
-{"file":"nylas-participant-booking-calendars2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-participant-booking-calendars/nylas-participant-booking-calendars.scss?tag=nylas-participant-booking-calendars&encapsulation=shadow","src/components/scheduler-editor/nylas-participant-booking-calendars/nylas-participant-booking-calendars.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-participant-booking-calendars {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n\n  .header {\n    padding: 1rem;\n\n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n  }\n\n  .content {\n    .participant-container {\n      padding-top: 12px;\n      border-top: 1px solid var(--nylas-base-200);\n\n      .participant-title {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 4px 16px 16px;\n\n        p {\n          margin: 0;\n        }\n\n        .participant-toggle {\n          display: flex;\n          gap: 24px;\n          align-items: center;\n\n          .chevron {\n            display: flex;\n            align-self: center;\n            cursor: pointer;\n\n            &:hover,\n            &:active {\n              color: var(--nylas-primary);\n            }\n\n            &.open {\n              transform: rotate(90deg);\n            }\n\n            &.closed {\n              transform: rotate(270deg);\n            }\n\n            &.disabled {\n              cursor: not-allowed;\n              color: var(--nylas-base-300);\n\n              &:hover {\n                color: var(--nylas-base-300);\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nnylas-booking-calendar-picker::part(nbcp) {\n  margin: 0;\n  border: none;\n  border-top: 1px solid var(--nylas-base-200);\n  border-top-right-radius: 0;\n  border-top-left-radius: 0;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { AdditionalParticipant, Calendar, Configuration, Participant } from '@nylas/core';\n\n/**\n * The `nylas-participant-booking-calendars` component is a form input for selecting calendars to check availability for participants.\n */\n@Component({\n  tag: 'nylas-participant-booking-calendars',\n  styleUrl: 'nylas-participant-booking-calendars.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasParticipantBookingCalendars {\n  @Element() host!: HTMLNylasParticipantBookingCalendarsElement;\n  private bookingCalendarsFormRef!: HTMLFormElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The name of the participants custom availability.\n   */\n  @Prop() name: string = 'participant-booking-calendars';\n\n  /**\n   * The participants selected in the add participants section.\n   */\n  @Prop() participants: Participant[] = this.selectedConfiguration?.participants || [];\n\n  /**\n   * The calendars to choose from for the organizer / logged in user.\n   */\n  @Prop() calendars?: Calendar[];\n\n  /**\n   * The participant options passed in the additionalParticipants prop\n   * from the nylas-scheduler-editor component.\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n\n  /**\n   * This event is fired when the participants custom availability changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The state to store the custom availability setting for participants.\n   */\n  @State() selectedCalendars: {\n    [key: string]: {\n      isOpen: boolean;\n      name: string;\n      calendar?: Calendar;\n    };\n  } = this.setParticipants(this.participants);\n\n  /**\n   * Participants calendar options.\n   */\n  @State() participantCalendars: {\n    [key: string]: Calendar[];\n  } = {};\n\n  /**\n   * The state to store the default selected calendars for each participant\n   */\n  @State() participantDefaultSelectedCalendar: {\n    [key: string]: string;\n  } = {};\n\n  // Watchers\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-participant-booking-calendars', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('calendars')\n  calendarsChangedHandler(newValue: Calendar[]) {\n    debug('nylas-participant-booking-calendars', 'calendarsChangedHandler', newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n  }\n\n  @Watch('participants')\n  participantsChangedHandler(newValue: Participant[]) {\n    debug('nylas-participant-booking-calendars', 'participantsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);\n  }\n\n  @Watch('participantOptions')\n  participantOptionsChangedHandler(newValue: AdditionalParticipant[]) {\n    debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-participant-booking-calendars', 'selectedConfigurationChangedHandler', newValue);\n    const participants = newValue?.participants || this.participants;\n    if (participants && participants.length > 0) {\n      this.selectedCalendars = this.setParticipants(participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(participants, this.participantOptions);\n    }\n  }\n\n  getParticipantCalendarOptions(addedParticipants: Participant[], availableParticipantOptions: AdditionalParticipant[] | undefined) {\n    // Get the participants from the availableParticipantOptions prop that are in the addedParticipants prop\n    const organizer = addedParticipants?.find(participant => participant.is_organizer);\n    const participantCalendars = {};\n    const showAdditionalParticipantBookingCalendars = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n    if (availableParticipantOptions && showAdditionalParticipantBookingCalendars) {\n      const participants = addedParticipants?.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));\n      const remainingParticipants = addedParticipants?.filter(\n        participant => !availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email),\n      );\n\n      // Get the calendar options for each participant with email as the key\n      participants?.forEach(participant => {\n        const participantOption = availableParticipantOptions?.find(participantOption => participantOption.email === participant.email);\n        if (!participantOption) return;\n        this.participantDefaultSelectedCalendar[participant.email] = participant.booking?.calendar_id ?? 'primary';\n        const calendars = participantOption.calendars ?? [];\n        participantCalendars[participant.email] = calendars;\n      });\n      // If it is round robin config, add the remaining participant calendars to the participantCalendars\n      // (Round-robin does not have an organizer, and we filtered out the participants not passed in the participantOptions prop,\n      // so we need to add the remaining participants calendars to the participantCalendars)\n      remainingParticipants?.forEach(participant => {\n        if (participant?.booking?.calendar_id) {\n          participantCalendars[participant.email] = this.calendars ?? [{ id: 'primary', name: participant.email }];\n          this.participantDefaultSelectedCalendar[participant.email] = participant?.booking?.calendar_id ?? 'primary';\n        }\n      });\n    }\n    // Add the organizer's calendars to the participantCalendars\n    if (organizer) {\n      participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];\n      this.participantDefaultSelectedCalendar[organizer.email] = organizer?.booking?.calendar_id ?? 'primary';\n    }\n    return participantCalendars;\n  }\n\n  // Lifecycle Methods\n  connectedCallback() {\n    debug('nylas-participant-booking-calendars', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-participant-booking-calendars', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-participant-booking-calendars', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-participant-booking-calendars', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);\n    }\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n    if (!name.startsWith('participant-booking-')) {\n      return;\n    }\n    // Validate the form\n    if (!this.bookingCalendarsFormRef.checkValidity()) {\n      this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');\n      return;\n    } else {\n      this.internals.setValidity({});\n    }\n\n    const key = name.split('participant-booking-')[1];\n    if (!this.selectedCalendars[key]) return;\n    this.selectedCalendars[key]['calendar'] = value;\n    this.selectedCalendars = { ...this.selectedCalendars };\n\n    const participantsCalendars = {};\n    Object.keys(this.selectedCalendars).forEach(key => {\n      participantsCalendars[key] = this.selectedCalendars[key]?.calendar;\n    });\n    this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });\n  }\n\n  setParticipants(participants: Participant[]) {\n    const selectedParticipants = {};\n    participants?.forEach(participant => {\n      if (participant?.booking?.calendar_id) {\n        const isOpen = participant.is_organizer ? true : false;\n        selectedParticipants[participant.email] = {\n          isOpen: isOpen,\n          calendar: participant.booking?.calendar_id || 'primary',\n          name: participant.name || participant.email,\n        };\n      }\n    });\n    return selectedParticipants;\n  }\n  @RegisterComponent<NylasParticipantBookingCalendars, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-participant-booking-calendars',\n    stateToProps: new Map([\n      ['schedulerConfig.additionalParticipants', 'participantOptions'],\n      ['schedulerConfig.calendars', 'calendars'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-participant-booking-calendars\" part=\"npbc\">\n          <div class=\"header\" part=\"npbc__header\">\n            <h3>Book to this calendar</h3>\n            <p>Select the calendar where you want to add event bookings.</p>\n          </div>\n          <div class=\"content\" part=\"npbc__content\">\n            <form ref={el => (this.bookingCalendarsFormRef = el as HTMLFormElement)}>\n              {this.participantCalendars &&\n                Object.keys(this.participantCalendars).map((key, index) => {\n                  const participant = this.selectedCalendars[key];\n                  const participantCalendars = this.participantCalendars[key];\n                  if (!participant || !participant.name) return;\n                  return (\n                    <div class=\"participant-container\" part=\"npbc__participant-container\" key={`participant-conatiner-${index}`}>\n                      <div class=\"participant-title\" part=\"npbc__participant-title\">\n                        <p>{participant.name}'s booking calendar</p>\n                        <div class=\"participant-toggle\" part=\"npbc__participant-toggle--container\">\n                          <span\n                            class={`chevron ${participant.isOpen ? 'open' : 'closed'}`}\n                            onClick={() => {\n                              this.selectedCalendars[key].isOpen = !participant.isOpen;\n                              this.selectedCalendars = { ...this.selectedCalendars };\n                            }}\n                          >\n                            <chevron-icon width=\"24\" height=\"24\" />\n                          </span>\n                        </div>\n                      </div>\n                      {participant.isOpen && (\n                        <nylas-booking-calendar-picker\n                          key={key}\n                          name={`participant-booking-${key}`}\n                          calendars={participantCalendars}\n                          hideHeader={true}\n                          defaultBookingCalendar={this.participantDefaultSelectedCalendar[key]}\n                        />\n                      )}\n                    </div>\n                  );\n                })}\n            </form>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-participant-booking-calendars2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-participant-booking-calendars/nylas-participant-booking-calendars.scss?tag=nylas-participant-booking-calendars&encapsulation=shadow","src/components/scheduler-editor/nylas-participant-booking-calendars/nylas-participant-booking-calendars.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-participant-booking-calendars {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n\n  .header {\n    padding: 1rem;\n\n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n  }\n\n  .content {\n    .participant-container {\n      padding-top: 12px;\n      border-top: 1px solid var(--nylas-base-200);\n\n      .participant-title {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 4px 16px 16px;\n\n        p {\n          margin: 0;\n        }\n\n        .participant-toggle {\n          display: flex;\n          gap: 24px;\n          align-items: center;\n\n          .chevron {\n            display: flex;\n            align-self: center;\n            cursor: pointer;\n\n            &:hover,\n            &:active {\n              color: var(--nylas-primary);\n            }\n\n            &.open {\n              transform: rotate(90deg);\n            }\n\n            &.closed {\n              transform: rotate(270deg);\n            }\n\n            &.disabled {\n              cursor: not-allowed;\n              color: var(--nylas-base-300);\n\n              &:hover {\n                color: var(--nylas-base-300);\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nnylas-booking-calendar-picker::part(nbcp) {\n  margin: 0;\n  border: none;\n  border-top: 1px solid var(--nylas-base-200);\n  border-top-right-radius: 0;\n  border-top-left-radius: 0;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { AdditionalParticipant, Calendar, Configuration, Participant } from '@nylas/core';\n\n/**\n * The `nylas-participant-booking-calendars` component is a form input for selecting calendars to check availability for participants.\n *\n * @part npbc - The participant booking calendars host.\n * @part npbc__header - The header.\n * @part npbc__content - The content.\n * @part npbc__participant-container - The participant container.\n * @part npbc__participant-title - The participant title.\n * @part npbc__participant-toggle-container - The participant toggle container.\n */\n@Component({\n  tag: 'nylas-participant-booking-calendars',\n  styleUrl: 'nylas-participant-booking-calendars.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasParticipantBookingCalendars {\n  @Element() host!: HTMLNylasParticipantBookingCalendarsElement;\n  private bookingCalendarsFormRef!: HTMLFormElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The name of the participants custom availability.\n   */\n  @Prop() name: string = 'participant-booking-calendars';\n\n  /**\n   * @standalone\n   * The participants selected in the add participants section.\n   */\n  @Prop() participants: Participant[] = this.selectedConfiguration?.participants || [];\n\n  /**\n   * @standalone\n   * The calendars to choose from for the organizer / logged in user.\n   */\n  @Prop() calendars?: Calendar[];\n\n  /**\n   * @standalone\n   * The participant options passed in the additionalParticipants prop\n   * from the nylas-scheduler-editor component.\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n\n  /**\n   * This event is fired when the participants custom availability changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The state to store the custom availability setting for participants.\n   */\n  @State() selectedCalendars: {\n    [key: string]: {\n      isOpen: boolean;\n      name: string;\n      calendar?: Calendar;\n    };\n  } = this.setParticipants(this.participants);\n\n  /**\n   * Participants calendar options.\n   */\n  @State() participantCalendars: {\n    [key: string]: Calendar[];\n  } = {};\n\n  /**\n   * The state to store the default selected calendars for each participant\n   */\n  @State() participantDefaultSelectedCalendar: {\n    [key: string]: string;\n  } = {};\n\n  // Watchers\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-participant-booking-calendars', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('calendars')\n  calendarsChangedHandler(newValue: Calendar[]) {\n    debug('nylas-participant-booking-calendars', 'calendarsChangedHandler', newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n  }\n\n  @Watch('participants')\n  participantsChangedHandler(newValue: Participant[]) {\n    debug('nylas-participant-booking-calendars', 'participantsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);\n  }\n\n  @Watch('participantOptions')\n  participantOptionsChangedHandler(newValue: AdditionalParticipant[]) {\n    debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-participant-booking-calendars', 'selectedConfigurationChangedHandler', newValue);\n    const participants = newValue?.participants || this.participants;\n    if (participants && participants.length > 0) {\n      this.selectedCalendars = this.setParticipants(participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(participants, this.participantOptions);\n    }\n  }\n\n  getParticipantCalendarOptions(addedParticipants: Participant[], availableParticipantOptions: AdditionalParticipant[] | undefined) {\n    // Get the participants from the availableParticipantOptions prop that are in the addedParticipants prop\n    const organizer = addedParticipants?.find(participant => participant.is_organizer);\n    const participantCalendars = {};\n    const showAdditionalParticipantBookingCalendars = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n    if (availableParticipantOptions && showAdditionalParticipantBookingCalendars) {\n      const participants = addedParticipants?.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));\n      const remainingParticipants = addedParticipants?.filter(\n        participant => !availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email),\n      );\n\n      // Get the calendar options for each participant with email as the key\n      participants?.forEach(participant => {\n        const participantOption = availableParticipantOptions?.find(participantOption => participantOption.email === participant.email);\n        if (!participantOption) return;\n        this.participantDefaultSelectedCalendar[participant.email] = participant.booking?.calendar_id ?? 'primary';\n        const calendars = participantOption.calendars ?? [];\n        participantCalendars[participant.email] = calendars;\n      });\n      // If it is round robin config, add the remaining participant calendars to the participantCalendars\n      // (Round-robin does not have an organizer, and we filtered out the participants not passed in the participantOptions prop,\n      // so we need to add the remaining participants calendars to the participantCalendars)\n      remainingParticipants?.forEach(participant => {\n        if (participant?.booking?.calendar_id) {\n          participantCalendars[participant.email] = this.calendars ?? [{ id: 'primary', name: participant.email }];\n          this.participantDefaultSelectedCalendar[participant.email] = participant?.booking?.calendar_id ?? 'primary';\n        }\n      });\n    }\n    // Add the organizer's calendars to the participantCalendars\n    if (organizer) {\n      participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];\n      this.participantDefaultSelectedCalendar[organizer.email] = organizer?.booking?.calendar_id ?? 'primary';\n    }\n    return participantCalendars;\n  }\n\n  // Lifecycle Methods\n  connectedCallback() {\n    debug('nylas-participant-booking-calendars', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-participant-booking-calendars', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-participant-booking-calendars', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-participant-booking-calendars', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);\n    } else {\n      this.selectedCalendars = this.setParticipants(this.participants);\n      this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n    }\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n    if (!name.startsWith('participant-booking-')) {\n      return;\n    }\n    // Validate the form\n    if (!this.bookingCalendarsFormRef.checkValidity()) {\n      this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');\n      return;\n    } else {\n      this.internals.setValidity({});\n    }\n\n    const key = name.split('participant-booking-')[1];\n    if (!this.selectedCalendars[key]) return;\n    this.selectedCalendars[key]['calendar'] = value;\n    this.selectedCalendars = { ...this.selectedCalendars };\n\n    const participantsCalendars = {};\n    Object.keys(this.selectedCalendars).forEach(key => {\n      participantsCalendars[key] = this.selectedCalendars[key]?.calendar;\n    });\n    this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });\n  }\n\n  setParticipants(participants: Participant[]) {\n    const selectedParticipants = {};\n    participants?.forEach(participant => {\n      if (participant?.booking?.calendar_id) {\n        const isOpen = participant.is_organizer ? true : false;\n        selectedParticipants[participant.email] = {\n          isOpen: isOpen,\n          calendar: participant.booking?.calendar_id || 'primary',\n          name: participant.name || participant.email,\n        };\n      }\n    });\n    return selectedParticipants;\n  }\n  @RegisterComponent<NylasParticipantBookingCalendars, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-participant-booking-calendars',\n    stateToProps: new Map([\n      ['schedulerConfig.additionalParticipants', 'participantOptions'],\n      ['schedulerConfig.calendars', 'calendars'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-participant-booking-calendars\" part=\"npbc\">\n          <div class=\"header\" part=\"npbc__header\">\n            <h3>Book to this calendar</h3>\n            <p>Select the calendar where you want to add event bookings.</p>\n          </div>\n          <div class=\"content\" part=\"npbc__content\">\n            <form ref={el => (this.bookingCalendarsFormRef = el as HTMLFormElement)}>\n              {this.participantCalendars &&\n                Object.keys(this.participantCalendars).map((key, index) => {\n                  const participant = this.selectedCalendars[key];\n                  const participantCalendars = this.participantCalendars[key];\n\n                  if (!participant || !participant.name) return;\n                  return (\n                    <div class=\"participant-container\" part=\"npbc__participant-container\" key={`participant-conatiner-${index}`}>\n                      <div class=\"participant-title\" part=\"npbc__participant-title\">\n                        <p>{participant.name}'s booking calendar</p>\n                        <div class=\"participant-toggle\" part=\"npbc__participant-toggle-container\">\n                          <span\n                            class={`chevron ${participant.isOpen ? 'open' : 'closed'}`}\n                            onClick={() => {\n                              this.selectedCalendars[key].isOpen = !participant.isOpen;\n                              this.selectedCalendars = { ...this.selectedCalendars };\n                            }}\n                          >\n                            <chevron-icon width=\"24\" height=\"24\" />\n                          </span>\n                        </div>\n                      </div>\n                      {participant.isOpen && (\n                        <nylas-booking-calendar-picker\n                          key={key}\n                          name={`participant-booking-${key}`}\n                          calendars={participantCalendars}\n                          hideHeader={true}\n                          defaultBookingCalendar={this.participantDefaultSelectedCalendar[key]}\n                        />\n                      )}\n                    </div>\n                  );\n                })}\n            </form>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-participants-custom-availability2.js

@@ -123,12 +123,13 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
                 openHours: participant.availability?.open_hours || [],
                 name: participant.name || participant.email,
                 availability: participant.availability,
+                timezone: participant.timezone,
             };
         });
         return selectedParticipants;
     }
     render() {
-        return (h(Host, { key: '0fcb52a9bf85515bdc30024260451dc16a303cd0' }, h("div", { key: '51d1389d4d2102729df48d415424328e12d9b14c', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: '15ac6b389076142d270ef9b2fd9cad3258850f46', class: "header", part: "npca__header" }, h("h3", { key: 'd23c27337b6603b42e686ecd90a362dced00e56a' }, "Participant open hours"), h("p", { key: '19371926bd6e02e8e6bc64a0946b67fb3179c247' }, "If not set, Nylas uses the default open hours for this participant.")), h("div", { key: '644998a32e12bed450fbab9c45fe00ff62ddf7f0', class: "content", part: "npca__content" }, h("form", { key: '7c66c87d7842be37b6fc6f57ff3127a81421cc47', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
+        return (h(Host, { key: '6f9b3c61650e7dd61b6e548fe008be57494b5e89' }, h("div", { key: '256e2e41f0849180ffdb5c67c66dffd9c1ce031a', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: 'c3e1aefbb7872b233938aefeb22a13169f194864', class: "header", part: "npca__header" }, h("h3", { key: '8f7af6fa1435b2530fb5d179db1357e765270865' }, "Participant open hours"), h("p", { key: 'ff146ecd72673369a01773b2f00e81264654acf5' }, "If not set, Nylas uses the default open hours for this participant.")), h("div", { key: '52476fb7c7dc19935d92883ebd16f6af6746f8b5', class: "content", part: "npca__content" }, h("form", { key: '2b2fb94eb40a92b0e3326c9681051f61bbe4986e', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
             const participant = this.selectedParticipants[key];
             if (!participant || !participant.name || !participant.availability)
                 return;
@@ -137,7 +138,7 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
                         return;
                     this.selectedParticipants[key].isOpen = !participant.isOpen;
                     this.selectedParticipants = { ...this.selectedParticipants };
-                } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participant.openHours, defaultTimezone: participant.openHours?.[0]?.timezone, hideHeader: true }))));
+                } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participant.openHours, defaultTimezone: participant.timezone, hideHeader: true }))));
         }))))));
     }
     static get formAssociated() { return true; }