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

package/dist/collection/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-min-cancellation-notice.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.tsx"],"names":[],"mappings":"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","sourcesContent":["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-notice.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/scheduler-editor/nylas-participant-booking-calendars/nylas-participant-booking-calendars.css

@@ -0,0 +1,105 @@
+: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;
+}

package/dist/collection/components/scheduler-editor/nylas-participant-booking-calendars/nylas-participant-booking-calendars.js

@@ -0,0 +1,324 @@
+var __decorate = (this && this.__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 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { debug } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasParticipantBookingCalendars {
+    constructor() {
+        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 is() { return "nylas-participant-booking-calendars"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-participant-booking-calendars.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-participant-booking-calendars.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the participants custom availability."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'participant-booking-calendars'"
+            },
+            "participants": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Participant[]",
+                    "resolved": "Participant[]",
+                    "references": {
+                        "Participant": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Participant"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The participants selected in the add participants section."
+                }
+            },
+            "calendars": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Calendar[]",
+                    "resolved": "Calendar[] | undefined",
+                    "references": {
+                        "Calendar": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Calendar"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The calendars to choose from for the organizer / logged in user."
+                }
+            },
+            "participantOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AdditionalParticipant[]",
+                    "resolved": "AdditionalParticipant[] | undefined",
+                    "references": {
+                        "AdditionalParticipant": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::AdditionalParticipant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The participant options passed in the additionalParticipants prop\nfrom the nylas-scheduler-editor component."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedCalendars": {},
+            "participantCalendars": {},
+            "participantDefaultSelectedCalendar": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the participants custom availability changes."
+                },
+                "complexType": {
+                    "original": "{\n    value: string;\n    name: string;\n  }",
+                    "resolved": "{ value: string; name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "calendars",
+                "methodName": "calendarsChangedHandler"
+            }, {
+                "propName": "participants",
+                "methodName": "participantsChangedHandler"
+            }, {
+                "propName": "participantOptions",
+                "methodName": "participantOptionsChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "valueChanged",
+                "method": "handleValueChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__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);
+//# sourceMappingURL=nylas-participant-booking-calendars.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-participant-booking-calendars.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-participant-booking-calendars/nylas-participant-booking-calendars.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.js

@@ -17,6 +17,7 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasParticipantsCustomAvailability {
     constructor() {
+        this.selectedConfiguration = undefined;
         this.name = 'participant-custom-availability';
         this.participants = undefined;
         this.selectedParticipants = this.setParticipants(this.participants);
@@ -25,8 +26,17 @@ export class NylasParticipantsCustomAvailability {
         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() {
@@ -76,9 +86,8 @@ export class NylasParticipantsCustomAvailability {
     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,
@@ -88,7 +97,7 @@ export class NylasParticipantsCustomAvailability {
         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;
@@ -115,6 +124,27 @@ export class NylasParticipantsCustomAvailability {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -184,6 +214,9 @@ export class NylasParticipantsCustomAvailability {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }, {
                 "propName": "participants",
                 "methodName": "participantsChangedHandler"
@@ -209,6 +242,7 @@ export class NylasParticipantsCustomAvailability {
 __decorate([
     RegisterComponent({
         name: 'nylas-participants-custom-availability',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),