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

package/dist/collection/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.js

@@ -184,8 +184,11 @@ export class NylasBufferTime {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The selected config"
+                    "tags": [{
+                            "name": "internal",
+                            "text": "The selected config"
+                        }],
+                    "text": ""
                 }
             },
             "name": {
@@ -217,8 +220,11 @@ export class NylasBufferTime {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The buffer time"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The buffer time"
+                        }],
+                    "text": ""
                 },
                 "defaultValue": "this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 }"
             }

package/dist/collection/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-buffer-time.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.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 { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n */\n@Component({\n  tag: 'nylas-buffer-time',\n  styleUrl: 'nylas-buffer-time.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBufferTime {\n  @Element() host!: HTMLNylasCalendarPickerElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'buffer-time';\n  /**\n   * The buffer time\n   */\n  @Prop() buffer: { before: number; after: number } = this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 };\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected before buffer time.\n   */\n  @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n  /**\n   * The selected after buffer time.\n   */\n  @State() selectedAfterBufferTime: number = this.buffer.after;\n\n  @State() componentLoaded: boolean = false;\n\n  /**\n   * This event is fired when the selected buffer time is changed.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-buffer-time', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-buffer-time', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-buffer-time', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-buffer-time', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.selectedBeforeBufferTime = this.buffer.before;\n      this.selectedAfterBufferTime = this.buffer.after;\n    }\n    this.componentLoaded = true;\n\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      const bufferTime = {\n        before: this.selectedBeforeBufferTime,\n        after: this.selectedAfterBufferTime,\n      };\n      this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-buffer-time', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-buffer-time', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-buffer-time', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-buffer-time', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-buffer-time', 'selectedConfigurationChangedHandler', newValue);\n    const buffer = newValue?.availability?.availability_rules?.buffer;\n    this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;\n    this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value, name } = event.detail;\n      if (name === 'before-buffer-time') {\n        this.selectedBeforeBufferTime = parseInt(value);\n      } else if (name === 'after-buffer-time') {\n        this.selectedAfterBufferTime = parseInt(value);\n      }\n      const bufferTime = {\n        before: this.selectedBeforeBufferTime,\n        after: this.selectedAfterBufferTime,\n      };\n      this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  renderPreview() {\n    const totalSlots = 4;\n    const slotHeight = 10; // The height for each 30-minute slot\n\n    // Event slot height is constant\n    const eventSlotHeight = slotHeight * 2;\n\n    // Helper function to determine the fill of a slot based on the minutes selected\n    const slotFill = minutes => {\n      const fullSlots = Math.floor(minutes / 30);\n      const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n      return {\n        fullSlots,\n        partialFillHeight,\n      };\n    };\n\n    // Helper function to create before slots\n    const createBeforeSlots = () => {\n      const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n      return Array.from({ length: totalSlots }, (_, index) => {\n        // Slot is active if its index is greater than the total slots minus the full slots minus one\n        // and there are some minutes selected.\n        const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n        const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n        let slotStyle: {\n          backgroundColor?: string;\n          background?: string;\n        } = {};\n        if (isActive && !isPartial) {\n          slotStyle.backgroundColor = 'var(--nylas-base-100)';\n        } else if (isPartial) {\n          slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n        }\n\n        return (\n          <div\n            key={index}\n            class={`slot ${isActive ? 'active' : ''}`}\n            style={{\n              height: `${slotHeight}px`,\n              ...slotStyle,\n            }}\n          ></div>\n        );\n      });\n    };\n\n    // Helper function to create after slots\n    const createAfterSlots = () => {\n      const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n      return Array.from({ length: totalSlots }, (_, index) => {\n        const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n        const isPartial = index === fullSlots && partialFillHeight > 0;\n\n        let slotStyle: {\n          backgroundColor?: string;\n          background?: string;\n        } = {};\n        if (isActive && !isPartial) {\n          slotStyle.backgroundColor = 'var(--nylas-base-100)';\n        } else if (isPartial) {\n          slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n        }\n\n        return (\n          <div\n            key={index}\n            class={`slot ${isActive ? 'active' : ''}`}\n            style={{\n              height: `${slotHeight}px`,\n              ...slotStyle,\n            }}\n          ></div>\n        );\n      });\n    };\n\n    return (\n      <div class=\"preview-container\">\n        {createBeforeSlots()}\n        <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n        {createAfterSlots()}\n      </div>\n    );\n  }\n\n  @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-buffer-time',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const minuteOptions = Array.from({ length: 25 }, (_, i) => {\n      const value = i * 5;\n      return {\n        label: value.toString(),\n        value: value,\n      };\n    });\n\n    return (\n      <Host>\n        <div class=\"nylas-buffer-time\" part=\"nbt\">\n          <div class=\"header\" part=\"nbt__header\">\n            <h3>Buffer time</h3>\n            <p>\n              Require empty buffer time before and after an event.\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Scheduler does not book the buffer time.</span>\n              </tooltip-component>\n            </p>\n          </div>\n          <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n            <div class=\"nylas-buffer-time__dropdown\">\n              <div class=\"nylas-buffer-time__row\">\n                <label>Before the event</label>\n                <div class=\"dropdown-container\">\n                  {this.componentLoaded && (\n                    <select-dropdown\n                      id=\"before-buffer-time\"\n                      withSearch={false}\n                      name=\"before-buffer-time\"\n                      exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n                      options={minuteOptions}\n                      defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime)}\n                    />\n                  )}\n                  <span>mins</span>\n                </div>\n              </div>\n              <div class=\"nylas-buffer-time__row\">\n                <label>After the event</label>\n                <div class=\"dropdown-container\">\n                  {this.componentLoaded && (\n                    <select-dropdown\n                      id=\"after-buffer-time\"\n                      withSearch={false}\n                      name=\"after-buffer-time\"\n                      exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n                      options={minuteOptions}\n                      defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime)}\n                    />\n                  )}\n                  <span>mins</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n              <h4>PREVIEW</h4>\n              {this.renderPreview()}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-buffer-time.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.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 { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n */\n@Component({\n  tag: 'nylas-buffer-time',\n  styleUrl: 'nylas-buffer-time.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBufferTime {\n  @Element() host!: HTMLNylasCalendarPickerElement;\n  /**\n   * @internal\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'buffer-time';\n  /**\n   * @standalone\n   * The buffer time\n   */\n  @Prop() buffer: { before: number; after: number } = this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 };\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected before buffer time.\n   */\n  @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n  /**\n   * The selected after buffer time.\n   */\n  @State() selectedAfterBufferTime: number = this.buffer.after;\n\n  @State() componentLoaded: boolean = false;\n\n  /**\n   * This event is fired when the selected buffer time is changed.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-buffer-time', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-buffer-time', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-buffer-time', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-buffer-time', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.selectedBeforeBufferTime = this.buffer.before;\n      this.selectedAfterBufferTime = this.buffer.after;\n    }\n    this.componentLoaded = true;\n\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      const bufferTime = {\n        before: this.selectedBeforeBufferTime,\n        after: this.selectedAfterBufferTime,\n      };\n      this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-buffer-time', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-buffer-time', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-buffer-time', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-buffer-time', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-buffer-time', 'selectedConfigurationChangedHandler', newValue);\n    const buffer = newValue?.availability?.availability_rules?.buffer;\n    this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;\n    this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value, name } = event.detail;\n      if (name === 'before-buffer-time') {\n        this.selectedBeforeBufferTime = parseInt(value);\n      } else if (name === 'after-buffer-time') {\n        this.selectedAfterBufferTime = parseInt(value);\n      }\n      const bufferTime = {\n        before: this.selectedBeforeBufferTime,\n        after: this.selectedAfterBufferTime,\n      };\n      this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  renderPreview() {\n    const totalSlots = 4;\n    const slotHeight = 10; // The height for each 30-minute slot\n\n    // Event slot height is constant\n    const eventSlotHeight = slotHeight * 2;\n\n    // Helper function to determine the fill of a slot based on the minutes selected\n    const slotFill = minutes => {\n      const fullSlots = Math.floor(minutes / 30);\n      const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n      return {\n        fullSlots,\n        partialFillHeight,\n      };\n    };\n\n    // Helper function to create before slots\n    const createBeforeSlots = () => {\n      const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n      return Array.from({ length: totalSlots }, (_, index) => {\n        // Slot is active if its index is greater than the total slots minus the full slots minus one\n        // and there are some minutes selected.\n        const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n        const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n        let slotStyle: {\n          backgroundColor?: string;\n          background?: string;\n        } = {};\n        if (isActive && !isPartial) {\n          slotStyle.backgroundColor = 'var(--nylas-base-100)';\n        } else if (isPartial) {\n          slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n        }\n\n        return (\n          <div\n            key={index}\n            class={`slot ${isActive ? 'active' : ''}`}\n            style={{\n              height: `${slotHeight}px`,\n              ...slotStyle,\n            }}\n          ></div>\n        );\n      });\n    };\n\n    // Helper function to create after slots\n    const createAfterSlots = () => {\n      const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n      return Array.from({ length: totalSlots }, (_, index) => {\n        const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n        const isPartial = index === fullSlots && partialFillHeight > 0;\n\n        let slotStyle: {\n          backgroundColor?: string;\n          background?: string;\n        } = {};\n        if (isActive && !isPartial) {\n          slotStyle.backgroundColor = 'var(--nylas-base-100)';\n        } else if (isPartial) {\n          slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n        }\n\n        return (\n          <div\n            key={index}\n            class={`slot ${isActive ? 'active' : ''}`}\n            style={{\n              height: `${slotHeight}px`,\n              ...slotStyle,\n            }}\n          ></div>\n        );\n      });\n    };\n\n    return (\n      <div class=\"preview-container\">\n        {createBeforeSlots()}\n        <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n        {createAfterSlots()}\n      </div>\n    );\n  }\n\n  @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-buffer-time',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const minuteOptions = Array.from({ length: 25 }, (_, i) => {\n      const value = i * 5;\n      return {\n        label: value.toString(),\n        value: value,\n      };\n    });\n\n    return (\n      <Host>\n        <div class=\"nylas-buffer-time\" part=\"nbt\">\n          <div class=\"header\" part=\"nbt__header\">\n            <h3>Buffer time</h3>\n            <p>\n              Require empty buffer time before and after an event.\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Scheduler does not book the buffer time.</span>\n              </tooltip-component>\n            </p>\n          </div>\n          <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n            <div class=\"nylas-buffer-time__dropdown\">\n              <div class=\"nylas-buffer-time__row\">\n                <label>Before the event</label>\n                <div class=\"dropdown-container\">\n                  {this.componentLoaded && (\n                    <select-dropdown\n                      id=\"before-buffer-time\"\n                      withSearch={false}\n                      name=\"before-buffer-time\"\n                      exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n                      options={minuteOptions}\n                      defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime)}\n                    />\n                  )}\n                  <span>mins</span>\n                </div>\n              </div>\n              <div class=\"nylas-buffer-time__row\">\n                <label>After the event</label>\n                <div class=\"dropdown-container\">\n                  {this.componentLoaded && (\n                    <select-dropdown\n                      id=\"after-buffer-time\"\n                      withSearch={false}\n                      name=\"after-buffer-time\"\n                      exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n                      options={minuteOptions}\n                      defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime)}\n                    />\n                  )}\n                  <span>mins</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n              <h4>PREVIEW</h4>\n              {this.renderPreview()}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.js

@@ -17,9 +17,9 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasCalendarPicker {
     constructor() {
-        this.calendars = undefined;
-        this.currentUser = undefined;
         this.name = 'calendar';
+        this.currentUser = undefined;
+        this.calendars = undefined;
         this.defaultSelectedCalendars = [];
         this.selectedCalendars = [];
         this.error = '';
@@ -102,26 +102,26 @@ export class NylasCalendarPicker {
     }
     static get properties() {
         return {
-            "calendars": {
-                "type": "unknown",
+            "name": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Calendar[]",
-                    "resolved": "Calendar[] | undefined",
-                    "references": {
-                        "Calendar": {
-                            "location": "import",
-                            "path": "@nylas/core",
-                            "id": "../nylas-js-core/dist/index.d.ts::Calendar"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The calendars to choose from."
-                }
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The name of the calendar picker."
+                        }],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'calendar'"
             },
             "currentUser": {
                 "type": "unknown",
@@ -140,27 +140,36 @@ export class NylasCalendarPicker {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The logged in user."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The logged in user."
+                        }],
+                    "text": ""
                 }
             },
-            "name": {
-                "type": "string",
+            "calendars": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Calendar[]",
+                    "resolved": "Calendar[] | undefined",
+                    "references": {
+                        "Calendar": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Calendar"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The name of the calendar picker."
-                },
-                "attribute": "name",
-                "reflect": false,
-                "defaultValue": "'calendar'"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The calendars to choose from."
+                        }],
+                    "text": ""
+                }
             },
             "defaultSelectedCalendars": {
                 "type": "unknown",
@@ -173,8 +182,11 @@ export class NylasCalendarPicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The default selected calendars."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The default selected calendars."
+                        }],
+                    "text": ""
                 },
                 "defaultValue": "[]"
             }

