@nylas/web-elements 2.3.2 → 2.3.3

package/dist/nylas-web-elements/p-52a66db6.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as s,c as o,a}from"./p-0EQQA0nE.js";const t=".sc-chevron-icon-h{display:flex}";const r=class{constructor(s){e(this,s);this.width="24";this.height="24"}render(){return s("svg",{key:"60dd2df5199cd3641409db56d39337e87b3dee1c",xmlns:"http://www.w3.org/2000/svg",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none"},s("path",{key:"828c6f650110c7806b1bd2cf69499d1fb3d75c71",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"}))}};r.style=t;const n=".sc-search-icon-h{display:flex}";const l=class{constructor(s){e(this,s);this.width="15";this.height="15"}render(){return s("svg",{key:"0a6b4e463cc466a6e13e812e7e280e3645d0138e",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"268559536f75c26bb912e48705eb8496e3fcb60c",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"}))}};l.style=n;const i=':host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;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%;word-break:break-word;overflow-wrap:break-word;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:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;justify-content:space-between;gap:0.5rem;background:var(--nylas-base-0);border:1px solid var(--nylas-base-300);border-radius:var(--nylas-border-radius-2x)}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.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;color:inherit}@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);scrollbar-width:thin;scrollbar-color:var(--nylas-base-300) var(--nylas-base-50)}.dropdown-content::-webkit-scrollbar{width:8px}.dropdown-content::-webkit-scrollbar-track{background:var(--nylas-base-50);border-radius:4px}.dropdown-content::-webkit-scrollbar-thumb{background:var(--nylas-base-300);border-radius:4px;transition:background-color 0.2s ease}.dropdown-content::-webkit-scrollbar-thumb:hover{background:var(--nylas-base-400)}.dropdown-content::-webkit-scrollbar-thumb:active{background:var(--nylas-base-500)}@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:var(--nylas-base-900);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 var(--nylas-base-200);border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px;color:var(--nylas-base-800)}';const d=class{constructor(s){e(this,s);this.nylasFormDropdownChanged=o(this,"nylasFormDropdownChanged",7);this.nylasFormDropdownDefaultSelected=o(this,"nylasFormDropdownDefaultSelected",7);this.componentType="select-dropdown";this.options=[];this.defaultSelectedOption=null;this.withSearch=true;this.searchPlaceholder="Search";this.required=false;this.readOnly=false;this.pluralizedLabel="";this.withChevron=true;this.emptyValue="Select an option";this.errorMessage="";this.isOpen=false;this.searchValue="";this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.error=""}optionsChangedHandler(e,s){if(e===s){return}this.filteredOptions=e}defaultSelectedOptionChangedHandler(e,s){if(typeof e==="undefined"||e?.label===s?.label){return}this.selectedOption=e;this.nylasFormDropdownDefaultSelected.emit({value:e?.value||"",name:this.name,error:this.error,label:this.label})}themeConfigChangedHandler(e,s){if(e===s)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[s,o]of Object.entries(e)){this.el.style.setProperty(`${s}`,o)}}}connectedCallback(){queueMicrotask((()=>{if(this.themeConfig){this.applyThemeConfig(this.themeConfig);this.el.setAttribute("data-themed","")}}))}componentWillLoad(){this.el.setAttribute("component-type",this.componentType);this.filteredOptions=this.options;this.selectedOption=this.defaultSelectedOption;if(!this.selectedOption&&this.options.length>0){this.selectedOption=this.options[0]}}componentDidLoad(){this.nylasFormDropdownDefaultSelected.emit({value:this.selectedOption?.value||"",name:this.name,error:this.error,label:this.label})}handleBookingFormSubmitted(e){this.validate(this.selectedOption?.value||"");if(this.error){e.preventDefault()}}handleFormSubmitted(e){this.validate(this.selectedOption?.value||"");if(this.error){e.preventDefault()}}validate(e){if(this.required&&!e){this.error=this.errorMessage||`${this.label} is required.`}else{this.error=""}}toggleDropdown(){this.isOpen=!this.isOpen}filterOptions(e){const s=e.target.value;this.searchValue=s;this.filteredOptions=this.options.filter((e=>e.label.toLowerCase().includes(s.toLowerCase())))}selectOption(e){this.error="";this.selectedOption=e;this.toggleDropdown();if(e.value!==this.emptyValue){this.nylasFormDropdownChanged.emit({value:e.value,name:this.name,error:this.error,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 s=this.filteredOptions;const o=s.findIndex((e=>e.value===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();if(o===s.length-1){this.ariaActivedescendant="";this.inputRef?.focus();return}const a=o+1<s.length?o+1:0;this.ariaActivedescendant=s[a].value;this.focusOption(a)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(o===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const a=o-1>=0?o-1:s.length-1;this.ariaActivedescendant=s[a].value;this.focusOption(a)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){this.selectOption(s[o])}}else if(e.key==="Escape"){this.isOpen=false}}focusOption(e){const s=this.filteredOptions[e];if(!s)return;const o=s.value;const a=this.el.shadowRoot?.getElementById(o);if(a){a.focus();a.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(e,s){if(s){return s}return e?.label?`${this.pluralizedLabel?this.pluralizedLabel:e?.label}`:this.emptyValue}handleOutsideClick(e){const s=e.composedPath();const o=s.includes(this.el);if(!o&&this.isOpen){this.isOpen=false}}render(){const e=this.generateButtonText(this.selectedOption,this.dropdownButtonText);return s("div",{key:"6f974060e4e092ab163d8cba8d13beed4c80ee6c",class:"dropdown",part:"sd_dropdown"},s("label",{key:"47bf2db1b675fcb25ba723509d4ee2f6b6873b3e",part:"sd_dropdown_label",class:{error:!!this.error}},this.label&&s("p",{key:"3202c4809f7b33363d27d995620a2923d4fbd5b1"},s("span",{key:"a8b6b7fd5cb9d3dddf5d6cc69f7b4cd39f159555",class:"label"},this.label),this.required&&s("span",{key:"bd2c064c68d81b3a8d21efb2e0fa5059c45dfa4b",class:"required"},"*")),s("button",{key:"f2ba9d78534eb655a25a055d525a26d980741f2e",part:"sd_dropdown-button",class:{dropbtn:true,open:this.isOpen,error:!!this.error},onClick:()=>this.toggleDropdown(),disabled:this.readOnly,"aria-haspopup":"listbox",title:this.readOnly?"read-only field":e,"aria-expanded":this.isOpen?"true":"false","aria-label":this.name,onKeyDown:e=>this.handleSelectButtonKeyDown(e)},s("slot",{key:"6709c73804aac1b22effc765bb25c47a7bfbdf92",name:"select-icon","aria-hidden":"true"}),s("span",{key:"0f2d118a3d3b9c6b7a98a52a4767293fd184ea23",class:"selected-option",part:"sd_dropdown-button-selected-label"},e),this.withChevron&&s("span",{key:"3eee942a71eb7cb6c28b675ab6fd02b6d7c2a04b",class:{open:this.isOpen,closed:!this.isOpen,chevron:true},"aria-hidden":"true"},s("chevron-icon",{key:"d9024867805061ae81e052dc72432f9143073f85",width:"16",height:"16"}))),this.error&&s("span",{key:"b4085dac463b6efb94b1555b0effe7ab33dc6f97",class:"error help-text"},this.error)),this.isOpen?s("div",{class:"dropdown-content",part:"sd_dropdown-content"},this.withSearch&&s("div",{class:{"search-box":true,open:this.isOpen}},s("search-icon",{width:"15",height:"15",class:"icon"}),s("input",{type:"text",role:"combobox",placeholder:this.searchPlaceholder,value:this.searchValue,ref:e=>this.inputRef=e,onInput:e=>this.filterOptions(e),onKeyDown:e=>this.handleComboboxKeyDown(e)})),s("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.filteredOptions.map((e=>e.value.toString()?s("li",{tabindex:"0",key:e.value,id:e.value,part:`${this.name}-${e.label}`,onClick:()=>this.selectOption(e),role:"option"},e.labelHTML?s("div",{part:"sd_dropdown-labelhtml"},e.labelHTML):e.label):null)))):null)}get el(){return a(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultSelectedOption:["defaultSelectedOptionChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};d.style=i;export{r as chevron_icon,l as search_icon,d as select_dropdown};
+//# sourceMappingURL=p-52a66db6.entry.js.map

package/dist/nylas-web-elements/{p-1ba901b1.entry.js.map → p-52a66db6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["iconCss","ChevronIcon","constructor","hostRef","this","width","height","render","h","key","xmlns","viewBox","fill","d","SearchIcon","selectDropdownCss","SelectDropdown","componentType","options","defaultSelectedOption","withSearch","searchPlaceholder","required","readOnly","pluralizedLabel","withChevron","emptyValue","errorMessage","isOpen","searchValue","filteredOptions","ariaActivedescendant","error","optionsChangedHandler","newValue","oldValue","defaultSelectedOptionChangedHandler","label","selectedOption","nylasFormDropdownDefaultSelected","emit","value","name","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","Object","entries","el","style","setProperty","connectedCallback","queueMicrotask","setAttribute","componentWillLoad","length","componentDidLoad","handleBookingFormSubmitted","event","validate","preventDefault","handleFormSubmitted","toggleDropdown","filterOptions","target","filter","option","toLowerCase","includes","selectOption","nylasFormDropdownChanged","handleSelectButtonKeyDown","inputRef","focus","handleListboxKeydown","e","items","currentIndex","findIndex","item","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","shadowRoot","getElementById","scrollIntoView","behavior","block","handleComboboxKeyDown","generateButtonText","dropButtonText","handleOutsideClick","path","composedPath","isClickInside","buttonText","dropdownButtonText","class","part","dropbtn","open","onClick","disabled","title","onKeyDown","closed","chevron","type","role","placeholder","ref","onInput","tabindex","map","toString","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","@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  position: relative;\n  @include default-css-variables;\n  width: 100%;\n\n  @media #{$mobile} {\n    position: unset;\n  }\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\n  p {\n    margin: 0;\n  }\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: 16px;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n  background: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-300);\n  border-radius: var(--nylas-border-radius-2x);\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background: var(--nylas-base-100);\n  }\n\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n\n    &.open {\n      transform: rotate(90deg);\n    }\n\n    &.closed {\n      transform: rotate(270deg);\n    }\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      color: inherit;\n\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  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  // Firefox scrollbar styling\n  scrollbar-width: thin;\n  scrollbar-color: var(--nylas-base-300) var(--nylas-base-50);\n\n  // Custom scrollbar styling\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--nylas-base-50);\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--nylas-base-300);\n    border-radius: 4px;\n    transition: background-color 0.2s ease;\n\n    &:hover {\n      background: var(--nylas-base-400);\n    }\n  }\n\n  &::-webkit-scrollbar-thumb:active {\n    background: var(--nylas-base-500);\n  }\n\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\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\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\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: var(--nylas-base-900);\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\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 var(--nylas-base-200);\n  border-radius: 4px;\n  position: sticky;\n  background: no-repeat scroll 7px 7px;\n  padding-left: 30px;\n  background-size: 16px 16px;\n  color: var(--nylas-base-800);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\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  private readonly componentType: string = 'select-dropdown';\n\n  private inputRef?: HTMLInputElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop({ reflect: true }) 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({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n  /**\n   * Should show search input\n   */\n  @Prop() withSearch: boolean = true;\n\n  /**\n   * The placeholder for the search input\n   */\n  @Prop() searchPlaceholder: string = 'Search';\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   * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n   */\n  @Prop() readOnly: 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  /**\n   * Allows to set the empty value of the dropdown\n   */\n  @Prop() emptyValue: string = 'Select an option'; // Default empty value\n  /**\n   * The custom error message to display when the value is empty or null and the dropdown is required\n   */\n  @Prop() errorMessage: string = '';\n  /**\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedOption!: DropdownOption | 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() error: 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  /**\n   * This event is fired when the default selected option is set, on component load\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: 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    this.nylasFormDropdownDefaultSelected.emit({\n      value: newValue?.value || '',\n      name: this.name,\n      error: this.error,\n      label: this.label,\n    });\n  }\n\n  @Watch('themeConfig')\n  themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n    if (newVal === oldVal) return;\n    this.applyThemeConfig(newVal);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.el.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.el.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  componentWillLoad() {\n    this.el.setAttribute('component-type', this.componentType);\n    this.filteredOptions = this.options;\n    // Set the selected option to the first option if no option is selected\n    this.selectedOption = this.defaultSelectedOption;\n\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n  }\n\n  componentDidLoad() {\n    this.nylasFormDropdownDefaultSelected.emit({\n      value: this.selectedOption?.value || '',\n      name: this.name,\n      error: this.error,\n      label: this.label,\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.error) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Listen for the formSubmitted event to validate the input value when the form is submitted.\n   * @param event\n   */\n  @Listen('formSubmitted', { target: 'document' })\n  handleFormSubmitted(event: CustomEvent) {\n    this.validate(this.selectedOption?.value || '');\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  validate(value: string) {\n    if (this.required && !value) {\n      this.error = this.errorMessage || `${this.label} is required.`;\n    } else {\n      this.error = '';\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.error = '';\n    this.selectedOption = option;\n    this.toggleDropdown();\n    if (option.value !== this.emptyValue) {\n      this.nylasFormDropdownChanged.emit({\n        value: option.value,\n        name: this.name,\n        error: this.error,\n        label: this.label,\n      });\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(option: DropdownOption | null, dropButtonText?: string): string {\n    if (dropButtonText) {\n      return dropButtonText;\n    }\n    return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\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    const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n    return (\n      <div class=\"dropdown\" part=\"sd_dropdown\">\n        <label part=\"sd_dropdown_label\" class={{ error: !!this.error }}>\n          {this.label && (\n            <p>\n              <span class=\"label\">{this.label}</span>\n              {this.required && <span class=\"required\">*</span>}\n            </p>\n          )}\n          <button\n            part=\"sd_dropdown-button\"\n            class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n            onClick={() => this.toggleDropdown()}\n            disabled={this.readOnly}\n            aria-haspopup=\"listbox\"\n            title={this.readOnly ? 'read-only field' : buttonText}\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              {buttonText}\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.error && <span class=\"error help-text\">{this.error}</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={this.searchPlaceholder}\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(option =>\n                option.value.toString() ? (\n                  <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n                    {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n                  </li>\n                ) : null,\n              )}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["iconCss","ChevronIcon","constructor","hostRef","this","width","height","render","h","key","xmlns","viewBox","fill","d","SearchIcon","selectDropdownCss","SelectDropdown","componentType","options","defaultSelectedOption","withSearch","searchPlaceholder","required","readOnly","pluralizedLabel","withChevron","emptyValue","errorMessage","isOpen","searchValue","filteredOptions","ariaActivedescendant","error","optionsChangedHandler","newValue","oldValue","defaultSelectedOptionChangedHandler","label","selectedOption","nylasFormDropdownDefaultSelected","emit","value","name","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","Object","entries","el","style","setProperty","connectedCallback","queueMicrotask","setAttribute","componentWillLoad","length","componentDidLoad","handleBookingFormSubmitted","event","validate","preventDefault","handleFormSubmitted","toggleDropdown","filterOptions","target","filter","option","toLowerCase","includes","selectOption","nylasFormDropdownChanged","handleSelectButtonKeyDown","inputRef","focus","handleListboxKeydown","e","items","currentIndex","findIndex","item","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","shadowRoot","getElementById","scrollIntoView","behavior","block","handleComboboxKeyDown","generateButtonText","dropButtonText","handleOutsideClick","path","composedPath","isClickInside","buttonText","dropdownButtonText","class","part","dropbtn","open","onClick","disabled","title","onKeyDown","closed","chevron","type","role","placeholder","ref","onInput","tabindex","map","toString","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","@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  position: relative;\n  @include default-css-variables;\n  width: 100%;\n\n  @media #{$mobile} {\n    position: unset;\n  }\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\n  p {\n    margin: 0;\n  }\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: 16px;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n  background: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-300);\n  border-radius: var(--nylas-border-radius-2x);\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background: var(--nylas-base-100);\n  }\n\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n\n    &.open {\n      transform: rotate(90deg);\n    }\n\n    &.closed {\n      transform: rotate(270deg);\n    }\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      color: inherit;\n\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  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  // Firefox scrollbar styling\n  scrollbar-width: thin;\n  scrollbar-color: var(--nylas-base-300) var(--nylas-base-50);\n\n  // Custom scrollbar styling\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--nylas-base-50);\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--nylas-base-300);\n    border-radius: 4px;\n    transition: background-color 0.2s ease;\n\n    &:hover {\n      background: var(--nylas-base-400);\n    }\n  }\n\n  &::-webkit-scrollbar-thumb:active {\n    background: var(--nylas-base-500);\n  }\n\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\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\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\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: var(--nylas-base-900);\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\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 var(--nylas-base-200);\n  border-radius: 4px;\n  position: sticky;\n  background: no-repeat scroll 7px 7px;\n  padding-left: 30px;\n  background-size: 16px 16px;\n  color: var(--nylas-base-800);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\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  private readonly componentType: string = 'select-dropdown';\n\n  private inputRef?: HTMLInputElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop({ reflect: true }) 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({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n  /**\n   * Should show search input\n   */\n  @Prop() withSearch: boolean = true;\n\n  /**\n   * The placeholder for the search input\n   */\n  @Prop() searchPlaceholder: string = 'Search';\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   * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n   */\n  @Prop() readOnly: 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  /**\n   * Allows to set the empty value of the dropdown\n   */\n  @Prop() emptyValue: string = 'Select an option'; // Default empty value\n  /**\n   * The custom error message to display when the value is empty or null and the dropdown is required\n   */\n  @Prop() errorMessage: string = '';\n  /**\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedOption!: DropdownOption | 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() error: 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  /**\n   * This event is fired when the default selected option is set, on component load\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: 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    this.nylasFormDropdownDefaultSelected.emit({\n      value: newValue?.value || '',\n      name: this.name,\n      error: this.error,\n      label: this.label,\n    });\n  }\n\n  @Watch('themeConfig')\n  themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n    if (newVal === oldVal) return;\n    this.applyThemeConfig(newVal);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.el.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.el.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  componentWillLoad() {\n    this.el.setAttribute('component-type', this.componentType);\n    this.filteredOptions = this.options;\n    // Set the selected option to the first option if no option is selected\n    this.selectedOption = this.defaultSelectedOption;\n\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n  }\n\n  componentDidLoad() {\n    this.nylasFormDropdownDefaultSelected.emit({\n      value: this.selectedOption?.value || '',\n      name: this.name,\n      error: this.error,\n      label: this.label,\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.error) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Listen for the formSubmitted event to validate the input value when the form is submitted.\n   * @param event\n   */\n  @Listen('formSubmitted', { target: 'document' })\n  handleFormSubmitted(event: CustomEvent) {\n    this.validate(this.selectedOption?.value || '');\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  validate(value: string) {\n    if (this.required && !value) {\n      this.error = this.errorMessage || `${this.label} is required.`;\n    } else {\n      this.error = '';\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.error = '';\n    this.selectedOption = option;\n    this.toggleDropdown();\n    if (option.value !== this.emptyValue) {\n      this.nylasFormDropdownChanged.emit({\n        value: option.value,\n        name: this.name,\n        error: this.error,\n        label: this.label,\n      });\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(option: DropdownOption | null, dropButtonText?: string): string {\n    if (dropButtonText) {\n      return dropButtonText;\n    }\n    return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\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    const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n    return (\n      <div class=\"dropdown\" part=\"sd_dropdown\">\n        <label part=\"sd_dropdown_label\" class={{ error: !!this.error }}>\n          {this.label && (\n            <p>\n              <span class=\"label\">{this.label}</span>\n              {this.required && <span class=\"required\">*</span>}\n            </p>\n          )}\n          <button\n            part=\"sd_dropdown-button\"\n            class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n            onClick={() => this.toggleDropdown()}\n            disabled={this.readOnly}\n            aria-haspopup=\"listbox\"\n            title={this.readOnly ? 'read-only field' : buttonText}\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              {buttonText}\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.error && <span class=\"error help-text\">{this.error}</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={this.searchPlaceholder}\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(option =>\n                option.value.toString() ? (\n                  <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n                    {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n                  </li>\n                ) : null,\n              )}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nylas-web-elements/p-5b01e519.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as a,h as l,a as o}from"./p-0EQQA0nE.js";const r=':host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}.radio-group{display:flex;flex-direction:column;gap:0.5rem}.radio-group slot[name=label]{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;word-break:break-word;overflow-wrap:break-word;font-size:16px}.radio-group slot[name=label].error{color:var(--nylas-error)}.radio-group slot[name=label] span.required{color:var(--nylas-error);padding:0 0.25rem}.radio-group slot[name=label] p{margin:0}.radio-group slot[name=label] p.error{color:var(--nylas-error)}.radio-group slot[name=label] .error{color:var(--nylas-error)}.radio-group span.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family)}.radio-group label{display:flex;font-family:var(--nylas-font-family);cursor:pointer}.radio-group label .radio-option{display:flex;align-items:flex-start;gap:0.5rem}.radio-group label .radio-option input[type=radio]{cursor:pointer}.radio-group label .radio-option input[type=radio i]{width:20px;height:20px;color:var(--nylas-primary)}.radio-group label .radio-option p{display:flex;flex-direction:column;gap:0.5rem;margin:0}.radio-group label .radio-option p .title{font-size:16px;font-weight:500;line-height:20px;color:var(--nylas-base-800);word-break:break-word;overflow-wrap:break-word}.radio-group label .radio-option p .description{font-size:14px;font-weight:400;line-height:20px;color:var(--nylas-base-600)}';const s=class{constructor(l){e(this,l);this.nylasFormRadioChanged=a(this,"nylasFormRadioChanged",7);this.componentType="radio-group";this.name="radio-group";this.options=[];this.defaultSelectedValue="";this.required=false;this.readOnly=false;this.errorMessage="";this.error=""}handleDefaultSelectedValueChange(e){this.selectedValue=e}themeConfigChangedHandler(e,a){if(e===a)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[a,l]of Object.entries(e)){this.el.style.setProperty(`${a}`,l)}}}connectedCallback(){queueMicrotask((()=>{if(this.themeConfig){this.applyThemeConfig(this.themeConfig);this.el.setAttribute("data-themed","")}}))}componentDidLoad(){this.selectedValue=this.defaultSelectedValue}handleBookingFormSubmitted(e){if(this.required&&!this.selectedValue){this.error=this.errorMessage||`${this.label} is required.`;return}if(this.error){e.preventDefault()}}componentWillLoad(){this.el.setAttribute("component-type",this.componentType)}handleChange(e){this.error="";this.selectedValue=e;this.nylasFormRadioChanged.emit({value:e,name:this.name,label:this.label})}render(){return l("div",{key:"7fa6a5c04d62ceb1ea1412aac41be984895401db",class:"radio-group"},l("slot",{key:"665dd9f000f90ad4cbed77ee54d7e273abf9ae1a",name:"label"},this.label&&l("p",{key:"2c1c8b51e8dcc76b740c6de1976403e072af421a",class:{error:!!this.error}},l("span",{key:"8d718ac0d06dc745d859e0c97ecdca1e7c510b31",class:"label"},this.label),this.required&&l("span",{key:"bead8788e072a0e2016eb45d3526b119b5f0d677",class:"required"},"*"))),this.options.map((e=>l("label",null,l("div",{class:"radio-option"},l("input",{type:"radio",disabled:this.readOnly,readOnly:this.readOnly,title:this.readOnly?"read-only field":undefined,name:this.name,value:e.value,checked:this.selectedValue===e.value,onChange:()=>this.handleChange(e.value)}),l("p",null,l("span",{class:"title"},e.label),l("span",{class:"description"},e.description)))))),this.error&&l("span",{key:"353cf7e4a3bee5425cc1a7fdbfe204df59bc5163",class:"error help-text"},this.error))}get el(){return o(this)}static get watchers(){return{defaultSelectedValue:["handleDefaultSelectedValueChange"],themeConfig:["themeConfigChangedHandler"]}}};s.style=r;export{s as radio_button_group};
+//# sourceMappingURL=p-5b01e519.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["radioButtonGroupCss","RadioButtonGroup","constructor","hostRef","this","componentType","name","options","defaultSelectedValue","required","readOnly","errorMessage","error","handleDefaultSelectedValueChange","newValue","selectedValue","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","key","value","Object","entries","el","style","setProperty","connectedCallback","queueMicrotask","setAttribute","componentDidLoad","handleBookingFormSubmitted","event","label","preventDefault","componentWillLoad","handleChange","nylasFormRadioChanged","emit","render","h","class","map","option","type","disabled","title","undefined","checked","onChange","description"],"sources":["src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: 100%;\n}\n\n.radio-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  slot[name='label'] {\n    @include input-label;\n    font-size: 16px;\n\n    p {\n      margin: 0;\n\n      &.error {\n        color: var(--nylas-error);\n      }\n    }\n\n    .error {\n      color: var(--nylas-error);\n    }\n  }\n\n  span.error {\n    color: var(--nylas-error);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    font-family: var(--nylas-font-family);\n  }\n\n  label {\n    display: flex;\n\n    font-family: var(--nylas-font-family);\n    cursor: pointer;\n\n    .radio-option {\n      display: flex;\n      align-items: flex-start;\n      gap: 0.5rem;\n\n      input[type='radio'] {\n        cursor: pointer;\n      }\n\n      input[type='radio' i] {\n        width: 20px;\n        height: 20px;\n        color: var(--nylas-primary);\n      }\n\n      p {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n        margin: 0;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n          line-height: 20px;\n          color: var(--nylas-base-800);\n          word-break: break-word;\n          overflow-wrap: break-word;\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n          line-height: 20px;\n          color: var(--nylas-base-600);\n        }\n      }\n    }\n  }\n}\n","// src/components/radio-group/radio-group.tsx\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch } from '@stencil/core';\n\n/**\n * The `radio-button-group` component is a UI component that allows users to select a single option from a list of options.\n * This component is used in the scheduling form to input radio button type inputs.\n */\n@Component({\n  tag: 'radio-button-group',\n  styleUrl: 'radio-button-group.scss',\n  shadow: true,\n})\nexport class RadioButtonGroup {\n  @Element() el!: HTMLElement;\n  private readonly componentType: string = 'radio-group';\n\n  /**\n   * The name of the radio group. This is used to identify the radio group when submitting a form.\n   */\n  @Prop() name: string = 'radio-group';\n  /**\n   * The list of options in the radio group.\n   * Each option has a label and a value and an optional description.\n   */\n  @Prop() options: { label: string; value: string; description?: string }[] = [];\n  /**\n   * The default selected value of the radio group.\n   */\n  @Prop({ attribute: 'default-selected-value' }) defaultSelectedValue: string = '';\n  /**\n   * The label of the radio group. This is displayed above the radio group.\n   * Label is optional. You can also use the slot 'label' to add a label.\n   */\n  @Prop() label?: string;\n  /**\n   * Whether the radio group is required. If true, the radio group must have a value when submitting a form.\n   * Default is false. If the radio group is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The property to make the radio group read-only. If true, the radio group cannot be edited.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n  /**\n   * Error message to display when the radio group is required and no value is selected.\n   */\n  @Prop() errorMessage: string = '';\n  /**\n   * The selected value of the radio group.\n   */\n  @State() selectedValue!: string;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n  /**\n   * This event is fired when the selected value changes.\n   */\n  @Event() nylasFormRadioChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label?: string;\n  }>;\n\n  @Watch('defaultSelectedValue')\n  handleDefaultSelectedValueChange(newValue: string) {\n    this.selectedValue = newValue;\n  }\n\n  @Watch('themeConfig')\n  themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n    if (newVal === oldVal) return;\n    this.applyThemeConfig(newVal);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.el.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.el.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  componentDidLoad() {\n    this.selectedValue = this.defaultSelectedValue;\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    if (this.required && !this.selectedValue) {\n      this.error = this.errorMessage || `${this.label} is required.`;\n      return;\n    }\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  componentWillLoad() {\n    this.el.setAttribute('component-type', this.componentType);\n  }\n\n  handleChange(value: string) {\n    this.error = '';\n    this.selectedValue = value;\n    this.nylasFormRadioChanged.emit({\n      value,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"radio-group\">\n        <slot name=\"label\">\n          {this.label && (\n            <p class={{ error: !!this.error }}>\n              <span class=\"label\">{this.label}</span>\n              {this.required && <span class=\"required\">*</span>}\n            </p>\n          )}\n        </slot>\n        {this.options.map(option => (\n          <label>\n            <div class=\"radio-option\">\n              <input\n                type=\"radio\"\n                disabled={this.readOnly}\n                readOnly={this.readOnly}\n                title={this.readOnly ? 'read-only field' : undefined}\n                name={this.name}\n                value={option.value}\n                checked={this.selectedValue === option.value}\n                onChange={() => this.handleChange(option.value)}\n              />\n              <p>\n                <span class=\"title\">{option.label}</span>\n                <span class=\"description\">{option.description}</span>\n              </p>\n            </div>\n          </label>\n        ))}\n        {this.error && <span class=\"error help-text\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,+kH,MCafC,EAAgB,MAL7B,WAAAC,CAAAC,G,uEAOmBC,KAAaC,cAAW,cAKjCD,KAAIE,KAAW,cAKfF,KAAOG,QAA6D,GAI7BH,KAAoBI,qBAAW,GAUtEJ,KAAQK,SAAY,MAIpBL,KAAQM,SAAY,MAQpBN,KAAYO,aAAW,GAQtBP,KAAKQ,MAAW,EA6G1B,CAlGC,gCAAAC,CAAiCC,GAC/BV,KAAKW,cAAgBD,C,CAIvB,yBAAAE,CAA0BC,EAAqBC,GAC7C,GAAID,IAAWC,EAAQ,OACvBd,KAAKe,iBAAiBF,E,CAGxB,gBAAAE,CAAiBC,GACf,GAAIA,EAAa,CACf,IAAK,MAAOC,EAAKC,KAAUC,OAAOC,QAAQJ,GAAc,CACtDhB,KAAKqB,GAAGC,MAAMC,YAAY,GAAGN,IAAOC,E,GAM1C,iBAAAM,GAGEC,gBAAe,KACb,GAAIzB,KAAKgB,YAAa,CACpBhB,KAAKe,iBAAiBf,KAAKgB,aAC3BhB,KAAKqB,GAAGK,aAAa,cAAe,G,KAK1C,gBAAAC,GACE3B,KAAKW,cAAgBX,KAAKI,oB,CAQ5B,0BAAAwB,CAA2BC,GACzB,GAAI7B,KAAKK,WAAaL,KAAKW,cAAe,CACxCX,KAAKQ,MAAQR,KAAKO,cAAgB,GAAGP,KAAK8B,qBAC1C,M,CAEF,GAAI9B,KAAKQ,MAAO,CACdqB,EAAME,gB,EAIV,iBAAAC,GACEhC,KAAKqB,GAAGK,aAAa,iBAAkB1B,KAAKC,c,CAG9C,YAAAgC,CAAaf,GACXlB,KAAKQ,MAAQ,GACbR,KAAKW,cAAgBO,EACrBlB,KAAKkC,sBAAsBC,KAAK,CAC9BjB,QACAhB,KAAMF,KAAKE,KACX4B,MAAO9B,KAAK8B,O,CAIhB,MAAAM,GACE,OACEC,EAAA,OAAApB,IAAA,2CAAKqB,MAAM,eACTD,EAAM,QAAApB,IAAA,2CAAAf,KAAK,SACRF,KAAK8B,OACJO,EAAA,KAAApB,IAAA,2CAAGqB,MAAO,CAAE9B,QAASR,KAAKQ,QACxB6B,EAAA,QAAApB,IAAA,2CAAMqB,MAAM,SAAStC,KAAK8B,OACzB9B,KAAKK,UAAYgC,EAAM,QAAApB,IAAA,2CAAAqB,MAAM,YAAU,OAI7CtC,KAAKG,QAAQoC,KAAIC,GAChBH,EAAA,aACEA,EAAK,OAAAC,MAAM,gBACTD,EAAA,SACEI,KAAK,QACLC,SAAU1C,KAAKM,SACfA,SAAUN,KAAKM,SACfqC,MAAO3C,KAAKM,SAAW,kBAAoBsC,UAC3C1C,KAAMF,KAAKE,KACXgB,MAAOsB,EAAOtB,MACd2B,QAAS7C,KAAKW,gBAAkB6B,EAAOtB,MACvC4B,SAAU,IAAM9C,KAAKiC,aAAaO,EAAOtB,SAE3CmB,EAAA,SACEA,EAAA,QAAMC,MAAM,SAASE,EAAOV,OAC5BO,EAAA,QAAMC,MAAM,eAAeE,EAAOO,kBAKzC/C,KAAKQ,OAAS6B,EAAA,QAAApB,IAAA,2CAAMqB,MAAM,mBAAmBtC,KAAKQ,O","ignoreList":[]}