@nylas/web-elements 1.1.0-canary.16 → 1.1.0-canary.18

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

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-68c2fadf.js";const s=".sc-bold-icon-h{display:flex}";const o=s;const i=class{constructor(t){e(this,t);this.width="15";this.height="15"}render(){return t("svg",{key:"ba0de60e850b0cc175debe770c0828d786d75337",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"26078f0661cee64fbdafbe006182e3bc028d2ef9",d:"M6 4V20M9.5 4H15.5C17.7091 4 19.5 5.79086 19.5 8C19.5 10.2091 17.7091 12 15.5 12H9.5H16.5C18.7091 12 20.5 13.7909 20.5 16C20.5 18.2091 18.7091 20 16.5 20H9.5M9.5 4V20M9.5 4H4M9.5 20H4",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}};i.style=o;const n=".sc-italic-icon-h{display:flex}";const r=n;const c=class{constructor(t){e(this,t);this.width="15";this.height="15"}render(){return t("svg",{key:"bb0499310a378ef5d5eebe537429f4838de7b4b5",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"33a7eb61a19c8cef346bff960a4c377925ff0587",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m10 20 4-16m2 0h-4m0 16H8"}))}};c.style=r;const d=".sc-underline-icon-h{display:flex}";const h=d;const l=class{constructor(t){e(this,t);this.width="15";this.height="15"}render(){return t("svg",{key:"5e0070c733a6b740a5d0dc27e52bb12a2526479d",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"ed960c7122816d4c3eed1f7d1955c797e31c7531",d:"M19 4V10C19 13.866 15.866 17 12 17C8.13401 17 5 13.866 5 10V4M8.5 4V10C8.5 13.2218 10.6766 15.9352 13.6395 16.7501M4 21H20M3 4L10.5 4M17 4L21 4",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}};l.style=h;export{i as bold_icon,c as italic_icon,l as underline_icon};
-//# sourceMappingURL=p-c170c56d.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,a as s}from"./p-68c2fadf.js";import{a as o}from"./p-6c11737d.js";import"./p-02aa5f03.js";import"./p-cb65c223.js";const r=':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}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:1rem;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x);width:50px;padding:14px 16px;border-radius:var(--nylas-border-radius-2x)}.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);max-width:306px;width:max-content;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 n=r;const d=class{constructor(i){e(this,i);this.inputOptionChanged=t(this,"inputOptionChanged",7);this.name=undefined;this.options=[];this.defaultInputOption=undefined;this.inputValue=undefined;this.pluralizedLabel="";this.selectedOption=this.defaultInputOption||null;this.isOpen=false;this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.shouldAutoScroll=false}optionsChangedHandler(e,t){if(e===t){return}this.filteredOptions=e}defaultSelectedOptionChangedHandler(e,t){if(e.label===t.label){return}this.selectedOption=e}inputValueChangedHandler(e,t){if(e===t){return}this.inputValue=e}componentWillLoad(){this.filteredOptions=this.options;if(!this.selectedOption&&!!this.defaultInputOption){this.selectedOption=this.defaultInputOption}if(!this.selectedOption&&this.options.length>0){this.selectedOption=this.options[0]}}toggleDropdown(){this.isOpen=!this.isOpen}selectOption(e){this.selectedOption=e;this.toggleDropdown();this.inputOptionChanged.emit({value:e.value,name:this.name})}handleOnInput(e){const t=e.target.value;const i=this.options.findIndex((e=>e.label.toLowerCase().includes(t.toLowerCase())));if(i>-1){this.scrollToViewWithinParent(i)}this.inputOptionChanged.emit({value:t,name:this.name})}scrollToViewWithinParent(e){const t=this.options[e];const i=this.el.shadowRoot?.getElementById(t.value.toString());const s=this.optionsRef;this.ariaActivedescendant=t.value.toString();const o=i.getBoundingClientRect();const r=s.getBoundingClientRect();if(o.top<r.top){s.scrollTop-=r.top-o.top}else if(o.bottom>r.bottom){s.scrollTop+=o.bottom-r.bottom}}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}}handleClick(e){if(this.isOpen){const t=e.target.value;const i=this.options.findIndex((e=>e.label.toLowerCase().includes(t.toLowerCase())));if(i>-1){setTimeout((()=>{this.scrollToViewWithinParent(i)}),10)}}}handleListboxKeydown(e){const t=this.filteredOptions;const i=t.findIndex((e=>e.value===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();if(i===t.length-1){this.ariaActivedescendant="";this.inputRef?.focus();return}const s=i+1<t.length?i+1:0;this.ariaActivedescendant=t[s].value;this.focusOption(s)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(i===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const s=i-1>=0?i-1:t.length-1;this.ariaActivedescendant=t[s].value;this.focusOption(s)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){this.selectOption(t[i])}}else if(e.key==="Escape"){this.isOpen=false}}focusOption(e){const t=this.filteredOptions[e];if(!t)return;const i=t.value;const s=this.el.shadowRoot?.getElementById(i);if(s){s.focus();s.scrollIntoView({behavior:"smooth",block:"nearest"})}}handleComboboxKeyDown(e){if(e.key==="ArrowDown"||e.key=="Tab"&&!e.shiftKey){e.preventDefault();if(!this.isOpen){this.isOpen=true;this.shouldAutoScroll=true;return}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}}handleOutsideClick(e){const t=e.composedPath();const i=t.includes(this.el);if(!i&&this.isOpen){this.isOpen=false}}render(){return i("div",{key:"24c46ff43e7ff2701790b5e7cd69833a4c0fa02f",class:"dropdown",part:"id_dropdown"},i("input",{key:"86724f295c643d3edda0de987b17f85389a0a716",type:"text",name:this.name,id:this.name,part:"id_dropdown-input",class:{dropbtn:true,open:this.isOpen},value:this.inputValue,onClick:e=>{this.toggleDropdown();this.shouldAutoScroll=true;this.handleClick(e)},"aria-haspopup":"listbox","aria-label":this.name,"aria-expanded":this.isOpen?"true":"false",onKeyDown:e=>this.handleComboboxKeyDown(e),onInput:e=>this.handleOnInput(e)}),this.isOpen?i("div",{class:"dropdown-content",part:"id_dropdown-content",ref:e=>this.optionsRef=e},i("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.filteredOptions.map((e=>i("li",{tabindex:"0",key:e.value,id:e.value,onClick:()=>this.selectOption(e),role:"option",class:{focused:this.ariaActivedescendant===e.value.toString()}},e.labelHTML?e.labelHTML:e.label))))):null)}get el(){return s(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultInputOption:["defaultSelectedOptionChangedHandler"],inputValue:["inputValueChangedHandler"]}}};d.style=n;const a=".time-period-selector.sc-time-period-selector{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector,.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector{width:116px}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{width:84px;display:flex;align-items:center}.time-period-selector.sc-time-period-selector select-dropdown#time-period.sc-time-period-selector::part(sd_dropdown-button){width:100%}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown){width:inherit;height:100%}.time-period-selector.sc-time-period-selector input-dropdown#time-number.sc-time-period-selector::part(id_dropdown-input){border:none;border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-input){padding:17px;gap:1rem}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-content){width:100%;max-height:200px}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown){width:inherit}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-button){padding:1rem;gap:1rem;justify-content:space-between}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-content){width:100%;max-height:200px}";const p=a;const l={hours:"hour",days:"day",weeks:"week",months:"month"};const c=class{constructor(i){e(this,i);this.timePeriodChanged=t(this,"timePeriodChanged",7);this.timePeriods=["hour","day","week","month"];this.defaultSelectedPeriod="hour";this.defaultSelectedNumber=1;this.selectedPeriod=this.defaultSelectedPeriod;this.selectedNumber=this.defaultSelectedNumber;this.numberOptions=this.calculateOptions(this.defaultSelectedPeriod||"hour").map((e=>({label:e.toString(),value:e.toString()})));this.timePeriodOptions=this.timePeriods.map((e=>({label:e,value:e})))}defaultSelectedPeriodChangedHandler(e){this.selectedPeriod=e;const t=l[e]??e;this.updateNumberOptionsAndSelectedNumber(t)}defaultSelectedNumberChangedHandler(e){this.selectedNumber=e}timePeriodsChangedHandler(e){this.timePeriodOptions=e.map((e=>({label:e,value:e})))}calculateOptions(e){switch(e){case"hour":return Array.from({length:23},((e,t)=>t+1));case"minute":return Array.from({length:13},((e,t)=>t*5));case"day":return Array.from({length:30},((e,t)=>t+1));case"week":return Array.from({length:4},((e,t)=>t+1));case"month":return Array.from({length:12},((e,t)=>t+1));default:return[]}}inputOptionChangedHandler(e){o("time-period-selector","inputOptionChangedHandler",e.detail);const{value:t,name:i}=e.detail;if(i==="time-number"){this.selectedNumber=parseInt(t)}const s={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(s)}nylasFormDropdownChangedHandler(e){o("time-period-selector","nylasFormDropdownChangedHandler",e.detail);const{value:t,name:i}=e.detail;if(i==="time-period"){this.selectedPeriod=t;this.updateNumberOptionsAndSelectedNumber(t)}else if(i==="time-number"){this.selectedNumber=parseInt(t)}const s={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(s)}updateNumberOptionsAndSelectedNumber(e){const t=this.calculateOptions(e);this.numberOptions=t.map((e=>({label:e.toString(),value:e.toString()})));this.selectedNumber=parseInt(this.numberOptions[0].value)}render(){return i("div",{key:"89f218f22905064cadac4d109b631ec138b461ef",class:"time-period-selector"},i("input-dropdown",{key:"2b86597d92716df5196e696a82ef813d895688dc",id:"time-number",name:"time-number",inputValue:this.selectedNumber.toString(),exportparts:"sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content",options:this.numberOptions,defaultInputOption:this.numberOptions.find((e=>e.value==this.selectedNumber.toString()))??this.numberOptions[0]}),i("select-dropdown",{key:"7283a087443a6c3827f41f0276e1c8024025eeca",id:"time-period",name:"time-period",options:this.timePeriodOptions,exportparts:"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content",pluralizedLabel:this.selectedNumber>1?"s":"",defaultSelectedOption:this.timePeriodOptions.find((e=>e.value==this.selectedPeriod))??this.timePeriodOptions[0],withSearch:false}))}get host(){return s(this)}static get watchers(){return{defaultSelectedPeriod:["defaultSelectedPeriodChangedHandler"],defaultSelectedNumber:["defaultSelectedNumberChangedHandler"],timePeriods:["timePeriodsChangedHandler"]}}};c.style=p;export{d as input_dropdown,c as time_period_selector};
-//# sourceMappingURL=p-efd5b80a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["inputDropdownCss","InputDropdownStyle0","InputDropdown","this","defaultInputOption","options","optionsChangedHandler","newValue","oldValue","filteredOptions","defaultSelectedOptionChangedHandler","label","selectedOption","inputValueChangedHandler","inputValue","componentWillLoad","length","toggleDropdown","isOpen","selectOption","option","inputOptionChanged","emit","value","name","handleOnInput","event","target","optionIndex","findIndex","toLowerCase","includes","scrollToViewWithinParent","childElement","el","shadowRoot","getElementById","toString","parentElement","optionsRef","ariaActivedescendant","childRect","getBoundingClientRect","parentRect","top","scrollTop","bottom","handleSelectButtonKeyDown","key","preventDefault","inputRef","focus","handleClick","setTimeout","handleListboxKeydown","e","items","currentIndex","item","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","scrollIntoView","behavior","block","handleComboboxKeyDown","shouldAutoScroll","handleOutsideClick","path","composedPath","isClickInside","render","h","class","part","type","id","dropbtn","open","onClick","onKeyDown","onInput","ref","tabindex","role","map","focused","labelHTML","timePeriodSelectorCss","TimePeriodSelectorStyle0","pluralToSingular","hours","days","weeks","months","TimePeriodSelector","defaultSelectedPeriod","defaultSelectedNumber","calculateOptions","i","timePeriods","period","defaultSelectedPeriodChangedHandler","selectedPeriod","updateNumberOptionsAndSelectedNumber","defaultSelectedNumberChangedHandler","selectedNumber","timePeriodsChangedHandler","timePeriodOptions","Array","from","_","inputOptionChangedHandler","debug","detail","parseInt","selected","number","timePeriodChanged","nylasFormDropdownChangedHandler","numberOptions","exportparts","find","pluralizedLabel","defaultSelectedOption","withSearch"],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx","src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  position: relative;\n  @media #{$mobile} {\n    position: unset;\n  }\n  @include default-css-variables;\n}\n\n.dropdown {\n  display: inline-block;\n}\n\n.dropbtn {\n  color: var(--nylas-base-800);\n  padding: 10px;\n  font-size: 1rem;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  gap: 0.5rem;\n  background: transparent;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  width: 50px;\n  padding: 14px 16px;\n  border-radius: var(--nylas-border-radius-2x);\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  max-width: 306px;\n  width: max-content;\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 `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'input-dropdown',\n  styleUrl: 'input-dropdown.scss',\n  shadow: true,\n})\nexport class InputDropdown {\n  @Element() el!: HTMLElement;\n\n  private inputRef?: HTMLInputElement;\n  private optionsRef!: HTMLElement;\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() defaultInputOption?: DropdownOption;\n  /**\n   * Should show search input\n   */\n  @Prop() inputValue!: string;\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  // States\n  /**\n   * The selected option\n   */\n  @State() selectedOption: DropdownOption | null = this.defaultInputOption || null;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n\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   * This is used to scroll to the input value.\n   */\n  @State() shouldAutoScroll: boolean = false;\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: 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('defaultInputOption')\n  defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n    if (newValue.label === oldValue.label) {\n      return;\n    }\n    this.selectedOption = newValue;\n  }\n\n  @Watch('inputValue')\n  inputValueChangedHandler(newValue: string, oldValue: string) {\n    if (newValue === oldValue) {\n      return;\n    }\n    this.inputValue = 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.defaultInputOption) {\n      this.selectedOption = this.defaultInputOption;\n    }\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n  }\n\n  // Methods\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectOption(option: DropdownOption): void {\n    this.selectedOption = option;\n    this.toggleDropdown();\n    this.inputOptionChanged.emit({\n      value: option.value,\n      name: this.name,\n    });\n  }\n\n  handleOnInput(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n    if (optionIndex > -1) {\n      this.scrollToViewWithinParent(optionIndex);\n    }\n    this.inputOptionChanged.emit({\n      value,\n      name: this.name,\n    });\n  }\n\n  scrollToViewWithinParent(optionIndex: number) {\n    const option = this.options[optionIndex];\n    const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n    const parentElement = this.optionsRef;\n\n    this.ariaActivedescendant = option.value.toString();\n\n    // Scroll child into view within parent\n    const childRect = childElement.getBoundingClientRect();\n    const parentRect = parentElement.getBoundingClientRect();\n\n    if (childRect.top < parentRect.top) {\n      // Child is above the visible area of the parent\n      parentElement.scrollTop -= parentRect.top - childRect.top;\n    } else if (childRect.bottom > parentRect.bottom) {\n      // Child is below the visible area of the parent\n      parentElement.scrollTop += childRect.bottom - parentRect.bottom;\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  handleClick(event: Event): void {\n    if (this.isOpen) {\n      const value = (event.target as HTMLInputElement).value;\n      const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n      if (optionIndex > -1) {\n        setTimeout(() => {\n          this.scrollToViewWithinParent(optionIndex);\n        }, 10);\n      }\n    }\n  }\n\n  handleListboxKeydown(e) {\n    const items = this.filteredOptions;\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      if (!this.isOpen) {\n        this.isOpen = true;\n        this.shouldAutoScroll = true;\n        return;\n      }\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  // 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=\"id_dropdown\">\n        <input\n          type=\"text\"\n          name={this.name}\n          id={this.name}\n          part=\"id_dropdown-input\"\n          class={{ dropbtn: true, open: this.isOpen }}\n          value={this.inputValue}\n          onClick={(e: Event) => {\n            this.toggleDropdown();\n            this.shouldAutoScroll = true;\n            this.handleClick(e);\n          }}\n          aria-haspopup=\"listbox\"\n          aria-label={this.name}\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          onKeyDown={e => this.handleComboboxKeyDown(e)}\n          onInput={event => this.handleOnInput(event)}\n        />\n        {this.isOpen ? (\n          <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\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                <li\n                  tabindex=\"0\"\n                  key={option.value}\n                  id={option.value}\n                  onClick={() => this.selectOption(option)}\n                  role=\"option\"\n                  class={{\n                    focused: this.ariaActivedescendant === option.value.toString(),\n                  }}\n                >\n                  {option.labelHTML ? option.labelHTML : option.label}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n",".time-period-selector {\n  display: grid;\n  gap: 0.5rem;\n  grid-template-columns: auto 1fr;\n\n  select-dropdown,\n  input-dropdown {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  select-dropdown {\n    width: 116px;\n  }\n  input-dropdown {\n    width: 84px;\n    display: flex;\n    align-items: center;\n  }\n\n  select-dropdown#time-period::part(sd_dropdown-button) {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: inherit;\n    height: 100%;\n  }\n  input-dropdown#time-number::part(id_dropdown-input) {\n    border: none;\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  input-dropdown::part(id_dropdown-input) {\n    padding: 17px;\n    gap: 1rem;\n  }\n  input-dropdown::part(id_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n  select-dropdown::part(sd_dropdown) {\n    width: inherit;\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    padding: 1rem;\n    gap: 1rem;\n    justify-content: space-between;\n  }\n  select-dropdown::part(sd_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n  hours: 'hour',\n  days: 'day',\n  weeks: 'week',\n  months: 'month',\n};\n\n@Component({\n  tag: 'time-period-selector',\n  styleUrl: 'time-period-selector.scss',\n  scoped: true,\n})\nexport class TimePeriodSelector {\n  @Element() host!: HTMLElement;\n\n  // The possible values for the time periods dropdown\n  @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n  /**\n   * The default selected time period.\n   */\n  @Prop() defaultSelectedPeriod: string = 'hour';\n\n  /**\n   * The default selected number.\n   */\n  @Prop() defaultSelectedNumber: number = 1;\n\n  /**\n   * The currently selected time period\n   */\n  @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n  /**\n   * The currently selected number of the time period\n   */\n  @State() selectedNumber: number = this.defaultSelectedNumber;\n\n  /*\n   * The options for the number dropdown, to be calculated based on the selectedPeriod\n   */\n  @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod || 'hour').map(i => {\n    return {\n      label: i.toString(),\n      value: i.toString(),\n    };\n  });\n\n  /**\n   * The options for the time period dropdown\n   */\n  @State() timePeriodOptions = this.timePeriods.map(period => {\n    return {\n      label: period,\n      value: period,\n    };\n  });\n\n  @Watch('defaultSelectedPeriod')\n  defaultSelectedPeriodChangedHandler(newValue: string) {\n    this.selectedPeriod = newValue;\n    const period = pluralToSingular[newValue] ?? newValue;\n    this.updateNumberOptionsAndSelectedNumber(period);\n  }\n\n  @Watch('defaultSelectedNumber')\n  defaultSelectedNumberChangedHandler(newValue: number) {\n    this.selectedNumber = newValue;\n  }\n\n  @Watch('timePeriods')\n  timePeriodsChangedHandler(newValue: string[]) {\n    this.timePeriodOptions = newValue.map(period => {\n      return {\n        label: period,\n        value: period,\n      };\n    });\n  }\n\n  @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n  private calculateOptions(period: string): number[] {\n    switch (period) {\n      case 'hour':\n        return Array.from({ length: 23 }, (_, i) => i + 1);\n      case 'minute':\n        return Array.from({ length: 13 }, (_, i) => i * 5);\n      case 'day':\n        return Array.from({ length: 30 }, (_, i) => i + 1);\n      case 'week':\n        return Array.from({ length: 4 }, (_, i) => i + 1);\n      case 'month':\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      default:\n        return [];\n    }\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-period') {\n      this.selectedPeriod = value;\n      this.updateNumberOptionsAndSelectedNumber(value);\n    } else if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  updateNumberOptionsAndSelectedNumber(period: string) {\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n    this.selectedNumber = parseInt(this.numberOptions[0].value);\n  }\n\n  render() {\n    return (\n      <div class=\"time-period-selector\">\n        {/* <select-dropdown\n          id=\"time-number\"\n          name={'time-number'}\n          exportparts=\"sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content\"\n          options={this.numberOptions}\n          defaultSelectedOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString()) ?? this.numberOptions[0]}\n          withSearch={false}\n        /> */}\n        <input-dropdown\n          id=\"time-number\"\n          name={'time-number'}\n          inputValue={this.selectedNumber.toString()}\n          exportparts=\"sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content\"\n          options={this.numberOptions}\n          defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString()) ?? this.numberOptions[0]}\n        />\n        <select-dropdown\n          id=\"time-period\"\n          name={'time-period'}\n          options={this.timePeriodOptions}\n          exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n          pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n          defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod) ?? this.timePeriodOptions[0]}\n          withSearch={false}\n        />\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as s,c as t,a as i}from"./p-68c2fadf.js";const a=".sc-chevron-icon-h{display:flex}";const o=a;const n=class{constructor(s){e(this,s);this.width="24";this.height="24"}render(){return s("svg",{key:"a32876d49e77cfdd0622df9bc609c41e08f51440",xmlns:"http://www.w3.org/2000/svg",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none"},s("path",{key:"ec1fe551a0eaf4600374a57294a005c426ee8568",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.style=o;const r=".sc-search-icon-h{display:flex}";const l=r;const d=class{constructor(s){e(this,s);this.width="15";this.height="15"}render(){return s("svg",{key:"40a81a00f79c85303a904e3ef66e7833a240fff2",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"dd4c72fa1db6849fd72bfcb3fbde40f115caac11",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(s){e(this,s);this.nylasFormDropdownChanged=t(this,"nylasFormDropdownChanged",7);this.name=undefined;this.options=[];this.defaultSelectedOption=undefined;this.withSearch=true;this.label=undefined;this.required=false;this.pluralizedLabel="";this.selectedOption=this.defaultSelectedOption||null;this.isOpen=false;this.searchValue="";this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.errorMessage=""}optionsChangedHandler(e,s){if(e===s){return}this.filteredOptions=e}defaultSelectedOptionChangedHandler(e,s){if(e.label===s.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 s=e.target.value;this.searchValue=s;this.filteredOptions=this.options.filter((e=>e.label.toLowerCase().includes(s.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 s=this.filteredOptions;const t=s.findIndex((e=>e.value===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();if(t===s.length-1){this.ariaActivedescendant="";this.inputRef?.focus();return}const i=t+1<s.length?t+1:0;this.ariaActivedescendant=s[i].value;this.focusOption(i)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(t===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const i=t-1>=0?t-1:s.length-1;this.ariaActivedescendant=s[i].value;this.focusOption(i)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){this.selectOption(s[t])}}else if(e.key==="Escape"){this.isOpen=false}}focusOption(e){const s=this.filteredOptions[e];if(!s)return;const t=s.value;const i=this.el.shadowRoot?.getElementById(t);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}}handleOutsideClick(e){const s=e.composedPath();const t=s.includes(this.el);if(!t&&this.isOpen){this.isOpen=false}}render(){return s("div",{key:"ac6e39d604f87ee8e154147cc8f82ffcfd81feef",class:"dropdown",part:"sd_dropdown"},s("label",{key:"65ea5d43d46c9d3caa60b9d2a7453a75e3d59862",part:"sd_dropdown_label",class:{error:!!this.errorMessage}},this.label&&s("p",null,s("span",{class:"label"},this.label),this.required&&s("span",{class:"required"},"*")),s("button",{key:"a64e6e066a0e3b5c2436ea4ada9582995f416674",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)},s("slot",{key:"5558be7313b2513877366e5cc90c14059ca7a3d1",name:"select-icon","aria-hidden":"true"}),s("span",{key:"561f266038fa16b3422974b2bd6b5e7dcfeb1577",class:"selected-option",part:"sd_dropdown-button-selected-label"},this.selectedOption?.label?`${this.selectedOption?.label+this.pluralizedLabel}`:""),s("span",{key:"87308c6804530032c5e22750f8753e2589576d00",class:{open:this.isOpen,closed:!this.isOpen,chevron:true},"aria-hidden":"true"},s("chevron-icon",{key:"47be995d85c4e3c3895785f41c89a8a23d0d1a64",width:"16",height:"16"}))),this.errorMessage&&s("span",{class:"error help-text"},this.errorMessage)),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:"Search",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&&s("li",{tabindex:"0",key:e.value,id:e.value,onClick:()=>this.selectOption(e),role:"option"},e.labelHTML?e.labelHTML:e.label))))):null)}get el(){return i(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultSelectedOption:["defaultSelectedOptionChangedHandler"]}}};p.style=c;export{n as chevron_icon,d as search_icon,p as select_dropdown};
-//# sourceMappingURL=p-fbac3865.entry.js.map

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

@@ -1 +0,0 @@
-{"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","handleOutsideClick","path","composedPath","isClickInside","class","part","dropbtn","open","onClick","onKeyDown","pluralizedLabel","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 * @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  // 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 (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  // 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.selectedOption?.label ? `${this.selectedOption?.label + this.pluralizedLabel}` : ''}\n            </span>\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          </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 ? option.labelHTML : option.label}\n                    </li>\n                  ),\n              )}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}