package/dist/collection/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.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 { Calendar } from '@nylas/core';\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 { User } from '@/common/nylas-api-request';\n\n/**\n * The `nylas-calendar-picker` component is a form input for selecting calendars to check availability.\n *\n * @part ncp - The calendar picker container\n * @part ncp__dropdown - The dropdown container\n * @part ncp__dropdown-button - The dropdown button\n * @part ncp__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-calendar-picker',\n  styleUrl: 'nylas-calendar-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCalendarPicker {\n  @Element() host!: HTMLNylasCalendarPickerElement;\n  /**\n   * The calendars to choose from.\n   */\n  @Prop() calendars?: Calendar[];\n  /**\n   * The logged in user.\n   */\n  @Prop() currentUser?: User;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'calendar';\n  /**\n   * The default selected calendars.\n   */\n  @Prop() defaultSelectedCalendars: string[] = [];\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected calendars.\n   */\n  @State() selectedCalendars: string[] = [];\n\n  /**\n   * The error message to display.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the selected calendars change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string[];\n    name: string;\n    valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void;\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-calendar-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-calendar-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-calendar-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-calendar-picker', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-calendar-picker', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.defaultSelectedCalendars.toString(), 'calendar');\n      this.valueChanged.emit({ value: this.defaultSelectedCalendars, name: this.name });\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-calendar-picker', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-calendar-picker', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-calendar-picker', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-calendar-picker', 'componentDidRender');\n  }\n\n  @Listen('selectedOptionsChanged')\n  selectedOptionsChangedHandler(event: CustomEvent<{ value: string[]; name: string }>) {\n    debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChangedHandler = (event: CustomEvent<{ value: string[]; name: string }>) => {\n      const { value } = event.detail;\n      this.selectedCalendars = [...value];\n      if (this.selectedCalendars.length === 0) {\n        this.error = `Select at least one calendar.`;\n        this.internals.setValidity({ customError: true }, `Select at least one calendar.`);\n      } else {\n        this.error = '';\n        this.internals.setValidity({});\n      }\n      this.internals.setFormValue(value.toString(), this.name);\n    };\n    this.valueChanged.emit({ ...event.detail, name: this.name, valueChangedHandler });\n  }\n\n  @RegisterComponent<NylasCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-calendar-picker',\n    stateToProps: new Map([['schedulerConfig.currentUser', 'currentUser']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChangedHandler } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChangedHandler) {\n          valueChangedHandler(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const calendarOptions =\n      this.calendars?.map(calendar => {\n        return {\n          value: calendar.id,\n          label: calendar.name,\n          selected:\n            this.defaultSelectedCalendars?.includes(calendar.id) ||\n            (this.defaultSelectedCalendars?.includes('primary') || this.defaultSelectedCalendars?.length === 0\n              ? calendar.id === this.currentUser?.email || calendar.id === this.name.split('participant-')[1]\n              : false),\n        };\n      }) ?? [];\n\n    return (\n      <Host>\n        <div class=\"nylas-calendar-picker\" part=\"ncp\">\n          {calendarOptions.length > 0 ? (\n            <div class=\"nylas-calendar-picker__dropdown\">\n              <multi-select-dropdown\n                name={this.name}\n                options={calendarOptions}\n                error={this.error}\n                exportparts=\"msd_dropdown: ncp__dropdown, msd_dropdown-button: ncp__dropdown-button, msd_dropdown-content: ncp__dropdown-content\"\n              ></multi-select-dropdown>\n            </div>\n          ) : (\n            <div class=\"nylas-calendar-picker__loading\">\n              <span class=\"label\">\n                Select calendars that will be checked for availability <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.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 { Calendar } from '@nylas/core';\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 { User } from '@/common/nylas-api-request';\n\n/**\n * The `nylas-calendar-picker` component is a form input for selecting calendars to check availability.\n *\n * @part ncp - The calendar picker container\n * @part ncp__dropdown - The dropdown container\n * @part ncp__dropdown-button - The dropdown button\n * @part ncp__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-calendar-picker',\n  styleUrl: 'nylas-calendar-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCalendarPicker {\n  @Element() host!: HTMLNylasCalendarPickerElement;\n  /**\n   * @standalone\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'calendar';\n  /**\n   * @standalone\n   * The logged in user.\n   */\n  @Prop() currentUser?: User;\n  /**\n   * @standalone\n   * The calendars to choose from.\n   */\n  @Prop() calendars?: Calendar[];\n  /**\n   * @standalone\n   * The default selected calendars.\n   */\n  @Prop() defaultSelectedCalendars: string[] = [];\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected calendars.\n   */\n  @State() selectedCalendars: string[] = [];\n\n  /**\n   * The error message to display.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the selected calendars change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string[];\n    name: string;\n    valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void;\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-calendar-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-calendar-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-calendar-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-calendar-picker', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-calendar-picker', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.defaultSelectedCalendars.toString(), 'calendar');\n      this.valueChanged.emit({ value: this.defaultSelectedCalendars, name: this.name });\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-calendar-picker', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-calendar-picker', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-calendar-picker', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-calendar-picker', 'componentDidRender');\n  }\n\n  @Listen('selectedOptionsChanged')\n  selectedOptionsChangedHandler(event: CustomEvent<{ value: string[]; name: string }>) {\n    debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChangedHandler = (event: CustomEvent<{ value: string[]; name: string }>) => {\n      const { value } = event.detail;\n      this.selectedCalendars = [...value];\n      if (this.selectedCalendars.length === 0) {\n        this.error = `Select at least one calendar.`;\n        this.internals.setValidity({ customError: true }, `Select at least one calendar.`);\n      } else {\n        this.error = '';\n        this.internals.setValidity({});\n      }\n      this.internals.setFormValue(value.toString(), this.name);\n    };\n    this.valueChanged.emit({ ...event.detail, name: this.name, valueChangedHandler });\n  }\n\n  @RegisterComponent<NylasCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-calendar-picker',\n    stateToProps: new Map([['schedulerConfig.currentUser', 'currentUser']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string[]; name: string; valueChangedHandler?: (event: CustomEvent<{ value: string[]; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChangedHandler } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChangedHandler) {\n          valueChangedHandler(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const calendarOptions =\n      this.calendars?.map(calendar => {\n        return {\n          value: calendar.id,\n          label: calendar.name,\n          selected:\n            this.defaultSelectedCalendars?.includes(calendar.id) ||\n            (this.defaultSelectedCalendars?.includes('primary') || this.defaultSelectedCalendars?.length === 0\n              ? calendar.id === this.currentUser?.email || calendar.id === this.name.split('participant-')[1]\n              : false),\n        };\n      }) ?? [];\n\n    return (\n      <Host>\n        <div class=\"nylas-calendar-picker\" part=\"ncp\">\n          {calendarOptions.length > 0 ? (\n            <div class=\"nylas-calendar-picker__dropdown\">\n              <multi-select-dropdown\n                name={this.name}\n                options={calendarOptions}\n                error={this.error}\n                exportparts=\"msd_dropdown: ncp__dropdown, msd_dropdown-button: ncp__dropdown-button, msd_dropdown-content: ncp__dropdown-content\"\n              ></multi-select-dropdown>\n            </div>\n          ) : (\n            <div class=\"nylas-calendar-picker__loading\">\n              <span class=\"label\">\n                Select calendars that will be checked for availability <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-cancellation-policy/nylas-cancellation-policy.css

@@ -36,7 +36,8 @@
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
-  line-height: 150%; /* 21px */
+  line-height: 150%;
+  /* 21px */
 }
 .nylas-cancellation-policy label span.label-icon {
   margin-left: 4px;

package/dist/collection/components/scheduler-editor/nylas-cancellation-policy/nylas-cancellation-policy.js

@@ -56,7 +56,7 @@ export class NylasCancellationPolicy {
         this.valueChanged.emit({ value: value, name: this.name });
     }
     render() {
-        return (h(Host, { key: '3a6dfd352ec770b8103541bf2145147c84832402' }, h("div", { key: '1cfa42ee08f5182fe9e1405ac6c8c56cea1c070e', class: "nylas-cancellation-policy", part: "ncpolicy" }, h("label", { key: 'a9867af2834b0a6d417a08c58695b38850d19796', htmlFor: this.name }, "Cancellation policy message", h("span", { key: 'c9a6e487bd1cfd0d594aefb7820fc5a29f10c1e5', class: "label-icon" }, h("tooltip-component", { key: '653b93c98e586c52ffa0c34d7031370e24836f60' }, h("info-icon", { key: '5164bfd6ae87d969e9022edf78a7e9860d8f1aac', slot: "tooltip-icon" }), h("span", { key: '3cd23badfe5525228486767147a5db993ce37737', slot: "tooltip-content" }, "Attendees receive this message if trying to cancel the event. Attendees are asked to provide a reason for cancellation.")))), h("textarea", { key: '85b6eee5d41437810195739c364a7b1195da928a', id: this.name, part: "ncpolicy__textarea", name: this.name, value: this.message, maxlength: "250", onInput: e => this.handleChange(e) }))));
+        return (h(Host, { key: '4bae0ed63f5beb4bfded63e6a6243ad9231706cc' }, h("div", { key: 'e8b16dcdf8d9095a9922ec237cb30f3ea6501dde', class: "nylas-cancellation-policy", part: "ncpolicy" }, h("label", { key: '3813b4c723c97c0c1aae070c88cf0111c73d9a3f', htmlFor: this.name }, "Cancellation policy message", h("span", { key: '39b8a017d43bd8ea0d6e24b4ac180a551d88c963', class: "label-icon" }, h("tooltip-component", { key: 'f5ecc2daf78366a81869aec1a8b0aa783e338b20' }, h("info-icon", { key: '4f128afc88ab509aeff42e1491c6dde245014685', slot: "tooltip-icon" }), h("span", { key: '28446b374372f8c36566fd6b7c6e6babb3668a1a', slot: "tooltip-content" }, "Attendees receive this message if trying to cancel the event. Attendees are asked to provide a reason for cancellation.")))), h("textarea", { key: 'd518b68d61229a2a9ee9c3cda2a2a17b834e7343', id: this.name, part: "ncpolicy__textarea", name: this.name, value: this.message, maxlength: "250", onInput: e => this.handleChange(e) }))));
     }
     static get is() { return "nylas-cancellation-policy"; }
     static get encapsulation() { return "shadow"; }
@@ -90,8 +90,11 @@ export class NylasCancellationPolicy {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The selected config"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The selected config"
+                        }],
+                    "text": ""
                 }
             },
             "cancellationPolicy": {
@@ -105,8 +108,11 @@ export class NylasCancellationPolicy {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The cancellation policy stored in the configuration"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The cancellation policy stored in the configuration"
+                        }],
+                    "text": ""
                 },
                 "attribute": "cancellation-policy",
                 "reflect": false
