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

package/dist/nylas-web-elements/p-f8e8270d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,c as s,a as i}from"./p-68c2fadf.js";const a=".sc-chevron-icon-h{display:flex}";const n=a;const o=class{constructor(t){e(this,t);this.width="24";this.height="24"}render(){return t("svg",{key:"a2ba18045e1a3068427898b7b9d9755c80f0f53e",xmlns:"http://www.w3.org/2000/svg",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none"},t("path",{key:"0715fdfa6bb874fef9aee368d457e9dce64a6dea",fill:"currentColor",d:"M15.53 4.22a.75.75 0 0 1 0 1.06L8.81 12l6.72 6.72a.75.75 0 1 1-1.06 1.06l-7.25-7.25a.75.75 0 0 1 0-1.06l7.25-7.25a.75.75 0 0 1 1.06 0Z"}))}};o.style=n;const r=".sc-search-icon-h{display:flex}";const l=r;const d=class{constructor(t){e(this,t);this.width="15";this.height="15"}render(){return t("svg",{key:"90dee52a9a06d5f8e97efb9019d64e4949b002e4",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"8cfe4c5dc4ccbbdacd96229f25ae411272118a0b",fill:"currentColor",d:"M5.5 0C8.53757 0 11 2.46243 11 5.5C11 6.83879 10.5217 8.06586 9.72656 9.01962L13.8536 13.1464C14.0488 13.3417 14.0488 13.6583 13.8536 13.8536C13.68 14.0271 13.4106 14.0464 13.2157 13.9114L13.1464 13.8536L9.01962 9.72656C8.06586 10.5217 6.83879 11 5.5 11C2.46243 11 0 8.53757 0 5.5C0 2.46243 2.46243 0 5.5 0ZM5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1Z"}))}};d.style=l;const h=':host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;width:100%}@media screen and (max-width: 768px){:host{position:unset}}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}.dropdown{display:inline-block;width:inherit}.dropbtn{color:var(--nylas-base-800);padding:14px;font-size:1rem;font-family:var(--nylas-font-family);cursor:pointer;display:flex;justify-content:space-between;gap:0.5rem;background:transparent;border:1px solid var(--nylas-base-300);border-radius:var(--nylas-border-radius-2x)}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn.focus{background:transparent}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid #ccc;border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px}';const c=h;const p=class{constructor(t){e(this,t);this.nylasFormDropdownChanged=s(this,"nylasFormDropdownChanged",7);this.name=undefined;this.options=[];this.defaultSelectedOption=undefined;this.withSearch=true;this.label=undefined;this.required=false;this.pluralizedLabel="";this.dropdownButtonText=undefined;this.withChevron=true;this.selectedOption=this.defaultSelectedOption||null;this.isOpen=false;this.searchValue="";this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.errorMessage=""}optionsChangedHandler(e,t){if(e===t){return}this.filteredOptions=e}defaultSelectedOptionChangedHandler(e,t){if(typeof e==="undefined"||e?.label===t?.label){return}this.selectedOption=e}componentWillLoad(){this.filteredOptions=this.options;if(!this.selectedOption&&!!this.defaultSelectedOption){this.selectedOption=this.defaultSelectedOption}if(!this.selectedOption&&this.options.length>0){this.selectedOption=this.options[0]}}handleBookingFormSubmitted(e){this.validate(this.selectedOption?.value||"");if(this.errorMessage){e.preventDefault()}}validate(e){if(this.required&&!e){this.errorMessage=`${this.label} is required.`}else{this.errorMessage=""}}toggleDropdown(){this.isOpen=!this.isOpen}filterOptions(e){const t=e.target.value;this.searchValue=t;this.filteredOptions=this.options.filter((e=>e.label.toLowerCase().includes(t.toLowerCase())))}selectOption(e){this.errorMessage="";this.selectedOption=e;this.toggleDropdown();this.nylasFormDropdownChanged.emit({value:e.value,name:this.name,error:this.errorMessage,label:this.label})}handleSelectButtonKeyDown(e){switch(e.key){case"ArrowDown":case"Enter":e.preventDefault();if(!this.isOpen){this.toggleDropdown()}this.inputRef?.focus();break;case"Escape":this.isOpen=false;break}}handleListboxKeydown(e){const t=this.filteredOptions;const s=t.findIndex((e=>e.value===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();if(s===t.length-1){this.ariaActivedescendant="";this.inputRef?.focus();return}const i=s+1<t.length?s+1:0;this.ariaActivedescendant=t[i].value;this.focusOption(i)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(s===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const i=s-1>=0?s-1:t.length-1;this.ariaActivedescendant=t[i].value;this.focusOption(i)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){this.selectOption(t[s])}}else if(e.key==="Escape"){this.isOpen=false}}focusOption(e){const t=this.filteredOptions[e];if(!t)return;const s=t.value;const i=this.el.shadowRoot?.getElementById(s);if(i){i.focus();i.scrollIntoView({behavior:"smooth",block:"nearest"})}}handleComboboxKeyDown(e){if(e.key==="ArrowDown"||e.key=="Tab"&&!e.shiftKey){e.preventDefault();this.ariaActivedescendant=this.filteredOptions[0].value;this.focusOption(0)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();this.ariaActivedescendant=this.filteredOptions[this.filteredOptions.length-1].value;this.focusOption(this.filteredOptions.length-1)}else if(e.key==="Escape"){this.isOpen=false}}generateButtonText(){if(this.dropdownButtonText){return this.dropdownButtonText}return this.selectedOption?.label?`${this.selectedOption?.label+this.pluralizedLabel}`:""}handleOutsideClick(e){const t=e.composedPath();const s=t.includes(this.el);if(!s&&this.isOpen){this.isOpen=false}}render(){return t("div",{key:"f643753d922b05b52ab0b8fe0dbc15733a9c699b",class:"dropdown",part:"sd_dropdown"},t("label",{key:"14478d5755183604ee9aa617ab9540be7c57604e",part:"sd_dropdown_label",class:{error:!!this.errorMessage}},this.label&&t("p",null,t("span",{class:"label"},this.label),this.required&&t("span",{class:"required"},"*")),t("button",{key:"0a053de6ef29c2c8ca232f52d1a3e787f54e69cc",part:"sd_dropdown-button",class:{dropbtn:true,open:this.isOpen,error:!!this.errorMessage},onClick:()=>this.toggleDropdown(),"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-label":this.name,onKeyDown:e=>this.handleSelectButtonKeyDown(e)},t("slot",{key:"857627db765aafdcf8c5241c97959cab5e323c39",name:"select-icon","aria-hidden":"true"}),t("span",{key:"18d16c1a7edc6fed463de8c9739782dbd0839b7c",class:"selected-option",part:"sd_dropdown-button-selected-label"},this.generateButtonText()),this.withChevron&&t("span",{class:{open:this.isOpen,closed:!this.isOpen,chevron:true},"aria-hidden":"true"},t("chevron-icon",{width:"16",height:"16"}))),this.errorMessage&&t("span",{class:"error help-text"},this.errorMessage)),this.isOpen?t("div",{class:"dropdown-content",part:"sd_dropdown-content"},this.withSearch&&t("div",{class:{"search-box":true,open:this.isOpen}},t("search-icon",{width:"15",height:"15",class:"icon"}),t("input",{type:"text",role:"combobox",placeholder:"Search",value:this.searchValue,ref:e=>this.inputRef=e,onInput:e=>this.filterOptions(e),onKeyDown:e=>this.handleComboboxKeyDown(e)})),t("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.filteredOptions.map((e=>e.value&&t("li",{tabindex:"0",key:e.value,id:e.value,onClick:()=>this.selectOption(e),role:"option"},e.labelHTML?t("div",{part:"sd_dropdown-labelhtml"},e.labelHTML):e.label))))):null)}get el(){return i(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultSelectedOption:["defaultSelectedOptionChangedHandler"]}}};p.style=c;export{o as chevron_icon,d as search_icon,p as select_dropdown};
+//# sourceMappingURL=p-f8e8270d.entry.js.map

