@nylas/web-elements 1.3.2 → 1.3.3

package/dist/collection/components/design-system/nylas-date-component/nylas-date-component.js

@@ -18,6 +18,7 @@ export class NylasDateComponent {
         this.requiredError = '';
         this.value = undefined;
         this.error = '';
+        this.isDateValid = true;
     }
     handleDefaultValueChange(newValue) {
         this.value = sanitize(newValue);
@@ -38,16 +39,16 @@ export class NylasDateComponent {
         }
     }
     async handleFormSubmitted(event) {
-        if (this.el?.getAttribute('data-page-styling')) {
-            this.validatePattern(this.value);
-            if (this.error) {
-                event.preventDefault();
-            }
+        this.validatePattern(this.value);
+        if (this.error) {
+            event.preventDefault();
         }
     }
     handleInput(e) {
         this.error = '';
-        this.value = sanitize(e.target.value);
+        const target = e.target;
+        this.value = sanitize(target.value);
+        this.isDateValid = target.validity.valid;
         this.nylasFormInputChanged.emit({
             value: this.value,
             name: this.name,
@@ -70,6 +71,10 @@ export class NylasDateComponent {
     }
     validatePattern(value) {
         this.error = '';
+        if (!this.isDateValid) {
+            this.error = 'Please enter a valid date';
+            return;
+        }
         if (this.required && !value) {
             this.error = this.requiredError || 'This field is required.';
             return;
@@ -84,7 +89,7 @@ export class NylasDateComponent {
         }
     }
     render() {
-        return (h("label", { key: '959c6b772ea4f2f4706d72255d1e36ea8d4fcbd3', part: "ic__label", class: { error: !!this.error } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("div", { key: 'a018a19fe2a77416d7ac4d9c7ea84cb0560a70de', part: "ic__input_wrapper", class: "input_wrapper" }, h("input", { key: '7952451a1397dc1a08ac5dc6a251d452a882981b', type: "date", name: this.name, part: "ic__date", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), h("slot", { key: '9730db9ef73e570667c69879ce457c45b5e196a5', name: "additional-input" })), this.error && h("span", { class: "error help-text" }, this.error)));
+        return (h("label", { key: 'db7e5910f650055747d1f2bca13356d2c3fe3f9e', part: "ic__label", class: { error: !!this.error } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("div", { key: '81d0a723cec27805587e2abdac667504d078e211', part: "ic__input_wrapper", class: "input_wrapper" }, h("input", { key: '948cf92087a3763d058588c8f6b7764e96234595', type: "date", name: this.name, part: "ic__date", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), h("slot", { key: '6c1d31a29dc01621d9212a95574c329844da0eed', name: "additional-input" })), this.error && h("span", { class: "error help-text" }, this.error)));
     }
     static get is() { return "nylas-date-component"; }
     static get encapsulation() { return "shadow"; }
@@ -304,7 +309,8 @@ export class NylasDateComponent {
     static get states() {
         return {
             "value": {},
-            "error": {}
+            "error": {},
+            "isDateValid": {}
         };
     }
     static get events() {

package/dist/collection/components/design-system/nylas-date-component/nylas-date-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-date-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/nylas-date-component/nylas-date-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n  date: 'YYYY-MM-DD',\n};\n\n/**\n * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n  tag: 'nylas-date-component',\n  styleUrl: 'nylas-date-component.scss',\n  shadow: true,\n})\nexport class NylasDateComponent {\n  /**\n   * The host element\n   */\n  @Element() el!: HTMLElement;\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue?: string;\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder['date'];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is 'Invalid <field> format.' where <field> is the input label.\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * This error message is displayed when the input value is empty and the input is required.\n   */\n  @Prop() requiredError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value!: string;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  @Event() nylasFormInputFocused!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  @Event() nylasFormInputBlurred!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.value = sanitize(newValue);\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    this.value = sanitize(this.defaultValue || '');\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'document' })\n  async handleFormSubmitted(event: CustomEvent) {\n    if (this.el?.getAttribute('data-page-styling')) {\n      this.validatePattern(this.value);\n      if (this.error) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitize((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: 'date',\n    });\n  }\n\n  handleBlur() {\n    this.nylasFormInputBlurred.emit({\n      value: this.value,\n      name: this.name,\n    });\n  }\n\n  handleFocus() {\n    this.nylasFormInputFocused.emit({\n      value: this.value,\n      name: this.name,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = this.requiredError || 'This field is required.';\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern || (!value && !this.required)) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = this.patternError || 'Invalid format.';\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        {this.label && (\n          <p>\n            <span class=\"label\">{this.label}</span>\n            {this.required && <span class=\"required\">*</span>}\n          </p>\n        )}\n        <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n          <input\n            type=\"date\"\n            name={this.name}\n            part=\"ic__date\"\n            readOnly={this.readOnly}\n            autoFocus={this.autoFocus}\n            value={this.value}\n            maxLength={this.maxLength}\n            placeholder={this.placeholder}\n            class={{ error: !!this.error }}\n            onInput={e => this.handleInput(e)}\n            onFocus={() => this.handleFocus()}\n            onBlur={() => this.handleBlur()}\n          />\n          <slot name=\"additional-input\"></slot>\n        </div>\n        {this.error && <span class=\"error help-text\">{this.error}</span>}\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-date-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/nylas-date-component/nylas-date-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n  date: 'YYYY-MM-DD',\n};\n\n/**\n * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n  tag: 'nylas-date-component',\n  styleUrl: 'nylas-date-component.scss',\n  shadow: true,\n})\nexport class NylasDateComponent {\n  /**\n   * The host element\n   */\n  @Element() el!: HTMLElement;\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue?: string;\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder['date'];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is 'Invalid <field> format.' where <field> is the input label.\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * This error message is displayed when the input value is empty and the input is required.\n   */\n  @Prop() requiredError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value!: string;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * State to track the validity of the date input.\n   */\n  @State() isDateValid: boolean = true;\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  @Event() nylasFormInputFocused!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  @Event() nylasFormInputBlurred!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.value = sanitize(newValue);\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    this.value = sanitize(this.defaultValue || '');\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'document' })\n  async handleFormSubmitted(event: CustomEvent) {\n    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    const target = e.target as HTMLInputElement;\n    this.value = sanitize(target.value);\n    this.isDateValid = target.validity.valid;\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: 'date',\n    });\n  }\n\n  handleBlur() {\n    this.nylasFormInputBlurred.emit({\n      value: this.value,\n      name: this.name,\n    });\n  }\n\n  handleFocus() {\n    this.nylasFormInputFocused.emit({\n      value: this.value,\n      name: this.name,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    if (!this.isDateValid) {\n      this.error = 'Please enter a valid date';\n      return;\n    }\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = this.requiredError || 'This field is required.';\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern || (!value && !this.required)) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = this.patternError || 'Invalid format.';\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        {this.label && (\n          <p>\n            <span class=\"label\">{this.label}</span>\n            {this.required && <span class=\"required\">*</span>}\n          </p>\n        )}\n        <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n          <input\n            type=\"date\"\n            name={this.name}\n            part=\"ic__date\"\n            readOnly={this.readOnly}\n            autoFocus={this.autoFocus}\n            value={this.value}\n            maxLength={this.maxLength}\n            placeholder={this.placeholder}\n            class={{ error: !!this.error }}\n            onInput={e => this.handleInput(e)}\n            onFocus={() => this.handleFocus()}\n            onBlur={() => this.handleBlur()}\n          />\n          <slot name=\"additional-input\"></slot>\n        </div>\n        {this.error && <span class=\"error help-text\">{this.error}</span>}\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components/design-system/nylas-date-component/test/nylas-date-component.spec.js

@@ -0,0 +1,39 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NylasDateComponent } from "../nylas-date-component";
+import { h } from "@stencil/core";
+describe('nylas-date-component', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('renders error if date form field is invalid', async () => {
+        const page = await newSpecPage({
+            components: [NylasDateComponent],
+            template: () => h("nylas-date-component", null),
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+        const dateInput = page?.root?.shadowRoot?.querySelector('input');
+        const mockOnInput = jest.fn();
+        dateInput.addEventListener('input', mockOnInput);
+        dateInput.value = '1993-02-29';
+        dateInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+        await page.waitForChanges();
+        expect(mockOnInput).toHaveBeenCalled();
+        const customEvent = new CustomEvent('bookingFormSubmitted', {
+            detail: {},
+        });
+        page.rootInstance.handleInput({
+            target: {
+                value: '',
+                validity: {
+                    valid: false,
+                },
+            },
+        });
+        page.rootInstance.handleBookingFormSubmitted(customEvent);
+        await page.waitForChanges();
+        expect(page.rootInstance.isDateValid).toBe(false);
+        expect(page.root).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=nylas-date-component.spec.js.map

package/dist/collection/components/design-system/nylas-date-component/test/nylas-date-component.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-date-component.spec.js","sourceRoot":"","sources":["../../../../../src/components/design-system/nylas-date-component/test/nylas-date-component.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,UAAU,CAAC,GAAG,EAAE;QAEd,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,kBAAkB,CAAC;YAChC,QAAQ,EAAE,GAAG,EAAE,CAAC,+BAAwB;SACzC,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACpC,MAAM,SAAS,GAAG,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,CAAC,OAAO,CAAqB,CAAC;QAErF,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9B,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACjD,SAAS,CAAC,KAAK,GAAG,YAAY,CAAC;QAC/B,SAAS,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACjF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAEvC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,sBAAsB,EAAE;YAC1D,MAAM,EAAE,EAAE;SACX,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YAC5B,MAAM,EAAE;gBACN,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE;oBACR,KAAK,EAAE,KAAK;iBACb;aACF;SACF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,CAAC;QAC1D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasDateComponent } from '../nylas-date-component';\nimport { h } from '@stencil/core';\n\ndescribe('nylas-date-component', () => {\n  beforeEach(() => {\n    // Clear and reset the mock before each test if needed\n    jest.clearAllMocks();\n  });\n\n  it('renders error if date form field is invalid', async () => {\n    const page = await newSpecPage({\n      components: [NylasDateComponent],\n      template: () => <nylas-date-component />,\n    });\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n    const dateInput = page?.root?.shadowRoot?.querySelector('input') as HTMLInputElement;\n\n    const mockOnInput = jest.fn();\n    dateInput.addEventListener('input', mockOnInput);\n    dateInput.value = '1993-02-29';\n    dateInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));\n    await page.waitForChanges();\n    expect(mockOnInput).toHaveBeenCalled();\n\n    const customEvent = new CustomEvent('bookingFormSubmitted', {\n      detail: {},\n    });\n    page.rootInstance.handleInput({\n      target: {\n        value: '',\n        validity: {\n          valid: false,\n        },\n      },\n    });\n    page.rootInstance.handleBookingFormSubmitted(customEvent);\n    await page.waitForChanges();\n    expect(page.rootInstance.isDateValid).toBe(false);\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/design-system/time-period-selector/time-period-selector.js

@@ -26,6 +26,21 @@ export class TimePeriodSelector {
             };
         });
     }
+    defaultSelectedPeriodChanged(newValue) {
+        this.selectedPeriod = newValue;
+        this.updateNumberOptionsAndSelectedNumber(newValue);
+    }
+    defaultSelectedNumberChanged(newValue) {
+        this.selectedNumber = newValue;
+    }
+    timePeriodsChanged(newValue) {
+        this.timePeriodOptions = newValue.map(period => {
+            return {
+                label: period,
+                value: period,
+            };
+        });
+    }
     componentDidLoad() {
         this.selectedNumber = this.defaultSelectedNumber;
         this.selectedPeriod = this.defaultSelectedPeriod;
@@ -93,7 +108,7 @@ export class TimePeriodSelector {
         this.selectedNumber = parseInt(this.numberOptions[0].value);
     }
     render() {
-        return (h("div", { key: '76ed6c36ebbcfbb8b8d54edc6a26a9d2a6d6f7fb', class: "time-period-selector" }, typeof this.selectedNumber == 'number' && (h("input-dropdown", { id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) })), typeof this.selectedPeriod == 'string' && (h("select-dropdown", { id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod), withSearch: false }))));
+        return (h("div", { key: 'f40a2be9bc76a0a5be0ffa3c87779fab644e52f2', class: "time-period-selector" }, typeof this.selectedNumber == 'number' && (h("input-dropdown", { id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) })), typeof this.selectedPeriod == 'string' && (h("select-dropdown", { id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod), withSearch: false }))));
     }
     static get is() { return "time-period-selector"; }
     static get encapsulation() { return "scoped"; }
@@ -188,6 +203,18 @@ export class TimePeriodSelector {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "defaultSelectedPeriod",
+                "methodName": "defaultSelectedPeriodChanged"
+            }, {
+                "propName": "defaultSelectedNumber",
+                "methodName": "defaultSelectedNumberChanged"
+            }, {
+                "propName": "timePeriods",
+                "methodName": "timePeriodsChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "inputOptionChanged",

package/dist/collection/components/design-system/time-period-selector/time-period-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-period-selector.js","sourceRoot":"","sources":["../../../../src/components/design-system/time-period-selector/time-period-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n  hours: 'hour',\n  days: 'day',\n  weeks: 'week',\n  months: 'month',\n};\n\n@Component({\n  tag: 'time-period-selector',\n  styleUrl: 'time-period-selector.scss',\n  scoped: true,\n})\nexport class TimePeriodSelector {\n  @Element() host!: HTMLElement;\n\n  // The possible values for the time periods dropdown\n  @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n  /**\n   * The default selected time period.\n   */\n  @Prop() defaultSelectedPeriod!: string;\n\n  /**\n   * The default selected number.\n   */\n  @Prop() defaultSelectedNumber!: number;\n\n  /**\n   * The currently selected time period\n   */\n  @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n  /**\n   * The currently selected number of the time period\n   */\n  @State() selectedNumber: number = this.defaultSelectedNumber;\n\n  /*\n   * The options for the number dropdown, to be calculated based on the selectedPeriod\n   */\n  @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod || 'hour').map(i => {\n    return {\n      label: i.toString(),\n      value: i.toString(),\n    };\n  });\n\n  /**\n   * The options for the time period dropdown\n   */\n  @State() timePeriodOptions = this.timePeriods.map(period => {\n    return {\n      label: period,\n      value: period,\n    };\n  });\n\n  componentDidLoad() {\n    this.selectedNumber = this.defaultSelectedNumber;\n    this.selectedPeriod = this.defaultSelectedPeriod;\n    const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n  }\n\n  @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n  private calculateOptions(period: string): number[] {\n    switch (period) {\n      case 'hour':\n        return Array.from({ length: 23 }, (_, i) => i + 1);\n      case 'minute':\n        return Array.from({ length: 13 }, (_, i) => i * 5);\n      case 'day':\n        return Array.from({ length: 30 }, (_, i) => i + 1);\n      case 'week':\n        return Array.from({ length: 4 }, (_, i) => i + 1);\n      case 'month':\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      default:\n        return [];\n    }\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-number') {\n      this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-period') {\n      this.selectedPeriod = value;\n      this.updateNumberOptionsAndSelectedNumber(value);\n    } else if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  updateNumberOptionsAndSelectedNumber(period: string) {\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n    this.selectedNumber = parseInt(this.numberOptions[0].value);\n  }\n\n  render() {\n    return (\n      <div class=\"time-period-selector\">\n        {typeof this.selectedNumber == 'number' && (\n          <input-dropdown\n            id=\"time-number\"\n            name={'time-number'}\n            inputValue={this.selectedNumber.toString()}\n            exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n            options={this.numberOptions}\n            defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n          />\n        )}\n        {typeof this.selectedPeriod == 'string' && (\n          <select-dropdown\n            id=\"time-period\"\n            name={'time-period'}\n            options={this.timePeriodOptions}\n            exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n            pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n            defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod)}\n            withSearch={false}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"time-period-selector.js","sourceRoot":"","sources":["../../../../src/components/design-system/time-period-selector/time-period-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n  hours: 'hour',\n  days: 'day',\n  weeks: 'week',\n  months: 'month',\n};\n\n@Component({\n  tag: 'time-period-selector',\n  styleUrl: 'time-period-selector.scss',\n  scoped: true,\n})\nexport class TimePeriodSelector {\n  @Element() host!: HTMLElement;\n\n  // The possible values for the time periods dropdown\n  @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n  /**\n   * The default selected time period.\n   */\n  @Prop() defaultSelectedPeriod!: string;\n\n  /**\n   * The default selected number.\n   */\n  @Prop() defaultSelectedNumber!: number;\n\n  /**\n   * The currently selected time period\n   */\n  @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n  /**\n   * The currently selected number of the time period\n   */\n  @State() selectedNumber: number = this.defaultSelectedNumber;\n\n  /*\n   * The options for the number dropdown, to be calculated based on the selectedPeriod\n   */\n  @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod || 'hour').map(i => {\n    return {\n      label: i.toString(),\n      value: i.toString(),\n    };\n  });\n\n  /**\n   * The options for the time period dropdown\n   */\n  @State() timePeriodOptions = this.timePeriods.map(period => {\n    return {\n      label: period,\n      value: period,\n    };\n  });\n\n  @Watch('defaultSelectedPeriod')\n  defaultSelectedPeriodChanged(newValue: string) {\n    this.selectedPeriod = newValue;\n    this.updateNumberOptionsAndSelectedNumber(newValue);\n  }\n\n  @Watch('defaultSelectedNumber')\n  defaultSelectedNumberChanged(newValue: number) {\n    this.selectedNumber = newValue;\n  }\n\n  @Watch('timePeriods')\n  timePeriodsChanged(newValue: string[]) {\n    this.timePeriodOptions = newValue.map(period => {\n      return {\n        label: period,\n        value: period,\n      };\n    });\n  }\n\n  componentDidLoad() {\n    this.selectedNumber = this.defaultSelectedNumber;\n    this.selectedPeriod = this.defaultSelectedPeriod;\n    const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n  }\n\n  @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n  private calculateOptions(period: string): number[] {\n    switch (period) {\n      case 'hour':\n        return Array.from({ length: 23 }, (_, i) => i + 1);\n      case 'minute':\n        return Array.from({ length: 13 }, (_, i) => i * 5);\n      case 'day':\n        return Array.from({ length: 30 }, (_, i) => i + 1);\n      case 'week':\n        return Array.from({ length: 4 }, (_, i) => i + 1);\n      case 'month':\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      default:\n        return [];\n    }\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-number') {\n      this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-period') {\n      this.selectedPeriod = value;\n      this.updateNumberOptionsAndSelectedNumber(value);\n    } else if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  updateNumberOptionsAndSelectedNumber(period: string) {\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n    this.selectedNumber = parseInt(this.numberOptions[0].value);\n  }\n\n  render() {\n    return (\n      <div class=\"time-period-selector\">\n        {typeof this.selectedNumber == 'number' && (\n          <input-dropdown\n            id=\"time-number\"\n            name={'time-number'}\n            inputValue={this.selectedNumber.toString()}\n            exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n            options={this.numberOptions}\n            defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n          />\n        )}\n        {typeof this.selectedPeriod == 'string' && (\n          <select-dropdown\n            id=\"time-period\"\n            name={'time-period'}\n            options={this.timePeriodOptions}\n            exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n            pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n            defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod)}\n            withSearch={false}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-date-picker/test/nylas-date-picker.spec.js

@@ -37,7 +37,9 @@ describe('nylas-date-picker', () => {
         nextMonthButton.click();
         await page.waitForChanges();
         expect(spyEvent).toHaveBeenCalled();
-        expect(page.rootInstance.month.getMonth()).toBe(new Date().getMonth() + 1);
+        const currentMonth = new Date().getMonth();
+        const expectedMonth = (currentMonth + 1) % 12;
+        expect(page.rootInstance.month.getMonth()).toBe(expectedMonth);
     });
     it('disables dates not in selectableDates', async () => {
         const selectableDates = [new Date()];

package/dist/collection/components/scheduler/nylas-date-picker/test/nylas-date-picker.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-date-picker.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler/nylas-date-picker/test/nylas-date-picker.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasDatePicker } from '../nylas-date-picker';\n\ndescribe('nylas-date-picker', () => {\n  beforeEach(() => {\n    // Clear and reset the mock before each test if needed\n    jest.clearAllMocks();\n  });\n\n  it('renders correctly and generates dates for the current month', async () => {\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker></nylas-date-picker>`,\n    });\n    if (!page.root) {\n      throw new Error('Component did not render.');\n    }\n    expect(page.rootInstance.dates.length).toBeGreaterThan(0);\n  });\n  it('emits dateSelected event with the correct date on date selection', async () => {\n    const selectedDate = new Date();\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker></nylas-date-picker>`,\n    });\n\n    const spyEvent = jest.fn();\n    page.win.addEventListener('dateSelected', spyEvent);\n\n    page.rootInstance.selectDate(selectedDate);\n    await page.waitForChanges();\n\n    expect(spyEvent).toHaveBeenCalledWith(expect.objectContaining({ detail: selectedDate }));\n  });\n  it('changes the month and emits monthChanged event on month navigation', async () => {\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker></nylas-date-picker>`,\n    });\n\n    const spyEvent = jest.fn();\n    page.win.addEventListener('monthChanged', spyEvent);\n\n    // Change to the next month\n    const nextMonthButton = page?.root?.shadowRoot?.querySelector('.chevron-right') as HTMLButtonElement;\n    nextMonthButton.click();\n    await page.waitForChanges();\n\n    expect(spyEvent).toHaveBeenCalled();\n    expect(page.rootInstance.month.getMonth()).toBe(new Date().getMonth() + 1); // Assuming test runs in a month that is not December\n  });\n  it('disables dates not in selectableDates', async () => {\n    const selectableDates = [new Date()];\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker></nylas-date-picker>`,\n    });\n\n    if (!page.root) {\n      throw new Error('Component did not render.');\n    }\n\n    page.root.selectableDates = selectableDates;\n    page.root.isLoading = false;\n    await page.waitForChanges();\n    const dates = page?.root?.shadowRoot?.querySelectorAll('button.date.current-month') as NodeListOf<HTMLButtonElement>;\n    const disabledDates = page?.root?.shadowRoot?.querySelectorAll('button.date.current-month[disabled]') as NodeListOf<HTMLButtonElement>;\n\n    expect(disabledDates.length).toBe(dates.length - selectableDates.length);\n  });\n  it('displays loading state and disables date selection', async () => {\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker is-loading=\"true\"></nylas-date-picker>`,\n    });\n\n    await page.waitForChanges();\n\n    const dates = page?.root?.shadowRoot?.querySelectorAll('button.date') as NodeListOf<HTMLButtonElement>;\n    const loadingDates = page?.root?.shadowRoot?.querySelectorAll('button.date.day-skeleton') as NodeListOf<HTMLButtonElement>;\n    const allDatesLoading = loadingDates.length === dates.length;\n    expect(allDatesLoading).toBe(true);\n  });\n});\n"]}
+{"version":3,"file":"nylas-date-picker.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler/nylas-date-picker/test/nylas-date-picker.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasDatePicker } from '../nylas-date-picker';\n\ndescribe('nylas-date-picker', () => {\n  beforeEach(() => {\n    // Clear and reset the mock before each test if needed\n    jest.clearAllMocks();\n  });\n\n  it('renders correctly and generates dates for the current month', async () => {\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker></nylas-date-picker>`,\n    });\n    if (!page.root) {\n      throw new Error('Component did not render.');\n    }\n    expect(page.rootInstance.dates.length).toBeGreaterThan(0);\n  });\n  it('emits dateSelected event with the correct date on date selection', async () => {\n    const selectedDate = new Date();\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker></nylas-date-picker>`,\n    });\n\n    const spyEvent = jest.fn();\n    page.win.addEventListener('dateSelected', spyEvent);\n\n    page.rootInstance.selectDate(selectedDate);\n    await page.waitForChanges();\n\n    expect(spyEvent).toHaveBeenCalledWith(expect.objectContaining({ detail: selectedDate }));\n  });\n  it('changes the month and emits monthChanged event on month navigation', async () => {\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker></nylas-date-picker>`,\n    });\n\n    const spyEvent = jest.fn();\n    page.win.addEventListener('monthChanged', spyEvent);\n\n    // Change to the next month\n    const nextMonthButton = page?.root?.shadowRoot?.querySelector('.chevron-right') as HTMLButtonElement;\n    nextMonthButton.click();\n    await page.waitForChanges();\n\n    expect(spyEvent).toHaveBeenCalled();\n    const currentMonth = new Date().getMonth();\n    const expectedMonth = (currentMonth + 1) % 12; // Handles December wrap-around\n    expect(page.rootInstance.month.getMonth()).toBe(expectedMonth);\n  });\n  it('disables dates not in selectableDates', async () => {\n    const selectableDates = [new Date()];\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker></nylas-date-picker>`,\n    });\n\n    if (!page.root) {\n      throw new Error('Component did not render.');\n    }\n\n    page.root.selectableDates = selectableDates;\n    page.root.isLoading = false;\n    await page.waitForChanges();\n    const dates = page?.root?.shadowRoot?.querySelectorAll('button.date.current-month') as NodeListOf<HTMLButtonElement>;\n    const disabledDates = page?.root?.shadowRoot?.querySelectorAll('button.date.current-month[disabled]') as NodeListOf<HTMLButtonElement>;\n\n    expect(disabledDates.length).toBe(dates.length - selectableDates.length);\n  });\n  it('displays loading state and disables date selection', async () => {\n    const page = await newSpecPage({\n      components: [NylasDatePicker],\n      html: `<nylas-date-picker is-loading=\"true\"></nylas-date-picker>`,\n    });\n\n    await page.waitForChanges();\n\n    const dates = page?.root?.shadowRoot?.querySelectorAll('button.date') as NodeListOf<HTMLButtonElement>;\n    const loadingDates = page?.root?.shadowRoot?.querySelectorAll('button.date.day-skeleton') as NodeListOf<HTMLButtonElement>;\n    const allDatesLoading = loadingDates.length === dates.length;\n    expect(allDatesLoading).toBe(true);\n  });\n});\n"]}

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

@@ -48,10 +48,10 @@ export class NylasAdditionalParticipants {
     componentWillLoad() {
         debug('nylas-additional-participants', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        this.updateState(this.selectedConfiguration, this.currentUser);
     }
     componentDidLoad() {
         debug('nylas-additional-participants', 'componentDidLoad');
+        this.updateState(this.selectedConfiguration, this.currentUser);
     }
     disconnectedCallback() {
         debug('nylas-additional-participants', 'disconnectedCallback');

package/dist/collection/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-additional-participants.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.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, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\nimport { AdditionalParticipant, Calendar, Configuration } from '@nylas/core';\nimport { User } from '@/common/nylas-api-request';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer?: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'participants';\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The logged in user\n   */\n  @Prop() currentUser?: User;\n  /**\n   * @standalone\n   * The list of user's calendars.\n   */\n  @Prop() currentUserCalendars?: Calendar[];\n  /**\n   * @standalone\n   * The additional participants options from the config\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n  /**\n   * @standalone\n   * The event participants\n   */\n  @Prop() eventParticipants?: Participant[];\n\n  @AttachInternals() internals!: ElementInternals;\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantErrors: { [key: string]: string } = {};\n  @State() includeOrganizerAsParticipant: boolean = true;\n  @State() isRoundRobinConfig: boolean = false;\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the selected participants change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('currentUser')\n  @Watch('selectedConfiguration')\n  selectedConfigurationAndCurrentUserChangedHandler(newValue: unknown, _oldValue: unknown, propName: string) {\n    debug('nylas-additional-participants', 'selectedConfigurationAndCurrentUserChangedHandler', newValue, this.currentUser);\n\n    if (propName === 'selectedConfiguration') {\n      this.updateState(newValue as Configuration, this.currentUser);\n    } else if (propName === 'currentUser') {\n      this.updateState(this.selectedConfiguration, newValue as User);\n    }\n  }\n\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n    this.updateState(this.selectedConfiguration, this.currentUser);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  private updateState(selectedConfig?: Configuration, currentUser?: User) {\n    this.isRoundRobinConfig = selectedConfig?.availability?.availability_rules?.availability_method\n      ? selectedConfig?.availability?.availability_rules?.availability_method !== 'collective'\n      : false;\n    this.participants = selectedConfig?.participants || [];\n    this.includeOrganizerAsParticipant = this.isRoundRobinConfig && this.participants.find(p => p.email === currentUser?.email) ? true : false;\n    this.updateOrganizerAsParticipant();\n  }\n\n  /**\n   * This method is essentially a workaround to check if the internals are available because\n   * the unit tests in stencil do not support the internals.\n   * @returns boolean\n   */\n  get isInternalsAvailable() {\n    return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n    const index = event.detail.name;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n\n    if (!participant && this.isRoundRobinConfig) {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');\n      this.participantErrors[index] = 'For round robin page, participant should be selected from the dropdown.';\n      this.participants[index].is_valid = false;\n      this.participants = [...this.participants];\n      return;\n    } else if (!participant && !EMAIL_REGEX.test(event.detail.value)) {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please enter a valid email address');\n      this.participantErrors[index] = 'Please enter a valid email address';\n      this.participants[index].is_valid = false;\n      this.participants = [...this.participants];\n      return;\n    } else {\n      this.participantErrors[index] = '';\n      this.participants[index].is_valid = true;\n      this.isInternalsAvailable && this.internals.setValidity({});\n    }\n    this.participants[index].email = event.detail.value;\n    // Default to the first calendar if participant was picked from the dropdown options\n    this.participants[index].availability = participant && participant.calendars[0].id ? { calendar_ids: [participant.calendars[0].id] } : undefined;\n    // If round-robin config, set booking calendar to first calendar for all participants\n    this.participants[index].booking = participant && this.isRoundRobinConfig && participant.calendars[0].id ? { calendar_id: participant.calendars[0].id } : undefined;\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.updateFormValue();\n  }\n\n  updateOrganizerAsParticipant() {\n    const findCurrentUserInParticipants = this.participants.find(p => p.email === this.currentUser?.email);\n    if (this.isRoundRobinConfig && !findCurrentUserInParticipants && this.currentUser?.email) {\n      const bookingCalendarDefault = this.currentUserCalendars?.find(calendar => calendar.is_primary)?.id || this.currentUserCalendars?.[0]?.id || 'primary';\n      this.participants = [\n        {\n          name: this.currentUser?.name,\n          email: this.currentUser?.email,\n          is_organizer: true,\n          availability: {\n            calendar_ids: [bookingCalendarDefault],\n          },\n          booking: {\n            calendar_id: bookingCalendarDefault,\n          },\n        },\n        ...this.participants,\n      ];\n    }\n    this.updateFormValue();\n  }\n\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n    this.updateFormValue();\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.updateFormValue();\n  }\n\n  updateFormValue() {\n    debug('nylas-additional-participants', 'updateFormValue');\n    const participants = this.isRoundRobinConfig ? (this.includeOrganizerAsParticipant ? this.participants : this.participants.filter(p => !p.is_organizer)) : this.participants;\n    if (participants.length === 0) {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please add at least one participant');\n      this.error = 'Please add at least one participant';\n    } else {\n      this.isInternalsAvailable && this.internals.setValidity({});\n      this.error = '';\n      this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participants), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(participants), name: this.name });\n    }\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: AdditionalParticipant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([\n      ['schedulerConfig.additionalParticipants', 'participantOptions'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.currentUser', 'currentUser'],\n      ['schedulerConfig.calendars', 'currentUserCalendars'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nap\">\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add people in your team or organization to join the event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    {!participant.is_organizer && <label>{`Participant ${index}`}</label>}\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={{\n                        'nylas-additional-participants__input_wrapper': true,\n                        'nylas-additional-participants__input_wrapper_organizer': participant?.is_organizer === true,\n                        'nylas-additional-participants__input_wrapper_invalid': participant.is_valid === false,\n                        'error': participant.is_valid === false,\n                      }}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant?.is_organizer === true }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input-component\n                            class={'label-input'}\n                            name={`${index}`}\n                            key={index}\n                            label=\"Organizer\"\n                            required={false}\n                            readOnly={participant.is_organizer}\n                            defaultValue={participant.email}\n                          >\n                            {this.isRoundRobinConfig && (\n                              <div class=\"required-input\" slot=\"additional-input\">\n                                <input\n                                  type=\"checkbox\"\n                                  name={`organizer_participant`}\n                                  id={`organizer_participant`}\n                                  onClick={() => {\n                                    this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant;\n                                    this.updateFormValue();\n                                  }}\n                                  checked={this.includeOrganizerAsParticipant}\n                                />\n                                <label htmlFor={`organizer_participant`} aria-label=\"Include as participant\">\n                                  Participant\n                                  <tooltip-component id=\"organizer_participant_tooltip\">\n                                    <info-icon slot=\"tooltip-icon\" />\n                                    <span slot=\"tooltip-content\">\n                                      <strong>Include Organizer:</strong> The organizer (you) will be included in the round-robin rotation. <br />\n                                      <strong>Exclude Organizer:</strong> The organizer (you) will not be included in the round-robin rotation.\n                                    </span>\n                                  </tooltip-component>\n                                </label>\n                              </div>\n                            )}\n                          </input-component>\n                        ) : (\n                          <input-dropdown\n                            id={`${index}`}\n                            name={`${index}`}\n                            filterable={true}\n                            inputValue={participant.email}\n                            options={this.getArrayDifference(this.participantOptions || [], this.participants)}\n                          />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                    {!participant.is_valid && (\n                      <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n                        {this.participantErrors[index]}\n                      </p>\n                    )}\n                  </div>\n                );\n              })}\n              <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n                {this.error}\n              </p>\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-additional-participants.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.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, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\nimport { AdditionalParticipant, Calendar, Configuration } from '@nylas/core';\nimport { User } from '@/common/nylas-api-request';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer?: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'participants';\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The logged in user\n   */\n  @Prop() currentUser?: User;\n  /**\n   * @standalone\n   * The list of user's calendars.\n   */\n  @Prop() currentUserCalendars?: Calendar[];\n  /**\n   * @standalone\n   * The additional participants options from the config\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n  /**\n   * @standalone\n   * The event participants\n   */\n  @Prop() eventParticipants?: Participant[];\n\n  @AttachInternals() internals!: ElementInternals;\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantErrors: { [key: string]: string } = {};\n  @State() includeOrganizerAsParticipant: boolean = true;\n  @State() isRoundRobinConfig: boolean = false;\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the selected participants change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('currentUser')\n  @Watch('selectedConfiguration')\n  selectedConfigurationAndCurrentUserChangedHandler(newValue: unknown, _oldValue: unknown, propName: string) {\n    debug('nylas-additional-participants', 'selectedConfigurationAndCurrentUserChangedHandler', newValue, this.currentUser);\n\n    if (propName === 'selectedConfiguration') {\n      this.updateState(newValue as Configuration, this.currentUser);\n    } else if (propName === 'currentUser') {\n      this.updateState(this.selectedConfiguration, newValue as User);\n    }\n  }\n\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.updateState(this.selectedConfiguration, this.currentUser);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  private updateState(selectedConfig?: Configuration, currentUser?: User) {\n    this.isRoundRobinConfig = selectedConfig?.availability?.availability_rules?.availability_method\n      ? selectedConfig?.availability?.availability_rules?.availability_method !== 'collective'\n      : false;\n    this.participants = selectedConfig?.participants || [];\n    this.includeOrganizerAsParticipant = this.isRoundRobinConfig && this.participants.find(p => p.email === currentUser?.email) ? true : false;\n    this.updateOrganizerAsParticipant();\n  }\n\n  /**\n   * This method is essentially a workaround to check if the internals are available because\n   * the unit tests in stencil do not support the internals.\n   * @returns boolean\n   */\n  get isInternalsAvailable() {\n    return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n    const index = event.detail.name;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n\n    if (!participant && this.isRoundRobinConfig) {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');\n      this.participantErrors[index] = 'For round robin page, participant should be selected from the dropdown.';\n      this.participants[index].is_valid = false;\n      this.participants = [...this.participants];\n      return;\n    } else if (!participant && !EMAIL_REGEX.test(event.detail.value)) {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please enter a valid email address');\n      this.participantErrors[index] = 'Please enter a valid email address';\n      this.participants[index].is_valid = false;\n      this.participants = [...this.participants];\n      return;\n    } else {\n      this.participantErrors[index] = '';\n      this.participants[index].is_valid = true;\n      this.isInternalsAvailable && this.internals.setValidity({});\n    }\n    this.participants[index].email = event.detail.value;\n    // Default to the first calendar if participant was picked from the dropdown options\n    this.participants[index].availability = participant && participant.calendars[0].id ? { calendar_ids: [participant.calendars[0].id] } : undefined;\n    // If round-robin config, set booking calendar to first calendar for all participants\n    this.participants[index].booking = participant && this.isRoundRobinConfig && participant.calendars[0].id ? { calendar_id: participant.calendars[0].id } : undefined;\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.updateFormValue();\n  }\n\n  updateOrganizerAsParticipant() {\n    const findCurrentUserInParticipants = this.participants.find(p => p.email === this.currentUser?.email);\n    if (this.isRoundRobinConfig && !findCurrentUserInParticipants && this.currentUser?.email) {\n      const bookingCalendarDefault = this.currentUserCalendars?.find(calendar => calendar.is_primary)?.id || this.currentUserCalendars?.[0]?.id || 'primary';\n      this.participants = [\n        {\n          name: this.currentUser?.name,\n          email: this.currentUser?.email,\n          is_organizer: true,\n          availability: {\n            calendar_ids: [bookingCalendarDefault],\n          },\n          booking: {\n            calendar_id: bookingCalendarDefault,\n          },\n        },\n        ...this.participants,\n      ];\n    }\n    this.updateFormValue();\n  }\n\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n    this.updateFormValue();\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.updateFormValue();\n  }\n\n  updateFormValue() {\n    debug('nylas-additional-participants', 'updateFormValue');\n    const participants = this.isRoundRobinConfig ? (this.includeOrganizerAsParticipant ? this.participants : this.participants.filter(p => !p.is_organizer)) : this.participants;\n    if (participants.length === 0) {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please add at least one participant');\n      this.error = 'Please add at least one participant';\n    } else {\n      this.isInternalsAvailable && this.internals.setValidity({});\n      this.error = '';\n      this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participants), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(participants), name: this.name });\n    }\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: AdditionalParticipant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([\n      ['schedulerConfig.additionalParticipants', 'participantOptions'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.currentUser', 'currentUser'],\n      ['schedulerConfig.calendars', 'currentUserCalendars'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nap\">\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add people in your team or organization to join the event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    {!participant.is_organizer && <label>{`Participant ${index}`}</label>}\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={{\n                        'nylas-additional-participants__input_wrapper': true,\n                        'nylas-additional-participants__input_wrapper_organizer': participant?.is_organizer === true,\n                        'nylas-additional-participants__input_wrapper_invalid': participant.is_valid === false,\n                        'error': participant.is_valid === false,\n                      }}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant?.is_organizer === true }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input-component\n                            class={'label-input'}\n                            name={`${index}`}\n                            key={index}\n                            label=\"Organizer\"\n                            required={false}\n                            readOnly={participant.is_organizer}\n                            defaultValue={participant.email}\n                          >\n                            {this.isRoundRobinConfig && (\n                              <div class=\"required-input\" slot=\"additional-input\">\n                                <input\n                                  type=\"checkbox\"\n                                  name={`organizer_participant`}\n                                  id={`organizer_participant`}\n                                  onClick={() => {\n                                    this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant;\n                                    this.updateFormValue();\n                                  }}\n                                  checked={this.includeOrganizerAsParticipant}\n                                />\n                                <label htmlFor={`organizer_participant`} aria-label=\"Include as participant\">\n                                  Participant\n                                  <tooltip-component id=\"organizer_participant_tooltip\">\n                                    <info-icon slot=\"tooltip-icon\" />\n                                    <span slot=\"tooltip-content\">\n                                      <strong>Include Organizer:</strong> The organizer (you) will be included in the round-robin rotation. <br />\n                                      <strong>Exclude Organizer:</strong> The organizer (you) will not be included in the round-robin rotation.\n                                    </span>\n                                  </tooltip-component>\n                                </label>\n                              </div>\n                            )}\n                          </input-component>\n                        ) : (\n                          <input-dropdown\n                            id={`${index}`}\n                            name={`${index}`}\n                            filterable={true}\n                            inputValue={participant.email}\n                            options={this.getArrayDifference(this.participantOptions || [], this.participants)}\n                          />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                    {!participant.is_valid && (\n                      <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n                        {this.participantErrors[index]}\n                      </p>\n                    )}\n                  </div>\n                );\n              })}\n              <p class=\"nylas-additional-participants__error\" part=\"nap__error\">\n                {this.error}\n              </p>\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-booking-form-config/nylas-booking-form-config.js

@@ -17,6 +17,28 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 import { DEFAULT_FORM_FIELD_TYPES, FIELD_TYPES } from "../../../common/constants";
 import Sortable from "sortablejs";
+const staticFields = [
+    {
+        type: 'text',
+        label: 'Your name',
+        key: 'your_name',
+        typeLabel: 'Short text',
+        readonly: true,
+        required: true,
+        isOpen: false,
+        order: 0,
+    },
+    {
+        type: 'email',
+        label: 'Your Email',
+        key: 'your_email',
+        typeLabel: 'Email',
+        readonly: true,
+        isOpen: false,
+        required: true,
+        order: 1,
+    },
+];
 export class NylasBookingFormConfig {
     constructor() {
         this.selectedConfiguration = undefined;
@@ -28,6 +50,9 @@ export class NylasBookingFormConfig {
         debug('nylas-calendar-picker', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newValue) {
+        this.updateFormFields(newValue);
+    }
     connectedCallback() {
         debug('nylas-booking-form-config', 'connectedCallback');
     }
@@ -37,37 +62,18 @@ export class NylasBookingFormConfig {
     componentWillLoad() {
         debug('nylas-booking-form-config', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        const staticFields = [
-            {
-                type: 'text',
-                label: 'Your name',
-                key: 'your_name',
-                typeLabel: 'Short text',
-                readonly: true,
-                required: true,
-                isOpen: false,
-                order: 0,
-            },
-            {
-                type: 'email',
-                label: 'Your Email',
-                key: 'your_email',
-                typeLabel: 'Email',
-                readonly: true,
-                isOpen: false,
-                required: true,
-                order: 1,
-            },
-        ];
         this.formFields = [...staticFields];
     }
     componentDidLoad() {
         debug('nylas-booking-form-config', 'componentDidLoad');
-        const additionalFields = Object.entries(this.selectedConfiguration?.scheduler?.additional_fields || {}).map(([id, field]) => ({ ...field, key: id })) ||
-            this.additionalFields ||
-            [];
+        if (this.selectedConfiguration) {
+            this.updateFormFields(this.selectedConfiguration);
+        }
+    }
+    updateFormFields(config) {
+        const additionalFields = Object.entries(config?.scheduler?.additional_fields || {}).map(([id, field]) => ({ ...field, key: id })) || this.additionalFields || [];
         this.formFields = [
-            ...this.formFields,
+            ...staticFields,
             ...additionalFields
                 .sort((a, b) => a.order - b.order)
                 .map((f, i) => {
@@ -275,7 +281,7 @@ export class NylasBookingFormConfig {
         });
     }
     render() {
-        return (h(Host, { key: '632d9bd6cc0162efdb7e83b78b23935f04569fcb' }, h("div", { key: 'dae8d7f52a658b121a992f9cd73cd766e2c16cec', class: "nylas-booking-form-config", part: "nbfc" }, h("div", { key: '4f02c7163dfecd29df48da9b163e12e9a6c9c357', class: "header", part: "nbfc__header" }, h("div", { key: '169cfa3f8d4dd519dd0621d032d3e7a13384b8c7', class: "header_text" }, h("h3", { key: '66e50347bae8fca4c3344030d4d3caf4158244e2' }, "Booking form"), h("p", { key: '883886b2c841acdbd44e6cb1c18a860a51c52412' }, "Add custom fields to the booking form.")), h("div", { key: 'e307526fa6d75c4aaaa71c5658006d9e7417c0f0', class: "header_action" }, h("select-dropdown", { key: '4b16dd221f5740b21cde95488e2609730e08ea54', name: "add-field", exportparts: "sd_dropdown: nbfc__add_field, sd_dropdown-button: nbfc__add_field-button, sd_dropdown-content: nbfc__add_field-dropdown-content", options: DEFAULT_FORM_FIELD_TYPES, withSearch: false, withChevron: false, dropdownButtonText: "Add new field" }, h("span", { key: '5ccd949bb563f32f1682b9432759828f086b46e3', slot: "select-icon" }, h("plus-icon", { key: 'b77ac5dd297071ec6e16c3728db1a7b096e83e74', width: "15", height: "15" }))))), h("div", { key: 'a7499ce8959d027f0540b086c3393353c3993452', class: "content" }, h("div", { key: 'ff24161e13beba123ca46c814515704bf06d4259', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
+        return (h(Host, { key: 'bd832f2b9a02ce53187e4f633e4c0388e6e65a03' }, h("div", { key: 'fcf79fe131d8e0a99312286b15f228b997d8c0be', class: "nylas-booking-form-config", part: "nbfc" }, h("div", { key: '07cd086a8af8145f5a8c6676e360fa5f919040f3', class: "header", part: "nbfc__header" }, h("div", { key: 'f703982061b36b7f4b792f4deff59cc4256b7c25', class: "header_text" }, h("h3", { key: 'a7cba135c527592a000c296ceaf68bb91c9ddcf4' }, "Booking form"), h("p", { key: '62acf8b4a583145e2bc300b1b351799dec1ff438' }, "Add custom fields to the booking form.")), h("div", { key: '574ef9a02aa06ad29ac0b08c22aa749a844d32d8', class: "header_action" }, h("select-dropdown", { key: 'c2a83f721237dc1032af5e55e17438e1060b2e58', name: "add-field", exportparts: "sd_dropdown: nbfc__add_field, sd_dropdown-button: nbfc__add_field-button, sd_dropdown-content: nbfc__add_field-dropdown-content", options: DEFAULT_FORM_FIELD_TYPES, withSearch: false, withChevron: false, dropdownButtonText: "Add new field" }, h("span", { key: 'e0aaa33a3bd04b79499310c3904984269eaecbf3', slot: "select-icon" }, h("plus-icon", { key: '06bf29f2b3d0dca74d660db8791a47bc2474652b', width: "15", height: "15" }))))), h("div", { key: 'b33cfae9a876be328d795366802a1791e22ca164', class: "content" }, h("div", { key: '0df453e1fc129a13b90b33c6e267ecd9dd149c56', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
             return (h("div", { class: `form-field draggable ${field.readonly && 'fixed'}`, part: "nbfc__form_field", key: i }, h("div", { class: "form-field_header", part: "nbfc__form_field-header" }, h("span", { class: "dragable" }, h("dragable-icon", { width: "24", height: "25" })), h("div", { class: "form-field_header_text" }, h("h4", null, field.label), h("p", null, field.typeLabel)), h("div", { class: "form-field_header_actions" }, h("span", { class: `is-required` }, field.required ? 'Required' : 'Optional'), !field.readonly && (h("button", { onClick: () => {
                     this.fieldRemove(i);
                 } }, h("close-icon", null))), h("span", { class: `chevron ${field.isOpen ? 'open' : 'closed'}`, onClick: () => {
@@ -407,6 +413,9 @@ export class NylasBookingFormConfig {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }, {
                 "propName": "formFields",
                 "methodName": "watchHandler"