@@ -122,8 +128,11 @@ export class NylasCancellationPolicy {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The name of the cancellation policy input."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The name of the cancellation policy input."
+                        }],
+                    "text": ""
                 },
                 "attribute": "name",
                 "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-cancellation-policy.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-cancellation-policy/nylas-cancellation-policy.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-cancellation-policy` component is a form input for the cancellation policy message of an event.\n * @part ncpolicy - The cancellation policy container\n * @part ncpolicy__textarea - The cancellation policy textarea\n */\n@Component({\n  tag: 'nylas-cancellation-policy',\n  styleUrl: 'nylas-cancellation-policy.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCancellationPolicy {\n  /**\n   * The host element <nylas-cancellation-policy>\n   */\n  @Element() host!: HTMLElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The cancellation policy stored in the configuration\n   */\n  @Prop() cancellationPolicy?: string;\n\n  /**\n   * The name of the cancellation policy input.\n   */\n  @Prop() name: string = 'cancelation-policy';\n  /**\n   * The selected cancellation policy state. This defaults to the cancellation policy from the configuration or an empty string.\n   */\n  @State() message!: string;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\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-cancellation-policy', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.message = newValue?.scheduler?.cancellation_policy || this.cancellationPolicy || '';\n  }\n\n  /**\n   * Event emitted when the cancellation policy message changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-cancellation-policy', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-cancellation-policy', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-cancellation-policy', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.message = this.cancellationPolicy || '';\n    }\n  }\n\n  disconnectedCallback() {\n    debug('nylas-cancellation-policy', 'disconnectedCallback');\n  }\n\n  handleChange(event) {\n    const value = sanitize(event.target.value);\n    this.message = value;\n    this.internals.setFormValue(value, this.name);\n    this.valueChanged.emit({ value: value, name: this.name });\n  }\n\n  @RegisterComponent<NylasCancellationPolicy, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-cancellation-policy',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-cancellation-policy\" part=\"ncpolicy\">\n          <label htmlFor={this.name}>\n            Cancellation policy message\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Attendees receive this message if trying to cancel the event. Attendees are asked to provide a reason for cancellation.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <textarea id={this.name} part=\"ncpolicy__textarea\" name={this.name} value={this.message} maxlength=\"250\" onInput={e => this.handleChange(e)}></textarea>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-cancellation-policy.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-cancellation-policy/nylas-cancellation-policy.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-cancellation-policy` component is a form input for the cancellation policy message of an event.\n * @part ncpolicy - The cancellation policy container\n * @part ncpolicy__textarea - The cancellation policy textarea\n */\n@Component({\n  tag: 'nylas-cancellation-policy',\n  styleUrl: 'nylas-cancellation-policy.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCancellationPolicy {\n  /**\n   * The host element <nylas-cancellation-policy>\n   */\n  @Element() host!: HTMLElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * @standalone\n   * The cancellation policy stored in the configuration\n   */\n  @Prop() cancellationPolicy?: string;\n\n  /**\n   * @standalone\n   * The name of the cancellation policy input.\n   */\n  @Prop() name: string = 'cancelation-policy';\n  /**\n   * The selected cancellation policy state. This defaults to the cancellation policy from the configuration or an empty string.\n   */\n  @State() message!: string;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\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-cancellation-policy', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.message = newValue?.scheduler?.cancellation_policy || this.cancellationPolicy || '';\n  }\n\n  /**\n   * Event emitted when the cancellation policy message changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-cancellation-policy', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-cancellation-policy', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-cancellation-policy', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.message = this.cancellationPolicy || '';\n    }\n  }\n\n  disconnectedCallback() {\n    debug('nylas-cancellation-policy', 'disconnectedCallback');\n  }\n\n  handleChange(event) {\n    const value = sanitize(event.target.value);\n    this.message = value;\n    this.internals.setFormValue(value, this.name);\n    this.valueChanged.emit({ value: value, name: this.name });\n  }\n\n  @RegisterComponent<NylasCancellationPolicy, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-cancellation-policy',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-cancellation-policy\" part=\"ncpolicy\">\n          <label htmlFor={this.name}>\n            Cancellation policy message\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Attendees receive this message if trying to cancel the event. Attendees are asked to provide a reason for cancellation.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <textarea id={this.name} part=\"ncpolicy__textarea\" name={this.name} value={this.message} maxlength=\"250\" onInput={e => this.handleChange(e)}></textarea>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.js

