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

package/dist/components/nylas-min-booking-notice2.js.map

@@ -1 +1 @@
-{"file":"nylas-min-booking-notice2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-min-booking-notice/nylas-min-booking-notice.scss?tag=nylas-min-booking-notice&encapsulation=shadow","src/components/scheduler-editor/nylas-min-booking-notice/nylas-min-booking-notice.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-min-booking-notice {\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--nylas-font-family);\n  @media #{$mobile} {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n  border: none;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-min-booking-notice` component is a form input for the minimum period of notice (minutes) that a guest must\n * provide to book an event.\n *\n * @part nmbn - The minimum booking notice container\n * @part nmbn__number-dropdown - The number dropdown container\n * @part nmbn__number-dropdown-button - The number dropdown button\n * @part nmbn__number-dropdown-content - The number dropdown content\n * @part nmbn__period-dropdown - The period dropdown container\n * @part nmbn__period-dropdown-button - The period dropdown button\n * @part nmbn__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-min-booking-notice',\n  styleUrl: 'nylas-min-booking-notice.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasMinBookingNotice {\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The minimum booking notice (minutes) stored in the configuration\n   */\n  @Prop() minBookingNotice?: number;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n  /**\n   * The host element <nylas-min-booking-notice>\n   */\n  @Element() host!: HTMLElement;\n  /**\n   * The name of the min booking notice input.\n   */\n  @Prop() name: string = 'min-booking-notice';\n\n  /**\n   * The selected number of minutes for the min booking notice.\n   */\n  @State() selectedNumber: number = 1;\n  /**\n   * The selected period for the min booking notice.\n   */\n  @State() selectedPeriod: string = 'hour';\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-min-booking-notice', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const minBookingNotice = newVal?.scheduler?.min_booking_notice;\n    if (minBookingNotice) {\n      this.updateNumberAndPeriodFromMinutes(minBookingNotice);\n    }\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    this.updateNumberAndPeriodFromMinutes(newValue);\n  }\n\n  /**\n   * This event is fired when the value of the min booking notice changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-min-booking-notice', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-min-booking-notice', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-min-booking-notice', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.minBookingNotice ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.minBookingNotice?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-min-booking-notice', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let totalMinutes;\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (period === 'minute') {\n      totalMinutes = number;\n    } else if (period === 'hour') {\n      totalMinutes = number * minutesInHour;\n    } else if (period === 'day') {\n      totalMinutes = number * minutesInDay;\n    } else if (period === 'week') {\n      totalMinutes = number * minutesInWeek;\n    } else if (period === 'month') {\n      totalMinutes = number * minutesInMonth;\n    } else {\n      totalMinutes = 0;\n    }\n    this.valueChanged.emit({ value: totalMinutes, name: 'minBookingNotice' });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(totalMinutes.toString(), this.name);\n  }\n\n  private updateNumberAndPeriodFromMinutes(minutes: number): void {\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n    let number, period;\n    if (minutes >= minutesInMonth) {\n      number = Math.floor(minutes / minutesInMonth);\n      period = 'month';\n    } else if (minutes >= minutesInWeek) {\n      number = Math.floor(minutes / minutesInWeek);\n      period = 'week';\n    } else if (minutes >= minutesInDay) {\n      number = Math.floor(minutes / minutesInDay);\n      period = 'day';\n    } else if (minutes >= minutesInHour) {\n      number = Math.floor(minutes / minutesInHour);\n      period = 'hour';\n    } else {\n      number = minutes;\n      period = 'minute';\n    }\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @RegisterComponent<NylasMinBookingNotice, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-min-booking-notice',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-min-booking-notice\" part=\"nmbn\">\n          <label>\n            Minimum booking notice\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">The minimum amount of time in the future for planning the event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"min-booking-notice\"\n            exportparts=\"tps__number-dropdown: nmbn__number-dropdown, tps__number-dropdown-button: nmbn__number-dropdown-button, tps__number-dropdown-content: nmbn__number-dropdown-content, tps__period-dropdown: nmbn__period-dropdown, tps__period-dropdown-button: nmbn__period-dropdown-button, tps__period-dropdown-content: nmbn__period-dropdown-content\"\n            timePeriods={['minute', 'hour', 'day', 'week']}\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-min-booking-notice2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-min-booking-notice/nylas-min-booking-notice.scss?tag=nylas-min-booking-notice&encapsulation=shadow","src/components/scheduler-editor/nylas-min-booking-notice/nylas-min-booking-notice.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-min-booking-notice {\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--nylas-font-family);\n  @media #{$mobile} {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n  border: none;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-min-booking-notice` component is a form input for the minimum period of notice (minutes) that a guest must\n * provide to book an event.\n *\n * @part nmbn - The minimum booking notice container\n * @part nmbn__number-dropdown - The number dropdown container\n * @part nmbn__number-dropdown-button - The number dropdown button\n * @part nmbn__number-dropdown-content - The number dropdown content\n * @part nmbn__period-dropdown - The period dropdown container\n * @part nmbn__period-dropdown-button - The period dropdown button\n * @part nmbn__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-min-booking-notice',\n  styleUrl: 'nylas-min-booking-notice.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasMinBookingNotice {\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The minimum booking notice (minutes) stored in the configuration\n   */\n  @Prop() minBookingNotice?: number;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n  /**\n   * The host element <nylas-min-booking-notice>\n   */\n  @Element() host!: HTMLElement;\n  /**\n   * The name of the min booking notice input.\n   */\n  @Prop() name: string = 'min-booking-notice';\n\n  /**\n   * The selected number of minutes for the min booking notice.\n   */\n  @State() selectedNumber: number = 1;\n  /**\n   * The selected period for the min booking notice.\n   */\n  @State() selectedPeriod: string = 'hour';\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-min-booking-notice', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const minBookingNotice = newVal?.scheduler?.min_booking_notice;\n    if (minBookingNotice) {\n      this.updateNumberAndPeriodFromMinutes(minBookingNotice);\n    }\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    this.updateNumberAndPeriodFromMinutes(newValue);\n  }\n\n  /**\n   * This event is fired when the value of the min booking notice changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-min-booking-notice', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-min-booking-notice', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-min-booking-notice', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.minBookingNotice ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.minBookingNotice?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-min-booking-notice', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let totalMinutes;\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (period === 'minute') {\n      totalMinutes = number;\n    } else if (period === 'hour') {\n      totalMinutes = number * minutesInHour;\n    } else if (period === 'day') {\n      totalMinutes = number * minutesInDay;\n    } else if (period === 'week') {\n      totalMinutes = number * minutesInWeek;\n    } else if (period === 'month') {\n      totalMinutes = number * minutesInMonth;\n    } else {\n      totalMinutes = 0;\n    }\n    this.valueChanged.emit({ value: totalMinutes, name: 'minBookingNotice' });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(totalMinutes.toString(), this.name);\n  }\n\n  private updateNumberAndPeriodFromMinutes(minutes: number): void {\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n    let number, period;\n    if (minutes >= minutesInMonth) {\n      number = Math.floor(minutes / minutesInMonth);\n      period = 'month';\n    } else if (minutes >= minutesInWeek) {\n      number = Math.floor(minutes / minutesInWeek);\n      period = 'week';\n    } else if (minutes >= minutesInDay) {\n      number = Math.floor(minutes / minutesInDay);\n      period = 'day';\n    } else if (minutes >= minutesInHour) {\n      number = Math.floor(minutes / minutesInHour);\n      period = 'hour';\n    } else {\n      number = minutes;\n      period = 'minute';\n    }\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @RegisterComponent<NylasMinBookingNotice, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-min-booking-notice',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-min-booking-notice\" part=\"nmbn\">\n          <label>\n            Minimum booking notice\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">The minimum amount of time in the future that a new booking can be made.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"min-booking-notice\"\n            exportparts=\"tps__number-dropdown: nmbn__number-dropdown, tps__number-dropdown-button: nmbn__number-dropdown-button, tps__number-dropdown-content: nmbn__number-dropdown-content, tps__period-dropdown: nmbn__period-dropdown, tps__period-dropdown-button: nmbn__period-dropdown-button, tps__period-dropdown-content: nmbn__period-dropdown-content\"\n            timePeriods={['minute', 'hour', 'day', 'week']}\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-min-cancellation-notice2.js

@@ -131,7 +131,7 @@ const NylasMinCancellationNotice = proxyCustomElement(class NylasMinCancellation
         this.selectedPeriod = period;
     }
     render() {
-        return (h(Host, { key: '6c14649f767cebe544dd5fc3039e4bace051f759' }, h("div", { key: 'e6b0965bb6bc49b6e7ede7a4c2b2c2056a212c96', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '1998d897f882c0783e2012ca85b651c43517ba64' }, "Minimum cancellation notice", h("span", { key: 'eccae26b18bd269648d1bce2affae5d3e469ea02', class: "label-icon" }, h("tooltip-component", { key: '50caa33903115b0da9da25ed3a18cbbf8a4df353' }, h("info-icon", { key: '8b466b236668439cbca8e250d60524b69ce4f7f3', slot: "tooltip-icon" }), h("span", { key: 'c4c9d73798c85d317aa1f89a2b0f1c66c9ca41d2', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: 'bb4c0a9ecfb9bc9ebf88b229c871abd4b8427385', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: 'a459f2a93a07bc2b6a6e8bbf8084754906ac6e8b' }, h("div", { key: '9a640710d97f00b1c4f45a1329c0ab2e93326517', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '32af2f1e14a05c941c4c63182446ef8dcbf5fe33' }, "Minimum cancellation notice", h("span", { key: 'a6962e01d36d950010c52122a5765cc00dac3c6d', class: "label-icon" }, h("tooltip-component", { key: '08db7c4b05e1c4f6587765bd4a0a2ade19e40865' }, h("info-icon", { key: '0c48bf5cc04d12bca21974193c091bb95ddc5c61', slot: "tooltip-icon" }), h("span", { key: 'b8ebeb7f6e00ff52250d8462ce19f35e4ef2a070', slot: "tooltip-content" }, "The minimum amount of time required to cancel a booking.")))), h("time-period-selector", { key: 'c14474ef1b27ba397d6d5636e3b17b479a816cde', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/nylas-min-cancellation-notice2.js.map

@@ -1 +1 @@
-{"file":"nylas-min-cancellation-notice2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.scss?tag=nylas-min-cancellation-notice&encapsulation=shadow","src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-min-cancellation-notice {\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--nylas-font-family);\n  @media #{$mobile} {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n  border: none;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-min-cancellation-notice` component is a form input for the minimum period of notice (minutes) that a guest must\n * provide to cancel a booked event.\n *\n * @part nmcn - The minimum cancellation notice container\n * @part nmcn__number-dropdown - The number dropdown container\n * @part nmcn__number-dropdown-button - The number dropdown button\n * @part nmcn__number-dropdown-content - The number dropdown content\n * @part nmcn__period-dropdown - The period dropdown container\n * @part nmcn__period-dropdown-button - The period dropdown button\n * @part nmcn__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-min-cancellation-notice',\n  styleUrl: 'nylas-min-cancellation-notice.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasMinCancellationNotice {\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The minimum cancellation notice (minutes) stored in the configuration\n   */\n  @Prop() minCancellationNotice?: number;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n  /**\n   * The host element <nylas-min-cancellation-notice>\n   */\n  @Element() host!: HTMLElement;\n  /**\n   * The name of the min cancellation notice input.\n   */\n  @Prop() name: string = 'min-cancellation-notice';\n\n  /**\n   * The selected number of minutes for the min cancellation notice.\n   */\n  @State() selectedNumber: number = 1;\n  /**\n   * The selected period for the min cancellation notice.\n   */\n  @State() selectedPeriod: string = 'day';\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-min-cancellation-notice', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const minCancellationNotice = newVal?.scheduler?.min_cancellation_notice;\n    if (minCancellationNotice) {\n      this.updateNumberAndPeriodFromMinutes(minCancellationNotice);\n    }\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    this.updateNumberAndPeriodFromMinutes(newValue);\n  }\n\n  /**\n   * This event is fired when the value of the min cancellation notice changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-min-cancellation-notice', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-min-cancellation-notice', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-min-cancellation-notice', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.minCancellationNotice ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.minCancellationNotice?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-min-cancellation-notice', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let totalMinutes;\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (period === 'minute') {\n      totalMinutes = number;\n    } else if (period === 'hour') {\n      totalMinutes = number * minutesInHour;\n    } else if (period === 'day') {\n      totalMinutes = number * minutesInDay;\n    } else if (period === 'week') {\n      totalMinutes = number * minutesInWeek;\n    } else if (period === 'month') {\n      totalMinutes = number * minutesInMonth;\n    } else {\n      totalMinutes = 0;\n    }\n    this.valueChanged.emit({ value: totalMinutes, name: 'minCancellationNotice' });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(totalMinutes.toString(), this.name);\n  }\n\n  private updateNumberAndPeriodFromMinutes(minutes: number): void {\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n    let number, period;\n    if (minutes >= minutesInMonth) {\n      number = Math.floor(minutes / minutesInMonth);\n      period = 'month';\n    } else if (minutes >= minutesInWeek) {\n      number = Math.floor(minutes / minutesInWeek);\n      period = 'week';\n    } else if (minutes >= minutesInDay) {\n      number = Math.floor(minutes / minutesInDay);\n      period = 'day';\n    } else if (minutes >= minutesInHour) {\n      number = Math.floor(minutes / minutesInHour);\n      period = 'hour';\n    } else {\n      number = minutes;\n      period = 'minute';\n    }\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @RegisterComponent<NylasMinCancellationNotice, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-min-cancellation-notice',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-min-cancellation-notice\" part=\"nmcn\">\n          <label>\n            Minimum cancellation notice\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set the minimum amount of time required to cancel an event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"min-cancellation-notice\"\n            exportparts=\"tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content\"\n            timePeriods={['minute', 'hour', 'day', 'week']}\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-min-cancellation-notice2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.scss?tag=nylas-min-cancellation-notice&encapsulation=shadow","src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  @include default-css-variables;\n}\n\n.nylas-min-cancellation-notice {\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--nylas-font-family);\n  @media #{$mobile} {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%; /* 21px */\n    span.label-icon {\n      margin-left: 4px;\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n  border: none;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-min-cancellation-notice` component is a form input for the minimum period of notice (minutes) that a guest must\n * provide to cancel a booked event.\n *\n * @part nmcn - The minimum cancellation notice container\n * @part nmcn__number-dropdown - The number dropdown container\n * @part nmcn__number-dropdown-button - The number dropdown button\n * @part nmcn__number-dropdown-content - The number dropdown content\n * @part nmcn__period-dropdown - The period dropdown container\n * @part nmcn__period-dropdown-button - The period dropdown button\n * @part nmcn__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-min-cancellation-notice',\n  styleUrl: 'nylas-min-cancellation-notice.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasMinCancellationNotice {\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The minimum cancellation notice (minutes) stored in the configuration\n   */\n  @Prop() minCancellationNotice?: number;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n  /**\n   * The host element <nylas-min-cancellation-notice>\n   */\n  @Element() host!: HTMLElement;\n  /**\n   * The name of the min cancellation notice input.\n   */\n  @Prop() name: string = 'min-cancellation-notice';\n\n  /**\n   * The selected number of minutes for the min cancellation notice.\n   */\n  @State() selectedNumber: number = 1;\n  /**\n   * The selected period for the min cancellation notice.\n   */\n  @State() selectedPeriod: string = 'day';\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-min-cancellation-notice', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    const minCancellationNotice = newVal?.scheduler?.min_cancellation_notice;\n    if (minCancellationNotice) {\n      this.updateNumberAndPeriodFromMinutes(minCancellationNotice);\n    }\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    this.updateNumberAndPeriodFromMinutes(newValue);\n  }\n\n  /**\n   * This event is fired when the value of the min cancellation notice changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-min-cancellation-notice', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-min-cancellation-notice', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-min-cancellation-notice', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.minCancellationNotice ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.minCancellationNotice?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-min-cancellation-notice', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let totalMinutes;\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (period === 'minute') {\n      totalMinutes = number;\n    } else if (period === 'hour') {\n      totalMinutes = number * minutesInHour;\n    } else if (period === 'day') {\n      totalMinutes = number * minutesInDay;\n    } else if (period === 'week') {\n      totalMinutes = number * minutesInWeek;\n    } else if (period === 'month') {\n      totalMinutes = number * minutesInMonth;\n    } else {\n      totalMinutes = 0;\n    }\n    this.valueChanged.emit({ value: totalMinutes, name: 'minCancellationNotice' });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(totalMinutes.toString(), this.name);\n  }\n\n  private updateNumberAndPeriodFromMinutes(minutes: number): void {\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n    let number, period;\n    if (minutes >= minutesInMonth) {\n      number = Math.floor(minutes / minutesInMonth);\n      period = 'month';\n    } else if (minutes >= minutesInWeek) {\n      number = Math.floor(minutes / minutesInWeek);\n      period = 'week';\n    } else if (minutes >= minutesInDay) {\n      number = Math.floor(minutes / minutesInDay);\n      period = 'day';\n    } else if (minutes >= minutesInHour) {\n      number = Math.floor(minutes / minutesInHour);\n      period = 'hour';\n    } else {\n      number = minutes;\n      period = 'minute';\n    }\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @RegisterComponent<NylasMinCancellationNotice, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-min-cancellation-notice',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-min-cancellation-notice\" part=\"nmcn\">\n          <label>\n            Minimum cancellation notice\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">The minimum amount of time required to cancel a booking.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"min-cancellation-notice\"\n            exportparts=\"tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content\"\n            timePeriods={['minute', 'hour', 'day', 'week']}\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-notification2.js

@@ -56,7 +56,7 @@ const NylasNotification = proxyCustomElement(class NylasNotification extends HTM
         this.notifications = this.notifications.filter(notif => notif.id !== id);
     }
     render() {
-        return (h(Host, { key: 'b86593ead0279b9e2213c2554d1153379470880e' }, h(Fragment, { key: '860f23f3c6a0636b408d56806b11129c0a697418' }, this.notifications.map(notif => (h("div", { class: `notif ${notif.type}`, key: notif.id }, h("div", { class: "content" }, h("span", { class: `icon ${notif.type}` }, (notif.type === 'error' || notif.type === 'warning') && h("warning-icon", null)), h("span", { class: "message" }, h("span", { class: "title" }, notif.title), notif.description && h("span", { class: "description" }, notif.description))), h("button", { class: "dismiss-btn", onClick: () => this.dismissNotification(notif.id) }, h("close-icon", null))))), h("slot", { key: '6125314e051684b396d99a3c8bb9ba99392f2729' }))));
+        return (h(Host, { key: '8b65d6792e310fc31d9019fd87ec0bcff83369a1' }, h(Fragment, { key: '03e4f247931a3a363a575c6fd5364d40d9616c52' }, this.notifications.map(notif => (h("div", { class: `notif ${notif.type}`, key: notif.id }, h("div", { class: "content" }, h("span", { class: `icon ${notif.type}` }, (notif.type === 'error' || notif.type === 'warning') && h("warning-icon", null)), h("span", { class: "message" }, h("span", { class: "title" }, notif.title), notif.description && h("span", { class: "description" }, notif.description))), h("button", { class: "dismiss-btn", onClick: () => this.dismissNotification(notif.id) }, h("close-icon", null))))), h("slot", { key: '8af04e4b9c1d6e143496a8bd9c757b059682de9a' }))));
     }
     static get style() { return NylasNotificationStyle0; }
 }, [1, "nylas-notification", {

package/dist/components/nylas-participant-booking-calendars.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NylasParticipantBookingCalendars extends Components.NylasParticipantBookingCalendars, HTMLElement {}
+export const NylasParticipantBookingCalendars: {
+    prototype: NylasParticipantBookingCalendars;
+    new (): NylasParticipantBookingCalendars;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { N as NylasParticipantBookingCalendars$1, d as defineCustomElement$1 } from './nylas-participant-booking-calendars2.js';
+
+const NylasParticipantBookingCalendars = NylasParticipantBookingCalendars$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NylasParticipantBookingCalendars, defineCustomElement };
+
+//# sourceMappingURL=nylas-participant-booking-calendars.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-participant-booking-calendars.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -0,0 +1,237 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { a as debug } from './utils.js';
+import { d as defineCustomElement$6 } from './chevron.js';
+import { d as defineCustomElement$5 } from './info.js';
+import { d as defineCustomElement$4 } from './nylas-booking-calendar-picker2.js';
+import { d as defineCustomElement$3 } from './search.js';
+import { d as defineCustomElement$2 } from './select-dropdown2.js';
+import { d as defineCustomElement$1 } from './toolitp-component.js';
+
+const nylasParticipantBookingCalendarsCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.nylas-participant-booking-calendars{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-participant-booking-calendars .header{padding:1rem}.nylas-participant-booking-calendars .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-participant-booking-calendars .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left;display:flex;align-items:center;gap:4px}.nylas-participant-booking-calendars .content .participant-container{padding-top:12px;border-top:1px solid var(--nylas-base-200)}.nylas-participant-booking-calendars .content .participant-container .participant-title{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 16px}.nylas-participant-booking-calendars .content .participant-container .participant-title p{margin:0}.nylas-participant-booking-calendars .content .participant-container .participant-title .participant-toggle{display:flex;gap:24px;align-items:center}.nylas-participant-booking-calendars .content .participant-container .participant-title .participant-toggle .chevron{display:flex;align-self:center;cursor:pointer}.nylas-participant-booking-calendars .content .participant-container .participant-title .participant-toggle .chevron:hover,.nylas-participant-booking-calendars .content .participant-container .participant-title .participant-toggle .chevron:active{color:var(--nylas-primary)}.nylas-participant-booking-calendars .content .participant-container .participant-title .participant-toggle .chevron.open{transform:rotate(90deg)}.nylas-participant-booking-calendars .content .participant-container .participant-title .participant-toggle .chevron.closed{transform:rotate(270deg)}.nylas-participant-booking-calendars .content .participant-container .participant-title .participant-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.nylas-participant-booking-calendars .content .participant-container .participant-title .participant-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}nylas-booking-calendar-picker::part(nbcp){margin:0;border:none;border-top:1px solid var(--nylas-base-200);border-top-right-radius:0;border-top-left-radius:0}";
+const NylasParticipantBookingCalendarsStyle0 = nylasParticipantBookingCalendarsCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasParticipantBookingCalendars = proxyCustomElement(class NylasParticipantBookingCalendars extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.internals = this.attachInternals();
+        this.selectedConfiguration = undefined;
+        this.name = 'participant-booking-calendars';
+        this.participants = undefined;
+        this.calendars = undefined;
+        this.participantOptions = undefined;
+        this.selectedCalendars = this.setParticipants(this.participants);
+        this.participantCalendars = {};
+        this.participantDefaultSelectedCalendar = {};
+    }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-participant-booking-calendars', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    calendarsChangedHandler(newValue) {
+        debug('nylas-participant-booking-calendars', 'calendarsChangedHandler', newValue);
+        this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);
+    }
+    participantsChangedHandler(newValue) {
+        debug('nylas-participant-booking-calendars', 'participantsChangedHandler', newValue);
+        this.selectedCalendars = this.setParticipants(newValue);
+        this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);
+    }
+    participantOptionsChangedHandler(newValue) {
+        debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);
+        this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);
+    }
+    selectedConfigurationChangedHandler(newValue) {
+        debug('nylas-participant-booking-calendars', 'selectedConfigurationChangedHandler', newValue);
+        this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);
+    }
+    getParticipantCalendarOptions(addedParticipants, availableParticipantOptions) {
+        const organizer = this.participants.find(participant => participant.is_organizer);
+        const participantCalendars = {};
+        const showAdditionalParticipantBookingCalendars = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';
+        if (availableParticipantOptions && showAdditionalParticipantBookingCalendars) {
+            const participants = addedParticipants.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));
+            participants.forEach(participant => {
+                const participantOption = availableParticipantOptions.find(participantOption => participantOption.email === participant.email);
+                if (!participantOption)
+                    return;
+                this.participantDefaultSelectedCalendar[participant.email] = participant.booking?.calendar_id ?? 'primary';
+                const calendars = participantOption.calendars ?? [];
+                participantCalendars[participant.email] = calendars;
+            });
+        }
+        if (organizer) {
+            participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];
+            this.participantDefaultSelectedCalendar[organizer.email] = organizer?.booking?.calendar_id ?? 'primary';
+        }
+        return participantCalendars;
+    }
+    getUniqueCalendars(calendars) {
+        return calendars.filter((calendar, index, self) => self.findIndex(c => c.id === calendar.id) === index);
+    }
+    connectedCallback() {
+        debug('nylas-participant-booking-calendars', 'connectedCallback');
+    }
+    disconnectedCallback() {
+        debug('nylas-participant-booking-calendars', 'disconnectedCallback');
+    }
+    componentWillLoad() {
+        debug('nylas-participant-booking-calendars', 'componentWillLoad');
+    }
+    componentDidLoad() {
+        debug('nylas-participant-booking-calendars', 'componentDidLoad');
+    }
+    handleValueChanged(event) {
+        debug('[nylas-editor-tabs]', 'handleValueChanged', event);
+        const { name, value } = event.detail;
+        if (!name.startsWith('participant-booking-')) {
+            return;
+        }
+        if (!this.bookingCalendarsFormRef.checkValidity()) {
+            this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');
+            return;
+        }
+        else {
+            this.internals.setValidity({});
+        }
+        const key = name.split('participant-booking-')[1];
+        if (!this.selectedCalendars[key])
+            return;
+        this.selectedCalendars[key]['calendar'] = value;
+        this.selectedCalendars = { ...this.selectedCalendars };
+        const participantsCalendars = {};
+        this.participants.forEach(participant => {
+            participantsCalendars[participant.email] = this.selectedCalendars[participant.email].calendar;
+        });
+        this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);
+        this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });
+    }
+    setParticipants(participants) {
+        const selectedParticipants = {};
+        participants.forEach(participant => {
+            const isOpen = participant.is_organizer ? true : false;
+            selectedParticipants[participant.email] = {
+                isOpen: isOpen,
+                calendar: participant.booking?.calendar_id || 'primary',
+                name: participant.name || participant.email,
+            };
+        });
+        return selectedParticipants;
+    }
+    render() {
+        return (h(Host, { key: '97b846a061a8b0b08b05ff6df3ef2bdf3621ca51' }, h("div", { key: '23fcc1b5fe6e582ef7c9c5038db429b0f8b3b44e', class: "nylas-participant-booking-calendars", part: "npbc" }, h("div", { key: 'fcc1490fb2afd2215e06249cfdb0b79c501a8da3', class: "header", part: "npbc__header" }, h("h3", { key: '6f3c5b61fbd366b30fd5ea58bc8b821ccb776e70' }, "Calendar booking"), h("p", { key: '6ed622e8b5cea3fd8855af816734a5735da1383c' }, "Select the calendar where you want to add event bookings.", h("tooltip-component", { key: '4af3e0f1a0c41f6c2ab117c478ccd8e02e597546' }, h("info-icon", { key: 'e6968611366f843c5a44c24344a87a1138738953', slot: "tooltip-icon" }), h("span", { key: 'c6ce8f91a5dc109f9551dd3873c03275c2334b2e', slot: "tooltip-content" }, "The calendar will be used to create events.")))), h("div", { key: '3d8e49986a680e466321af273b922a059f7937a0', class: "content", part: "npbc__content" }, h("form", { key: '39550f7fc12cff3f1e1fa19531d18cef5a2d2c9d', ref: el => (this.bookingCalendarsFormRef = el) }, 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, "Set ", 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] }))));
+        }))))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "name": ["elementNameChangedHandler"],
+        "calendars": ["calendarsChangedHandler"],
+        "participants": ["participantsChangedHandler"],
+        "participantOptions": ["participantOptionsChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+    }; }
+    static get style() { return NylasParticipantBookingCalendarsStyle0; }
+}, [65, "nylas-participant-booking-calendars", {
+        "selectedConfiguration": [16],
+        "name": [1],
+        "participants": [16],
+        "calendars": [16],
+        "participantOptions": [16],
+        "selectedCalendars": [32],
+        "participantCalendars": [32],
+        "participantDefaultSelectedCalendar": [32]
+    }, [[0, "valueChanged", "handleValueChanged"]], {
+        "name": ["elementNameChangedHandler"],
+        "calendars": ["calendarsChangedHandler"],
+        "participants": ["participantsChangedHandler"],
+        "participantOptions": ["participantOptionsChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-participant-booking-calendars',
+        stateToProps: new Map([
+            ['schedulerConfig.additionalParticipants', 'participantOptions'],
+            ['schedulerConfig.calendars', 'calendars'],
+            ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
+        ]),
+        eventToProps: {},
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasParticipantBookingCalendars.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-participant-booking-calendars", "chevron-icon", "info-icon", "nylas-booking-calendar-picker", "search-icon", "select-dropdown", "tooltip-component"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-participant-booking-calendars":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasParticipantBookingCalendars);
+            }
+            break;
+        case "chevron-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "info-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "nylas-booking-calendar-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "search-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "select-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "tooltip-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasParticipantBookingCalendars as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-participant-booking-calendars2.js.map

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

@@ -0,0 +1 @@
+{"file":"nylas-participant-booking-calendars2.js","mappings":";;;;;;;;;;AAAA,MAAM,mCAAmC,GAAG,07FAA07F,CAAC;AACv+F,+CAAe,mCAAmC;;;;;;;;;;;;;;;;MCerC,gCAAgC;;;;;;;;oBAUpB,+BAA+B;;;;iCAwClD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC;oCAOvC,EAAE;kDAOF,EAAE;;IAIN,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,qCAAqC,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACpF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAGD,uBAAuB,CAAC,QAAoB;QAC1C,KAAK,CAAC,qCAAqC,EAAE,yBAAyB,EAAE,QAAQ,CAAC,CAAC;QAClF,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC5G;IAGD,0BAA0B,CAAC,QAAuB;QAChD,KAAK,CAAC,qCAAqC,EAAE,4BAA4B,EAAE,QAAQ,CAAC,CAAC;QACrF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACxD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,6BAA6B,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACnG;IAGD,gCAAgC,CAAC,QAAiC;QAChE,KAAK,CAAC,uBAAuB,EAAE,kCAAkC,EAAE,QAAQ,CAAC,CAAC;QAC7E,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;KAC7F;IAGD,mCAAmC,CAAC,QAAuB;QACzD,KAAK,CAAC,qCAAqC,EAAE,qCAAqC,EAAE,QAAQ,CAAC,CAAC;QAC9F,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC5G;IAED,6BAA6B,CAAC,iBAAgC,EAAE,2BAAgE;QAE9H,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC;QAClF,MAAM,oBAAoB,GAAG,EAAE,CAAC;QAChC,MAAM,yCAAyC,GAAG,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,KAAK,YAAY,CAAC;QACrJ,IAAI,2BAA2B,IAAI,yCAAyC,EAAE;YAC5E,MAAM,YAAY,GAAG,iBAAiB,CAAC,MAAM,CAAC,WAAW,IAAI,2BAA2B,CAAC,IAAI,CAAC,oBAAoB,IAAI,oBAAoB,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;YAGzK,YAAY,CAAC,OAAO,CAAC,WAAW;gBAC9B,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,IAAI,CAAC,iBAAiB,IAAI,iBAAiB,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC/H,IAAI,CAAC,iBAAiB;oBAAE,OAAO;gBAC/B,IAAI,CAAC,kCAAkC,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,OAAO,EAAE,WAAW,IAAI,SAAS,CAAC;gBAC3G,MAAM,SAAS,GAAG,iBAAiB,CAAC,SAAS,IAAI,EAAE,CAAC;gBACpD,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;aACrD,CAAC,CAAC;SACJ;QAED,IAAI,SAAS,EAAE;YACb,oBAAoB,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC;YACrG,IAAI,CAAC,kCAAkC,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,WAAW,IAAI,SAAS,CAAC;SACzG;QACD,OAAO,oBAAoB,CAAC;KAC7B;IAED,kBAAkB,CAAC,SAAqB;QACtC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;KACzG;IAGD,iBAAiB;QACf,KAAK,CAAC,qCAAqC,EAAE,mBAAmB,CAAC,CAAC;KACnE;IAED,oBAAoB;QAClB,KAAK,CAAC,qCAAqC,EAAE,sBAAsB,CAAC,CAAC;KACtE;IAED,iBAAiB;QACf,KAAK,CAAC,qCAAqC,EAAE,mBAAmB,CAAC,CAAC;KACnE;IAED,gBAAgB;QACd,KAAK,CAAC,qCAAqC,EAAE,kBAAkB,CAAC,CAAC;KAClE;IAGD,kBAAkB,CAAC,KAAkB;QACnC,KAAK,CAAC,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,CAAC,CAAC;QAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,EAAE;YAC5C,OAAO;SACR;QAED,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,aAAa,EAAE,EAAE;YACjD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,2DAA2D,CAAC,CAAC;YAC/G,OAAO;SACR;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;SAChC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC;YAAE,OAAO;QACzC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC;QAChD,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEvD,MAAM,qBAAqB,GAAG,EAAE,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW;YACnC,qBAAqB,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;SAC/F,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9E,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC3F;IAED,eAAe,CAAC,YAA2B;QACzC,MAAM,oBAAoB,GAAG,EAAE,CAAC;QAChC,YAAY,CAAC,OAAO,CAAC,WAAW;YAC9B,MAAM,MAAM,GAAG,WAAW,CAAC,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;YACvD,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG;gBACxC,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,IAAI,SAAS;gBACvD,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,KAAK;aAC5C,CAAC;SACH,CAAC,CAAC;QACH,OAAO,oBAAoB,CAAC;KAC7B;IAWD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qCAAqC,EAAC,IAAI,EAAC,MAAM,IAC1D,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,IACrC,gFAAyB,EACzB,yHAEE,4EACE,kEAAW,IAAI,EAAC,cAAc,GAAG,EACjC,6DAAM,IAAI,EAAC,iBAAiB,kDAAmD,CAC7D,CAClB,CACA,EACN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe,IACvC,6DAAM,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,uBAAuB,GAAG,EAAqB,CAAC,IACpE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK;YACrD,MAAM,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YAChD,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC5D,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,IAAI;gBAAE,OAAO;YAC9C,QACE,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,6BAA6B,EAAC,GAAG,EAAE,yBAAyB,KAAK,EAAE,IACzG,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,yBAAyB,IAC3D,qBAAQ,WAAW,CAAC,IAAI,wBAAwB,EAChD,WAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,qCAAqC,IACxE,YACE,KAAK,EAAE,WAAW,WAAW,CAAC,MAAM,GAAG,MAAM,GAAG,QAAQ,EAAE,EAC1D,OAAO,EAAE;oBACP,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC;oBACzD,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;iBACxD,IAED,oBAAc,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CAClC,CACH,CACF,EACL,WAAW,CAAC,MAAM,KACjB,qCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,uBAAuB,GAAG,EAAE,EAClC,SAAS,EAAE,oBAAoB,EAC/B,UAAU,EAAE,IAAI,EAChB,sBAAsB,EAAE,IAAI,CAAC,kCAAkC,CAAC,GAAG,CAAC,GACpE,CACH,CACG,EACN;SACH,CAAC,CACG,CACH,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;AArDD;IAVC,iBAAiB,CAAsH;QACtI,IAAI,EAAE,qCAAqC;QAC3C,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,wCAAwC,EAAE,oBAAoB,CAAC;YAChE,CAAC,2BAA2B,EAAE,WAAW,CAAC;YAC1C,CAAC,uCAAuC,EAAE,uBAAuB,CAAC;SACnE,CAAC;QACF,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;8DAsDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}","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[];\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    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\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 = this.participants.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\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    }\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  getUniqueCalendars(calendars: Calendar[]) {\n    return calendars.filter((calendar, index, self) => self.findIndex(c => c.id === calendar.id) === index);\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  }\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    this.participants.forEach(participant => {\n      participantsCalendars[participant.email] = this.selectedCalendars[participant.email].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      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    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>Calendar booking</h3>\n            <p>\n              Select the calendar where you want to add event bookings.\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">The calendar will be used to create events.</span>\n              </tooltip-component>\n            </p>\n          </div>\n          <div class=\"content\" part=\"npbc__content\">\n            <form ref={el => (this.bookingCalendarsFormRef = el as HTMLFormElement)}>\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>Set {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

@@ -37,6 +37,7 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
         this.__attachShadow();
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
+        this.selectedConfiguration = undefined;
         this.name = 'participant-custom-availability';
         this.participants = undefined;
         this.selectedParticipants = this.setParticipants(this.participants);
@@ -45,8 +46,17 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
         debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
-    participantsChangedHandler(newValue) {
-        debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue);
+    selectedConfigurationChangedHandler(newValue, oldValue) {
+        debug('nylas-participants-custom-availability', 'selectedConfigurationChangedHandler', newValue, oldValue);
+        if (newValue?.participants) {
+            this.selectedParticipants = this.setParticipants(newValue?.participants);
+        }
+        else {
+            this.selectedParticipants = this.setParticipants(this.participants);
+        }
+    }
+    participantsChangedHandler(newValue, oldValue) {
+        debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue, oldValue);
         this.selectedParticipants = this.setParticipants(newValue);
     }
     connectedCallback() {
@@ -96,9 +106,8 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
     setParticipants(participants) {
         const selectedParticipants = {};
         participants.forEach(participant => {
-            const isOpen = participant.is_organizer ? true : false;
             selectedParticipants[participant.email] = {
-                isOpen: isOpen,
+                isOpen: false,
                 setCustom: !!participant.availability?.open_hours ? true : false,
                 openHours: participant.availability?.open_hours || [],
                 name: participant.name || participant.email,
@@ -108,7 +117,7 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
         return selectedParticipants;
     }
     render() {
-        return (h(Host, { key: '051df44e8bf6bab14cfbccb0a3c5f920993cbae9' }, h("div", { key: '128d044cb2bbee76d695d6f5d4bc38a211d06360', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: 'ed326c442f9663b0613e5cf62a31aabf5fa1034d', class: "header", part: "npca__header" }, h("h3", { key: '10994aace54d17110ab2e70fc82a5c11231b5a23' }, "Set Custom Availability for Participants"), h("p", { key: '6df3bc37aec02f5a4468f6c6515c6de2c696e817' }, "Set custom availability for scheduling meetings, or default to general availability.")), h("div", { key: 'e1e67385b15430e8a7eb6d8411f9b87742621969', class: "content", part: "npca__content" }, h("form", { key: '589df249c050b132dc8da5b3ef7e58fa829ae300', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
+        return (h(Host, { key: '13f5f7e8251df259ef954b2308cf0d3c478a102a' }, h("div", { key: 'c418cfdf9efe9402e7513f37949c3d400155f5b7', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: '8dcb751ff36a9ef912a246df4092b586ea8e2ce1', class: "header", part: "npca__header" }, h("h3", { key: '707d45de15507e97e11629339f842b229af1e432' }, "Availability for participants"), h("p", { key: 'f2579d9c2d13a1cd91068baa69030cb0e4d0ae24' }, "If not set, the general availability on the Availability tab is used.")), h("div", { key: '24303259020ca3a29d6e93a7d388797385d88bb7', class: "content", part: "npca__content" }, h("form", { key: 'a852b30387f5ba3f59acdebbe43c4773102bc113', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
             const participant = this.selectedParticipants[key];
             if (!participant || !participant.name || !participant.availability)
                 return;
@@ -124,20 +133,24 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
     get host() { return this; }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
         "participants": ["participantsChangedHandler"]
     }; }
     static get style() { return NylasParticipantsCustomAvailabilityStyle0; }
 }, [65, "nylas-participants-custom-availability", {
+        "selectedConfiguration": [16],
         "name": [1],
         "participants": [16],
         "selectedParticipants": [32]
     }, [[0, "nylasFormSwitchToggled", "nylasFormSwitchToggledHandler"], [0, "valueChanged", "handleValueChanged"]], {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
         "participants": ["participantsChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({
         name: 'nylas-participants-custom-availability',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),