package/dist/nylas-web-elements/p-f8e8270d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconCss","ChevronIconStyle0","ChevronIcon","render","h","key","xmlns","width","this","height","viewBox","fill","d","SearchIconStyle0","SearchIcon","selectDropdownCss","SelectDropdownStyle0","SelectDropdown","defaultSelectedOption","options","optionsChangedHandler","newValue","oldValue","filteredOptions","defaultSelectedOptionChangedHandler","label","selectedOption","componentWillLoad","length","handleBookingFormSubmitted","event","validate","value","errorMessage","preventDefault","required","toggleDropdown","isOpen","filterOptions","target","searchValue","filter","option","toLowerCase","includes","selectOption","nylasFormDropdownChanged","emit","name","error","handleSelectButtonKeyDown","inputRef","focus","handleListboxKeydown","e","items","currentIndex","findIndex","item","ariaActivedescendant","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","el","shadowRoot","getElementById","scrollIntoView","behavior","block","handleComboboxKeyDown","generateButtonText","dropdownButtonText","pluralizedLabel","handleOutsideClick","path","composedPath","isClickInside","class","part","dropbtn","open","onClick","onKeyDown","withChevron","closed","chevron","withSearch","type","role","placeholder","ref","onInput","tabindex","map","id","labelHTML"],"sources":["src/common/icons/icon.css?tag=chevron-icon&encapsulation=scoped","src/common/icons/chevron.tsx","src/common/icons/icon.css?tag=search-icon&encapsulation=scoped","src/common/icons/search.tsx","src/components/design-system/select-dropdown/select-dropdown.scss?tag=select-dropdown&encapsulation=shadow","src/components/design-system/select-dropdown/select-dropdown.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'chevron-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class ChevronIcon {\n  @Prop() width: string = '24';\n  @Prop() height: string = '24';\n\n  render() {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width={this.width} height={this.height} viewBox=\"0 0 24 24\" fill=\"none\">\n        <path fill=\"currentColor\" d=\"M15.53 4.22a.75.75 0 0 1 0 1.06L8.81 12l6.72 6.72a.75.75 0 1 1-1.06 1.06l-7.25-7.25a.75.75 0 0 1 0-1.06l7.25-7.25a.75.75 0 0 1 1.06 0Z\" />\n      </svg>\n    );\n  }\n}\n",":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'search-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class SearchIcon {\n  @Prop() width: string = '15';\n  @Prop() height: string = '15';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M5.5 0C8.53757 0 11 2.46243 11 5.5C11 6.83879 10.5217 8.06586 9.72656 9.01962L13.8536 13.1464C14.0488 13.3417 14.0488 13.6583 13.8536 13.8536C13.68 14.0271 13.4106 14.0464 13.2157 13.9114L13.1464 13.8536L9.01962 9.72656C8.06586 10.5217 6.83879 11 5.5 11C2.46243 11 0 8.53757 0 5.5C0 2.46243 2.46243 0 5.5 0ZM5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1Z\"\n        />\n      </svg>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  position: relative;\n  @media #{$mobile} {\n    position: unset;\n  }\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n  p {\n    margin: 0;\n  }\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\n.dropdown {\n  display: inline-block;\n  width: inherit;\n}\n\n.dropbtn {\n  color: var(--nylas-base-800);\n  padding: 14px;\n  font-size: 1rem;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n  background: transparent;\n  border: 1px solid var(--nylas-base-300);\n  border-radius: var(--nylas-border-radius-2x);\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n  &.focus {\n    background: transparent;\n  }\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n    &.open {\n      transform: rotate(90deg);\n    }\n    &.closed {\n      transform: rotate(270deg);\n    }\n    &.selected-option {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 144px;\n      font-size: 14px;\n      line-height: 20px;\n      @media #{$mobile} {\n        max-width: 124px;\n        font-size: 16px;\n      }\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\n  background-color: var(--nylas-base-0);\n  width: 100%;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n  border-bottom: 1px solid var(--nylas-base-200);\n  padding: 10px;\n  position: sticky;\n  top: 0;\n  background: var(--nylas-base-0);\n  .icon {\n    position: absolute;\n    top: 1.25rem;\n    left: 1.25rem;\n    color: var(--nylas-base-300);\n  }\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: black;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0px;\n    text-align: left;\n    cursor: pointer;\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n  }\n}\n\n.dropdown-content .selected {\n  background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n  width: -webkit-fill-available;\n  padding: inherit;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  position: sticky;\n  background: no-repeat scroll 7px 7px;\n  padding-left: 30px;\n  background-size: 16px 16px;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n  labelHTML?: HTMLElement;\n  label: string;\n  value: string;\n}\n\n/**\n * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n  tag: 'select-dropdown',\n  styleUrl: 'select-dropdown.scss',\n  shadow: true,\n})\nexport class SelectDropdown {\n  @Element() el!: HTMLElement;\n\n  private inputRef?: HTMLInputElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n  /**\n   * The options to display in the dropdown\n   */\n  @Prop() options: DropdownOption[] = [];\n  /**\n   * The default selected option\n   */\n  @Prop() defaultSelectedOption?: DropdownOption;\n  /**\n   * Should show search input\n   */\n  @Prop() withSearch: boolean = true;\n\n  /**\n   * The label for the dropdown, skipped if no label is provided\n   */\n  @Prop() label?: string;\n\n  /**\n   * If true, the dropdown is required for form submission\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n   */\n  @Prop() pluralizedLabel: string = '';\n  /**\n   * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions &  dropdownText name on the dropdown intead of selected value\n   */\n  @Prop() dropdownButtonText?: string;\n  /**\n   * Should show chevron on button\n   */\n  @Prop() withChevron: boolean = true;\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedOption: DropdownOption | null = this.defaultSelectedOption || null;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n  /**\n   * The search value for the dropdown\n   */\n  @State() searchValue: string = '';\n  /**\n   * The filtered options based on the search value\n   */\n  @State() filteredOptions: DropdownOption[] = [...this.options];\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n   * the active option.\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * The error message to display when the value is empty or null and the dropdown is required\n   */\n  @State() errorMessage: string = '';\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: string;\n    error?: string;\n    label?: string;\n  }>;\n\n  @Watch('options')\n  optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n    if (newValue === oldValue) {\n      return;\n    }\n    this.filteredOptions = newValue;\n  }\n\n  @Watch('defaultSelectedOption')\n  defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n    if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n      return;\n    }\n    this.selectedOption = newValue;\n  }\n\n  // Lifecycle methods\n  componentWillLoad() {\n    this.filteredOptions = this.options;\n    // Set the selected option to the first option if no option is selected\n    if (!this.selectedOption && !!this.defaultSelectedOption) {\n      this.selectedOption = this.defaultSelectedOption;\n    }\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validate(this.selectedOption?.value || '');\n    if (this.errorMessage) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  validate(value: string) {\n    if (this.required && !value) {\n      this.errorMessage = `${this.label} is required.`;\n    } else {\n      this.errorMessage = '';\n    }\n  }\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  filterOptions(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    this.searchValue = value;\n    this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n  }\n\n  selectOption(option: DropdownOption): void {\n    this.errorMessage = '';\n    this.selectedOption = option;\n    this.toggleDropdown();\n    this.nylasFormDropdownChanged.emit({\n      value: option.value,\n      name: this.name,\n      error: this.errorMessage,\n      label: this.label,\n    });\n  }\n\n  handleSelectButtonKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.toggleDropdown();\n        }\n        this.inputRef?.focus();\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  handleListboxKeydown(e) {\n    const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n    const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n    if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n      e.preventDefault();\n      if (currentIndex === items.length - 1) {\n        this.ariaActivedescendant = '';\n        this.inputRef?.focus();\n        return;\n      }\n      const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n      this.ariaActivedescendant = items[nextIndex].value;\n      this.focusOption(nextIndex);\n    } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n      e.preventDefault();\n      if (currentIndex === 0) {\n        this.ariaActivedescendant = '';\n        this.inputRef?.focus();\n        return;\n      }\n      const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n      this.ariaActivedescendant = items[prevIndex].value;\n      this.focusOption(prevIndex);\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.ariaActivedescendant) {\n        this.selectOption(items[currentIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n\n  focusOption(index) {\n    const option = this.filteredOptions[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.value;\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  handleComboboxKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n      event.preventDefault();\n      this.ariaActivedescendant = this.filteredOptions[0].value;\n      this.focusOption(0);\n    } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n      event.preventDefault();\n      this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n      this.focusOption(this.filteredOptions.length - 1);\n    } else if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n\n  generateButtonText(): string {\n    if (this.dropdownButtonText) {\n      return this.dropdownButtonText;\n    }\n    return this.selectedOption?.label ? `${this.selectedOption?.label + this.pluralizedLabel}` : '';\n  }\n\n  // Event listeners\n  @Listen('click', { target: 'document', capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"dropdown\" part=\"sd_dropdown\">\n        <label part=\"sd_dropdown_label\" class={{ error: !!this.errorMessage }}>\n          {this.label && (\n            <p>\n              <span class=\"label\">{this.label}</span>\n              {this.required && <span class=\"required\">*</span>}\n            </p>\n          )}\n          <button\n            part=\"sd_dropdown-button\"\n            class={{ dropbtn: true, open: this.isOpen, error: !!this.errorMessage }}\n            onClick={() => this.toggleDropdown()}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.name}\n            onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n          >\n            <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n            <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n              {this.generateButtonText()}\n            </span>\n            {this.withChevron && (\n              <span\n                class={{\n                  open: this.isOpen,\n                  closed: !this.isOpen,\n                  chevron: true,\n                }}\n                aria-hidden=\"true\"\n              >\n                <chevron-icon width=\"16\" height=\"16\" />\n              </span>\n            )}\n          </button>\n          {this.errorMessage && <span class=\"error help-text\">{this.errorMessage}</span>}\n        </label>\n\n        {this.isOpen ? (\n          <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n            {this.withSearch && (\n              <div class={{ 'search-box': true, 'open': this.isOpen }}>\n                <search-icon width=\"15\" height=\"15\" class={'icon'} />\n                <input\n                  type=\"text\"\n                  role=\"combobox\"\n                  placeholder=\"Search\"\n                  value={this.searchValue}\n                  ref={el => (this.inputRef = el)}\n                  onInput={event => this.filterOptions(event)}\n                  onKeyDown={e => this.handleComboboxKeyDown(e)}\n                />\n              </div>\n            )}\n            <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n              {this.filteredOptions.map(\n                option =>\n                  option.value && (\n                    <li tabindex=\"0\" key={option.value} id={option.value} onClick={() => this.selectOption(option)} role=\"option\">\n                      {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n                    </li>\n                  ),\n              )}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/types/common/constants.d.ts

@@ -12,3 +12,20 @@ export declare const EVENT_TITLE_TOKENS: {
     description: string;
 }[];
 export declare const DEFAULT_OPEN_HOURS: OpenHours[];
+export declare const PROVIDER_CONFERENCE_MAP: {
+    google: string;
+    zoom: string;
+    microsoft: string;
+};
+export declare const CONFERENCE_PROVIDER_MAP: {
+    'Google Meet': string;
+    'Zoom Meeting': string;
+    'Microsoft Teams': string;
+};
+export declare const NON_PROVIDER_CONFERENCE_OPTIONS: string[];
+export declare const DEFAULT_FORM_FIELD_TYPES: {
+    label: string;
+    value: string;
+}[];
+export declare const FIELD_TYPES: any;
+export declare const PROVIDER_CONFERENCE_OPTIONS: string[];

package/dist/types/common/icons/calendar-agenda-fill.d.ts

@@ -0,0 +1,5 @@
+export declare class CalendarAgendaFillIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/calendar-agenda.d.ts

@@ -0,0 +1,5 @@
+export declare class CalendarAgendaIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/copy.d.ts

@@ -0,0 +1,5 @@
+export declare class CopyIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/delete.d.ts

@@ -0,0 +1,5 @@
+export declare class DeleteIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/dragable.d.ts

@@ -0,0 +1,5 @@
+export declare class DragableIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/edit.d.ts

@@ -0,0 +1,5 @@
+export declare class EditIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/eye.d.ts

@@ -0,0 +1,5 @@
+export declare class EyeIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/google-meet.d.ts

@@ -0,0 +1,5 @@
+export declare class GoogleMeetIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/microsof-teams.d.ts

@@ -0,0 +1,5 @@
+export declare class GoogleMeetIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/plus.d.ts

@@ -0,0 +1,5 @@
+export declare class PlusIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/icons/zoom.d.ts

@@ -0,0 +1,5 @@
+export declare class ZoomIcon {
+    width: string;
+    height: string;
+    render(): any;
+}

package/dist/types/common/nylas-api-request.d.ts

@@ -10,6 +10,7 @@ export type User = {
     id: string;
     email: string;
     name?: string;
+    provider?: string;
 };
 export type AuthArgs = {
     provider?: string;

package/dist/types/common/types.d.ts

@@ -33,6 +33,7 @@ export type AvailabilityTimeslot = {
     end_time: number;
 };
 export type AvailabilityResponse = {
+    order?: string[];
     time_slots: AvailabilityTimeslot[];
     participants: {
         email: string;

package/dist/types/components/design-system/checkbox-component/checkbox-component.d.ts

@@ -3,13 +3,16 @@ export declare class CheckboxComponent {
     name: string;
     checked: boolean;
     label: string;
+    required: boolean;
     isChecked: boolean;
+    error: string;
     nylasFormCheckboxToggled: EventEmitter<{
         checked: boolean;
         name: string;
         label: string;
     }>;
     componentWillLoad(): void;
+    handleBookingFormSubmitted(event: CustomEvent): void;
     toggleCheck(): void;
     render(): any;
 }

package/dist/types/components/design-system/input-component/input-component.d.ts

@@ -3,7 +3,7 @@ export declare class InputComponent {
     name: string;
     defaultValue: string;
     label: string;
-    type: 'text' | 'email' | 'tel';
+    type: 'text' | 'email' | 'phone_number';
     placeholder: string;
     required: boolean;
     readOnly: boolean;
@@ -20,6 +20,7 @@ export declare class InputComponent {
         type: string;
         error: string;
     }>;
+    handleDefaultValueChange(newValue: string): void;
     componentWillLoad(): void;
     handleBookingFormSubmitted(event: CustomEvent): void;
     handleInput(e: Event): void;

package/dist/types/components/design-system/multi-select-dropdown/multi-select-dropdown.d.ts

@@ -9,6 +9,7 @@ export declare class MultiSelectDropdown {
     name: string;
     label?: string;
     options: DropdownOption[];
+    error?: string;
     availableOptions: DropdownOption[];
     isOpen: boolean;
     ariaActivedescendant: string;

package/dist/types/components/design-system/radio-button-group/radio-button-group.d.ts

@@ -7,11 +7,16 @@ export declare class RadioButtonGroup {
         description?: string;
     }[];
     defaultSelectedValue: string;
+    label?: string;
+    required: boolean;
     selectedValue: string;
-    radioSelectionChanged: EventEmitter<{
+    error: string;
+    nylasFormRadioChanged: EventEmitter<{
         value: string;
         name: string;
+        label?: string;
     }>;
+    handleBookingFormSubmitted(event: CustomEvent): void;
     handleChange(value: string): void;
     render(): any;
 }

package/dist/types/components/design-system/select-dropdown/select-dropdown.d.ts

@@ -14,6 +14,8 @@ export declare class SelectDropdown {
     label?: string;
     required: boolean;
     pluralizedLabel: string;
+    dropdownButtonText?: string;
+    withChevron: boolean;
     selectedOption: DropdownOption | null;
     isOpen: boolean;
     searchValue: string;
@@ -38,6 +40,7 @@ export declare class SelectDropdown {
     handleListboxKeydown(e: any): void;
     focusOption(index: any): void;
     handleComboboxKeyDown(event: KeyboardEvent): void;
+    generateButtonText(): string;
     handleOutsideClick(event: MouseEvent): void;
     render(): any;
 }

package/dist/types/components/design-system/textarea-component/textarea-component.d.ts

@@ -8,6 +8,7 @@ export declare class TextareaComponent {
     readOnly: boolean;
     autoFocus: boolean;
     maxLength: number;
+    type: string;
     value: string;
     error: string;
     nylasFormInputChanged: EventEmitter<{
@@ -15,6 +16,7 @@ export declare class TextareaComponent {
         name: string;
         error: string;
         label: string;
+        type: string;
     }>;
     componentWillLoad(): void;
     handleBookingFormSubmitted(event: CustomEvent): void;

package/dist/types/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.d.ts

@@ -9,6 +9,7 @@ export declare class NylasBookedEventCard {
     readonly selectedTimezone: string;
     readonly selectedTimeslot: Timeslot;
     readonly configSettings?: ConfigSettings;
+    readonly isLoading?: boolean;
     readonly cancelBookingButtonClicked: EventEmitter<{
         bookingId: string;
     }>;

package/dist/types/components/scheduler/nylas-booking-form/nylas-booking-form.d.ts

@@ -22,11 +22,7 @@ export declare class NylasBookingForm {
     };
     isNameValid: boolean;
     isEmailValid: boolean;
-    additionalFields: {
-        name: string;
-        value: string;
-        type: string;
-    }[];
+    additionalFields?: Record<string, string>;
     validationError: {
         name: string;
         email: string;
@@ -44,7 +40,7 @@ export declare class NylasBookingForm {
     removeGuestButtonClickHandler: (e: Event, guestIndex: number) => void;
     handleBackButtonClicked: () => void;
     bookButtonClickedHandler: (e: Event) => Promise<void>;
-    updateAdditionalFields: (name: string, value: string, type?: string) => void;
+    updateAdditionalFields: (name: string, value: string) => void;
     nylasFormInputChangedHandler(event: CustomEvent<{
         value: string;
         name: string;
@@ -68,5 +64,11 @@ export declare class NylasBookingForm {
         name: string;
         label: string;
     }>): void;
+    radioChangedHandler(event: CustomEvent<{
+        value: string;
+        name: string;
+        label: string;
+        type: string;
+    }>): void;
     render(): any;
 }

package/dist/types/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.d.ts

@@ -1,9 +1,10 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Notification, NylasSchedulerErrorResponse } from '@nylas/core';
+import { Notification, NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';
 import { ConfigSettings } from "../../../stores/scheduler-store";
 export declare class NylasCancelBookingForm {
     readonly cancelBookingId: string;
-    configSettings?: ConfigSettings;
+    readonly configSettings?: ConfigSettings;
+    readonly selectedTimeslot: Timeslot;
     readonly goBackButtonClicked: EventEmitter<void>;
     readonly cancelBookingFormSubmitted: EventEmitter<{
         bookingId: string;

package/dist/types/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { AdditionalParticipant } from '@nylas/core';
 type Participant = {
     name?: string;
     email: string;
@@ -17,15 +18,17 @@ export declare class NylasAdditionalParticipants {
     host: HTMLNylasAdditionalParticipantsElement;
     name: string;
     eventParticipants?: Participant[];
-    participantOptions?: Participant[];
+    participantOptions?: AdditionalParticipant[];
     internals: ElementInternals;
+    participants: Participant[];
+    participantErrors: {
+        [key: string]: string;
+    };
     valueChanged: EventEmitter<{
         value: string;
         name: string;
     }>;
     elementNameChangedHandler(newValue: string): void;
-    participants: Participant[];
-    participantsValid: boolean;
     connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -39,7 +42,7 @@ export declare class NylasAdditionalParticipants {
     removeParticipant(index: number): void;
     validate(email: any, index: any): void;
     updateFormValue(): void;
-    getArrayDifference(array1: Participant[], array2: Participant[]): {
+    getArrayDifference(array1: AdditionalParticipant[], array2: Participant[]): {
         value: string;
         label: string;
     }[];

package/dist/types/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.d.ts

@@ -7,6 +7,7 @@ export declare class NylasBookingCalendarPicker {
     currentUser?: User;
     name: string;
     defaultBookingCalendar: string;
+    hideHeader: boolean;
     internals: ElementInternals;
     selectedCalendar: string;
     valueChanged: EventEmitter<{

package/dist/types/components/scheduler-editor/nylas-booking-form-config/nylas-booking-form-config.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { Configuration } from '@nylas/core';
+interface AdditionalFields {
+    type: string;
+    required: boolean;
+    label: string;
+    order: number;
+    options?: string[];
+    key: string;
+}
+interface AdditionalFieldsInternal extends AdditionalFields {
+    isOpen: boolean;
+    readonly?: boolean;
+    typeLabel: string;
+}
+export declare class NylasBookingForm {
+    host: HTMLNylasBookingFormElement;
+    selectedConfiguration?: Configuration;
+    name: string;
+    additonalFields: AdditionalFields[];
+    valueChanged: EventEmitter<{
+        value: Record<string, AdditionalFields>;
+        name: string;
+    }>;
+    internals: ElementInternals;
+    formFields: AdditionalFieldsInternal[];
+    elementNameChangedHandler(newValue: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    watchHandler(newValue: AdditionalFieldsInternal[]): void;
+    nylasFormDropdownChangedHandler(event: CustomEvent<{
+        value: string;
+        name: string;
+    }>): void;
+    nylasFormInputChangedHandler(event: CustomEvent<{
+        value: string;
+        name: string;
+    }>): void;
+    swapFields(event: any): void;
+    fieldToggle(index: any): void;
+    fieldRemove(index: any): void;
+    fieldRequired(index: any): void;
+    fieldLabelChange(index: any, event: any): void;
+    fieldOptionAdd(index: any): void;
+    fieldOptionRemove(fieldIndex: any, index: any): void;
+    fieldOptionChange(fieldIndex: any, index: any, event: any): void;
+    render(): any;
+}
+export {};

package/dist/types/components/scheduler-editor/nylas-calendar-picker/nylas-calendar-picker.d.ts

@@ -9,6 +9,7 @@ export declare class NylasCalendarPicker {
     defaultSelectedCalendars: string[];
     internals: ElementInternals;
     selectedCalendars: string[];
+    error: string;
     valueChanged: EventEmitter<{
         value: string[];
         name: string;

package/dist/types/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { AdditionalParticipant, Calendar, Participant } from '@nylas/core';
+export declare class NylasConnectedCalendars {
+    host: HTMLNylasConnectedCalendarsElement;
+    private connectedCalendarsFormRef;
+    name: string;
+    participants: Participant[];
+    calendars?: Calendar[];
+    participantOptions?: AdditionalParticipant[];
+    valueChanged: EventEmitter<{
+        value: string;
+        name: string;
+    }>;
+    internals: ElementInternals;
+    selectedCalendars: {
+        [key: string]: {
+            isOpen: boolean;
+            name: string;
+            calendars?: Calendar[];
+        };
+    };
+    participantCalendars: {
+        [key: string]: Calendar[];
+    };
+    participantDefaultSelectedCalendars: {
+        [key: string]: string[];
+    };
+    elementNameChangedHandler(newValue: string): void;
+    calendarsChangedHandler(newValue: Calendar[]): void;
+    participantsChangedHandler(newValue: Participant[]): void;
+    participantOptionsChangedHandler(newValue: AdditionalParticipant[]): void;
+    getParticipantCalendarOptions(addedParticipants: Participant[], availableParticipantOptions: AdditionalParticipant[] | undefined): {};
+    getUniqueCalendars(calendars: Calendar[]): Calendar[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleValueChanged(event: CustomEvent): void;
+    setParticipants(participants: Participant[]): {};
+    render(): any;
+}

package/dist/types/components/scheduler-editor/nylas-customize-booking-settings/nylas-customize-booking-settings.d.ts

@@ -3,7 +3,7 @@ import { Configuration } from '@nylas/core';
 export declare class NylasCustomizeBookingSettings {
     host: HTMLNylasCustomizeBookingSettingsElement;
     selectedConfiguration?: Configuration;
-    defaultAdditionalGuestsHidden: boolean;
+    defaultHideAdditionalGuests: boolean;
     defaultHideCancellationOptions: boolean;
     defaultHideReschedulingOptions: boolean;
     name: string;

package/dist/types/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.d.ts

@@ -1,4 +1,4 @@
-import { BookingType, Calendar, Configuration, OpenHours, Participant } from '@nylas/core';
+import { AdditionalFields, BookingType, Calendar, Conference, Configuration, OpenHours, Participant } from '@nylas/core';
 import { Event, EventEmitter } from '../../../stencil-public-runtime';
 import { User } from "../../../common/nylas-api-request";
 type SchedulerEventDetail = {
@@ -15,6 +15,7 @@ export declare class NylasEditorTabs {
     currentUser?: User;
     schedulerPreviewLink: string;
     mode?: 'app' | 'composable';
+    hideEditorTabs?: string[];
     action: 'create' | 'edit';
     activeTab: string;
     isLoading: boolean;
@@ -28,13 +29,21 @@ export declare class NylasEditorTabs {
             timezone: string;
             openHours?: OpenHours[];
         };
+        additionalFields?: Record<string, AdditionalFields>;
         calendarIds: string[];
+        participantCalendars?: {
+            [key: string]: string[];
+        };
         participants?: Participant[];
         participantOpenHours?: {
             [key: string]: OpenHours[];
         };
+        participantBookingCalendars?: {
+            [key: string]: string;
+        };
         bookingCalendar?: string;
         location?: string;
+        conferencing?: Conference;
         bookingType?: string;
         buffer?: {
             before: number;
@@ -45,7 +54,7 @@ export declare class NylasEditorTabs {
         minCancellationNotice?: number;
         minBookingNotice?: number;
         timeslotInterval?: {
-            interval: number;
+            interval?: number;
             roundTo?: number;
         };
         additionalGuestsHidden?: boolean;
@@ -71,6 +80,8 @@ export declare class NylasEditorTabs {
             timezone: string;
             openHours: OpenHours[];
         };
+        additionalFields: Record<string, AdditionalFields>;
+        conferencing: Conference;
         calendarIds: string[];
         participants: Participant[];
         bookingCalendar: string;
@@ -82,12 +93,14 @@ export declare class NylasEditorTabs {
         minCancellationNotice: number;
         minBookingNotice: number;
         timeslotInterval: {
-            interval: number;
+            interval: number | undefined;
             roundTo: number | undefined;
         };
         additionalGuestsHidden: boolean;
         hideCancellationOptions: boolean;
         hideReschedulingOptions: boolean;
+        participantBookingCalendars: {};
+        participantCalendars: {};
     };
     setFormState(value: any, key: any): void;
     updateFormState(): Partial<{
@@ -98,13 +111,21 @@ export declare class NylasEditorTabs {
             timezone: string;
             openHours?: OpenHours[] | undefined;
         } | undefined;
+        additionalFields?: Record<string, AdditionalFields> | undefined;
         calendarIds: string[];
+        participantCalendars?: {
+            [key: string]: string[];
+        } | undefined;
         participants?: Participant[] | undefined;
         participantOpenHours?: {
             [key: string]: OpenHours[];
         } | undefined;
+        participantBookingCalendars?: {
+            [key: string]: string;
+        } | undefined;
         bookingCalendar?: string | undefined;
         location?: string | undefined;
+        conferencing?: Conference | undefined;
         bookingType?: string | undefined;
         buffer?: {
             before: number;
@@ -115,7 +136,7 @@ export declare class NylasEditorTabs {
         minCancellationNotice?: number | undefined;
         minBookingNotice?: number | undefined;
         timeslotInterval?: {
-            interval: number;
+            interval?: number | undefined;
             roundTo?: number | undefined;
         } | undefined;
         additionalGuestsHidden?: boolean | undefined;
@@ -125,6 +146,8 @@ export declare class NylasEditorTabs {
     setActiveTab(e: Event, tabName: string): void;
     setError: (error: Error) => void;
     formSubmissionHandler: (event: Event) => Promise<void>;
+    checkForClientSideErrors: (config: any) => boolean;
+    hideTab(tab: string): boolean;
     render(): any;
 }
 export {};

package/dist/types/components/scheduler-editor/nylas-editor-tabs/tab-contents.d.ts

@@ -3,5 +3,6 @@ export type TabContentsProps = {
     formState: any;
     activeTab: string;
     calendars?: any[];
+    currentUser?: any;
 };
-export default function TabContents({ id, formState, activeTab, calendars }: TabContentsProps): any;
+export default function TabContents({ id, formState, activeTab, calendars, currentUser }: TabContentsProps): any;