@@ -93,8 +93,9 @@ export class NylasConfirmationEmail {
         this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });
     }
     render() {
-        const organizerName = this.participantsState.find(p => p.is_organizer)?.name;
-        return (h(Host, { key: '113ee760057ff8f3d2c4706021b529a5cae8fa9b' }, h("div", { key: '43d955f1781f9758066da4d94f336e862b22a5c9', class: "nylas-confirmation-email", part: "nce" }, h("div", { key: '93c74d8fd4ab8e10ad83954c97ef93a201a43e1a', class: "header", part: "nce__header" }, h("div", { key: 'f9cc4b2c2d43d512794df2860a95d07ee77ddb80' }, h("h3", { key: 'd942c04cd5909abf82cfa7d53a7405c0705c4a2a' }, this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`), h("p", { key: 'd7ee4208be4934a80e33d1dd8abb09e0ab00c13b' }, "Booking confirmation email")), this.isConfirmationEmailOpen ? (h("div", { class: "confirmation-email-toggle", part: "nce__confirmation-email-toggle--container" }, h("span", { class: `chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" })))) : (h("button-component", { variant: 'basic', clickHandler: event => {
+        const organizer = this.participantsState.find(p => p.is_organizer);
+        const organizerName = organizer?.name || organizer?.email;
+        return (h(Host, { key: '0cd4c1886c65ead0e525ea96fe26a1316c61db7f' }, h("div", { key: '1901775f8a1364fe16485eeaf27d44862e74a642', class: "nylas-confirmation-email", part: "nce" }, h("div", { key: '241cf1a885d4d97d53c158e5691e350aa14b549f', class: "header", part: "nce__header" }, h("div", { key: 'e37c36a4d8f1f82669f3a397969202d3a2612b0e' }, h("h3", { key: 'ae34b848907720867cb014000e5b7367bcabedb3' }, this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`), h("p", { key: '97d7c78a88b20be8c5b0a27485f917628f1c6edc' }, "Booking confirmation email")), this.isConfirmationEmailOpen ? (h("div", { class: "confirmation-email-toggle", part: "nce__confirmation-email-toggle--container" }, h("span", { class: `chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" })))) : (h("button-component", { variant: 'basic', clickHandler: event => {
                 event.preventDefault();
                 this.toggleConfirmationEmail();
             } }, h("edit-icon", { width: "16", height: "16" }), "Edit"))), this.isConfirmationEmailOpen ? (h("div", { class: "nylas-confirmation-email__body", part: "nce__body" }, h("div", { class: "nylas-confirmation-email__section" }, h("div", { class: "nylas-confirmation-email__row" }, h("label", null, "Send confirmation email", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "You and your guests will receive a confirmation email immediately upon booking.")))), h("span", { class: "selected-value" }, "Immediately upon booking")), h("div", { class: "nylas-confirmation-email__row" }, h("div", { class: "subsection" }, h("div", { class: "input-container" }, h("label", null, "Company logo URL", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x 100px.")))), this.confirmationEmail && (h("input-image-url", { name: "confirmation-email-logo", exportparts: "iiu__logo-input-textfield: nce__input-image-url", imageUrl: this.confirmationEmail?.logo ?? '' }))))), h("div", { class: "nylas-confirmation-email__row full-width-col" }, h("div", { class: "subsection" }, h("h3", null, "Email message"), h("div", { class: "input-container" }, h("label", { htmlFor: "title" }, "Custom email title", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "An email title is a headline within the body of the email. This doesn't change the subject line.")))), h("input-component", { name: "confirmation-email-title", maxLength: 60, placeholder: `Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`, defaultValue: this.confirmationEmail?.booking_confirmed?.title ?? '' })), h("div", { class: "input-container" }, h("textarea-component", { label: "Additional info", name: "confirmation-email-body", id: "confirmation-email-body", placeholder: "Default body", tooltip: "Scheduler adds the content of the box to the email body.", maxLength: 500, defaultValue: this.confirmationEmail?.booking_confirmed?.body ?? '' }))))))) : (h("div", { class: "nylas-confirmation-email__summary", part: "nce__summary" }, h("p", null, h("span", { class: "summary-icon" }, h("person-clipboard-icon", null)), "All host & guests"), h("p", null, h("span", { class: "summary-icon" }, h("clock-icon", null)), "Immediately on booking"))))));
@@ -131,8 +132,11 @@ export class NylasConfirmationEmail {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The selected config"
+                    "tags": [{
+                            "name": "internal",
+                            "text": "The selected config"
+                        }],
+                    "text": ""
                 }
             },
             "confirmationEmailTemplate": {

package/dist/collection/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-confirmation-email.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, EmailTemplate, Participant } from '@nylas/core';\n\n/**\n * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nce__tab-heading - The nylas-confirmation-email main tab heading\n * @part nce - The nylas-confirmation-email container\n * @part nce__header - The header of the event communication section\n * @part nce__body - The body of the event communication section\n * @part nce__confirmation-email-toggle--container - The confirmation email drawer toggle container\n * @part nce__input-image-url - The input image URL container\n * @part nce__summary - The confirmation card summary container\n */\n@Component({\n  tag: 'nylas-confirmation-email',\n  styleUrl: 'nylas-confirmation-email.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConfirmationEmail {\n  @Element() host!: HTMLNylasConfirmationEmailElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The confirmation email template data to display\n   */\n  @Prop() confirmationEmailTemplate: EmailTemplate = {} as EmailTemplate;\n  /**\n   * Is the confirmation email card open\n   */\n  @Prop() isOpen: boolean = false;\n  /**\n   * List of participants\n   */\n  @Prop() participants: Participant[] = [];\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'confirmation-email-template';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() confirmationEmail!: EmailTemplate;\n\n  /**\n   * The internal state to store the isOpen state.\n   */\n  @State() isConfirmationEmailOpen: boolean = this.isOpen;\n\n  /**\n   * The internal state to store the participants.\n   */\n  @State() participantsState: Participant[] = this.participants;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-confirmation-email', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-confirmation-email', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-confirmation-email', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-confirmation-email', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.confirmationEmail = this.confirmationEmailTemplate;\n      this.isConfirmationEmailOpen = this.isOpen;\n      this.participantsState = this.participants;\n    }\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-confirmation-email', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-confirmation-email', 'selectedConfigurationChangedHandler', newValue);\n    this.confirmationEmail = newValue?.scheduler?.email_template || this.confirmationEmailTemplate;\n    this.isConfirmationEmailOpen = !newValue?.event_booking?.reminders?.length;\n    this.participantsState = newValue?.participants || this.participants;\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n    if (name === 'confirmation-email-title') {\n      this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), title: value } };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    } else if (name === 'confirmation-email-body' && type === 'multi_line_text') {\n      this.handleEmailBodyChange(event);\n    }\n  }\n\n  @Listen('valueChanged')\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-confirmation-email', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (name === 'confirmation-email-logo') {\n      this.confirmationEmail = { ...this.confirmationEmail, logo: value };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    }\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-confirmation-email', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isConfirmationEmailOpen = !this.isConfirmationEmailOpen;\n  }\n\n  handleEmailBodyChange(event) {\n    const value = sanitize(event.detail.value);\n    this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), body: value } };\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  @RegisterComponent<NylasConfirmationEmail, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-confirmation-email',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const organizerName = this.participantsState.find(p => p.is_organizer)?.name;\n    return (\n      <Host>\n        <div class=\"nylas-confirmation-email\" part=\"nce\">\n          <div class=\"header\" part=\"nce__header\">\n            <div>\n              <h3>{this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`}</h3>\n              <p>Booking confirmation email</p>\n            </div>\n            {this.isConfirmationEmailOpen ? (\n              <div class=\"confirmation-email-toggle\" part=\"nce__confirmation-email-toggle--container\">\n                <span class={`chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            ) : (\n              <button-component\n                variant={'basic'}\n                clickHandler={event => {\n                  event.preventDefault();\n                  this.toggleConfirmationEmail();\n                }}\n              >\n                <edit-icon width=\"16\" height=\"16\"></edit-icon>\n                Edit\n              </button-component>\n            )}\n          </div>\n\n          {this.isConfirmationEmailOpen ? (\n            <div class=\"nylas-confirmation-email__body\" part=\"nce__body\">\n              <div class=\"nylas-confirmation-email__section\">\n                <div class=\"nylas-confirmation-email__row\">\n                  <label>\n                    Send confirmation email\n                    <span class=\"label-icon\">\n                      <tooltip-component>\n                        <info-icon slot=\"tooltip-icon\" />\n                        <span slot=\"tooltip-content\">You and your guests will receive a confirmation email immediately upon booking.</span>\n                      </tooltip-component>\n                    </span>\n                  </label>\n                  <span class=\"selected-value\">Immediately upon booking</span>\n                </div>\n                <div class=\"nylas-confirmation-email__row\">\n                  <div class=\"subsection\">\n                    <div class=\"input-container\">\n                      <label>\n                        Company logo URL\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">\n                              This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x\n                              100px.\n                            </span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n\n                      {this.confirmationEmail && (\n                        <input-image-url\n                          name=\"confirmation-email-logo\"\n                          exportparts=\"iiu__logo-input-textfield: nce__input-image-url\"\n                          imageUrl={this.confirmationEmail?.logo ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"nylas-confirmation-email__row full-width-col\">\n                  <div class=\"subsection\">\n                    <h3>Email message</h3>\n                    <div class=\"input-container\">\n                      <label htmlFor=\"title\">\n                        Custom email title\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">An email title is a headline within the body of the email. This doesn&apos;t change the subject line.</span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n                      <input-component\n                        name=\"confirmation-email-title\"\n                        maxLength={60}\n                        placeholder={`Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.title ?? ''}\n                      ></input-component>\n                    </div>\n                    <div class=\"input-container\">\n                      {/* <label htmlFor=\"title\">Email body</label> */}\n                      <textarea-component\n                        label=\"Additional info\"\n                        name=\"confirmation-email-body\"\n                        id=\"confirmation-email-body\"\n                        placeholder=\"Default body\"\n                        tooltip=\"Scheduler adds the content of the box to the email body.\"\n                        maxLength={500}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                      ></textarea-component>\n\n                      {/* <textarea\n                        id=\"description\"\n                        part=\"nrt__textarea\"\n                        name=\"confirmation-email-body\"\n                        placeholder='Default body'\n                        value={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                        maxlength=\"500\"\n                        rows={2}\n                        onInput={e => this.handleEmailBodyChange(e)}\n                      ></textarea> */}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div class=\"nylas-confirmation-email__summary\" part=\"nce__summary\">\n              <p>\n                <span class=\"summary-icon\">\n                  <person-clipboard-icon></person-clipboard-icon>\n                </span>\n                All host & guests\n              </p>\n              <p>\n                <span class=\"summary-icon\">\n                  <clock-icon></clock-icon>\n                </span>\n                Immediately on booking\n              </p>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-confirmation-email.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, EmailTemplate, Participant } from '@nylas/core';\n\n/**\n * The `nylas-confirmation-email` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nce__tab-heading - The nylas-confirmation-email main tab heading\n * @part nce - The nylas-confirmation-email container\n * @part nce__header - The header of the event communication section\n * @part nce__body - The body of the event communication section\n * @part nce__confirmation-email-toggle--container - The confirmation email drawer toggle container\n * @part nce__input-image-url - The input image URL container\n * @part nce__summary - The confirmation card summary container\n */\n@Component({\n  tag: 'nylas-confirmation-email',\n  styleUrl: 'nylas-confirmation-email.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConfirmationEmail {\n  @Element() host!: HTMLNylasConfirmationEmailElement;\n  /**\n   * @internal\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The confirmation email template data to display\n   */\n  @Prop() confirmationEmailTemplate: EmailTemplate = {} as EmailTemplate;\n  /**\n   * Is the confirmation email card open\n   */\n  @Prop() isOpen: boolean = false;\n  /**\n   * List of participants\n   */\n  @Prop() participants: Participant[] = [];\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'confirmation-email-template';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() confirmationEmail!: EmailTemplate;\n\n  /**\n   * The internal state to store the isOpen state.\n   */\n  @State() isConfirmationEmailOpen: boolean = this.isOpen;\n\n  /**\n   * The internal state to store the participants.\n   */\n  @State() participantsState: Participant[] = this.participants;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-confirmation-email', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-confirmation-email', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-confirmation-email', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-confirmation-email', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.confirmationEmail = this.confirmationEmailTemplate;\n      this.isConfirmationEmailOpen = this.isOpen;\n      this.participantsState = this.participants;\n    }\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-confirmation-email', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-confirmation-email', 'selectedConfigurationChangedHandler', newValue);\n    this.confirmationEmail = newValue?.scheduler?.email_template || this.confirmationEmailTemplate;\n    this.isConfirmationEmailOpen = !newValue?.event_booking?.reminders?.length;\n    this.participantsState = newValue?.participants || this.participants;\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n    if (name === 'confirmation-email-title') {\n      this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), title: value } };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    } else if (name === 'confirmation-email-body' && type === 'multi_line_text') {\n      this.handleEmailBodyChange(event);\n    }\n  }\n\n  @Listen('valueChanged')\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-confirmation-email', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (name === 'confirmation-email-logo') {\n      this.confirmationEmail = { ...this.confirmationEmail, logo: value };\n      this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n    }\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-confirmation-email', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isConfirmationEmailOpen = !this.isConfirmationEmailOpen;\n  }\n\n  handleEmailBodyChange(event) {\n    const value = sanitize(event.detail.value);\n    this.confirmationEmail = { ...this.confirmationEmail, booking_confirmed: { ...(this.confirmationEmail?.booking_confirmed || {}), body: value } };\n    this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });\n  }\n\n  @RegisterComponent<NylasConfirmationEmail, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-confirmation-email',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const organizer = this.participantsState.find(p => p.is_organizer);\n    const organizerName = organizer?.name || organizer?.email;\n\n    return (\n      <Host>\n        <div class=\"nylas-confirmation-email\" part=\"nce\">\n          <div class=\"header\" part=\"nce__header\">\n            <div>\n              <h3>{this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`}</h3>\n              <p>Booking confirmation email</p>\n            </div>\n            {this.isConfirmationEmailOpen ? (\n              <div class=\"confirmation-email-toggle\" part=\"nce__confirmation-email-toggle--container\">\n                <span class={`chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            ) : (\n              <button-component\n                variant={'basic'}\n                clickHandler={event => {\n                  event.preventDefault();\n                  this.toggleConfirmationEmail();\n                }}\n              >\n                <edit-icon width=\"16\" height=\"16\"></edit-icon>\n                Edit\n              </button-component>\n            )}\n          </div>\n\n          {this.isConfirmationEmailOpen ? (\n            <div class=\"nylas-confirmation-email__body\" part=\"nce__body\">\n              <div class=\"nylas-confirmation-email__section\">\n                <div class=\"nylas-confirmation-email__row\">\n                  <label>\n                    Send confirmation email\n                    <span class=\"label-icon\">\n                      <tooltip-component>\n                        <info-icon slot=\"tooltip-icon\" />\n                        <span slot=\"tooltip-content\">You and your guests will receive a confirmation email immediately upon booking.</span>\n                      </tooltip-component>\n                    </span>\n                  </label>\n                  <span class=\"selected-value\">Immediately upon booking</span>\n                </div>\n                <div class=\"nylas-confirmation-email__row\">\n                  <div class=\"subsection\">\n                    <div class=\"input-container\">\n                      <label>\n                        Company logo URL\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">\n                              This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x\n                              100px.\n                            </span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n\n                      {this.confirmationEmail && (\n                        <input-image-url\n                          name=\"confirmation-email-logo\"\n                          exportparts=\"iiu__logo-input-textfield: nce__input-image-url\"\n                          imageUrl={this.confirmationEmail?.logo ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"nylas-confirmation-email__row full-width-col\">\n                  <div class=\"subsection\">\n                    <h3>Email message</h3>\n                    <div class=\"input-container\">\n                      <label htmlFor=\"title\">\n                        Custom email title\n                        <span class=\"label-icon\">\n                          <tooltip-component>\n                            <info-icon slot=\"tooltip-icon\" />\n                            <span slot=\"tooltip-content\">An email title is a headline within the body of the email. This doesn&apos;t change the subject line.</span>\n                          </tooltip-component>\n                        </span>\n                      </label>\n                      <input-component\n                        name=\"confirmation-email-title\"\n                        maxLength={60}\n                        placeholder={`Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.title ?? ''}\n                      ></input-component>\n                    </div>\n                    <div class=\"input-container\">\n                      {/* <label htmlFor=\"title\">Email body</label> */}\n                      <textarea-component\n                        label=\"Additional info\"\n                        name=\"confirmation-email-body\"\n                        id=\"confirmation-email-body\"\n                        placeholder=\"Default body\"\n                        tooltip=\"Scheduler adds the content of the box to the email body.\"\n                        maxLength={500}\n                        defaultValue={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                      ></textarea-component>\n\n                      {/* <textarea\n                        id=\"description\"\n                        part=\"nrt__textarea\"\n                        name=\"confirmation-email-body\"\n                        placeholder='Default body'\n                        value={this.confirmationEmail?.booking_confirmed?.body ?? ''}\n                        maxlength=\"500\"\n                        rows={2}\n                        onInput={e => this.handleEmailBodyChange(e)}\n                      ></textarea> */}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div class=\"nylas-confirmation-email__summary\" part=\"nce__summary\">\n              <p>\n                <span class=\"summary-icon\">\n                  <person-clipboard-icon></person-clipboard-icon>\n                </span>\n                All host & guests\n              </p>\n              <p>\n                <span class=\"summary-icon\">\n                  <clock-icon></clock-icon>\n                </span>\n                Immediately on booking\n              </p>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}